Merge pull request #2275 from ORCID/add-limit-to-grouping-works

add limit to manually grouping works
ORCID · Jun 3, 2024 · dd3a1ee · dd3a1ee
2 parents b1ce952 + a7d40ee
commit dd3a1ee
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 11 deletions.
diff --git a/src/app/record/components/work-stack-group/work-stack-group.component.html b/src/app/record/components/work-stack-group/work-stack-group.component.html
@@ -76,14 +76,44 @@
             <span class="action" i18n="@@shared.actions"> Actions </span>
             <mat-icon class="large-material-icon">arrow_drop_down</mat-icon>
           </button>
-          <mat-menu #menu="matMenu">
+          <mat-menu #menu="matMenu" class="menu-buttons">
             <button
               mat-menu-item
               (click)="combine()"
-              [disabled]="selectedWorks.length === 0"
+              [disabled]="
+                selectedWorks.length === 0 || selectedWorks.length > 5
+              "
             >
-              <mat-icon>merge_type</mat-icon>
-              <span i18n="@@shared.combineWorks">Combine works</span>
+              <div>
+                <mat-icon *ngIf="selectedWorks.length <= 5"
+                  >merge_type</mat-icon
+                >
+                <mat-icon class="error-icon" *ngIf="selectedWorks.length > 5"
+                  >error_outline</mat-icon
+                >
+              </div>
+              <div>
+                <div
+                  [ngClass]="{
+                    'group-selected-works-label': selectedWorks.length > 5
+                  }"
+                >
+                  <ng-container i18n="@@shared.combineWorks"
+                    >Group selected works</ng-container
+                  >
+                  ({{ selectedWorks.length }})
+                </div>
+                <div
+                  class="orc-font-small-print"
+                  *ngIf="selectedWorks.length > 5"
+                >
+                  <ng-container i18n="@@works.fiveWorksMax"
+                    >5 works maximum,</ng-container
+                  >
+                  {{ selectedWorks.length }}
+                  <ng-container i18n="@@works.selected">selected</ng-container>
+                </div>
+              </div>
             </button>
             <button
               mat-menu-item
@@ -92,18 +122,18 @@
             >
               <mat-icon>file_download</mat-icon>
               <span>
-                <ng-container i18n="@@shared.exportWorks">
-                  Export works
-                </ng-container>
+                <ng-container i18n="@@shared.exportWorks"
+                  >Export works</ng-container
+                >
                 ({{ selectedWorks.length }})
               </span>
             </button>
             <button mat-menu-item (click)="exportAllWorks()">
               <mat-icon>file_download</mat-icon>
               <span>
-                <ng-container i18n="@@shared.exportAllWorks">
-                  Export all works
-                </ng-container>
+                <ng-container i18n="@@shared.exportAllWorks"
+                  >Export all works</ng-container
+                >
                 ({{ this.workGroup.totalGroups }})
               </span>
             </button>

diff --git a/src/app/record/components/work-stack-group/work-stack-group.component.scss b/src/app/record/components/work-stack-group/work-stack-group.component.scss
@@ -14,6 +14,15 @@ app-work-stack:last-child {
   margin-bottom: 0;
 }
 
+.orc-font-small-print {
+  line-height: 18px;
+}
+
+.group-selected-works-label {
+  line-height: 21px;
+  letter-spacing: 0.25px;
+}
+
 p.empty {
   margin-bottom: 0;
 }
@@ -75,7 +84,20 @@ button {
 }
 
 button.mat-menu-item {
+  & > div {
+    & > mat-icon {
+      display: flex;
+      align-items: center;
+    }
+    display: inline-block;
+    vertical-align: middle;
+  }
+
   max-width: 350px;
   white-space: normal;
-  height: auto !important;
+  height: 48px !important;
+  padding: 0 16px 0 16px;
+  margin-left: 0;
+  display: flex;
+  align-items: center;
 }
diff --git a/src/app/record/components/work-stack-group/work-stack-group.component.scss-theme.scss b/src/app/record/components/work-stack-group/work-stack-group.component.scss-theme.scss
@@ -16,6 +16,9 @@
       ) !important;
     }
   }
+  .error-icon {
+    color: rgba($state-warning-dark, 0.38) !important;
+  }
 }
 
 @include work-stack-group-theme($orcid-app-theme);
diff --git a/src/locale/properties/works/works.en.properties b/src/locale/properties/works/works.en.properties
@@ -225,3 +225,6 @@ works.lead=Lead
 works.coLead=Co-lead
 works.supportedBy=Supported by
 works.otherContribution=Other contribution
+works.selected=selected
+works.fiveWorksMax=5 works maximum,
+shared.combineWorks=Group selected works