Swap 5087 scicat fe poc render frontend config with json fo

angular.json

@@ -56,7 +56,7 @@
                 {
                   "type": "initial",
                   "maximumWarning": "500kb",
-                  "maximumError": "4mb"
+                  "maximumError": "6mb"
                 },
                 {
                   "type": "anyComponentStyle",

src/app/_layout/app-header/app-header.component.html

@@ -80,6 +80,11 @@
   </mat-menu>
 
   <mat-menu #userMenu="matMenu">
+    <button mat-menu-item routerLink="/admin" data-cy="admin-button">
+      <mat-icon> build</mat-icon>
+      <span> Admin Settings <mat-chip class="beta-badge">Beta</mat-chip></span>
+    </button>
+
     <button mat-menu-item routerLink="/user/" data-cy="setting-button">
       <mat-icon> settings</mat-icon>
       <span>Settings</span>

src/app/_layout/app-header/app-header.component.scss

@@ -58,6 +58,13 @@
   }
 }
 
+.beta-badge {
+  height: 1.25rem;
+  font-size: 0.75rem;
+  margin-left: 0.5rem;
+  background-color: var(--theme-header-3-default);
+}
+
 @media only screen and (max-width: 1279px) {
   .large-screen-text {
     display: none;

src/app/_layout/layout.module.ts

@@ -12,6 +12,7 @@ import { AppMainLayoutComponent } from "./app-main-layout/app-main-layout.compon
 import { BatchCardModule } from "datasets/batch-card/batch-card.module";
 import { BreadcrumbModule } from "shared/modules/breadcrumb/breadcrumb.module";
 import { UsersModule } from "../users/users.module";
+import { MatChipsModule } from "@angular/material/chips";
 
 @NgModule({
   declarations: [
@@ -26,6 +27,7 @@ import { UsersModule } from "../users/users.module";
     MatButtonModule,
     MatIconModule,
     MatMenuModule,
+    MatChipsModule,
     MatToolbarModule,
     RouterModule,
     BreadcrumbModule,

src/app/admin/admin-config-edit/admin-config-edit.component.html

@@ -0,0 +1,33 @@
+<div style="display: flex; justify-content: space-between; margin-bottom: 10px">
+  <!-- LEFT -->
+  <div>
+    <button mat-button color="primary" (click)="save()">Json Preview</button>
+  </div>
+
+  <!-- RIGHT -->
+  <div>
+    <button mat-button color="primary" (click)="save()">Export</button>
+    <button mat-button color="primary" (click)="save()">Save</button>
+  </div>
+</div>
+<div>
+  <jsonforms
+    [data]="data$ | async"
+    [schema]="schema"
+    [uischema]="uiSchema"
+    [renderers]="renderers"
+    (dataChange)="onChange($event)"
+  ></jsonforms>
+  <div style="display: flex; justify-content: space-between; margin-top: 10px">
+    <!-- LEFT -->
+    <div>
+      <button mat-button color="primary" (click)="save()">Json Preview</button>
+    </div>
+
+    <!-- RIGHT -->
+    <div>
+      <button mat-button color="primary" (click)="save()">Export</button>
+      <button mat-button color="primary" (click)="save()">Save</button>
+    </div>
+  </div>
+</div>

src/app/admin/admin-config-edit/admin-config-edit.component.ts

@@ -0,0 +1,97 @@
+import { Component, OnInit } from "@angular/core";
+import { Store } from "@ngrx/store";
+import {
+  loadConfiguration,
+  updateConfiguration,
+} from "state-management/actions/admin.action";
+import { selectConfig } from "state-management/selectors/admin.selectors";
+import schema from "../schema/frontend.config.jsonforms.json";
+import { angularMaterialRenderers } from "@jsonforms/angular-material";
+import {
+  accordionArrayLayoutRendererTester,
+  AccordionArrayLayoutRendererComponent,
+} from "shared/modules/jsonforms-custom-renderers/expand-panel-renderer/accordion-array-layout-renderer.component";
+import { map } from "rxjs";
+import {
+  expandGroupTester,
+  ExpandGroupRendererComponent,
+} from "shared/modules/jsonforms-custom-renderers/expand-group-renderer/expand-group-renderer";
+import {
+  ArrayLayoutRendererCustom,
+  arrayLayoutRendererTester,
+} from "shared/modules/jsonforms-custom-renderers/ingestor-renderer/array-renderer";
+
+@Component({
+  selector: "admin-config-edit",
+  templateUrl: "./admin-config-edit.component.html",
+  styleUrls: ["./admin-config-edit.component.scss"],
+  standalone: false,
+})
+export class AdminConfigEditComponent implements OnInit {
+  config$ = this.store.select(selectConfig);
+  data$ = this.config$.pipe(
+    map((cfg) => {
+      if (!cfg?.data) return null;
+      const d = structuredClone(cfg.data);
+      d.labelsLocalization.dataset = this.toArray(d.labelsLocalization.dataset);
+      d.labelsLocalization.proposal = this.toArray(
+        d.labelsLocalization.proposal,
+      );
+      return d;
+    }),
+  );
+
+  showJsonPreview = false;
+  currentData: any = {};
+  schema: any = schema.schema || {};
+  uiSchema: any = schema.uiSchema || {};
+  renderers = [
+    ...angularMaterialRenderers,
+    {
+      tester: accordionArrayLayoutRendererTester,
+      renderer: AccordionArrayLayoutRendererComponent,
+    },
+    {
+      tester: expandGroupTester,
+      renderer: ExpandGroupRendererComponent,
+    },
+    {
+      tester: arrayLayoutRendererTester,
+      renderer: ArrayLayoutRendererCustom,
+    },
+  ];
+  constructor(private store: Store) {}
+
+  ngOnInit(): void {
+    this.store.dispatch(loadConfiguration());
+  }
+
+  toArray(obj: any) {
+    if (!obj) return [];
+    return Array.isArray(obj)
+      ? obj
+      : Object.entries(obj).map(([key, value]) => ({ key, value }));
+  }
+
+  toObject(arr: any) {
+    if (!arr) return {};
+    if (!Array.isArray(arr)) return arr;
+
+    return Object.fromEntries(arr.map((i) => [i.key, i.value]));
+  }
+
+  onChange(event: any) {
+    this.currentData = event;
+  }
+
+  save() {
+    const d = structuredClone(this.currentData);
+
+    d.labelsLocalization = {
+      dataset: this.toObject(d.labelsLocalization.dataset),
+      proposal: this.toObject(d.labelsLocalization.proposal),
+    };
+
+    this.store.dispatch(updateConfiguration({ config: d }));
+  }
+}

src/app/admin/admin-dashboard/admin-dashboard.component.html

@@ -0,0 +1,33 @@
+<!-- src/app/admin/admin-dashboard/admin-dashboard.component.html -->
+
+<nav mat-tab-nav-bar [tabPanel]="tabPanel">
+  <ng-container *ngFor="let link of navLinks">
+    <a
+      mat-tab-link
+      *ngIf="link.enabled"
+      routerLink="{{ link.location }}"
+      routerLinkActive
+      #rla="routerLinkActive"
+      [routerLinkActiveOptions]="routerLinkActiveOptions"
+      [active]="rla.isActive"
+      [replaceUrl]="true"
+      (click)="onTabSelected(link.label)"
+    >
+      <mat-icon>{{ link.icon }}</mat-icon>
+      <span>{{ link.label }}</span>
+    </a>
+  </ng-container>
+</nav>
+<!-- <ng-template>
+  <error-page
+    *ngIf="showError"
+    [errorTitle]="'Dataset not found'"
+    [message]="
+      'The dataset you are trying to view either doesn\'t exist or you don\'t have permission to view it.'
+    "
+  >
+  </error-page>
+</ng-template> -->
+<mat-tab-nav-panel #tabPanel>
+  <router-outlet></router-outlet>
+</mat-tab-nav-panel>

src/app/admin/admin-dashboard/admin-dashboard.component.ts

@@ -0,0 +1,82 @@
+import { ChangeDetectorRef, Component, OnInit } from "@angular/core";
+import { MatDialog } from "@angular/material/dialog";
+import { ActivatedRoute, IsActiveMatchOptions } from "@angular/router";
+import { UsersService } from "@scicatproject/scicat-sdk-ts-angular";
+import { AppConfigService } from "app-config.service";
+enum TAB {
+  configuration = "Configuration",
+  usersList = "Users List",
+}
+@Component({
+  selector: "app-admin-dashboard",
+  templateUrl: "./admin-dashboard.component.html",
+  styleUrls: ["./admin-dashboard.component.scss"],
+  standalone: false,
+})
+export class AdminDashboardComponent implements OnInit {
+  showError = false;
+  navLinks: {
+    location: string;
+    label: string;
+    icon: string;
+    enabled: boolean;
+  }[] = [];
+
+  routerLinkActiveOptions: IsActiveMatchOptions = {
+    matrixParams: "ignored",
+    queryParams: "ignored",
+    fragment: "ignored",
+    paths: "exact",
+  };
+
+  fetchDataActions: { [tab: string]: { action: any; loaded: boolean } } = {
+    [TAB.configuration]: { action: "", loaded: false },
+    [TAB.usersList]: { action: "", loaded: false },
+  };
+
+  constructor(
+    public appConfigService: AppConfigService,
+    private cdRef: ChangeDetectorRef,
+    private route: ActivatedRoute,
+    private userService: UsersService,
+    public dialog: MatDialog,
+  ) {}
+
+  ngOnInit(): void {
+    this.navLinks = [
+      {
+        location: "./configuration",
+        label: TAB.configuration,
+        icon: "menu",
+        enabled: true,
+      },
+      {
+        location: "./usersList",
+        label: TAB.usersList,
+        icon: "data_object",
+        enabled: true,
+      },
+    ];
+  }
+
+  onTabSelected(tab: string) {
+    this.fetchDataForTab(tab);
+  }
+  fetchDataForTab(tab: string) {
+    if (tab in this.fetchDataActions) {
+      switch (tab) {
+        case TAB.configuration:
+          break;
+        case TAB.usersList:
+          break;
+        default: {
+          // const { action, loaded } = this.fetchDataActions[tab];
+          // if (!loaded) {
+          //   this.fetchDataActions[tab].loaded = true;
+          //   this.store.dispatch(action(args));
+          // }
+        }
+      }
+    }
+  }
+}

src/app/admin/admin-userlist-view/admin-userlist-view.component.html

@@ -0,0 +1 @@
+<div>To be implemented</div>

src/app/admin/admin-userlist-view/admin-userlist-view.component.ts

@@ -0,0 +1,11 @@
+import { Component, OnInit } from "@angular/core";
+
+@Component({
+  selector: "admin-userlist-view",
+  templateUrl: "./admin-userlist-view.component.html",
+  styleUrls: ["./admin-userlist-view.component.scss"],
+  standalone: false,
+})
+export class AdminUserlistViewComponent {
+  constructor() {}
+}