WIP

Author: pascalbaljet

js/Components/ButtonWithDropdown.vue

@@ -4,6 +4,7 @@
       <button
         ref="button"
         type="button"
+        :dusk="dusk"
         :disabled="disabled"
         class="w-full bg-white border rounded-md shadow-sm px-4 py-2 inline-flex justify-center text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
         :class="{'border-green-300': active, 'border-gray-300': !active, 'cursor-not-allowed': disabled }"
@@ -46,6 +47,12 @@ const props = defineProps({
         required: false,
     },
 
+    dusk: {
+        type: String,
+        default: null,
+        required: false,
+    },
+
     disabled: {
         type: Boolean,
         default: false,

js/Components/Table.vue

@@ -2,7 +2,7 @@
   <fieldset
     :key="`table-${name}`"
     :class="{'opacity-75': isVisiting}"
-    :disabled="isVisiting"
+    :disabled="preventOverlappingRequests && isVisiting"
   >
     <div class="flex space-x-4">
       <slot

js/Components/TableColumns.vue

@@ -1,6 +1,7 @@
 <template>
   <ButtonWithDropdown
     placement="bottom-end"
+    dusk="columns-dropdown"
     :active="hasHiddenColumns"
   >
     <template #button>
@@ -72,6 +73,7 @@
               :aria-pressed="!column.hidden"
               :aria-labelledby="`toggle-column-${column.key}`"
               :aria-describedby="`toggle-column-${column.key}`"
+              :dusk="`toggle-column-${column.key}`"
               @click.prevent="onChange(column.key, column.hidden)"
             >
               <span class="sr-only">Column status</span>
@@ -129,5 +131,4 @@ function oneVisibleFilterLeft() {
         return !column.hidden;
     }).length === 1;
 }
-
 </script>