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

Add angular material inputs

Browse Source
This commit is contained in:
Peter Maquiran
2021-06-23 15:39:45 +01:00
parent 6a182cb962
commit 2ef12efa54
21 changed files with 622 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/shared/agenda/new-event/new-event.page.html
+44 -49
View File
@@ -6,6 +6,7 @@
<ion-label class="title">Novo Evento</ion-label>
</div>
</div>
<ion-progress-bar class="calendar-progress-bar" type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
</div>
</ion-toolbar>
</ion-header>
@@ -13,24 +14,6 @@
<ion-content>
<div class="main-content">
<!-- THIS -->
<!-- <form class="form-inline">
<div class="form-group">
<div class="input-group">
<input class="form-control" placeholder="yyyy-mm-dd"
name="dp" ngbDatepicker #d="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
</div>
</div>
</div>
</form> -->
<!-- 2. datepicker in the popup -->
<!-- <input type="text" ngbDatepicker #d="ngbDatepicker"/> -->
<div class="ion-item-container">
<ion-input type="text" placeholder="Assunto" [(ngModel)]="postEvent.Subject"></ion-input>
</div>
@@ -43,10 +26,6 @@
<ion-input type="text" placeholder="Localização" [(ngModel)]="postEvent.Location"></ion-input>
</div>
</div>
<!-- Error messages -->
<!-- <span class="error ion-padding" >
Campo obrigatório
</span> -->
</div>
@@ -55,10 +34,10 @@
<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">
<div class="ion-input-class flex-grow-1 d-flex justify-center align-center material-inputs materia-top ">
<mat-form-field class="width-100" [(ngModel)]="postEvent.CalendarName" placeholder="Selecione agenda" required>
<mat-select>
<mat-form-field class="width-100" color="ion-color-secondary" placeholder="Selecione agenda">
<mat-select [(value)]="postEvent.CalendarName" >
<mat-option value="Oficial">
Oficial
</mat-option>
@@ -77,10 +56,11 @@
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
</div>
<div class="ion-input-class flex-grow-1">
<div class="ion-input-class flex-grow-1 d-flex justify-center align-center material-inputs materia-top">
<mat-form-field class="width-100" [(ngModel)]="postEvent.Categories[0]" placeholder="Selecione tipo" required>
<mat-select>
<mat-form-field class="width-100" placeholder="Sample Type" required>
<!-- <input matInput type="text" > -->
<mat-select matInput [(value)]="postEvent.Categories[0]" >
<mat-option value="Reunião">
Reunião
</mat-option>
@@ -99,21 +79,28 @@
</div>
</div>
</div>
<div class="container-div">
<div class="ion-item-class-2 d-flex">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
</div>
<div (click)="openInicio()" class="ion-input-class flex-grow-1">
<mat-form-field class="date-hour-picker width-100">
<input matInput [ngxMatDatetimePicker]="picker" placeholder="Choose a date" [formControl]="dateControl"
[(ngModel)]="postEvent.StartDate"
[min]="minDate" [max]="maxDate" [disabled]="disabled">
<mat-datepicker-toggle id="new-inicio" #inicio matSuffix [for]="picker"></mat-datepicker-toggle>
<ngx-mat-datetime-picker #picker [showSpinners]="showSpinners" [showSeconds]="showSeconds"
[stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond" [touchUi]=false
[color]="'#0000'" [enableMeridian]="enableMeridian">
<div class="ion-input-class flex-grow-1">
<mat-form-field class="date-hour-picker">
<input matInput [ngxMatDatetimePicker]="picker1"
placeholder="Choose a date"
[formControl]="dateControlStart"
[min]="minDate" [max]="maxDate"
[disabled]="disabled"
>
<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"
[stepSecond]="stepSecond"
[touchUi]="touchUi"
[color]="color">
</ngx-mat-datetime-picker>
</mat-form-field>
@@ -127,14 +114,22 @@
<ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
</div>
<div (click)="openFim()" class="ion-input-class flex-grow-1">
<mat-form-field class="date-hour-picker width-100">
<input matInput [ngxMatDatetimePicker]="fim" placeholder="Choose a date" [formControl]="dateControl"
[(ngModel)]="postEvent.EndDate"
[min]="minDate" [max]="maxDate" [disabled]="disabled">
<mat-datepicker-toggle id="new-fim" #inicio matSuffix [for]="fim"></mat-datepicker-toggle>
<ngx-mat-datetime-picker [showSpinners]=false #fim [showSpinners]="showSpinners" [showSeconds]="showSeconds"
[stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond" [touchUi]=false appearance = "standard"
[color]="'#0000'" [enableMeridian]="enableMeridian">
<mat-form-field class="date-hour-picker">
<input matInput [ngxMatDatetimePicker]="fim"
placeholder="Choose a date"
[formControl]="dateControlEnd"
[min]="minDate" [max]="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"
[stepSecond]="stepSecond"
[touchUi]="touchUi"
[color]="color">
</ngx-mat-datetime-picker>
</mat-form-field>
@@ -147,10 +142,10 @@
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-refresh.svg"></ion-icon>
</div>
<div class="ion-input-class flex-grow-1">
<div class="ion-input-class flex-grow-1 d-flex justify-center align-center material-inputs materia-top">
<mat-form-field class="width-100" placeholder="Selecione repetição" value="false" interface="action-sheet" Cancel-text="Cancelar" required>
<mat-select>
<mat-form-field class="width-100" placeholder="Selecione repetição" value="false" interface="action-sheet" required>
<mat-select [(value)]="postEvent.IsRecurring">
<mat-option value="false">
Não se repete
</mat-option>