migration2clarin7/license-dropdown-missing-labels-2 (#164)

* Trying to create own component for selecting the Clarin License. * The dropdown select is scrollable. * Added default option. * Added searching for the license selector. * Maybe finally I've done that lovely license selector. * Fixed lint error after solving the conflicts. * Refactoring and added docs. * Beautified license selector. --------- Co-authored-by: MilanMajchrák <[email protected]>
dataquest-dev · Jun 19, 2024 · 5781829 · 5781829
1 parent 0b549d3
commit 5781829
Show file tree

Hide file tree

Showing 8 changed files with 182 additions and 31 deletions.
diff --git a/src/app/submission/sections/clarin-license-resource/license-4-selector.model.ts b/src/app/submission/sections/clarin-license-resource/license-4-selector.model.ts
@@ -5,4 +5,5 @@ export class License4Selector {
   id: number;
   name: string;
   url: string;
+  licenseLabel: string;
 }
diff --git a/src/app/submission/sections/clarin-license-resource/section-license.component.html b/src/app/submission/sections/clarin-license-resource/section-license.component.html
@@ -1,3 +1,4 @@
+<span id="secret-selected-license-from-license-selector" style="display: none" #licenseSelection></span>
 <button id="secret-change-button" type="button" (click)="changeLicenseNameFromRef()" style="display: none">
 </button>
 <div class="container">
@@ -42,17 +43,37 @@
       </div>
     </div>
     <div class="col-md-12">
-      <div class="form-group">
-        <select #licenseSelection [(ngModel)]="selectedLicenseFromOptionId" (change)="selectLicense()"
-                id="aspect_submission_StepTransformer_field_license"
-                class="form-control" name="license" tabindex="-1" title="">
-          <option [value]="'0'" selected="selected">
-            {{'submission.sections.clarin-license.head.license-select-default-value' | translate}}
-          </option>
-          <option *ngFor="let license of licenses4Selector" [value]="license.id" id="license_option">
-            {{license.name}}
-          </option>
-        </select>
+      <div class="form-group mb-0">
+          <div class="input-group">
+            <input type="button"
+                   class="custom-select clarin-select-input btn text-left"
+                   id="aspect_submission_StepTransformer_field_license"
+                   data-toggle="dropdown"
+                   aria-haspopup="true"
+                   aria-expanded="false"
+                   [value]="this.selectedLicenseName"/>
+            <ul class="dropdown-menu scrollable-menu"
+                aria-labelledby="aspect_submission_StepTransformer_field_license">
+                <div class="form-group has-search mb-0">
+                  <span class="fa fa-search form-control-feedback"></span>
+                  <input type="search"
+                         (input)="searchInClarinLicenses($event)"
+                         class="form-control border-top-0 border-left-0 border-right-0 no-radius shadow-none"
+                         placeholder="Search">
+                </div>
+              <li class="dropdown-item clarin-dropdown-item pt-2" value="0" (click)="selectLicense(0)">
+                <b>{{'submission.sections.clarin-license.head.license-select-default-value' | translate}}</b>
+              </li>
+              <li class="dropdown-item clarin-dropdown-item pt-2"
+                  *ngFor="let license of filteredLicenses4Selector"
+                  (click)="selectLicense(license.id)"
+                  [value]="license.id"
+                  id="license_option">
+                <span [class]="'label label-' + license.licenseLabel">{{license.licenseLabel}}</span>
+                <b>{{license.name}}</b>
+              </li>
+            </ul>
+          </div>
       </div>
     </div>
     <div class="col-md-12">

diff --git a/src/app/submission/sections/clarin-license-resource/section-license.component.scss b/src/app/submission/sections/clarin-license-resource/section-license.component.scss
@@ -36,3 +36,73 @@
   box-shadow: none;
   background-image: none;
 }
+
+.label {
+  display: inline;
+  padding: 0.25em 0.6em 0.2em;
+  font-size: 75%;
+  font-weight: bold;
+  line-height: 1;
+  color: #fff;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: 0.25em;
+  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+}
+
+.label-PUB {
+  background-color: #5cb811 !important;
+}
+
+.label-ACA, .label-PDT {
+  background-color: #ffab23;
+}
+
+.label-RES {
+  background-color: #c62d1f;
+}
+
+.clarin-select-input {
+  margin-right: 0;
+  border-bottom-right-radius: 0.25rem !important;
+  border-top-right-radius: 0.25rem !important;
+  align-content: start !important;
+  align-items: start !important;
+  width: 100%;
+}
+
+.clarin-search-input-dropdown {
+  border-left: 0;
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
+
+.clarin-dropdown-item {
+  cursor: pointer;
+}
+
+.scrollable-menu {
+  height: auto;
+  max-height: 300px;
+  overflow-x: hidden;
+  padding-top: 0;
+  border-top: 0;
+  width: 100%;
+}
+
+.has-search .form-control {
+  padding-left: 2.375rem;
+}
+
+.has-search .form-control-feedback {
+  position: absolute;
+  z-index: 2;
+  display: block;
+  width: 2.375rem;
+  height: 2.375rem;
+  line-height: 2.375rem;
+  text-align: center;
+  pointer-events: none;
+  color: #aaa;
+}
diff --git a/src/app/submission/sections/clarin-license-resource/section-license.component.ts b/src/app/submission/sections/clarin-license-resource/section-license.component.ts
@@ -86,6 +86,16 @@ export class SubmissionSectionClarinLicenseComponent extends SectionModelCompone
    */
   licenses4Selector: License4Selector[] = [];
 
+  /**
+   * Filtered licenses4Selector - after searching.
+   */
+  filteredLicenses4Selector: License4Selector[] = [];
+
+  /**
+   * `Select a License` placeholder for the license dropdown button.
+   */
+  licenseSelectorDefaultValue = '';
+
   /**
    * The form id
    * @type {string}
@@ -154,6 +164,11 @@ export class SubmissionSectionClarinLicenseComponent extends SectionModelCompone
   }
 
   async ngOnInit() {
+    // Set default value for the license selector.
+    this.licenseSelectorDefaultValue =
+      this.translateService.instant('submission.sections.clarin-license.head.license-select-default-value');
+    this.selectedLicenseName = this.licenseSelectorDefaultValue;
+
     // initialize licenses for license selector
     // It must be before `super.ngOnInit();` because that method loads the metadata from the Item and compare
     // items license with licenses4Selector.
@@ -239,13 +254,9 @@ export class SubmissionSectionClarinLicenseComponent extends SectionModelCompone
   /**
    * Select license by the license Id.
    */
-  async selectLicense() {
-    if (isEmpty(this.selectedLicenseFromOptionId)) {
-      this.selectedLicenseName = '';
-    } else {
-      this.selectedLicenseName = this.getLicenseNameById(this.selectedLicenseFromOptionId);
-    }
-
+  async selectLicense(licenseId) {
+    this.selectedLicenseFromOptionId = licenseId;
+    this.selectedLicenseName = this.getLicenseNameById(this.selectedLicenseFromOptionId);
     await this.maintainLicenseSelection();
   }
 
@@ -348,7 +359,7 @@ export class SubmissionSectionClarinLicenseComponent extends SectionModelCompone
    */
   private async selectLicenseOnInit(licenseName) {
     if (isEmpty(licenseName)) {
-      this.selectedLicenseName = '';
+      this.selectedLicenseName = this.licenseSelectorDefaultValue;
     } else {
       this.selectedLicenseName = licenseName;
     }
@@ -422,10 +433,10 @@ export class SubmissionSectionClarinLicenseComponent extends SectionModelCompone
   /**
    * From the license object list get whole object by the Id.
    */
-  private getLicenseNameById(selectionLicenseId) {
-    let licenseName = '';
+  protected getLicenseNameById(selectionLicenseId) {
+    let licenseName = this.licenseSelectorDefaultValue;
     this.licenses4Selector.forEach(license4Selector => {
-      if (String(license4Selector.id) === selectionLicenseId) {
+      if (license4Selector.id === selectionLicenseId) {
         licenseName = license4Selector.name;
         return;
       }
@@ -461,9 +472,15 @@ export class SubmissionSectionClarinLicenseComponent extends SectionModelCompone
   private getLicenseNameFromRef() {
     let selectedLicenseId: string;
     if (isUndefined(this.licenseSelectionRef)) {
-      return;
+      return '';
     }
+
+    // Get ID of selected license from the license selector.
     selectedLicenseId = this.licenseSelectionRef.nativeElement.value;
+    if (isUndefined(selectedLicenseId)) {
+      return '';
+    }
+
     let selectedLicense = false;
     selectedLicense = selectedLicenseId.trim().length !== 0;
 
@@ -473,12 +490,19 @@ export class SubmissionSectionClarinLicenseComponent extends SectionModelCompone
         return;
       }
       let licenseLabel: string;
-      const options = this.licenseSelectionRef.nativeElement.children;
-      for (const item of options) {
-        if (item.value === selectedLicenseId) {
-          licenseLabel = item.label;
-        }
-      }
+
+      // Compare the ID of the selected license with loaded licenses from BE.
+      this.licenses4Selector.forEach(license4Selector => {
+          if (license4Selector.id !== Number(selectedLicenseId)) {
+            return;
+          }
+          licenseLabel = license4Selector.name;
+        });
+
+      // Reset selected value from license selector. Because if the user had chosen some clarin license,
+      // and then he select unsupported license the id of previous selected value is still remembered in the helper span
+      // with the id `secret-selected-license-from-license-selector`.
+      this.licenseSelectionRef.nativeElement.value = '';
       return licenseLabel;
     }
     return '';
@@ -488,16 +512,33 @@ export class SubmissionSectionClarinLicenseComponent extends SectionModelCompone
    * Map licenses from `license-definitions.json` to the object list.
    */
   private async loadLicenses4Selector(): Promise<any> {
+    // Show PUB licenses as first.
+    const pubLicense4SelectorArray = [];
+    // Then show ACA and RES licenses.
+    const acaResLicense4SelectorArray = [];
+
     await this.loadAllClarinLicenses()
       .then((clarinLicenseList: ClarinLicense[]) => {
         clarinLicenseList?.forEach(clarinLicense => {
           const license4Selector = new License4Selector();
           license4Selector.id = clarinLicense.id;
           license4Selector.name = clarinLicense.name;
           license4Selector.url = clarinLicense.definition;
-          this.licenses4Selector.push(license4Selector);
+          license4Selector.licenseLabel = clarinLicense?.clarinLicenseLabel?.label;
+          if (license4Selector.licenseLabel === 'PUB') {
+            pubLicense4SelectorArray.push(license4Selector);
+          } else {
+            acaResLicense4SelectorArray.push(license4Selector);
+          }
         });
       });
+
+    // Sort acaResLicense4SelectorArray by the license label (ACA, RES)
+    acaResLicense4SelectorArray.sort((a, b) => a.licenseLabel.localeCompare(b.licenseLabel));
+
+    // Concat two array into one.
+    this.licenses4Selector = pubLicense4SelectorArray.concat(acaResLicense4SelectorArray);
+    this.filteredLicenses4Selector = this.licenses4Selector;
   }
 
   private loadAllClarinLicenses(): Promise<any> {
@@ -509,4 +550,9 @@ export class SubmissionSectionClarinLicenseComponent extends SectionModelCompone
       .pipe(getFirstSucceededRemoteListPayload())
       .toPromise();
   }
+
+  public searchInClarinLicenses(event) {
+    this.filteredLicenses4Selector = this.licenses4Selector
+      .filter(license4Selector => license4Selector.name.toLowerCase().includes(event.target.value.toLowerCase()));
+  }
 }
diff --git a/src/license-selector-creation.js b/src/license-selector-creation.js
@@ -60,7 +60,7 @@ $(function() {
     for (var i = 0; i < allLic.length; i++) {
       if (allLic[i].href == selectedLic) {
         var id = allLic[i].name.replace("license_", "");
-        document.getElementById('aspect_submission_StepTransformer_field_license').value = id;
+        document.getElementById('secret-selected-license-from-license-selector').value = id;
         $("#aspect_submission_StepTransformer_item_license-not-supported-message").addClass("hidden");
         document.getElementById('secret-change-button').click();
         return;

diff --git a/src/styles/_clarin-styles.scss b/src/styles/_clarin-styles.scss
@@ -0,0 +1,11 @@
+.label-PUB {
+  background-color: #5cb811;
+}
+
+.label-ACA, .label-PDT {
+  background-color: #ffab23;
+}
+
+.label-RES {
+  background-color: #c62d1f;
+}
diff --git a/src/themes/custom/styles/_global-styles.scss b/src/themes/custom/styles/_global-styles.scss
@@ -2,3 +2,4 @@
 
 // imports the base global style
 @import '../../../styles/_global-styles.scss';
+@import '../../../styles/_clarin-styles.scss';
diff --git a/src/themes/dspace/styles/_global-styles.scss b/src/themes/dspace/styles/_global-styles.scss
@@ -2,6 +2,7 @@
 
 // imports the base global style
 @import '../../../styles/_global-styles.scss';
+@import '../../../styles/_clarin-styles.scss';
 
 .facet-filter, .setting-option {
   background-color: var(--bs-light);
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,3 +2,4 @@

		// imports the base global style
		@import '../../../styles/_global-styles.scss';
		@import '../../../styles/_clarin-styles.scss';