Merge pull request #6930 from aignatov-bio/ai-sci-9985-add-sorting-to-cards

Add sorting to cards view [SCI-9985]

app/javascript/vue/shared/datatable/table.vue

@@ -14,9 +14,11 @@
         :filters="filters"
         :columnDefs="columnDefs"
         :tableState="tableState"
+        :order="order"
         @applyFilters="applyFilters"
         @setTableView="switchViewRender('table')"
         @setCardsView="switchViewRender('cards')"
+        @sort="applyOrder"
         @hideColumn="hideColumn"
         @showColumn="showColumn"
       />
@@ -248,6 +250,8 @@ export default {
       }
     },
     currentViewRender() {
+      this.columnApi = null;
+      this.gridApi = null;
       this.saveTableState();
     },
     perPage() {
@@ -258,7 +262,7 @@ export default {
     if (this.tableState) {
       this.currentViewRender = this.tableState.currentViewRender || 'table';
       this.perPage = this.tableState.perPage || 20;
-      [this.order] = this.getOrder(this.tableState.columnsState);
+      this.order = this.tableState.order;
     }
   },
   mounted() {
@@ -328,6 +332,13 @@ export default {
       this.columnApi = params.columnApi;
 
       if (this.tableState) {
+        if (this.order) {
+          this.tableState.columnsState.forEach((column) => {
+            const updatedColumn = column;
+            updatedColumn.sort = this.order.column === column.colId ? this.order.dir : null;
+            return updatedColumn;
+          });
+        }
         this.columnApi.applyColumnState({
           state: this.tableState.columnsState,
           applyOrder: true
@@ -363,6 +374,7 @@ export default {
       }
       const tableState = {
         columnsState: columnsState || [],
+        order: this.order,
         currentViewRender: this.currentViewRender,
         perPage: this.perPage
       };
@@ -410,6 +422,14 @@ export default {
           column: column.colId,
           dir: column.sort
         }));
+    },
+    applyOrder(column, dir) {
+      this.order = {
+        column,
+        dir
+      };
+      this.saveTableState();
+      this.reloadTable();
     }
   }
 };

app/javascript/vue/shared/datatable/toolbar.vue

@@ -76,6 +76,28 @@
                   @click="$emit('search:change', '')"></i>
       </div>
       <FilterDropdown v-else :filters="filters" @applyFilters="applyFilters" />
+      <GeneralDropdown v-if="currentViewRender === 'cards'" ref="dropdown" position="right">
+        <template v-slot:field>
+          <button class="btn btn-light icon-btn">
+            <i class="sn-icon sn-icon-sort-down"></i>
+          </button>
+        </template>
+        <template v-slot:flyout >
+          <div class="min-w-[12rem]">
+            <div v-for="col in sortableColumns"
+                class="flex whitespace-nowrap rounded px-3 py-2.5 hover:!text-sn-blue items-center h-11
+                        hover:no-underline cursor-pointer hover:bg-sn-super-light-grey leading-5"
+                :key="col.field"
+                @click="$emit('sort', col.field, (order?.dir === 'asc' ? 'desc' : 'asc'))">
+              <span>{{ col.headerName }}</span>
+              <div v-if="order && order.column === col.field" class="ml-auto">
+                <i v-if="order.dir === 'asc'" class="sn-icon sn-icon-sort-up"></i>
+                <i v-else class="sn-icon sn-icon-sort-down"></i>
+              </div>
+            </div>
+          </div>
+        </template>
+      </GeneralDropdown>
     </div>
     <teleport to="body">
       <ColumnsModal
@@ -91,6 +113,7 @@
 
 <script>
 import MenuDropdown from '../menu_dropdown.vue';
+import GeneralDropdown from '../general_dropdown.vue';
 import FilterDropdown from '../filters/filter_dropdown.vue';
 import ColumnsModal from './modals/columns.vue';
 
@@ -131,12 +154,16 @@ export default {
     },
     tableState: {
       type: Object
+    },
+    order: {
+      type: Object
     }
   },
   components: {
     MenuDropdown,
     FilterDropdown,
-    ColumnsModal
+    ColumnsModal,
+    GeneralDropdown
   },
   computed: {
     viewModesMenu() {
@@ -159,6 +186,9 @@ export default {
             return view;
         }
       });
+    },
+    sortableColumns() {
+      return this.columnDefs.filter((column) => column.sortable);
     }
   },
   data() {

app/javascript/vue/shared/general_dropdown.vue

@@ -58,9 +58,7 @@ export default {
   },
   methods: {
     closeMenu(e) {
-
       if (e && e.target.closest('.sn-dropdown, .sn-select-dropdown, .dp__instance_calendar')) return;
-
       this.isOpen = false;
     }
   }

app/javascript/vue/shared/menu_dropdown.vue

@@ -8,12 +8,12 @@
     </button>
     <teleport to="body">
       <div ref="flyout"
+          v-if="isOpen"
           class="fixed z-[3000] bg-sn-white inline-block rounded p-2.5 sn-shadow-menu-sm flex flex-col gap-[1px]"
           :class="{
               'right-0': position === 'right',
               'left-0': position === 'left',
           }"
-          v-if="isOpen"
       >
         <span v-for="(item, i) in listItems" :key="i" class="contents">
           <div v-if="item.dividerBefore" class="border-0 border-t border-solid border-sn-light-grey"></div>

app/javascript/vue/shared/mixins/fixed_flyout.js

@@ -9,14 +9,16 @@ export default {
     isOpen() {
       if (this.isOpen) {
         this.$nextTick(() => {
+          this.setPosition();
           this.overflowContainerListener();
         });
       }
-    },
+    }
   },
   methods: {
     overflowContainerListener() {
       const { field, flyout } = this.$refs;
+
       if (!field || !flyout) return;
 
       const fieldRect = field.getBoundingClientRect();