Tidy/simplify

Author: MetRonnie

src/components/cylc/Drawer.vue

@@ -38,7 +38,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           <v-list-item-title>Dashboard</v-list-item-title>
         </v-list-item>
 
-        <v-divider class="" />
+        <v-divider/>
 
         <v-list-item>
           <v-list-item-title>Workflows</v-list-item-title>

src/components/cylc/TaskFilter.vue

@@ -28,7 +28,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         data-cy="filter-id"
         clearable
         placeholder="Filter by ID"
-        v-model="localValue.id"
+        v-model="model.id"
         ref="filterIDInput"
       />
     </v-col>
@@ -38,45 +38,24 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       class="mb-2 mb-md-0"
     >
       <TaskFilterSelect
-        v-model="localValue.states"
+        v-model="model.states"
         type="task state"
-        :items="$options.allStates"
+        :items="TaskStateNames"
         data-cy="filter task state"
         placeholder="Filter by task state"
       />
     </v-col>
   </v-row>
 </template>
 
-<script>
+<script setup>
 import { TaskStateNames } from '@/model/TaskState.model'
 import TaskFilterSelect from '@/components/cylc/TaskFilterSelect.vue'
 
-export default {
-  name: 'TaskFilter',
+/** @type {import('vue').Ref<{ id: string?, states: string[]? }>} */
+const model = defineModel({
+  type: Object,
+  required: true,
+})
 
-  components: {
-    TaskFilterSelect
-  },
-
-  props: {
-    modelValue: {
-      type: Object,
-      required: true
-    } // { id, states }
-  },
-
-  computed: {
-    localValue: {
-      get () {
-        return this.modelValue
-      },
-      set (value) {
-        // Update 'modelValue' prop by notifying parent component's v-model for this component
-        this.$emit('update:modelValue', value)
-      }
-    }
-  },
-  allStates: TaskStateNames,
-}
 </script>

src/components/cylc/TaskFilterSelect.vue

@@ -3,14 +3,18 @@
     :items="items"
     clearable
     multiple
-    v-model="localValue"
+    v-model="model"
   >
     <template #prepend-item>
-      <v-list-item
-        @click="selectAll"
-      >
-        Select All
-      </v-list-item>
+      <v-select-actions>
+        <v-btn
+          @click="selectAll()"
+          data-cy="task-filter-select-all"
+        >
+          Select All
+        </v-btn>
+      </v-select-actions>
+      <v-divider/>
     </template>
 
     <template #item="{ item, props }">
@@ -33,7 +37,7 @@
       <v-chip
         v-if="index < maxVisibleStates"
         closable
-        @click:close="removeItem(item.raw)"
+        @click:close="removeItem(index)"
         size="small"
         :close-icon="mdiClose"
       >
@@ -55,24 +59,18 @@
         v-if="index === maxVisibleStates"
         class="text-grey text-caption"
       >
-        (+{{ localValue.length - maxVisibleStates }})
+        (+{{ model.length - maxVisibleStates }})
       </span>
     </template>
   </v-select>
 </template>
 
 <script setup>
-import { computed } from 'vue'
 import { mdiClose } from '@mdi/js'
 import Task from '@/components/cylc/Task.vue'
 import Workflowicon from '@/components/cylc/gscan/WorkflowIcon.vue'
 
 const props = defineProps({
-  /** Array of selected states */
-  modelValue: {
-    type: Array,
-    default: () => [],
-  },
   items: {
     type: Array,
     required: true,
@@ -83,24 +81,16 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['update:modelValue'])
-
-const localValue = computed({
-  get () {
-    return props.modelValue
-  },
-  set (val) {
-    emit('update:modelValue', val)
-  }
-})
+/** Array of selected states */
+const model = defineModel({ type: Array })
 
 const maxVisibleStates = 4
 
-function removeItem (key) {
-  localValue.value = localValue.value.filter(item => item !== key)
+function removeItem (index) {
+  model.value.splice(index, 1)
 }
 
 function selectAll () {
-  localValue.value = props.items
+  model.value = props.items
 }
 </script>

src/components/cylc/analysis/TimeSeries.vue

@@ -33,14 +33,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         ref="selectTasks"
       >
         <template v-slot:prepend-item>
-          <v-card-actions class="mt-n2">
+          <v-select-actions>
             <v-btn @click="selectSearchResults">
               Select all
             </v-btn>
             <v-btn @click="deselectSearchResults">
               Deselect all
             </v-btn>
-          </v-card-actions>
+          </v-select-actions>
           <v-divider/>
         </template>
       </v-autocomplete>

src/plugins/vuetify.js

@@ -22,6 +22,7 @@ import { VCombobox } from 'vuetify/components/VCombobox'
 import { VSelect } from 'vuetify/components/VSelect'
 import { VTextarea } from 'vuetify/components/VTextarea'
 import { VTextField } from 'vuetify/components/VTextField'
+import { VCardActions } from 'vuetify/components/VCard'
 import colors from 'vuetify/util/colors'
 import { mdiClose } from '@mdi/js'
 import { useReducedAnimation } from '@/composables/localStorage'
@@ -75,11 +76,20 @@ export const vuetifyOptions = {
       mdi
     }
   },
+  aliases: {
+    VSelectActions: VCardActions,
+  },
   defaults: {
     VTooltip: {
       activator: 'parent',
       location: 'bottom',
     },
+    VList: {
+      slim: true,
+    },
+    VSelectActions: {
+      class: 'mt-n2'
+    },
     ...inputDefaults
   },
 }

tests/e2e/specs/tree.cy.js

@@ -267,18 +267,14 @@ describe('Tree view', () => {
 
     it('Provides a select all functionality', () => {
       cy.visit('/#/tree/one')
-      cy
-        .get('[data-cy="filter task state"]')
+      cy.get('[data-cy="filter task state"]')
         .get('.v-list-item--active')
         .should('have.length', 0)
-      cy
-        .get('[data-cy="filter task state"]')
+      cy.get('[data-cy="filter task state"]')
         .click()
-        .get('.v-list-item')
-        .contains('Select All')
-        .click({ force: true })
-      cy
-        .get('[data-cy="filter task state"]')
+        .get('[data-cy=task-filter-select-all]')
+        .click()
+      cy.get('[data-cy="filter task state"]')
         .get('.v-list-item--active')
         .should('have.length', 8)
     })