feat(filter-field): Adding 'disabled' handling for multiselect options.

dynatrace-oss · May 27, 2021 · c8d61aa · c8d61aa
1 parent c617d0a
commit c8d61aa
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 11 deletions.
diff --git a/apps/dev/src/filter-field/multi-select.ts b/apps/dev/src/filter-field/multi-select.ts
@@ -25,12 +25,14 @@ export const MULTI_SELECT_DATA = {
       name: 'Months',
       multiOptions: [
         { name: 'All' },
+        { name: 'None (disabled)', disabled: true },
         {
           name: 'Winter',
           options: [
             { name: 'January' },
             { name: 'February' },
             { name: 'March' },
+            { name: 'April (disabled)', disabled: true },
           ],
         },
         {
@@ -61,6 +63,7 @@ export const MULTI_SELECT_DATA = {
         { name: 'All' },
         { name: 'All work days' },
         { name: 'All weekends' },
+        { name: 'None (disabled)', disabled: true },
         {
           name: 'Work days',
           options: [
@@ -69,6 +72,7 @@ export const MULTI_SELECT_DATA = {
             { name: 'Wednesday' },
             { name: 'Thursday' },
             { name: 'Friday' },
+            { name: 'Sunday (disabled)', disabled: true },
           ],
         },
         {

diff --git a/apps/dev/src/filter-field/testdata.ts b/apps/dev/src/filter-field/testdata.ts
@@ -23,12 +23,15 @@ export const TEST_DATA = {
     {
       name: 'DE',
       defaultSearch: true,
-      suggestions: [{ name: 'Berlin' }, { name: 'Bremen' }, { name: 'Munich' }],
+      autocomplete: [
+        { name: 'Berlin', options: [{ name: 'test1', disabled: true }] },
+        { name: 'Bremen' },
+        { name: 'Munich' },
+      ],
       unique: true,
       validators: [
         {
           validatorFn: Validators.minLength(2),
-          error: 'Country code needs at least 2 characters',
         },
       ],
     },
@@ -37,7 +40,7 @@ export const TEST_DATA = {
       distinct: true,
       autocomplete: [
         { name: 'Vienna' },
-        { name: 'Linz' },
+        { name: 'Linz', disabled: true },
         {
           name: 'custom',
           suggestions: [],
@@ -138,6 +141,7 @@ export const TEST_DATA_ASYNC_FREETEXT = {
 export const MULTI_SELECT_DATA_ASYNC = {
   name: 'Years (async)',
   multiOptions: [
+    { name: '1999 (disabled)', disabled: true },
     { name: '2018' },
     { name: '2019' },
     { name: '2020' },
@@ -149,8 +153,8 @@ export const MULTI_SELECT_DATA_ASYNC = {
 
 export const MULTI_SELECT_DATA_ASYNC_PARTIAL = {
   name: 'CH (async, partial)',
-  autocomplete: [
-    { name: 'Zürich' },
+  multiOptions: [
+    { name: 'Zürich (disabled)', disabled: true },
     { name: 'Genf' },
     { name: 'Basel' },
     { name: 'Bern' },
@@ -160,8 +164,8 @@ export const MULTI_SELECT_DATA_ASYNC_PARTIAL = {
 
 export const TEST_DATA_PARTIAL = {
   name: 'CH (async, partial)',
-  autocomplete: [
-    { name: 'Zürich' },
+  multiOptions: [
+    { name: 'Zürich (disabled)', disabled: true },
     { name: 'Genf' },
     { name: 'Basel' },
     { name: 'Bern' },

diff --git a/...ista-components/filter-field/src/filter-field-multi-select/filter-field-multi-select.html b/...ista-components/filter-field/src/filter-field-multi-select/filter-field-multi-select.html
@@ -15,12 +15,14 @@
           <dt-option
             *ngFor="let optionDef of optionOrGroupDef.group!.options"
             [value]="optionDef"
+            [disabled]="optionDef.option!.disabled"
           >
             <dt-checkbox
               class="dt-filter-field-multi-select-checkbox"
               (change)="_toggleOptionFromTemplate(optionDef)"
               [checked]="_isOptionSelected(optionDef)"
               [value]="optionDef"
+              [disabled]="optionDef.option!.disabled"
             >
               <dt-highlight [term]="inputValue">{{
                 optionDef.option!.viewValue
@@ -29,12 +31,16 @@
           </dt-option>
         </dt-optgroup>
         <ng-template #options>
-          <dt-option [value]="optionOrGroupDef">
+          <dt-option
+            [value]="optionOrGroupDef"
+            [disabled]="optionOrGroupDef.option!.disabled"
+          >
             <dt-checkbox
               class="dt-filter-field-multi-select-checkbox"
               (change)="_toggleOptionFromTemplate(optionOrGroupDef)"
               [checked]="_isOptionSelected(optionOrGroupDef)"
               [value]="optionOrGroupDef"
+              [disabled]="optionOrGroupDef.option!.disabled"
             >
               <dt-highlight [term]="inputValue">{{
                 optionOrGroupDef.option!.viewValue

diff --git a/...mponents/filter-field/src/filter-field-multi-select/filter-field-with-multiselect.spec.ts b/...mponents/filter-field/src/filter-field-multi-select/filter-field-with-multiselect.spec.ts
@@ -114,14 +114,28 @@ describe('DtFilterField', () => {
         );
         const applyButton = getMultiselectApplyButton(overlayContainerElement);
 
-        expect(checkboxes.length).toBe(4);
+        expect(checkboxes.length).toBe(5);
         expect(checkboxes[0].textContent?.trim()).toBe('NoneNone');
         expect(checkboxes[1].textContent?.trim()).toBe('KetchupKetchup');
         expect(checkboxes[2].textContent?.trim()).toBe('MustardMustard');
         expect(checkboxes[3].textContent?.trim()).toBe('MayoMayo');
         expect(applyButton).toBeDefined();
       });
 
+      it('should have set a checkbox as "disabled"', () => {
+        const checkboxInputs = getMultiselectCheckboxInputs(
+          overlayContainerElement,
+        );
+        const checkboxLabels = getMultiselectCheckboxLabels(
+          overlayContainerElement,
+        );
+        const applyButton = getMultiselectApplyButton(overlayContainerElement);
+
+        expect(checkboxLabels[4].textContent?.trim()).toBe('ImportedImported');
+        expect(checkboxInputs[4].disabled).toBeTruthy();
+        expect(applyButton).toBeDefined();
+      });
+
       it('should set the focus onto the first checkbox by default', () => {
         const firstOption = getOptions(overlayContainerElement)[0];
 
@@ -558,7 +572,7 @@ describe('DtFilterField', () => {
 
         const options = getMultiselectCheckboxInputs(overlayContainerElement);
         // Make sure that the autocomplete actually opened.
-        expect(options.length).toBe(4);
+        expect(options.length).toBe(5);
 
         // Unselect Ketchup
         options[1].click();
@@ -595,7 +609,7 @@ describe('DtFilterField', () => {
 
         const options = getMultiselectCheckboxInputs(overlayContainerElement);
         // Make sure that the autocomplete actually opened.
-        expect(options.length).toBe(4);
+        expect(options.length).toBe(5);
 
         // Unselect ketchup
         options[1].click();

diff --git a/libs/barista-components/filter-field/src/testing/filter-field-test-data.ts b/libs/barista-components/filter-field/src/testing/filter-field-test-data.ts
@@ -60,6 +60,7 @@ export const TEST_DATA_MULTI_SELECT = {
           name: 'Homemade',
           options: [{ name: 'Ketchup' }, { name: 'Mustard' }, { name: 'Mayo' }],
         },
+        { name: 'Imported', disabled: true },
       ],
     },
   ],
@@ -75,6 +76,7 @@ export const TEST_DATA_MULTI_SELECT_EDIT_MODE = {
           name: 'Homemade',
           options: [{ name: 'Ketchup' }, { name: 'Mustard' }, { name: 'Mayo' }],
         },
+        { name: 'Imported', disabled: true },
       ],
     },
   ],

diff --git a/libs/testing/fixtures/src/lib/filter-field/test-data.ts b/libs/testing/fixtures/src/lib/filter-field/test-data.ts
@@ -50,6 +50,7 @@ export const FILTER_FIELD_TEST_DATA = {
           name: 'Homemade',
           options: [{ name: 'Ketchup' }, { name: 'Mustard' }, { name: 'Mayo' }],
         },
+        { name: 'Imported', disabled: true },
       ],
     },
     {