peter/doneit-web
1
0
Fork 0
mirror of https://code.equilibrium.co.ao/ITO/doneit-web.git synced 2026-04-19 04:57:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

add skeleton to chat list

Browse Source
This commit is contained in:
tiago.kayaya
2021-12-17 16:54:18 +01:00
parent d992f546ef
commit 9a8be67bd1
4 changed files with 49 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/chat/chat.page.html
+33 -2
View File
@@ -44,7 +44,7 @@
<div class="width-100" [ngSwitch]="segment">
<ion-list *ngSwitchCase="'Contactos'">
<ion-item-sliding>
<div class="item item-hover width-100 d-flex ion-no-padding ion-no-margin"
<div class="item item-hover width-100 d-flex ion-no-padding ion-no-margin"
*ngFor="let dm of userDirectMessages"
[class.item-active]="dm._id == idSelected">
<div class="item-icon">
@@ -85,9 +85,24 @@
</div>
</div>
</ion-item-sliding>
<ion-item-sliding *ngIf="showLoader || userDirectMessages.length < 1">
<div *ngFor="let n of numSequence(8); let i = index;" class="item item-hover width-100 d-flex ion-no-padding ion-no-margin">
<div class="item-icon"><ion-icon class="icon" slot="start" src="assets/icon/icons-chat-grey.svg"></ion-icon></div>
<div class="item-content flex-grow-1 cursor-pointer">
<div class="item-title-time">
<div class="item-title"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></div>
<div class="item-date"><ion-skeleton-text animated></ion-skeleton-text></div>
</div>
<div class="item-description d-flex align-items-center">
<fa-icon icon="file-alt" class="file-icon"></fa-icon>
<ion-skeleton-text animated style="width: 95%; margin-left:5%"></ion-skeleton-text>
</div>
</div>
</div>
</ion-item-sliding>
</ion-list>
<ion-list *ngSwitchCase="'Grupos'">
<ion-item-sliding>
<ion-item-sliding *ngIf="!showLoader">
<div *ngFor="let group of allGroups"
[class.item-active]="group._id ==idSelected"
class="item item-hover d-flex">
@@ -123,9 +138,25 @@
</div>
</div>
</ion-item-sliding>
<ion-item-sliding *ngIf="showLoader || allGroups.length < 1">
<div *ngFor="let n of numSequence(8); let i = index;" class="item item-hover width-100 d-flex ion-no-padding ion-no-margin">
<div class="item-icon"><ion-icon class="icon" slot="start" src="assets/icon/icons-group-chat-grey.svg"></ion-icon></div>
<div class="item-content flex-grow-1 cursor-pointer">
<div class="item-title-time">
<div class="item-title"><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></div>
<div class="item-date"><ion-skeleton-text animated></ion-skeleton-text></div>
</div>
<div class="item-description d-flex align-items-center">
<fa-icon icon="file-alt" class="file-icon"></fa-icon>
<ion-skeleton-text animated style="width: 95%; margin-left:5%"></ion-skeleton-text>
</div>
</div>
</div>
</ion-item-sliding>
</ion-list>
</div>
<!-- <button (click)="sendMsg()" style="height: 41px;">Send message</button> -->
</div>
</div>
src/app/pages/chat/chat.page.ts
+9 -23
View File
@@ -131,7 +131,7 @@ export class ChatPage implements OnInit {
this.modalController.dismiss();
}
};
this.showLoader = true;
}
ngOnInit() {
@@ -178,6 +178,10 @@ export class ChatPage implements OnInit {
});
}
numSequence(n: number): Array<number> {
return Array(n);
}
ngOnDestroy() {
this.setStatus('offline');
this.dataService.set("newGroup", false);
@@ -386,10 +390,12 @@ export class ChatPage implements OnInit {
load() {
switch (this.segment) {
case "Contactos":
this.showLoader = true;
this.getDirectMessages();
break;
case "Grupos":
this.showLoader = true;
this.getGroups();
break;
}
@@ -483,14 +489,10 @@ export class ChatPage implements OnInit {
}
async getDirectMessages(event?) {
this.chatService.getAllDirectMessages().subscribe(async (res: any) => {
this.showLoader = false;
this.transformDataRoomList(res.ims)
this.getDirectMessagesDB()
console.log('Chat list', res);
if (res != 200) {
@@ -501,13 +503,6 @@ export class ChatPage implements OnInit {
return dateB - dateA;
});
}
//console.log(res.ims);
/* this.userDirectMessages = res.ims.sort((a, b) => {
var dateA = new Date(a._updatedAt).getTime();
var dateB = new Date(b._updatedAt).getTime();
return dateB - dateA;
}); */
//console.log(this.userDirectMessages);
if (this.route.url != "/home/chat") {
//console.log("Timer message stop")
@@ -522,7 +517,6 @@ export class ChatPage implements OnInit {
}
else {
//console.log('No timer!');
}
}
}
@@ -555,19 +549,14 @@ export class ChatPage implements OnInit {
async getGroups(event?) {
this.result = this.chatService.getAllPrivateGroups().subscribe(async (res: any) => {
//console.log(res);
this.showLoader = false;
if (res.groups != 200) {
this.privateGroups = res.groups;
/* this.result = this.chatService.getAllUserChannels().subscribe((res:any)=>{
this.publicGroups = res.channels; */
//let all = this.privateGroups.concat(this.publicGroups);
this.allGroups = this.privateGroups.sort((a, b) => {
var dateA = new Date(a._updatedAt).getTime();
var dateB = new Date(b._updatedAt).getTime();
return dateB - dateA;
});
//console.log(this.allGroups);
/* }); */
if (this.route.url != "/home/chat") {
console.log("Timer message stop")
}
@@ -576,15 +565,12 @@ export class ChatPage implements OnInit {
if (this.segment == "Grupos" && this.showGroupMessages != true) {
await new Promise(resolve => setTimeout(resolve, 1000));
await this.getGroups();
//console.log('Timer groups list running')
}
}
}
else {
await this.getGroups();
}
});
}