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 edit event modal for desktop

Browse Source
This commit is contained in:
tiago.kayaya
2021-04-01 15:06:05 +01:00
parent eb3b08dabb
commit 1d6fee7c5b
7 changed files with 228 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/agenda/edit-event/edit-event.page.html
+196 -204
View File
@@ -1,225 +1,217 @@
<ion-header class="ion-no-border">
<ion-toolbar class="header-toolbar">
<div class="main-header">
<div class="title-content">
<div class="middle">
<ion-label class="title">2Editar Evento</ion-label>
<ion-content class="height-100">
<div class="main-content d-flex height-100">
<div class="content d-flex flex-column width-100">
<div class="main-header">
<div class="title-content">
<div class="middle">
<ion-label class="title">Editar Evento</ion-label>
</div>
</div>
</div>
<div class="ion-item-container width-100">
<ion-input placeholder="Assunto" [(ngModel)]="postEvent.Subject"></ion-input>
</div>
<div class="container-div width-100">
<div class="ion-item-class-2">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-location.svg"></ion-icon>
</div>
<div class="ion-input-class">
<ion-input placeholder="Localização" [(ngModel)]="postEvent.Location"></ion-input>
</div>
</div>
<!-- Error messages -->
<!-- <span class="error ion-padding" >
Campo obrigatório
</span> -->
</div>
<div class="container-div width-100">
<div class="ion-item-class-2">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
</div>
<div class="ion-input-class">
<ion-select disabled 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>
</div>
</div>
</div>
</div>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="main-content">
<div class="ion-item-container">
<ion-input placeholder="Assunto" [(ngModel)]="postEvent.Subject"></ion-input>
</div>
<div class="container-div">
<div class="ion-item-class-2">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-location.svg"></ion-icon>
</div>
<div class="ion-input-class">
<ion-input placeholder="Localização" [(ngModel)]="postEvent.Location"></ion-input>
</div>
</div>
<!-- Error messages -->
<!-- <span class="error ion-padding" >
Campo obrigatório
</span> -->
</div>
<div class="container-div">
<div class="ion-item-class-2">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
</div>
<div class="ion-input-class">
<ion-select disabled 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>
</div>
</div>
</div>
<div class="container-div">
<div class="ion-item-class-2">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
</div>
<div class="ion-input-class">
<ion-select placeholder="Selecione tipo"
[(ngModel)]="postEvent.Categories[0]"
selectedText="{{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>
</div>
</div>
</div>
<div class="container-div">
<div class="ion-item-class-2">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
</div>
<div class="ion-input-class">
<ion-datetime
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>
<!-- <ion-input placeholder="Data início" [(ngModel)]="postData.StartDate"></ion-input> -->
</div>
</div>
</div>
<div class="container-div">
<div class="ion-item-class-2">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
</div>
<div class="ion-input-class">
<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>
</div>
</div>
<div class="container-div">
<div class="ion-item-class-2">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-refresh.svg"></ion-icon>
</div>
<div class="ion-input-class">
<ion-select placeholder="Selecione repetição"
[(ngModel)]="postEvent.IsRecurring"
selectedText="{{isRecurring}}"
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>
</div>
</div>
</div>
<div class="container-div">
<div class="ion-item-class-2">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-person.svg"></ion-icon>
</div>
<div (click)="openAttendees()" class="ion-input-class-no-height">
<div class="list-people">
<ion-item lines="none">
<ion-list>
<ion-label class="list-people-title">Ver ou editar participantes</ion-label>
<ion-label hidden >Text</ion-label>
</ion-list>
</ion-item>
<div class="container-div width-100">
<div class="ion-item-class-2">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
</div>
<div class="add-people">
<ion-icon slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
<div class="ion-input-class">
<ion-select placeholder="Selecione tipo"
[(ngModel)]="postEvent.Categories[0]"
selectedText="{{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>
</div>
</div>
</div>
</div>
<div hidden class="container-div">
<div class="ion-item-class-2">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-people-cc.svg"></ion-icon>
</div>
<div class="ion-input-class-no-height">
<div class="list-people">
<ion-item lines="none">
<ion-list>
<ion-label class="list-people-title">Com conhecimento</ion-label>
<ion-label hidden >Text</ion-label>
</ion-list>
</ion-item>
<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-calendar.svg"></ion-icon>
</div>
<div class="add-people">
<ion-icon slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
<div class="ion-input-class width-100">
<ion-datetime
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>
<!-- <ion-input placeholder="Data início" [(ngModel)]="postData.StartDate"></ion-input> -->
</div>
</div>
</div>
</div>
<div class="container-div">
<div class="ion-item-class-2">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
</div>
<div class="ion-input-class">
<ion-input placeholder="Detalhes" [(ngModel)]="postEvent.Body.Text"></ion-input>
<div class="container-div width-100">
<div class="ion-item-class-2">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
</div>
<div class="ion-input-class">
<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>
</div>
</div>
</div>
<div hidden class="ion-item-container-no-border">
<ion-label>
<div class="attach-icon">
<ion-icon src="assets/images/icons-attach-doc.svg"></ion-icon>
<div class="container-div width-100">
<div class="ion-item-class-2">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-refresh.svg"></ion-icon>
</div>
<div class="ion-input-class">
<ion-select placeholder="Selecione repetição"
[(ngModel)]="postEvent.IsRecurring"
selectedText="{{isRecurring}}"
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>
</div>
</div>
</div>
<div class="width-100">
<div class="container-div width-50">
<div class="ion-item-class-2">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-person.svg"></ion-icon>
</div>
<div (click)="openAttendees()" class="ion-input-class-no-height">
<div class="list-people">
<ion-item lines="none">
<ion-list>
<ion-label class="list-people-title">Adicionar Destinatários</ion-label>
<ion-label hidden >Text</ion-label>
</ion-list>
</ion-item>
</div>
<div class="add-people">
<ion-icon slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
</div>
</div>
</div>
</div>
<div class="container-div width-50">
<div class="ion-item-class-2">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-people-cc.svg"></ion-icon>
</div>
<div (click)="openAttendees()" class="ion-input-class-no-height">
<div class="list-people">
<ion-item lines="none">
<ion-list>
<ion-label class="list-people-title">Adicionar CC</ion-label>
<ion-label hidden >Text</ion-label>
</ion-list>
</ion-item>
</div>
<div class="add-people">
<ion-icon slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
</div>
</div>
</div>
</div>
<div class="attach-document">
<ion-label>Anexar Documentos</ion-label>
</div>
</ion-label>
</div>
<div hidden>
<ion-item>
<ion-label>Documentos Anexados</ion-label>
</ion-item>
<ion-list>
<ion-item>
<div class="container-div width-100">
<div class="ion-item-class-2">
<div class="ion-icon-class">
<ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
</div>
<div class="ion-input-class">
<ion-input placeholder="Detalhes" [(ngModel)]="postEvent.Body.Text"></ion-input>
</div>
</div>
</div>
<div hidden class="ion-item-container-no-border">
<ion-label>
<h4 class="attach-title-item">Text</h4>
<p><span class="span-left">Text</span><span class="span-right"> Text </span></p>
<div class="attach-icon">
<ion-icon src="assets/images/icons-attach-doc.svg"></ion-icon>
</div>
<div class="attach-document">
<ion-label>Anexar Documentos</ion-label>
</div>
</ion-label>
</ion-item>
</ion-list>
</div>
</div>
<div hidden>
<ion-item>
<ion-label>Documentos Anexados</ion-label>
</ion-item>
<ion-list>
<ion-item>
<ion-label>
<h4 class="attach-title-item">Text</h4>
<p><span class="span-left">Text</span><span class="span-right"> Text </span></p>
</ion-label>
</ion-item>
</ion-list>
</div>
</div>
<div class="aside-right flex-column height-100">
</div>
</div>
</ion-content>
<ion-footer class="ion-no-border">
<ion-toolbar class="btn-div">
<ion-buttons slot="start">
<ion-button class="btn-cancel" fill="clear" color="#061b52" (click)="close()">
<ion-label>Cancelar</ion-label>
</ion-button>
</ion-buttons>
<ion-title></ion-title>
<ion-buttons slot="end">
<ion-button class="btn-ok" fill="clear" color="#fff" (click)="save()">
<ion-label>Gravar</ion-label>
</ion-button>
</ion-buttons>
</ion-toolbar>
<ion-footer>
<div class="buttons">
<button class="btn-cancel" shape="round" (click)="close()">Cancelar</button>
<button class="btn-ok" shape="round" (click)="save()">Gravar</button>
</div>
</ion-footer>
src/app/pages/agenda/edit-event/edit-event.page.scss
+15 -27
View File
@@ -1,24 +1,18 @@
ion-content{
--background:transparent;
}
.header-toolbar{
--background:transparent;
--opacity: 1;
.content{
padding: 30px 20px 0 20px !important;
margin: 0;
float: left;
border-left: 1px solid #d8d8d8 !important;
}
.main-header{
width: 100%; /* 400px */
height: 100%;
font-family: Roboto;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
background-color: #fff;
overflow:hidden;
padding: 30px 20px 0px 20px;
color:#000;
transform: translate3d(0, 1px, 0);
.title-content{
width: 360px;
margin: 0px auto;
overflow: auto;
padding: 0 !important;
@@ -26,8 +20,6 @@ ion-content{
.middle{
padding: 0!important;
float: left;
width: 221px;
margin: 2.5px 0 0 5px;
}
}
@@ -36,17 +28,7 @@ ion-content{
}
}
.main-content{
width: 100%; /* 400px */
height: 100%;
font-family: Roboto;
margin: 0 auto;
background-color: #fff;
overflow:auto;
padding: 15px 20px 0 20px;
.ion-item-container{
width: 360px;
margin: 15px auto;
border: 1px solid #ebebeb;
border-radius: 5px;
@@ -60,10 +42,10 @@ ion-content{
}
.container-div{
margin-bottom: 15px;
float: left;
overflow: auto;
}
.ion-item-class-2{
width: 360px;
margin: 0px auto;
}
.ion-icon-class{
@@ -78,7 +60,7 @@ ion-content{
margin-left: 0;
}
.ion-input-class{
width: 315px;
width: calc(100% - 45px);
height: 45px;
border: 1px solid #ebebeb;
border-radius: 5px;
@@ -92,7 +74,7 @@ ion-content{
overflow: auto;
}
.list-people{
width: 256px;
//width: 256px;
float: left;
}
@@ -174,4 +156,10 @@ ion-content{
color:red;
}
.buttons{
display: flex;
justify-content: space-between;
padding: 20px;
overflow: auto;
}
src/app/pages/agenda/edit-event/edit-event.page.ts
+1 -1
View File
@@ -51,7 +51,7 @@ export class EditEventPage implements OnInit {
window.onresize = (event) => {
// if not mobile remove all component
if( window.innerWidth >= 1024){
if( window.innerWidth >= 800){
this.modalController.dismiss();
}
};
src/app/pages/agenda/view-event/view-event.page.html
+1 -1
View File
@@ -79,7 +79,7 @@
</div>
<div class="aside-right flex-column height-100">
<div class="buttons">
<button full class="btn-ok" shape="round" >Editar</button>
<button (click)="editEvent()" full class="btn-ok" shape="round" >Editar</button>
<div class="solid"></div>
<button full class="btn-delete" shape="round" >Eliminar</button>
</div>
src/app/pages/agenda/view-event/view-event.page.ts
+10 -4
View File
@@ -103,8 +103,13 @@ export class ViewEventPage implements OnInit {
}
async editEvent() {
/* this.close(); */
console.log(this.profile);
let classs;
if( window.innerWidth <= 800){
classs = 'modal'
} else {
classs = 'modal modal-desktop showAsideOptions'
}
const modal = await this.modalController.create({
component: EditEventPage,
@@ -112,8 +117,7 @@ export class ViewEventPage implements OnInit {
event: this.loadedEvent,
profile: this.profile,
},
cssClass: 'modal',
backdropDismiss: false
cssClass: classs,
});
await modal.present();
modal.onDidDismiss().then((res) => {
@@ -128,6 +132,8 @@ export class ViewEventPage implements OnInit {
}
});
}
viewDocument(){
const url: string = this.loadedAttachments.DocumentURL.replace("webTRIX.Viewer","webTRIX.Viewer.Branch1");
const browser = this.iab.create(url,"_blank");