Merge pull request #2434 from ORCID/lmendoza/deep-worktype-menu

Lmendoza/deep worktype menu
ORCID · Jan 3, 2025 · b44256f · b44256f
2 parents 4ece34e + 83c6972
commit b44256f
Show file tree

Hide file tree

Showing 18 changed files with 2,411 additions and 1,379 deletions.
diff --git a/src/app/cdk/deep-select-input/deep-select-input.module.ts b/src/app/cdk/deep-select-input/deep-select-input.module.ts
@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { DeepSelectInputComponent } from './deep-select-input/deep-select-input.component'
+import { MatLegacyFormFieldControl } from '@angular/material/legacy-form-field'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { MatLegacySelectModule } from '@angular/material/legacy-select'
+import { SharedModule } from 'src/app/shared/shared.module'
+import {
+  MatLegacyMenu,
+  MatLegacyMenuModule,
+} from '@angular/material/legacy-menu'
+import { MatMenuModule } from '@angular/material/menu'
+import { MatButtonModule } from '@angular/material/button'
+import { MatLegacyInputModule } from '@angular/material/legacy-input'
+
+@NgModule({
+  declarations: [DeepSelectInputComponent],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatLegacySelectModule,
+    SharedModule,
+    MatLegacyMenuModule,
+    MatLegacyInputModule,
+  ],
+  exports: [DeepSelectInputComponent],
+})
+export class DeepSelectInputModule {}
diff --git a/src/app/cdk/deep-select-input/deep-select-input/deep-select-input.component.html b/src/app/cdk/deep-select-input/deep-select-input/deep-select-input.component.html
@@ -0,0 +1,131 @@
+<div class="menu-container" [formGroup]="formgroup">
+  <mat-form-field
+    appearance="outline"
+    class="mat-form-field-min input-container"
+    (click)="clickHoverMenuTrigger.openMenu()"
+  >
+    <input
+      type="text"
+      #clickHoverMenuTrigger="matMenuTrigger"
+      [matMenuTriggerFor]="matMenu"
+      (keydown)="onSpaceBar($event)"
+      readonly
+      matInput
+      [errorStateMatcher]="getMatcher()"
+      [attr.placeholder]="selectItemLabel"
+      formControlName="formControl"
+      [value]="selectedItem?.label"
+    />
+    <mat-error *ngIf="invalid" i18n="@@works.selectAWorkType">
+      Select a work type
+    </mat-error>
+  </mat-form-field>
+
+  <mat-menu #matMenu="matMenu" class="this-class" (closed)="onMenuClose()">
+    <div class="menu-wrapper">
+      <ng-container *ngFor="let item of menu">
+        <ng-container *ngIf="!item.divider">
+          <label class="orc-font-body strong" *ngIf="item.isNotSelectableLabel">
+            {{ item.label }}</label
+          >
+          <button
+            mat-menu-item
+            *ngIf="!item.isNotSelectableLabel && !item.content"
+            (click)="onItemSelect(item)"
+            class="orc-font-body-small"
+          >
+            {{ item.label }}
+          </button>
+          <!-- DESKTOP VERSION USES SUBMENUS -->
+          <ng-container *ngIf="!isMobile">
+            <div class="sub-menu-container" *ngIf="item.content?.length">
+              <button
+                mat-menu-item
+                *ngIf="!item.isNotSelectableLabel"
+                [matMenuTriggerFor]="subMenuRef"
+                class="mat-button-wrap-text"
+              >
+                <div class="parentContainer">
+                  <strong class="orc-font-body">
+                    {{ item.label }}
+                  </strong>
+                  <p class="orc-font-small-print">
+                    {{ item.description }}
+                  </p>
+                </div>
+              </button>
+              <!-- Create a mat menu using the label as an identifier -->
+              <mat-menu #subMenuRef="matMenu">
+                <ng-container *ngFor="let subItem of item.content">
+                  <ng-container *ngIf="!subItem.divider">
+                    <button
+                      mat-menu-item
+                      (click)="onItemSelect(subItem)"
+                      [ngClass]="subItem.secondaryItem ? 'secondaryItem' : ''"
+                      class="mat-button-wrap-text"
+                    >
+                      {{ subItem.label }}
+
+                      <p
+                        class="orc-font-small-print"
+                        *ngIf="subItem.description"
+                      >
+                        {{ subItem.description }}
+                      </p>
+                    </button>
+                  </ng-container>
+                  <ng-container *ngIf="subItem.divider">
+                    <mat-divider></mat-divider>
+                  </ng-container>
+                </ng-container>
+              </mat-menu>
+            </div>
+          </ng-container>
+
+          <!-- MOBILE VERSIONS DISPLAY ALL ITEMS -->
+          <ng-container *ngIf="isMobile">
+            <div class="sub-menu-container mobile" *ngIf="item.content?.length">
+              <mat-divider></mat-divider>
+              <div
+                *ngIf="!item.isNotSelectableLabel"
+                class="not-selectable-label"
+              >
+                <div class="parentContainer">
+                  <strong class="orc-font-body">
+                    {{ item.label }}
+                  </strong>
+                  <p class="orc-font-small-print">
+                    {{ item.description }}
+                  </p>
+                </div>
+              </div>
+              <!-- Create a mat menu using the label as an identifier -->
+              <ng-container *ngFor="let subItem of item.content">
+                <ng-container *ngIf="!subItem.divider">
+                  <button
+                    mat-menu-item
+                    (click)="onItemSelect(subItem)"
+                    [ngClass]="subItem.secondaryItem ? 'secondaryItem' : ''"
+                    class="mobile mat-button-wrap-text"
+                  >
+                    {{ subItem.label }}
+
+                    <p class="orc-font-small-print" *ngIf="subItem.description">
+                      {{ subItem.description }}
+                    </p>
+                  </button>
+                </ng-container>
+              </ng-container>
+            </div>
+          </ng-container>
+          <ng-container *ngIf="item.divider">
+            <mat-divider></mat-divider>
+          </ng-container>
+        </ng-container>
+        <ng-container *ngIf="item.divider">
+          <mat-divider></mat-divider>
+        </ng-container>
+      </ng-container>
+    </div>
+  </mat-menu>
+</div>
diff --git a/src/app/cdk/deep-select-input/deep-select-input/deep-select-input.component.scss b/src/app/cdk/deep-select-input/deep-select-input/deep-select-input.component.scss
@@ -0,0 +1,104 @@
+:host {
+  display: block;
+  width: 100%;
+}
+.menu-container,
+.mat-form-field,
+input {
+  width: 100%;
+}
+
+.strong {
+  font-weight: 700;
+}
+.menu-wrapper {
+  button {
+    padding: 16px;
+    line-height: 1;
+    max-width: 400px;
+  }
+
+  label {
+    padding-left: 16px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+  }
+  align-items: center;
+}
+
+.sub-menu-container {
+  button {
+    height: 100%;
+    width: 100%;
+    padding: 16px !important;
+    .parentContainer {
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+      line-height: 1;
+      gap: 4px;
+      white-space: normal;
+      strong,
+      p {
+        margin: 0;
+      }
+      strong {
+        padding-top: 16px;
+        padding-bottom: 4px;
+      }
+      p {
+        padding-bottom: 16px;
+      }
+      padding-right: 24px;
+    }
+  }
+  div {
+    height: 100%;
+    .parentContainer {
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+      line-height: 1;
+      gap: 4px;
+      white-space: normal;
+      strong,
+      p {
+        margin: 0;
+      }
+      strong {
+        padding-top: 16px;
+        padding-bottom: 4px;
+      }
+      p {
+        padding-bottom: 16px;
+      }
+      padding-right: 24px;
+    }
+  }
+}
+
+button.mat-button-wrap-text.secondaryItem {
+  font-style: italic;
+  height: 100%;
+  padding: 16px 16px !important;
+  p {
+    margin: 0;
+    padding-top: 4px;
+  }
+  .orc-font-small-print {
+    font-style: normal;
+  }
+}
+
+.orc-font-small-print {
+  line-height: 18px;
+}
+
+button.mat-button-wrap-text:not(.mobile):not(.secondaryItem) {
+  padding: 0px 16px !important;
+}
+
+.not-selectable-label {
+  padding: 0 16px;
+}
diff --git a/src/app/cdk/deep-select-input/deep-select-input/deep-select-input.component.spec.ts b/src/app/cdk/deep-select-input/deep-select-input/deep-select-input.component.spec.ts
@@ -0,0 +1,45 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { DeepSelectInputComponent } from './deep-select-input.component'
+import { PlatformInfoService } from '../../platform-info'
+import { FormBuilder } from '@angular/forms'
+import { get } from 'lodash'
+import { of } from 'rxjs'
+import { MatMenuModule } from '@angular/material/menu'
+
+describe('DeepSelectInputComponent', () => {
+  let component: DeepSelectInputComponent
+  let fixture: ComponentFixture<DeepSelectInputComponent>
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [DeepSelectInputComponent],
+      providers: [
+        {
+          provide: PlatformInfoService,
+          useValue: {
+            get: () => of({}),
+          },
+        },
+        {
+          provide: FormBuilder,
+          useValue: {
+            group: () => ({
+              get: () => ({
+                valueChanges: of(''),
+              }),
+            }),
+          },
+        },
+      ],
+      imports: [MatMenuModule],
+    })
+    fixture = TestBed.createComponent(DeepSelectInputComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})