diff --git a/src/app/components/floating-column/manage-account/my-account/my-account.component.html b/src/app/components/floating-column/manage-account/my-account/my-account.component.html index 82d03bde..d7dc463b 100644 --- a/src/app/components/floating-column/manage-account/my-account/my-account.component.html +++ b/src/app/components/floating-column/manage-account/my-account/my-account.component.html @@ -1,7 +1,8 @@

add column:

- - {{ stream.name }} + + {{ stream.name }}

remove account from sengi:

diff --git a/src/app/components/floating-column/manage-account/my-account/my-account.component.scss b/src/app/components/floating-column/manage-account/my-account/my-account.component.scss index 4d7ba144..094bb85d 100644 --- a/src/app/components/floating-column/manage-account/my-account/my-account.component.scss +++ b/src/app/components/floating-column/manage-account/my-account/my-account.component.scss @@ -20,18 +20,6 @@ margin-left: 5px; color: $font-color-secondary; } - &__link { - text-decoration: none; - display: block; // width: calc(100% - 20px); - width: 100%; // height: 30px; - padding: 5px 10px; // border: solid 1px black; - &:not(:last-child) { - margin-bottom: 5px; - } - } - &__margin-top { - margin-top: 25px; - } &__blue { background-color: $color-primary; color: #fff; @@ -47,4 +35,26 @@ background-color: lighten($red-button-color, 15); } } + &__link { + text-decoration: none; + display: block; // width: calc(100% - 20px); + width: 100%; // height: 30px; + padding: 5px 10px; // border: solid 1px black; + &:not(:last-child) { + margin-bottom: 5px; + } + &--icon { + float: right; + } + &--disabled { + cursor: default; + background-color: darken($color-primary, 4); + &:hover { + background-color: darken($color-primary, 4); + } + } + } + &__margin-top { + margin-top: 25px; + } } \ No newline at end of file diff --git a/src/app/components/floating-column/manage-account/my-account/my-account.component.ts b/src/app/components/floating-column/manage-account/my-account/my-account.component.ts index 67a52474..d4e0e9e9 100644 --- a/src/app/components/floating-column/manage-account/my-account/my-account.component.ts +++ b/src/app/components/floating-column/manage-account/my-account/my-account.component.ts @@ -1,5 +1,7 @@ -import { Component, OnInit, Input } from '@angular/core'; -import { Store } from '@ngxs/store'; +import { Component, OnInit, OnDestroy, Input } from '@angular/core'; +import { Observable, Subscription } from 'rxjs'; +import { Store, Select } from '@ngxs/store'; +import { faCheckSquare } from "@fortawesome/free-regular-svg-icons"; import { NotificationService } from '../../../../services/notification.service'; import { StreamElement, StreamTypeEnum, AddStream, RemoveAllStreams } from '../../../../states/streams.state'; @@ -12,11 +14,24 @@ import { NavigationService } from '../../../../services/navigation.service'; templateUrl: './my-account.component.html', styleUrls: ['./my-account.component.scss'] }) -export class MyAccountComponent implements OnInit { +export class MyAccountComponent implements OnInit, OnDestroy { + + faCheckSquare = faCheckSquare; - availableStreams: StreamElement[] = []; + availableStreams: StreamWrapper[] = []; - @Input() account: AccountWrapper; + private _account: AccountWrapper; + @Input('account') + set account(acc: AccountWrapper) { + this._account = acc; + this.loadStreams(acc); + } + get account(): AccountWrapper { + return this._account; + } + + @Select(state => state.streamsstatemodel.streams) streamElements$: Observable; + private streamChangedSub: Subscription; constructor( private readonly store: Store, @@ -24,19 +39,41 @@ export class MyAccountComponent implements OnInit { private notificationService: NotificationService) { } ngOnInit() { - const instance = this.account.info.instance; - this.availableStreams.length = 0; - this.availableStreams.push(new StreamElement(StreamTypeEnum.global, 'Federated Timeline', this.account.info.id, null, null, instance)); - this.availableStreams.push(new StreamElement(StreamTypeEnum.local, 'Local Timeline', this.account.info.id, null, null, instance)); - this.availableStreams.push(new StreamElement(StreamTypeEnum.personnal, 'Home', this.account.info.id, null, null, instance)); + this.streamChangedSub = this.streamElements$.subscribe((streams: StreamElement[]) => { + this.loadStreams(this.account); + }); } - addStream(stream: StreamElement): boolean { - if (stream) { + ngOnDestroy(): void { + if(this.streamChangedSub) { + this.streamChangedSub.unsubscribe(); + } + } + + private loadStreams(account: AccountWrapper){ + const instance = account.info.instance; + this.availableStreams.length = 0; + this.availableStreams.push(new StreamWrapper(new StreamElement(StreamTypeEnum.global, 'Federated Timeline', account.info.id, null, null, instance))); + this.availableStreams.push(new StreamWrapper(new StreamElement(StreamTypeEnum.local, 'Local Timeline', account.info.id, null, null, instance))); + this.availableStreams.push(new StreamWrapper(new StreamElement(StreamTypeEnum.personnal, 'Home', account.info.id, null, null, instance))); + + const loadedStreams = this.store.snapshot().streamsstatemodel.streams; + this.availableStreams.forEach(s => { + if(loadedStreams.find(x => x.id === s.id)){ + s.isAdded = true; + } else { + s.isAdded = false; + } + }); + } + + addStream(stream: StreamWrapper): boolean { + if (stream && !stream.isAdded) { this.store.dispatch([new AddStream(stream)]).toPromise() .then(() => { - this.notificationService.notify(`stream added`, false); - }); + stream.isAdded = true; + //this.notificationService.notify(`stream added`, false); + }); } return false; } @@ -48,3 +85,11 @@ export class MyAccountComponent implements OnInit { return false; } } + +class StreamWrapper extends StreamElement { + constructor(stream: StreamElement) { + super(stream.type, stream.name, stream.accountId, stream.tag, stream.list, stream.instance); + } + + isAdded: boolean; +} \ No newline at end of file