Basic Setup Wizard / Admin UI

src/app/app-initializers.ts

@@ -28,7 +28,7 @@ export const appInitializers = {
       loginState: LoginStateSubject,
     ) =>
     async () => {
-      // Re-trigger services that depend on the config when something changes
+      // Re-trigger backup that depend on the config when something changes
       configService.configUpdates.subscribe(() => {
         routerService.initRouting();
         entityConfigService.setupEntitiesFromConfig();

src/app/app.module.ts

@@ -71,7 +71,6 @@ import {
 import { AttendanceModule } from "./child-dev-project/attendance/attendance.module";
 import { NotesModule } from "./child-dev-project/notes/notes.module";
 import { SchoolsModule } from "./child-dev-project/schools/schools.module";
-import { ConflictResolutionModule } from "./features/conflict-resolution/conflict-resolution.module";
 import { HistoricalDataModule } from "./features/historical-data/historical-data.module";
 import { MatchingEntitiesModule } from "./features/matching-entities/matching-entities.module";
 import { ProgressDashboardWidgetModule } from "./features/dashboard-widgets/progress-dashboard-widget/progress-dashboard-widget.module";
@@ -87,9 +86,7 @@ import { ImportModule } from "./core/import/import.module";
 import { ShortcutDashboardWidgetModule } from "./features/dashboard-widgets/shortcut-dashboard-widget/shortcut-dashboard-widget.module";
 import { EntityCountDashboardWidgetModule } from "./features/dashboard-widgets/entity-count-dashboard-widget/entity-count-dashboard-widget.module";
 import { BirthdayDashboardWidgetModule } from "./features/dashboard-widgets/birthday-dashboard-widget/birthday-dashboard-widget.module";
-import { ConfigSetupModule } from "./features/config-setup/config-setup.module";
 import { MarkdownPageModule } from "./features/markdown-page/markdown-page.module";
-import { AdminModule } from "./features/admin/admin.module";
 import { LoginStateSubject } from "./core/session/session-type";
 
 /**
@@ -123,10 +120,7 @@ import { LoginStateSubject } from "./core/session/session-type";
     NotesModule,
     SchoolsModule,
     // feature module
-    ConflictResolutionModule,
-    AdminModule,
     ImportModule,
-    ConfigSetupModule,
     FileModule,
     MarkdownPageModule,
     HistoricalDataModule,

src/app/app.routing.ts

@@ -22,6 +22,7 @@ import { UserAccountComponent } from "./core/user/user-account/user-account.comp
 import { SupportComponent } from "./core/support/support/support.component";
 import { AuthGuard } from "./core/session/auth.guard";
 import { LoginComponent } from "./core/session/login/login.component";
+import { UserRoleGuard } from "./core/permissions/permission-guard/user-role.guard";
 
 /**
  * Marks a class to be the target when routing.
@@ -60,6 +61,15 @@ export const allRoutes: Routes = [
         (c) => c.PublicFormComponent,
       ),
   },
+  {
+    path: "admin",
+    loadChildren: () =>
+      import("./core/admin/admin.module").then((m) => m.AdminModule),
+    canActivate: [UserRoleGuard],
+    data: {
+      permittedUserRoles: ["admin_app"],
+    },
+  },
   { path: "login", component: LoginComponent },
   { path: "404", component: NotFoundComponent },
 

src/app/child-dev-project/attendance/attendance.module.ts

@@ -20,8 +20,18 @@ import { ComponentRegistry } from "../../dynamic-components";
 import { attendanceComponents } from "./attendance-components";
 import { RecurringActivity } from "./model/recurring-activity";
 import { EventNote } from "./model/event-note";
+import { DefaultDatatype } from "../../core/entity/default-datatype/default.datatype";
+import { EventAttendanceDatatype } from "./model/event-attendance.datatype";
 
-@NgModule({})
+@NgModule({
+  providers: [
+    {
+      provide: DefaultDatatype,
+      useClass: EventAttendanceDatatype,
+      multi: true,
+    },
+  ],
+})
 export class AttendanceModule {
   static databaseEntities = [RecurringActivity, EventNote];
 

src/app/child-dev-project/attendance/model/event-attendance.datatype.spec.ts

@@ -0,0 +1,32 @@
+import { testDatatype } from "../../../core/entity/schema/entity-schema.service.spec";
+import { EventAttendanceDatatype } from "./event-attendance.datatype";
+import { EventAttendance } from "./event-attendance";
+import { defaultAttendanceStatusTypes } from "../../../core/config/default-config/default-attendance-status-types";
+import { DefaultDatatype } from "../../../core/entity/default-datatype/default.datatype";
+import { StringDatatype } from "../../../core/basic-datatypes/string/string.datatype";
+import { ConfigurableEnumDatatype } from "../../../core/basic-datatypes/configurable-enum/configurable-enum-datatype/configurable-enum.datatype";
+import { ConfigurableEnumService } from "../../../core/basic-datatypes/configurable-enum/configurable-enum.service";
+
+describe("Schema data type: event-attendance", () => {
+  testDatatype(
+    EventAttendanceDatatype,
+    new EventAttendance(defaultAttendanceStatusTypes[0], "test remark"),
+    {
+      status: defaultAttendanceStatusTypes[0].id,
+      remarks: "test remark",
+    },
+    undefined,
+    [
+      { provide: DefaultDatatype, useClass: StringDatatype, multi: true },
+      {
+        provide: DefaultDatatype,
+        useClass: ConfigurableEnumDatatype,
+        multi: true,
+      },
+      {
+        provide: ConfigurableEnumService,
+        useValue: { getEnumValues: () => defaultAttendanceStatusTypes },
+      },
+    ],
+  );
+});

src/app/child-dev-project/attendance/model/event-attendance.datatype.ts

@@ -0,0 +1,16 @@
+import { Injectable } from "@angular/core";
+import { SchemaEmbedDatatype } from "../../../core/basic-datatypes/schema-embed/schema-embed.datatype";
+import { EntitySchemaService } from "../../../core/entity/schema/entity-schema.service";
+import { EntityConstructor } from "../../../core/entity/model/entity";
+import { EventAttendance } from "./event-attendance";
+
+@Injectable()
+export class EventAttendanceDatatype extends SchemaEmbedDatatype {
+  static override dataType = EventAttendance.DATA_TYPE;
+
+  override embeddedType = EventAttendance as unknown as EntityConstructor;
+
+  constructor(schemaService: EntitySchemaService) {
+    super(schemaService);
+  }
+}

src/app/child-dev-project/attendance/model/event-attendance.ts

@@ -10,6 +10,8 @@ import { DatabaseField } from "../../../core/entity/database-field.decorator";
  * TODO overwork this concept to either be a sublass of Entity or not (at the moment it uses a lot of casting, e.g. to be used in the entity subrecord)
  */
 export class EventAttendance {
+  static DATA_TYPE = "event-attendance";
+
   private _status: AttendanceStatusType;
   @DatabaseField({
     dataType: "configurable-enum",

src/app/child-dev-project/notes/model/note.ts

@@ -89,8 +89,7 @@ export class Note extends Entity {
    * No direct access to change this property. Use the `.getAttendance()` method to have safe access.
    */
   @DatabaseField({
-    innerDataType: "schema-embed",
-    additional: EventAttendance,
+    innerDataType: EventAttendance.DATA_TYPE,
     anonymize: "retain",
   })
   private childrenAttendance: Map<string, EventAttendance> = new Map();

src/app/core/admin/admin-entity-details/admin-entity-field/admin-entity-field.component.html

@@ -0,0 +1,188 @@
+<h2 mat-dialog-title i18n>Configure Field "{{ entitySchemaField.label }}"</h2>
+<app-dialog-close mat-dialog-close></app-dialog-close>
+
+<mat-dialog-content>
+  <p i18n>
+    The field settings here apply to the record type overall and affect both the
+    field here in the current view as well as all other forms and lists where
+    this field is displayed.
+  </p>
+
+  <form [formGroup]="form">
+    <mat-tab-group formGroupName="schemaFields">
+      <mat-tab label="Basics" i18n-label>
+        <div class="grid-layout margin-top-regular">
+          <div class="entity-form-cell">
+            <mat-form-field>
+              <mat-label>Label</mat-label>
+              <input formControlName="label" matInput #formLabel />
+            </mat-form-field>
+
+            <mat-form-field floatLabel="always">
+              <mat-label>
+                Label (short)
+                <fa-icon
+                  icon="question-circle"
+                  matTooltip="Optionally you can define an additional shorter label to be displayed in table headers and other places where space is limited."
+                  i18n-matTooltip
+                ></fa-icon>
+              </mat-label>
+              <input
+                formControlName="labelShort"
+                matInput
+                [placeholder]="formLabel.value"
+              />
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label i18n>
+                Description
+                <fa-icon
+                  icon="question-circle"
+                  matTooltip="The description provides additional explanation or context about this field. It is usually displayed as a help icon with tooltip."
+                  i18n-matTooltip
+                ></fa-icon>
+              </mat-label>
+              <textarea
+                formControlName="description"
+                matInput
+                rows="3"
+              ></textarea>
+            </mat-form-field>
+          </div>
+
+          <div class="entity-form-cell">
+            <mat-form-field>
+              <mat-label i18n>
+                Field ID (readonly)
+                <fa-icon
+                  icon="question-circle"
+                  matTooltip="The internal ID of the field is used at a technical level in the database. The ID cannot be changed after the field has been created."
+                  i18n-matTooltip
+                ></fa-icon>
+              </mat-label>
+              <input [formControl]="fieldIdForm" matInput />
+              <fa-icon
+                *ngIf="fieldIdForm.disabled"
+                icon="lock"
+                matSuffix
+              ></fa-icon>
+              <mat-error *ngIf="fieldIdForm.hasError('uniqueId')">
+                {{ fieldIdForm.getError("uniqueId") }}
+              </mat-error>
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>Type</mat-label>
+              <app-basic-autocomplete
+                formControlName="dataType"
+                #formDataType
+                [options]="dataTypes"
+                [optionToString]="objectToLabel"
+                [valueMapper]="objectToValue"
+              ></app-basic-autocomplete>
+            </mat-form-field>
+
+            <!-- "additional" for enum datatype -->
+            <mat-form-field
+              *ngIf="
+                typeAdditionalOptions &&
+                formDataType.value === 'configurable-enum'
+              "
+            >
+              <mat-label i18n>
+                Type Details (dropdown options set)
+                <fa-icon
+                  icon="question-circle"
+                  matTooltip="Select an existing set of options to share between multiple fields or create a new, independent list of dropdown options."
+                  i18n-matTooltip
+                ></fa-icon>
+              </mat-label>
+
+              <app-basic-autocomplete
+                formControlName="additional"
+                [options]="typeAdditionalOptions ?? []"
+                [optionToString]="objectToLabel"
+                [valueMapper]="objectToValue"
+                [createOption]="createNewAdditionalOption"
+              ></app-basic-autocomplete>
+
+              <button
+                mat-icon-button
+                matSuffix
+                (click)="openEnumOptions($event)"
+              >
+                <fa-icon icon="wrench"></fa-icon>
+              </button>
+            </mat-form-field>
+
+            <!-- "additional" for entity ref datatypes -->
+            <mat-form-field
+              *ngIf="
+                (typeAdditionalOptions && formDataType.value === 'entity') ||
+                formDataType.value === 'entity-array'
+              "
+            >
+              <mat-label i18n>
+                Type Details (target record type)
+                <fa-icon
+                  icon="question-circle"
+                  matTooltip="Select from which type of records the user can select and link to with this field."
+                  i18n-matTooltip
+                ></fa-icon>
+              </mat-label>
+
+              <app-basic-autocomplete
+                formControlName="additional"
+                [options]="typeAdditionalOptions ?? []"
+                [optionToString]="objectToLabel"
+                [valueMapper]="objectToValue"
+                [createOption]="createNewAdditionalOption"
+              ></app-basic-autocomplete>
+            </mat-form-field>
+          </div>
+        </div>
+      </mat-tab>
+
+      <!--
+        ADVANCED SETTINGS
+      -->
+      <mat-tab
+        label="Advanced Options & Validation [COMING SOON]"
+        i18n-label
+        [disabled]="true"
+      >
+        <div class="grid-layout margin-top-regular">
+          <div class="entity-form-cell">
+            <mat-form-field>
+              <mat-label>Default Value</mat-label>
+              <input formControlName="defaultValue" matInput />
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>Anonymize</mat-label>
+              <input formControlName="anonymize" matInput />
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>Searchable</mat-label>
+              <input formControlName="searchable" matInput />
+            </mat-form-field>
+          </div>
+
+          <div class="entity-form-cell">
+            <mat-form-field>
+              <mat-label>Field Validation</mat-label>
+              <input formControlName="validators" matInput />
+            </mat-form-field>
+          </div>
+        </div>
+      </mat-tab>
+    </mat-tab-group>
+  </form>
+</mat-dialog-content>
+
+<mat-dialog-actions>
+  <button mat-button (click)="save()">Save</button>
+  <button mat-button mat-dialog-close>Cancel</button>
+</mat-dialog-actions>

src/app/core/admin/admin-entity-details/admin-entity-field/admin-entity-field.component.scss

@@ -0,0 +1,8 @@
+@use "../../../../../styles/mixins/grid-layout";
+
+.grid-layout {
+  @include grid-layout.adaptive(
+    $min-block-width: 250px,
+    $max-screen-width: 414px
+  );
+}