nostr/blockcore-notes
1
0
Fork 0
mirror of https://github.com/block-core/blockcore-notes.git synced 2024-09-29 06:20:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add workable routing for Messages

Browse Source
This commit is contained in:
SondreB 2023-01-21 23:48:42 +01:00
parent e4ee1b704f
commit cf4e3d1912
No known key found for this signature in database
GPG Key ID: D6CC44C75005FDBF
17 changed files with 245 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/app-routing.module.ts
View File

@ -19,6 +19,7 @@ import { FollowingComponent } from './following/following';
import { FollowersComponent } from './followers/followers';
import { QueueComponent } from './queue/queue';
import { MessagesComponent } from './messages/messages';
import { MessageComponent } from './message/message';
const routes: Routes = [
{
@ -56,10 +57,15 @@ const routes: Routes = [
canActivate: [AuthGuard],
},
{
path: 'messages',
path: 'm',
component: MessagesComponent,
canActivate: [AuthGuard],
},
{
path: 'm/:id',
component: MessageComponent,
canActivate: [AuthGuard],
},
{
path: 'profile',
component: ProfileComponent,

6
src/app/app.html
View File

@ -27,11 +27,11 @@
</a>
<a [routerLink]="['/chat']" mat-menu-item (click)="toggleMenu()" [routerLinkActiveOptions]="{ exact: true }" routerLinkActive="active">
<mat-icon>chat</mat-icon>
<span>Chat</span>
<span *ngIf="displayLabels">Channels</span>
</a>
<a [routerLink]="['/messages']" mat-menu-item (click)="toggleMenu()" [routerLinkActiveOptions]="{ exact: true }" routerLinkActive="active">
<a [routerLink]="['/m']" mat-menu-item (click)="toggleMenu()" [routerLinkActiveOptions]="{ exact: true }" routerLinkActive="active">
<mat-icon>mail</mat-icon>
<span>Messages</span>
<span *ngIf="displayLabels">Messages</span>
</a>
<a [routerLink]="['/people']" mat-menu-item (click)="toggleMenu()" [routerLinkActiveOptions]="{ exact: true }" routerLinkActive="active">
<mat-icon>people</mat-icon>

9
src/app/app.module.ts
View File

@ -108,6 +108,8 @@ import { ContentPodcastComponent } from './shared/content-podcast/content-podcas
import { MatSliderModule } from '@angular/material/slider';
import { TimePipe } from './shared/time.pipe';
import { QueueComponent } from './queue/queue';
import { MessagesComponent } from './messages/messages';
import { MessageComponent } from './message/message';
@NgModule({
declarations: [
@ -170,6 +172,8 @@ import { QueueComponent } from './queue/queue';
ContentPodcastComponent,
TimePipe,
QueueComponent,
MessagesComponent,
MessageComponent
],
imports: [
HttpClientModule,
@ -224,9 +228,8 @@ import { QueueComponent } from './queue/queue';
registrationStrategy: 'registerWhenStable:30000',
}),
],
exports: [
],
providers: [AuthGuardService, AppUpdateService, CheckForUpdateService,ChatService,UserService],
exports: [],
providers: [AuthGuardService, AppUpdateService, CheckForUpdateService, ChatService, UserService],
bootstrap: [AppComponent],
})
export class AppModule {}

29
src/app/message/message.css Normal file
View File

@ -0,0 +1,29 @@
.drawer-container {
height: 100%;
z-index: 9999;
overflow: visible !important;
}
.sidebar--message {
width: 100%;
}
.sidebar--user {
max-width: 360px;
width: 100%;
}
.mat-drawer-inner-container {
/* display: flex;
flex-direction: column;
flex: 1;
z-index: 9999; */
}
.zIndexTop {
z-index: 10;
}
.spacer {
flex: 1;
}

30
src/app/message/message.html Normal file
View File

@ -0,0 +1,30 @@
<app-chat-detail></app-chat-detail>
<!-- <mat-sidenav-container class="drawer-container" autosize>
<mat-tab-group mat-align-tabs="center">
<mat-tab label="Messages">
<app-chat-list (openChatSidebar)="open.chatSideBar($event)"></app-chat-list>
</mat-tab>
<mat-tab label="Users">
<app-user-list (openUserSidebar)="open.userSideBar($event)"></app-user-list>
</mat-tab>
</mat-tab-group>
<mat-sidenav #chatSidebar class="sidebar sidebar--message" mode="side" position="start">
<mat-toolbar class="zIndexTop" color="primary">
<mat-toolbar-row>
<mat-icon class="button" aria-hidden="false" (click)="chatSidebar.close()">arrow_back_ios</mat-icon>
<span class="spacer"> {{sidebarTitles.chat}} </span>
</mat-toolbar-row>
</mat-toolbar>
<app-chat-detail></app-chat-detail>
</mat-sidenav>
<mat-sidenav #userSidebar class="sidebar sidebar--user" mode="over" position="end">
<mat-toolbar class="zIndexTop" color="primary">
<mat-toolbar-row>
<span class="spacer"> {{sidebarTitles.user}} </span>
<mat-icon class="button" aria-hidden="false" (click)="userSidebar.close()">close</mat-icon>
</mat-toolbar-row>
</mat-toolbar>
<app-user-profile (openChatWindow)="open.chatSideBar($event)"></app-user-profile>
</mat-sidenav>
</mat-sidenav-container> -->

40
src/app/message/message.ts Normal file
View File

@ -0,0 +1,40 @@
import { Component, ChangeDetectorRef, ViewChild, ViewEncapsulation } from '@angular/core';
import { MatSidenav } from '@angular/material/sidenav';
import { ApplicationState } from '../services/applicationstate';
@Component({
selector: 'app-message',
templateUrl: './message.html',
styleUrls: ['./message.css'],
encapsulation: ViewEncapsulation.None,
})
export class MessageComponent {
@ViewChild('chatSidebar', { static: false }) chatSidebar!: MatSidenav;
@ViewChild('userSidebar', { static: false }) userSidebar!: MatSidenav;
constructor(private appState: ApplicationState) {}
sidebarTitles = {
user: '',
chat: '',
};
open = {
me: this,
userSideBar: function (title: string = '') {
this.me.userSidebar.open();
this.me.sidebarTitles.user = title;
},
chatSideBar: function (title: string = '') {
this.me.chatSidebar.open();
this.me.userSidebar.close();
this.me.sidebarTitles.chat = title;
},
};
async ngOnInit() {
this.appState.updateTitle('@Milad');
this.appState.goBack = true;
this.appState.showBackButton = true;
this.appState.actions = [];
}
}

29
src/app/messages/messages.css
View File

@ -0,0 +1,29 @@
.drawer-container {
height: 100%;
z-index: 9999;
overflow: visible !important;
}
.sidebar--message {
width: 100%;
}
.sidebar--user {
max-width: 360px;
width: 100%;
}
.mat-drawer-inner-container {
/* display: flex;
flex-direction: column;
flex: 1;
z-index: 9999; */
}
.zIndexTop {
z-index: 10;
}
.spacer {
flex: 1;
}

31
src/app/messages/messages.html
View File

@ -1 +1,30 @@
Coming soon.
<app-chat-list></app-chat-list>
<!-- <mat-sidenav-container class="drawer-container" autosize>
<mat-tab-group mat-align-tabs="center">
<mat-tab label="Messages">
<app-chat-list (openChatSidebar)="open.chatSideBar($event)"></app-chat-list>
</mat-tab>
<mat-tab label="Users">
<app-user-list (openUserSidebar)="open.userSideBar($event)"></app-user-list>
</mat-tab>
</mat-tab-group>
<mat-sidenav #chatSidebar class="sidebar sidebar--message" mode="side" position="start">
<mat-toolbar class="zIndexTop" color="primary">
<mat-toolbar-row>
<mat-icon class="button" aria-hidden="false" (click)="chatSidebar.close()">arrow_back_ios</mat-icon>
<span class="spacer"> {{sidebarTitles.chat}} </span>
</mat-toolbar-row>
</mat-toolbar>
<app-chat-detail></app-chat-detail>
</mat-sidenav>
<mat-sidenav #userSidebar class="sidebar sidebar--user" mode="over" position="end">
<mat-toolbar class="zIndexTop" color="primary">
<mat-toolbar-row>
<span class="spacer"> {{sidebarTitles.user}} </span>
<mat-icon class="button" aria-hidden="false" (click)="userSidebar.close()">close</mat-icon>
</mat-toolbar-row>
</mat-toolbar>
<app-user-profile (openChatWindow)="open.chatSideBar($event)"></app-user-profile>
</mat-sidenav>
</mat-sidenav-container> -->

31
src/app/messages/messages.ts
View File

@ -1,15 +1,40 @@
import { Component } from '@angular/core';
import { Component, ChangeDetectorRef, ViewChild, ViewEncapsulation } from '@angular/core';
import { MatSidenav } from '@angular/material/sidenav';
import { ApplicationState } from '../services/applicationstate';
@Component({
selector: 'app-messages',
templateUrl: './messages.html',
styleUrls: ['./messages.css'],
encapsulation: ViewEncapsulation.None,
})
export class MessagesComponent {
@ViewChild('chatSidebar', { static: false }) chatSidebar!: MatSidenav;
@ViewChild('userSidebar', { static: false }) userSidebar!: MatSidenav;
constructor(private appState: ApplicationState) {}
ngOnInit() {
sidebarTitles = {
user: '',
chat: '',
};
open = {
me: this,
userSideBar: function (title: string = '') {
this.me.userSidebar.open();
this.me.sidebarTitles.user = title;
},
chatSideBar: function (title: string = '') {
this.me.chatSidebar.open();
this.me.userSidebar.close();
this.me.sidebarTitles.chat = title;
},
};
async ngOnInit() {
this.appState.updateTitle('Messages');
this.appState.goBack = true;
this.appState.showBackButton = false;
this.appState.actions = [];
}
}

21
src/app/services/chat.service.ts
View File

@ -1,15 +1,28 @@
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { BehaviorSubject, from, Observable } from 'rxjs';
import { ChatModel, UserModel } from './interfaces';
@Injectable({
providedIn: 'root',
})
export class ChatService {
chats: BehaviorSubject<ChatModel[]> = new BehaviorSubject<ChatModel[]>([]);
chat: BehaviorSubject<ChatModel> = new BehaviorSubject<ChatModel>(null as any);
// chats: BehaviorSubject<ChatModel[]> = new BehaviorSubject<ChatModel[]>([]);
// chat: BehaviorSubject<ChatModel> = new BehaviorSubject<ChatModel>(null as any);
constructor() {}
chats: ChatModel[] = [];
#chatsChanged: BehaviorSubject<ChatModel[]> = new BehaviorSubject<ChatModel[]>(this.chats);
get chats$(): Observable<ChatModel[]> {
return this.#chatsChanged.asObservable().pipe();
}
constructor() {
this.chats = this.data.chats as any[];
this.#chatsChanged.next(this.chats);
console.log(this.data.chats);
// this.chats$ = this.chats.asObservable();
}
saveMessage(chatId: number, message: string) {
// this.http.saveMessage(chatId, message).then(response => {

16
src/app/services/interfaces.ts
View File

@ -206,15 +206,15 @@ export interface MessageModel {
export interface CustomObjectModel {
tmpl: string;
data: any;
formatted?: string
formatted?: string;
}
export class ChatModel {
"id": number;
"targetUserId": number;
"username": string;
"cover": string;
"lastMessage": string;
"lastMessageLength": string | number;
"chat": Array<MessageModel>
'id': number;
'targetUserId': number;
'username': string;
'cover': string;
'lastMessage': string;
'lastMessageLength': string | number;
'chat': Array<MessageModel>;
}

2
src/app/shared/chat-detail/chat-detail.component.html
View File

@ -29,7 +29,7 @@
</mat-menu>
<input autocomplete="off" type="text" matInput placeholder="Write a message" [(ngModel)]="message"
(keypress)="saveMessage($event)">
<mat-hint align="end" class="hint">Length : {{message.length}}</mat-hint>
<mat-hint align="end" class="hint">Length : {{message?.length}}</mat-hint>
<mat-icon class="toolbar-icon" matSuffix (click)="isEmojiPickerVisible = !isEmojiPickerVisible;"
matTooltip="Insert emoji">sentiment_satisfied</mat-icon>
<mat-icon class="toolbar-icon" matSuffix>mic</mat-icon>

15
src/app/shared/chat-detail/chat-detail.component.ts
View File

@ -22,12 +22,13 @@ export class ChatDetailComponent implements OnInit, OnDestroy {
constructor(private service: ChatService, private control: MessageControlService, private appState: ApplicationState) {}
ngOnInit() {
this.subscription = this.service.chat.subscribe((messages) => {
this.chat = messages;
this.sending = false;
this.message = '';
this.scrollToBottom();
});
// this.subscription = this.service.chat.subscribe((messages) => {
// this.chat = messages;
// this.sending = false;
// this.message = '';
// this.scrollToBottom();
// });
}
scrollToBottom() {
@ -62,6 +63,6 @@ export class ChatDetailComponent implements OnInit, OnDestroy {
}
ngOnDestroy(): void {
this.subscription.unsubscribe();
this.subscription?.unsubscribe();
}
}

9
src/app/shared/chat-item/chat-item.component.html
View File

@ -1,7 +1,6 @@
<mat-list-item (click)="showMessageDetail()">
<img alt="" matListItemAvatar [src]="chat.cover">
<h4 mat-line>{{chat.username}}</h4>
<p mat-line class="last-message"> {{chat.lastMessage}} </p>
<span *ngIf="chat.lastMessageLength" [matBadge]="chat.lastMessageLength" matBadgeOverlap="false"
matBadgePosition="above before" matBadgeColor="warn"></span>
<img alt="" matListItemAvatar [src]="chat.cover" />
<h4 mat-line>{{ chat.username }}</h4>
<p mat-line class="last-message">{{ chat.lastMessage }}</p>
<span *ngIf="chat.lastMessageLength" [matBadge]="chat.lastMessageLength" matBadgeOverlap="false" matBadgePosition="above before" matBadgeColor="warn"></span>
</mat-list-item>

2
src/app/shared/chat-item/chat-item.component.ts
View File

@ -15,6 +15,6 @@ export class ChatItemComponent {
showMessageDetail() {
this.openChatSidebar.emit(this.chat.username);
this.service.chat.next(this.chat);
// this.service.chat.next(this.chat);
}
}

4
src/app/shared/chat-list/chat-list.component.html
View File

@ -1,6 +1,6 @@
<mat-nav-list>
<ng-container *ngFor="let chat of chats$ | async; let lastItem = last">
<app-chat-item (openChatSidebar)="openChatSidebar.emit($event)" [chat]="chat"></app-chat-item>
<ng-container *ngFor="let chat of chatService.chats$ | async; let lastItem = last">
<app-chat-item [routerLink]="['/m', '5f432a9f39b58ff132fc0a4c8af10d42efd917d8076f68bb7f2f91ed7d4f6a41']" [chat]="chat"></app-chat-item>
<mat-divider *ngIf="!lastItem"></mat-divider>
</ng-container>
</mat-nav-list>

9
src/app/shared/chat-list/chat-list.component.ts
View File

@ -10,13 +10,8 @@ import { ChatModel } from 'src/app/services/interfaces';
})
export class ChatListComponent implements OnInit {
@Output() openChatSidebar: EventEmitter<string> = new EventEmitter();
chats$: Observable<ChatModel[]>;
constructor(private service: ChatService) {
this.chats$ = service.chats.asObservable();
}
constructor(public chatService: ChatService) {}
ngOnInit() {
this.service.getChats();
}
ngOnInit() {}
}