Lots of changes

resources/js/Components/BasicTable.vue

@@ -1,27 +1,192 @@
 <script setup>
+import { FwbButton, FwbModal, FwbTable, FwbTableBody, FwbTableCell, FwbTableHead, FwbTableHeadCell, FwbTableRow } from 'flowbite-vue';
+import Drawer from './Drawer.vue';
+import { useForm } from '@inertiajs/vue3';
+import { ref } from 'vue';
+import TextInput from './TextInput.vue';
+import InputLabel from './InputLabel.vue';
+import ActionMessage from './ActionMessage.vue';
+import PrimaryButton from './PrimaryButton.vue';
+import Modal from './Modal.vue';
+import SecondaryButton from './SecondaryButton.vue';
 
-defineProps({
+
+const props = defineProps({
   title: String,
   description: String,
-  tableHead: Array,
-  tableBody: Array
+  header: Array,
+  body: Array,
+  editor: {
+    type: Boolean,
+    default: false
+  },
+  options: {
+    type: Object,
+    default: {}
+  }
 });
 
+const drawerUpdateForm = ref(false);
+const modalRemove = ref(false);
+const formUpdate = (props.editor) ? useForm(props.options.editor_data.form.values) : false;
+const formRemove = (props.editor) ? useForm({type: 'soft', key: null}) : false;
+
+const openEditor = (ref, data) => {
+  formUpdate[ref.key] = ref.val;
+  for(const [key, value] of Object.entries(data)) {
+    formUpdate[key] = value;
+  }
+  drawerUpdateForm.value = true;
+}
+
+const closeEditor = () => {
+  drawerUpdateForm.value = false;
+}
+
+const setUpdateRoute = (name, params = false, index) => {
+  if(!params){
+    return route(name, index)
+  }
+
+  return route(name, [params, index]);
+}
+
+const update = () => {
+ 
+  const putRoute = setUpdateRoute(
+    props.options.editor_data.form.route.name,
+    props.options.editor_data.form.route.params,
+    formUpdate[props.options.editor_data.form.key]
+  )
+
+  formUpdate.put(putRoute, {
+    onSuccess: () => {
+      closeEditor();
+      formUpdate.reset();
+      console.log('ssss')
+    },
+    preserveScroll: true
+  });
+}
+
+const modalRemoveTitle = ref('');
+
+const closeModal = () => {
+  modalRemove.value = false;
+}
+
+const showModal = (key, title) => {
+  modalRemoveTitle.value = title;
+  formRemove.key = key;
+  modalRemove.value = true;
+}
+
+const remove = () => {
+  const removeRoute = setUpdateRoute(
+    props.options.editor_data.form.route_remove.name,
+    props.options.editor_data.form.route_remove.params,
+    formRemove.key
+  )
+
+  formRemove.delete(removeRoute, {
+    onSuccess: () => {
+      closeModal();
+      formRemove.reset();
+    },
+    preserveScroll: true
+  });
+}
+
 </script>
 <template>
   <div class="relative overflow-x-auto">
-    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-      <thead class="text-xs text-gray-700 uppercase bg-gray-200 dark:bg-gray-700 dark:text-gray-400">
-        <th scope="col" class="px-6 py-3 font-bold" v-for="h in tableHead">{{ h.data }}</th>
-      </thead>
-      <tbody>
-        <tr class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-100 hover:bg-gray-100 even:dark:bg-gray-800 border-b dark:border-gray-700" v-for="row in tableBody">
-          <th scope="row" class="px-6 py-4 font-light text-gray-900 whitespace-nowrap dark:text-white" v-for="col in row.cols">
-            <a v-if="col.link !== undefined" :href="route(col.link.route, col.link.options)">{{ col.data }}</a>
+    <FwbTable hoverable>
+      <FwbTableHead>
+        <FwbTableHeadCell v-for="h in header">{{ h.data }}</FwbTableHeadCell>
+        <FwbTableHeadCell v-if="editor"></FwbTableHeadCell>
+        <FwbTableHeadCell v-else />
+      </FwbTableHead>
+      <FwbTableBody>
+        <FwbTableRow v-for="(row, key, parent_index) in body" :class="row.options.class" >
+          <FwbTableCell v-for="col in row.cols">  
+            <a v-if="col.link !== undefined" :class="col.link.css" :href="route(col.link.route, col.link.options)">{{ col.data }}</a>
             <span v-else>{{ col.data }}</span>
-          </th>
-        </tr>
-      </tbody>
-    </table>
+          </FwbTableCell>
+          <FwbTableCell v-if="editor">
+            <fwb-button class="mr-1" size="sm" color="default" @click="openEditor(row.options.ref, row.options.editable)" outline>Edit</fwb-button>
+            <fwb-button size="sm" color="red" @click="showModal(row.options.ref.val, row.options.title)" outline>Remove</fwb-button>
+          </FwbTableCell>
+          <FwbTableCell v-else />
+        </FwbTableRow>
+      </FwbTableBody>
+    </FwbTable>
   </div>
+  <Drawer
+    v-if="editor"
+    :show="drawerUpdateForm"
+    @close="drawerUpdateForm = false"
+  >
+    
+    <template #title>Update {{ options.editor_data.title }}</template>
+    <template #content>
+      <form @submit.prevent="update">
+        <div v-for="e in options.editor_data.form.el" class="col-span-6 sm:col-span-4 mb-4">
+          <InputLabel :for="e.id" :value="e.label"/>
+          <TextInput 
+            v-if="e.type === 'text'" 
+            :id="e.id"
+            :ref="e.ref"
+            type="text"
+            :autocomplete="e.autocomplete"
+            class="mt-1 block w-full"
+            v-model="formUpdate[e.bind]"
+          />
+          <select
+            v-else-if="e.type === 'select'"
+            class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
+            :id="e.id"
+            :ref="e.ref"
+            v-model="formUpdate[e.bind]"
+          >
+            <option v-for="op in e.selectOptions" :value="op.val">{{ op.desc }}</option>
+          </select>
+        </div>
+        <div class="flex justify-end mt-4">
+            <ActionMessage :on="formUpdate.recentlySuccessful" class="me-3"> 
+                Saved.
+            </ActionMessage>
+            <PrimaryButton :class="{ 'opacity-25': formUpdate.processing }" :disabled="formUpdate.processing">
+                Save
+            </PrimaryButton>
+        </div>
+      </form>
+    </template>
+  </Drawer>
+
+  <Modal
+    v-if="editor"
+    :show="modalRemove"
+    @close="closeModal"
+    maxWidth="sm"
+  >
+    <form @submit.prevent="remove">
+      <div class="p-3">
+        <div class="text-lg text-center py-2 mb-4">
+          Remove {{ options.editor_data.title }} <b>{{ modalRemoveTitle }}</b>?
+        </div>
+    
+        <div class="flex justify-between">
+          <SecondaryButton type="button" @click="closeModal">
+            Cancel
+          </SecondaryButton>
+          <ActionMessage :on="formRemove.recentlySuccessful" class="me-3"> 
+            Deleted.
+          </ActionMessage>
+          <PrimaryButton class="bg-red-700" :class="{ 'opacity-25': formRemove.processing }" :disabled="formRemove.processing">
+                Delete
+          </PrimaryButton>
+        </div>
+      </div>
+    </form>
+  </Modal>
 </template>