fix date-input

dysTOS · Jan 19, 2024 · 3a3dc92 · 3a3dc92
1 parent cc37e24
commit 3a3dc92
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 16 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -38,7 +38,7 @@
     "normalize.css": "^8.0.1",
     "primeflex": "3.3",
     "primeicons": "^6.0.1",
-    "primeng": "^17.3.2",
+    "primeng": "^17.3.3",
     "prismjs": "^1.27.0",
     "rxjs": "^7.4.0",
     "subsink": "^1.0.2",

diff --git a/src/app/components/termine/termin-details/termin-details.component.ts b/src/app/components/termine/termin-details/termin-details.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild } from "@angular/core";
-import { ActivatedRoute } from "@angular/router";
+import { ActivatedRoute, Router } from "@angular/router";
 import { MenuItem } from "primeng/api";
 import { Menu } from "primeng/menu";
 import { Mitglied } from "src/app/models/Mitglied";
@@ -13,6 +13,7 @@ import { ExportService } from "../../../services/export.service";
 import { NotenListDatasource } from "src/app/utilities/_list-datasources/noten-list-datasource.class";
 import { NotenAutoCompleteConfigiguration } from "src/app/utilities/_autocomplete-configurations/noten-autocomplete-config.class";
 import { AppConfigService } from "src/app/services/app-config.service";
+import { PermissionMap } from "src/app/models/User";
 
 @Component({
     selector: "app-termin-details",
@@ -50,6 +51,7 @@ export class TerminDetailsComponent implements OnInit {
     constructor(
         public notenDatasource: NotenListDatasource,
         public configService: AppConfigService,
+        private router: Router,
         private route: ActivatedRoute,
         private termineApiService: TermineApiService,
         private infoService: InfoService,
@@ -77,6 +79,15 @@ export class TerminDetailsComponent implements OnInit {
 
     public updateToolbarButtons() {
         this.toolbarService.buttons = [
+            {
+                icon: "pi pi-pencil",
+                label: "Bearbeiten",
+                permissions: [PermissionMap.TERMIN_SAVE],
+                click: () =>
+                    this.router.navigate(["../../", this.termin.id], {
+                        relativeTo: this.route,
+                    }),
+            },
             {
                 icon: "pi pi-download",
                 label: "Exportieren",

diff --git a/src/app/components/termine/termine-overview/termine-overview.component.ts b/src/app/components/termine/termine-overview/termine-overview.component.ts
@@ -46,7 +46,7 @@ export class TermineOverviewComponent {
             command: () => this.duplicateAusrueckung(this.selectedRow),
         },
         {
-            label: "Editieren",
+            label: "Bearbeiten",
             icon: "pi pi-pencil",
             visible: this.userService.hasOneOfPermissions([
                 PermissionMap.TERMIN_SAVE,

diff --git a/src/app/utilities/form-input-components/mkj-date-input/mkj-date-input.component.html b/src/app/utilities/form-input-components/mkj-date-input/mkj-date-input.component.html
@@ -1,21 +1,38 @@
 <span class="p-float-label">
     <p-calendar
+        *ngIf="isDesktop"
         [inputId]="label"
         [(ngModel)]="internModel"
         (ngModelChange)="onModelChange($event)"
         [showTime]="type === MkjDateType.DATE ? false : true"
         [timeOnly]="type === MkjDateType.TIME ? true : false"
-        [dataType]="type === MkjDateType.TIME ? 'string' : 'date'"
+        [dataType]="type === MkjDateType.TIME ? 'date' : 'date'"
         showIcon="true"
         [icon]="type === MkjDateType.TIME ? 'pi pi-clock' : 'pi pi-calendar'"
         [showButtonBar]="type !== MkjDateType.TIME ? true : false"
-        [touchUI]="true"
-        [readonlyInput]="true"
+        [touchUI]="false"
+        [readonlyInput]="false"
         [appendTo]="'body'"
         [disabled]="isDisabled"
         (onBlur)="_registerOnTouched?.()"
         [class.ng-dirty]="formControl?.invalid"
         [class.ng-invalid]="formControl?.invalid"
     ></p-calendar>
+    <input
+        *ngIf="isDesktop === false"
+        pInputText
+        [type]="
+            type === MkjDateType.DATE
+                ? 'date'
+                : type === MkjDateType.TIME
+                ? 'time'
+                : 'datetime-local'
+        "
+        [id]="label"
+        [(ngModel)]="nativeModel"
+        (ngModelChange)="onNativeModelChange($event)"
+        [class.ng-dirty]="formControl?.invalid"
+        [class.ng-invalid]="formControl?.invalid"
+    />
     <label [for]="label">{{ label }}</label>
 </span>
diff --git a/src/app/utilities/form-input-components/mkj-date-input/mkj-date-input.component.ts b/src/app/utilities/form-input-components/mkj-date-input/mkj-date-input.component.ts
@@ -9,6 +9,7 @@ import {
 import { controlValueAccessor } from "src/app/providers/control-value-accessor";
 import moment from "moment";
 import { ControlValueAccessor, FormControl, NgControl } from "@angular/forms";
+import { UtilFunctions } from "src/app/helpers/util-functions";
 
 export enum MkjDateType {
     DATE = "date",
@@ -42,6 +43,8 @@ export class MkjDateInputComponent
     public _registerOnChange: (_: any) => void;
     public _registerOnTouched: () => void;
     public isDisabled: boolean = false;
+    public isDesktop: boolean = UtilFunctions.isDesktop();
+    public nativeModel: string;
 
     private _value: string | Date;
     @Input()
@@ -70,22 +73,21 @@ export class MkjDateInputComponent
 
     writeValue(obj: any): void {
         if (obj) {
+            this.nativeModel = obj;
             switch (this.type) {
                 case MkjDateType.DATE:
                     this.internModel = new Date(obj);
-
                     break;
                 case MkjDateType.TIME:
                     this.internModel = obj;
-
                     break;
                 case MkjDateType.COMBINED:
                     this.internModel = new Date(obj);
-
                     break;
             }
         } else {
             this.internModel = null;
+            this.nativeModel = null;
         }
     }
 
@@ -108,6 +110,32 @@ export class MkjDateInputComponent
             return;
         }
 
+        switch (this.type) {
+            case MkjDateType.DATE:
+                const date = moment(newDate).format("YYYY-MM-DD");
+                this.valueChanged.emit(date);
+                this._registerOnChange?.(date);
+                break;
+            case MkjDateType.TIME:
+                const time = moment(newDate).format("hh:mm");
+                this.valueChanged.emit(time);
+                this._registerOnChange?.(time);
+                break;
+            case MkjDateType.COMBINED:
+                const combined = moment(newDate).format("YYYY-MM-DD hh:mm:ss");
+                this.valueChanged.emit(date);
+                this._registerOnChange?.(combined);
+                break;
+        }
+    }
+
+    public onNativeModelChange(newDate: string) {
+        if (!newDate) {
+            this.valueChanged.emit(null);
+            this._registerOnChange?.(null);
+            return;
+        }
+
         switch (this.type) {
             case MkjDateType.DATE:
                 const date = moment(newDate).format("YYYY-MM-DD");