feat: add mobile inbox view

macite · Oct 11, 2022 · 56ded70 · 56ded70
1 parent 41ccd26
commit 56ded70
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 6 deletions.
diff --git a/src/app/projects/states/dashboard/selected-task.service.ts b/src/app/projects/states/dashboard/selected-task.service.ts
@@ -12,6 +12,12 @@ export class SelectedTaskService {
   private task$ = new BehaviorSubject<Task>(null);
   public currentPdfUrl$ = new BehaviorSubject<string>(null);
 
+  private _showingTask: boolean;
+
+  public get showingTaskSheet() {
+    return this._showingTask;
+  }
+
   public setSelectedTask(task: number | Task) {
     if (typeof task === 'number') {
       this.taskService.get(task).subscribe(this.task$);
@@ -23,10 +29,12 @@ export class SelectedTaskService {
 
   public showTaskSheet() {
     this.currentPdfUrl$.next(this.task$.value?.definition?.getTaskPDFUrl(false));
+    this._showingTask = true;
   }
 
   public showSubmission() {
     this.currentPdfUrl$.next(this.task$.value.submissionUrl(false));
+    this._showingTask = false;
   }
 
   public get selectedTask$(): Subject<Task> {

diff --git a/src/app/units/states/tasks/inbox/inbox.component.html b/src/app/units/states/tasks/inbox/inbox.component.html
@@ -1,4 +1,4 @@
-<div fxLayout="column" fxFill>
+<div fxLayout="column" fxFill fxHide fxShow.gt-sm>
   <div fxLayout="row" fxLayoutAlign="center stretch" fxFill>
     <div id="inboxpanel" #inboxpanel class="staff-task-list inbox-panel">
       <df-staff-task-list
@@ -43,3 +43,36 @@
   </div>
   <f-footer></f-footer>
 </div>
+
+<div #mobile fxLayout="row" fxFill fxHide fxShow.lt-md>
+  <div id="inboxpanel" #inboxpanel class="inbox-panel mobile" [hidden]="taskSelected">
+    <df-staff-task-list
+      *ngIf="taskData"
+      [isNarrow]="false"
+      [showSearchOptions]="showSearchOptions"
+      [filters]="filters"
+      [taskData]="taskData"
+      [unit]="unit"
+      [unitRole]="unitRole"
+    ></df-staff-task-list>
+  </div>
+  <div [hidden]="!taskSelected" fxLayout="column" fxFill fxLayoutAlign="space-between stretch">
+    <div fxLayout="row" style="margin-bottom: 5px">
+      <button mat-icon-button aria-label="Back to inbox" (click)="taskSelected = false">
+        <mat-icon>arrow_back_ios_new</mat-icon>
+      </button>
+      <h3 style="margin-top: 8px">{{ taskData?.selectedTask?.project.student.nickname }}</h3>
+      <div fxFlex></div>
+      <button mat-icon-button aria-label="Back to inbox" (click)="taskSelected = false">
+        <mat-icon>open_in_new</mat-icon>
+      </button>
+      <button mat-icon-button aria-label="Go to student" (click)="taskSelected = false">
+        <mat-icon>account_circle</mat-icon>
+      </button>
+    </div>
+
+    <div #commentspanel fxFlex class="inbox-panel task-comment-panel mobile">
+      <task-comments-viewer [task]="taskData.selectedTask"> </task-comments-viewer>
+    </div>
+  </div>
+</div>
diff --git a/src/app/units/states/tasks/inbox/inbox.component.scss b/src/app/units/states/tasks/inbox/inbox.component.scss
@@ -1,15 +1,20 @@
-.staff-task-list {
-}
+.staff-task-list {}
 
 .task-comment-panel {
     padding-left: 12px;
     padding-bottom: 0px;
+
+    &.mobile {
+        padding-left: 0px;
+        padding-bottom: 0px;
+        margin-bottom: 10px;
+    }
 }
 
 .resizer {
     background-color: #f5f5f5;
     z-index: 200;
-    width: 15px //css on hover
+    width: 10px //css on hover
 }
 
 .resizer:hover,
@@ -24,4 +29,9 @@
     padding: 8px;
     min-width: 60px;
     width: 350px;
+
+    &.mobile {
+        max-width: 100%;
+        width: 100%;
+    }
 }
diff --git a/src/app/units/states/tasks/inbox/inbox.component.ts b/src/app/units/states/tasks/inbox/inbox.component.ts
@@ -1,6 +1,6 @@
 import { CdkDragEnd, CdkDragStart, CdkDragMove } from '@angular/cdk/drag-drop';
 import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
-import { StateService, UIRouter } from '@uirouter/core';
+import { MediaObserver } from '@angular/flex-layout';
 import { auditTime, merge, Observable, of, Subject, tap, withLatestFrom } from 'rxjs';
 import { Unit } from 'src/app/api/models/unit';
 import { UnitRole } from 'src/app/api/models/unit-role';
@@ -25,16 +25,22 @@ export class InboxComponent implements OnInit {
   private dragMove$ = new Subject<{ event: CdkDragMove; div: HTMLDivElement }>();
   private dragMoveAudited$;
 
+  public taskSelected = false;
+
   visiblePdfUrl: string;
 
   get narrowTaskInbox(): boolean {
     return this.inboxPanel?.nativeElement.getBoundingClientRect().width < 150;
   }
 
-  constructor(private router: UIRouter, private state: StateService, private selectedTask: SelectedTaskService) {
+  constructor(private selectedTask: SelectedTaskService, public mediaObserver: MediaObserver) {
     this.selectedTask.currentPdfUrl$.subscribe((url) => {
       this.visiblePdfUrl = url;
     });
+
+    this.selectedTask.selectedTask$.subscribe((task) => {
+      this.taskSelected = task != null;
+    });
   }
 
   ngOnInit(): void {
@@ -66,6 +72,7 @@ export class InboxComponent implements OnInit {
       })
     );
     this.subs$ = merge(this.dragMoveAudited$, of(true));
+    window.dispatchEvent(new Event('resize'));
   }
 
   startedDragging(event: CdkDragStart, div: HTMLDivElement) {