Merged in task/dspace-cris-2023_02_x/DSC-1872 (pull request DSpace#2155)

Task/dspace cris 2023 02 x/DSC-1872

Approved-by: Andrea Barbasso

package.json

@@ -145,7 +145,6 @@
     "ng2-nouislider": "^2.0.0",
     "ngx-infinite-scroll": "^15.0.0",
     "ngx-pagination": "6.0.3",
-    "ngx-ui-switch": "^14.0.3",
     "nouislider": "^15.7.1",
     "pem": "1.14.7",
     "prop-types": "^15.8.1",

src/app/admin/admin-import-batch-page/batch-import-page.component.html

@@ -20,11 +20,11 @@ <h2 id="header">{{'admin.batch-import.page.header' | translate}}</h2>
     </small>
   </div>
 
-  <ui-switch color="#ebebeb"
-             [checkedLabel]="'admin.metadata-import.page.toggle.upload' | translate"
-             [uncheckedLabel]="'admin.metadata-import.page.toggle.url' | translate"
-             [checked]="isUpload"
-             (change)="toggleUpload()" ></ui-switch>
+  <ds-switch
+    [options]="switchOptions"
+    [selectedValue]="isUpload ? 'upload' : 'url'"
+    (selectedValueChange)="toggleUpload()">
+  </ds-switch>
   <small class="form-text text-muted">
     {{'admin.batch-import.page.toggle.help' | translate}}
   </small>

src/app/admin/admin-import-batch-page/batch-import-page.component.ts

@@ -17,6 +17,7 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { take } from 'rxjs/operators';
 import { DSpaceObject } from '../../core/shared/dspace-object.model';
 import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
+import { SwitchColor, SwitchOption } from '../../shared/switch/switch.component';
 
 @Component({
   selector: 'ds-batch-import-page',
@@ -48,6 +49,14 @@ export class BatchImportPageComponent {
    */
   fileURL: string;
 
+  /**
+   * The custom options for the 'ds-switch' component
+   */
+  switchOptions: SwitchOption[] = [
+    { value: 'upload', icon: 'fa fa-upload', label: 'admin.metadata-import.page.toggle.upload', iconColor: SwitchColor.Primary },
+    { value: 'url', icon: 'fa fa-link', label: 'admin.metadata-import.page.toggle.url', iconColor: SwitchColor.Primary },
+  ];
+
   public constructor(private location: Location,
                      protected translate: TranslateService,
                      protected notificationsService: NotificationsService,
@@ -154,4 +163,5 @@ export class BatchImportPageComponent {
   toggleUpload() {
     this.isUpload = !this.isUpload;
   }
+
 }

src/app/admin/admin.module.ts

@@ -12,7 +12,6 @@ import { ExpandableAdminSidebarSectionComponent } from './admin-sidebar/expandab
 import { AdminEditUserAgreementComponent } from './admin-edit-user-agreement/admin-edit-user-agreement.component';
 import { EditCmsMetadataComponent } from './edit-cms-metadata/edit-cms-metadata.component';
 import { BatchImportPageComponent } from './admin-import-batch-page/batch-import-page.component';
-import { UiSwitchModule } from 'ngx-ui-switch';
 import { UploadModule } from '../shared/upload/upload.module';
 
 const ENTRY_COMPONENTS = [
@@ -30,7 +29,6 @@ const ENTRY_COMPONENTS = [
     AdminSearchModule.withEntryComponents(),
     AdminWorkflowModuleModule.withEntryComponents(),
     SharedModule,
-    UiSwitchModule,
     UploadModule,
   ],
   declarations: [

src/app/external-login-review-account-info-page/external-login-review-account-info-page.module.ts

@@ -8,7 +8,6 @@ import {
   ThemedExternalLoginReviewAccountInfoPageComponent
 } from './themed-external-login-review-account-info-page.component';
 import { ReviewAccountInfoComponent } from './review-account-info/review-account-info.component';
-import { UiSwitchModule } from 'ngx-ui-switch';
 import { SharedModule } from '../shared/shared.module';
 import { ExternalLoginModule } from '../external-log-in/external-login.module';
 
@@ -23,7 +22,6 @@ import { ExternalLoginModule } from '../external-log-in/external-login.module';
     CommonModule,
     ExternalLoginReviewAccountInfoRoutingModule,
     SharedModule,
-    UiSwitchModule,
     ExternalLoginModule
   ]
 })

src/app/external-login-review-account-info-page/review-account-info/review-account-info.component.html

@@ -40,13 +40,12 @@ <h2> {{'external-login-validation.review-account-info.header' | translate}}</h2>
           </span>
         </td>
         <td>
-          <ui-switch
+          <ds-switch
             *ngIf="(data.receivedValue !== data.currentValue) && data.currentValue"
-            [checkedLabel]="'on-label' | translate"
-            [uncheckedLabel]="'off-label' | translate"
-            [checked]="data.overrideValue"
-            (change)="onOverrideChange($event, data.identifier)"
-          ></ui-switch>
+            [options]="switchOptions"
+            [selectedValue]="data.overrideValue"
+            (selectedValueChange)="onOverrideChange($event, data.identifier)">
+          </ds-switch>
         </td>
       </tr>
     </tbody>

src/app/external-login-review-account-info-page/review-account-info/review-account-info.component.spec.ts

@@ -190,7 +190,7 @@ describe('ReviewAccountInfoComponent', () => {
     const firstDataRow = dataRows[1];
     const firstDataLabel: HTMLElement = firstDataRow.querySelector('th');
     const firstDataReceivedValue: HTMLElement = firstDataRow.querySelectorAll('td')[0];
-    const firstDataOverrideSwitch: HTMLElement = firstDataRow.querySelector('ui-switch');
+    const firstDataOverrideSwitch: HTMLElement = firstDataRow.querySelector('ds-switch');
     expect(firstDataLabel.textContent.trim()).toBe('Lastname');
     expect(firstDataReceivedValue.textContent.trim()).toBe('Doe');
     expect(firstDataOverrideSwitch).toBeNull();

src/app/external-login-review-account-info-page/review-account-info/review-account-info.component.ts

@@ -15,6 +15,7 @@ import { HardRedirectService } from '../../core/services/hard-redirect.service';
 import { AuthRegistrationType } from '../../core/auth/models/auth.registration-type';
 import { ExternalLoginService } from '../../external-log-in/services/external-login.service';
 import { NativeWindowRef, NativeWindowService } from '../../core/services/window.service';
+import { SwitchColor, SwitchOption } from '../../shared/switch/switch.component';
 
 export interface ReviewAccountInfoData {
   label: string;
@@ -53,6 +54,14 @@ export class ReviewAccountInfoComponent implements OnInit, OnDestroy {
    */
   subs: Subscription[] = [];
 
+  /**
+   * The custom options for the 'ds-switch' component
+   */
+  switchOptions: SwitchOption[] = [
+    { value: true, labelColor: SwitchColor.Success, backgroundColor: SwitchColor.Success ,label: 'on-label' },
+    { value: false, label: 'off-label' },
+  ];
+
   constructor(
     @Inject(NativeWindowService) protected _window: NativeWindowRef,
     private ePersonService: EPersonDataService,

src/app/profile-page/profile-page-researcher-form/profile-page-researcher-form.component.html

@@ -3,10 +3,11 @@
     <p>{{'researcher.profile.associated' | translate}}</p>
     <p class="align-items-center researcher-profile-switch" >
       <span class="mr-3">{{'researcher.profile.status' | translate}}</span>
-      <ui-switch [checkedLabel]="'researcher.profile.public.visibility' | translate"
-                 [uncheckedLabel]="'researcher.profile.private.visibility' | translate"
-                 [checked]="researcherProfile.visible"
-                 (change)="toggleProfileVisibility(researcherProfile)" ></ui-switch>
+      <ds-switch
+        [options]="switchOptions"
+        [selectedValue]="researcherProfile.visible ? 'public' : 'private'"
+        (selectedValueChange)="toggleProfileVisibility(researcherProfile)">
+      </ds-switch>
     </p>
   </div>
   <div *ngIf="!researcherProfile">

src/app/profile-page/profile-page-researcher-form/profile-page-researcher-form.component.ts

@@ -19,6 +19,7 @@ import { isNotEmpty } from '../../shared/empty.util';
 import { followLink } from '../../shared/utils/follow-link-config.model';
 import { ConfirmationModalComponent } from '../../shared/confirmation-modal/confirmation-modal.component';
 import { NoContent } from '../../core/shared/NoContent.model';
+import { SwitchColor, SwitchOption } from '../../shared/switch/switch.component';
 
 @Component({
   selector: 'ds-profile-page-researcher-form',
@@ -56,6 +57,14 @@ export class ProfilePageResearcherFormComponent implements OnInit {
    */
   researcherProfileItemId: string;
 
+  /**
+   * The custom options for the 'ds-switch' component
+   */
+  switchOptions: SwitchOption[] = [
+    { value: 'public', icon: 'fa fa-globe', labelColor: SwitchColor.Success, label: 'researcher.profile.public.visibility', iconColor: SwitchColor.Success },
+    { value: 'private', icon: 'fa fa-lock', labelColor: SwitchColor.Danger, label: 'researcher.profile.private.visibility', iconColor: SwitchColor.Danger },
+  ];
+
   constructor(protected researcherProfileService: ResearcherProfileDataService,
               protected profileClaimService: ProfileClaimService,
               protected translationService: TranslateService,

src/app/profile-page/profile-page.module.ts

@@ -10,7 +10,6 @@ import {
 } from './profile-page-researcher-form/profile-page-researcher-form.component';
 import { ThemedProfilePageComponent } from './themed-profile-page.component';
 import { FormModule } from '../shared/form/form.module';
-import { UiSwitchModule } from 'ngx-ui-switch';
 import { ProfileClaimItemModalComponent } from './profile-claim-item-modal/profile-claim-item-modal.component';
 import { OpenaireModule } from '../openaire/openaire.module';
 import { ProfilePageAccessTokenComponent } from './profile-page-access-token/profile-page-access-token.component';
@@ -21,7 +20,6 @@ import { ProfilePageAccessTokenComponent } from './profile-page-access-token/pro
     CommonModule,
     SharedModule,
     FormModule,
-    UiSwitchModule,
     OpenaireModule
   ],
   exports: [

src/app/shared/access-control-form-container/access-control-form-container.component.html

@@ -15,10 +15,11 @@
               <h4 class="mb-0 mr-4">
                 {{ 'access-control-item-header-toggle' | translate }}
               </h4>
-              <ui-switch
-                [(ngModel)]="state.item.toggleStatus"
-                (ngModelChange)="handleStatusChange('item', $event)">
-              </ui-switch>
+              <ds-switch
+                [options]="switchOptions"
+                [(selectedValue)] = "state.item.toggleStatus"
+                (selectedValueChange) = "handleStatusChange('item', $event)">
+              </ds-switch>
             </div>
 
             <div class="row mt-3">
@@ -68,10 +69,11 @@ <h5 class="mt-3">{{'access-control-access-conditions' | translate}}</h5>
               <h4 class="mb-0 mr-4">
                 {{'access-control-bitstream-header-toggle' | translate}}
               </h4>
-              <ui-switch
-                [(ngModel)]="state.bitstream.toggleStatus"
-                (ngModelChange)="handleStatusChange('bitstream', $event)">
-              </ui-switch>
+              <ds-switch
+                [options]="switchOptions"
+                [(selectedValue)] = "state.bitstream.toggleStatus"
+                (selectedValueChange) = "handleStatusChange('bitstream', $event)">
+              </ds-switch>
             </div>
 
             <div *ngIf="showLimitToSpecificBitstreams" class="row mt-3">

src/app/shared/access-control-form-container/access-control-form-container.component.spec.ts

@@ -12,7 +12,6 @@ import {CommonModule} from '@angular/common';
 import {SharedBrowseByModule} from '../browse-by/shared-browse-by.module';
 import {TranslateModule} from '@ngx-translate/core';
 import {FormsModule} from '@angular/forms';
-import {UiSwitchModule} from 'ngx-ui-switch';
 import {
   ITEM_ACCESS_CONTROL_SELECT_BITSTREAMS_LIST_ID
 } from './item-access-control-select-bitstreams-modal/item-access-control-select-bitstreams-modal.component';
@@ -60,7 +59,6 @@ describe('AccessControlFormContainerComponent', () => {
         AccessControlFormModule,
         TranslateModule.forRoot(),
         NgbDatepickerModule,
-        UiSwitchModule
       ],
       providers: [
         {provide: BulkAccessControlService, useValue: mockBulkAccessControlService},

src/app/shared/access-control-form-container/access-control-form-container.component.ts

@@ -16,9 +16,8 @@ import { BulkAccessConfigDataService } from '../../core/config/bulk-access-confi
 import { getFirstCompletedRemoteData } from '../../core/shared/operators';
 import { BulkAccessConditionOptions } from '../../core/config/models/bulk-access-condition-options.model';
 import { AlertType } from '../alert/alert-type';
-import {
-  createAccessControlInitialFormState
-} from './access-control-form-container-intial-state';
+import { createAccessControlInitialFormState } from './access-control-form-container-intial-state';
+import { SwitchColor, SwitchOption } from '../switch/switch.component';
 
 @Component({
   selector: 'ds-access-control-form-container',
@@ -55,6 +54,14 @@ export class AccessControlFormContainerComponent<T extends DSpaceObject> impleme
 
   readonly AlertType = AlertType;
 
+  /**
+   * The custom options for the 'ds-switch' component
+   */
+  switchOptions: SwitchOption[] = [
+    { value: true, backgroundColor: SwitchColor.Success },
+    { value: false },
+  ];
+
   constructor(
     private bulkAccessConfigService: BulkAccessConfigDataService,
     private bulkAccessControlService: BulkAccessControlService,

src/app/shared/access-control-form-container/access-control-form.module.ts

@@ -2,7 +2,6 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 
 import {TranslateModule} from '@ngx-translate/core';
-import {UiSwitchModule} from 'ngx-ui-switch';
 
 import {AccessControlArrayFormComponent} from './access-control-array-form/access-control-array-form.component';
 import {SharedModule} from '../shared.module';
@@ -18,7 +17,6 @@ import {ToDatePipe} from './access-control-array-form/to-date.pipe';
     CommonModule,
     SharedModule,
     TranslateModule,
-    UiSwitchModule,
     NgbDatepickerModule
   ],
   declarations: [

src/app/shared/shared.module.ts

@@ -357,6 +357,7 @@ import { ThemedDefaultBrowseElementsComponent } from './browse-most-elements/def
 import { MetadataLinkViewPopoverComponent } from './metadata-link-view/metadata-link-view-popover/metadata-link-view-popover.component';
 import { MetadataLinkViewAvatarPopoverComponent } from './metadata-link-view/metadata-link-view-avatar-popover/metadata-link-view-avatar-popover.component';
 import { MetadataLinkViewOrcidComponent } from './metadata-link-view/metadata-link-view-orcid/metadata-link-view-orcid.component';
+import { SwitchComponent } from './switch/switch.component';
 import {StickyPopoverDirective} from './metadata-link-view/sticky-popover.directive';
 
 const MODULES = [
@@ -596,6 +597,7 @@ const ENTRY_COMPONENTS = [
   RelationshipsListComponent,
   AdditionalMetadataComponent,
   ThemedDefaultBrowseElementsComponent,
+  SwitchComponent,
 ];
 
 const PROVIDERS = [

src/app/shared/switch/switch.component.html

@@ -0,0 +1,18 @@
+<div class="btn-group">
+  <div class="switch-container" [ngClass]="backgroundClass">
+    <div *ngFor="let option of options">
+      <div class="switch-opt"
+           (click)="onOptionClick(option.value)"
+           [class.bg-white]="selectedValue === option.value">
+        <i [class]="option.icon + ' ' + (selectedValue === option.value ? 'text-' + option.iconColor : '')"></i>
+      </div>
+    </div>
+  </div>
+  <div *ngFor="let option of options">
+    <span *ngIf="selectedValue === option.value"
+          [class]="selectedValue === option.value ? 'text-' + option.labelColor : ''"
+          class="visibility-label ml-2 font-weight-bold">
+      {{ option.label | translate }}
+    </span>
+  </div>
+</div>

src/app/shared/switch/switch.component.scss

@@ -0,0 +1,34 @@
+.switch-container {
+  height: 35px;
+  width: fit-content;
+  border-radius: 100px;
+  display: flex;
+  &.bg-default {
+    background-color: rgb(204, 204, 204);
+  }
+}
+
+.switch-opt {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  background-color: transparent;
+  cursor: pointer;
+  width: 32px;
+  height: 32px;
+  border-radius: 100%;
+  position: relative;
+  top: 1px;
+  margin-left: 2px;
+  margin-right: 2px;
+}
+
+.visibility-label {
+  line-height: 40px;
+}
+
+.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}