feat(profile): url routing based on selected vo/resource

David Flor · xkureck · commit 60ac6eb5ab77 · 2022-05-26T10:15:41.000+02:00
* The mailing lists segment of profile settings now allows routing via VO shortname / resource name as query parameters
* By adding query parameter 'action' with values subscribe/unsubscribe user can quickly opt in and out of mailing list
* Added a notification when opting in/out
diff --git a/apps/user-profile/src/app/pages/settings-page/settings-mailing-lists/settings-mailing-lists.component.html b/apps/user-profile/src/app/pages/settings-page/settings-mailing-lists/settings-mailing-lists.component.html
@@ -3,7 +3,11 @@ <h1 class="page-title">{{'OPT_OUT_MAILING_LISTS.TITLE' | customTranslate | trans
   [placeholder]="'OPT_OUT_MAILING_LISTS.FILTER' | customTranslate | translate"
   (filter)="applyFilter($event)"></perun-web-apps-immediate-filter>
 <mat-accordion>
-  <mat-expansion-panel *ngFor="let vo of filteredVos" (opened)="getMailingLists(vo)">
+  <mat-expansion-panel
+    *ngFor="let vo of filteredVos"
+    (closed)="deselectVo()"
+    (afterExpand)="changeSelectedVo(vo)"
+    [expanded]="vo.shortName === selectedVo">
     <mat-expansion-panel-header>
       <mat-panel-title>
         {{vo.name}}
@@ -19,18 +23,20 @@ <h1 class="page-title">{{'OPT_OUT_MAILING_LISTS.TITLE' | customTranslate | trans
       <mat-accordion *ngIf="resources.length && !loading">
         <mat-expansion-panel
           *ngFor="let resource of resources"
-          (opened)="getOptOutAttribute(resource)">
+          (closed)="deselectResource()"
+          (afterExpand)="changeSelectedResource(resource)"
+          [expanded]="resource.name === selectedResource">
           <mat-expansion-panel-header>
             <mat-panel-title>
               {{resource.name}}
             </mat-panel-title>
           </mat-expansion-panel-header>
           <div class="row">
-            <p>{{'OPT_OUT_MAILING_LISTS.OPT_OUT_LABEL' | customTranslate | translate}}</p>
             <mat-checkbox
-              class="ml-3"
+              class="ml-3 mr-2"
               [checked]="optOutAttribute && optOutAttribute.value !== null"
               (change)="setOptOut()"></mat-checkbox>
+            <p>{{'OPT_OUT_MAILING_LISTS.OPT_OUT_LABEL' | customTranslate | translate}}</p>
           </div>
         </mat-expansion-panel>
       </mat-accordion>
diff --git a/apps/user-profile/src/app/pages/settings-page/settings-mailing-lists/settings-mailing-lists.component.ts b/apps/user-profile/src/app/pages/settings-page/settings-mailing-lists/settings-mailing-lists.component.ts
@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 import {
   Attribute,
   AttributesManagerService,
@@ -10,42 +11,109 @@ import {
   UsersManagerService,
   Vo,
 } from '@perun-web-apps/perun/openapi';
-import { StoreService } from '@perun-web-apps/perun/services';
+import { StoreService, NotificatorService } from '@perun-web-apps/perun/services';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'perun-web-apps-settings-mailing-lists',
   templateUrl: './settings-mailing-lists.component.html',
   styleUrls: ['./settings-mailing-lists.component.scss'],
 })
-export class SettingsMailingListsComponent implements OnInit {
+export class SettingsMailingListsComponent implements OnInit, OnDestroy {
   user: User;
   vos: Vo[] = [];
   resources: RichResource[] = [];
-  mailingLists: string[] = [];
   optOuts: InputSetMemberResourceAttribute[] = [];
   optOutAttribute: Attribute;
   index: number;
   filteredVos: Vo[] = [];
-  loading: boolean;
+  loading = true;
+  selectedVo: string = null;
+  selectedResource: string = null;
+  changeOptOut: string;
 
   constructor(
     private store: StoreService,
     private usersManagerService: UsersManagerService,
     private membersService: MembersManagerService,
     private resourcesManagerService: ResourcesManagerService,
-    private attributesManagerService: AttributesManagerService
+    private attributesManagerService: AttributesManagerService,
+    private route: ActivatedRoute,
+    private router: Router,
+    private notificator: NotificatorService,
+    private translate: TranslateService
   ) {}
 
+  ngOnDestroy(): void {
+    void this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams: { vo: null, resource: null },
+      replaceUrl: true,
+    });
+  }
+
   ngOnInit(): void {
-    this.user = this.store.getPerunPrincipal().user;
+    this.route.queryParams
+      .subscribe((params) => {
+        this.selectedVo = params['vo'] as string;
+        this.selectedResource = params['resource'] as string;
+        this.changeOptOut = params['action'] as string;
+
+        this.user = this.store.getPerunPrincipal().user;
+
+        this.usersManagerService.getVosWhereUserIsMember(this.user.id).subscribe((vos) => {
+          this.vos = vos;
+          this.filteredVos = vos;
+          if (this.selectedResource !== undefined) {
+            const vo = this.vos.find((obj) => obj.shortName === this.selectedVo);
+            if (vo) {
+              this.getMailingLists(vo);
+            }
+          } else if (this.selectedVo !== undefined) {
+            const vo = this.vos.find((obj) => obj.shortName === this.selectedVo);
+            if (vo) {
+              this.getMailingLists(vo);
+              this.changeSelectedVo(vo);
+            }
+          }
+        });
+      })
+      .unsubscribe();
+  }
+
+  changeSelectedResource(resource: RichResource): void {
+    if (this.selectedResource !== resource.name) {
+      this.getOptOutAttribute(resource);
+    }
+    if (this.changeOptOut) {
+      if (this.changeOptOut === 'subscribe') {
+        this.subscribe();
+      } else if (this.changeOptOut === 'unsubscribe') {
+        this.unsubscribe();
+      }
+      this.changeOptOut = null;
+    }
+    void this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams: { vo: this.selectedVo, resource: this.selectedResource, action: null },
+      queryParamsHandling: 'merge',
+    });
+  }
 
-    this.usersManagerService.getVosWhereUserIsMember(this.user.id).subscribe((vos) => {
-      this.vos = vos;
-      this.filteredVos = vos;
+  changeSelectedVo(vo: Vo): void {
+    if (this.selectedVo !== vo.shortName) {
+      this.getMailingLists(vo);
+      this.selectedResource = null;
+    }
+    void this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams: { vo: this.selectedVo, resource: this.selectedResource },
+      queryParamsHandling: 'merge',
     });
   }
 
   getMailingLists(vo: Vo): void {
+    this.selectedVo = vo.shortName;
     this.loading = true;
     this.resources = [];
     this.membersService.getMemberByUser(vo.id, this.user.id).subscribe((member) => {
@@ -80,6 +148,10 @@ export class SettingsMailingListsComponent implements OnInit {
                         attribute: attribute,
                       });
                       this.resources.push(resource);
+                      if (this.selectedResource === resource.name) {
+                        this.getOptOutAttribute(resource);
+                        this.changeSelectedResource(resource);
+                      }
                     }
                     this.loading = count !== 0;
                   });
@@ -90,24 +162,75 @@ export class SettingsMailingListsComponent implements OnInit {
   }
 
   getOptOutAttribute(resource: RichResource): void {
+    this.selectedResource = resource.name;
     this.index = this.resources.indexOf(resource);
     this.optOutAttribute = this.optOuts[this.index].attribute;
   }
 
+  unsubscribe(): void {
+    const originalState = this.optOuts[this.index].attribute.value;
+    this.optOuts[this.index].attribute.value = 'true' as unknown as object;
+    this.attributesManagerService.setMemberResourceAttribute(this.optOuts[this.index]).subscribe(
+      () => {
+        this.notificator.showSuccess(
+          (this.translate.instant('OPT_OUT_MAILING_LISTS.UNSUBSCRIBED') as string) +
+            this.selectedResource +
+            '.'
+        );
+      },
+      () => {
+        this.optOuts[this.index].attribute.value = originalState;
+      }
+    );
+  }
+  subscribe(): void {
+    const originalState = this.optOuts[this.index].attribute.value;
+    this.optOuts[this.index].attribute.value = null;
+    this.attributesManagerService.setMemberResourceAttribute(this.optOuts[this.index]).subscribe(
+      () => {
+        this.notificator.showSuccess(
+          (this.translate.instant('OPT_OUT_MAILING_LISTS.SUBSCRIBED') as string) +
+            this.selectedResource +
+            '.'
+        );
+      },
+      () => {
+        this.optOuts[this.index].attribute.value = originalState;
+      }
+    );
+  }
+
   setOptOut(): void {
-    this.optOuts[this.index].attribute.value = this.optOutAttribute.value
-      ? null
-      : ('true' as unknown as object);
-    this.attributesManagerService
-      .setMemberResourceAttribute(this.optOuts[this.index])
-      .subscribe(() => {
-        // console.log('done');
-      });
+    if (this.optOutAttribute.value) {
+      this.subscribe();
+    } else {
+      this.unsubscribe();
+    }
   }
 
   applyFilter(filter: string): void {
     this.filteredVos = this.vos.filter((vo) =>
       vo.name.toLowerCase().includes(filter.toLowerCase())
     );
   }
+
+  deselectVo(): void {
+    this.loading = true;
+    this.selectedVo = null;
+    this.selectedResource = null;
+    void this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams: { vo: this.selectedVo, resource: this.selectedResource },
+      queryParamsHandling: 'merge',
+    });
+  }
+
+  deselectResource(): void {
+    this.selectedResource = null;
+    void this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams: { vo: this.selectedVo, resource: this.selectedResource },
+      queryParamsHandling: 'merge',
+    });
+  }
 }
diff --git a/apps/user-profile/src/assets/i18n/cs.json b/apps/user-profile/src/assets/i18n/cs.json
@@ -154,8 +154,10 @@
   "OPT_OUT_MAILING_LISTS": {
     "TITLE": "Vyřazení ze seznamu adresátů",
     "FILTER": "Filtrovat seznamy adresátů dle jména organizace",
-    "OPT_OUT_LABEL": "Vyřadit mě z tohoto seznamu adresátů",
-    "NO_MAILING_LISTS_ALERT": "Nemáte žádné seznamy adresátů v této organizaci"
+    "OPT_OUT_LABEL": "Vyřadit mě z adresátů",
+    "NO_MAILING_LISTS_ALERT": "Nemáte žádné seznamy adresátů v této organizaci",
+    "SUBSCRIBED": "Už nejste vyřazen z adresátů  ",
+    "UNSUBSCRIBED": "Nyní jste vyřazen z adresátů  "
   },
   "AUTHENTICATION": {
     "TITLE": "Bezpečnostní obrázek",
diff --git a/apps/user-profile/src/assets/i18n/en.json b/apps/user-profile/src/assets/i18n/en.json
@@ -154,8 +154,10 @@
   "OPT_OUT_MAILING_LISTS": {
     "TITLE": "Opt out mailing lists",
     "FILTER": "Filter opt out mailing lists by organization's name",
-    "OPT_OUT_LABEL": "Exclude me from this mailing list",
-    "NO_MAILING_LISTS_ALERT": "You have no mailing lists assigned under this virtual organization"
+    "OPT_OUT_LABEL": "Exclude me from mailing list",
+    "NO_MAILING_LISTS_ALERT": "You have no mailing lists assigned under this virtual organization",
+    "SUBSCRIBED": "You are no longer excluded from the mailing list of ",
+    "UNSUBSCRIBED": "You are now excluded from the mailing list of "
   },
   "AUTHENTICATION": {
     "TITLE": "Security image",
