Feature/integration memberships

src/app/components/msel-contributors/msel-contributors.component.html

@@ -78,12 +78,62 @@
               @for (user of getMselUnitUsers(element.unitId); track user) {
               <div class="unit-detail">
                 <div class="user-name four-cell">{{ user.name }}</div>
-                @for (mselRole of getMselRolesToDisplay(); track mselRole) {
-                <div class="msel-role one-cell">
-                  <mat-checkbox [checked]="hasMselRole(user.id, mselRole)"
-                    (change)="toggleMselRole(user.id, mselRole, $event.checked)" (click)="$event.stopPropagation();"
-                    style="margin-right: 20px;" [disabled]="!canManageMsel() || isOwnOwnerRole(user.id, mselRole)"
-                    [matTooltip]="getRoleDescription(mselRole)">{{ mselRole }}</mat-checkbox>
+                <div class="role-select" (click)="$event.stopPropagation();">
+                  <mat-form-field>
+                    <mat-label>MSEL Roles</mat-label>
+                    <mat-select multiple [value]="getSelectedMselRoles(user.id)"
+                      (selectionChange)="setMselRoles(user.id, $event.value)"
+                      [disabled]="!canManageMsel()">
+                      @for (role of getMselRolesToDisplay(); track role) {
+                      <mat-option [value]="role" [disabled]="isOwnOwnerRole(user.id, role)"
+                        [matTooltip]="getRoleDescription(role)">{{ role }}</mat-option>
+                      }
+                    </mat-select>
+                  </mat-form-field>
+                </div>
+                @if (msel.useCite) {
+                <div class="role-select" (click)="$event.stopPropagation();">
+                  <mat-form-field>
+                    <mat-label>CITE Role</mat-label>
+                    <mat-select [value]="getCiteEvaluationRole(user.id)"
+                      (selectionChange)="setCiteEvaluationRole(user.id, $event.value)"
+                      [disabled]="!canManageMsel()">
+                      <mat-option [value]="null">&mdash;</mat-option>
+                      @for (role of citeEvaluationRoles; track role) {
+                      <mat-option [value]="role">{{ role }}</mat-option>
+                      }
+                    </mat-select>
+                  </mat-form-field>
+                </div>
+                }
+                @if (msel.useGallery) {
+                <div class="role-select" (click)="$event.stopPropagation();">
+                  <mat-form-field>
+                    <mat-label>Gallery Role</mat-label>
+                    <mat-select [value]="getGalleryExhibitRole(user.id)"
+                      (selectionChange)="setGalleryExhibitRole(user.id, $event.value)"
+                      [disabled]="!canManageMsel()">
+                      <mat-option [value]="null">&mdash;</mat-option>
+                      @for (role of galleryExhibitRoles; track role) {
+                      <mat-option [value]="role">{{ role }}</mat-option>
+                      }
+                    </mat-select>
+                  </mat-form-field>
+                </div>
+                }
+                @if (msel.useSteamfitter) {
+                <div class="role-select" (click)="$event.stopPropagation();">
+                  <mat-form-field>
+                    <mat-label>Steamfitter Role</mat-label>
+                    <mat-select [value]="getSteamfitterScenarioRole(user.id)"
+                      (selectionChange)="setSteamfitterScenarioRole(user.id, $event.value)"
+                      [disabled]="!canManageMsel()">
+                      <mat-option [value]="null">&mdash;</mat-option>
+                      @for (role of steamfitterScenarioRoles; track role) {
+                      <mat-option [value]="role">{{ role }}</mat-option>
+                      }
+                    </mat-select>
+                  </mat-form-field>
                 </div>
                 }
               </div>

src/app/components/msel-contributors/msel-contributors.component.scss

@@ -80,6 +80,12 @@ table {
   display: flex;
 }
 
+.role-select {
+  display: flex;
+  margin-right: 20px;
+  min-width: 180px;
+}
+
 .four-cell {
   flex: 4;
   min-width: 150px;

src/app/components/msel-contributors/msel-contributors.component.ts

@@ -68,6 +68,26 @@ export class MselContributorsComponent implements OnDestroy, OnInit {
     MselRole.Evaluator,
     MselRole.Viewer
   ];
+  citeEvaluationRoles: string[] = [
+    'Owner',
+    'Editor',
+    'Viewer',
+    'Facilitator',
+    'Advancer',
+    'Observer',
+    'Member'
+  ];
+  galleryExhibitRoles: string[] = [
+    'Manager',
+    'Observer',
+    'Member'
+  ];
+  steamfitterScenarioRoles: string[] = [
+    'Manager',
+    'Facilitator',
+    'Member',
+    'Observer'
+  ];
   isEditEnabled = false;
   userList: User[] = [];
   mselUnitList: MselUnit[] = [];
@@ -227,6 +247,62 @@ export class MselContributorsComponent implements OnDestroy, OnInit {
     }
   }
 
+  getSelectedMselRoles(userId: string): MselRole[] {
+    return this.userMselRoles
+      .filter(umr => umr.userId === userId && umr.mselId === this.msel.id)
+      .map(umr => umr.role);
+  }
+
+  setMselRoles(userId: string, newRoles: MselRole[]) {
+    const current = this.getSelectedMselRoles(userId);
+    const toAdd = newRoles.filter(r => !current.includes(r));
+    const toRemove = current.filter(r => !newRoles.includes(r));
+    toAdd.forEach(r => this.toggleMselRole(userId, r, true));
+    toRemove.forEach(r => this.toggleMselRole(userId, r, false));
+  }
+
+  getCiteEvaluationRole(userId: string): string | null {
+    const umr = this.userMselRoles.find(u =>
+      u.userId === userId && u.mselId === this.msel.id);
+    return umr?.citeEvaluationRole ?? null;
+  }
+
+  setCiteEvaluationRole(userId: string, role: string | null) {
+    this.userMselRoleDataService.setIntegrationRoles(
+      this.msel.id, userId,
+      role,
+      this.getGalleryExhibitRole(userId),
+      this.getSteamfitterScenarioRole(userId));
+  }
+
+  getGalleryExhibitRole(userId: string): string | null {
+    const umr = this.userMselRoles.find(u =>
+      u.userId === userId && u.mselId === this.msel.id);
+    return umr?.galleryExhibitRole ?? null;
+  }
+
+  setGalleryExhibitRole(userId: string, role: string | null) {
+    this.userMselRoleDataService.setIntegrationRoles(
+      this.msel.id, userId,
+      this.getCiteEvaluationRole(userId),
+      role,
+      this.getSteamfitterScenarioRole(userId));
+  }
+
+  getSteamfitterScenarioRole(userId: string): string | null {
+    const umr = this.userMselRoles.find(u =>
+      u.userId === userId && u.mselId === this.msel.id);
+    return umr?.steamfitterScenarioRole ?? null;
+  }
+
+  setSteamfitterScenarioRole(userId: string, role: string | null) {
+    this.userMselRoleDataService.setIntegrationRoles(
+      this.msel.id, userId,
+      this.getCiteEvaluationRole(userId),
+      this.getGalleryExhibitRole(userId),
+      role);
+  }
+
   saveMselUnit(mselUnit: MselUnit) {
     this.mselUnitDataService.updateMselUnit(mselUnit);
   }

src/app/data/user-msel-role/user-msel-role-data.service.ts

@@ -126,6 +126,18 @@ export class UserMselRoleDataService {
       });
   }
 
+  setIntegrationRoles(mselId: string, userId: string, citeEvaluationRole: string | null, galleryExhibitRole: string | null, steamfitterScenarioRole: string | null) {
+    this.userMselRoleService
+      .setUserMselIntegrationRoles(mselId, userId, { citeEvaluationRole, galleryExhibitRole, steamfitterScenarioRole })
+      .pipe(take(1))
+      .subscribe((updated) => {
+        updated.forEach(u => {
+          this.setAsDates(u);
+          this.userMselRoleStore.upsert(u.id, u);
+        });
+      });
+  }
+
   setActive(id: string) {
     this.userMselRoleStore.setActive(id);
   }

src/app/generated/blueprint.api/api/userMselRole.service.ts

@@ -170,6 +170,31 @@ export class UserMselRoleService extends BaseService {
         );
     }
 
+    /**
+     * Sets CITE Evaluation and Gallery Exhibit roles for a user on a MSEL
+     */
+    public setUserMselIntegrationRoles(mselId: string, userId: string, update: { citeEvaluationRole?: string | null; galleryExhibitRole?: string | null; steamfitterScenarioRole?: string | null }): Observable<Array<UserMselRole>> {
+        if (mselId === null || mselId === undefined) {
+            throw new Error('Required parameter mselId was null or undefined when calling setUserMselIntegrationRoles.');
+        }
+        if (userId === null || userId === undefined) {
+            throw new Error('Required parameter userId was null or undefined when calling setUserMselIntegrationRoles.');
+        }
+        let localVarHeaders = this.defaultHeaders;
+        localVarHeaders = this.configuration.addCredentialToHeaders('oauth2', 'Authorization', localVarHeaders, 'Bearer ');
+        localVarHeaders = localVarHeaders.set('Accept', 'application/json');
+        localVarHeaders = localVarHeaders.set('Content-Type', 'application/json');
+        const { basePath, withCredentials } = this.configuration;
+        const path = `/api/msels/${this.configuration.encodeParam({name: "mselId", value: mselId, in: "path", style: "simple", explode: false, dataType: "string", dataFormat: "uuid"})}/users/${this.configuration.encodeParam({name: "userId", value: userId, in: "path", style: "simple", explode: false, dataType: "string", dataFormat: "uuid"})}/integrationroles`;
+        return this.httpClient.request<Array<UserMselRole>>('put', `${basePath}${path}`, {
+            body: update,
+            responseType: 'json',
+            ...(withCredentials ? { withCredentials } : {}),
+            headers: localVarHeaders,
+            observe: 'body'
+        });
+    }
+
     /**
      * Gets a specific UserMselRole by id
      * Returns the UserMselRole with the id specified

src/app/generated/blueprint.api/model/userMselRole.ts

@@ -25,6 +25,9 @@ export interface UserMselRole {
     mselId?: string;
     userId?: string;
     role?: MselRole;
+    citeEvaluationRole?: string | null;
+    galleryExhibitRole?: string | null;
+    steamfitterScenarioRole?: string | null;
 }
 export namespace UserMselRole {
 }

src/app/services/signalr.service.ts

@@ -601,6 +601,13 @@ export class SignalRService implements OnDestroy {
       }
     );
 
+    this.hubConnection.on(
+      'UserMselRoleUpdated',
+      (userMselRole: UserMselRole) => {
+        this.userMselRoleDataService.updateStore(userMselRole);
+      }
+    );
+
     this.hubConnection.on('UserMselRoleDeleted', (id: string) => {
       this.userMselRoleDataService.deleteFromStore(id);
     });