added delete list functionnality #46

This commit is contained in:
Nicolas Constant 2019-05-19 14:55:37 -04:00
parent 5568c3c38d
commit 72e72cfc86
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
4 changed files with 52 additions and 21 deletions

View File

@ -9,12 +9,24 @@
<h4 class="my-account__label my-account__margin-top">manage list:</h4>
<div class="my-account__link--margin-bottom" *ngFor="let list of availableLists">
<a href class="my-account__list--button" title="delete list" (click)="deleteList(list)">
<a href class="my-account__list--button" title="delete list"
(click)="openCloseDeleteConfirmation(list, true)" *ngIf="!list.confirmDeletion">
<fa-icon class="my-account__link--icon" [icon]="faTrash"></fa-icon>
</a>
<a href class="my-account__list--button" title="edit list" (click)="editList(list)">
<a href class="my-account__list--button" title="edit list"
(click)="editList(list)" *ngIf="!list.confirmDeletion">
<fa-icon class="my-account__link--icon" [icon]="faPenAlt"></fa-icon>
</a>
<a href class="my-account__list--button" title="cancel"
(click)="openCloseDeleteConfirmation(list, false)" *ngIf="list.confirmDeletion">
<fa-icon class="my-account__link--icon" [icon]="faTimes"></fa-icon>
</a>
<a href class="my-account__list--button my-account__red" title="delete list"
(click)="deleteList(list)" *ngIf="list.confirmDeletion">
<fa-icon class="my-account__link--icon" [icon]="faCheck"></fa-icon>
</a>
<a class="my-account__link my-account__list my-account__blue" href (click)="addStream(list)"
title="{{ list.isAdded ? '' : 'add list'}}" [class.my-account__link--disabled]="list.isAdded">
{{ list.name }} <fa-icon class="my-account__link--icon" *ngIf="list.isAdded" [icon]="faCheckSquare">

View File

@ -17,22 +17,7 @@
margin-top: 10px;
margin-left: 5px;
color: $font-color-secondary;
}
&__blue {
background-color: $color-primary;
color: #fff;
&:hover {
background-color: lighten($color-primary, 15);
}
}
&__red {
$red-button-color: rgb(65, 3, 3);
background-color: $red-button-color;
color: #fff;
&:hover {
background-color: lighten($red-button-color, 15);
}
}
}
&__link {
text-decoration: none;
display: block; // width: calc(100% - 20px);
@ -90,4 +75,19 @@
&__margin-top {
margin-top: 25px;
}
&__blue {
background-color: $color-primary;
color: #fff;
&:hover {
background-color: lighten($color-primary, 15);
}
}
&__red {
$red-button-color: rgb(65, 3, 3);
background-color: $red-button-color;
color: #fff;
&:hover {
background-color: lighten($red-button-color, 15);
}
}
}

View File

@ -2,7 +2,7 @@ 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 { faPenAlt, faTrash, faPlus } from "@fortawesome/free-solid-svg-icons";
import { faPenAlt, faTrash, faPlus, faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
import { NotificationService } from '../../../../services/notification.service';
import { StreamElement, StreamTypeEnum, AddStream, RemoveAllStreams } from '../../../../states/streams.state';
@ -21,6 +21,8 @@ export class MyAccountComponent implements OnInit, OnDestroy {
faTrash = faTrash;
faPenAlt = faPenAlt;
faCheckSquare = faCheckSquare;
faCheck = faCheck;
faTimes = faTimes;
availableStreams: StreamWrapper[] = [];
availableLists: StreamWrapper[] = [];
@ -136,8 +138,19 @@ export class MyAccountComponent implements OnInit, OnDestroy {
return false;
}
deleteList(list: StreamWrapper): boolean {
openCloseDeleteConfirmation(list: StreamWrapper, state: boolean): boolean {
list.confirmDeletion = state;
return false;
}
deleteList(list: StreamWrapper): boolean {
this.mastodonService.deleteList(this.account.info, list.listId)
.then(() => {
this.availableLists = this.availableLists.filter(x => x.id !== list.id);
})
.catch(err => {
this.notificationService.notifyHttpError(err);
});
return false;
}

View File

@ -7,7 +7,7 @@ import { AccountInfo } from '../states/accounts.state';
import { StreamTypeEnum, StreamElement } from '../states/streams.state';
@Injectable()
export class MastodonService {
export class MastodonService {
private apiRoutes = new ApiRoutes();
constructor(private readonly httpClient: HttpClient) { }
@ -280,6 +280,12 @@ export class MastodonService {
return new StreamElement(StreamTypeEnum.list, list.title, account.id, null, list.title, list.id, account.instance);
});
}
deleteList(account: AccountInfo, listId: string): Promise<any> {
let route = `https://${account.instance}${this.apiRoutes.deleteList}`.replace('{0}', listId);
const headers = new HttpHeaders({ 'Authorization': `Bearer ${account.token.access_token}` });
return this.httpClient.delete(route, { headers: headers }).toPromise();
}
}
export enum VisibilityEnum {