new inputs

This commit is contained in:
Peter Maquiran
2021-06-21 14:29:49 +01:00
parent 7682961a3a
commit 74ab4ce797
8 changed files with 119 additions and 96 deletions
+10 -1
View File
@@ -3393,6 +3393,14 @@
}
}
},
"@ngx-translate/core": {
"version": "13.0.0",
"resolved": "https://registry.npmjs.org/@ngx-translate/core/-/core-13.0.0.tgz",
"integrity": "sha512-+tzEp8wlqEnw0Gc7jtVRAJ6RteUjXw6JJR4O65KlnxOmJrCGPI0xjV/lKRnQeU0w4i96PQs/jtpL921Wrb7PWg==",
"requires": {
"tslib": "^2.0.0"
}
},
"@nodelib/fs.scandir": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz",
@@ -19108,7 +19116,8 @@
},
"ssri": {
"version": "6.0.1",
"resolved": "",
"resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz",
"integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==",
"dev": true,
"requires": {
"figgy-pudding": "^3.5.1"
+1
View File
@@ -50,6 +50,7 @@
"@ionic/storage": "^2.3.1",
"@logisticinfotech/ionic4-datepicker": "^1.4.4",
"@ng-bootstrap/ng-bootstrap": "^9.1.2",
"@ngx-translate/core": "^13.0.0",
"angular-calendar": "^0.28.22",
"angular-tag-cloud-module": "^5.2.2",
"bootstrap": "^4.5.0",
+1 -1
View File
@@ -12,7 +12,7 @@ export class IndexGuard implements CanActivate {
public storageService:StorageService,
private router:Router
){}
canActivate(): Promise<boolean>{
canActivate(): Promise<boolean> {
return new Promise(resolve => {
/* this.storageService.get(AuthConnstants.AUTH).then(res => {
if(res){
+1 -1
View File
@@ -65,7 +65,7 @@ export class HomePage implements OnInit {
private platform: Platform) {
router.events.subscribe((val) => {
// document.querySelectorAll('ion-modal').forEach((e) => e.remove())
document.querySelectorAll('ion-modal').forEach((e) => e.remove())
});
{
@@ -12,7 +12,6 @@ import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatInputModule } from '@angular/material/input';
import { MatNativeDateModule } from '@angular/material/core';
import { MatMomentDateModule, MomentDateAdapter } from "@angular/material-moment-adapter";
import {
NgxMatDatetimePickerModule,
@@ -26,6 +25,13 @@ import { MatButtonModule } from '@angular/material/button';
import { MatSelectModule } from '@angular/material/select';
import { NgxMatMomentModule } from '@angular-material-components/moment-adapter';
import {
MAT_MOMENT_DATE_FORMATS,
MomentDateAdapter,
MAT_MOMENT_DATE_ADAPTER_OPTIONS
} from '@angular/material-moment-adapter';
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
@NgModule({
imports: [
CommonModule,
@@ -52,6 +58,9 @@ import { NgxMatMomentModule } from '@angular-material-components/moment-adapter'
ReactiveFormsModule
],
declarations: [NewEventPage],
providers: [
{ provide: MAT_DATE_LOCALE, useValue: 'pt-br' },
],
exports: [NewEventPage]
})
export class NewEventPageModule {}
@@ -14,16 +14,7 @@
<div class="main-content">
<!-- THIS -->
<!-- <mat-form-field>
<input matInput [ngxMatDatetimePicker]="picker" placeholder="Choose a date" [formControl]="dateControl"
[min]="minDate" [max]="maxDate" [disabled]="disabled">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<ngx-mat-datetime-picker #picker [showSpinners]="showSpinners" [showSeconds]="showSeconds"
[stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond" [touchUi]="touchUi"
[color]="color" [enableMeridian]="enableMeridian">
</ngx-mat-datetime-picker>
</mat-form-field> -->
<!-- <form class="form-inline">
<div class="form-group">
@@ -65,14 +56,18 @@
<ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
</div>
<div class="ion-input-class flex-grow-1">
<ion-select placeholder="Selecione agenda"
selectedText="{{postEvent.CalendarName}}"
[(ngModel)]="postEvent.CalendarName"
interface="action-sheet" Cancel-text="Cancelar"
required>
<ion-select-option value="Oficial">Oficial</ion-select-option>
<ion-select-option value="Pessoal">Pessoal</ion-select-option>
</ion-select>
<mat-form-field class="width-100" [(ngModel)]="postEvent.CalendarName" placeholder="Selecione agenda" required>
<mat-select>
<mat-option value="Oficial">
Oficial
</mat-option>
<mat-option value="Pessoal">
Pessoal
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</div>
@@ -83,15 +78,24 @@
<ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
</div>
<div class="ion-input-class flex-grow-1">
<ion-select placeholder="Selecione tipo"
[(ngModel)]="postEvent.Categories[0]"
interface="action-sheet"
Cancel-text="Cancelar" required>
<ion-select-option value="Reunião">Reunião</ion-select-option>
<ion-select-option value="Viagem">Viagem</ion-select-option>
<ion-select-option value="Conferência">Conferência</ion-select-option>
<ion-select-option value="Encontro">Encontro</ion-select-option>
</ion-select>
<mat-form-field class="width-100" [(ngModel)]="postEvent.Categories[0]" placeholder="Selecione tipo" required>
<mat-select>
<mat-option value="Reunião">
Reunião
</mat-option>
<mat-option value="Viagem">
Viagem
</mat-option>
<mat-option value="Conferência">
Conferência
</mat-option>
<mat-option value="Encontro">
Encontro
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</div>
@@ -101,31 +105,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=""
placeholder="Início"
[(ngModel)]="postEvent.StartDate"
displayFormat="D MMM YYYY H:mm"
minuteValues="0,15,30,45"
monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
min="2018"
max="2022"
>
</ion-datetime>
<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">
</ngx-mat-datetime-picker>
</mat-form-field>
<!-- <input
class="d-none width-100"
placeholder="Início"
[matDatepicker]="picker"
(focus)="picker.open()"
(click)="picker.open()"
[(ngModel)]="postEvent.StartDate"
>
<mat-datepicker #picker></mat-datepicker> -->
<!-- <ion-input placeholder="Data início" [(ngModel)]="postData.StartDate"></ion-input> -->
</div>
</div>
</div>
@@ -135,18 +126,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
placeholder="Fim"
[(ngModel)]="postEvent.EndDate"
displayFormat="D MMM YYYY H:mm"
minuteValues="0,15,30,45"
monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
min="2018"
max="2022"
>
</ion-datetime>
<!-- <ion-input placeholder="Data fim" [(ngModel)]="postData.EndDate"></ion-input> -->
<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">
</ngx-mat-datetime-picker>
</mat-form-field>
</div>
</div>
</div>
@@ -157,10 +148,18 @@
<ion-icon slot="start" src="assets/images/icons-refresh.svg"></ion-icon>
</div>
<div class="ion-input-class flex-grow-1">
<ion-select placeholder="Selecione repetição" value="false" interface="action-sheet" Cancel-text="Cancelar" required>
<ion-select-option value="false">Não se repete</ion-select-option>
<ion-select-option value="true">Repete</ion-select-option>
</ion-select>
<mat-form-field class="width-100" placeholder="Selecione repetição" value="false" interface="action-sheet" Cancel-text="Cancelar" required>
<mat-select>
<mat-option value="false">
Não se repete
</mat-option>
<mat-option value="true">
Repete
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</div>
@@ -1,10 +1,12 @@
ion-content{
ion-content{
--background:transparent;
}
.header-toolbar{
--background:transparent;
--opacity: 1;
}
.main-header{
width: 100%; /* 400px */
height: 100%;
@@ -210,4 +212,5 @@ ion-content{
.close-button {
display: block !important;
}
}
}
@@ -9,27 +9,22 @@ import { removeDuplicate } from 'src/plugin/removeDuplicate.js'
import { SearchPage } from 'src/app/pages/search/search.page';
import { SearchDocument } from "src/app/models/search-document";
import { EventAttachment } from 'src/app/models/attachment.model';
import { BadRequestPage } from '../../popover/bad-request/bad-request.page';
import { SuccessMessagePage} from '../../popover/success-message/success-message.page';
import { ToastService } from 'src/app/services/toast.service';
import { User } from 'src/app/models/user.model';
import { AuthService } from 'src/app/services/auth.service';
import {MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS} from '@angular/material-moment-adapter';
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
import {DateAdapter} from '@angular/material/core';
import * as _moment from 'moment';
import * as _rollupMoment from 'moment';
import {FormControl} from '@angular/forms';
import { NgxMatDateFormats } from '@angular-material-components/datetime-picker';
import { ThemePalette } from '@angular/material/core';
import { HttpClient } from '@angular/common/http';
import { NgZone, ViewChild } from '@angular/core';
import { FormGroup, Validators } from '@angular/forms';
import { NgxMatDatetimePickerModule, NgxMatTimepickerModule, NGX_MAT_DATE_FORMATS, NgxMatDateAdapter } from '@angular-material-components/datetime-picker';
import { NGX_MAT_DATE_FORMATS } from '@angular-material-components/datetime-picker';
const moment = _rollupMoment || _moment;
@@ -50,18 +45,7 @@ const CUSTOM_DATE_FORMATS: NgxMatDateFormats = {
templateUrl: './new-event.page.html',
styleUrls: ['./new-event.page.scss'],
providers: [
// `MomentDateAdapter` can be automatically provided by importing `MomentDateModule` in your
// application's root module. We provide it at the component level here, due to limitations of
// our example generation script.
// {
// provide: DateAdapter,
// useClass: MomentDateAdapter,
// deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
// },
{ provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS },
// { provide: MAT_DATE_LOCALE, useValue: 'pt-br' },
// { provide: LOCALE_ID, useValue: "en-GB" }
]
})
@@ -81,8 +65,8 @@ export class NewEventPage implements OnInit {
public minDate: any;
public maxDate: any;
public stepHour = 1;
public stepMinute = 1;
public stepSecond = 1;
public stepMinute = 5;
public stepSecond = 5;
public color: ThemePalette = 'primary';
@@ -108,6 +92,8 @@ export class NewEventPage implements OnInit {
loggeduser: User;
@ViewChild('picker') picker: any;
@ViewChild('fim') fim: any;
// @ViewChild('inicio') inicio: any;
constructor(
private modalController: ModalController,
@@ -118,7 +104,8 @@ export class NewEventPage implements OnInit {
private userService: AuthService,
private http: HttpClient,
private zone: NgZone,
private dateAdapter: DateAdapter<any>
private dateAdapter: DateAdapter<any>,
// private translate: TranslateService
) {
this.dateAdapter.setLocale('pt');
this.loggeduser = userService.ValidatedUser;
@@ -248,6 +235,21 @@ export class NewEventPage implements OnInit {
this.picker.cancel();
}
openInicio() {
let input: any = document.querySelector('#new-inicio')
if(input) {
console.log(input)
input.click()
}
}
openFim() {
let input: any = document.querySelector('#new-fim')
if(input) {
input.click()
}
}
private _setMinDate() {
const now = new Date();
this.minDate = new Date();
@@ -448,4 +450,4 @@ export class NewEventPage implements OnInit {
window['temp.path:/home/agenda/new-event.component.ts'] = {}
}
}
}