feat(): update fieldset

mixcore · Dec 2, 2023 · 6527c4f · 6527c4f
1 parent a5f2459
commit 6527c4f
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 62 deletions.
diff --git a/apps/mix-cms/src/app/shares/consts/app.menu.ts b/apps/mix-cms/src/app/shares/consts/app.menu.ts
@@ -1,10 +1,12 @@
+import { MenuItem } from '@mixcore/lib/model';
 import { CMS_ROUTES } from '../../app.routes';
 
-export const APP_MENU = [
+export const APP_MENU = <MenuItem[]>[
   {
     title: 'Dashboard',
     url: CMS_ROUTES.portal.dashboard.fullPath,
     icon: 'dashboard',
+    iconColor: '#00ACC1',
     children: [
       {
         icon: 'analytics',
@@ -22,6 +24,7 @@ export const APP_MENU = [
     title: 'Posts',
     url: CMS_ROUTES.portal.post.fullPath,
     icon: 'post_add',
+    iconColor: '#EC652C',
     children: [
       {
         icon: 'format_list_numbered',
@@ -49,6 +52,7 @@ export const APP_MENU = [
     title: 'Pages',
     url: CMS_ROUTES.portal.page.fullPath,
     icon: 'lab_profile',
+    iconColor: '#2190E4',
     children: [
       {
         icon: 'format_list_numbered',
@@ -61,6 +65,7 @@ export const APP_MENU = [
     title: 'Modules',
     url: CMS_ROUTES.portal.module.fullPath,
     icon: 'view_module',
+    iconColor: '#63D8FF',
     children: [
       {
         icon: 'format_list_numbered',
@@ -73,6 +78,7 @@ export const APP_MENU = [
     title: 'Mix Dbs',
     url: CMS_ROUTES.portal.database.fullPath,
     icon: 'database',
+    iconColor: '#BB56CF',
     children: [
       {
         icon: 'format_list_numbered',
@@ -111,6 +117,7 @@ export const APP_MENU = [
   {
     title: 'Projects',
     url: CMS_ROUTES.portal['database-data'].fullPath + '/mixTask',
+    iconColor: '#3EAF12',
     icon: 'view_kanban',
     children: [
       {
@@ -119,7 +126,7 @@ export const APP_MENU = [
         icon: 'view_kanban',
       },
     ],
-  }
+  },
 ];
 
 export const APP_NOT_SUPPER_ADMIN_MENU = [

diff --git a/libs/mix-lib/src/model/core/portal-menu.model.ts b/libs/mix-lib/src/model/core/portal-menu.model.ts
@@ -8,5 +8,6 @@ export interface PortalMenu {
   status: MixContentStatus;
   role: string;
   portalMenuId?: number;
+  iconColor?: string;
   childMenu?: PortalMenu[];
 }
diff --git a/libs/mix-lib/src/model/menu.model.ts b/libs/mix-lib/src/model/menu.model.ts
@@ -3,6 +3,7 @@ export type MenuItem = {
   url: string;
   path?: string;
   icon?: string;
+  iconColor?: string;
   children?: MenuItem[];
   align?: 'top' | 'bottom';
 };
diff --git a/libs/mix-share/src/auth/auth.service.ts b/libs/mix-share/src/auth/auth.service.ts
@@ -215,11 +215,15 @@ export class AuthService extends BaseApiService {
     );
   }
 
-  public initPortalsMenu() {
-    if (
+  public isSupperAdmin() {
+    return (
       !this.currentRoles.length ||
       this.currentRoles.some((x) => x.name === MixRoleConst.SuperAdmin)
-    ) {
+    );
+  }
+
+  public initPortalsMenu() {
+    if (this.isSupperAdmin()) {
       this.portalMenu = this.FULL_ROUTES;
       return of(this.FULL_ROUTES);
     }

diff --git a/libs/mix-share/src/components/main-side-menu/main-side-menu.component.html b/libs/mix-share/src/components/main-side-menu/main-side-menu.component.html
@@ -1,63 +1,58 @@
 <div class="side-menu d-flex">
-  <div class="side-menu__icon-bar" [ngClass]="{ '--active': showDetail }">
-    <div class="side-menu__item --fixed" (click)="showDetail = !showDetail">
+  <div class="side-menu__icon-bar"
+       [ngClass]="{ '--active': showDetail }">
+    <div class="side-menu__item --fixed"
+         (click)="showDetail = !showDetail">
       <div class="side-menu__parent-container">
         <span class="mix-icon side-menu__icon"> menu </span>
       </div>
     </div>
 
     @for(item of menu; track item) {
-    <tui-hosted-dropdown
-      class="w-100"
-      [canOpen]="!showDetail"
-      [content]="dropdown"
-      [sided]="true"
-      [tuiDropdownHideDelay]="50"
-      [tuiDropdownShowDelay]="0"
-      tuiDropdownHover
-      tuiDropdownDirection="bottom"
-    >
-      <div
-        class="side-menu__item"
-        [ngClass]="{
+    <tui-hosted-dropdown class="w-100"
+                         [canOpen]="!showDetail"
+                         [content]="dropdown"
+                         [sided]="true"
+                         [tuiDropdownHideDelay]="50"
+                         [tuiDropdownShowDelay]="0"
+                         tuiDropdownHover
+                         tuiDropdownDirection="bottom">
+      <div class="side-menu__item"
+           [ngClass]="{
           '--open': isMenuSelected(item, selectedMenu),
           '--active': isMenuSelected(item, selectedMenu)
         }"
-        (click)="onMenuSelect(item)"
-      >
+           (click)="onMenuSelect(item)">
         <div class="side-menu__parent-container">
-          <span *ngIf="item.icon" class="mix-icon side-menu__icon">
+          <span *ngIf="item.icon"
+                class="mix-icon side-menu__icon"
+                [style.--icon-color]="item.iconColor">
             {{ item.icon }}
           </span>
 
-          <span *ngIf="showDetail" class="side-menu__item-title">
+          <span *ngIf="showDetail"
+                class="side-menu__item-title">
             {{ item.title | transloco }}
           </span>
         </div>
 
-        <span
-          *ngIf="showDetail && item.children?.length"
-          class="side-menu__item-toggle mix-icon"
-          [ngClass]="{ '--active': isMenuSelected(item, selectedMenu) }"
-          (click)="$event.stopPropagation(); onMenuSelect(item)"
-        >
+        <span *ngIf="showDetail && item.children?.length"
+              class="side-menu__item-toggle mix-icon"
+              [ngClass]="{ '--active': isMenuSelected(item, selectedMenu) }"
+              (click)="$event.stopPropagation(); onMenuSelect(item)">
           chevron_right
         </span>
 
-        <div
-          *ngIf="
+        <div *ngIf="
             showDetail &&
             item.children?.length &&
             isMenuSelected(item, selectedMenu)
           "
-          class="side-menu__child-container"
-        >
-          <div
-            *ngFor="let child of item.children"
-            class="side-menu__child-item ripple-gray"
-            [routerLink]="'/' + child.url"
-            (click)="$event.stopPropagation()"
-          >
+             class="side-menu__child-container">
+          <div *ngFor="let child of item.children"
+               class="side-menu__child-item ripple-gray"
+               [routerLink]="'/' + child.url"
+               (click)="$event.stopPropagation()">
             <span class="mix-icon">{{
               child.icon || 'fiber_manual_record'
             }}</span>
@@ -68,20 +63,20 @@
         </div>
       </div>
 
-      <ng-template #dropdown let-close="close">
+      <ng-template #dropdown
+                   let-close="close">
         <tui-data-list>
           <tui-opt-group>
-            <button
-              *ngFor="let item of item.children"
-              class="menu"
-              [routerLink]="'/' + item.url"
-              [routerLinkActive]="'--active'"
-              [routerLinkActiveOptions]="{ exact: true }"
-              (click)="onMenuSelect(item)"
-              style="justify-content: flex-start"
-              tuiOption
-            >
-              <span *ngIf="item.icon" class="mix-icon me-2">
+            <button *ngFor="let item of item.children"
+                    class="menu"
+                    [routerLink]="'/' + item.url"
+                    [routerLinkActive]="'--active'"
+                    [routerLinkActiveOptions]="{ exact: true }"
+                    (click)="onMenuSelect(item)"
+                    style="justify-content: flex-start"
+                    tuiOption>
+              <span *ngIf="item.icon"
+                    class="mix-icon me-2">
                 {{ item.icon }}
               </span>
 
@@ -93,13 +88,15 @@
     </tui-hosted-dropdown>
     }
 
-    <div class="side-menu__item mt-auto" (click)="showSetting()">
+    <div class="side-menu__item mt-auto"
+         (click)="showSetting()">
       <div class="side-menu__parent-container">
         <span class="mix-icon side-menu__icon">
           {{ settingMenu.icon }}
         </span>
 
-        <span *ngIf="showDetail" class="side-menu__item-title">
+        <span *ngIf="showDetail"
+              class="side-menu__item-title">
           {{ settingMenu.title | transloco }}
         </span>
       </div>

diff --git a/libs/mix-share/src/components/main-side-menu/main-side-menu.component.scss b/libs/mix-share/src/components/main-side-menu/main-side-menu.component.scss
@@ -25,6 +25,9 @@
   }
 
   &__icon {
+    --icon-color: #000;
+
+    color: var(--icon-color);
     font-size: 20px;
   }
 

diff --git a/libs/mix-share/src/components/main-side-menu/main-side-menu.component.ts b/libs/mix-share/src/components/main-side-menu/main-side-menu.component.ts
@@ -7,6 +7,7 @@ import {
   inject,
 } from '@angular/core';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { MenuItem } from '@mixcore/lib/model';
 import { fadeInExpandOnEnterAnimation } from '@mixcore/share/animation';
 import { AuthService } from '@mixcore/share/auth';
 import { MixIconButtonComponent } from '@mixcore/ui/icon-button';
@@ -20,14 +21,6 @@ import {
 } from '@taiga-ui/core';
 import { SettingDialogComponent } from '../setting-dialog/setting-dialog.component';
 
-export type MenuItem = {
-  title: string;
-  url: string;
-  icon?: string;
-  children?: MenuItem[];
-  align?: 'top' | 'bottom';
-};
-
 @Component({
   selector: 'mix-main-side-menu',
   standalone: true,