mirror of
https://github.com/block-core/blockcore-notes.git
synced 2024-09-29 14:30:43 +00:00
Add workable routing for Messages
This commit is contained in:
parent
e4ee1b704f
commit
cf4e3d1912
@ -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,
|
||||
|
@ -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>
|
||||
|
@ -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
29
src/app/message/message.css
Normal 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
30
src/app/message/message.html
Normal 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
40
src/app/message/message.ts
Normal 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 = [];
|
||||
}
|
||||
}
|
@ -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;
|
||||
}
|
@ -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> -->
|
||||
|
@ -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 = [];
|
||||
}
|
||||
}
|
||||
|
@ -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 => {
|
||||
|
@ -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>;
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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() {}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user