add conversation tab

This commit is contained in:
Peter Maquiran
2024-08-29 13:15:06 +01:00
parent d8d294b662
commit ef9dd02ea5
7 changed files with 48 additions and 21 deletions
+17 -12
View File
@@ -28,27 +28,30 @@
</div>
</div>
<!-- <ion-toolbar [class.block-button]="showNewEvent || showNewGroup || showContacts">
<ion-toolbar [class.block-button]="showNewEvent || showNewGroup || showContacts">
<ion-segment [(ngModel)]="segment" (ionChange)="onSegmentChange()">
<ion-segment-button value="Contactos" class="font-14-em">
<ion-segment-button value="{{RoomType.Direct}}" class="font-14-em">
Conversas
</ion-segment-button>
<ion-segment-button value="Grupos" class="font-14-em">
<ion-segment-button value="{{RoomType.Group}}" class="font-14-em">
Grupos
</ion-segment-button>
</ion-segment>
</ion-toolbar> -->
</ion-toolbar>
<div class=" aside overflow-y-auto d-flex flex-wrap flex-grow-1">
<div class="width-100" [ngSwitch]="segment">
<ion-list *ngSwitchCase="'Contactos'">
<ion-list *ngSwitchCase="1">
<ion-item-sliding>
<div class="item item-hover width-100 d-flex ion-no-padding ion-no-margin"
*ngFor="let room of (items$ | async)"
[class.item-active]="room.id == idSelected">
[class.item-active]="room.id == idSelected" [class.hide-room]="room.roomType != 1">
<div class="item-icon">
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' && room.id != idSelected " class="icon" slot="start" src="assets/images/theme/gov/icons-chat-chat-40.svg"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' && room.id == idSelected " class="icon" slot="start" src="assets/images/theme/gov/icons-chat-chat-40-hover.svg"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="icon" slot="start" src="assets/images/icons-chat-group-chat-40.svg"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' && room.id != idSelected " class="icon" slot="start" src="assets/images/theme/gov/icons-chat-group-chat-40.svg"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' && room.id == idSelected " class="icon" slot="start" src="assets/images/theme/gov/icons-chat-group-chat-40-hover.svg"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' && room.id != idSelected " class="icon" slot="start" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-chat-group-chat-40.svg"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' && room.id == idSelected " class="icon" slot="start" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-chat-group-chat-40-hover.svg"></ion-icon>
</div>
<div
(click)="openMessagesPage(room.id)"
@@ -68,7 +71,8 @@
<!-- <div class="item-date font-13-em" [class.item-date-active]="room.id == idSelected">{{room.duration}}</div> -->
</div>
<div class="item-date font-13-em" [class.item-date-active]="room.id == idSelected">
{{ expirationDate[room.id] !== null ? expirationDate[room.id] + ' seconds left' : 'No expiration' }}
<!-- {{ expirationDate[room.id] !== null ? expirationDate[room.id] + ' seconds left' : 'No expiration' }} -->
{{ expirationDate[room.id] !== null ? expirationDate[room.id] + ' seconds left' : '' }}
</div>
<!-- <div *ngIf="room.lastMessage" class="item-description d-flex align-items-center" [class.item-description-active]="room.id ==idSelected">
<div class="item-message font-13-em add-ellipsis white-space-nowrap" *ngIf="room.otherUserType == false"> {{room.lastMessage.msg}} </div>
@@ -78,11 +82,11 @@
</div>
</ion-item-sliding>
</ion-list>
<ion-list *ngSwitchCase="'Grupos'">
<ion-list *ngSwitchCase="2">
<ion-item-sliding>
<div class="item item-hover width-100 d-flex ion-no-padding ion-no-margin"
*ngFor="let room of (items$ | async)"
[class.item-active]="room.id == idSelected">
[class.item-active]="room.id == idSelected" [class.hide-room]="room.roomType != 2">
<div class="item-icon">
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' && room.id != idSelected " class="icon" slot="start" src="assets/images/theme/gov/icons-chat-chat-40.svg"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' && room.id == idSelected " class="icon" slot="start" src="assets/images/theme/gov/icons-chat-chat-40-hover.svg"></ion-icon>
@@ -105,7 +109,8 @@
<!-- <div class="item-date font-13-em" [class.item-date-active]="room.id == idSelected">{{room.duration}}</div> -->
</div>
<div class="item-date font-13-em" [class.item-date-active]="room.id == idSelected">
{{ expirationDate[room.id] !== null ? expirationDate[room.id] + ' seconds left' : 'No expiration' }}
<!-- {{ expirationDate[room.id] !== null ? expirationDate[room.id] + ' seconds left' : 'No expiration' }} -->
{{ expirationDate[room.id] !== null ? expirationDate[room.id] + ' seconds left' : '' }}
</div>
<!-- <div *ngIf="room.lastMessage" class="item-description d-flex align-items-center" [class.item-description-active]="room.id ==idSelected">
<div class="item-message font-13-em add-ellipsis white-space-nowrap" *ngIf="room.otherUserType == false"> {{room.lastMessage.msg}} </div>
+4
View File
@@ -186,4 +186,8 @@ ion-content{
.block-button {
pointer-events: none;
opacity: 0.2;
}
.hide-room{
display: none !important;
}
+9 -5
View File
@@ -22,6 +22,7 @@ import { RoomLocalRepository } from 'src/app/module/chat/data/repository/room/ro
import { map, tap } from 'rxjs/operators';
import { interval, Subscription } from 'rxjs';
import { RoomTable } from 'src/app/infra/database/dexie/instance/chat/schema/room';
import { RoomType } from 'src/app/core/chat/entity/group';
@Component({
selector: 'app-chat',
@@ -31,7 +32,7 @@ import { RoomTable } from 'src/app/infra/database/dexie/instance/chat/schema/roo
export class ChatPage implements OnInit {
showLoader: boolean;
segment: string = 'Grupos'
segment: RoomType = RoomType.Group
idSelected: string;
roomId: any;
@@ -61,6 +62,8 @@ export class ChatPage implements OnInit {
expirationDate = {}
private intervalSubscription: Subscription;
RoomType = RoomType
constructor(
private modalController: ModalController,
private timeService: TimeService,
@@ -82,7 +85,6 @@ export class ChatPage implements OnInit {
this.showLoader = true;
this.segment = 'Grupos'
}
// Fetch all items using useLiveQuery
@@ -131,6 +133,8 @@ export class ChatPage implements OnInit {
}
onSegmentChange() {}
getSecondsLeft(expirationDate: any): number | null {
if (!expirationDate) return null;
const now = new Date().getTime();
@@ -299,7 +303,7 @@ export class ChatPage implements OnInit {
}
openContactsPage() {
this.segment = 'Contactos';
this.segment = RoomType.Direct;
this.idSelected = '';
this.closeAllDesktopComponents();
@@ -312,7 +316,7 @@ export class ChatPage implements OnInit {
}
}
openNewGroupPage() {
this.segment = 'Grupos';
this.segment = RoomType.Group;
this.idSelected = '';
if (window.innerWidth < 701) {
@@ -446,7 +450,7 @@ export class ChatPage implements OnInit {
// this.segment = "Grupos"
// this.openGroupMessagesPage(room.id);
//} else {
this.segment = "Contactos"
// this.segment = RoomType.Direct
this.openMessagesPage(roomId);
// }
@@ -6,11 +6,12 @@
<ion-content class="px-20">
<div> Membros: </div>
<div class=px-20> Membros </div>
<ion-list class="header-bottom-contacts" *ngIf="roomMembers$ | async as memberList">
<ion-list class="header-bottom-contacts px-20" *ngIf="roomMembers$ | async as memberList">
<div *ngFor="let user of memberList; let i = index">
<div class="py-10">
<div class="py-1">
<!-- <img [src]="memberList.userPhoto" class="pa-20"> {{ user.wxFullName }} -->
{{ user.wxFullName }} <span *ngIf="user.isAdmin">(admin do group)</span>
</div>
</div>
@@ -0,0 +1,8 @@
img {
background-color: gray;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
}
@@ -6,6 +6,7 @@ import { Observable as DexieObservable } from 'Dexie';
import { RoomLocalRepository } from 'src/app/module/chat/data/repository/room/room-local-repository.service'
import { MemberTable } from 'src/app/infra/database/dexie/instance/chat/schema/members';
import { RoomTable } from 'src/app/infra/database/dexie/instance/chat/schema/room';
import { tap } from 'rxjs/operators';
@Component({
selector: 'app-room-info',
@@ -29,7 +30,11 @@ export class RoomInfoPage implements OnInit {
ngOnInit() {
// this.roomMessage$ = this.messageRepositoryService.getItemsLive(this.roomId)
this.roomMembers$ = this.MemberListLocalRepository.getRoomMemberByIdLive(this.roomId).pipe()
this.roomMembers$ = this.MemberListLocalRepository.getRoomMemberByIdLive(this.roomId).pipe(
tap((data)=> {
console.log(data)
})
)
this.roomData$ = this.RoomLocalRepository.getRoomByIdLive(this.roomId)
}