jgerstbe/async-huddle
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

[U] channel.comp WIP

Browse source
This commit is contained in:
Jan 2020-10-31 01:26:27 +01:00
parent 1da9c1e81a
commit 57306fe7bf
8 changed files with 269 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/app/api/supabase/message.ts Normal file
View file

@ -0,0 +1,3 @@
export class Message {
}

107
src/app/channel/channel.component.html
View file

@ -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>

35
src/app/channel/channel.component.scss
View file

@ -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;
}
}
}
}

102
src/app/channel/channel.component.ts
View file

@ -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({ @Component({
selector: 'app-channel', selector: 'app-channel',
@ -6,10 +17,95 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./channel.component.scss'] styleUrls: ['./channel.component.scss']
}) })
export class ChannelComponent implements OnInit { 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)
);
}
} }
} }

4
src/app/huddle/huddle.component.html
View file

@ -5,8 +5,8 @@
</div> </div>
<div class="col-12 col-sm-3 order-0 oder-sm-1"> <div class="col-12 col-sm-3 order-0 oder-sm-1">
<div class="float-right"> <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-sm 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-danger ml-1 mr-1" (click)="deleteStandUp()">Delete</button>
</div> </div>
</div> </div>
<div class="col-12 order-2"> <div class="col-12 order-2">

6
src/app/huddle/huddle.component.ts
View file

@ -50,6 +50,7 @@ export class HuddleComponent implements OnInit, OnDestroy {
}, },
error => { error => {
console.error(error); console.error(error);
this.router.navigateByUrl('/dashboard');
} }
) )
} }
@ -123,10 +124,12 @@ export class HuddleComponent implements OnInit, OnDestroy {
error => { error => {
console.error('Failed', error); console.error('Failed', error);
} }
) );
} }
deleteStandUp() { deleteStandUp() {
const check = confirm('Do you want to delete this standup?');
if (check == true) {
this.standupService.deleteOne(this.standup).pipe(take(1)).subscribe( this.standupService.deleteOne(this.standup).pipe(take(1)).subscribe(
data => { data => {
console.log('Success', data); console.log('Success', data);
@ -137,6 +140,7 @@ export class HuddleComponent implements OnInit, OnDestroy {
} }
); );
} }
}
async uploadStory(src: string) { async uploadStory(src: string) {
console.log('uploadStory', event); console.log('uploadStory', event);

6
src/app/sidebar/sidebar.component.html
View file

@ -1,12 +1,12 @@
<div class="list bg-dark text-white p-3"> <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"> <ul class="list-unstyled">
<li *ngFor="let s of standups" [title]="s.description" [routerLink]="'/huddle/'+s.id">{{s.name}}</li> <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> <li *ngIf="standups && (standups.length === 0)"><small>There are no standups yet.</small></li>
</ul> </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"> <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> <li *ngIf="channels && (channels.length === 0)"><small>There are no channels yet.</small></li>
</ul> </ul>
<p><strong>Settings</strong></p> <p><strong>Settings</strong></p>

7
src/app/sidebar/sidebar.component.scss
View file

@ -19,4 +19,11 @@
color: lightseagreen; color: lightseagreen;
} }
} }
.channelHash {
padding: 3px 6.5px;
background: rgba(255,255,255,0.1);
border-radius: 3px;
margin-right: 5px;
vertical-align: middle;
}
} }