Merge pull request cylc#1751 from MetRonnie/table-initial-opts

Table view: remember sort & pagination state on navigation

Author: markgrahamdawson

CHANGES.md

@@ -10,6 +10,14 @@ creating a new release entry be sure to copy & paste the span tag with the
 `actions:bind` attribute, which is used by a regex to find the text to be
 updated. Only the first match gets replaced, so it's fine to leave the old
 ones in. -->
+-------------------------------------------------------------------------------
+## __cylc-ui-2.5.0 (<span actions:bind='release-date'>Upcoming</span>)__
+
+### Enhancements
+
+[#1751](https://github.com/cylc/cylc-ui/pull/1751) -
+More view options are now remembered & restored when navigating between workflows.
+
 -------------------------------------------------------------------------------
 ## __cylc-ui-2.4.0 (<span actions:bind='release-date'>Released 2024-04-02</span>)__
 

src/components/cylc/table/Table.vue

@@ -21,9 +21,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     :items="tasks"
     item-value="task.id"
     multi-sort
-    :sort-by="sortBy"
+    v-model:sort-by="sortBy"
     show-expand
     density="compact"
+    v-model:page="page"
     v-model:items-per-page="itemsPerPage"
   >
     <template v-slot:item.task.name="{ item }">
@@ -100,45 +101,61 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script>
-import { ref } from 'vue'
 import Task from '@/components/cylc/Task.vue'
 import Job from '@/components/cylc/Job.vue'
 import { mdiChevronDown } from '@mdi/js'
 import { DEFAULT_COMPARATOR } from '@/components/cylc/common/sort'
 import { datetimeComparator } from '@/components/cylc/table/sort'
 import { dtMean } from '@/utils/tasks'
 import { useCyclePointsOrderDesc } from '@/composables/localStorage'
+import {
+  initialOptions,
+  updateInitialOptionsEvent,
+  useInitialOptions
+} from '@/utils/initialOptions'
 
 export default {
   name: 'TableComponent',
 
+  emits: [updateInitialOptionsEvent],
+
   props: {
     tasks: {
       type: Array,
       required: true
-    }
+    },
+    initialOptions,
   },
 
   components: {
     Task,
     Job,
   },
 
-  setup () {
+  setup (props, { emit }) {
     const cyclePointsOrderDesc = useCyclePointsOrderDesc()
-    return {
-      itemsPerPage: ref(50),
-      sortBy: ref([
+
+    const sortBy = useInitialOptions(
+      'sortBy',
+      { props, emit },
+      [
         {
           key: 'task.tokens.cycle',
           order: cyclePointsOrderDesc.value ? 'desc' : 'asc'
         },
-      ]),
-    }
-  },
+      ]
+    )
+
+    const page = useInitialOptions('page', { props, emit }, 1)
+
+    const itemsPerPage = useInitialOptions('itemsPerPage', { props, emit }, 50)
 
-  methods: {
-    dtMean
+    return {
+      dtMean,
+      itemsPerPage,
+      page,
+      sortBy,
+    }
   },
 
   headers: [

src/views/Table.vue

@@ -45,6 +45,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           >
             <TableComponent
               :tasks="filteredTasks"
+              v-model:initial-options="dataTableOptions"
             />
           </v-container>
         </v-col>
@@ -60,6 +61,7 @@ import graphqlMixin from '@/mixins/graphql'
 import subscriptionComponentMixin from '@/mixins/subscriptionComponent'
 import {
   initialOptions,
+  updateInitialOptionsEvent,
   useInitialOptions
 } from '@/utils/initialOptions'
 import { matchNode } from '@/components/cylc/common/filter'
@@ -167,6 +169,8 @@ export default {
     }
   },
 
+  emits: [updateInitialOptionsEvent],
+
   props: {
     initialOptions,
   },
@@ -178,7 +182,14 @@ export default {
      */
     const tasksFilter = useInitialOptions('tasksFilter', { props, emit }, {})
 
+    /**
+     * The Vuetify data table options (sortBy, page etc).
+     * @type {import('vue').Ref<object>}
+     */
+    const dataTableOptions = useInitialOptions('dataTableOptions', { props, emit })
+
     return {
+      dataTableOptions,
       tasksFilter,
     }
   },

tests/e2e/specs/table.cy.js

@@ -132,10 +132,13 @@ function addView (view) {
     .should('not.be.exist')
 }
 
-describe('Filters save state', () => {
-  it('remembers job ID and file when switching between workflows', () => {
+describe('State saving', () => {
+  beforeEach(() => {
     cy.visit('/#/workspace/one')
     addView('Table')
+  })
+
+  it('remembers filters when switching between workflows', () => {
     cy.get('.c-treeitem:visible')
     cy
       .get('.c-table table > tbody > tr')
@@ -163,8 +166,6 @@ describe('Filters save state', () => {
     cy.get('.c-dashboard')
     // Navigate back
     cy.visit('/#/workspace/one')
-    cy.get('.c-gscan-workflow-name:first')
-      .click()
     cy
       .get('.c-table table > tbody > tr')
       .should('have.length', 1)
@@ -174,4 +175,36 @@ describe('Filters save state', () => {
       .contains('eventually')
       .should('be.visible')
   })
+
+  it('remembers sorting & page options when switching between workflows', () => {
+    const sortedClass = 'v-data-table__th--sorted'
+    cy.get('.c-table th')
+      .contains('Platform')
+      .closest('th').as('platformCol')
+      .should('not.have.class', sortedClass)
+      .click()
+      .should('have.class', sortedClass)
+    cy.get('.c-table .v-data-table-footer__items-per-page .v-select')
+      .as('itemsPerPage')
+      .find('input')
+      .should('not.have.value', -1)
+      .get('@itemsPerPage')
+      .click()
+      .get('[role="listbox"] .v-list-item')
+      .contains('All')
+      .click()
+      // Wait for menu to close
+      .should('not.exist')
+      .get('@itemsPerPage').find('input')
+      .should('have.value', -1)
+    // Navigate away
+    cy.visit('/#/')
+      .get('.c-dashboard')
+    // Navigate back
+    cy.visit('/#/workspace/one')
+    cy.get('@platformCol')
+      .should('have.class', sortedClass)
+    cy.get('@itemsPerPage').find('input')
+      .should('have.value', -1)
+  })
 })