Improve validation for desktop

src/app/pages/gabinete-digital/expediente/book-meeting-modal/book-meeting-modal.page.html

@@ -9,24 +9,41 @@
       </div>
       <div class="overflow-y-auto content-default-padding">
         
-        <div class="ion-item-container width-100">
+        <div class="ion-item-container width-100" [class.input-error]="Form?.get('Subject')?.invalid && validateFrom ">
           <ion-input placeholder="Assunto*" [(ngModel)]="postData.Subject"></ion-input>
         </div>
 
+        <div *ngIf="Form && validateFrom" >
+          <div *ngIf="Form.get('Subject').invalid " class="input-errror-message">
+            <div *ngIf="Form.get('Subject').errors?.required">
+              Campo obrigatório.
+            </div>
+            <div *ngIf="Form.get('Subject').errors?.minlength">
+              O campo deve ter pelo menos 4 caracteres.
+            </div>
+          </div>
+        </div>
+
         <div class="container-div width-100">
           <div class="ion-item-class-2 width-100">
             <div class="ion-icon-class">
               <ion-icon slot="start" src="assets/images/icons-location.svg"></ion-icon>
             </div>
-            <div class="ion-input-class">
+            <div class="ion-input-class" [class.input-error]="Form?.get('Location')?.invalid  && validateFrom ">
               <ion-input placeholder="Localização*" [(ngModel)]="postData.Location"></ion-input>
             </div>
           </div>
-          <!-- Error messages -->
+        </div>
-          <span class="error ion-padding" *ngIf="formLocationSatus">
-            Campo obrigatório
-          </span>
 
+        <div *ngIf="Form && validateFrom" >
+          <div *ngIf="Form.get('Location').invalid " class="input-errror-message">
+            <div *ngIf="Form.get('Location').errors?.required">
+              Campo obrigatório.
+            </div>
+            <div *ngIf="Form.get('Location').errors?.minlength">
+              O campo deve ter pelo menos 4 caracteres.
+            </div>
+          </div>
         </div>
 
         <div class="container-div">
@@ -34,7 +51,7 @@
             <div class="ion-icon-class">
               <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
             </div>
-            <div class="ion-input-class">
+            <div class="ion-input-class" >
               <ion-select 
                 class="d-block d-md-none" 
                 [(ngModel)]="postData.CalendarName" 
@@ -46,7 +63,7 @@
               </ion-select>
 
 
-              <mat-form-field floatLabel="never" class="d-none d-md-block width-100">
+              <mat-form-field floatLabel="never" appearance="none" class="d-none d-md-block width-100">
                 <mat-select placeholder="Selecione agenda" [(ngModel)]="postData.CalendarName" >
                   <mat-option value="Oficial">
                     Oficial
@@ -79,11 +96,11 @@
               value="2020-11-19T11:06Z">
             </ion-datetime>
            
-            <mat-form-field class="width-100 date-hour-picker d-none d-md-block">
+            <mat-form-field class="width-100 date-hour-picker  d-md-block">
               <input matInput [ngxMatDatetimePicker]="picker1" 
                 placeholder="Choose a date*" 
                 [formControl]="dateControlStart"
-                [min]="minDate" [max]="maxDate" 
+                [min]="minDate"
                 [disabled]="disabled"
               >
               <mat-datepicker-toggle id="new-inicio" matSuffix [for]="picker1"></mat-datepicker-toggle>
@@ -105,7 +122,7 @@
             <div class="ion-icon-class">
               <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
             </div>
-            <div class="ion-input-class">
+            <div class="ion-input-class  flex-grow-1">
               <ion-datetime 
                 class="d-block d-md-none"
                 placeholder="Fim*"
@@ -118,11 +135,11 @@
                 value="2020-11-19T11:06Z">
               </ion-datetime>
               
-              <mat-form-field class="date-hour-picker">
+              <mat-form-field class="date-hour-picker width-100 d-none d-md-block">
                 <input matInput [ngxMatDatetimePicker]="fim" 
                   placeholder="Choose a date*S" 
                   [formControl]="dateControlEnd"
-                  [min]="minDate" [max]="maxDate" 
+                  [min]="endMinDate" 
                   [disabled]="disabled"
                 >
                 <mat-datepicker-toggle id="new-fim" matSuffix [for]="fim"></mat-datepicker-toggle>
@@ -168,6 +185,7 @@
                 value="false" 
                 interface="action-sheet" 
                 required
+                appearance="none"
               >
                 <mat-select placeholder="Selecione repetição*" [(ngModel)]="postData.IsRecurring" >
                   <mat-option value="false">

src/app/pages/gabinete-digital/expediente/book-meeting-modal/book-meeting-modal.page.scss

@@ -205,4 +205,4 @@
   .close-button {
     display: block !important;
   }
-}
+}

src/app/pages/gabinete-digital/expediente/book-meeting-modal/book-meeting-modal.page.ts

@@ -54,8 +54,11 @@ export class BookMeetingModalPage implements OnInit {
   public showSeconds = false;
   public touchUi = false;
   public enableMeridian = false;
-  public minDate: any;
+  public minDate = new Date();
-  public maxDate: any;
+
+  // curent timestamp + 15 minutes
+  public endMinDate = new Date(new Date().getTime() + 15 * 60000);
+
   public stepHour = 1;
   public stepMinute = 5;
   public stepSecond = 5;
@@ -138,6 +141,9 @@ export class BookMeetingModalPage implements OnInit {
       /* Set + 30minutes to seleted datetime */
       let selectedEndDate = new Date();
      /*  this.postData.EndDate = new Date(selectedEndDate.setMinutes(new Date().getMinutes() + 30)); */
+
+     this.dateControlStart = new FormControl(moment(new Date()));
+     this.dateControlEnd = new FormControl(moment(new Date(new Date().getTime() + 15 * 60000)));
     }
 
   ngOnInit() {

src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page.scss

@@ -53,6 +53,7 @@
     float: left;
     overflow: hidden;
     flex: 1;
+    min-height: 44px;
   }
   .ion-input-class-no-height{
     border: 1px solid #ebebeb;

src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.ts

@@ -3,20 +3,15 @@ import { ProcessesService } from 'src/app/services/processes.service';
 import { AttachmentsService } from 'src/app/services/attachments.service';
 import { EventsService } from 'src/app/services/events.service';
 import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
-import { DailyWorkTask } from '../../../../models/dailyworktask.model';
 import { ActivatedRoute, NavigationExtras, Router } from '@angular/router';
-import { formatDate } from '@angular/common';
 import { Event } from '../../../../models/event.model';
-import { AnimationController, MenuController, ModalController, PopoverController } from '@ionic/angular';
+import { ModalController, PopoverController } from '@ionic/angular';
-import { AlertService } from 'src/app/services/alert.service';
 import { ExpedientTaskModalPage } from '../expedient-task-modal/expedient-task-modal.page';
 import { BookMeetingModalPage } from '../book-meeting-modal/book-meeting-modal.page';
 import { ViewEventPage } from 'src/app/pages/agenda/view-event/view-event.page';
 import { momentG }  from 'src/plugin/momentG'
 import { DiscartExpedientModalPage } from '../../discart-expedient-modal/discart-expedient-modal.page';
 import { OptsExpedientePage } from 'src/app/shared/popover/opts-expediente/opts-expediente.page';
-import { SuccessMessagePage } from 'src/app/shared/popover/success-message/success-message.page';
-import { BadRequestPage } from 'src/app/shared/popover/bad-request/bad-request.page';
 import { ToastService } from 'src/app/services/toast.service';
 
 @Component({
@@ -43,20 +38,16 @@ export class ExpedienteDetailPage implements OnInit {
 
   hideSendToPendentes = true
 
-
   constructor(
     private processes: ProcessesService,
     private iab: InAppBrowser,
     private attachments: AttachmentsService,
     private events: EventsService,
-    private menu: MenuController,
     private router: Router,
     private modalController: ModalController,
-    private alertService: AlertService,
     public popoverController: PopoverController,
     private activatedRoute: ActivatedRoute,
     private toastService: ToastService,
-    private animationController: AnimationController,
     ) {
       this.activatedRoute.paramMap.subscribe(params => {
         if(params["params"].SerialNumber) {
@@ -164,6 +155,11 @@ export class ExpedienteDetailPage implements OnInit {
         });
       })
 
+
+
+      console.log('this.task', this.task)
+      console.log('this.task.DocumentURL', this.task.DocumentURL)
+
     });
     
 
@@ -185,9 +181,10 @@ export class ExpedienteDetailPage implements OnInit {
     }
   }
 
-  viewDocument(){
+  viewDocument() {
     this.processes.GetDocumentUrl(this.task.DocId, this.task.FsId).subscribe(res=>{
       const url: string = res.replace("webTRIX.Viewer","webTRIX.Viewer.Branch1");
+      
       const browser = this.iab.create(url,"_blank");
       browser.show();
       

src/app/shared/agenda/edit-event-to-approve/edit-event-to-approve.page.html

@@ -70,7 +70,7 @@
                 </ion-select>
 
 
-                <mat-form-field  class="d-none d-md-block width-100" >
+                <mat-form-field appearance="none"  class="d-none d-md-block width-100" >
                   <mat-select placeholder="Selecione agenda" [(ngModel)]="eventProcess.workflowInstanceDataFields.Agenda" >
                     <mat-option value="Oficial">
                       Oficial
@@ -111,7 +111,7 @@
                 >
                 </ion-datetime>
 
-                <mat-form-field class="width-100 date-hour-picker d-none d-md-block">
+                <mat-form-field appearance="none" class="width-100 date-hour-picker d-none d-md-block">
                   <input matInput [ngxMatDatetimePicker]="picker1" 
                     placeholder="Choose a date" 
                     [formControl]="dateControlStart"
@@ -149,7 +149,7 @@
                 >
                 </ion-datetime>
 
-                <mat-form-field class="width-100 date-hour-picker d-none d-md-block">
+                <mat-form-field appearance="none" class="width-100 date-hour-picker d-none d-md-block">
                   <input matInput [ngxMatDatetimePicker]="fim" 
                     placeholder="Choose a date" 
                     [formControl]="dateControlEnd"
@@ -193,6 +193,7 @@
                   value="false" 
                   interface="action-sheet" 
                   required
+                  appearance="none"
                 >
                   <mat-select [(value)]="eventProcess.workflowInstanceDataFields.IsRecurring">
                     <mat-option value="false">

src/app/shared/agenda/new-event/new-event.page.ts

@@ -134,7 +134,7 @@ export class NewEventPage implements OnInit {
     this.loggeduser = userService.ValidatedUser;
 
     this.dateControlStart = new FormControl(moment(new Date()));
-    this.dateControlEnd = new FormControl(moment(new Date()));
+    this.dateControlEnd = new FormControl(moment(new Date(new Date().getTime() + 15 * 60000)));
   }
 
   ngOnInit() {

src/global.scss

@@ -955,11 +955,11 @@ background: rgb(92, 92, 92);
 
 .date-hour-picker {
     margin-top: -6px;
-
+  
     label#mat-form-field-label-7 {
       display: none;
     }
-
+  
     .span.ng-tns-c193-4, .ng-star-inserted {
       // display: none;
     }
@@ -967,7 +967,7 @@ background: rgb(92, 92, 92);
     .ng-star-inserted{
       // display: none;
       position: absolute;
-      width: 447px;
+      width: 100%;
       height: 43px;
       opacity: 0;
       button {
@@ -975,7 +975,15 @@ background: rgb(92, 92, 92);
         height: 100%;
       }
     }
-}
+    button {
+      width: 100%;
+      height: 100%;
+    }
+  
+    .mat-datepicker-toggle, mat-datepicker-toggle {
+      width: 100%;
+    }
+  }
 
 .mat-active span {
     color: #0d89d1 !important;