mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-21 13:55:51 +00:00
Merge branch 'feature/chat' into developer
This commit is contained in:
tiago.kayaya
@@ -1,6 +1,5 @@
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar class="bg-blue">
|
||||
<ion-header class="ion-no-border">
|
||||
<ion-toolbar class="ion-no-border" class="bg-blue">
|
||||
<div class="div-top-header">
|
||||
<div class="div-search">
|
||||
<ion-icon src='assets/images/icons-search.svg'></ion-icon>
|
||||
@@ -12,8 +11,12 @@
|
||||
<ion-icon src='assets/images/icons-profile.svg'></ion-icon>
|
||||
</div>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-header>
|
||||
<ion-toolbar class="bg-blue">
|
||||
<div class="main-content">
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="end">
|
||||
<!-- customized TOGGLE button -->
|
||||
<div class="toggleBox">
|
||||
@@ -38,6 +41,9 @@
|
||||
Pessoal
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
</ion-toolbar>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
|
||||
@@ -214,34 +214,49 @@ label{
|
||||
font-size: 25px;
|
||||
margin: 0 5px 0 25px;
|
||||
padding: 0;
|
||||
color:#ffffff;
|
||||
/* color:#ffffff; */
|
||||
color:#000;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.div-top-header{
|
||||
width: 400px;
|
||||
height: 50px;
|
||||
margin: 6px auto;
|
||||
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;
|
||||
}
|
||||
}
|
||||
.div-search{
|
||||
font-size: 45px;
|
||||
float: left;
|
||||
margin: 0 0 0 10px
|
||||
}
|
||||
.div-logo{
|
||||
background: transparent;
|
||||
width: 150px;
|
||||
margin: 2.5px 0 2.5px 71px;
|
||||
float: left;
|
||||
}
|
||||
.div-logo img{
|
||||
width: 100%;
|
||||
}
|
||||
.div-profile{
|
||||
font-size: 45px;
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
.main-content{
|
||||
width: 100%; /* 400px */
|
||||
height: 100%;
|
||||
font-family: Roboto;
|
||||
margin: 0 auto;
|
||||
border-top-left-radius: 25px;
|
||||
border-top-right-radius: 25px;
|
||||
background-color: #fff;
|
||||
overflow:auto;
|
||||
/* padding: 25px 20px 0 20px; */
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
|
||||
@@ -14,6 +14,14 @@ const routes: Routes = [
|
||||
},
|
||||
{
|
||||
path: 'newchat',
|
||||
loadChildren: () => import('./newchat/newchat.module').then( m => m.NewchatPageModule)
|
||||
},
|
||||
{
|
||||
path: 'new-group',
|
||||
loadChildren: () => import('./new-group/new-group.module').then( m => m.NewGroupPageModule)
|
||||
},
|
||||
{
|
||||
path: 'group-messages',
|
||||
loadChildren: () => import('./group-messages/group-messages.module').then( m => m.GroupMessagesPageModule)
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
@@ -7,14 +7,17 @@ import { IonicModule } from '@ionic/angular';
|
||||
import { ChatPageRoutingModule } from './chat-routing.module';
|
||||
|
||||
import { ChatPage } from './chat.page';
|
||||
import { SharedModule } from 'src/app/shared/shared.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
IonicModule,
|
||||
ChatPageRoutingModule
|
||||
SharedModule,
|
||||
ChatPageRoutingModule,
|
||||
],
|
||||
declarations: [ChatPage]
|
||||
declarations: [ChatPage],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA]
|
||||
})
|
||||
export class ChatPageModule {}
|
||||
|
||||
@@ -1,12 +1,25 @@
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Chat</ion-title>
|
||||
<ion-icon slot="end" src="assets/images/icons-chat-new-group.svg" class="iconschatnew-group"></ion-icon>
|
||||
<ion-icon slot="end" src="assets/images/icons-chat-new-conversation.svg" class="iconschatnew-conversation" [routerLink]="['/home/chat/newchat']"></ion-icon>
|
||||
<app-header></app-header>
|
||||
</ion-header>
|
||||
<ion-header class="ion-no-border">
|
||||
<ion-toolbar class="bg-blue">
|
||||
<div class="main-header">
|
||||
<div class="title-content">
|
||||
<div class="div-title">
|
||||
<ion-label class="title">Chat</ion-label>
|
||||
</div>
|
||||
<div class="div-icon">
|
||||
<ion-icon slot="end" (click)="newGroup()" src="assets/images/icons-chat-new-group.svg" ></ion-icon>
|
||||
<!-- [routerLink]="['/home/chat/newchat']" -->
|
||||
<ion-icon slot="end" (click)="selectContact()" src="assets/images/icons-chat-new-conversation.svg"></ion-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<div class="main-content">
|
||||
<ion-toolbar >
|
||||
<ion-segment [(ngModel)]="segment" (ionChange)="onSegmentChange()">
|
||||
<ion-segment-button value="Contactos">
|
||||
@@ -17,17 +30,36 @@
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
</ion-toolbar>
|
||||
<ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
|
||||
<ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
|
||||
</ion-refresher>
|
||||
<div [ngSwitch]="segment">
|
||||
<ion-list *ngSwitchCase="'Contactos'" >
|
||||
<ion-list *ngSwitchCase="'Contactos'">
|
||||
<ion-item-group>
|
||||
<ion-item-sliding>
|
||||
<ion-item *ngFor="let user of userConnectedList" (click)="starConversation(user)">
|
||||
<ion-item *ngFor="let user of userConnectedList" (click)="startConversation(user)">
|
||||
<ion-icon slot="start" src="assets/images/icons-chat-chat-40.svg" class="iconschatchat-40"></ion-icon>
|
||||
<div>
|
||||
<h3>{{user.name}}</h3>
|
||||
<p>Podemos marcar reunião para amanha</p>
|
||||
</div>
|
||||
</ion-item>
|
||||
</ion-item>
|
||||
<div class="item">
|
||||
<div class="item-icon">
|
||||
<ion-icon class="icon" slot="start" src="assets/images/icons-chat-chat-40.svg"></ion-icon>
|
||||
</div>
|
||||
<div class="item-content">
|
||||
<div class="item-title-time">
|
||||
<div class="item-title">
|
||||
<ion-label>Secretário Assuntos Sociais</ion-label>
|
||||
</div>
|
||||
<div class="item-date">15:00</div>
|
||||
</div>
|
||||
<div class="item-description">
|
||||
<p>Podemos marcar reunião para amanha</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ion-item-sliding>
|
||||
</ion-item-group>
|
||||
</ion-list>
|
||||
@@ -40,12 +72,29 @@
|
||||
<h3>{{group.name}}</h3>
|
||||
<p>Grande momento.</p>
|
||||
</div>
|
||||
</ion-item>
|
||||
</ion-item>
|
||||
<div class="item">
|
||||
<div class="item-icon">
|
||||
<ion-icon class="icon" slot="start" src="assets/images/icons-chat-group-chat-40.svg"></ion-icon>
|
||||
</div>
|
||||
<div (click)="openGroupMessages()" class="item-content">
|
||||
<div class="item-title-time">
|
||||
<div class="item-title">
|
||||
<ion-label>Secretário para o sector Produtivo</ion-label>
|
||||
</div>
|
||||
<div class="item-date">15:00</div>
|
||||
</div>
|
||||
<div class="item-description">
|
||||
<p>Podemos marcar reunião para amanha</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ion-item-sliding>
|
||||
</ion-item-group>
|
||||
|
||||
</ion-list>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</ion-content>
|
||||
|
||||
|
||||
|
||||
@@ -1,23 +1,103 @@
|
||||
.iconschatnew-group{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
object-fit: contain;
|
||||
margin: 0 5px 0 5px;
|
||||
|
||||
.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;
|
||||
background: #fff;
|
||||
}
|
||||
.div-title{
|
||||
padding: 0!important;
|
||||
float: left;
|
||||
}
|
||||
.title{
|
||||
font-size: 25px;
|
||||
}
|
||||
.div-icon{
|
||||
width: 112px;
|
||||
float: right;
|
||||
font-size: 35px;
|
||||
overflow: auto;
|
||||
padding: 1px;
|
||||
}
|
||||
.div-icon ion-icon{
|
||||
float: right;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
.iconschatgroup-chat-40 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
object-fit: contain;
|
||||
.main-content{
|
||||
width: 100%; /* 400px */
|
||||
height: 100%;
|
||||
font-family: Roboto;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
overflow:auto;
|
||||
padding: 15px 20px 0 20px;
|
||||
|
||||
.iconschatnew-group{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
object-fit: contain;
|
||||
margin: 0 5px 0 5px;
|
||||
}
|
||||
.iconschatnew-conversation{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
object-fit: contain;
|
||||
margin: 0 5px 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.iconschatnew-conversation{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
object-fit: contain;
|
||||
margin: 0 5px 0 5px;
|
||||
.item{
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
|
||||
.item-icon{
|
||||
width: 40px;
|
||||
float: left;
|
||||
|
||||
.icon{
|
||||
margin-top: 10px;
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
.item-content{
|
||||
width: 317px;
|
||||
margin: 0 auto;
|
||||
float:right
|
||||
}
|
||||
.item-title-time{
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.item-title{
|
||||
width: 80%;
|
||||
float: left;
|
||||
font-size: 15px;
|
||||
color: #0d89d1;
|
||||
}
|
||||
.item-date{
|
||||
width: 20%;
|
||||
float: right;
|
||||
font-size: 13px;
|
||||
color: #797979;
|
||||
text-align: right;
|
||||
}
|
||||
.item-description{
|
||||
font-size: 13px;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
.iconschatchat-40 {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
object-fit: contain;
|
||||
}
|
||||
@@ -3,6 +3,9 @@ import { ModalController } from '@ionic/angular';
|
||||
import { AuthService } from 'src/app/services/auth.service';
|
||||
import { ChatService } from 'src/app/services/chat.service';
|
||||
import { ConversationPage } from './conversation/conversation.page';
|
||||
import { GroupMessagesPage } from './group-messages/group-messages.page';
|
||||
import { NewGroupPage } from './new-group/new-group.page';
|
||||
import { NewchatPage } from './newchat/newchat.page';
|
||||
|
||||
@Component({
|
||||
selector: 'app-chat',
|
||||
@@ -10,6 +13,7 @@ import { ConversationPage } from './conversation/conversation.page';
|
||||
styleUrls: ['./chat.page.scss'],
|
||||
})
|
||||
export class ChatPage implements OnInit {
|
||||
showLoader: boolean;
|
||||
loggedUser: any;
|
||||
/* Set segment variable */
|
||||
segment:string;
|
||||
@@ -24,29 +28,35 @@ export class ChatPage implements OnInit {
|
||||
|
||||
ngOnInit() {
|
||||
this.segment = "Contactos";
|
||||
this.authService.userData$.subscribe((res:any)=>{
|
||||
this.loggedUser=res;
|
||||
});
|
||||
this.doRefresh();
|
||||
this.authService.getUserData();
|
||||
|
||||
}
|
||||
onSegmentChange(){
|
||||
this.doRefresh();
|
||||
}
|
||||
doRefresh(){
|
||||
this.getGroups();
|
||||
this.getConnectedUsers();
|
||||
}
|
||||
onSegmentChange(){
|
||||
this.RefreshEvents();
|
||||
}
|
||||
RefreshEvents(){}
|
||||
getGroups(){
|
||||
this.showLoader = true;
|
||||
this.result = this.chatService.getAllPrivateGroups().subscribe((res:any)=>{
|
||||
this.groupList = res.groups;
|
||||
/* console.log(this.groupList); */
|
||||
this.showLoader = false;
|
||||
});
|
||||
}
|
||||
|
||||
getConnectedUsers(){
|
||||
this.showLoader = true;
|
||||
this.result = this.chatService.getAllConnectedUsers().subscribe((res:any)=>{
|
||||
this.userConnectedList = res.users;
|
||||
console.log(this.userConnectedList);
|
||||
this.showLoader = false;
|
||||
});
|
||||
}
|
||||
async starConversation(selectedUser) {
|
||||
|
||||
async startConversation(selectedUser) {
|
||||
const modal = await this.modalController.create({
|
||||
component: ConversationPage,
|
||||
cssClass: 'conversation',
|
||||
@@ -58,4 +68,31 @@ export class ChatPage implements OnInit {
|
||||
await modal.present();
|
||||
modal.onDidDismiss();
|
||||
}
|
||||
async selectContact(){
|
||||
const modal = await this.modalController.create({
|
||||
component: NewchatPage,
|
||||
cssClass: 'newchat',
|
||||
backdropDismiss: false,
|
||||
});
|
||||
await modal.present();
|
||||
modal.onDidDismiss();
|
||||
}
|
||||
async newGroup(){
|
||||
const modal = await this.modalController.create({
|
||||
component: NewGroupPage,
|
||||
cssClass: 'new-group',
|
||||
backdropDismiss: false,
|
||||
});
|
||||
await modal.present();
|
||||
modal.onDidDismiss();
|
||||
}
|
||||
async openGroupMessages(){
|
||||
const modal = await this.modalController.create({
|
||||
component: GroupMessagesPage,
|
||||
cssClass: 'group-messages',
|
||||
backdropDismiss: false,
|
||||
});
|
||||
await modal.present();
|
||||
modal.onDidDismiss();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { GroupMessagesPage } from './group-messages.page';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: GroupMessagesPage
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule],
|
||||
})
|
||||
export class GroupMessagesPageRoutingModule {}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
import { IonicModule } from '@ionic/angular';
|
||||
|
||||
import { GroupMessagesPageRoutingModule } from './group-messages-routing.module';
|
||||
|
||||
import { GroupMessagesPage } from './group-messages.page';
|
||||
import { SharedModule } from 'src/app/shared/shared.module';
|
||||
import { PopoverModule } from 'src/app/shared/popover/chat-popover/popover.modules';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
IonicModule,
|
||||
SharedModule,
|
||||
PopoverModule,
|
||||
GroupMessagesPageRoutingModule
|
||||
],
|
||||
declarations: [GroupMessagesPage]
|
||||
})
|
||||
export class GroupMessagesPageModule {}
|
||||
@@ -0,0 +1,46 @@
|
||||
<ion-header class="ion-no-border">
|
||||
<ion-toolbar class="header-toolbar">
|
||||
<div class="main-header">
|
||||
<div class="title-content">
|
||||
<app-btn-modal-dismiss></app-btn-modal-dismiss>
|
||||
<div class="middle">
|
||||
<ion-label class="title">Grupo de Trabalho A</ion-label>
|
||||
</div>
|
||||
<div class="right">
|
||||
<ion-icon (click)="openOptions()" src="assets/images/icons-menu.svg"></ion-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
|
||||
<ion-content>
|
||||
<p>HHHHH</p>
|
||||
|
||||
|
||||
|
||||
|
||||
</ion-content>
|
||||
<ion-footer class="ion-no-border">
|
||||
<ion-toolbar>
|
||||
<ion-row align-items-center>
|
||||
<ion-col>
|
||||
<ion-item button lines="none">
|
||||
<img src="assets/images/icons-arrow-arrow-down-25.svg">
|
||||
</ion-item>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-item lines="none" class="div-message">
|
||||
<ion-textarea placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
|
||||
<ion-icon slot="end" name="mic-outline"></ion-icon>
|
||||
</ion-item>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-item button lines="none" [disabled]="message === ''">
|
||||
<img src="assets/images/icons-chat-send.svg">
|
||||
</ion-item>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-toolbar>
|
||||
</ion-footer>
|
||||
@@ -0,0 +1,53 @@
|
||||
.header-toolbar{
|
||||
--background:transparent;
|
||||
--opacity: 1;
|
||||
|
||||
.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;
|
||||
background: #fff;
|
||||
.middle{
|
||||
padding: 0!important;
|
||||
float: left;
|
||||
width: 280px;
|
||||
margin: 2.5px 0 0 5px;
|
||||
}
|
||||
.right{
|
||||
padding: 0!important;
|
||||
float: right;
|
||||
font-size: 25px;
|
||||
color: #0782c9;
|
||||
margin: 5px 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.title{
|
||||
font-size: 25px;
|
||||
}
|
||||
.div-icon{
|
||||
width: 40px;
|
||||
float: right;
|
||||
font-size: 35px;
|
||||
overflow: auto;
|
||||
padding: 1px;
|
||||
}
|
||||
.div-icon ion-icon{
|
||||
float: right;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { IonicModule } from '@ionic/angular';
|
||||
|
||||
import { GroupMessagesPage } from './group-messages.page';
|
||||
|
||||
describe('GroupMessagesPage', () => {
|
||||
let component: GroupMessagesPage;
|
||||
let fixture: ComponentFixture<GroupMessagesPage>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ GroupMessagesPage ],
|
||||
imports: [IonicModule.forRoot()]
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(GroupMessagesPage);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
}));
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,58 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ActionSheetController, MenuController, PopoverController } from '@ionic/angular';
|
||||
import { ChatPopoverPage } from 'src/app/shared/popover/chat-popover/chat-popover.page';
|
||||
|
||||
@Component({
|
||||
selector: 'app-group-messages',
|
||||
templateUrl: './group-messages.page.html',
|
||||
styleUrls: ['./group-messages.page.scss'],
|
||||
})
|
||||
export class GroupMessagesPage implements OnInit {
|
||||
|
||||
message:any;
|
||||
|
||||
constructor(
|
||||
private menu: MenuController,
|
||||
private actionSheetController: ActionSheetController,
|
||||
public popoverController: PopoverController,
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
async actionSheet() {
|
||||
const actionSheet = await this.actionSheetController.create({
|
||||
cssClass: 'my-custom-class',
|
||||
buttons: [{
|
||||
text: 'Sair do grupo',
|
||||
handler: () => {
|
||||
console.log('Delete clicked');
|
||||
}
|
||||
}, {
|
||||
text: 'Alterar nome do grupo',
|
||||
handler: () => {
|
||||
console.log('Share clicked');
|
||||
}
|
||||
}, {
|
||||
text: 'Apagar o grupo',
|
||||
handler: () => {
|
||||
console.log('Play clicked');
|
||||
}
|
||||
},
|
||||
]
|
||||
});
|
||||
await actionSheet.present();
|
||||
}
|
||||
|
||||
async openOptions(ev: any) {
|
||||
const popover = await this.popoverController.create({
|
||||
component: ChatPopoverPage,
|
||||
cssClass: 'chat-popover',
|
||||
event: ev,
|
||||
translucent: true
|
||||
});
|
||||
return await popover.present();
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { ContactsPage } from './contacts.page';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: ContactsPage
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule],
|
||||
})
|
||||
export class ContactsPageRoutingModule {}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
import { IonicModule } from '@ionic/angular';
|
||||
|
||||
import { ContactsPageRoutingModule } from './contacts-routing.module';
|
||||
|
||||
import { ContactsPage } from './contacts.page';
|
||||
import { SharedModule } from 'src/app/shared/shared.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
IonicModule,
|
||||
SharedModule,
|
||||
ContactsPageRoutingModule
|
||||
],
|
||||
declarations: [ContactsPage]
|
||||
})
|
||||
export class ContactsPageModule {}
|
||||
@@ -0,0 +1,57 @@
|
||||
<ion-header class="ion-no-border">
|
||||
<ion-toolbar class="header-toolbar">
|
||||
<div class="main-header">
|
||||
<div class="title-content">
|
||||
<div class="back-icon">
|
||||
<ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
|
||||
</div>
|
||||
<div class="div-title">
|
||||
<ion-label class="title">Contactos</ion-label>
|
||||
</div>
|
||||
<app-btn-seguinte (click)="groupMessages()"></app-btn-seguinte>
|
||||
</div>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar class="header-search">
|
||||
<ion-searchbar (ionChange)="onChange($event)" placeholder="Pesquisar por cantacto" ></ion-searchbar>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
|
||||
<ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
|
||||
<ion-refresher-content>
|
||||
</ion-refresher-content>
|
||||
</ion-refresher>
|
||||
<div class="main-content">
|
||||
|
||||
<ion-list>
|
||||
<!-- <ion-item *ngFor="let user of searchedItem">
|
||||
{{user.name}}
|
||||
</ion-item> -->
|
||||
<div class="ion-no-padding item-checkbox no-inner-padding" lines="none">
|
||||
<ion-checkbox color="primary"></ion-checkbox>
|
||||
<p>Tiago Kayaya</p>
|
||||
</div>
|
||||
<div class="ion-no-padding item-checkbox no-inner-padding" lines="none">
|
||||
<ion-checkbox color="primary"></ion-checkbox>
|
||||
<p>Gilson Manuel</p>
|
||||
<ion-icon name="ellipse"></ion-icon>
|
||||
</div>
|
||||
</ion-list>
|
||||
<!-- <ion-alpha-scroll
|
||||
[listData]="contacts"
|
||||
key="name"
|
||||
[itemTemplate]="alphaScrollItemTemplateRef"
|
||||
[currentPageClass]="currentPageClass"
|
||||
[triggerChange]="triggerAlphaScrollChange">
|
||||
|
||||
<ng-template #alphaScrollItemTemplateRef let-item>
|
||||
<ion-item (click)="currentPageClass.onItemClick(item)">{{item.$t}}</ion-item>
|
||||
</ng-template>
|
||||
|
||||
</ion-alpha-scroll> -->
|
||||
</div>
|
||||
</ion-content>
|
||||
|
||||
|
||||
@@ -0,0 +1,102 @@
|
||||
ion-content{
|
||||
--background:transparent;
|
||||
}
|
||||
.header-toolbar{
|
||||
--background:transparent;
|
||||
--opacity: 1;
|
||||
|
||||
.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);
|
||||
|
||||
.div-icon{
|
||||
width: 40px;
|
||||
float: right;
|
||||
font-size: 35px;
|
||||
overflow: auto;
|
||||
padding: 1px;
|
||||
}
|
||||
.div-icon ion-icon{
|
||||
float: right;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.title-content{
|
||||
width: 360px;
|
||||
margin: 0px auto;
|
||||
overflow: auto;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.back-icon{
|
||||
width: 37px;
|
||||
float: left;
|
||||
font-size: 35px;
|
||||
overflow: auto;
|
||||
|
||||
}
|
||||
.div-title{
|
||||
width: 221px;
|
||||
padding: 0!important;
|
||||
float: left;
|
||||
margin: 2.5px 0 0 5px;
|
||||
}
|
||||
.title{
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.main-content{
|
||||
width: 360px;
|
||||
height: 100%;
|
||||
font-family: Roboto;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
overflow:auto;
|
||||
padding: 0 20px 0 20px;
|
||||
|
||||
.item-checkbox{
|
||||
width: 100%;
|
||||
margin: 15px 0 15px 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.item-checkbox ion-checkbox{
|
||||
--border-color: #0d89d1;
|
||||
--background-checked:#0d89d1;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.item-checkbox p{
|
||||
display: block;
|
||||
margin: 0 !important;
|
||||
width: 270px;
|
||||
padding-left: 10px;
|
||||
font-size: 15px;
|
||||
color: #0d89d1;
|
||||
float: left;
|
||||
}
|
||||
.item-checkbox ion-icon{
|
||||
float: left;
|
||||
color:#99e47b;
|
||||
}
|
||||
}
|
||||
.header-search{
|
||||
margin-top: 15px;
|
||||
|
||||
ion-searchbar{
|
||||
width: 380px;
|
||||
margin: 0px auto;
|
||||
--border-radius: 5px;
|
||||
--box-shadow: /* inset */ .5px .5px 5px #ebebeb;
|
||||
overflow: auto;
|
||||
--icon-color:#0d89d1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { IonicModule } from '@ionic/angular';
|
||||
|
||||
import { ContactsPage } from './contacts.page';
|
||||
|
||||
describe('ContactsPage', () => {
|
||||
let component: ContactsPage;
|
||||
let fixture: ComponentFixture<ContactsPage>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ ContactsPage ],
|
||||
imports: [IonicModule.forRoot()]
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(ContactsPage);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
}));
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,48 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ModalController } from '@ionic/angular';
|
||||
import { GroupMessagesPage } from '../../group-messages/group-messages.page';
|
||||
|
||||
@Component({
|
||||
selector: 'app-contacts',
|
||||
templateUrl: './contacts.page.html',
|
||||
styleUrls: ['./contacts.page.scss'],
|
||||
})
|
||||
export class ContactsPage implements OnInit {
|
||||
showLoader: boolean;
|
||||
|
||||
constructor(
|
||||
private modalController: ModalController,
|
||||
) {
|
||||
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
}
|
||||
doRefresh(event){
|
||||
|
||||
}
|
||||
close(){
|
||||
this.modalController.dismiss();
|
||||
}
|
||||
onChange(event){
|
||||
|
||||
}
|
||||
clicked(){
|
||||
console.log('clicked');
|
||||
|
||||
}
|
||||
async groupMessages(){
|
||||
const modal = await this.modalController.create({
|
||||
component: GroupMessagesPage,
|
||||
componentProps: {},
|
||||
cssClass: 'contacts',
|
||||
backdropDismiss: false
|
||||
});
|
||||
|
||||
await modal.present();
|
||||
|
||||
modal.onDidDismiss();
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { GroupChatPage } from './group-chat.page';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: GroupChatPage
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule],
|
||||
})
|
||||
export class GroupChatPageRoutingModule {}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
import { IonicModule } from '@ionic/angular';
|
||||
|
||||
import { GroupChatPageRoutingModule } from './group-chat-routing.module';
|
||||
|
||||
import { GroupChatPage } from './group-chat.page';
|
||||
import { SharedModule } from 'src/app/shared/shared.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
IonicModule,
|
||||
SharedModule,
|
||||
GroupChatPageRoutingModule
|
||||
],
|
||||
declarations: [GroupChatPage]
|
||||
})
|
||||
export class GroupChatPageModule {}
|
||||
@@ -0,0 +1,17 @@
|
||||
<ion-header class="ion-no-border">
|
||||
<ion-toolbar class="header-toolbar">
|
||||
<div class="main-header">
|
||||
<div class="title-content">
|
||||
<app-btn-modal-dismiss></app-btn-modal-dismiss>
|
||||
<div class="middle">
|
||||
<ion-label class="title">Novo Grupo</ion-label>
|
||||
</div>
|
||||
<app-btn-seguinte></app-btn-seguinte>
|
||||
</div>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
|
||||
</ion-content>
|
||||
@@ -0,0 +1,24 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { IonicModule } from '@ionic/angular';
|
||||
|
||||
import { GroupChatPage } from './group-chat.page';
|
||||
|
||||
describe('GroupChatPage', () => {
|
||||
let component: GroupChatPage;
|
||||
let fixture: ComponentFixture<GroupChatPage>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ GroupChatPage ],
|
||||
imports: [IonicModule.forRoot()]
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(GroupChatPage);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
}));
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,15 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-group-chat',
|
||||
templateUrl: './group-chat.page.html',
|
||||
styleUrls: ['./group-chat.page.scss'],
|
||||
})
|
||||
export class GroupChatPage implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { NewGroupPage } from './new-group.page';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: NewGroupPage
|
||||
},
|
||||
{
|
||||
path: 'contacts',
|
||||
loadChildren: () => import('./contacts/contacts.module').then( m => m.ContactsPageModule)
|
||||
},
|
||||
{
|
||||
path: 'group-chat',
|
||||
loadChildren: () => import('./group-chat/group-chat.module').then( m => m.GroupChatPageModule)
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule],
|
||||
})
|
||||
export class NewGroupPageRoutingModule {}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
import { IonicModule } from '@ionic/angular';
|
||||
|
||||
import { NewGroupPageRoutingModule } from './new-group-routing.module';
|
||||
|
||||
import { NewGroupPage } from './new-group.page';
|
||||
import { SharedModule } from 'src/app/shared/shared.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
IonicModule,
|
||||
SharedModule,
|
||||
NewGroupPageRoutingModule
|
||||
],
|
||||
declarations: [NewGroupPage]
|
||||
})
|
||||
export class NewGroupPageModule {}
|
||||
@@ -0,0 +1,47 @@
|
||||
<ion-header class="ion-no-border">
|
||||
<ion-toolbar class="header-toolbar">
|
||||
<div class="main-header">
|
||||
<div class="title-content">
|
||||
<div class="left">
|
||||
<ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
|
||||
</div>
|
||||
<div class="middle">
|
||||
<ion-label class="title">Novo Grupo</ion-label>
|
||||
</div>
|
||||
<app-btn-seguinte (click)="addContacts()"></app-btn-seguinte>
|
||||
</div>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<div class="main-content">
|
||||
<div class="item-container">
|
||||
<ion-input placeholder="Título"></ion-input>
|
||||
</div>
|
||||
<ion-item class="ion-no-padding item-container-no-border" lines="none">
|
||||
<ion-checkbox color="primary"></ion-checkbox>
|
||||
<ion-label>Grupo Ultra-secreto</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<div class="container-div">
|
||||
<div class="ion-item-class-2">
|
||||
<div class="ion-icon-class">
|
||||
<ion-icon slot="start" src="assets/images/icons-duration.svg"></ion-icon>
|
||||
</div>
|
||||
<div class="ion-input-class">
|
||||
<ion-datetime
|
||||
placeholder="Duração"
|
||||
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>
|
||||
</ion-content>
|
||||
@@ -0,0 +1,156 @@
|
||||
ion-content{
|
||||
--background:transparent;
|
||||
}
|
||||
.header-toolbar{
|
||||
--background:transparent;
|
||||
--opacity: 1;
|
||||
}
|
||||
.div-top-header{
|
||||
width: 400px;
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
.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;
|
||||
background: #fff;
|
||||
|
||||
.left{
|
||||
width: 37px;
|
||||
float: left;
|
||||
font-size: 35px;
|
||||
overflow: auto;
|
||||
}
|
||||
.middle{
|
||||
padding: 0!important;
|
||||
float: left;
|
||||
width: 221px;
|
||||
margin: 2.5px 0 0 5px;
|
||||
}
|
||||
.right{
|
||||
padding: 0!important;
|
||||
float: right;
|
||||
font-size: 15px;
|
||||
color: #0782c9;
|
||||
margin: 8px 0 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.title{
|
||||
font-size: 25px;
|
||||
}
|
||||
.div-icon{
|
||||
width: 40px;
|
||||
float: right;
|
||||
font-size: 35px;
|
||||
overflow: auto;
|
||||
padding: 1px;
|
||||
}
|
||||
.div-icon ion-icon{
|
||||
float: right;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.main-content{
|
||||
width: 100%; /* 400px */
|
||||
height: 100%;
|
||||
font-family: Roboto;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
overflow:auto;
|
||||
padding: 15px 20px 0 20px;
|
||||
|
||||
.item-container{
|
||||
width: 360px;
|
||||
margin: 15px auto;
|
||||
border: 1px solid #ebebeb;
|
||||
border-radius: 5px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.item-container-no-border{
|
||||
width: 360px;
|
||||
margin: 15px auto;
|
||||
border-radius: 5px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.item-container-no-border ion-checkbox{
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.item-container-no-border ion-label{
|
||||
padding-left: 10px;
|
||||
font-size: 12px;
|
||||
color: #000;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.container-div{
|
||||
margin-bottom: 15px;
|
||||
overflow: auto;
|
||||
|
||||
.ion-item-class-2{
|
||||
width: 360px;
|
||||
margin: 0px auto;
|
||||
|
||||
.ion-icon-class{
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
float: left;
|
||||
padding: 10px;
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
.ion-input-class{
|
||||
width: 315px;
|
||||
height: 45px;
|
||||
border: 1px solid #ebebeb;
|
||||
border-radius: 5px;
|
||||
padding-left: 5px;
|
||||
padding-right: 10px;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { IonicModule } from '@ionic/angular';
|
||||
|
||||
import { NewGroupPage } from './new-group.page';
|
||||
|
||||
describe('NewGroupPage', () => {
|
||||
let component: NewGroupPage;
|
||||
let fixture: ComponentFixture<NewGroupPage>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ NewGroupPage ],
|
||||
imports: [IonicModule.forRoot()]
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(NewGroupPage);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
}));
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,39 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ModalController } from '@ionic/angular';
|
||||
import { ContactsPage } from './contacts/contacts.page';
|
||||
|
||||
@Component({
|
||||
selector: 'app-new-group',
|
||||
templateUrl: './new-group.page.html',
|
||||
styleUrls: ['./new-group.page.scss'],
|
||||
})
|
||||
export class NewGroupPage implements OnInit {
|
||||
showLoader: boolean;
|
||||
|
||||
constructor(
|
||||
private modalController: ModalController,
|
||||
) {
|
||||
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
}
|
||||
close(){
|
||||
this.modalController.dismiss();
|
||||
}
|
||||
|
||||
async addContacts(){
|
||||
const modal = await this.modalController.create({
|
||||
component: ContactsPage,
|
||||
componentProps: {},
|
||||
cssClass: 'contacts',
|
||||
backdropDismiss: false
|
||||
});
|
||||
|
||||
await modal.present();
|
||||
|
||||
modal.onDidDismiss();
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
@@ -15,6 +15,7 @@ import { NewchatPage } from './newchat.page';
|
||||
IonicModule,
|
||||
NewchatPageRoutingModule
|
||||
],
|
||||
declarations: [NewchatPage]
|
||||
declarations: [NewchatPage],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA]
|
||||
})
|
||||
export class NewchatPageModule {}
|
||||
|
||||
@@ -1,20 +1,51 @@
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button icon="chevron-back"></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Nova Conversa</ion-title>
|
||||
<ion-header class="ion-no-border">
|
||||
<ion-toolbar class="header-toolbar">
|
||||
<div class="main-header">
|
||||
<div class="title-content">
|
||||
<div class="back-icon">
|
||||
<ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
|
||||
</div>
|
||||
<div class="div-title">
|
||||
<ion-label class="title">Nova Conversa</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<ion-toolbar>
|
||||
<ion-searchbar round (ionChange)="onChange($event)" placeholder="Pesquisar por cantacto" ></ion-searchbar>
|
||||
</ion-toolbar>
|
||||
<ion-list>
|
||||
<ion-item *ngFor="let user of searchedItem" (click)="starConversation(user)">
|
||||
{{user.name}}
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
<ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
|
||||
<ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
|
||||
<ion-refresher-content>
|
||||
</ion-refresher-content>
|
||||
</ion-refresher>
|
||||
<div class="main-content">
|
||||
<ion-toolbar>
|
||||
<ion-searchbar round (ionChange)="onChange($event)" placeholder="Pesquisar por cantacto" ></ion-searchbar>
|
||||
</ion-toolbar>
|
||||
<ion-list>
|
||||
<ion-item *ngFor="let user of searchedItem" (click)="starConversation(user)">
|
||||
{{user.name}}
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
Tiago Kayaya
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
Gilson Manuel
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
<ion-alpha-scroll
|
||||
[listData]="contacts"
|
||||
key="name"
|
||||
[itemTemplate]="alphaScrollItemTemplateRef"
|
||||
[currentPageClass]="currentPageClass"
|
||||
[triggerChange]="triggerAlphaScrollChange">
|
||||
|
||||
<ng-template #alphaScrollItemTemplateRef let-item>
|
||||
<ion-item (click)="currentPageClass.onItemClick(item)">{{item.$t}}</ion-item>
|
||||
</ng-template>
|
||||
|
||||
</ion-alpha-scroll>
|
||||
</div>
|
||||
</ion-content>
|
||||
|
||||
|
||||
@@ -1,3 +1,67 @@
|
||||
ion-content{
|
||||
--background:transparent;
|
||||
}
|
||||
.header-toolbar{
|
||||
--background:transparent;
|
||||
--opacity: 1;
|
||||
|
||||
.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);
|
||||
|
||||
.div-icon{
|
||||
width: 40px;
|
||||
float: right;
|
||||
font-size: 35px;
|
||||
overflow: auto;
|
||||
padding: 1px;
|
||||
}
|
||||
.div-icon ion-icon{
|
||||
float: right;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.title-content{
|
||||
width: 360px;
|
||||
margin: 0px auto;
|
||||
overflow: auto;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.back-icon{
|
||||
width: 37px;
|
||||
float: left;
|
||||
font-size: 35px;
|
||||
overflow: auto;
|
||||
|
||||
}
|
||||
.div-title{
|
||||
width: 221px;
|
||||
padding: 0!important;
|
||||
float: left;
|
||||
margin: 2.5px 0 0 5px;
|
||||
}
|
||||
.title{
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.main-content{
|
||||
width: 100%; /* 400px */
|
||||
height: 100%;
|
||||
font-family: Roboto;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
overflow:auto;
|
||||
padding: 15px 20px 0 20px;
|
||||
}
|
||||
ion-searchbar{
|
||||
--border-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,12 +11,27 @@ import { ConversationPage } from '../conversation/conversation.page';
|
||||
styleUrls: ['./newchat.page.scss'],
|
||||
})
|
||||
export class NewchatPage implements OnInit {
|
||||
showLoader: boolean;
|
||||
userList: any[];
|
||||
|
||||
contacts:any;
|
||||
currentPageClass = this;
|
||||
triggerAlphaScrollChange: number = 0;
|
||||
|
||||
constructor(
|
||||
private chatService: ChatService,
|
||||
private modalController: ModalController,
|
||||
private router:Router) { }
|
||||
private router:Router) {
|
||||
this.contacts = [
|
||||
{
|
||||
'name': 'Affenpinscher'
|
||||
},
|
||||
{
|
||||
'name': 'Afghan Hound'
|
||||
},
|
||||
// ...
|
||||
];
|
||||
}
|
||||
|
||||
result:any;
|
||||
searchCountryString:any;
|
||||
@@ -25,6 +40,16 @@ export class NewchatPage implements OnInit {
|
||||
ngOnInit() {
|
||||
this.getUsers();
|
||||
}
|
||||
close(){
|
||||
this.modalController.dismiss();
|
||||
}
|
||||
doRefresh(event) {
|
||||
this.getUsers();
|
||||
|
||||
setTimeout(() => {
|
||||
event.target.complete();
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
getUsers(){
|
||||
this.result = this.chatService.getAllUsers().subscribe((res:any)=>{
|
||||
@@ -60,6 +85,14 @@ export class NewchatPage implements OnInit {
|
||||
await modal.present();
|
||||
modal.onDidDismiss();
|
||||
}
|
||||
|
||||
|
||||
onItemClick(item) {
|
||||
// This is an example of how you could manually trigger ngOnChange
|
||||
// for the component. If you modify "listData" it won't perform
|
||||
// an ngOnChange, you will have to trigger manually to refresh the component.
|
||||
this.triggerAlphaScrollChange++;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -16,16 +16,16 @@
|
||||
<div *ngIf="loadedEvent">
|
||||
<ion-item-group>
|
||||
<ion-item-sliding>
|
||||
<form [formGroup]="ionicForm" novalidate>
|
||||
<!-- <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 -->
|
||||
//Error messages
|
||||
<span class="error ion-padding" *ngIf="errorControl.subject.errors?.required">
|
||||
Campo obrigatório
|
||||
</span>
|
||||
</form>
|
||||
</form> -->
|
||||
<ion-item>
|
||||
<ion-label position="stacked">Descrição</ion-label>
|
||||
<ion-input class="capitalizeText" [(ngModel)]='loadedEvent.Body.Text'></ion-input>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<ion-header translucent="true">
|
||||
<ion-toolbar class="bg-blue">
|
||||
<ion-header class="ion-no-border">
|
||||
<ion-toolbar class="ion-no-border" class="bg-blue">
|
||||
<div class="div-top-header">
|
||||
<div class="div-search">
|
||||
<ion-icon src='assets/images/icons-search.svg'></ion-icon>
|
||||
@@ -12,6 +12,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-header translucent="true">
|
||||
<ion-toolbar class="bg-blue">
|
||||
<ion-buttons slot="end">
|
||||
<div class="toggleBox">
|
||||
|
||||
@@ -21,28 +21,31 @@ ion-toolbar{
|
||||
}
|
||||
.div-top-header{
|
||||
width: 400px;
|
||||
margin: 6px auto;
|
||||
margin: 0 auto;
|
||||
background-color: #0782c9;
|
||||
overflow: auto;
|
||||
}
|
||||
.div-search{
|
||||
font-size: 45px;
|
||||
float: left;
|
||||
margin: 0 0 0 10px
|
||||
}
|
||||
.div-logo{
|
||||
background: transparent;
|
||||
width: 150px;
|
||||
margin: 2.5px 0 2.5px 71px;
|
||||
float: left;
|
||||
}
|
||||
.div-logo img{
|
||||
width: 100%;
|
||||
}
|
||||
.div-profile{
|
||||
font-size: 45px;
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
.ion-text-header-top p{
|
||||
--background: transparent;
|
||||
|
||||
+1
-1
@@ -50,7 +50,7 @@
|
||||
<ion-datetime
|
||||
placeholder="Início"
|
||||
[(ngModel)]="postData.StartDate"
|
||||
displayFormat="D MMM YYYY H:mm"
|
||||
displayFormat="D H:mm"
|
||||
minuteValues="0,15,30,45"
|
||||
monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
|
||||
min="2018"
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<ion-header>
|
||||
<ion-toolbar class="bg-blue">
|
||||
<ion-header class="ion-no-border">
|
||||
<ion-toolbar class="ion-no-border" class="bg-blue">
|
||||
<div class="div-top-header">
|
||||
<div class="div-search">
|
||||
<ion-icon src='assets/images/icons-search.svg'></ion-icon>
|
||||
@@ -11,20 +11,24 @@
|
||||
<ion-icon src='assets/images/icons-profile.svg'></ion-icon>
|
||||
</div>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar class="bg-blue">
|
||||
<ion-title class="header-title">Gabinete Digital</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
|
||||
<ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
|
||||
<ion-refresher-content>
|
||||
</ion-refresher-content>
|
||||
</ion-refresher>
|
||||
|
||||
<div class="expedient-content">
|
||||
<div class="main-content">
|
||||
<div class="title-content">
|
||||
<div class="div-title">
|
||||
<ion-label class="title">Gabinete Digital</ion-label>
|
||||
</div>
|
||||
<div class="div-icon">
|
||||
<ion-icon slot="end" src='assets/images/icons-add.svg'></ion-icon>
|
||||
</div>
|
||||
<ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
|
||||
<ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
|
||||
<ion-refresher-content>
|
||||
</ion-refresher-content>
|
||||
</ion-refresher>
|
||||
</div>
|
||||
<div class="exp-card" (click)="openEventsToApproveList('MDGPR')">
|
||||
<div class="exp-card-icon">
|
||||
<ion-icon src="assets/images/icons-agenda.svg"></ion-icon>
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
ion-content{
|
||||
--padding-top:15px;
|
||||
--padding-end:15px;
|
||||
--padding-start:15px;
|
||||
--padding-bottom:15px;
|
||||
--background:#ecf8ff;
|
||||
/* --padding-top:15px; */
|
||||
/* --padding-end:15px;
|
||||
--padding-start:15px; */
|
||||
/* --padding-bottom:15px; */
|
||||
/* --background:#ecf8ff; */
|
||||
--background: transparent;
|
||||
}
|
||||
:host{
|
||||
background: #0782c9;
|
||||
ion-card-title{
|
||||
text-align: center;
|
||||
}
|
||||
@@ -34,10 +36,66 @@ ion-label{
|
||||
margin-bottom: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.div-top-header{
|
||||
width: 400px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
/* NEW CSS */
|
||||
.expedient-content{
|
||||
width: 100%;
|
||||
.main-content{
|
||||
width: 100%; /* 400px */
|
||||
height: 100%;
|
||||
font-family: Roboto;
|
||||
margin: 0 auto;
|
||||
border-top-left-radius: 25px;
|
||||
border-top-right-radius: 25px;
|
||||
background:#ecf8ff;;
|
||||
overflow:auto;
|
||||
padding: 25px 15px 15px 15px;
|
||||
}
|
||||
.title-content{
|
||||
width: 360px;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
padding: 0 !important;
|
||||
background: transparent;
|
||||
}
|
||||
.div-title{
|
||||
padding: 0!important;
|
||||
float: left;
|
||||
}
|
||||
.title{
|
||||
font-size: 25px;
|
||||
}
|
||||
.div-icon{
|
||||
width: 40px;
|
||||
float: right;
|
||||
font-size: 35px;
|
||||
overflow: auto;
|
||||
}
|
||||
.exp-card{
|
||||
@@ -97,29 +155,3 @@ ion-label{
|
||||
}
|
||||
|
||||
|
||||
.div-top-header{
|
||||
width: 400px;
|
||||
height: 50px;
|
||||
margin: 6px auto;
|
||||
background-color: #0782c9;
|
||||
overflow: auto;
|
||||
}
|
||||
.div-search{
|
||||
font-size: 45px;
|
||||
float: left;
|
||||
margin: 0 0 0 10px
|
||||
}
|
||||
.div-logo{
|
||||
background: transparent;
|
||||
width: 150px;
|
||||
margin: 2.5px 0 2.5px 71px;
|
||||
float: left;
|
||||
}
|
||||
.div-logo img{
|
||||
width: 100%;
|
||||
}
|
||||
.div-profile{
|
||||
font-size: 45px;
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
@@ -38,6 +38,10 @@ export class GabineteDigitalPage implements OnInit {
|
||||
});
|
||||
console.log(this.eventService.getAllPrEvents.length);
|
||||
*/
|
||||
this.processesbackend.GetActionsList().subscribe(res=>{
|
||||
console.log(res);
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
LoadCounts() {
|
||||
|
||||
@@ -17,3 +17,4 @@
|
||||
</form>
|
||||
</div>
|
||||
</ion-content>
|
||||
|
||||
|
||||
@@ -7,6 +7,7 @@ import { environment } from 'src/environments/environment';
|
||||
import { AlertController } from '@ionic/angular';
|
||||
import { StorageService } from 'src/app/services/storage.service';
|
||||
import { AuthConnstants } from 'src/app/config/auth-constants';
|
||||
import { PhotoService } from 'src/app/services/photo.service';
|
||||
|
||||
|
||||
@Component({
|
||||
@@ -29,6 +30,7 @@ export class LoginPage implements OnInit {
|
||||
private authService: AuthService,
|
||||
private storageService: StorageService,
|
||||
private toastService: ToastService,
|
||||
private photoService: PhotoService,
|
||||
public alertController: AlertController) { }
|
||||
|
||||
ngOnInit() {
|
||||
@@ -53,29 +55,17 @@ export class LoginPage implements OnInit {
|
||||
await alert.present();
|
||||
}
|
||||
|
||||
loginAction(){
|
||||
|
||||
if(this.validateInput()){
|
||||
this.authService.loginChat2(this.postData).subscribe((res: any) =>{
|
||||
if(res.data){
|
||||
this.storageService.store(AuthConnstants.AUTH, res.data);
|
||||
console.log('Log RockectChat OK');
|
||||
//console.log(res.data);
|
||||
|
||||
}
|
||||
else{
|
||||
console.log("Invalid username or password!");
|
||||
}
|
||||
},
|
||||
(error:any) =>{
|
||||
console.log('Network error');
|
||||
})
|
||||
}
|
||||
else{
|
||||
this.presentAlert('Por favor, insira o seu nome de utilizador e palavra-passe.');
|
||||
}
|
||||
loginRocketChat(){
|
||||
this.authService.loginChat(this.postData).subscribe((res: any) =>{
|
||||
this.storageService.store(res);
|
||||
console.log('Login to Rocket chat OK');
|
||||
},(error:any) =>{
|
||||
console.log('Network error');
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
async Login(){
|
||||
try {
|
||||
//Go to our home in home/feed.
|
||||
@@ -88,12 +78,12 @@ export class LoginPage implements OnInit {
|
||||
BasicAuthKey: ""
|
||||
}
|
||||
if (await this.authService.login(this.userattempt)){
|
||||
this.loginAction();
|
||||
this.loginRocketChat();
|
||||
console.log('Log Gabinete Digital OK');
|
||||
this.router.navigate(['/home/events']);
|
||||
}
|
||||
else
|
||||
{
|
||||
{
|
||||
//this.toastService.presentToast('Não foi possível fazer login"');
|
||||
this.presentAlert('O nome de utilizador e palavra-passe estão incorretas ou verifique a sua conexão com a internet e volte a tentar.');
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<ion-slides>
|
||||
<ion-slide>
|
||||
<div class="swipper-zoom-container">
|
||||
<img src="assets/images/1.jpg">
|
||||
<img src="{{imageUrl}}">
|
||||
</div>
|
||||
</ion-slide>
|
||||
</ion-slides>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ModalController } from '@ionic/angular';
|
||||
import { ModalController, NavParams } from '@ionic/angular';
|
||||
|
||||
@Component({
|
||||
selector: 'app-image-modal',
|
||||
@@ -7,8 +7,12 @@ import { ModalController } from '@ionic/angular';
|
||||
styleUrls: ['./image-modal.page.scss'],
|
||||
})
|
||||
export class ImageModalPage implements OnInit {
|
||||
imageUrl:string;
|
||||
|
||||
constructor(private modalController: ModalController,) { }
|
||||
constructor(private modalController: ModalController,
|
||||
private navParams: NavParams) {
|
||||
this.imageUrl = this.navParams.get('imageUrl');
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
@@ -21,10 +21,21 @@
|
||||
<div class="div-title">
|
||||
<ion-label class="title"> Nova Açã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>
|
||||
|
||||
<div class="ion-item-container">
|
||||
<ion-input placeholder="Assunto" ></ion-input>
|
||||
<ion-input [(ngModel)]="folder.Description" placeholder="Assunto" ></ion-input>
|
||||
</div>
|
||||
|
||||
<div class="container-div">
|
||||
@@ -34,6 +45,26 @@
|
||||
</div>
|
||||
<div class="ion-input-class">
|
||||
<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">
|
||||
<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
|
||||
[(ngModel)]="folder.DateEnd"
|
||||
placeholder="Fim"
|
||||
displayFormat="D MMM YYYY H:mm"
|
||||
minuteValues="0,15,30,45"
|
||||
@@ -51,7 +82,7 @@
|
||||
<ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
|
||||
</div>
|
||||
<div class="ion-textarea-class">
|
||||
<ion-textarea rows="3" cols="20" placeholder="Descrição da ação..."></ion-textarea>
|
||||
<ion-textarea [(ngModel)]="folder.Detail" rows="12" cols="20" placeholder="Descrição da ação..."></ion-textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -66,7 +66,7 @@ ion-toolbar{
|
||||
padding: 0 !important;
|
||||
}
|
||||
.div-title{
|
||||
width: 270px;
|
||||
width: 180px;
|
||||
/* padding: 0!important; */
|
||||
float: left;
|
||||
margin: 2.5px 0 0 5px;
|
||||
@@ -102,6 +102,15 @@ font-size: 25px;
|
||||
padding: 10px;
|
||||
font-size: 25px;
|
||||
}
|
||||
.ion-input-class{
|
||||
width: 315px;
|
||||
height: auto;
|
||||
border: 1px solid #ebebeb;
|
||||
border-radius: 5px;
|
||||
padding-left: 5px;
|
||||
padding-right: 10px;
|
||||
float: left;
|
||||
}
|
||||
.ion-textarea-class{
|
||||
width: 315px;
|
||||
height: auto;
|
||||
@@ -115,4 +124,14 @@ font-size: 25px;
|
||||
border: 1px solid #ebebeb;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
}
|
||||
.actionType{
|
||||
width: 170px;
|
||||
padding: 10px;
|
||||
float: right;
|
||||
overflow: auto;
|
||||
border-radius: 30px;
|
||||
}
|
||||
.ion-segment{
|
||||
--background: #0782c9;
|
||||
}
|
||||
@@ -1,5 +1,7 @@
|
||||
import { Component, OnInit } 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',
|
||||
@@ -8,14 +10,37 @@ import { ModalController } from '@ionic/angular';
|
||||
})
|
||||
export class NewActionPage implements OnInit {
|
||||
|
||||
folder: PublicationFolder;
|
||||
segment:string;
|
||||
|
||||
constructor(
|
||||
private modalController: ModalController,
|
||||
) { }
|
||||
private publication: PublicationsService
|
||||
) {
|
||||
this.folder = new PublicationFolder();
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.segment = "Viagem";
|
||||
}
|
||||
|
||||
segmentChanged(ev: any) {
|
||||
console.log(ev.detail.value);
|
||||
}
|
||||
|
||||
save(){
|
||||
console.log('Salvar...');
|
||||
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.modalController.dismiss();
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="publicationType!='1'" class="ion-item-container">
|
||||
<ion-input placeholder="Título" ></ion-input>
|
||||
<ion-input [(ngModel)]="pub.Title" name="title" ngDefaultControl placeholder="Título" ></ion-input>
|
||||
</div>
|
||||
|
||||
<div *ngIf="publicationType!='1'" class="container-div">
|
||||
@@ -32,24 +32,44 @@
|
||||
<ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
|
||||
</div>
|
||||
<div class="ion-textarea-class">
|
||||
<ion-textarea rows="6" cols="20" placeholder="Corpo de texto..."></ion-textarea>
|
||||
<ion-textarea [(ngModel)]="pub.Message" name="description" ngDefaultControl rows="12" cols="20" placeholder="Corpo de texto..."></ion-textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="capturedImage != ''" class="ion-item-container-no-border">
|
||||
<ion-label class="attached-title">Fotografia Anexada</ion-label>
|
||||
<ion-item lines="none">
|
||||
<ion-thumbnail slot="start">
|
||||
<ion-img [(ngModel)]="capturedImage" name="image" ngDefaultControl [src]="'data:image/png;base64,'+capturedImage"></ion-img>
|
||||
</ion-thumbnail>
|
||||
<!-- <ion-thumbnail *ngIf="!publication" slot="start">
|
||||
<ion-img [(ngModel)]="publication.imageUrl" [src]="guestPicture"></ion-img>
|
||||
</ion-thumbnail> -->
|
||||
<ion-label>
|
||||
<p>{{capturedImageTitle}}</p>
|
||||
<p hidden>size</p>
|
||||
</ion-label>
|
||||
<ion-icon (click)="clear()" name="close"></ion-icon>
|
||||
</ion-item>
|
||||
|
||||
<!-- <ion-thumbnail>
|
||||
<ion-img src="{{imgUrl}}"></ion-img>
|
||||
</ion-thumbnail> -->
|
||||
</div>
|
||||
|
||||
<div class="ion-item-container-no-border">
|
||||
<ion-label>
|
||||
<ion-label (click)="takePicture()">
|
||||
<div class="attach-icon">
|
||||
<ion-icon src="assets/images/icons-add-photo.svg"></ion-icon>
|
||||
</div>
|
||||
<div class="attach-document">
|
||||
<ion-label>Tirar Fotografia</ion-label>
|
||||
</div>
|
||||
</ion-label>
|
||||
</div>
|
||||
</ion-label>
|
||||
</div>
|
||||
|
||||
<div class="ion-item-container-no-border">
|
||||
<ion-label (click)="openGallery()">
|
||||
<ion-label (click)="getPicture()">
|
||||
<div class="attach-icon">
|
||||
<ion-icon src="assets/images/icons-add-photos.svg"></ion-icon>
|
||||
</div>
|
||||
@@ -59,8 +79,10 @@
|
||||
</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ion-content>
|
||||
|
||||
|
||||
<ion-footer class="ion-no-border">
|
||||
<ion-toolbar class="footer-toolbar">
|
||||
<ion-buttons slot="start">
|
||||
@@ -70,7 +92,7 @@
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="end">
|
||||
<ion-button class="btn-ok" fill="clear" color="#fff" (click)="save()">
|
||||
<ion-label>Criar</ion-label>
|
||||
<ion-label>Gravar</ion-label>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
|
||||
@@ -128,4 +128,14 @@ font-size: 25px;
|
||||
width: 37px;
|
||||
font-size: 35px;
|
||||
float: left;
|
||||
}
|
||||
.attached-title{
|
||||
font-family: Roboto;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
color: #000;
|
||||
}
|
||||
@@ -1,45 +1,187 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ModalController, NavParams } from '@ionic/angular';
|
||||
import { AlertController, ModalController, NavParams } from '@ionic/angular';
|
||||
import { GalleryPage } from '../gallery/gallery.page';
|
||||
|
||||
/* import {Plugins, CameraResultType, CameraSource} from '@capacitor/core'; */
|
||||
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
|
||||
import { PublicationsService } from 'src/app/services/publications.service';
|
||||
import { Publication } from 'src/app/models/publication';
|
||||
import { Image } from 'src/app/models/image';
|
||||
import { ThrowStmt } from '@angular/compiler';
|
||||
import { PhotoService } from 'src/app/services/photo.service';
|
||||
import { AlertService } from 'src/app/services/alert.service';
|
||||
|
||||
/* const { Camera } = Plugins; */
|
||||
|
||||
import { Camera, CameraOptions } from '@ionic-native/camera/ngx';
|
||||
import { PublicationFolder } from 'src/app/models/publicationfolder';
|
||||
import { ViewPublicationsPage } from '../view-publications/view-publications.page';
|
||||
import { LoadingService } from 'src/app/services/loading.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-new-publication',
|
||||
templateUrl: './new-publication.page.html',
|
||||
styleUrls: ['./new-publication.page.scss'],
|
||||
})
|
||||
export class NewPublicationPage implements OnInit {
|
||||
showLoader: boolean;
|
||||
publication: Publication;
|
||||
pub: Publication = new Publication();
|
||||
folderId: string;
|
||||
image: Image = new Image();
|
||||
|
||||
publicationType:string;
|
||||
publicationTitle:string;
|
||||
imgUrl:any;
|
||||
|
||||
Defaultimage:any = '';
|
||||
|
||||
|
||||
photo: SafeResourceUrl;
|
||||
|
||||
guestPicture:any;
|
||||
|
||||
capturedImage:any;
|
||||
capturedImageTitle:any;
|
||||
|
||||
|
||||
constructor(
|
||||
private modalController: ModalController,
|
||||
public photoService: PhotoService,
|
||||
private navParams: NavParams,
|
||||
private publications: PublicationsService,
|
||||
private camera: Camera,
|
||||
) {
|
||||
this.publicationType = this.navParams.get('publicationType');
|
||||
this.folderId = this.navParams.get('folderId');
|
||||
this.publicationTitle = 'Nova Publicação';
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.setTitle();
|
||||
this.clear();
|
||||
this.takePicture();
|
||||
}
|
||||
save(){
|
||||
|
||||
}
|
||||
close(){
|
||||
this.modalController.dismiss();
|
||||
}
|
||||
setTitle(){
|
||||
if(this.publicationType == '1'){
|
||||
this.publicationTitle = 'Nova Publicação Rápida'
|
||||
takePicture(){
|
||||
const options: CameraOptions = {
|
||||
quality: 100,
|
||||
destinationType: this.camera.DestinationType.DATA_URL,
|
||||
encodingType: this.camera.EncodingType.JPEG,
|
||||
mediaType: this.camera.MediaType.PICTURE,
|
||||
targetWidth: 720,
|
||||
targetHeight: 720,
|
||||
}
|
||||
else if(this.publicationType == '2'){
|
||||
this.publicationTitle = 'Nova Publicação'
|
||||
|
||||
this.camera.getPicture(options).then((imageData) => {
|
||||
// imageData is either a base64 encoded string or a file URI
|
||||
// If it's base64 (DATA_URL):
|
||||
let base64Image = 'data:image/jpeg;base64,' + imageData;
|
||||
this.capturedImage = imageData;
|
||||
this.capturedImageTitle = new Date().getTime() + '.jpeg';
|
||||
}, (err) => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
|
||||
getPicture(){
|
||||
const options: CameraOptions = {
|
||||
quality: 100,
|
||||
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
|
||||
destinationType: this.camera.DestinationType.DATA_URL,
|
||||
encodingType: this.camera.EncodingType.JPEG,
|
||||
mediaType: this.camera.MediaType.PICTURE,
|
||||
targetWidth: 720,
|
||||
targetHeight: 720,
|
||||
}
|
||||
else if(this.publicationType == '3'){
|
||||
this.publicationTitle = 'Editar Publicação'
|
||||
this.camera.getPicture(options).then((imageData) => {
|
||||
// imageData is either a base64 encoded string or a file URI
|
||||
// If it's base64 (DATA_URL):
|
||||
let base64Image = 'data:image/jpeg;base64,' + imageData;
|
||||
this.capturedImage = imageData;
|
||||
this.capturedImageTitle = new Date().getTime() + '.jpeg';
|
||||
}, (err) => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
|
||||
async save(){
|
||||
if(this.publicationType == '3'){
|
||||
if(this.capturedImage != ''){
|
||||
this.publication = {
|
||||
DocumentId:this.publication.DocumentId,
|
||||
ProcessId:this.publication.ProcessId,
|
||||
Title: this.pub.Title,
|
||||
Message: this.pub.Message,
|
||||
DatePublication: this.publication.DatePublication,
|
||||
OriginalFileName: this.capturedImageTitle,
|
||||
FileBase64: this.capturedImage,
|
||||
FileExtension: 'jpg',
|
||||
}
|
||||
console.log('Edit change image');
|
||||
console.log(this.publication);
|
||||
this.publications.UpdatePublication(this.publication.ProcessId, this.publication);
|
||||
this.close();
|
||||
}
|
||||
else{
|
||||
this.publication = {
|
||||
DocumentId:this.publication.DocumentId,
|
||||
ProcessId:this.publication.ProcessId,
|
||||
Title: this.pub.Title,
|
||||
Message: this.pub.Message,
|
||||
DatePublication: this.publication.DatePublication,
|
||||
OriginalFileName: '',
|
||||
FileBase64: this.publication.FileBase64,
|
||||
FileExtension: 'jpg',
|
||||
}
|
||||
console.log('Edit - keep image');
|
||||
console.log(this.publication);
|
||||
this.publications.UpdatePublication(this.publication.ProcessId, this.publication);
|
||||
this.close();
|
||||
}
|
||||
}
|
||||
else{
|
||||
|
||||
this.publication = {
|
||||
DocumentId:null,
|
||||
ProcessId:this.folderId,
|
||||
Title: this.pub.Title,
|
||||
Message: this.pub.Message,
|
||||
DatePublication: new Date(),
|
||||
OriginalFileName: this.capturedImageTitle,
|
||||
FileBase64: this.capturedImage,
|
||||
FileExtension: 'jpg',
|
||||
}
|
||||
|
||||
console.log('Create');
|
||||
console.log(this.publication);
|
||||
this.publications.CreatePublication(this.folderId, this.publication);
|
||||
this.close();
|
||||
}
|
||||
}
|
||||
|
||||
async openGallery() {
|
||||
|
||||
close(){
|
||||
this.modalController.dismiss().then(()=>{
|
||||
this.showLoader=true;
|
||||
});
|
||||
}
|
||||
clear(){
|
||||
this.capturedImage = '';
|
||||
}
|
||||
setTitle(){
|
||||
if(this.publicationType == '1'){
|
||||
this.publicationTitle = 'Nova Publicação Rápida';
|
||||
}
|
||||
else if(this.publicationType == '2'){
|
||||
this.publicationTitle = 'Nova Publicação';
|
||||
}
|
||||
else if(this.publicationType == '3'){
|
||||
this.publicationTitle = 'Editar Publicação';
|
||||
this.pub = this.navParams.get('publication');
|
||||
}
|
||||
}
|
||||
|
||||
/* async openGallery() {
|
||||
const modal = await this.modalController.create({
|
||||
component: GalleryPage,
|
||||
componentProps:{
|
||||
@@ -49,6 +191,18 @@ export class NewPublicationPage implements OnInit {
|
||||
});
|
||||
await modal.present();
|
||||
modal.onDidDismiss();
|
||||
}
|
||||
} */
|
||||
|
||||
/* async takePicture(){
|
||||
const image = await Plugins.Camera.getPhoto({
|
||||
quality: 100,
|
||||
allowEditing: false,
|
||||
resultType: CameraResultType.DataUrl,
|
||||
source: CameraSource.Camera
|
||||
});
|
||||
console.log(image);
|
||||
|
||||
this.photo = this.sanitizer.bypassSecurityTrustResourceUrl(image && (image.dataUrl));
|
||||
} */
|
||||
|
||||
}
|
||||
|
||||
@@ -7,12 +7,14 @@ import { IonicModule } from '@ionic/angular';
|
||||
import { PublicationsPageRoutingModule } from './publications-routing.module';
|
||||
|
||||
import { PublicationsPage } from './publications.page';
|
||||
import { SharedModule } from 'src/app/shared/shared.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
IonicModule,
|
||||
SharedModule,
|
||||
PublicationsPageRoutingModule
|
||||
],
|
||||
declarations: [PublicationsPage]
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
<ion-header class="ion-no-border">
|
||||
<ion-toolbar class="ion-no-border" class="bg-blue">
|
||||
<ion-header>
|
||||
<app-header></app-header>
|
||||
</ion-header>
|
||||
<!-- <ion-header class="ion-no-border">
|
||||
<ion-toolbar class="bg-blue">
|
||||
<div class="div-top-header">
|
||||
<div class="div-search">
|
||||
<ion-icon src='assets/images/icons-search.svg'></ion-icon>
|
||||
@@ -12,38 +15,56 @@
|
||||
</div>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
</ion-header> -->
|
||||
<ion-header class="ion-no-border">
|
||||
<ion-toolbar class="bg-blue">
|
||||
<div class="main-header">
|
||||
<div class="title-content">
|
||||
<div class="div-title">
|
||||
<ion-label class="title">Ações Presidenciais</ion-label>
|
||||
</div>
|
||||
<div class="div-icon">
|
||||
<ion-icon (click)="AddPublicationFolder()" slot="end" src='assets/images/icons-add.svg'></ion-icon>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
|
||||
<ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
|
||||
<ion-refresher-content>
|
||||
</ion-refresher-content>
|
||||
</ion-refresher>
|
||||
<div class="main-content">
|
||||
<div class="title-content">
|
||||
<div class="div-title">
|
||||
<ion-label class="title">Ações Presidenciais</ion-label>
|
||||
</div>
|
||||
<div class="div-icon">
|
||||
<ion-icon (click)="AddPublicationFolder()" slot="end" src='assets/images/icons-add.svg'></ion-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" [routerLink]="['/home/publications/view-publications']">
|
||||
<div class="item"
|
||||
*ngFor="let viagem of publicationsTravelFolderList"
|
||||
|
||||
(click)="viewPublications(viagem)">
|
||||
<div class="item-icon">
|
||||
<ion-icon slot="end" src='assets/images/icons-plane-active.svg'></ion-icon>
|
||||
</div>
|
||||
<div class="item-content">
|
||||
<ion-label>
|
||||
<p class="item-content-date">12 de Janeiro</p>
|
||||
<p class="item-content-title">Viagem a Maputo</p>
|
||||
<p class="item-content-detail">Investida de Filipe Nyusi</p>
|
||||
<p class="item-content-date">De {{viagem.DateBegin}} a {{viagem.DateEnd}}</p>
|
||||
<p class="item-content-title">{{viagem.Description}}</p>
|
||||
<p class="item-content-detail">{{viagem.Detail}}</p>
|
||||
</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item"
|
||||
|
||||
*ngFor="let evento of publicationsEventFolderList"
|
||||
(click)="viewPublications(evento)">
|
||||
<div class="item-icon2">
|
||||
<ion-icon slot="end" src='assets/images/icons-nav-actions.svg'></ion-icon>
|
||||
</div>
|
||||
<div class="item-content">
|
||||
<ion-label>
|
||||
<p class="item-content-date">07 de Janeiro</p>
|
||||
<p class="item-content-title">Decreto de Cadastro Social Único</p>
|
||||
<p class="item-content-date">{{evento.DateBegin}}</p>
|
||||
<p class="item-content-title">{{evento.Description}}</p>
|
||||
</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,8 +5,11 @@ ion-content{
|
||||
--background: transparent;
|
||||
}
|
||||
ion-toolbar{
|
||||
background: transparent;
|
||||
border-width: 0 !important;
|
||||
--padding-top: 0px !important;
|
||||
--padding-start: 0px !important;
|
||||
--padding-right: 0px !important;
|
||||
--padding-end: 0px !important;
|
||||
}
|
||||
.div-top-header{
|
||||
width: 400px;
|
||||
@@ -15,65 +18,84 @@ ion-toolbar{
|
||||
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;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
ion-content{
|
||||
--background:#0782c9;
|
||||
--border: none;
|
||||
}
|
||||
.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;
|
||||
background: #fff;
|
||||
}
|
||||
.div-title{
|
||||
padding: 0!important;
|
||||
float: left;
|
||||
}
|
||||
.title{
|
||||
font-size: 25px;
|
||||
}
|
||||
.div-icon{
|
||||
width: 40px;
|
||||
float: right;
|
||||
font-size: 35px;
|
||||
overflow: auto;
|
||||
padding: 1px;
|
||||
}
|
||||
.div-icon ion-icon{
|
||||
float: right;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
.main-content{
|
||||
width: 100%; /* 400px */
|
||||
height: 100%;
|
||||
font-family: Roboto;
|
||||
margin: 0 auto;
|
||||
border-top-left-radius: 25px;
|
||||
border-top-right-radius: 25px;
|
||||
background-color: #fff;
|
||||
overflow:auto;
|
||||
padding: 25px 20px 0 20px;
|
||||
}
|
||||
.title-content{
|
||||
width: 360px;
|
||||
margin: 0px auto;
|
||||
overflow: auto;
|
||||
padding: 0 !important;
|
||||
}
|
||||
.div-title{
|
||||
padding: 0!important;
|
||||
float: left;
|
||||
}
|
||||
.title{
|
||||
font-size: 25px;
|
||||
}
|
||||
.div-icon{
|
||||
width: 40px;
|
||||
float: right;
|
||||
font-size: 35px;
|
||||
overflow: auto;
|
||||
padding: 15px 20px 0 20px;
|
||||
}
|
||||
.item{
|
||||
width: 360px;
|
||||
padding: 0 0px 0 0px;
|
||||
overflow: auto;
|
||||
margin: 0 auto;
|
||||
margin: 0px auto;
|
||||
}
|
||||
.item-icon{
|
||||
margin-top: 28px;
|
||||
|
||||
@@ -1,6 +1,16 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Router, NavigationEnd } from '@angular/router';
|
||||
import { ModalController } from '@ionic/angular';
|
||||
import { PublicationFolder } from 'src/app/models/publicationfolder';
|
||||
import { ProcessesService } from 'src/app/services/processes.service';
|
||||
import { PublicationsService } from 'src/app/services/publications.service';
|
||||
import { NewActionPage } from './new-action/new-action.page';
|
||||
import { ViewPublicationsPage } from './view-publications/view-publications.page';
|
||||
|
||||
import { Animation, AnimationController } from '@ionic/angular';
|
||||
import { LoadingController } from '@ionic/angular';
|
||||
import { LoadingService } from 'src/app/services/loading.service';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-publications',
|
||||
@@ -8,10 +18,74 @@ import { NewActionPage } from './new-action/new-action.page';
|
||||
styleUrls: ['./publications.page.scss'],
|
||||
})
|
||||
export class PublicationsPage implements OnInit {
|
||||
showLoader: boolean;
|
||||
publicationFolder: PublicationFolder;
|
||||
|
||||
constructor(private modalController: ModalController,) { }
|
||||
publicationFolderList: PublicationFolder[];
|
||||
publicationsEventFolderList: PublicationFolder[];
|
||||
publicationsTravelFolderList: PublicationFolder[];
|
||||
|
||||
theDate:any;
|
||||
theEndDate:any;
|
||||
customDate:any;
|
||||
months: string[];
|
||||
days:string[];
|
||||
|
||||
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
private modalController: ModalController,
|
||||
private animationController: AnimationController,
|
||||
private loading: LoadingService,
|
||||
private publications: PublicationsService,
|
||||
) {
|
||||
this.months = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"];
|
||||
this.days = ["Domingo", "Segunda-feira", "Terça-feira", "Quarta-feira", "Quinta-feira", "Sexta-feira", "Sábado"];
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.router.events.forEach((event) => {
|
||||
if(event instanceof NavigationEnd && event.url == this.router.url) {
|
||||
this.getActions();
|
||||
}
|
||||
});
|
||||
}
|
||||
doRefresh(event) {
|
||||
this.getActions();
|
||||
|
||||
setTimeout(() => {
|
||||
event.target.complete();
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
getActions(){
|
||||
this.showLoader = true;
|
||||
this.publications.GetPublicationFolderList().subscribe(res=>{
|
||||
this.publicationFolderList = res;
|
||||
console.log(res);
|
||||
this.publicationsEventFolderList = new Array();
|
||||
this.publicationsTravelFolderList = new Array();
|
||||
res.forEach(data => {
|
||||
this.theDate = new Date(data.DateBegin);
|
||||
this.theEndDate = new Date(data.DateEnd);
|
||||
let folder: PublicationFolder = {
|
||||
ProcessId: data.ProcessId,
|
||||
Description: data.Description,
|
||||
Detail: data.Detail,
|
||||
DateBegin: this.theDate.getDate() +" de " + ( this.months[this.theDate.getMonth()])+" de " +this.theDate.getFullYear(),
|
||||
DateEnd: this.theEndDate.getDate() +" de " + ( this.months[this.theEndDate.getMonth()])+" de " +this.theEndDate.getFullYear(),
|
||||
ActionType: data.ActionType,
|
||||
}
|
||||
if(data.ActionType == "Evento"){
|
||||
this.publicationsEventFolderList.push(folder);
|
||||
}
|
||||
else{
|
||||
this.publicationsTravelFolderList.push(folder);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
async AddPublicationFolder(item:any) {
|
||||
@@ -24,6 +98,50 @@ export class PublicationsPage implements OnInit {
|
||||
backdropDismiss: false
|
||||
});
|
||||
await modal.present();
|
||||
modal.onDidDismiss().then(()=>{
|
||||
this.doRefresh(event);
|
||||
});
|
||||
}
|
||||
|
||||
async viewPublications(folder: PublicationFolder) {
|
||||
|
||||
/* const enterAnimation = (baseEl: any) => {
|
||||
const backdropAnimation = this.animationController.create()
|
||||
.addElement(baseEl.querySelector('ion-backdrop')!)
|
||||
.fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
|
||||
|
||||
const wrapperAnimation = this.animationController.create()
|
||||
.addElement(baseEl.querySelector('.modal-wrapper')!)
|
||||
.keyframes([
|
||||
{ offset: 0, opacity: '0', transform: 'scale(0)' },
|
||||
{ offset: 1, opacity: '0.99', transform: 'scale(1)' }
|
||||
]);
|
||||
|
||||
return this.animationController.create()
|
||||
.addElement(baseEl)
|
||||
.easing('ease-out')
|
||||
.duration(500)
|
||||
.addAnimation([backdropAnimation, wrapperAnimation]);
|
||||
}
|
||||
|
||||
const leaveAnimation = (baseEl: any) => {
|
||||
return enterAnimation(baseEl).direction('reverse');
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
/* let item = this.publicationFolderList; */
|
||||
const modal = await this.modalController.create({
|
||||
component: ViewPublicationsPage,
|
||||
/* enterAnimation,
|
||||
leaveAnimation, */
|
||||
componentProps:{
|
||||
item:folder,
|
||||
},
|
||||
cssClass: 'new-action',
|
||||
backdropDismiss: false
|
||||
});
|
||||
await modal.present();
|
||||
modal.onDidDismiss();
|
||||
}
|
||||
|
||||
|
||||
+38
-7
@@ -17,24 +17,55 @@
|
||||
<ion-content>
|
||||
<div class="content-top"></div>
|
||||
<div class="content-container">
|
||||
<div *ngIf="publication.Title != ''">
|
||||
<div class="title-content">
|
||||
<div class="back-icon">
|
||||
<ion-icon [routerLink]="['/home/publications/view-publications']" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
|
||||
<ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
|
||||
</div>
|
||||
<div class="div-title">
|
||||
<ion-label class="title"> Aterragem em Maputo</ion-label>
|
||||
<p class="post-data">Há 1h atrás</p>
|
||||
<ion-label class="title"> {{publication.Title}}</ion-label>
|
||||
<p class="post-data">{{publication.DatePublication | date: 'dd-MM-yy | h:mm'}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
|
||||
<ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
|
||||
<ion-refresher-content>
|
||||
</ion-refresher-content>
|
||||
</ion-refresher>
|
||||
<div class="post-item">
|
||||
<div class="post-img">
|
||||
<img src='assets/images/1.jpg' alt='image' tappable (click)="openPreview()">
|
||||
<div *ngIf="publication.FileBase64.length > 30" class="post-img">
|
||||
<img src="{{publication.FileBase64}}" alt="image" tappable (click)="openPreview(publication.FileBase64)">
|
||||
</div>
|
||||
<div *ngIf="publication.FileBase64.length < 30" class="post-img">
|
||||
<img src="/assets/icon/icon-no-image.svg" alt="image">
|
||||
</div>
|
||||
<div class="post-description">
|
||||
<p>Presidente João Lourenço chega a Maputo para investidura de Filipe Nyusi como presidente de Moçambique</p>
|
||||
<p>{{publication.Message}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="publication.Title == ''">
|
||||
<div class="title-content">
|
||||
<div class="back-icon">
|
||||
<ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
|
||||
</div>
|
||||
<div class="div-title">
|
||||
<ion-label class="title"><ion-skeleton-text animated style="width: 60%;"></ion-skeleton-text></ion-label>
|
||||
<p class="post-data"><ion-skeleton-text animated style="width: 20%;"></ion-skeleton-text></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="post-item">
|
||||
<div class="post-img">
|
||||
<img src="/assets/icon/icon-no-image.svg" alt="image">
|
||||
</div>
|
||||
<div class="post-description">
|
||||
<p><ion-skeleton-text animated></ion-skeleton-text></p>
|
||||
<p><ion-skeleton-text animated></ion-skeleton-text></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
<ion-footer>
|
||||
<ion-toolbar class="footer-toolbar">
|
||||
|
||||
+19
-2
@@ -56,7 +56,7 @@
|
||||
background: #ffffff;
|
||||
height: 100%;
|
||||
box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.6);
|
||||
padding: 25px 20px 0 20px;
|
||||
padding: 25px 0px 0 0px;
|
||||
overflow: auto;
|
||||
}
|
||||
.title-content{
|
||||
@@ -79,4 +79,21 @@
|
||||
}
|
||||
.title{
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
.post-img{
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
margin: 0 auto;
|
||||
border-radius: 0px!important;
|
||||
overflow: hidden;
|
||||
}
|
||||
.post-img img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.post-description{
|
||||
width: 360px;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
+68
-5
@@ -1,5 +1,7 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ModalController } from '@ionic/angular';
|
||||
import { ModalController, NavParams } from '@ionic/angular';
|
||||
import { Publication } from 'src/app/models/publication';
|
||||
import { PublicationsService } from 'src/app/services/publications.service';
|
||||
import { ImageModalPage } from '../../gallery/image-modal/image-modal.page';
|
||||
import { NewPublicationPage } from '../../new-publication/new-publication.page';
|
||||
|
||||
@@ -9,33 +11,94 @@ import { NewPublicationPage } from '../../new-publication/new-publication.page';
|
||||
styleUrls: ['./publication-detail.page.scss'],
|
||||
})
|
||||
export class PublicationDetailPage implements OnInit {
|
||||
showLoader: boolean;
|
||||
publicationId: string;
|
||||
folderId: string;
|
||||
publication: Publication;
|
||||
|
||||
constructor(private modalController: ModalController,) { }
|
||||
constructor(
|
||||
private modalController: ModalController,
|
||||
private navParams:NavParams,
|
||||
private publications:PublicationsService,
|
||||
) {
|
||||
this.publicationId = this.navParams.get('publicationId');
|
||||
this.folderId = this.navParams.get('folderIdId');
|
||||
this.publication = {
|
||||
DocumentId: '',
|
||||
ProcessId:'',
|
||||
Title:'',
|
||||
Message: '',
|
||||
/* image: null, */
|
||||
DatePublication: null,
|
||||
FileBase64: '',
|
||||
OriginalFileName: '',
|
||||
FileExtension: '',
|
||||
};
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
/* console.log(this.publication.FileBase64); */
|
||||
this.getPublicationDetail();
|
||||
}
|
||||
|
||||
getPublicationDetail(){
|
||||
this.showLoader = true;
|
||||
console.log(this.publicationId);
|
||||
console.log(this.folderId);
|
||||
this.publications.GetPublicationById(this.folderId,this.publicationId).subscribe(res=>{
|
||||
console.log(res);
|
||||
this.publication = {
|
||||
DocumentId: res.DocumentId,
|
||||
ProcessId:res.ProcessId,
|
||||
Title:res.Title,
|
||||
Message: res.Message,
|
||||
DatePublication: res.DatePublication,
|
||||
FileBase64: "data:image/jpg;base64," + res.FileBase64,
|
||||
OriginalFileName: '',
|
||||
FileExtension: '',
|
||||
}
|
||||
this.showLoader = false;
|
||||
});
|
||||
}
|
||||
doRefresh(event){
|
||||
|
||||
}
|
||||
|
||||
close(){
|
||||
this.modalController.dismiss();
|
||||
}
|
||||
|
||||
deletePost(){
|
||||
|
||||
this.publications.DeletePublication(this.folderId, this.publicationId).then(res =>{
|
||||
console.log(res);
|
||||
|
||||
});
|
||||
this.close();
|
||||
}
|
||||
|
||||
async editPost(publicationType:any) {
|
||||
console.log(this.publication);
|
||||
|
||||
const modal = await this.modalController.create({
|
||||
component: NewPublicationPage,
|
||||
componentProps:{
|
||||
publicationType: publicationType,
|
||||
publication: this.publication,
|
||||
},
|
||||
cssClass: 'new-publication',
|
||||
backdropDismiss: false
|
||||
});
|
||||
await modal.present();
|
||||
modal.onDidDismiss();
|
||||
modal.onDidDismiss().then(()=>{
|
||||
this.getPublicationDetail();
|
||||
});
|
||||
}
|
||||
|
||||
openPreview(){
|
||||
openPreview(imageUrl:string){
|
||||
this.modalController.create({
|
||||
component: ImageModalPage,
|
||||
componentProps: {
|
||||
imageUrl:imageUrl,
|
||||
}
|
||||
}).then(modal => modal.present());
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<ion-header class="ion-no-border">
|
||||
<ion-toolbar class="ion-no-border">
|
||||
<ion-toolbar class="bg-blue">
|
||||
<div class="div-top-header">
|
||||
<div class="div-search">
|
||||
<ion-icon src='assets/images/icons-search.svg'></ion-icon>
|
||||
@@ -12,56 +12,89 @@
|
||||
</div>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
|
||||
<ion-header class="ion-no-border">
|
||||
<ion-toolbar class="bg-blue">
|
||||
<div class="content-top"></div>
|
||||
<div class="content-container">
|
||||
<div class="main-header">
|
||||
<div class="title-content">
|
||||
<div class="back-icon">
|
||||
<ion-icon [routerLink]="['/home/publications']" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
|
||||
<ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
|
||||
</div>
|
||||
<div class="div-title">
|
||||
<ion-label class="title">Viagem a Maputo</ion-label>
|
||||
<p class="item-content-detail">Investida de Filipe Nyusi</p>
|
||||
<p class="item-content-date">12 de Janeiro</p>
|
||||
<ion-label class="title">{{item.Description}}</ion-label>
|
||||
<p class="item-content-detail">{{item.Detail}}</p>
|
||||
<p class="item-content-date">{{item.DateBegin}}</p>
|
||||
</div>
|
||||
<div class="actions-icon">
|
||||
<ion-icon (click)="AddPublication('1')" slot="end" src='assets/images/icons-add-photo.svg'></ion-icon>
|
||||
<ion-icon (click)="AddPublication('2')" slot="end" src='assets/images/icons-add.svg'></ion-icon>
|
||||
<!-- <ion-icon (click)="AddPublication('1',item.ProcessId)" slot="end" src='assets/images/icons-add-photo.svg'></ion-icon> -->
|
||||
<ion-icon (click)="AddPublication('2',item.ProcessId)" slot="end" src='assets/images/icons-add.svg'></ion-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
|
||||
<ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
|
||||
<ion-refresher-content>
|
||||
</ion-refresher-content>
|
||||
</ion-refresher>
|
||||
<div class="main-container">
|
||||
<ion-list>
|
||||
<!-- [routerLink]="['/home/publications/view-publications/publication-detail', publication.publicationId]" -->
|
||||
<div class="post-item"
|
||||
[routerLink]="['/home/publications/view-publications/publication-detail']">
|
||||
<div class="post-img">
|
||||
<img src='assets/images/1.jpg' alt='image'>
|
||||
*ngFor="let publication of publicationList"
|
||||
(click)="viewPublicationDetail(publication.ProcessId,publication.DocumentId)">
|
||||
<div *ngIf="publication.FileBase64.length > 30" class="post-img">
|
||||
<img src="{{publication.FileBase64}}" alt="image">
|
||||
</div>
|
||||
<div *ngIf="publication.FileBase64.length < 30" class="post-img">
|
||||
<img src="/assets/icon/icon-no-image.svg" alt="image">
|
||||
</div>
|
||||
<div class="post-content">
|
||||
<div class="post-title-time">
|
||||
<div class="post-title">
|
||||
<ion-label>Ateragem em Maputo</ion-label>
|
||||
<ion-label>{{publication.Title}}</ion-label>
|
||||
</div>
|
||||
<div class="post-data">1h</div>
|
||||
<div class="post-data">{{publication.DatePublication | date: 'dd-MM-yy | h:mm'}}</div>
|
||||
</div>
|
||||
<div class="post-description">
|
||||
<p>Presidente João Lourenço chega a Maputo para investidura de Filipe Nyusi como presidente de Moçambique</p>
|
||||
<p>{{publication.Message}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="post-item">
|
||||
<div *ngIf="!publicationList" class="post-item">
|
||||
<div class="post-img">
|
||||
<img src='assets/images/2.jpg' alt='image'>
|
||||
<img src="/assets/icon/icon-no-image.svg" alt="image">
|
||||
</div>
|
||||
<div class="post-content">
|
||||
<div class="post-title-time">
|
||||
<div class="post-title">
|
||||
<ion-label>Tomada de Posse</ion-label>
|
||||
<ion-label><ion-skeleton-text animated animated style="width: 60%;"></ion-skeleton-text></ion-label>
|
||||
</div>
|
||||
<div class="post-data">1h</div>
|
||||
<div class="post-data"><ion-skeleton-text animated style="width: 25%; float: right;"></ion-skeleton-text></div>
|
||||
</div>
|
||||
<div class="post-description">
|
||||
<p>Filipe Nyusi, que toma posse para um segundo mandato como presidente de Moçambique, foi releito a 15 de Outubro, com 73% do votos, uma maioria qualificada à Frente de Libertação de Moçambique (FRELIMO) na Assembleia da República</p>
|
||||
<p><ion-skeleton-text animated></ion-skeleton-text></p>
|
||||
<p><ion-skeleton-text animated></ion-skeleton-text></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="post-img">
|
||||
<img src="/assets/icon/icon-no-image.svg" alt="image">
|
||||
</div>
|
||||
<div class="post-content">
|
||||
<div class="post-title-time">
|
||||
<div class="post-title">
|
||||
<ion-label><ion-skeleton-text animated animated style="width: 60%;"></ion-skeleton-text></ion-label>
|
||||
</div>
|
||||
<div class="post-data"><ion-skeleton-text animated style="width: 25%; float: right;"></ion-skeleton-text></div>
|
||||
</div>
|
||||
<div class="post-description">
|
||||
<p><ion-skeleton-text animated></ion-skeleton-text></p>
|
||||
<p><ion-skeleton-text animated></ion-skeleton-text></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
:host{
|
||||
background: #0782c9;
|
||||
background: transparent;
|
||||
padding: 0!important;
|
||||
}
|
||||
ion-content{
|
||||
--background: transparent;
|
||||
@@ -7,8 +8,13 @@
|
||||
--border-radius: 30px;
|
||||
}
|
||||
ion-toolbar{
|
||||
--background:#0782c9;
|
||||
border-width: 0 !important;
|
||||
--border-width: 0 !important;
|
||||
--border-style: none;
|
||||
--padding-top: 0px !important;
|
||||
--padding-start: 0px !important;
|
||||
--padding-right: 0px !important;
|
||||
--padding-end: 0px !important;
|
||||
|
||||
}
|
||||
|
||||
.div-top-header{
|
||||
@@ -38,6 +44,27 @@
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.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: 25px 20px 0px 20px;
|
||||
color:#000;
|
||||
|
||||
}
|
||||
.main-content{
|
||||
width: 100%; /* 400px */
|
||||
height: 100%;
|
||||
font-family: Roboto;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
overflow:auto;
|
||||
padding: 15px 20px 0 20px;
|
||||
}
|
||||
.content-top{
|
||||
width: 344px;
|
||||
background: #f3f2f2;
|
||||
@@ -45,6 +72,7 @@
|
||||
margin: 0 auto;
|
||||
border-top-left-radius: 25px;
|
||||
border-top-right-radius: 25px;
|
||||
transform: translate3d(0, 1px, 0);
|
||||
}
|
||||
.content-container{
|
||||
width: 100%;
|
||||
@@ -54,7 +82,7 @@
|
||||
background: #ffffff;
|
||||
height: 100%;
|
||||
box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.6);
|
||||
padding: 25px 20px 0 20px;
|
||||
padding: 25px 0px 0 0px;
|
||||
overflow: auto;
|
||||
}
|
||||
.title-content{
|
||||
@@ -63,6 +91,7 @@
|
||||
overflow: auto;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.back-icon{
|
||||
width: 37px;
|
||||
float: left;
|
||||
@@ -88,6 +117,7 @@
|
||||
.actions-icon ion-icon{
|
||||
margin-left: 10px;
|
||||
font-size: 35px;
|
||||
float: right;
|
||||
}
|
||||
.item-content-date{
|
||||
color: #797979;
|
||||
@@ -98,39 +128,47 @@
|
||||
font-size: 13px;
|
||||
}
|
||||
.post-item{
|
||||
width: 360px;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
margin: 0 auto;
|
||||
border-radius: 0px;
|
||||
padding: 0!important;
|
||||
}
|
||||
.post-img{
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
margin: 0 auto;
|
||||
border-radius: 0px!important;
|
||||
overflow: hidden;
|
||||
}
|
||||
.post-img img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.post-content{
|
||||
width: 360px;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
.post-title-time{
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
margin-top: 5px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.post-title{
|
||||
width: 80%;
|
||||
width: 60%;
|
||||
float: left;
|
||||
font-size: 15px;
|
||||
color: #0d89d1;
|
||||
}
|
||||
.post-data{
|
||||
width: 20%;
|
||||
float: left;
|
||||
font-size: 13px;
|
||||
color: #797979;
|
||||
}
|
||||
.post-data{
|
||||
width: 40%;
|
||||
float: left;
|
||||
font-size: 13px;
|
||||
color: #797979;
|
||||
text-align: right;
|
||||
}
|
||||
.post-description{
|
||||
font-size: 13px;
|
||||
color: #000;
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ModalController } from '@ionic/angular';
|
||||
import { ModalController, NavParams } from '@ionic/angular';
|
||||
import { Publication } from 'src/app/models/publication';
|
||||
import { PublicationFolder } from 'src/app/models/publicationfolder';
|
||||
import { LoadingService } from 'src/app/services/loading.service';
|
||||
import { PublicationsService } from 'src/app/services/publications.service';
|
||||
import { NewPublicationPage } from '../new-publication/new-publication.page';
|
||||
import { PublicationDetailPage } from './publication-detail/publication-detail.page';
|
||||
|
||||
@Component({
|
||||
selector: 'app-view-publications',
|
||||
@@ -8,23 +13,95 @@ import { NewPublicationPage } from '../new-publication/new-publication.page';
|
||||
styleUrls: ['./view-publications.page.scss'],
|
||||
})
|
||||
export class ViewPublicationsPage implements OnInit {
|
||||
showLoader: boolean;
|
||||
loading: any;
|
||||
|
||||
constructor(private modalController: ModalController,) { }
|
||||
publicationList: Publication[];
|
||||
item: PublicationFolder;
|
||||
|
||||
constructor(
|
||||
private loadingController: LoadingService,
|
||||
private modalController: ModalController,
|
||||
private publications: PublicationsService,
|
||||
private navParams: NavParams,
|
||||
) {
|
||||
this.item = this.navParams.get('item');
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.getPublications()
|
||||
}
|
||||
doRefresh(event) {
|
||||
this.getPublications();
|
||||
|
||||
setTimeout(() => {
|
||||
/* event.target.complete(); */
|
||||
}, 2000);
|
||||
}
|
||||
close(){
|
||||
this.modalController.dismiss();
|
||||
}
|
||||
getPublications(){
|
||||
this.showLoader = true;
|
||||
|
||||
this.publications.GetPublications(this.item.ProcessId).subscribe(res=>{
|
||||
this.publicationList = new Array();
|
||||
console.log(res);
|
||||
res.forEach(element => {
|
||||
let itemImage = {
|
||||
title: 'Title',
|
||||
url: "data:image/jpg;base64," + element.FileBase64,
|
||||
format: 'png'
|
||||
}
|
||||
let item: Publication = {
|
||||
"DocumentId":element.DocumentId,
|
||||
"ProcessId":element.ProcessId,
|
||||
"Title":element.Title,
|
||||
"Message": element.Message,
|
||||
"DatePublication": element.DatePublication,
|
||||
/* image:itemImage, */
|
||||
"FileBase64": "data:image/jpg;base64," + element.FileBase64,
|
||||
"OriginalFileName": '',
|
||||
"FileExtension": '',
|
||||
}
|
||||
this.publicationList.push(item);
|
||||
});
|
||||
console.log(this.publicationList);
|
||||
this.showLoader = false;
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
async AddPublication(publicationType:any) {
|
||||
async AddPublication(publicationType:any, folderId:string) {
|
||||
const modal = await this.modalController.create({
|
||||
component: NewPublicationPage,
|
||||
componentProps:{
|
||||
publicationType: publicationType,
|
||||
folderId: folderId,
|
||||
},
|
||||
cssClass: 'new-publication',
|
||||
backdropDismiss: false
|
||||
});
|
||||
await modal.present();
|
||||
modal.onDidDismiss();
|
||||
modal.onDidDismiss().then(()=>{
|
||||
this.doRefresh(event);
|
||||
});
|
||||
}
|
||||
|
||||
async viewPublicationDetail(processId:string, publicationId:string) {
|
||||
const modal = await this.modalController.create({
|
||||
component: PublicationDetailPage,
|
||||
componentProps:{
|
||||
publicationId: publicationId,
|
||||
folderId: processId,
|
||||
},
|
||||
cssClass: 'publication-detail',
|
||||
backdropDismiss: false
|
||||
});
|
||||
await modal.present();
|
||||
modal.onDidDismiss().then(()=>{
|
||||
this.doRefresh(event);
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user