peter/doneit-web
1
0
Fork 0
mirror of https://code.equilibrium.co.ao/ITO/doneit-web.git synced 2026-04-19 21:06:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve action on mobile

Browse Source
This commit is contained in:
Peter Maquiran
2023-08-30 14:39:27 +01:00
parent 1b9f5a25cb
commit 7ee834558c
3 changed files with 32 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/publications/edit-action/edit-action.page.html
+8 -31
View File
@@ -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
+18 -17
View File
@@ -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() {