sipo/Teren-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mager updated

Browse Source
This commit is contained in:
Simon Pocrnjič
2025-09-27 17:45:55 +02:00
parent d17e34941b
commit 7227c888d4
74 changed files with 6339 additions and 342 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Components/BasicTable.vue
+44 -35
View File
@@ -1,6 +1,6 @@
<script setup>
import { FwbButton, FwbModal, FwbTable, FwbTableBody, FwbTableCell, FwbTableHead, FwbTableHeadCell, FwbTableRow } from 'flowbite-vue';
import Drawer from './Drawer.vue';
import { FwbButton, FwbTable, FwbTableBody, FwbTableCell, FwbTableHead, FwbTableHeadCell, FwbTableRow } from 'flowbite-vue';
import DialogModal from './DialogModal.vue';
import { useForm } from '@inertiajs/vue3';
import { ref } from 'vue';
import TextInput from './TextInput.vue';
@@ -63,7 +63,6 @@ const update = () => {
onSuccess: () => {
closeEditor();
formUpdate.reset();
console.log('ssss')
},
preserveScroll: true
});
@@ -99,38 +98,48 @@ const remove = () => {
</script>
<template>
<div class="relative overflow-x-auto">
<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>
</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>
<!-- Header -->
<div v-if="title || description" class="mb-4">
<h2 v-if="title" class="text-lg font-semibold text-gray-900">{{ title }}</h2>
<p v-if="description" class="mt-1 text-sm text-gray-600">{{ description }}</p>
</div>
<div class="relative overflow-x-auto rounded-lg border border-gray-200 bg-white shadow-sm">
<FwbTable hoverable striped class="text-sm">
<FwbTableHead class="sticky top-0 z-10 bg-gray-50/90 backdrop-blur supports-[backdrop-filter]:bg-gray-50/80 border-b border-gray-200 shadow-sm">
<FwbTableHeadCell v-for="(h, hIndex) in header" :key="hIndex" class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-3 first:pl-6 last:pr-6">{{ h.data }}</FwbTableHeadCell>
<FwbTableHeadCell v-if="editor" class="w-px text-gray-700 py-3"></FwbTableHeadCell>
<FwbTableHeadCell v-else class="w-px text-gray-700 py-3" />
</FwbTableHead>
<FwbTableBody>
<FwbTableRow v-for="(row, key, parent_index) in body" :key="key" :class="row.options.class">
<FwbTableCell v-for="(col, colIndex) in row.cols" :key="colIndex" class="align-middle">
<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>
</FwbTableCell>
<FwbTableCell v-if="editor" class="text-right whitespace-nowrap">
<fwb-button class="mr-2" 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 v-if="!body || body.length === 0" class="p-6 text-center text-sm text-gray-500">No records found.</div>
</div>
</div>
<Drawer
<DialogModal
v-if="editor"
:show="drawerUpdateForm"
@close="drawerUpdateForm = false"
maxWidth="xl"
>
<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">
<form @submit.prevent="update" class="pt-2">
<div v-for="(e, eIndex) in options.editor_data.form.el" :key="eIndex" class="col-span-6 sm:col-span-4 mb-4">
<InputLabel :for="e.id" :value="e.label"/>
<TextInput
v-if="e.type === 'text'"
@@ -138,20 +147,20 @@ const remove = () => {
:ref="e.ref"
type="text"
:autocomplete="e.autocomplete"
class="mt-1 block w-full"
class="mt-1 block w-full text-sm"
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"
class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm text-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>
<option v-for="(op, opIndex) in e.selectOptions" :key="opIndex" :value="op.val">{{ op.desc }}</option>
</select>
</div>
<div class="flex justify-end mt-4">
<div class="flex justify-end mt-6 gap-3">
<ActionMessage :on="formUpdate.recentlySuccessful" class="me-3">
Saved.
</ActionMessage>
@@ -161,7 +170,7 @@ const remove = () => {
</div>
</form>
</template>
</Drawer>
</DialogModal>
<Modal
v-if="editor"
@@ -170,12 +179,12 @@ const remove = () => {
maxWidth="sm"
>
<form @submit.prevent="remove">
<div class="p-3">
<div class="text-lg text-center py-2 mb-4">
<div class="p-6">
<div class="text-base font-medium text-center py-2 mb-4 text-gray-900">
Remove {{ options.editor_data.title }} <b>{{ modalRemoveTitle }}</b>?
</div>
<div class="flex justify-between">
<div class="flex justify-between items-center">
<SecondaryButton type="button" @click="closeModal">
Cancel
</SecondaryButton>