commit all

This commit is contained in:
Peter Maquiran
2021-04-05 15:10:28 +01:00
parent 3727e73c1d
commit 016c006edc
7 changed files with 771 additions and 30 deletions
@@ -0,0 +1,215 @@
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button defaultHref="{{ backURL }}"></ion-back-button>
</ion-buttons>
<ion-title class="header-title">Visualizar Evento</ion-title>
<ion-buttons slot="end">
<button (click)="deleteConfirm()" class="ion-icon-delete">
<ion-icon name="trash"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content padding>
<div *ngIf="loadedEvent">
<ion-item-group>
<ion-item-sliding>
<form [formGroup]="ionicForm" novalidate>
<ion-item>
<ion-label class="capitalizeText" position="stacked">Assunto</ion-label>
<ion-input class="capitalizeText" [(ngModel)]="loadedEvent.Subject" formControlName="subject" type="text" required></ion-input>
</ion-item>
<!-- Error messages -->
<span class="error ion-padding" *ngIf="errorControl.subject.errors?.required">
Campo obrigatório
</span>
</form>
<ion-item>
<ion-label position="stacked">Descrição</ion-label>
<ion-input class="capitalizeText" [(ngModel)]='loadedEvent.Body.Text'></ion-input>
</ion-item>
<ion-item>
<ion-label position="stacked">Localização</ion-label>
<ion-input class="capitalizeText" [(ngModel)]='loadedEvent.Location'></ion-input>
</ion-item>
<ion-item>
<ion-label position="stacked">Calendário</ion-label>
<ion-select class="capitalizeText" placeholder="{{loadedEvent.CalendarName}}" [(ngModel)]="loadedEvent.CalendarName" interface="action-sheet" class="custom-options" Cancel-text="Cancelar">
<ion-select-option Pessoal="Reunião">Pessoal</ion-select-option>
<ion-select-option Oficial="Viagem">Oficial</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label position="stacked">Tipo do evento</ion-label>
<ion-select placeholder="{{loadedEvent.EventType}}" [(ngModel)]="loadedEvent.EventType" interface="action-sheet" class="custom-options" Cancel-text="Cancelar">
<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>
</ion-item>
<ion-item>
<ion-label position="stacked">Data Início</ion-label>
<ion-datetime value="{{loadedEvent.StartDate}}" [(ngModel)]="loadedEvent.StartDate" min="2020" max="2100"
displayFormat="D MMM YYYY H:mm" minuteValues="0,15,30,45"
monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"></ion-datetime>
</ion-item>
<ion-item>
<ion-label position="stacked">Data Fim</ion-label>
<ion-datetime value="{{loadedEvent.EndDate}}" [(ngModel)]="loadedEvent.EndDate" min="2020" max="2100"
displayFormat="D MMM YYYY HH:mm" minuteValues="0,15,30,45"
monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"></ion-datetime>
</ion-item>
<div class="div-attach" >
<ion-item>
<ion-buttons slot="end" (click)="openAttendees()">
<ion-label color="secondary">Editar</ion-label>
</ion-buttons>
<ion-label class="attach-label">Participantes</ion-label>
</ion-item>
<div *ngIf="loadedEvent.Attendees">
<div *ngFor="let attendee of loadedEvent.Attendees; let i=index">
<div *ngIf="i<1">
<ion-list >
<ion-item class="attendees" lines="none" >
<ion-icon class="attendees-icon" name="person" slot="start"></ion-icon>
<ion-label class="capitalizeText" class="attendees-list">{{attendee.Name}}</ion-label>
</ion-item>
</ion-list>
</div>
</div>
<div *ngIf="loadedEvent.Attendees.length > 1">
<ion-button class="see-more-button" fill="none" shape="round" (click)="openAttendees()">
<ion-label color="secondary">Ver mais...</ion-label>
</ion-button>
</div>
</div>
</div>
<div class="div-attach">
<ion-item>
<ion-buttons slot="end" (click)="showAlert()">
<ion-label color="secondary">Editar</ion-label>
</ion-buttons>
<ion-label class="attach-label">Anexos</ion-label>
</ion-item>
<div *ngIf="loadedEventAttachments">
<div *ngFor="let att of loadedEventAttachments; let j=index">
<div *ngIf="j<2">
<ion-list *ngIf="loadedEvent.HasAttachments">
<ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
<ion-item lines="none" (click)="viewDocument(att.Link)">
<ion-icon name="attach" slot="start"></ion-icon>
<ion-label>
<p>{{ att.Description }}</p>
<p>{{ att.CreateDate }}</p>
</ion-label>
</ion-item>
</ion-list>
</div>
</div>
<div *ngIf="loadedEventAttachments.length > 1">
<ion-button class="see-more-button" fill="none" shape="round" (click)="openAttachments()"><!-- [routerLink]="['/home/attachments', loadedEvent.EventId]" -->
<ion-label color="secondary">Ver mais...</ion-label>
</ion-button>
</div>
</div>
<!-- Skeleton Attachment -->
<!-- <ion-list *ngIf="!loadedEventAttachments">
<ion-item lines="none" >
<ion-icon name="attach" slot="start"></ion-icon>
<ion-label>
<p> <ion-skeleton-text animated></ion-skeleton-text></p>
<p> <ion-skeleton-text animated></ion-skeleton-text></p>
</ion-label>
</ion-item>
</ion-list> -->
<!-- No attachment message -->
<ion-list *ngIf="!loadedEvent.HasAttachments">
<ion-item lines="none" >
<ion-label>
Sem anexos
</ion-label>
</ion-item>
</ion-list>
</div>
</ion-item-sliding>
</ion-item-group>
</div>
<!-- Skeleton screen -->
<div *ngIf="!loadedEvent">
<div class="ion-padding custom-skeleton">
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
<ion-skeleton-text animated></ion-skeleton-text>
<ion-skeleton-text animated style="width: 88%"></ion-skeleton-text>
<ion-skeleton-text animated style="width: 70%"></ion-skeleton-text>
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
</div>
<ion-list>
<ion-list-header>
<ion-label>
<ion-skeleton-text animated style="width: 20%"></ion-skeleton-text>
</ion-label>
</ion-list-header>
<ion-item>
<ion-avatar slot="start">
<ion-skeleton-text animated></ion-skeleton-text>
</ion-avatar>
<ion-label>
<h3>
<ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
</h3>
<p>
<ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
</p>
<p>
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
</p>
</ion-label>
</ion-item>
<ion-item>
<ion-thumbnail slot="start">
<ion-skeleton-text animated></ion-skeleton-text>
</ion-thumbnail>
<ion-label>
<h3>
<ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
</h3>
<p>
<ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
</p>
<p>
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
</p>
</ion-label>
</ion-item>
<ion-item>
<ion-skeleton-text animated style="width: 27px; height: 27px" slot="start"></ion-skeleton-text>
<ion-label>
<h3>
<ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
</h3>
<p>
<ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
</p>
<p>
<ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
</p>
</ion-label>
</ion-item>
</ion-list>
</div>
</ion-content>
<ion-footer>
<ion-toolbar>
<div class="event-detail-buttons">
<ion-button class="btn-ok" fill="clear" color="#fff" shape="round" (click)="Save()">Gravar</ion-button>
</div>
</ion-toolbar>
</ion-footer>
@@ -0,0 +1,165 @@
.content{
padding: 30px 20px 0 20px !important;
margin: 0;
float: left;
border-left: 1px solid #d8d8d8 !important;
}
.main-header{
font-family: Roboto;
background-color: #fff;
overflow:hidden;
color:#000;
transform: translate3d(0, 1px, 0);
.title-content{
margin: 0px auto;
overflow: auto;
padding: 0 !important;
background: #fff;
.middle{
padding: 0!important;
float: left;
}
}
.title{
font-size: 25px;
}
}
.ion-item-container{
margin: 15px auto;
border: 1px solid #ebebeb;
border-radius: 5px;
padding-left: 10px;
}
.ion-item-container-no-border{
width: 100%;
margin: 0px auto;
padding: 0 !important;
overflow: auto;
}
.container-div{
margin-bottom: 15px;
float: left;
overflow: auto;
}
.ion-item-class-2{
margin: 0px auto;
}
.ion-icon-class{
width: 45px;
height: 45px;
float: left;
padding: 10px;
font-size: 25px;
}
ion-select{
padding-left: 5px;
margin-left: 0;
}
.ion-input-class{
width: calc(100% - 45px);
height: 45px;
border: 1px solid #ebebeb;
border-radius: 5px;
padding-left: 5px;
padding-right: 10px;
float: left;
}
.ion-input-class-no-height{
border: 1px solid #ebebeb;
border-radius: 5px;
overflow: auto;
}
.list-people{
//width: 256px;
float: left;
}
.add-people{
width: 45px;
float: right;
overflow: auto;
font-size: 25px;
padding: 10px;
}
.list-people-title{
/* font-size: 13px; */
color: #797979;
}
.attach-document{
font-size: 15px;
color: #0d89d1;
margin: 5px 5px 5px 10px;
padding: 5px;
float: left;
}
.attach-icon{
width: 37px;
font-size: 35px;
float: left;
}
.attach-title-item{
width: 100%;
font-size: 15px;
color:#0d89d1;
}
/* SPAN */
.span-left{
float: left;
font-size: 15x;
}
.span-right{
text-align: right;
float: right;
font-size: 13px;
}
.container-footer{
margin:0 auto;
overflow: auto;
}
.button-cancel {
width: 170px;
height: 44px;
border-radius: 22.5px;
--background: #e0e9ee;
--color: #061b52;
margin:10px;
}
.button-save {
width: 170px;
height: 44px;
border-radius: 22.5px;
--background: #42b9fe;
--color:#ffffff;
margin:10px;
}
.text-input{
width: 100%;
border: 1px solid #ebebeb;
margin: 0px 15px 15px 0px;
padding: 0 !important;
border-radius: 5px;
}
/* Error Messages */
.error{
color:red;
font-size: 12px;
font-weight: bold;
padding-bottom: 20px;
}
.span-color{
color:red;
}
.buttons{
display: flex;
justify-content: space-between;
padding: 20px;
overflow: auto;
}
@@ -0,0 +1,24 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { EditEventComponent } from './edit-event.component';
describe('EditEventComponent', () => {
let component: EditEventComponent;
let fixture: ComponentFixture<EditEventComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [ EditEventComponent ],
imports: [IonicModule.forRoot()]
}).compileComponents();
fixture = TestBed.createComponent(EditEventComponent);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create', () => {
expect(component).toBeTruthy();
});
});
@@ -0,0 +1,243 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { EventsService } from 'src/app/services/events.service';
import { Router } from '@angular/router';
import { Event } from '../../../models/event.model';
import { EventBody } from 'src/app/models/eventbody.model';
import { AlertController, ModalController } from '@ionic/angular';
import { EventPerson } from 'src/app/models/eventperson.model';
import { AttendeesPage } from 'src/app/pages/events/attendees/attendees.page';
import { AlertService } from 'src/app/services/alert.service';
import { Attachment } from 'src/app/models/attachment.model';
import { AttachmentsService } from 'src/app/services/attachments.service';
import { FormGroup, FormBuilder, Validators } from "@angular/forms";
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
import { AttachmentsPage } from '../attachments/attachments.page';
@Component({
selector: 'app-edit-event-home',
templateUrl: './app-edit-event-home.page.html',
styleUrls: ['./app-edit-event-home.page.scss'],
})
export class EventEditPage implements OnInit {
loadedEvent: Event;
loadedEventAttachments: Attachment[];
pageId: string;
showLoader: boolean;
backURL: string;
ionicForm: FormGroup;
isSubmitted = false;
minDate: Date;
profile:string;
constructor(
public formBuilder: FormBuilder,
public alertController: AlertController,
private router: Router,
private activatedRoute: ActivatedRoute,
private eventsService: EventsService,
private modalCtrl: ModalController,
private alertService: AlertService,
private attachamentsService: AttachmentsService,
private route: Router,
private iab: InAppBrowser) {
this.loadedEvent = new Event();
this.loadedEvent.Body = new EventBody();
}
ngOnInit() {
this.loadEvent();
this.loadAttachments();
this.ionicForm = this.formBuilder.group({
subject: ['', [Validators.required]]
})
}
get errorControl() {
return this.ionicForm.controls;
}
loadEvent(){
let eventid: string;
this.activatedRoute.paramMap.subscribe(paramMap =>
{
if (!paramMap.has("eventId")){
return;
}
else{
this.pageId = paramMap.get('eventId');
eventid = paramMap.get('eventId');
console.log(eventid);
}
if (paramMap.has("caller")){
this.backURL = "/home/" + paramMap.get('caller');
}
}
);
this.eventsService.getEvent(eventid).subscribe(response => {
this.loadedEvent = response;
});
}
async openAttendees(){
const modal = await this.modalCtrl.create({
component: AttendeesPage,
componentProps: {
eventAttendees: this.loadedEvent.Attendees
},
cssClass: 'attendee',
backdropDismiss: false
});
await modal.present();
modal.onDidDismiss().then((data) => {
if (data['data'] != null)
{
let newattendees: EventPerson[] = data['data'];
this.loadedEvent.Attendees = newattendees;
}
});
}
getEventAttendees(): EventPerson[]
{
return this.loadedEvent.Attendees;
}
setEventAttendees(newattendes: EventPerson[])
{
this.loadedEvent.Attendees = newattendes;
}
async deleteConfirm()
{
const alert = await this.alertController.create({
cssClass: 'my-custom-class',
header: 'Apagar evento!',
message: 'Deseja <strong>apagar</strong> o evento da agenda ' + this.loadedEvent.CalendarName + '?',
buttons: [
{
text: 'Não',
role: 'cancel',
cssClass: 'secondary',
handler: () => { }
}, {
text: 'Sim',
handler: () => {
this.Delete();
}
}
]
});
await alert.present();
}
Delete()
{
this.eventsService.deleteEvent(this.loadedEvent.EventId, 0).subscribe(async () =>
{
const alert = await this.alertController.create({
cssClass: 'my-custom-class',
header: 'Evento removido',
buttons: ['OK']
});
await alert.present();
this.router.navigate(['/home/events']);
});
}
Save()
{
if (this.ionicForm.valid){
this.activatedRoute.paramMap.subscribe(paramMap =>{
if (paramMap.has("profile")){
console.log(paramMap.get('profile'));
}
});
this.eventsService.editEvent(this.loadedEvent, 2, 3).subscribe(async () =>
{
const alert = await this.alertController.create({
cssClass: 'my-custom-class',
header: 'Evento actualizado',
buttons: ['OK']
});
await alert.present();
});
}
}
showAlert(){
this.alertService.presentAlert("Funcionalidade em desenvolvimento");
}
loadAttachments()
{
/* console.log(this.pageId); */
this.attachamentsService.getAttachmentsById(this.pageId).subscribe(res => {
this.loadedEventAttachments = res;
console.log(res);
});
}
async viewDocument(documenturl:string)
{
const url: string = documenturl.replace("webTRIX.Viewer","webTRIX.Viewer.Branch1");
const browser = this.iab.create(url,"_blank");
browser.show();
}
back()
{
//this.back();
}
doRefresh(event){
/* this.RefreshEvents(); */
event.target.complete();
setTimeout(() => {
event.target.complete();
}, 2000);
}
navigateTo(ev){
this.route.navigate(['/home/events',ev]);
}
async openAttachments(){
const modal = await this.modalCtrl.create({
component: AttachmentsPage,
componentProps: {
eventId: this.pageId,
attachments: this.loadedEventAttachments
},
cssClass: 'attachments',
backdropDismiss: false
});
await modal.present();
modal.onDidDismiss().then((data) => {
if (data['data'] != null)
{
let newattendees: EventPerson[] = data['data'];
this.loadedEvent.Attendees = newattendees;
}
});
}
}