Merge branch 'feature-explorer' into develop

apps/cloud/src/app/@shared/feature-toggle/feature-toggle.component.html

@@ -3,17 +3,23 @@
 		[disabled]="!enabledFeature(feature)">
 	  <mat-expansion-panel-header>
 		<mat-panel-title>
-		  {{ feature.name }}
+		  {{ 'PAC.Feature.Features.' + feature.code + '.Name' | translate: {Default: feature.name } }}
 		</mat-panel-title>
 		<mat-panel-description class="flex justify-end items-center">
-		  {{ feature.description }}
+		  {{ 'PAC.Feature.Features.' + feature.code + '.Description' | translate: {Default: feature.description } }}
 		</mat-panel-description>
-		<mat-slide-toggle [checked]="enabledFeature(feature)" (change)="featureChanged($event.checked, feature)"></mat-slide-toggle>
+
+		<mat-slide-toggle class="inline-flex" [checked]="enabledFeature(feature)" (change)="featureChanged($event.checked, feature)"></mat-slide-toggle>
 	  </mat-expansion-panel-header>
 
 	  <mat-list *ngIf="feature?.children.length > 0" displayDensity="cosy">
 		<mat-list-item *ngFor="let child of feature.children">
-			<mat-checkbox [checked]="enabledFeature(child)" (change)="featureChanged($event.checked, child)">{{ child?.name }}</mat-checkbox>
+			<mat-checkbox [checked]="enabledFeature(child)" (change)="featureChanged($event.checked, child)">
+				<div class="flex items-center gap-4">
+					<span>{{ 'PAC.Feature.Features.' + child.code + '.Name' | translate: {Default: child.name } }}</span>
+					<span class="text-sm italic">{{ 'PAC.Feature.Features.' +  child.code + '.Description' | translate: {Default: child.description } }}</span>
+				</div>
+			</mat-checkbox>
 		</mat-list-item>
 	  </mat-list>
 

apps/cloud/src/app/@shared/feature-toggle/feature-toggle.component.scss

@@ -1,3 +1,7 @@
 :host {
     @apply w-full;
+}
+
+.mat-mdc-slide-toggle {
+    @apply inline-flex;
 }

apps/cloud/src/app/@shared/feature-toggle/feature-toggle.component.ts

@@ -1,31 +1,30 @@
-import { Component, OnChanges, OnInit, SimpleChanges } from '@angular/core'
+import { Component, OnInit, inject } from '@angular/core'
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
 import { MatDialog } from '@angular/material/dialog'
 import { ActivatedRoute } from '@angular/router'
+import { CountdownConfirmationComponent } from '@metad/components/confirm'
 import { IFeature, IFeatureOrganization, IFeatureToggle } from '@metad/contracts'
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'
-import { TranslateService } from '@ngx-translate/core'
-import { CountdownConfirmationComponent } from '@metad/components/confirm'
 import { combineLatest, firstValueFrom, of } from 'rxjs'
-import {
-  distinctUntilChanged,
-  map,
-  shareReplay,
-  startWith,
-  switchMap,
-  tap,
-  withLatestFrom
-} from 'rxjs/operators'
+import { distinctUntilChanged, map, shareReplay, startWith, switchMap, tap, withLatestFrom } from 'rxjs/operators'
 import { environment } from '../../../environments/environment'
 import { FeatureService, FeatureStoreService, Store } from '../../@core/services'
 import { TranslationBaseComponent } from '../language/translation-base.component'
 
+
 @UntilDestroy({ checkProperties: true })
 @Component({
   selector: 'pac-feature-toggle',
   templateUrl: './feature-toggle.component.html',
   styleUrls: ['./feature-toggle.component.scss']
 })
-export class FeatureToggleComponent extends TranslationBaseComponent implements OnInit, OnChanges {
+export class FeatureToggleComponent extends TranslationBaseComponent implements OnInit {
+  private readonly _activatedRoute = inject(ActivatedRoute)
+  private readonly _featureService = inject(FeatureService)
+  private readonly _featureStoreService = inject(FeatureStoreService)
+  private readonly _storeService = inject(Store)
+  private readonly _matDialog = inject(MatDialog)
+
   loading = false
   featureToggles = []
   featureTogglesDefinitions: IFeatureToggle[] = []
@@ -34,7 +33,7 @@ export class FeatureToggleComponent extends TranslationBaseComponent implements
     startWith(this._activatedRoute.snapshot.data),
     map((data) => data?.isOrganization),
     distinctUntilChanged(),
-    untilDestroyed(this),
+    takeUntilDestroyed(),
     shareReplay(1)
   )
   public readonly organization$ = this._storeService.selectedOrganization$
@@ -52,21 +51,10 @@ export class FeatureToggleComponent extends TranslationBaseComponent implements
       }
       return this._featureStoreService.loadFeatureOrganizations(['feature'], request).pipe(map(({ items }) => items))
     }),
-    untilDestroyed(this),
+    takeUntilDestroyed(),
     shareReplay(1)
   )
 
-  constructor(
-    private readonly _activatedRoute: ActivatedRoute,
-    private readonly _featureService: FeatureService,
-    private readonly _featureStoreService: FeatureStoreService,
-    private readonly _storeService: Store,
-    public readonly translationService: TranslateService,
-    private readonly _matDialog: MatDialog
-  ) {
-    super()
-  }
-
   ngOnInit(): void {
     combineLatest([this.featureTenant$, this.featureOrganizations$])
       .pipe(withLatestFrom(combineLatest([this.isOrganization$, this.organization$])), untilDestroyed(this))
@@ -99,45 +87,43 @@ export class FeatureToggleComponent extends TranslationBaseComponent implements
       .subscribe()
   }
 
-  ngOnChanges(change: SimpleChanges): void {}
-
   getFeatures() {
     this._featureStoreService.loadFeatures(['children']).pipe(untilDestroyed(this)).subscribe()
   }
 
-  async featureChanged(event: boolean, feature: IFeature) {
+  async featureChanged(isEnabled: boolean, feature: IFeature) {
     const result = await firstValueFrom(
       this._matDialog
         .open(CountdownConfirmationComponent, {
-          // context: {
-          // 	recordType: feature.description,
-          // 	isEnabled: isEnabled
-          // },
+          data: {
+          	recordType: feature.description,
+          	isEnabled: isEnabled
+          },
         })
         .afterClosed()
     )
 
     if (result) {
-      await this.emitFeatureToggle({ feature, isEnabled: !!event })
+      await this.emitFeatureToggle({ feature, isEnabled: !!isEnabled })
     } else {
       if (!environment.IS_ELECTRON) {
         window.location.reload()
       }
     }
   }
 
-  async emitFeatureToggle({feature, isEnabled}: { feature: IFeature; isEnabled: boolean }) {
+  async emitFeatureToggle({ feature, isEnabled }: { feature: IFeature; isEnabled: boolean }) {
     const isOrganization = await firstValueFrom(this.isOrganization$)
     const organization = await firstValueFrom(this.organization$)
     const { id: featureId } = feature
-        const request = {
-          featureId,
-          isEnabled
-        }
-        if (organization && isOrganization) {
-          const { id: organizationId } = organization
-          request['organizationId'] = organizationId
-        }
+    const request = {
+      featureId,
+      isEnabled
+    }
+    if (organization && isOrganization) {
+      const { id: organizationId } = organization
+      request['organizationId'] = organizationId
+    }
     await firstValueFrom(this._featureStoreService.changedFeature(request))
     if (!environment.IS_ELECTRON) {
       window.location.reload()

apps/cloud/src/app/@theme/header/organization-selector/organization-selector.component.ts

@@ -1,18 +1,18 @@
 import { CommonModule } from '@angular/common'
-import { Component, OnInit, inject } from '@angular/core'
+import { Component, DestroyRef, OnInit, inject } from '@angular/core'
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
 import { MatIconModule } from '@angular/material/icon'
 import { MatMenuModule } from '@angular/material/menu'
 import { MatTooltipModule } from '@angular/material/tooltip'
 import { Ability } from '@casl/ability'
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'
 import { nonNullable } from '@metad/core'
 import { uniqBy } from 'lodash-es'
 import { filter, map, shareReplay, switchMap, tap } from 'rxjs'
 import { AbilityActions, IOrganization, Store, UsersOrganizationsService } from '../../../@core'
 import { OrgAvatarComponent } from '../../../@shared'
 import { TranslationBaseComponent } from '../../../@shared/language/translation-base.component'
 
-@UntilDestroy()
+
 @Component({
   standalone: true,
   selector: 'pac-organization-selector',
@@ -23,6 +23,7 @@ export class OrganizationSelectorComponent extends TranslationBaseComponent impl
   private readonly store = inject(Store)
   private readonly userOrganizationService = inject(UsersOrganizationsService)
   private readonly ability = inject(Ability)
+  private readonly destroyRef = inject(DestroyRef)
 
   selectedOrganization: IOrganization
 
@@ -76,7 +77,7 @@ export class OrganizationSelectorComponent extends TranslationBaseComponent impl
             ]
           : organizations
       ),
-      untilDestroyed(this),
+      takeUntilDestroyed(),
       shareReplay(1)
     )
 
@@ -94,7 +95,7 @@ export class OrganizationSelectorComponent extends TranslationBaseComponent impl
           this.selectedOrganization = organization
           this.store.featureOrganizations = organization.featureOrganizations ?? []
         }),
-        untilDestroyed(this)
+        takeUntilDestroyed(this.destroyRef)
       )
       .subscribe()
   }
@@ -108,7 +109,10 @@ export class OrganizationSelectorComponent extends TranslationBaseComponent impl
       this.store.selectedOrganization = null
       this.store.organizationId = null
       this.store.selectedEmployee = null
-      this.selectedOrganization = { name: 'All Org', id: null } as IOrganization
+      this.selectedOrganization = {
+        name: this.getTranslation('PAC.Header.Organization.AllOrg', { Default: 'All Org' }),
+        id: null
+      } as IOrganization
     }
   }
 }

apps/cloud/src/app/app.component.ts

@@ -67,7 +67,7 @@ export class AppComponent implements OnInit {
   ngOnInit() {
     combineLatest([this.appService.isMobile$, this.store.preferredTheme$])
     .subscribe(([isMobile, preferredTheme]) => {
-      const [primaryTheme, primaryColor] = preferredTheme.split('-')
+      const [primaryTheme, primaryColor] = (preferredTheme ?? '').split('-')
       preferredTheme = preferredTheme ?? ThemesEnum.default
       const theme = `ngm-theme-${preferredTheme} ${primaryTheme} ${preferredTheme}`
       // for body

apps/cloud/src/app/features/features.module.ts

@@ -12,6 +12,7 @@ import { DataSource, Type } from '@metad/ocap-core'
 import { LetDirective } from '@ngrx/component'
 import { PacAuthModule } from '@metad/cloud/auth'
 import { NxTableModule } from '@metad/components/table'
+import { NgmFormlyModule } from '@metad/formly'
 import { NgmCopilotService } from '@metad/core'
 import { PACMaterialThemeModule } from '@metad/material-theme'
 import { NX_STORY_FEED, NX_STORY_MODEL, NX_STORY_STORE } from '@metad/story/core'
@@ -50,7 +51,10 @@ import { FeaturesComponent } from './features.component'
     CopilotChatComponent,
     NxTableModule.forRoot(),
     DensityDirective,
-    CopilotGlobalComponent
+    CopilotGlobalComponent,
+
+    // Formly
+    NgmFormlyModule.forRoot({}),
   ],
   providers: [
     DirtyCheckGuard,

apps/cloud/src/app/features/home/_home-theme.scss

@@ -1,21 +1,17 @@
 @use 'sass:map';
 @use 'sass:color';
 @use '@angular/material' as mat;
-@use './insight/insight-theme' as insight;
 @use './dashboard/dashboard-theme' as dashboard;
 
 @mixin color($theme) {
-  @include insight.color($theme);
   @include dashboard.color($theme);
 }
 
 @mixin typography($theme) {
-  @include insight.typography($theme);
   @include dashboard.typography($theme);
 }
 
 @mixin density($theme) {
-  @include insight.density($theme);
   @include dashboard.density($theme);
 }
 

apps/cloud/src/app/features/home/_home.scss

@@ -1,3 +1,5 @@
+@import './insight/_insight.component';
+
 .pac-home__content {
   .pac-home__gridster-item {
     background: transparent;