Whoops

Author: pascalbaljet

app/resources/js/Pages/Users.vue

@@ -1,9 +1,9 @@
 <script setup>
 import BreezeGuestLayout from "@/Layouts/Guest.vue";
-// import { Table } from "@protonemedia/inertiajs-tables-laravel-query-builder";
+import { Table } from "@protonemedia/inertiajs-tables-laravel-query-builder";
 
 // use this one for development:
-import Table from "../../../../js/Components/Table.vue"
+// import Table from "../../../../js/Components/Table.vue"
 
 defineProps(["users"])
 </script>

js/Components/Table.vue

@@ -21,24 +21,45 @@
         />
       </slot>
 
-      <slot
-        name="tableGlobalSearch"
-        :has-global-search="queryBuilderProps.globalSearch"
-        :label="queryBuilderProps.globalSearch ? queryBuilderProps.globalSearch.label : null"
-        :value="queryBuilderProps.globalSearch ? queryBuilderProps.globalSearch.value : null"
-        :on-change="changeGlobalSearchValue"
+      <div
+        v-if="queryBuilderProps.globalSearch || canBeReset"
+        class="flex flex-row "
+        :class="{
+          'space-x-4': queryBuilderProps.globalSearch && canBeReset,
+          'flex-grow': queryBuilderProps.globalSearch
+        }"
       >
-        <div
-          v-if="queryBuilderProps.globalSearch"
-          class="flex-grow"
-        >
-          <TableGlobalSearch
-            :label="queryBuilderProps.globalSearch.label"
-            :value="queryBuilderProps.globalSearch.value"
+        <div class="flex-grow">
+          <slot
+            name="tableGlobalSearch"
+            :has-global-search="queryBuilderProps.globalSearch"
+            :label="queryBuilderProps.globalSearch ? queryBuilderProps.globalSearch.label : null"
+            :value="queryBuilderProps.globalSearch ? queryBuilderProps.globalSearch.value : null"
             :on-change="changeGlobalSearchValue"
-          />
+          >
+            <TableGlobalSearch
+              v-if="queryBuilderProps.globalSearch"
+              :label="queryBuilderProps.globalSearch.label"
+              :value="queryBuilderProps.globalSearch.value"
+              :on-change="changeGlobalSearchValue"
+            />
+          </slot>
         </div>
-      </slot>
+
+        <slot
+          name="tableReset"
+          can-be-reset="canBeReset"
+          :on-click="resetQuery"
+        >
+          <div>
+            <TableReset
+              v-if="canBeReset"
+              :on-click="resetQuery"
+            />
+          </div>
+        </slot>
+      </div>
+
 
       <slot
         name="tableAddSearchRow"
@@ -170,10 +191,12 @@ import TableColumns from "./TableColumns.vue";
 import TableFilter from "./TableFilter.vue";
 import TableGlobalSearch from "./TableGlobalSearch.vue";
 import TableSearchRows from "./TableSearchRows.vue";
+import TableReset from "./TableReset.vue";
 import TableWrapper from "./TableWrapper.vue";
-import { computed, ref, watch } from "vue"
+import { computed, nextTick, ref, watch } from "vue"
 import qs from "qs";
 import clone from "lodash-es/clone";
+import each from "lodash-es/each";
 import filter from "lodash-es/filter";
 import findKey from "lodash-es/findKey";
 import forEach from "lodash-es/forEach";
@@ -313,7 +336,6 @@ const hasData = computed(() => {
 
 //
 
-
 function disableSearchInput(key) {
     forcedVisibleSearchInputs.value = forcedVisibleSearchInputs.value.filter((search) => search != key);
 
@@ -324,7 +346,55 @@ function showSearchInput(key) {
     forcedVisibleSearchInputs.value.push(key);
 }
 
-//
+const updates = ref(0)
+
+const canBeReset = computed(() => {
+    if(updates.value < 0){
+        return false;
+    }
+
+    if(forcedVisibleSearchInputs.value.length > 0){
+        return true;
+    }
+
+    const query = qs.parse(location.search.substring(1))
+    const keys = Object.keys(query);
+
+    if(keys.length === 0) {
+        return false;
+    }
+
+    if(keys.length === 1 && query.remember === "forget"){
+        return false;
+    }
+    if(keys.length === 1 && query.page == 1){
+        return false;
+    }
+
+    return true;
+});
+
+function resetQuery() {
+    forcedVisibleSearchInputs.value = [];
+
+    each(queryBuilderData.value.filters, (filter, key)=>{
+        queryBuilderData.value.filters[key].value = null;
+    })
+
+    each(queryBuilderData.value.searchInputs, (filter, key)=>{
+        queryBuilderData.value.searchInputs[key].value = null;
+    })
+
+    each(queryBuilderData.value.columns, (column, key) => {
+        queryBuilderData.value.columns[key].hidden = column.can_be_hidden
+            ? !queryBuilderProps.value.defaultVisibleToggleableColumns.includes(column.key)
+            : false;
+    })
+
+    queryBuilderData.value.sort = null;
+    queryBuilderData.value.cursor = null;
+    queryBuilderData.value.page = 1;
+}
 
 const debounceTimeouts = {};
 
@@ -398,14 +468,13 @@ function getColumnsForQuery() {
     }).sort();
 
     if (isEqual(visibleColumnKeys, queryBuilderProps.value.defaultVisibleToggleableColumns)){
-        visibleColumnKeys = {};
+        return {};
     }
 
     return visibleColumnKeys;
 }
 
 function dataForNewQueryString() {
-
     const filterForQuery = getFilterForQuery()
     const columnsForQuery = getColumnsForQuery()
 
@@ -489,6 +558,9 @@ function visit(url) {
             },
             onSuccess() {
                 queryBuilderProps.value = props.inertia.page.props.queryBuilderProps[props.name] || {}
+                queryBuilderData.value.cursor = queryBuilderProps.value.cursor
+                queryBuilderData.value.page = queryBuilderProps.value.page
+                updates.value++;
             }
         }
     );

js/Components/TableReset.vue

@@ -0,0 +1,33 @@
+<template>
+  <button
+    ref="button"
+    type="button"
+    dusk="reset-table"
+    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 border-gray-300"
+    aria-haspopup="true"
+    @click.prevent="onClick"
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="h-5 w-5 mr-2 text-gray-400"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+        clip-rule="evenodd"
+      />
+    </svg>
+    <span>Reset</span>
+  </button>
+</template>
+
+<script setup>
+defineProps({
+    onClick: {
+        type: Function,
+        required: true
+    }
+})
+</script>