teams: smoother tasks (fixes #7971) (#8626)

Co-authored-by: dogi <[email protected]>

Author: jessewashburn

package.json

@@ -1,7 +1,7 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.18.88",
+  "version": "0.18.89",
   "myplanet": {
     "latest": "v0.25.42",
     "min": "v0.24.42"

src/app/meetups/view-meetups/meetups-view.component.html

@@ -5,26 +5,28 @@
 <div class="space-container">
   <mat-toolbar class="primary-color font-size-1 action-buttons">
     <h3 class="margin-lr-3 ellipsis-title">{{meetupDetail?.title}}</h3>
-    <ng-container *ngIf="editable === true">
-      <button mat-stroked-button *ngIf="canManage && !meetupDetail.isTask" (click)="routeToEdit()">
-        <mat-icon>edit</mat-icon>
-      </button>
-      <button mat-stroked-button *ngIf="canManage && !meetupDetail.isTask" (click)="deleteMeetup()">
-        <mat-icon>delete</mat-icon>
-      </button>
-    </ng-container>
     <span class="toolbar-fill"></span>
-    <div>
-      <ng-container *ngIf="!parent && !isDialog">
-        <button mat-stroked-button class="margin-lr-3" [disabled]="this.dateNow > (meetupDetail?.endDate || meetupDetail?.startDate)" (click)="openInviteMemberDialog()">
-          <span i18n>Invite Member</span>
+    <div class="button-group-right">
+      <ng-container *ngIf="editable === true">
+        <button mat-stroked-button *ngIf="(canManage && !meetupDetail.isTask) || meetupDetail.isTask" 
+                (click)="meetupDetail.isTask ? editTask() : routeToEdit()">
+          <mat-icon>edit</mat-icon>
         </button>
-        <button mat-raised-button color="accent" class="margin-lr-3" [matTooltip]="isMeetupDisabled() ? 'You cannot join old meetup' : ''" [disabled]="isMeetupDisabled()" (click)="joinMeetup()">
-          <span *ngIf="meetupDetail?.participate; else joinMeetupText" i18n>Leave</span>
-          <ng-template #joinMeetupText><span i18n>Join</span></ng-template>
+        <button mat-stroked-button *ngIf="(canManage && !meetupDetail.isTask) || meetupDetail.isTask" 
+                (click)="meetupDetail.isTask ? deleteTask() : deleteMeetup()">
+          <mat-icon>delete</mat-icon>
         </button>
       </ng-container>
     </div>
+    <div *ngIf="!parent && !isDialog">
+      <button mat-stroked-button class="margin-lr-3" [disabled]="this.dateNow > (meetupDetail?.endDate || meetupDetail?.startDate)" (click)="openInviteMemberDialog()">
+        <span i18n>Invite Member</span>
+      </button>
+      <button mat-raised-button color="accent" class="margin-lr-3" [matTooltip]="isMeetupDisabled() ? 'You cannot join old meetup' : ''" [disabled]="isMeetupDisabled()" (click)="joinMeetup()">
+        <span *ngIf="meetupDetail?.participate; else joinMeetupText" i18n>Leave</span>
+        <ng-template #joinMeetupText><span i18n>Join</span></ng-template>
+      </button>
+    </div>
   </mat-toolbar>
   <div class="view-container">
     <div [ngClass]="{'left-tile':!isDialog}">

src/app/meetups/view-meetups/meetups-view.component.ts

@@ -1,11 +1,11 @@
-import { Component, OnInit, OnDestroy, Input, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, OnDestroy, Input, Output, EventEmitter, Inject, Optional } from '@angular/core';
 import { CouchService } from '../../shared/couchdb.service';
 import { Router, ActivatedRoute, ParamMap } from '@angular/router';
 import { takeUntil } from 'rxjs/operators';
 import { MeetupService } from '../meetups.service';
 import { Subject } from 'rxjs';
 import { UserService } from '../../shared/user.service';
-import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { PlanetMessageService } from '../../shared/planet-message.service';
 import { DialogsListService } from '../../shared/dialogs/dialogs-list.service';
 import { DialogsListComponent } from '../../shared/dialogs/dialogs-list.component';
@@ -37,7 +37,8 @@ export class MeetupsViewComponent implements OnInit, OnDestroy {
 
   constructor(
     public dialog: MatDialog,
-    public dialogRef: MatDialogRef<MeetupsViewComponent>,
+    @Optional() public dialogRef: MatDialogRef<MeetupsViewComponent>,
+    @Optional() @Inject(MAT_DIALOG_DATA) public data: any,
     private couchService: CouchService,
     private router: Router,
     private route: ActivatedRoute,
@@ -184,4 +185,18 @@ export class MeetupsViewComponent implements OnInit, OnDestroy {
     );
   }
 
+  editTask() {
+    if (this.dialogRef && this.data && this.data.onEditTask) {
+      this.dialogRef.close();
+      this.data.onEditTask();
+    }
+  }
+
+  deleteTask() {
+    if (this.dialogRef && this.data && this.data.onDeleteTask) {
+      this.dialogRef.close();
+      this.data.onDeleteTask();
+    }
+  }
+
 }

src/app/meetups/view-meetups/meetups-view.scss

@@ -13,4 +13,11 @@
     }
   }
 
+  .button-group-right {
+    display: flex;
+    
+    button {
+      margin-right: 4px;
+    }
+  }
 }

src/app/shared/calendar.component.ts

@@ -7,11 +7,16 @@ import interactionPlugin from '@fullcalendar/interaction';
 import allLocales from '@fullcalendar/core/locales-all';
 import { MatDialog } from '@angular/material/dialog';
 import { DialogsAddMeetupsComponent } from './dialogs/dialogs-add-meetups.component';
+import { DialogsPromptComponent } from './dialogs/dialogs-prompt.component';
 import { days, millisecondsToDay } from '../meetups/constants';
 import { CouchService } from './couchdb.service';
 import { findDocuments } from './mangoQueries';
 import { addDateAndTime, styleVariables } from './utils';
 import { AuthService } from './auth-guard.service';
+import { TasksService } from '../tasks/tasks.service';
+import { DialogsFormService } from './dialogs/dialogs-form.service';
+import { PlanetMessageService } from './planet-message.service';
+import { DialogsLoadingService } from './dialogs/dialogs-loading.service';
 
 @Component({
   selector: 'planet-calendar',
@@ -85,7 +90,11 @@ export class PlanetCalendarComponent implements OnInit, OnChanges {
     @Inject(DOCUMENT) private document: Document,
     private dialog: MatDialog,
     private couchService: CouchService,
-    private authService: AuthService
+    private authService: AuthService,
+    private tasksService: TasksService,
+    private dialogsFormService: DialogsFormService,
+    private planetMessageService: PlanetMessageService,
+    private dialogsLoadingService: DialogsLoadingService
   ) {}
 
   ngOnInit() {
@@ -217,16 +226,74 @@ export class PlanetCalendarComponent implements OnInit, OnChanges {
   }
 
   eventClick({ event }) {
+    const eventData = event.extendedProps.meetup;
+
+    if (eventData.isTask) {
+      this.openTaskDialog(eventData);
+    } else {
+      this.dialog.open(DialogsAddMeetupsComponent, {
+        data: {
+          meetup: eventData,
+          view: 'view',
+          link: this.link,
+          sync: this.sync,
+          editable: this.editable,
+          onMeetupsChange: this.onMeetupsChange.bind(this)
+        }
+      });
+    }
+  }
+
+  openTaskDialog(task) {
     this.dialog.open(DialogsAddMeetupsComponent, {
       data: {
-        meetup: event.extendedProps.meetup,
+        meetup: task,
         view: 'view',
         link: this.link,
         sync: this.sync,
         editable: this.editable,
-        onMeetupsChange: this.onMeetupsChange.bind(this)
+        isTask: true,
+        onEditTask: () => this.openTaskEditDialog(task),
+        onDeleteTask: () => this.openTaskDeleteDialog(task)
       }
     });
   }
 
+  openTaskEditDialog(task) {
+    const { fields, formGroup } = this.tasksService.addDialogForm(task);
+    this.dialogsFormService.openDialogsForm(task.title ? $localize`Edit Task` : $localize`Add Task`, fields, formGroup, {
+      onSubmit: (newTask) => {
+        if (newTask) {
+          this.tasksService.addDialogSubmit({ link: this.link, sync: this.sync }, task, newTask, () => {
+            this.getTasks();
+            this.planetMessageService.showMessage($localize`Task updated successfully`);
+            this.dialogsFormService.closeDialogsForm();
+          });
+        }
+      },
+      autoFocus: true
+    });
+  }
+
+  openTaskDeleteDialog(task) {
+    const dialogRef = this.dialog.open(DialogsPromptComponent, {
+      data: {
+        okClick: {
+          request: this.tasksService.archiveTask(task)(),
+          onNext: () => {
+            this.getTasks();
+            this.planetMessageService.showMessage($localize`Task deleted successfully`);
+            dialogRef.close();
+          },
+          onError: () => {
+            this.planetMessageService.showAlert($localize`There was an error deleting this task`);
+            dialogRef.close();
+          }
+        },
+        changeType: 'delete',
+        type: 'task',
+        displayName: task.title
+      }
+    });
+  }
 }

src/app/tasks/tasks.service.ts

@@ -90,7 +90,12 @@ export class TasksService {
       ...task,
       completed: task.completed || false,
       completedTime: task.completed ? (task.completedTime || this.couchService.datePlaceholder) : undefined
-    });
+    }).pipe(
+      map(res => {
+        this.getTasks();
+        return res;
+      })
+    );
   }
 
   sortedTasks(tasks, tasksInOrder = []) {
@@ -100,9 +105,9 @@ export class TasksService {
       -1 :
       false;
     return tasks.sort((a, b) =>
-      compare(tasksInOrder.findIndex(t => t._id === a._id), tasksInOrder.findIndex(t => t._id === b._id)) ||
-      compare(a.completed, b.completed) ||
       compare(new Date(a.deadline), new Date(b.deadline)) ||
+      compare(a.completed, b.completed) ||
+      compare(tasksInOrder.findIndex(t => t._id === a._id), tasksInOrder.findIndex(t => t._id === b._id)) ||
       0
     );
   }