瀏覽代碼

HUE-9485 [frontend] Fix issues with the ColumnSelectorPanel

Johan Ahlen 5 年之前
父節點
當前提交
5c57e22645

+ 8 - 5
desktop/core/src/desktop/js/components/ColumnSelectorPanel.test.ts

@@ -22,19 +22,22 @@ describe('ColumnSelectorPanel.vue', () => {
   it('should render', () => {
     const wrapper = shallowMount(ColumnSelectorPanel, {
       propsData: {
-        columns: []
+        columns: [],
+        visibleColumns: []
       }
     });
     expect(wrapper.element).toMatchSnapshot();
   });
 
   it('should render with checkboxes', () => {
+    const columns = <Column[]>[
+      { key: 'a', label: 'A' },
+      { key: 'b', label: 'B' }
+    ];
     const wrapper = shallowMount(ColumnSelectorPanel, {
       propsData: {
-        columns: <Column[]>[
-          { key: 'a', label: 'A' },
-          { key: 'b', label: 'B' }
-        ]
+        columns,
+        visibleColumns: [...columns]
       }
     });
     expect(wrapper.element).toMatchSnapshot();

+ 30 - 16
desktop/core/src/desktop/js/components/ColumnSelectorPanel.vue

@@ -23,20 +23,16 @@
       <li>
         <input v-model="filterText" type="text" class="filter-box" placeholder="Filter" />
       </li>
-      <li v-for="column in filteredColumns" :key="column.key">
+      <li v-for="selectableColumn in filteredColumns" :key="selectableColumn.column.key">
         <label>
-          <input v-model="checkedColumns" type="checkbox" :value="column" />
-          {{ column.label }}
+          <input v-model="selectableColumn.checked" type="checkbox" />
+          {{ selectableColumn.column.label }}
         </label>
       </li>
     </ul>
 
     <div class="buttons">
-      <button
-        type="button"
-        class="btn btn-default"
-        @click="$emit('set-checked-columns', checkedColumns)"
-      >
+      <button type="button" class="btn btn-default" @click="apply">
         Apply
       </button>
     </div>
@@ -49,24 +45,42 @@
   import { Prop } from 'vue-property-decorator';
   import { Column } from 'components/HueTable';
 
+  interface SelectableColumn {
+    column: Column;
+    checked: boolean;
+  }
+
   @Component
   export default class ColumnSelectorPanel extends Vue {
     @Prop({ required: true })
     columns!: Column[];
+    @Prop({ required: true })
+    visibleColumns!: Column[];
 
-    checkedColumns: Column[] = [];
-    filterText = '';
-
-    mounted(): void {
-      this.checkedColumns.push(...this.columns);
+    get selectableColumns(): SelectableColumn[] {
+      const visibleColsSet = new Set<Column>(this.visibleColumns);
+      return this.columns.map(column => ({ column, checked: visibleColsSet.has(column) }));
     }
 
-    get filteredColumns(): Column[] {
+    filterText = '';
+
+    get filteredColumns(): SelectableColumn[] {
       if (!this.filterText) {
-        return this.columns;
+        return this.selectableColumns;
       }
       const lowerFilter = this.filterText.toLowerCase();
-      return this.columns.filter(col => col.label.toLowerCase().indexOf(lowerFilter) !== -1);
+      return this.selectableColumns.filter(
+        col => col.column.label.toLowerCase().indexOf(lowerFilter) !== -1
+      );
+    }
+
+    apply(): void {
+      this.$emit(
+        'update:visible-columns',
+        this.selectableColumns
+          .filter(selectable => selectable.checked)
+          .map(selectable => selectable.column)
+      );
     }
   }
 </script>

+ 0 - 2
desktop/core/src/desktop/js/components/__snapshots__/ColumnSelectorPanel.test.ts.snap

@@ -61,7 +61,6 @@ exports[`ColumnSelectorPanel.vue should render with checkboxes 1`] = `
       <label>
         <input
           type="checkbox"
-          value="[object Object]"
         />
         
         A
@@ -72,7 +71,6 @@ exports[`ColumnSelectorPanel.vue should render with checkboxes 1`] = `
       <label>
         <input
           type="checkbox"
-          value="[object Object]"
         />
         
         B