deletion of scheduled status functional

src/app/components/create-status/create-status.component.ts

@@ -21,6 +21,7 @@ import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import { EmojiPickerComponent } from './emoji-picker/emoji-picker.component';
 import { PollEditorComponent } from './poll-editor/poll-editor.component';
 import { StatusSchedulerComponent } from './status-scheduler/status-scheduler.component';
+import { ScheduledStatusService } from '../../services/scheduled-status.service';
 
 @Component({
     selector: 'app-create-status',
@@ -154,6 +155,7 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
     private selectedAccount: AccountInfo;
 
     constructor(
+        private readonly scheduledStatusService: ScheduledStatusService,
         private readonly contextMenuService: ContextMenuService,
         private readonly store: Store,
         private readonly notificationService: NotificationService,
@@ -460,6 +462,10 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
                 this.title = '';
                 this.status = '';
                 this.onClose.emit();
+
+                if(this.scheduleIsActive){
+                    this.scheduledStatusService.statusAdded(acc);
+                }
             })
             .catch((err: HttpErrorResponse) => {
                 this.notificationService.notifyHttpError(err);

src/app/components/floating-column/scheduled-statuses/scheduled-status/scheduled-status.component.html

@@ -19,8 +19,20 @@
     </div>
 
     <div class="scheduled-status__edition">
-        <button class="scheduled-status__edition--button" title="delete status">Delete</button>
-        <button class="scheduled-status__edition--button" title="reschedule status">Reschedule</button>
+        <div *ngIf="!deleting">
+            <button class="scheduled-status__edition--button" (click)="delete()" title="delete status">Delete</button>
+            <button class="scheduled-status__edition--button" (click)="reschedule()"
+                title="reschedule status">Reschedule</button>
+        </div>
 
+        <div *ngIf="deleting">
+            <button class="scheduled-status__edition--button" (click)="cancelDeletion()" title="cancel">CANCEL</button>
+            <button class="scheduled-status__edition--button scheduled-status__edition--delete"
+                (click)="confirmDeletion()" title="confirm status deletion">DO IT</button>
+
+            <div class="scheduled-status__edition--label">
+                Delete the status?
+            </div>
+        </div>
     </div>
 </div>

src/app/components/floating-column/scheduled-statuses/scheduled-status/scheduled-status.component.scss

@@ -47,5 +47,19 @@ $avatar-size: 40px;
                 background-color: #3b4769;
             }
         }
+
+        &--delete {
+            background-color: rgb(95, 5, 5);
+
+            &:hover {
+                background-color: rgb(163, 4, 4);
+            }
+        }
+
+        &--label{
+            height: 30px;
+            float: right;
+            padding: 9px 5px 0 5px;            
+        }
     }
 }

src/app/components/floating-column/scheduled-statuses/scheduled-status/scheduled-status.component.ts

@@ -3,6 +3,9 @@ import { Component, OnInit, Input } from '@angular/core';
 import { AccountInfo } from '../../../../states/accounts.state';
 import { ScheduledStatus } from '../../../../services/models/mastodon.interfaces';
 import { ToolsService } from '../../../../services/tools.service';
+import { MastodonService } from '../../../../services/mastodon.service';
+import { NotificationService } from '../../../../services/notification.service';
+import { ScheduledStatusService } from '../../../../services/scheduled-status.service';
 
 @Component({
     selector: 'app-scheduled-status',
@@ -10,12 +13,18 @@ import { ToolsService } from '../../../../services/tools.service';
     styleUrls: ['./scheduled-status.component.scss']
 })
 export class ScheduledStatusComponent implements OnInit {
+    deleting: boolean = false;
+    rescheduling: boolean = false;
 
     avatar: string;
     @Input() account: AccountInfo;
     @Input() status: ScheduledStatus;
 
-    constructor(private readonly toolsService: ToolsService) { }
+    constructor(
+        private readonly scheduledStatusService: ScheduledStatusService,
+        private readonly notificationService: NotificationService,
+        private readonly mastodonService: MastodonService,
+        private readonly toolsService: ToolsService) { }
 
     ngOnInit() {
         this.toolsService.getAvatar(this.account)
@@ -23,4 +32,30 @@ export class ScheduledStatusComponent implements OnInit {
                 this.avatar = avatar;
             });
     }
+
+    delete(): boolean {
+        this.deleting = !this.deleting;
+        return false;
+    }
+
+    cancelDeletion(): boolean {
+        this.deleting = false;
+        return false;
+    }
+
+    confirmDeletion(): boolean {
+        this.mastodonService.deleteScheduledStatus(this.account, this.status.id)
+            .then(() => {
+                this.scheduledStatusService.removeStatus(this.account, this.status.id);
+            })
+            .catch(err => {
+                this.notificationService.notifyHttpError(err);
+            })
+        return false;
+    }
+
+    reschedule(): boolean {
+        this.rescheduling = !this.rescheduling;
+        return false;
+    }
 }

src/app/components/floating-column/scheduled-statuses/scheduled-statuses.component.scss

@@ -9,8 +9,7 @@
 
 .scheduled-statuses-display {
     overflow: auto;
-    // height: calc(100%);
-    height: calc(100% - 40px);
+    height: calc(100% - #{$stream-header-height});
 }
 
 .scheduled-status {

src/app/services/scheduled-status.service.ts

@@ -26,15 +26,7 @@ export class ScheduledStatusService {
         let promises: Promise<any>[] = [];
 
         accounts.forEach((account: AccountInfo) => {
-            let promise = this.mastodonService.getScheduledStatuses(account)
-                .then((statuses: ScheduledStatus[]) => {
-                    if (statuses) {
-                        this.processStatuses(account, statuses);
-                    }
-                })
-                .catch(err => {
-                    this.notificationService.notifyHttpError(err);
-                });
+            let promise = this.getStatusFromAccount(account);
             promises.push(promise);
         });
 
@@ -46,6 +38,18 @@ export class ScheduledStatusService {
             });
     }
 
+    private getStatusFromAccount(account: AccountInfo): Promise<any> {
+        return this.mastodonService.getScheduledStatuses(account)
+            .then((statuses: ScheduledStatus[]) => {
+                if (statuses) {
+                    this.processStatuses(account, statuses);
+                }
+            })
+            .catch(err => {
+                this.notificationService.notifyHttpError(err);
+            });
+    }
+
     private processStatuses(account: AccountInfo, statuses: ScheduledStatus[]) {
         let previousStatuses: ScheduledStatus[] = [];
         const notification = this.scheduledStatuses.value.find(x => x.account.id === account.id);
@@ -67,6 +71,19 @@ export class ScheduledStatusService {
             this.scheduledStatuses.next(currentNotifications);
         }
     }
+
+    statusAdded(account: AccountInfo) {
+        this.getStatusFromAccount(account);
+    }
+
+    removeStatus(account: AccountInfo, statusId: string) {
+        const notification = this.scheduledStatuses.value.find(x => x.account.id === account.id);
+        notification.statuses = notification.statuses.filter(x => x.id !== statusId);
+
+        const otherNotifications = this.scheduledStatuses.value.filter(x => x.account.id !== account.id);
+        const currentNotifications = [...otherNotifications, notification];
+        this.scheduledStatuses.next(currentNotifications);
+    }
 }
 
 export class ScheduledStatusNotification {