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

Update publication page

Browse Source
This commit is contained in:
Peter Maquiran
2021-03-16 12:14:46 +01:00
parent 309e81d26c
commit 5e6dd3fea6
11 changed files with 381 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/publications/publications.module.ts
+3 -1
View File
@@ -11,6 +11,7 @@ import { SharedModule } from 'src/app/shared/shared.module';
import { ViewPublicationsPage } from 'src/app/shared/publication/view-publications/view-publications.page';
import { NewPublicationPage } from 'src/app/shared/publication/new-publication/new-publication.page';
import { PublicationDetailPage } from 'src/app/shared/publication/publication-detail/publication-detail.page';
import { NewActionPage } from 'src/app/shared/publication/new-action/new-action.page';
@NgModule({
@@ -25,7 +26,8 @@ import { PublicationDetailPage } from 'src/app/shared/publication/publication-de
PublicationsPage,
ViewPublicationsPage,
NewPublicationPage,
PublicationDetailPage
PublicationDetailPage,
NewActionPage
]
})
export class PublicationsPageModule {}
src/app/pages/publications/publications.page.html
+6
View File
@@ -88,6 +88,12 @@
[publicationId]="publicationId"
></app-publication-detail-shared>
<app-new-action
*ngIf="desktopComponent.showAddActions"
class="height-100 d-flex flex-column overflow-hidden background-white"
(closeDesktopComponent)="closeDesktopComponent($event)"
></app-new-action>
</div>
</div>
src/app/pages/publications/publications.page.ts
+21 -14
View File
@@ -35,7 +35,8 @@ export class PublicationsPage implements OnInit {
desktopComponent: any = {
showViewPublication: false,
showAddNewPublication: false,
showPublicationDetail: false
showPublicationDetail: false,
showAddActions: false
}
folderId: string;
@@ -102,19 +103,24 @@ export class PublicationsPage implements OnInit {
async AddPublicationFolder(item:any) {
this.closeDesktopComponent();
if(window.innerHeight >= 1024){
const modal = await this.modalController.create({
component: NewActionPage,
componentProps:{
item: item,
},
cssClass: 'new-action',
backdropDismiss: false
});
await modal.present();
modal.onDidDismiss().then(()=>{
this.doRefresh();
});
} else {
this.desktopComponent.showAddActions = true;
}
const modal = await this.modalController.create({
component: NewActionPage,
componentProps:{
item: item,
},
cssClass: 'new-action',
backdropDismiss: false
});
await modal.present();
modal.onDidDismiss().then(()=>{
this.doRefresh();
});
}
async viewPublications(folderId: string) {
@@ -197,7 +203,8 @@ export class PublicationsPage implements OnInit {
this.desktopComponent = {
showViewPublication: false,
showAddNewPublication: false,
showPublicationDetail: false
showPublicationDetail: false,
showAddActions: false,
}
}
src/app/shared/publication/new-action/new-action-routing.module.ts
+17
View File
@@ -0,0 +1,17 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { NewActionPage } from './new-action.page';
const routes: Routes = [
{
path: '',
component: NewActionPage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class NewActionPageRoutingModule {}
src/app/shared/publication/new-action/new-action.module.ts
+20
View File
@@ -0,0 +1,20 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { NewActionPageRoutingModule } from './new-action-routing.module';
import { NewActionPage } from './new-action.page';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
NewActionPageRoutingModule
],
declarations: [NewActionPage]
})
export class NewActionPageModule {}
src/app/shared/publication/new-action/new-action.page.html
+95
View File
@@ -0,0 +1,95 @@
<ion-header class="ion-no-border pt-20 px-20">
<div class="title-content d-flex align-center justify-space-between ">
<div class="div-title">
<ion-label class="title"> Nova Acção</ion-label>
</div>
<div class="actionType">
<ion-segment [(ngModel)]="segment" (ionChange)="segmentChanged($event)">
<ion-segment-button value="Viagem">
<ion-label>Viagem</ion-label>
</ion-segment-button>
<ion-segment-button value="Evento">
<ion-label>Evento</ion-label>
</ion-segment-button>
</ion-segment>
</div>
</div>
</ion-header>
<ion-content>
<div class="content-container">
<div class="ion-item-container">
<ion-input [(ngModel)]="folder.Description" placeholder="Assunto" ></ion-input>
</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 class="ion-input-class flex-grow-1">
<ion-datetime
[(ngModel)]="folder.DateBegin"
placeholder="Início"
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>
</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 class="ion-input-class d-flex flex-grow-1">
<ion-datetime
class="flex-grow-1"
[(ngModel)]="folder.DateEnd"
placeholder="Fim"
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>
</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-description.svg"></ion-icon>
</div>
<div class="ion-textarea-class flex-grow-1">
<ion-textarea [(ngModel)]="folder.Detail" rows="12" cols="20" placeholder="Descrição da acção..."></ion-textarea>
</div>
</div>
</div>
</div>
</ion-content>
<ion-footer class="ion-no-border">
<ion-toolbar class="footer-toolbar width-100 justify-space-between d-flex px-20">
<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-buttons slot="end">
<ion-button class="btn-ok" fill="clear" color="#fff" (click)="save()">
<ion-label>Criar</ion-label>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-footer>
src/app/shared/publication/new-action/new-action.page.scss
+128
View File
@@ -0,0 +1,128 @@
:host{
background: #fff;
}
ion-content{
--background: transparent;
transform: translate3d(0, 5px, 0);
--border-radius: 30px;
}
ion-footer{
background: #fff;
}
ion-toolbar{
/* --background:#0782c9; */
border-width: 0 !important;
}
.div-top-header{
margin: 0 auto;
background-color: #0782c9;
overflow: auto;
padding-top: 15px;
border: 0!important;
}
.div-search{
font-size: 45px;
float: left;
margin: 0 0 0 10px
}
.div-logo{
background: transparent;
width: 140px;
margin: 5px 0 0px 71px;
float: left;
}
.div-logo img{
width: 100%;
}
.div-profile{
font-size: 45px;
float: right;
margin-right: 10px;
}
.content-top{
background: #f3f2f2;
height: 20px;
margin: 0 auto;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
.content-container{
width: 100%;
margin:0 auto;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
background: #ffffff;
height: 100%;
padding: 25px 20px 0 20px;
overflow: auto;
}
.title-content{
margin: 0px auto;
overflow: auto;
padding: 0 !important;
}
.div-title{
width: 180px;
/* padding: 0!important; */
float: left;
margin: 2.5px 0 0 5px;
}
.title{
font-size: 25px;
}
.container-div{
margin-bottom: 15px;
overflow: auto;
}
.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;
}
.ion-item-class-2{
margin: 0px auto;
}
.ion-icon-class{
width: 45px;
height: 45px;
float: left;
padding: 10px;
font-size: 25px;
}
.ion-input-class{
height: auto;
border: 1px solid #ebebeb;
border-radius: 5px;
padding-left: 5px;
padding-right: 10px;
float: left;
}
.ion-textarea-class{
width: 315px;
height: auto;
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;
}
.actionType{
float: right;
overflow: auto;
border-radius: 30px;
}
.ion-segment{
--background: #0782c9;
}
src/app/shared/publication/new-action/new-action.page.spec.ts
+24
View File
@@ -0,0 +1,24 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { NewActionPage } from './new-action.page';
describe('NewActionPage', () => {
let component: NewActionPage;
let fixture: ComponentFixture<NewActionPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ NewActionPage ],
imports: [IonicModule.forRoot()]
}).compileComponents();
fixture = TestBed.createComponent(NewActionPage);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/shared/publication/new-action/new-action.page.ts
+52
View File
@@ -0,0 +1,52 @@
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { PublicationFolder } from 'src/app/models/publicationfolder';
import { PublicationsService } from 'src/app/services/publications.service';
@Component({
selector: 'app-new-action',
templateUrl: './new-action.page.html',
styleUrls: ['./new-action.page.scss'],
})
export class NewActionPage implements OnInit {
folder: PublicationFolder;
segment:string;
@Output() closeDesktopComponent= new EventEmitter<any>();
constructor(
private modalController: ModalController,
private publication: PublicationsService
) {
this.folder = new PublicationFolder();
}
ngOnInit() {
this.segment = "Viagem";
}
segmentChanged(ev: any) {
console.log(ev.detail.value);
}
save(){
this.folder = {
ProcessId: null,
Description: this.folder.Description,
Detail: this.folder.Detail,
DateBegin: this.folder.DateBegin,
DateEnd: this.folder.DateEnd,
ActionType: this.segment,
}
console.log(this.folder);
this.publication.CreatePublicationFolder(this.folder);
this.close();
}
close(){
this.closeDesktopComponent.emit();
}
}
src/app/shared/publication/publication-detail/publication-detail.page.html
+1 -1
View File
@@ -57,7 +57,7 @@
</div>
</ion-content>
<ion-footer>
<ion-toolbar class="footer-toolbar">
<ion-toolbar class="footer-toolbar width-md-100 px-md-20">
<ion-buttons slot="start">
<ion-button class="btn-delete" fill="clear" color="#ffe0e0" (click)="deletePost()">
<ion-label>Eliminar</ion-label>
src/style/main.scss
+14 -14
View File
@@ -150,35 +150,35 @@
@each $property, $short in $properties {
// all directions
.#{$short}-md-a-#{$size} {
.#{$short}a-md-#{$size} {
#{$property}-left: #{$size}px !important;
#{$property}-right: #{$size}px !important;
#{$property}-top: #{$size}px !important;
#{$property}-bottom: #{$size}px !important;
}
// top
.#{$short}-md-t-#{$size} {
.#{$short}t-md-#{$size} {
#{$property}-top: #{$size}px !important
}
// bottom
.#{$short}-md-b-#{$size} {
.#{$short}b-md-#{$size} {
#{$property}-bottom: #{$size}px !important
}
// left
.#{$short}-md-l-#{$size} {
.#{$short}l-md-#{$size} {
#{$property}-left: #{$size}px!important
}
// right
.#{$short}-md-r-#{$size} {
.#{$short}r-md-#{$size} {
#{$property}-right: #{$size}px!important
}
// left and right
.#{$short}-md-x-#{$size} {
.#{$short}x-md-#{$size} {
#{$property}-left: #{$size}px!important;
#{$property}-right: #{$size}px!important;
}
// top and bottom
.#{$short}-md-y-#{$size} {
.#{$short}y-md-#{$size} {
#{$property}-top: #{$size}px !important;
#{$property}-bottom: #{$size}px !important;
}
@@ -296,35 +296,35 @@
@each $property, $short in $properties {
// all directions
.#{$short}-lg-a-#{$size} {
.#{$short}a-lg-#{$size} {
#{$property}-left: #{$size}px !important;
#{$property}-right: #{$size}px !important;
#{$property}-top: #{$size}px !important;
#{$property}-bottom: #{$size}px !important;
}
// top
.#{$short}-lg-t-#{$size} {
.#{$short}t-lg-#{$size} {
#{$property}-top: #{$size}px !important
}
// bottom
.#{$short}-lg-b-#{$size} {
.#{$short}b-lg-#{$size} {
#{$property}-bottom: #{$size}px !important
}
// left
.#{$short}-lg-l-#{$size} {
.#{$short}l-lg-#{$size} {
#{$property}-left: #{$size}px!important
}
// right
.#{$short}-lg-r-#{$size} {
.#{$short}r-lg-#{$size} {
#{$property}-right: #{$size}px!important
}
// left and right
.#{$short}-lg-x-#{$size} {
.#{$short}x-lg-#{$size} {
#{$property}-left: #{$size}px!important;
#{$property}-right: #{$size}px!important;
}
// top and bottom
.#{$short}-lg-y-#{$size} {
.#{$short}y-lg-#{$size} {
#{$property}-top: #{$size}px !important;
#{$property}-bottom: #{$size}px !important;
}