Lots of changes
This commit is contained in:
Simon Pocrnjič
@@ -1,7 +1,3 @@
|
||||
<template>
|
||||
<svg viewBox="0 0 317 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M74.09 30.04V13h-4.14v21H82.1v-3.96h-8.01zM95.379 19v1.77c-1.08-1.35-2.7-2.19-4.89-2.19-3.99 0-7.29 3.45-7.29 7.92s3.3 7.92 7.29 7.92c2.19 0 3.81-.84 4.89-2.19V34h3.87V19h-3.87zm-4.17 11.73c-2.37 0-4.14-1.71-4.14-4.23 0-2.52 1.77-4.23 4.14-4.23 2.4 0 4.17 1.71 4.17 4.23 0 2.52-1.77 4.23-4.17 4.23zM106.628 21.58V19h-3.87v15h3.87v-7.17c0-3.15 2.55-4.05 4.56-3.81V18.7c-1.89 0-3.78.84-4.56 2.88zM124.295 19v1.77c-1.08-1.35-2.7-2.19-4.89-2.19-3.99 0-7.29 3.45-7.29 7.92s3.3 7.92 7.29 7.92c2.19 0 3.81-.84 4.89-2.19V34h3.87V19h-3.87zm-4.17 11.73c-2.37 0-4.14-1.71-4.14-4.23 0-2.52 1.77-4.23 4.14-4.23 2.4 0 4.17 1.71 4.17 4.23 0 2.52-1.77 4.23-4.17 4.23zM141.544 19l-3.66 10.5-3.63-10.5h-4.26l5.7 15h4.41l5.7-15h-4.26zM150.354 28.09h11.31c.09-.51.15-1.02.15-1.59 0-4.41-3.15-7.92-7.59-7.92-4.71 0-7.92 3.45-7.92 7.92s3.18 7.92 8.22 7.92c2.88 0 5.13-1.17 6.54-3.21l-3.12-1.8c-.66.87-1.86 1.5-3.36 1.5-2.04 0-3.69-.84-4.23-2.82zm-.06-3c.45-1.92 1.86-3.03 3.93-3.03 1.62 0 3.24.87 3.72 3.03h-7.65zM164.516 34h3.87V12.1h-3.87V34zM185.248 34.36c3.69 0 6.9-2.01 6.9-6.3V13h-2.1v15.06c0 3.03-2.07 4.26-4.8 4.26-2.19 0-3.93-.78-4.62-2.61l-1.77 1.05c1.05 2.43 3.57 3.6 6.39 3.6zM203.124 18.64c-4.65 0-7.83 3.45-7.83 7.86 0 4.53 3.24 7.86 7.98 7.86 3.03 0 5.34-1.41 6.6-3.45l-1.74-1.02c-.81 1.44-2.46 2.55-4.83 2.55-3.18 0-5.55-1.89-5.97-4.95h13.17c.03-.3.06-.63.06-.93 0-4.11-2.85-7.92-7.44-7.92zm0 1.92c2.58 0 4.98 1.71 5.4 5.01h-11.19c.39-2.94 2.64-5.01 5.79-5.01zM221.224 20.92V19h-4.32v-4.2l-1.98.6V19h-3.15v1.92h3.15v9.09c0 3.6 2.25 4.59 6.3 3.99v-1.74c-2.91.12-4.32.33-4.32-2.25v-9.09h4.32zM225.176 22.93c0-1.62 1.59-2.37 3.15-2.37 1.44 0 2.97.57 3.6 2.1l1.65-.96c-.87-1.86-2.79-3.06-5.25-3.06-3 0-5.13 1.89-5.13 4.29 0 5.52 8.76 3.39 8.76 7.11 0 1.77-1.68 2.4-3.45 2.4-2.01 0-3.57-.99-4.11-2.52l-1.68.99c.75 1.92 2.79 3.45 5.79 3.45 3.21 0 5.43-1.77 5.43-4.32 0-5.52-8.76-3.39-8.76-7.11zM244.603 20.92V19h-4.32v-4.2l-1.98.6V19h-3.15v1.92h3.15v9.09c0 3.6 2.25 4.59 6.3 3.99v-1.74c-2.91.12-4.32.33-4.32-2.25v-9.09h4.32zM249.883 21.49V19h-1.98v15h1.98v-8.34c0-3.72 2.34-4.98 4.74-4.98v-1.92c-1.92 0-3.69.63-4.74 2.73zM263.358 18.64c-4.65 0-7.83 3.45-7.83 7.86 0 4.53 3.24 7.86 7.98 7.86 3.03 0 5.34-1.41 6.6-3.45l-1.74-1.02c-.81 1.44-2.46 2.55-4.83 2.55-3.18 0-5.55-1.89-5.97-4.95h13.17c.03-.3.06-.63.06-.93 0-4.11-2.85-7.92-7.44-7.92zm0 1.92c2.58 0 4.98 1.71 5.4 5.01h-11.19c.39-2.94 2.64-5.01 5.79-5.01zM286.848 19v2.94c-1.26-2.01-3.39-3.3-6.06-3.3-4.23 0-7.74 3.42-7.74 7.86s3.51 7.86 7.74 7.86c2.67 0 4.8-1.29 6.06-3.3V34h1.98V19h-1.98zm-5.91 13.44c-3.33 0-5.91-2.61-5.91-5.94 0-3.33 2.58-5.94 5.91-5.94s5.91 2.61 5.91 5.94c0 3.33-2.58 5.94-5.91 5.94zM309.01 18.64c-1.92 0-3.75.87-4.86 2.73-.84-1.74-2.46-2.73-4.56-2.73-1.8 0-3.42.72-4.59 2.55V19h-1.98v15H295v-8.31c0-3.72 2.16-5.13 4.32-5.13 2.13 0 3.51 1.41 3.51 4.08V34h1.98v-8.31c0-3.72 1.86-5.13 4.17-5.13 2.13 0 3.66 1.41 3.66 4.08V34h1.98v-9.36c0-3.75-2.31-6-5.61-6z" class="fill-black" />
|
||||
<path d="M11.395 44.428C4.557 40.198 0 32.632 0 24 0 10.745 10.745 0 24 0a23.891 23.891 0 0113.997 4.502c-.2 17.907-11.097 33.245-26.602 39.926z" fill="#6875F5" />
|
||||
<path d="M14.134 45.885A23.914 23.914 0 0024 48c13.255 0 24-10.745 24-24 0-3.516-.756-6.856-2.115-9.866-4.659 15.143-16.608 27.092-31.75 31.751z" fill="#6875F5" />
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-20 h-20" viewBox="0 -960 960 960" fill="#5985E1"><path d="M480-80q-140-35-230-162.5T160-522v-238l320-120 320 120v238q0 78-21.5 154.5T703-225L563-359q-19 11-40.16 18-21.16 7-42.84 7-62 0-105.5-43T331-482.5q0-62.5 43.5-106T480-632q62 0 105.5 43.5T629-482q0 21-6 42t-19 38l88 84q24-43 36-96.5T740-522v-198.48L480-815l-260 94.52V-522q0 131 72.5 236.5T480.2-142q28.8-8 70.3-33t65.5-48l42 43q-35 32-83.5 60.5T480-80Zm.2-314q36.8 0 62.8-25.5t26-63q0-37.5-26.2-63.5-26.21-26-63-26-36.8 0-62.8 26t-26 63.5q0 37.5 26.2 63 26.21 25.5 63 25.5Zm-1.2-90Z"/></svg>
|
||||
</template>
|
||||
|
||||
@@ -1,6 +1,3 @@
|
||||
<template>
|
||||
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.395 44.428C4.557 40.198 0 32.632 0 24 0 10.745 10.745 0 24 0a23.891 23.891 0 0113.997 4.502c-.2 17.907-11.097 33.245-26.602 39.926z" fill="#6875F5" />
|
||||
<path d="M14.134 45.885A23.914 23.914 0 0024 48c13.255 0 24-10.745 24-24 0-3.516-.756-6.856-2.115-9.866-4.659 15.143-16.608 27.092-31.75 31.751z" fill="#6875F5" />
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-20 h-20" viewBox="0 -960 960 960" fill="#5985E1"><path d="M480-80q-140-35-230-162.5T160-522v-238l320-120 320 120v238q0 78-21.5 154.5T703-225L563-359q-19 11-40.16 18-21.16 7-42.84 7-62 0-105.5-43T331-482.5q0-62.5 43.5-106T480-632q62 0 105.5 43.5T629-482q0 21-6 42t-19 38l88 84q24-43 36-96.5T740-522v-198.48L480-815l-260 94.52V-522q0 131 72.5 236.5T480.2-142q28.8-8 70.3-33t65.5-48l42 43q-35 32-83.5 60.5T480-80Zm.2-314q36.8 0 62.8-25.5t26-63q0-37.5-26.2-63.5-26.21-26-63-26-36.8 0-62.8 26t-26 63.5q0 37.5 26.2 63 26.21 25.5 63 25.5Zm-1.2-90Z"/></svg>
|
||||
</template>
|
||||
|
||||
@@ -4,14 +4,6 @@ import { Link } from '@inertiajs/vue3';
|
||||
|
||||
<template>
|
||||
<Link :href="'/'">
|
||||
<svg
|
||||
class="w-16 h-16"
|
||||
viewBox="0 0 48 48"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M11.395 44.428C4.557 40.198 0 32.632 0 24 0 10.745 10.745 0 24 0a23.891 23.891 0 0113.997 4.502c-.2 17.907-11.097 33.245-26.602 39.926z" fill="#6875F5" />
|
||||
<path d="M14.134 45.885A23.914 23.914 0 0024 48c13.255 0 24-10.745 24-24 0-3.516-.756-6.856-2.115-9.866-4.659 15.143-16.608 27.092-31.75 31.751z" fill="#6875F5" />
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-32 h-32" viewBox="0 -960 960 960" fill="#5985E1"><path d="M480-80q-140-35-230-162.5T160-522v-238l320-120 320 120v238q0 78-21.5 154.5T703-225L563-359q-19 11-40.16 18-21.16 7-42.84 7-62 0-105.5-43T331-482.5q0-62.5 43.5-106T480-632q62 0 105.5 43.5T629-482q0 21-6 42t-19 38l88 84q24-43 36-96.5T740-522v-198.48L480-815l-260 94.52V-522q0 131 72.5 236.5T480.2-142q28.8-8 70.3-33t65.5-48l42 43q-35 32-83.5 60.5T480-80Zm.2-314q36.8 0 62.8-25.5t26-63q0-37.5-26.2-63.5-26.21-26-63-26-36.8 0-62.8 26t-26 63.5q0 37.5 26.2 63 26.21 25.5 63 25.5Zm-1.2-90Z"/></svg>
|
||||
</Link>
|
||||
</template>
|
||||
|
||||
@@ -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>
|
||||
@@ -0,0 +1,21 @@
|
||||
<script setup>
|
||||
|
||||
defineProps({
|
||||
breadcrumbs: Array
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav v-if="breadcrumbs" class="flex" aria-label="Breadcrumb">
|
||||
<ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
|
||||
<li v-for="(page, index) in breadcrumbs" class="flex items-center">
|
||||
<svg v-if="index !== 0" class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
|
||||
</svg>
|
||||
<a v-if="page.current === undefined" :href="page.url" class="ms-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:ms-2 dark:text-gray-400 dark:hover:text-white">{{ page.title }}</a>
|
||||
<span v-else class="ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400">{{ page.title }}</span>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</template>
|
||||
@@ -9,7 +9,7 @@ const props = defineProps({
|
||||
|
||||
<template>
|
||||
<div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2">
|
||||
<div class=" rounded p-2 shadow" v-for="item in items">
|
||||
<div class="rounded p-2 shadow" v-for="item in items">
|
||||
<p class="text-sm leading-5 md text-gray-500">{{ item.title }}</p>
|
||||
<p class="text-lg leading-7 text-gray-900">{{ item.val }}</p>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
<script setup>
|
||||
import { Link } from '@inertiajs/vue3';
|
||||
|
||||
const props = defineProps({
|
||||
links: Array,
|
||||
from: Number,
|
||||
to: Number,
|
||||
total: Number
|
||||
});
|
||||
|
||||
const num = props.links.length;
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="flex items-center justify-between bg-white px-4 py-3 sm:px-6">
|
||||
<div class="flex flex-1 justify-between sm:hidden">
|
||||
<a href="#" class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Previous</a>
|
||||
<a href="#" class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Next</a>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-700">
|
||||
Showing
|
||||
<span class="font-medium">{{ from }}</span>
|
||||
to
|
||||
<span class="font-medium">{{ to }}</span>
|
||||
of
|
||||
<span class="font-medium">{{ total }}</span>
|
||||
results
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<nav class="isolate inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
|
||||
<template v-for="(link, index) in links">
|
||||
<component
|
||||
:is="link.url ? Link : 'span'"
|
||||
v-if="index === 0 || index === (num - 1)"
|
||||
:href="link.url"
|
||||
class="relative inline-flex items-center px-2 py-2 ring-1 ring-inset ring-gray-300 focus:z-20 focus:outline-offset-0"
|
||||
:class="{
|
||||
'rounded-l-md': index === 0,
|
||||
'rounded-r-md': index === (num - 1),
|
||||
'text-gray-900 hover:bg-gray-50': link.url,
|
||||
'text-gray-400 bg-gray-100': ! link.url}"
|
||||
>
|
||||
|
||||
<span class="sr-only">
|
||||
{{ index === 0 ? 'Previous' : 'Next' }}
|
||||
</span>
|
||||
<svg v-if="index === 0" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path fill-rule="evenodd" d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<svg v-else class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path fill-rule="evenodd" d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</component>
|
||||
<component
|
||||
v-else
|
||||
:is="link.url ? Link : 'span'"
|
||||
:href="link.url"
|
||||
v-html="link.label"
|
||||
class="relative inline-flex items-center px-4 py-2 text-sm font-semibold focus:outline-offset-0"
|
||||
:class="{
|
||||
'text-gray-700 ring-1 ring-inset ring-gray-300': ! link.url,
|
||||
'text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20': link.url && ! link.active,
|
||||
'z-10 bg-blue-600 text-white focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600': link.url && link.active
|
||||
}"
|
||||
>
|
||||
|
||||
</component>
|
||||
</template>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,36 @@
|
||||
<script setup>
|
||||
|
||||
const props = defineProps({
|
||||
person: Object
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid grid-rows-* grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2">
|
||||
<div class="rounded p-2 shadow">
|
||||
<p class="text-xs leading-5 md:text-sm text-gray-500">Nu.</p>
|
||||
<p class="text-sm md:text-base leading-7 text-gray-900">{{ person.nu }}</p>
|
||||
</div>
|
||||
<div class="rounded p-2 shadow">
|
||||
<p class="text-sm leading-5 md:text-sm text-gray-500">Name.</p>
|
||||
<p class="text-sm md:text-base leading-7 text-gray-900">{{ person.full_name }}</p>
|
||||
</div>
|
||||
<div class="rounded p-2 shadow">
|
||||
<p class="text-sm leading-5 md:text-sm text-gray-500">Tax NU.</p>
|
||||
<p class="text-sm md:text-base leading-7 text-gray-900">{{ person.tax_number }}</p>
|
||||
</div>
|
||||
<div class="rounded p-2 shadow">
|
||||
<p class="text-sm leading-5 md:text-sm text-gray-500">Social security NU.</p>
|
||||
<p class="text-sm md:text-base leading-7 text-gray-900">{{ person.social_security_number }}</p>
|
||||
</div>
|
||||
<div class="md:col-span-full lg:col-span-2 rounded p-2 shadow">
|
||||
<p class="text-sm leading-5 md:text-sm text-gray-500">Address</p>
|
||||
<p class="text-sm md:text-base leading-7 text-gray-900">{{ person.address }}</p>
|
||||
</div>
|
||||
<div class="md:col-span-full lg:col-span-2 rounded p-2 shadow">
|
||||
<p class="text-sm leading-5 md:text-sm text-gray-500">Description</p>
|
||||
<p class="text-sm md:text-base leading-7 text-gray-900">{{ person.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,25 @@
|
||||
<script setup>
|
||||
import { debounce } from 'lodash';
|
||||
import { ref, watch } from 'vue';
|
||||
import TextInput from '@/Components/TextInput.vue';
|
||||
import { router } from '@inertiajs/vue3';
|
||||
|
||||
const props = defineProps({
|
||||
options: Object
|
||||
});
|
||||
|
||||
const search = ref(props.options.search)
|
||||
|
||||
watch(search, debounce((value) => {
|
||||
const routeOptions = props.options.route.options ?? null;
|
||||
router.get(
|
||||
route(props.options.route.link, routeOptions),
|
||||
{ search: value },
|
||||
{ preserveState: true, replace: true }
|
||||
);
|
||||
}, 300));
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<TextInput v-model="search" title="Search" placeholder="Search..." />
|
||||
</template>
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="md:col-span-1 flex justify-between">
|
||||
<div class="px-4 sm:px-0">
|
||||
<h3 class="text-lg font-medium text-gray-900">
|
||||
<h3 class="text-base lg:text-lg font-medium text-gray-900">
|
||||
<slot name="title" />
|
||||
</h3>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user