RED-3800: make some admin components standalone

apps/red-ui/src/app/modules/admin/admin.module.ts

@@ -8,7 +8,7 @@ import { EntitiesListingScreenComponent } from './screens/entities-listing/entit
 import { DigitalSignatureScreenComponent } from './screens/digital-signature/digital-signature-screen.component';
 import { FileAttributesListingScreenComponent } from './screens/file-attributes-listing/file-attributes-listing-screen.component';
 import { UserListingScreenComponent } from './screens/user-listing/user-listing-screen.component';
-import { DossierTemplateBreadcrumbsComponent } from './components/dossier-template-breadcrumbs/dossier-template-breadcrumbs.component';
+import { DossierTemplateBreadcrumbsComponent } from './shared/components/dossier-template-breadcrumbs/dossier-template-breadcrumbs.component';
 import { AddEditFileAttributeDialogComponent } from './dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component';
 import { AddEditCloneDossierTemplateDialogComponent } from './dialogs/add-edit-dossier-template-dialog/add-edit-clone-dossier-template-dialog.component';
 import { AddEntityDialogComponent } from './dialogs/add-entity-dialog/add-entity-dialog.component';
@@ -33,14 +33,13 @@ import { UploadDictionaryDialogComponent } from './dialogs/upload-dictionary-dia
 import { GeneralConfigFormComponent } from './screens/general-config/general-config-form/general-config-form.component';
 import { SmtpFormComponent } from './screens/general-config/smtp-form/smtp-form.component';
 import { FileAttributesConfigurationsDialogComponent } from './dialogs/file-attributes-configurations-dialog/file-attributes-configurations-dialog.component';
-import { SharedAdminModule } from './shared/shared-admin.module';
 import { BaseDossierTemplateScreenComponent } from './base-dossier-templates-screen/base-dossier-template-screen.component';
 import { DossierStatesListingScreenComponent } from './screens/dossier-states-listing/dossier-states-listing-screen.component';
 import { AddEditDossierStateDialogComponent } from './dialogs/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component';
 import { A11yModule } from '@angular/cdk/a11y';
 import { ConfirmDeleteDossierStateDialogComponent } from './dialogs/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component';
 import { BaseEntityScreenComponent } from './base-entity-screen/base-entity-screen.component';
-import { AdminSideNavComponent } from './admin-side-nav/admin-side-nav.component';
+import { AdminSideNavComponent } from './shared/components/admin-side-nav/admin-side-nav.component';
 import { SystemPreferencesFormComponent } from './screens/general-config/system-preferences-form/system-preferences-form.component';
 import { ConfigureCertificateDialogComponent } from './dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component';
 import { PkcsSignatureConfigurationComponent } from './dialogs/configure-digital-signature-dialog/form/pkcs-signature-configuration/pkcs-signature-configuration.component';
@@ -60,6 +59,7 @@ import {
 } from '@iqser/common-ui';
 import { TranslateModule } from '@ngx-translate/core';
 import { AuditInfoDialogComponent } from './dialogs/audit-info-dialog/audit-info-dialog.component';
+import { DossierTemplateActionsComponent } from './shared/components/dossier-template-actions/dossier-template-actions.component';
 
 const dialogs = [
     AddEditCloneDossierTemplateDialogComponent,
@@ -91,9 +91,7 @@ const screens = [
 ];
 
 const components = [
-    DossierTemplateBreadcrumbsComponent,
     UsersStatsComponent,
-    AdminSideNavComponent,
     ActiveFieldsListingComponent,
     ResetPasswordComponent,
     UserDetailsComponent,
@@ -117,7 +115,6 @@ const components = [
         CommonModule,
         SharedModule,
         AdminRoutingModule,
-        SharedAdminModule,
         A11yModule,
         IqserUsersModule,
         TranslateModule,
@@ -131,6 +128,9 @@ const components = [
         IqserSharedModule,
         IqserHelpModeModule,
         IqserPermissionsModule,
+        AdminSideNavComponent,
+        DossierTemplateActionsComponent,
+        DossierTemplateBreadcrumbsComponent,
     ],
 })
 export class AdminModule {}

apps/red-ui/src/app/modules/admin/screens/dossier-templates-listing/dossier-templates-listing.module.ts

@@ -4,7 +4,6 @@ import { RouterModule } from '@angular/router';
 import { SharedModule } from '@shared/shared.module';
 import { TableItemComponent } from './table-item/table-item.component';
 import { DossierTemplatesListingScreenComponent } from './dossier-templates-listing-screen/dossier-templates-listing-screen.component';
-import { SharedAdminModule } from '../../shared/shared-admin.module';
 import {
     IqserButtonsModule,
     IqserHelpModeModule,
@@ -14,6 +13,7 @@ import {
     IqserUsersModule,
 } from '@iqser/common-ui';
 import { TranslateModule } from '@ngx-translate/core';
+import { DossierTemplateActionsComponent } from '../../shared/components/dossier-template-actions/dossier-template-actions.component';
 
 const routes = [{ path: '', component: DossierTemplatesListingScreenComponent }];
 
@@ -23,7 +23,6 @@ const routes = [{ path: '', component: DossierTemplatesListingScreenComponent }]
         RouterModule.forChild(routes),
         CommonModule,
         SharedModule,
-        SharedAdminModule,
         IqserUsersModule,
         TranslateModule,
         IqserInputsModule,
@@ -31,6 +30,7 @@ const routes = [{ path: '', component: DossierTemplatesListingScreenComponent }]
         IqserListingModule,
         IqserHelpModeModule,
         IqserPermissionsModule,
+        DossierTemplateActionsComponent,
     ],
 })
 export class DossierTemplatesListingModule {}

apps/red-ui/src/app/modules/admin/screens/dossier-templates-listing/table-item/table-item.component.html

@@ -6,7 +6,7 @@
         <div class="small-label stats-subtitle">
             <div *ngIf="stats$ | async as stats">
                 <mat-icon svgIcon="red:dictionary"></mat-icon>
-                {{ 'dossier-templates-listing.entities' | translate: { length: stats.numberOfDictionaries } }}
+                {{ 'dossier-templates-listing.entities' | translate : { length: stats.numberOfDictionaries } }}
             </div>
         </div>
     </div>
@@ -22,25 +22,25 @@
 
 <div class="cell">
     <div class="small-label">
-        {{ dossierTemplate.dateAdded | date: 'd MMM yyyy' }}
+        {{ dossierTemplate.dateAdded | date : 'd MMM yyyy' }}
     </div>
 </div>
 
 <div class="cell">
     <div class="small-label">
-        {{ dossierTemplate.dateModified | date: 'd MMM yyyy' }}
+        {{ dossierTemplate.dateModified | date : 'd MMM yyyy' }}
     </div>
 </div>
 
 <div class="cell">
     <div class="small-label">
-        {{ dossierTemplate.validFrom | date: 'd MMM yyyy' }}
+        {{ dossierTemplate.validFrom | date : 'd MMM yyyy' }}
     </div>
 </div>
 
 <div class="cell">
     <div class="small-label">
-        {{ dossierTemplate.validTo | date: 'd MMM yyyy' }}
+        {{ dossierTemplate.validTo | date : 'd MMM yyyy' }}
     </div>
 </div>
 
@@ -48,6 +48,7 @@
     <div class="small-label">
         {{ translations[dossierTemplate.dossierTemplateStatus] | translate }}
     </div>
+
     <redaction-dossier-template-actions
         [dossierTemplateId]="dossierTemplate.dossierTemplateId"
         class="actions-container"

apps/red-ui/src/app/modules/admin/screens/entities/entities.module.ts

@@ -6,7 +6,6 @@ import { DictionaryScreenComponent } from './screens/dictionary/dictionary-scree
 import { PendingChangesGuard } from '@guards/can-deactivate.guard';
 import { EntityInfoComponent } from './screens/entity-info/entity-info.component';
 import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
-import { SharedAdminModule } from '../../shared/shared-admin.module';
 import { TranslateModule } from '@ngx-translate/core';
 import { IqserHelpModeModule, IqserPermissionsModule, IqserScrollbarModule } from '@iqser/common-ui';
 
@@ -38,7 +37,6 @@ const routes: Routes = [
     declarations: [DictionaryScreenComponent, EntityInfoComponent],
     imports: [
         RouterModule.forChild(routes),
-        SharedAdminModule,
         CommonModule,
         SharedModule,
         MonacoEditorModule,

apps/red-ui/src/app/modules/admin/shared/components/admin-side-nav/admin-side-nav.component.ts

@@ -2,10 +2,12 @@ import { Component, HostBinding, Input, OnInit } from '@angular/core';
 import { UserPreferenceService } from '@users/user-preference.service';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { adminSideNavTranslations } from '@translations/admin-side-nav-translations';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, RouterLink, RouterLinkActive } from '@angular/router';
 import { AdminSideNavType, AdminSideNavTypes, ENTITY_TYPE, User } from '@red/domain';
 import { ROLES } from '@users/roles';
-import { getCurrentUser, IqserPermissionsService } from '@iqser/common-ui';
+import { getCurrentUser, IqserHelpModeModule, IqserPermissionsService, SideNavComponent } from '@iqser/common-ui';
+import { TranslateModule } from '@ngx-translate/core';
+import { NgForOf, NgIf } from '@angular/common';
 
 interface NavItem {
     readonly label: string;
@@ -18,6 +20,8 @@ interface NavItem {
     selector: 'redaction-admin-side-nav [type]',
     templateUrl: './admin-side-nav.component.html',
     styleUrls: ['./admin-side-nav.component.scss'],
+    standalone: true,
+    imports: [TranslateModule, NgIf, IqserHelpModeModule, RouterLink, RouterLinkActive, NgForOf, SideNavComponent],
 })
 export class AdminSideNavComponent implements OnInit {
     @Input() type: AdminSideNavType;

apps/red-ui/src/app/modules/admin/shared/components/dossier-template-actions/dossier-template-actions.component.ts

@@ -1,20 +1,23 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { AdminDialogService } from '../../../services/admin-dialog.service';
-import { CircleButtonTypes, LoadingService } from '@iqser/common-ui';
-import { getCurrentUser } from '@users/user.service';
+import { CircleButtonComponent, CircleButtonTypes, getCurrentUser, IqserHelpModeModule, LoadingService } from '@iqser/common-ui';
 import { DossierTemplatesService } from '@services/dossier-templates/dossier-templates.service';
 import { firstValueFrom } from 'rxjs';
-import { DOSSIER_TEMPLATE_ID } from '@red/domain';
+import { DOSSIER_TEMPLATE_ID, type User } from '@red/domain';
+import { NgIf } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     selector: 'redaction-dossier-template-actions',
     templateUrl: './dossier-template-actions.component.html',
     styleUrls: ['./dossier-template-actions.component.scss'],
+    standalone: true,
+    imports: [NgIf, IqserHelpModeModule, CircleButtonComponent, TranslateModule],
 })
 export class DossierTemplateActionsComponent implements OnInit {
     readonly circleButtonTypes = CircleButtonTypes;
-    readonly currentUser = getCurrentUser();
+    readonly currentUser = getCurrentUser<User>();
 
     @Input() dossierTemplateId: string;
 

apps/red-ui/src/app/modules/admin/shared/components/dossier-template-breadcrumbs/dossier-template-breadcrumbs.component.ts

@@ -2,14 +2,19 @@ import { Component, Input } from '@angular/core';
 import { DossierTemplatesService } from '@services/dossier-templates/dossier-templates.service';
 import { Observable, of } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, RouterLink, RouterLinkActive } from '@angular/router';
 import { Dictionary, DOSSIER_TEMPLATE_ID, DossierTemplate, ENTITY_TYPE } from '@red/domain';
 import { DictionariesMapService } from '@services/entity-services/dictionaries-map.service';
+import { AsyncPipe, NgIf } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     selector: 'redaction-dossier-template-breadcrumbs',
     templateUrl: './dossier-template-breadcrumbs.component.html',
     styleUrls: ['./dossier-template-breadcrumbs.component.scss'],
+    standalone: true,
+    imports: [NgIf, AsyncPipe, RouterLink, MatIconModule, TranslateModule, RouterLinkActive],
 })
 export class DossierTemplateBreadcrumbsComponent {
     @Input() root = false;

apps/red-ui/src/app/modules/admin/shared/shared-admin.module.ts

@@ -1,18 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { SharedModule } from '@shared/shared.module';
-import { DossierTemplateActionsComponent } from './components/dossier-template-actions/dossier-template-actions.component';
-import { RouterModule } from '@angular/router';
-import { TranslateModule } from '@ngx-translate/core';
-import { IqserButtonsModule, IqserHelpModeModule } from '@iqser/common-ui';
-
-const components = [DossierTemplateActionsComponent];
-
-const modules = [CommonModule, SharedModule];
-
-@NgModule({
-    declarations: [...components],
-    exports: [...components, ...modules],
-    imports: [...modules, RouterModule, TranslateModule, IqserButtonsModule, IqserHelpModeModule],
-})
-export class SharedAdminModule {}

apps/red-ui/src/app/modules/shared/components/donut-chart/donut-chart.component.html

@@ -20,6 +20,7 @@
     <div [style]="'height: ' + size + 'px; width: ' + size + 'px; padding: ' + (strokeWidth + 5) + 'px;'" class="text-container">
         <div class="heading-xl">{{ displayedDataTotal }}</div>
         <div *ngIf="subtitles.length === 1" class="mt-5">{{ subtitles[0] }}</div>
+
         <mat-select
             (selectionChange)="subtitleChanged.emit(subtitles.indexOf($event.value))"
             *ngIf="subtitles.length > 1"
@@ -48,8 +49,7 @@
                     }
                 ]"
                 [small]="true"
-            >
-            </iqser-status-bar>
+            ></iqser-status-bar>
         </div>
     </div>
 </div>

apps/red-ui/src/app/modules/shared/components/donut-chart/donut-chart.component.ts

@@ -1,13 +1,17 @@
 import { Component, EventEmitter, Input, OnChanges, OnInit, Optional, Output } from '@angular/core';
 import { DonutChartConfig } from '@red/domain';
-import { FilterService, get, INestedFilter, shareLast } from '@iqser/common-ui';
+import { FilterService, get, INestedFilter, IqserHelpModeModule, shareLast, StatusBarComponent } from '@iqser/common-ui';
 import { Observable, of } from 'rxjs';
 import { map } from 'rxjs/operators';
+import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
+import { MatSelectModule } from '@angular/material/select';
 
 @Component({
     selector: 'redaction-donut-chart',
     templateUrl: './donut-chart.component.html',
     styleUrls: ['./donut-chart.component.scss'],
+    standalone: true,
+    imports: [NgForOf, NgIf, MatSelectModule, IqserHelpModeModule, StatusBarComponent, AsyncPipe],
 })
 export class DonutChartComponent implements OnChanges, OnInit {
     @Input() subtitles: string[];
@@ -45,11 +49,12 @@ export class DonutChartComponent implements OnChanges, OnInit {
     }
 
     ngOnInit() {
-        this.filters$ =
-            this.filterService?.getFilterModels$(this.filterKey).pipe(
-                map(filters => filters ?? []),
-                shareLast(),
-            ) ?? of([]);
+        const filterModels$ = this.filterService?.getFilterModels$(this.filterKey).pipe(
+            map(filters => filters ?? []),
+            shareLast(),
+        );
+
+        this.filters$ = filterModels$ ?? of([]);
     }
 
     ngOnChanges(): void {

apps/red-ui/src/app/modules/shared/shared.module.ts

@@ -50,7 +50,6 @@ const buttons = [FileDownloadBtnComponent];
 const components = [
     PaginationComponent,
     AnnotationIconComponent,
-    DonutChartComponent,
     SelectComponent,
     DictionaryManagerComponent,
     AssignUserDropdownComponent,
@@ -77,6 +76,8 @@ const services = [SharedDialogService];
 
 const modules = [MatConfigModule, ScrollingModule, IconsModule, FormsModule, IqserButtonsModule, ReactiveFormsModule, ColorPickerModule];
 
+const deleteThisWhenAllComponentsAreStandalone = [DonutChartComponent];
+
 @NgModule({
     declarations: [...components, ...utils, EditorComponent, DownloadDialogComponent],
     imports: [
@@ -90,8 +91,9 @@ const modules = [MatConfigModule, ScrollingModule, IconsModule, FormsModule, Iqs
         IqserSharedModule,
         IqserScrollbarModule,
         IqserPermissionsModule,
+        ...deleteThisWhenAllComponentsAreStandalone,
     ],
-    exports: [...modules, ...components, ...utils],
+    exports: [...modules, ...components, ...utils, ...deleteThisWhenAllComponentsAreStandalone],
     providers: [
         ...services,
         {

libs/common-ui

@@ -1 +1 @@
-Subproject commit 223080763f280c58c50f739d316bfd7f50bdcab1
+Subproject commit 08d06803e023f279fe48eb3fe3c20bacf9d9e538