fix environments

angular.json

@@ -88,6 +88,7 @@
                             "outputHashing": "all"
                         },
                         "gulaschmusi": {
+                            "outputHashing": "all",
                             "budgets": [
                                 {
                                     "type": "initial",
@@ -100,23 +101,34 @@
                                     "maximumError": "10kb"
                                 }
                             ],
-
                             "index": {
-                                "input": "src/index.gulaschmusi.html",
+                                "input": "src/configurations/gmr/index.html",
                                 "output": "index.html"
                             },
-
                             "fileReplacements": [
                                 {
                                     "replace": "src/environments/environment.ts",
                                     "with": "src/environments/environment.gulaschmusi.ts"
+                                }
+                            ],
+                            "assets": [
+                                "src/assets",
+                                {
+                                    "input": "src/configurations/gmr",
+                                    "output": "/",
+                                    "glob": "*.json"
                                 },
                                 {
-                                    "replace": "src/manifest.json",
-                                    "with": "src/manifest.gulaschmusi.json"
+                                    "input": "src/configurations/gmr",
+                                    "output": "/",
+                                    "glob": "*.ico"
+                                },
+                                {
+                                    "input": "src/configurations/gmr/assets",
+                                    "output": "assets/",
+                                    "glob": "*.*"
                                 }
-                            ],
-                            "outputHashing": "all"
+                            ]
                         },
                         "development": {
                             "buildOptimizer": false,

src/app/app.component.ts

@@ -1,7 +1,7 @@
 import { Component } from "@angular/core";
 import { Router } from "@angular/router";
 import { PrimeNGConfig } from "primeng/api";
-import { MkjPrimeTranslation } from "src/app/configurations/primeTranslation";
+import { MkjPrimeTranslation } from "src/configurations/primeTranslation";
 import { AuthStateService } from "./services/authentication/auth-state.service";
 import { TokenService } from "./services/authentication/token.service";
 import { UserService } from "./services/authentication/user.service";

src/app/app.footer.component.ts

@@ -1,7 +1,7 @@
 import { Component } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 import { AppMainComponent } from "./app.main.component";
-import { MkjAppVersion } from "./configurations/changeLogVersion";
+import { MkjAppVersion } from "../configurations/changeLogVersion";
 
 @Component({
     selector: "app-footer",

src/app/app.module.ts

@@ -179,6 +179,8 @@ import { TerminTeilnahmeSelectorComponent } from "./utilities/mkj-termin-teilnah
 import { MkjTileComponent } from "./utilities/mkj-tile/mkj-tile.component";
 import { MkjToolbarComponent } from "./utilities/mkj-toolbar/mkj-toolbar.component";
 import { GlobaleEinstellungenComponent } from './components/einstellungen/globale-einstellungen/globale-einstellungen.component';
+import { MkjTextInputComponent } from './utilities/form-input-components/mkj-text-input/mkj-text-input.component';
+import { UiNamingConfigComponent } from './components/einstellungen/globale-einstellungen/ui-naming-config/ui-naming-config.component';
 
 // FullCalendarModule.registerPlugins([
 //     dayGridPlugin,
@@ -359,6 +361,8 @@ registerLocaleData(localeDe);
         MkjLinkInputComponent,
         MkjChangeLogsComponent,
         GlobaleEinstellungenComponent,
+        MkjTextInputComponent,
+        UiNamingConfigComponent,
     ],
     providers: [
         mkjAppInitializer(),

src/app/components/einstellungen/globale-einstellungen/globale-einstellungen.component.html

@@ -1,15 +1,5 @@
-<div *ngFor="let name of appNaming | keyvalue">
-    <div class="form-group">
-        <label for="name">{{ name.key }}</label>
-        <input
-            pInputText
-            type="text"
-            class="form-control"
-            id="name"
-            [ngModel]="name.value"
-            (ngModelChange)="editNaming[name.key] = $event"
-        />
-    </div>
-</div>
-
-<p-button label="Save" (onClick)="saveNaming()"></p-button>
+<p-tabView>
+    <p-tabPanel header="UI Naming">
+        <app-ui-naming-config></app-ui-naming-config>
+    </p-tabPanel>
+</p-tabView>

src/app/components/einstellungen/globale-einstellungen/globale-einstellungen.component.ts

@@ -1,23 +1,13 @@
 import { Component } from "@angular/core";
-import * as _ from "lodash";
-import { ConfigApiService } from "src/app/services/api/config-api.service";
-import { AppNamingService } from "src/app/services/config.service";
+import { MkjToolbarService } from "src/app/utilities/mkj-toolbar/mkj-toolbar.service";
 
 @Component({
     selector: "app-globale-einstellungen",
     templateUrl: "./globale-einstellungen.component.html",
     styleUrls: ["./globale-einstellungen.component.scss"],
 })
 export class GlobaleEinstellungenComponent {
-    public readonly appNaming = _.cloneDeep(this.namingService.appNaming);
-    public readonly editNaming = _.cloneDeep(this.namingService.appNaming);
-
-    constructor(
-        private namingService: AppNamingService,
-        private configService: ConfigApiService
-    ) {}
-
-    public saveNaming(): void {
-        this.configService.setUiNamingConfig(this.editNaming).subscribe();
+    constructor(toolBar: MkjToolbarService) {
+        toolBar.header = "Globale Einstellungen";
     }
 }

src/app/components/einstellungen/globale-einstellungen/ui-naming-config/ui-naming-config.component.html

@@ -0,0 +1,13 @@
+<div class="grid">
+    <ng-container *ngFor="let name of appNaming | keyvalue">
+        <div class="col-12 lg:col-3 md:col-4 sm:col-6">
+            <mkj-text-input
+                [label]="name.key"
+                [value]="name.value"
+                (valueChange)="editNaming[name.key] = $event"
+            ></mkj-text-input>
+        </div>
+    </ng-container>
+</div>
+
+<p-button label="Save" (onClick)="saveNaming()"></p-button>

src/app/components/einstellungen/globale-einstellungen/ui-naming-config/ui-naming-config.component.ts

@@ -0,0 +1,28 @@
+import { Component } from "@angular/core";
+import * as _ from "lodash";
+import { ConfigApiService } from "src/app/services/api/config-api.service";
+import { AppNamingService } from "src/app/services/config.service";
+import { InfoService } from "src/app/services/info.service";
+
+@Component({
+    selector: "app-ui-naming-config",
+    templateUrl: "./ui-naming-config.component.html",
+    styleUrls: ["./ui-naming-config.component.scss"],
+})
+export class UiNamingConfigComponent {
+    public readonly appNaming = _.cloneDeep(this.namingService.appNaming);
+    public readonly editNaming = _.cloneDeep(this.namingService.appNaming);
+
+    constructor(
+        private namingService: AppNamingService,
+        private configService: ConfigApiService,
+        private infoService: InfoService
+    ) {}
+
+    public saveNaming(): void {
+        this.configService.setUiNamingConfig(this.editNaming).subscribe({
+            next: (_) => this.infoService.success("Einstellungen gespeichert."),
+            error: (err) => this.infoService.error(err),
+        });
+    }
+}

src/app/pages/change-logs/change-logs.component.ts

@@ -2,7 +2,7 @@ import { Component } from "@angular/core";
 import {
     MkjAppChangeLog,
     MkjAppVersion,
-} from "src/app/configurations/changeLogVersion";
+} from "src/configurations/changeLogVersion";
 import { MkjToolbarService } from "src/app/utilities/mkj-toolbar/mkj-toolbar.service";
 
 @Component({

src/app/utilities/form-input-components/abstract-control-accessor.ts

@@ -0,0 +1,82 @@
+import {
+    Component,
+    EventEmitter,
+    Injector,
+    Input,
+    Output,
+} from "@angular/core";
+import { ControlValueAccessor, FormControl, NgControl } from "@angular/forms";
+import { BehaviorSubject, Observable, distinctUntilChanged } from "rxjs";
+
+@Component({
+    selector: "abstract-control-accessor",
+    template: "",
+})
+export abstract class AbstractControlAccessor<T>
+    implements ControlValueAccessor
+{
+    private _value = new BehaviorSubject<T>(null);
+    private _disabled = new BehaviorSubject(false);
+
+    private _registerOnChange: (_: T) => void;
+    private _registerOnTouched: () => void;
+
+    @Input()
+    public set value(value: T) {
+        this._value.next(value);
+    }
+
+    public get disabled(): boolean {
+        return this._disabled.value;
+    }
+
+    @Input()
+    public set disabled(isDisabled: boolean) {
+        this._disabled.next(isDisabled);
+    }
+
+    @Input()
+    public label: string;
+
+    @Output()
+    public valueChange = new EventEmitter<T>();
+
+    public get value$(): Observable<T> {
+        return this._value;
+    }
+
+    public get disabled$(): Observable<boolean> {
+        return this._disabled.pipe(distinctUntilChanged());
+    }
+
+    public formControl: FormControl;
+
+    constructor(private inj: Injector) {}
+
+    public ngAfterViewInit() {
+        this.formControl = this.inj.get(NgControl, null)
+            ?.control as FormControl;
+    }
+
+    public change(value: T) {
+        this._registerOnChange?.(value);
+        this.valueChange.emit(value);
+    }
+
+    public touch() {
+        this._registerOnTouched?.();
+    }
+
+    writeValue(obj: T): void {
+        this._value.next(obj);
+    }
+    registerOnChange(fn: any): void {
+        this._registerOnChange = fn;
+    }
+    registerOnTouched(fn: any): void {
+        this._registerOnTouched = fn;
+    }
+    setDisabledState(isDisabled: boolean): void {
+        this._disabled.next(isDisabled);
+    }
+}

src/app/utilities/form-input-components/mkj-text-input/mkj-text-input.component.html

@@ -0,0 +1,13 @@
+<span class="p-float-label">
+    <input
+        pInputText
+        [ngModel]="value$ | async"
+        (ngModelChange)="change($event)"
+        [disabled]="disabled$ | async"
+        (onBlur)="touch()"
+        [class.ng-dirty]="formControl?.invalid"
+        [class.ng-invalid]="formControl?.invalid"
+        class="w-full"
+    />
+    <label [for]="label">{{ label }}</label>
+</span>

src/app/utilities/form-input-components/mkj-text-input/mkj-text-input.component.ts

@@ -0,0 +1,15 @@
+import { Component, Injector } from "@angular/core";
+import { controlValueAccessor } from "src/app/providers/control-value-accessor";
+import { AbstractControlAccessor } from "../abstract-control-accessor";
+
+@Component({
+    selector: "mkj-text-input",
+    templateUrl: "./mkj-text-input.component.html",
+    styleUrls: ["./mkj-text-input.component.scss"],
+    providers: [controlValueAccessor(MkjTextInputComponent)],
+})
+export class MkjTextInputComponent extends AbstractControlAccessor<string> {
+    constructor(inj: Injector) {
+        super(inj);
+    }
+}