[U] channel.comp WIP
This commit is contained in:
parent
1da9c1e81a
commit
57306fe7bf
8 changed files with 269 additions and 19 deletions
3
src/app/api/supabase/message.ts
Normal file
3
src/app/api/supabase/message.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
export class Message {
|
||||
|
||||
}
|
||||
|
|
@ -1 +1,106 @@
|
|||
<p>channel works!</p>
|
||||
<ng-container *ngIf="channel">
|
||||
<div class="row headerRow">
|
||||
<div class="col-7 col-sm-10">
|
||||
<strong>#</strong><strong #name contenteditable="true" (click)="dataUpdated=true">{{ channel.name }}</strong>
|
||||
</div>
|
||||
<div class="col-5 col-sm-2">
|
||||
<div class="text-right">
|
||||
<button class="btn btn-sm btn-primary mb-1" [disabled]="!dataUpdated" (click)="updateChannel(name.innerText, desc.innerText)">Save</button>
|
||||
<button class="btn btn-sm btn-danger ml-1 mb-1" (click)="deleteChannel()">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<span #desc contenteditable="true" (click)="dataUpdated=true">{{ channel.description }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row messageRow">
|
||||
<div class="col-12 p-0">
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Morbi leo risus</li>
|
||||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- send msg -->
|
||||
<div class="row inputRow">
|
||||
<div class="card w-100 m-3 d-flex flex-row">
|
||||
<input [(ngModel)]="messageInput" type="text" class="input flex-grow-1">
|
||||
<div class="optionRow">
|
||||
<button class="btn btn-sm btn-primary btnSend ml-1">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,35 @@
|
|||
.headerRow {
|
||||
margin-top: -5px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px dashed #343a40;
|
||||
}
|
||||
.messageRow {
|
||||
margin-bottom: 60px;
|
||||
max-height: calc(100vh - 200px);
|
||||
overflow: hidden scroll;
|
||||
}
|
||||
.inputRow {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
// width: calc(100vw - 300px);
|
||||
.input {
|
||||
border: 0;
|
||||
// width: 100%;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.optionRow {
|
||||
// background-color: lightgray;
|
||||
// width: 100%;
|
||||
height: 40px;
|
||||
padding: 5px;
|
||||
.btnSend {
|
||||
float: right;
|
||||
background-color: lightseagreen;
|
||||
border-color: lightseagreen;
|
||||
&:hover {
|
||||
border-color: seagreen;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,15 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { Component, OnInit } from "@angular/core";
|
||||
import { DomSanitizer } from '@angular/platform-browser';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
|
||||
import { Subject } from 'rxjs';
|
||||
import { take, takeUntil } from 'rxjs/operators';
|
||||
import { Channel } from '../api/supabase/channel';
|
||||
import { ChannelService } from '../api/supabase/channel.service';
|
||||
import { Message } from '../api/supabase/message';
|
||||
import { SupaService } from '../api/supabase/supa.service';
|
||||
import { User } from '../api/supabase/user';
|
||||
import { UserService } from '../api/supabase/user.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-channel',
|
||||
|
|
@ -6,10 +17,95 @@ import { Component, OnInit } from '@angular/core';
|
|||
styleUrls: ['./channel.component.scss']
|
||||
})
|
||||
export class ChannelComponent implements OnInit {
|
||||
channel: Channel;
|
||||
member: User[] = [];
|
||||
messages: Message[] = [];
|
||||
$destroy: Subject<boolean> = new Subject();
|
||||
dataUpdated: boolean = false;
|
||||
messageInput: string = '';
|
||||
|
||||
constructor() { }
|
||||
constructor(
|
||||
private channelService: ChannelService,
|
||||
private modalService: NgbModal,
|
||||
private supaService: SupaService,
|
||||
private route: ActivatedRoute,
|
||||
private sanitizer: DomSanitizer,
|
||||
private userService: UserService,
|
||||
private router: Router,
|
||||
) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
ngOnInit() {
|
||||
this.route.params.subscribe(
|
||||
params => {
|
||||
this.reset();
|
||||
if (params.id) {
|
||||
this.channelService.getOne(params.id).subscribe(
|
||||
data => {
|
||||
console.log('got channel', data);
|
||||
this.channel = data;
|
||||
// this.loadMessages(data.id).subscribe(messages => {
|
||||
// this.messages = messages;
|
||||
// });
|
||||
},
|
||||
error => {
|
||||
console.error(error);
|
||||
this.router.navigateByUrl('/dashboard');
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.$destroy.next(true);
|
||||
this.$destroy.complete();
|
||||
}
|
||||
|
||||
reset() {
|
||||
delete this.channel;
|
||||
this.member = [];
|
||||
this.messages = [];
|
||||
this.messageInput = '';
|
||||
this.$destroy.next(true);
|
||||
}
|
||||
|
||||
loadChannel(id: number) {
|
||||
return this.channelService.getOne(id).pipe(takeUntil(this.$destroy.asObservable()));
|
||||
}
|
||||
|
||||
loadMessages(channel_id: number) {
|
||||
|
||||
}
|
||||
|
||||
loadUser(user_id: string) {
|
||||
|
||||
}
|
||||
|
||||
updateChannel(name:string, desc:string) {
|
||||
this.channel.name = name;
|
||||
this.channel.description = desc;
|
||||
this.channelService.updateOne(this.channel).pipe(take(1)).subscribe(
|
||||
data => {
|
||||
console.log('Success', data);
|
||||
},
|
||||
error => {
|
||||
console.error('Failed', error);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
deleteChannel() {
|
||||
const check = confirm('Do you want to delete this channel?');
|
||||
if (check == true) {
|
||||
this.channelService.deleteOne(this.channel).subscribe(
|
||||
data => {
|
||||
console.log('Deleted channel', data);
|
||||
this.router.navigateByUrl('/dashboard');
|
||||
},
|
||||
error => console.error(error)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
</div>
|
||||
<div class="col-12 col-sm-3 order-0 oder-sm-1">
|
||||
<div class="float-right">
|
||||
<button class="btn btn-primary ml-1 mr-1" [disabled]="!dataUpdated" (click)="updateStandUp(name.innerText, desc.innerText)">Save</button>
|
||||
<button class="btn btn-danger ml-1 mr-1" (click)="deleteStandUp()">Delete</button>
|
||||
<button class="btn btn-sm btn-primary ml-1 mr-1" [disabled]="!dataUpdated" (click)="updateStandUp(name.innerText, desc.innerText)">Save</button>
|
||||
<button class="btn btn-sm btn-danger ml-1 mr-1" (click)="deleteStandUp()">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 order-2">
|
||||
|
|
|
|||
|
|
@ -50,6 +50,7 @@ export class HuddleComponent implements OnInit, OnDestroy {
|
|||
},
|
||||
error => {
|
||||
console.error(error);
|
||||
this.router.navigateByUrl('/dashboard');
|
||||
}
|
||||
)
|
||||
}
|
||||
|
|
@ -123,19 +124,22 @@ export class HuddleComponent implements OnInit, OnDestroy {
|
|||
error => {
|
||||
console.error('Failed', error);
|
||||
}
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
deleteStandUp() {
|
||||
this.standupService.deleteOne(this.standup).pipe(take(1)).subscribe(
|
||||
data => {
|
||||
console.log('Success', data);
|
||||
this.router.navigateByUrl('/dashboard')
|
||||
},
|
||||
error => {
|
||||
console.error('Failed', error);
|
||||
}
|
||||
);
|
||||
const check = confirm('Do you want to delete this standup?');
|
||||
if (check == true) {
|
||||
this.standupService.deleteOne(this.standup).pipe(take(1)).subscribe(
|
||||
data => {
|
||||
console.log('Success', data);
|
||||
this.router.navigateByUrl('/dashboard')
|
||||
},
|
||||
error => {
|
||||
console.error('Failed', error);
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
async uploadStory(src: string) {
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<div class="list bg-dark text-white p-3">
|
||||
<p><strong>Standup</strong> <strong class="newBtn" (click)="createStandUp()">+</strong></p>
|
||||
<p><strong>Standup</strong> <strong class="newBtn" (click)="createStandUp()" style="vertical-align: text-bottom;">+</strong></p>
|
||||
<ul class="list-unstyled">
|
||||
<li *ngFor="let s of standups" [title]="s.description" [routerLink]="'/huddle/'+s.id">{{s.name}}</li>
|
||||
<li *ngIf="standups && (standups.length === 0)"><small>There are no standups yet.</small></li>
|
||||
</ul>
|
||||
<p><strong>Channel</strong> <strong class="newBtn" (click)="createChannel()">+</strong></p>
|
||||
<p><strong>Channel</strong> <strong class="newBtn" (click)="createChannel()" style="vertical-align: text-bottom;">+</strong></p>
|
||||
<ul class="list-unstyled">
|
||||
<li *ngFor="let c of channels" [title]="c.description" [routerLink]="'/channel/'+c.id">{{c.name}}</li>
|
||||
<li *ngFor="let c of channels" [title]="c.description" [routerLink]="'/channel/'+c.id"><span class="channelHash">#</span>{{c.name}}</li>
|
||||
<li *ngIf="channels && (channels.length === 0)"><small>There are no channels yet.</small></li>
|
||||
</ul>
|
||||
<p><strong>Settings</strong></p>
|
||||
|
|
|
|||
|
|
@ -19,4 +19,11 @@
|
|||
color: lightseagreen;
|
||||
}
|
||||
}
|
||||
.channelHash {
|
||||
padding: 3px 6.5px;
|
||||
background: rgba(255,255,255,0.1);
|
||||
border-radius: 3px;
|
||||
margin-right: 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue