teams: smooth date time picker (fixes #9110)

.gitignore

@@ -25,7 +25,7 @@ node_modules/
 !.vscode/extensions.json
 
 # misc
-/.angular/cache
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage
@@ -57,3 +57,6 @@ planet.yml
 
 # Dev environment
 environment.dev.ts
+
+# Gemini CLI configuration
+gemini-extension.json

package.json

@@ -54,6 +54,7 @@
     "material-icons": "^0.3.1",
     "mime": "4.0.0",
     "ngx-image-cropper": "^3.2.1",
+    "ngx-material-timepicker": "^13.1.1",
     "pdfmake": "^0.1.63",
     "pouchdb": "^7.1.1",
     "pouchdb-authentication": "^1.1.3",

src/app/shared/dialogs/dialogs-form.component.html

@@ -67,19 +67,19 @@ <h1 mat-dialog-title><span><mat-icon>create</mat-icon>{{title}}</span></h1>
       </ng-container>
 
       <!-- Date Select -->
-      <mat-form-field *ngIf="field.type === 'date'" class="full-width">
-        <input matInput [matDatepicker]="dp" placeholder="{{field.placeholder}}" [formControl]="modalForm.controls[field.name]" required="{{field.required}}" [min]="field.min" [max]="field.max">
+      <mat-form-field *ngIf="field.type === 'date'" class="full-width" (click)="dp.open()">
+        <input matInput [matDatepicker]="dp" class="date-picker-input" placeholder="{{field.placeholder}}" [formControl]="modalForm.controls[field.name]" required="{{field.required}}" [min]="field.min" [max]="field.max">
         <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
         <mat-datepicker #dp></mat-datepicker>
         <mat-error><planet-form-error-messages [control]="modalForm.controls[field.name]"></planet-form-error-messages></mat-error>
       </mat-form-field>
 
       <!-- Time Select -->
-      <mat-form-field *ngIf="field.type === 'time'" class="full-width">
-        <input matInput type="time" [placeholder]="field.placeholder" [formControl]="modalForm.controls[field.name]" [required]="field.required">
+      <mat-form-field *ngIf="field.type === 'time'" class="full-width" (click)="openTimePicker(timeInput)">
+        <input #timeInput matInput type="time" class="time-picker-input" [placeholder]="field.placeholder" [formControl]="modalForm.controls[field.name]" [required]="field.required">
         <mat-error><planet-form-error-messages [control]="modalForm.controls[field.name]"></planet-form-error-messages></mat-error>
       </mat-form-field>
-
+      
       <!-- Slide Toggle -->
       <mat-slide-toggle *ngIf="field.type === 'toggle'" class="full-width" [formControl]="modalForm.controls[field.name]">{{field.label}}</mat-slide-toggle>
 

src/app/shared/dialogs/dialogs-form.component.scss

@@ -0,0 +1,21 @@
+  .checkbox-wrapper:last-child {
+      margin: 0 0 20px 0;
+    }
+
+    .mat-radio-group.ng-touched.ng-invalid label {
+      border-bottom: 2px solid red;
+    }
+
+    .ng-touched.ng-valid {
+      border: none;
+    }
+
+    .date-picker-input{
+     cursor: pointer;
+    }
+
+    .time-picker-input {
+    cursor: pointer;
+    }
+
+

src/app/shared/dialogs/dialogs-form.component.ts

@@ -10,19 +10,7 @@ import { UserService } from '../user.service';
 
 @Component({
   templateUrl: './dialogs-form.component.html',
-  styles: [ `
-    .checkbox-wrapper:last-child {
-      margin: 0 0 20px 0;
-    }
-
-    .mat-radio-group.ng-touched.ng-invalid label {
-      border-bottom: 2px solid red;
-    }
-
-    .ng-touched.ng-valid {
-      border: none;
-    }
-  ` ]
+  styleUrls: [ './dialogs-form.component.scss' ]
 })
 export class DialogsFormComponent {
 
@@ -119,4 +107,17 @@ export class DialogsFormComponent {
     return this.modalForm.dirty;
   }
 
+  openTimePicker(timeInput: HTMLInputElement) {
+    if (timeInput.showPicker) {
+      try {
+        timeInput.showPicker();
+      } catch (error) {
+        console.error(error);
+        timeInput.click(); // fallback for browsers that don't support showPicker but have it in the prototype chain
+      }
+    } else {
+      timeInput.click();
+    }
+  }
+
 }

src/app/shared/material.module.ts

@@ -29,8 +29,9 @@ import { MatStepperModule } from '@angular/material/stepper';
 import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
 import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatDatepickerModule } from '@angular/material/datepicker';
+import { NgxMaterialTimepickerModule } from 'ngx-material-timepicker';
 import { MatPaginatorIntl } from '@angular/material/paginator';
 import { CustomMatPaginatorIntl } from './custom-mat-paginator-intl.service';
 
@@ -76,6 +77,7 @@ export class CustomDateAdapter extends NativeDateAdapter {
     MatTabsModule,
     MatToolbarModule,
     MatTooltipModule,
+    NgxMaterialTimepickerModule,
   ],
   providers: [
     { provide: DateAdapter, useClass: CustomDateAdapter },