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

[DSC-2236] edit: updated switch component logic to 2 options only

Approved-by: Andrea Barbasso

Author: Francesco Mauto

bitbucket-pipelines.yml

@@ -1,6 +1,3 @@
-options:
-  runs-on: self.hosted
-
 definitions:
   caches:
     node-dsc-2023-02-x: ./node_modules

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

@@ -21,7 +21,8 @@ <h1 id="header">{{'admin.batch-import.page.header' | translate}}</h1>
   </div>
 
   <ds-switch
-    [options]="switchOptions"
+    [checkedOption]="switchOnOption"
+    [uncheckedOption]="switchOffOption"
     [selectedValue]="isUpload ? 'upload' : 'url'"
     (selectedValueChange)="toggleUpload()">
   </ds-switch>

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

@@ -50,12 +50,14 @@ export class BatchImportPageComponent {
   fileURL: string;
 
   /**
-   * The custom options for the 'ds-switch' component
+   * The "on" option for the 'ds-switch' component (upload)
    */
-  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 },
-  ];
+  switchOnOption: SwitchOption = { value: 'upload', icon: 'fa fa-upload', label: 'admin.metadata-import.page.toggle.upload', iconColor: SwitchColor.Primary };
+
+  /**
+   * The "off" option for the 'ds-switch' component (url)
+   */
+  switchOffOption: SwitchOption = { value: 'url', icon: 'fa fa-link', label: 'admin.metadata-import.page.toggle.url', iconColor: SwitchColor.Primary };
 
   public constructor(private location: Location,
                      protected translate: TranslateService,

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

@@ -42,7 +42,8 @@ <h2> {{'external-login-validation.review-account-info.header' | translate}}</h2>
         <td>
           <ds-switch
             *ngIf="(data.receivedValue !== data.currentValue) && data.currentValue"
-            [options]="switchOptions"
+            [checkedOption]="switchOnOption"
+            [uncheckedOption]="switchOffOption"
             [selectedValue]="data.overrideValue"
             (selectedValueChange)="onOverrideChange($event, data.identifier)">
           </ds-switch>

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

@@ -55,12 +55,14 @@ export class ReviewAccountInfoComponent implements OnInit, OnDestroy {
   subs: Subscription[] = [];
 
   /**
-   * The custom options for the 'ds-switch' component
+   * The "on" option for the 'ds-switch' component
    */
-  switchOptions: SwitchOption[] = [
-    { value: true, labelColor: SwitchColor.Success, backgroundColor: SwitchColor.Success ,label: 'on-label' },
-    { value: false, label: 'off-label' },
-  ];
+  switchOnOption: SwitchOption = { value: true, labelColor: SwitchColor.Success, backgroundColor: SwitchColor.Success, label: 'on-label' };
+
+  /**
+   * The "off" option for the 'ds-switch' component
+   */
+  switchOffOption: SwitchOption = { value: false, label: 'off-label' };
 
   constructor(
     @Inject(NativeWindowService) protected _window: NativeWindowRef,

src/app/info/accessibility-settings/accessibility-settings.component.html

@@ -8,10 +8,12 @@ <h2>{{ 'info.accessibility-settings.title' | translate }}</h2>
       </label>
 
       <div class="col-sm-4">
-        <ds-switch [id]="'disableNotificationTimeOutInput'"
-                   [options]="notificationTimeOutSwitchOptions"
-                   [selectedValue]="formValues.notificationTimeOutEnabled"
-                   (selectedValueChange)="formValues.notificationTimeOutEnabled = $event">
+        <ds-switch
+          [id]="'disableNotificationTimeOutInput'"
+          [checkedOption]="switchOnOption"
+          [uncheckedOption]="switchOffOption"
+          [(selectedValue)]="formValues.notificationTimeOutEnabled"
+          (selectedValueChange)="formValues.notificationTimeOutEnabled = $event">
         </ds-switch>
       </div>
 

src/app/info/accessibility-settings/accessibility-settings.component.ts

@@ -26,14 +26,20 @@ export class AccessibilitySettingsComponent implements OnInit, OnDestroy {
 
   protected formValues: AccessibilitySettingsFormValues;
 
-  notificationTimeOutSwitchOptions: SwitchOption[] = [
-    { value: true, label: 'info.accessibility-settings.disableNotificationTimeOut.on', labelColor: SwitchColor.Success, backgroundColor: SwitchColor.Success },
-    { value: false, label: 'info.accessibility-settings.disableNotificationTimeOut.off' },
-  ];
-
   isAuthenticated: BehaviorSubject<boolean> = new BehaviorSubject(false);
   cookieIsAccepted: BehaviorSubject<boolean> = new BehaviorSubject(false);
 
+  /**
+   * The "on" option for the 'ds-switch' component
+   */
+  switchOnOption: SwitchOption = { value: true, labelColor: SwitchColor.Success, backgroundColor: SwitchColor.Success,
+    label: 'info.accessibility-settings.notificationTimeOutEnabled.label.enabled' };
+
+  /**
+   * The "off" option for the 'ds-switch' component
+   */
+  switchOffOption: SwitchOption = { value: false, label: 'info.accessibility-settings.notificationTimeOutEnabled.label.disabled' };
+
   private subscriptions: Subscription[] = [];
 
   constructor(

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

@@ -4,7 +4,8 @@
     <p class="align-items-center researcher-profile-switch" >
       <span class="mr-3">{{'researcher.profile.status' | translate}}</span>
       <ds-switch
-        [options]="switchOptions"
+        [checkedOption]="switchOnOption"
+        [uncheckedOption]="switchOffOption"
         [selectedValue]="researcherProfile.visible ? 'public' : 'private'"
         (selectedValueChange)="toggleProfileVisibility(researcherProfile)">
       </ds-switch>

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

@@ -58,12 +58,14 @@ export class ProfilePageResearcherFormComponent implements OnInit {
   researcherProfileItemId: string;
 
   /**
-   * The custom options for the 'ds-switch' component
+   * The "on" option for the 'ds-switch' component (public)
    */
-  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 },
-  ];
+  switchOnOption: SwitchOption = { value: 'public', icon: 'fa fa-globe', labelColor: SwitchColor.Success, label: 'researcher.profile.public.visibility', iconColor: SwitchColor.Success };
+
+  /**
+   * The "off" option for the 'ds-switch' component (private)
+   */
+  switchOffOption: SwitchOption = { value: 'private', icon: 'fa fa-lock', labelColor: SwitchColor.Danger, label: 'researcher.profile.private.visibility', iconColor: SwitchColor.Danger };
 
   constructor(protected researcherProfileService: ResearcherProfileDataService,
               protected profileClaimService: ProfileClaimService,

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

@@ -17,7 +17,9 @@ <h2 class="h3 mb-0 mr-4">
                 {{ 'access-control-item-header-toggle' | translate }}
               </h2>
               <ds-switch
-                [options]="switchOptions"
+                [ariaLabel]="(state.bitstream.toggleStatus ? 'access-control-item-toggle.disable' : 'access-control-item-toggle.enable') | translate"
+                [checkedOption]="switchOnOption"
+                [uncheckedOption]="switchOffOption"
                 [(selectedValue)] = "state.item.toggleStatus"
                 (selectedValueChange) = "handleStatusChange('item', $event)">
               </ds-switch>
@@ -71,7 +73,9 @@ <h2 class="h3 mb-0 mr-4">
                 {{'access-control-bitstream-header-toggle' | translate}}
               </h2>
               <ds-switch
-                [options]="switchOptions"
+                [ariaLabel]="(state.bitstream.toggleStatus ? 'access-control-bitstream-toggle.disable' : 'access-control-bitstream-toggle.enable') | translate"
+                [checkedOption]="switchOnOption"
+                [uncheckedOption]="switchOffOption"
                 [(selectedValue)] = "state.bitstream.toggleStatus"
                 (selectedValueChange) = "handleStatusChange('bitstream', $event)">
               </ds-switch>