improve action on mobile

src/app/pages/publications/edit-action/edit-action.page.html

@@ -20,30 +20,18 @@
         <div class="ion-icon-class">
           <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
         </div>
-        <div class="ion-input-class flex-grow-1">
-          <ion-datetime
-            class="d-block d-md-none"
-            [(ngModel)]="folder.DateBegin"
-            placeholder="Início"
-            displayFormat="D MMM YYYY H:mm"
-            minuteValues="0,5,10,15,20,25,30,35,40,45,50,55"
-            monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
-            min="{{minDate}}"
-            max="2025">
-          </ion-datetime>
+        <div class="ion-input-class flex-grow-1" [class.input-error]="Form?.get('Date')?.invalid && validateFrom ">
 
-
-          <mat-form-field appearance="none" class="width-100 date-hour-picker d-none  d-md-block">
+          <mat-form-field appearance="none" class="width-100 date-hour-picker">
             <input matInput [ngxMatDatetimePicker]="picker1"
               placeholder="Choose a date*"
-              [formControl]="folder.DateBegin"
-              [disabled]="disabled"
+              [(ngModel)]="folder.DateBegin"
             >
             <mat-datepicker-toggle id="new-inicio" matSuffix [for]="picker1"></mat-datepicker-toggle>
             <ngx-mat-datetime-picker #picker1
               [showSpinners]="showSpinners"
               [showSeconds]="showSeconds"
-              [stepHour]="stepHour" [stepMinute]="stepMinute"
+              [stepHour]="1" [stepMinute]="12"
               [stepSecond]="stepSecond"
               [touchUi]="touchUi">
             </ngx-mat-datetime-picker>
@@ -58,30 +46,19 @@
         <div class="ion-icon-class">
           <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
         </div>
-        <div class="ion-input-class d-flex flex-grow-1">
-          <ion-datetime
-            class="flex-grow-1 d-block d-md-none"
-            [(ngModel)]="folder.DateEnd"
-            placeholder="Fim"
-            displayFormat="D MMM YYYY H:mm"
-            minuteValues="0,5,10,15,20,25,30,35,40,45,50,55"
-            monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
-            min="{{minDate}}"
-            max="2025">
-          </ion-datetime>
+        <div class="ion-input-class d-flex flex-grow-1" [class.input-error]="Form?.get('Date')?.invalid && validateFrom ">
 
-          <mat-form-field class="width-100 date-hour-picker d-none d-md-block">
+          <mat-form-field class="width-100 date-hour-picker">
             <input matInput [ngxMatDatetimePicker]="fim"
               placeholder="Choose a date*"
-              [formControl]="folder.DateEnd"
+              [(ngModel)]="folder.DateEnd"
               [min]="maxDate"
-              [disabled]="disabled"
             >
             <mat-datepicker-toggle id="new-fim" matSuffix [for]="fim"></mat-datepicker-toggle>
             <ngx-mat-datetime-picker #fim
               [showSpinners]="showSpinners"
               [showSeconds]="showSeconds"
-              [stepHour]="stepHour" [stepMinute]="stepMinute"
+              [stepHour]="1" [stepMinute]="15"
               [stepSecond]="stepSecond"
               [touchUi]="touchUi">
             </ngx-mat-datetime-picker>

src/app/pages/publications/edit-action/edit-action.page.ts

@@ -6,11 +6,28 @@ import { PublicationFolder } from 'src/app/models/publicationfolder';
 import { PublicationsService } from 'src/app/services/publications.service';
 import { ToastService } from 'src/app/services/toast.service';
 import { HttpErrorHandle} from 'src/app/services/http-error-handle.service';
+import { NGX_MAT_DATE_FORMATS } from '@angular-material-components/datetime-picker';
+import { NgxMatDateFormats } from '@angular-material-components/datetime-picker';
+
+const CUSTOM_DATE_FORMATS: NgxMatDateFormats = {
+  parse: {
+    dateInput: "YYYY-MMMM-DD HH:mm"
+  },
+  display: {
+    dateInput: "DD MMM YYYY H:mm",
+    monthYearLabel: "MMM YYYY",
+    dateA11yLabel: "LL",
+    monthYearA11yLabel: "MMMM YYYY"
+  }
+}
 
 @Component({
   selector: 'app-edit-action',
   templateUrl: './edit-action.page.html',
   styleUrls: ['./edit-action.page.scss'],
+  providers: [
+    { provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS },
+  ]
 })
 export class EditActionPage implements OnInit {
 
@@ -28,8 +45,6 @@ export class EditActionPage implements OnInit {
   public stepHour = 1;
   public stepMinute = 15;
   public stepSecond = 5;
-  public dateControlStart = new FormControl(moment("DD MM YYYY hh"));
-  public dateControlEnd = new FormControl(moment("DD MM YYYY hh"));
   currentDate = new Date();
   
   folder: PublicationFolder;
@@ -71,26 +86,12 @@ export class EditActionPage implements OnInit {
   getPublicationDetail() {
     this.publicationsService.GetPresidentialAction(this.folderId).subscribe( res => {
       this.folder = res;
-      
-      this.dateControlStart = new FormControl(moment(new Date(this.folder.DateBegin)));
-      this.dateControlEnd = new FormControl(moment(new Date(this.folder.DateEnd)));
 
     });
   }
 
   get dateValid() {
-    var validado: boolean;
-
-    if (window.innerWidth <= 800) {
-      if ((this.folder.DateBegin < this.folder.DateEnd) && (new Date(this.folder.DateBegin).getTime() > this.currentDate.getTime())) {
-        validado = true;
-      }else{
-        validado = false;
-      }
-      return validado == true ? ['ok']: [];
-    } else {
-      return ['ok']
-    }
+    return new Date(this.folder.DateBegin).getTime() < new Date(this.folder.DateEnd).getTime()? 'ok': null
   }
 
   runValidation() {

version/git-version.ts

@@ -1,12 +1,12 @@
 export let versionData = {
-  "shortSHA": "2d8107fc6",
-  "SHA": "2d8107fc61265f346825a46a5557a009da0ff7f7",
+  "shortSHA": "1b9f5a25c",
+  "SHA": "1b9f5a25cb0229cdb51b82ee43aa9d5cbff75bb7",
   "branch": "developer-prod",
   "lastCommitAuthor": "'Peter Maquiran'",
-  "lastCommitTime": "'Wed Aug 30 13:55:39 2023 +0100'",
-  "lastCommitMessage": "change icons",
-  "lastCommitNumber": "5236",
+  "lastCommitTime": "'Wed Aug 30 14:18:05 2023 +0100'",
+  "lastCommitMessage": "agenda drop down calendar",
+  "lastCommitNumber": "5237",
   "change": "",
-  "changeStatus": "On branch developer-prod\nChanges to be committed:\n  (use \"git restore --staged <file>...\" to unstage)\n\tmodified:   src/app/pages/agenda/agenda.page.html\n\tmodified:   src/app/pages/agenda/agenda.page.ts\n\tmodified:   src/app/services/agenda/list-box.service.ts\n\tmodified:   workspace.code-workspace",
+  "changeStatus": "On branch developer-prod\nChanges to be committed:\n  (use \"git restore --staged <file>...\" to unstage)\n\tmodified:   src/app/pages/publications/edit-action/edit-action.page.html\n\tmodified:   src/app/pages/publications/edit-action/edit-action.page.ts",
   "changeAuthor": "peter.maquiran"
 }