Changes 0228092025 Laptop
This commit is contained in:
@@ -2,12 +2,13 @@
|
||||
import ActionMessage from '@/Components/ActionMessage.vue';
|
||||
import DialogModal from '@/Components/DialogModal.vue';
|
||||
import InputLabel from '@/Components/InputLabel.vue';
|
||||
import InputError from '@/Components/InputError.vue';
|
||||
import PrimaryButton from '@/Components/PrimaryButton.vue';
|
||||
import SectionTitle from '@/Components/SectionTitle.vue';
|
||||
import TextInput from '@/Components/TextInput.vue';
|
||||
import DatePickerField from '@/Components/DatePickerField.vue';
|
||||
import { useForm } from '@inertiajs/vue3';
|
||||
import { watch } from 'vue';
|
||||
import { watch, nextTick, ref as vRef } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
client_case: Object,
|
||||
@@ -22,7 +23,10 @@ console.log(props.types);
|
||||
const emit = defineEmits(['close']);
|
||||
|
||||
const close = () => {
|
||||
emit('close');
|
||||
// Clear any previous validation warnings when closing
|
||||
formContract.clearErrors()
|
||||
formContract.recentlySuccessful = false
|
||||
emit('close')
|
||||
}
|
||||
|
||||
// form state for create or edit
|
||||
@@ -58,6 +62,20 @@ watch(() => props.show, (open) => {
|
||||
// reset for create
|
||||
applyContract(null)
|
||||
}
|
||||
if (!open) {
|
||||
// Ensure warnings are cleared when dialog hides
|
||||
formContract.clearErrors()
|
||||
formContract.recentlySuccessful = false
|
||||
}
|
||||
})
|
||||
|
||||
// optional: focus the reference input when a reference validation error appears
|
||||
const contractRefInput = vRef(null)
|
||||
watch(() => formContract.errors.reference, async (err) => {
|
||||
if (err && props.show) {
|
||||
await nextTick()
|
||||
try { contractRefInput.value?.focus?.() } catch (e) {}
|
||||
}
|
||||
})
|
||||
|
||||
const storeOrUpdate = () => {
|
||||
@@ -90,6 +108,9 @@ const storeOrUpdate = () => {
|
||||
<template #title>{{ formContract.uuid ? 'Uredi pogodbo' : 'Dodaj pogodbo' }}</template>
|
||||
<template #content>
|
||||
<form @submit.prevent="storeOrUpdate">
|
||||
<div v-if="formContract.errors.reference" class="mb-4 rounded border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
|
||||
{{ formContract.errors.reference }}
|
||||
</div>
|
||||
<SectionTitle class="mt-4 border-b mb-4">
|
||||
<template #title>
|
||||
Pogodba
|
||||
@@ -102,9 +123,10 @@ const storeOrUpdate = () => {
|
||||
ref="contractRefInput"
|
||||
v-model="formContract.reference"
|
||||
type="text"
|
||||
class="mt-1 block w-full"
|
||||
:class="['mt-1 block w-full', formContract.errors.reference ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : '']"
|
||||
autocomplete="contract-reference"
|
||||
/>
|
||||
<InputError :message="formContract.errors.reference" />
|
||||
</div>
|
||||
<DatePickerField
|
||||
id="contractStartDate"
|
||||
|
||||
@@ -10,6 +10,8 @@ const props = defineProps({
|
||||
client_case: Object,
|
||||
contract_types: Array,
|
||||
contracts: { type: Array, default: () => [] },
|
||||
segments: { type: Array, default: () => [] },
|
||||
all_segments: { type: Array, default: () => [] },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['edit', 'delete', 'add-activity'])
|
||||
@@ -30,7 +32,8 @@ const onDelete = (c) => emit('delete', c)
|
||||
const onAddActivity = (c) => emit('add-activity', c)
|
||||
|
||||
// CaseObject dialog state
|
||||
import { ref } from 'vue'
|
||||
import { ref, computed } from 'vue'
|
||||
import { router } from '@inertiajs/vue3'
|
||||
const showObjectDialog = ref(false)
|
||||
const showObjectsList = ref(false)
|
||||
const selectedContract = ref(null)
|
||||
@@ -38,6 +41,39 @@ const openObjectDialog = (c) => { selectedContract.value = c; showObjectDialog.v
|
||||
const closeObjectDialog = () => { showObjectDialog.value = false; selectedContract.value = null }
|
||||
const openObjectsList = (c) => { selectedContract.value = c; showObjectsList.value = true }
|
||||
const closeObjectsList = () => { showObjectsList.value = false; selectedContract.value = null }
|
||||
|
||||
// Segment helpers
|
||||
const contractActiveSegment = (c) => {
|
||||
const arr = c?.segments || []
|
||||
return arr.find(s => s.pivot?.active) || arr[0] || null
|
||||
}
|
||||
const segmentName = (id) => props.segments.find(s => s.id === id)?.name || ''
|
||||
const confirmChange = ref({ show: false, contract: null, segmentId: null, fromAll: false })
|
||||
const askChangeSegment = (c, segmentId, fromAll = false) => {
|
||||
confirmChange.value = { show: true, contract: c, segmentId, fromAll }
|
||||
}
|
||||
const closeConfirm = () => { confirmChange.value = { show: false, contract: null, segmentId: null } }
|
||||
const doChangeSegment = () => {
|
||||
const { contract, segmentId, fromAll } = confirmChange.value
|
||||
if (!contract || !segmentId) return closeConfirm()
|
||||
if (fromAll) {
|
||||
router.post(route('clientCase.segments.attach', props.client_case), {
|
||||
segment_id: segmentId,
|
||||
contract_uuid: contract.uuid,
|
||||
make_active_for_contract: true,
|
||||
}, {
|
||||
preserveScroll: true,
|
||||
only: ['contracts', 'segments'],
|
||||
onFinish: () => closeConfirm(),
|
||||
})
|
||||
} else {
|
||||
router.post(route('clientCase.contract.updateSegment', { client_case: props.client_case.uuid, uuid: contract.uuid }), { segment_id: segmentId }, {
|
||||
preserveScroll: true,
|
||||
only: ['contracts'],
|
||||
onFinish: () => closeConfirm(),
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -47,6 +83,7 @@ const closeObjectsList = () => { showObjectsList.value = false; selectedContract
|
||||
<FwbTableHeadCell class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-3">Ref.</FwbTableHeadCell>
|
||||
<FwbTableHeadCell class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-3">Datum začetka</FwbTableHeadCell>
|
||||
<FwbTableHeadCell class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-3">Tip</FwbTableHeadCell>
|
||||
<FwbTableHeadCell class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-3">Segment</FwbTableHeadCell>
|
||||
<FwbTableHeadCell class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-3 text-right">Predano</FwbTableHeadCell>
|
||||
<FwbTableHeadCell class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-3 text-right">Odprto</FwbTableHeadCell>
|
||||
<FwbTableHeadCell class="uppercase text-xs font-semibold tracking-wide text-gray-700 py-3 text-center">Opis</FwbTableHeadCell>
|
||||
@@ -58,6 +95,43 @@ const closeObjectsList = () => { showObjectsList.value = false; selectedContract
|
||||
<FwbTableCell>{{ c.reference }}</FwbTableCell>
|
||||
<FwbTableCell>{{ formatDate(c.start_date) }}</FwbTableCell>
|
||||
<FwbTableCell>{{ c?.type?.name }}</FwbTableCell>
|
||||
<FwbTableCell>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-gray-700">{{ contractActiveSegment(c)?.name || '-' }}</span>
|
||||
<Dropdown width="64" align="left">
|
||||
<template #trigger>
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex items-center justify-center h-7 w-7 rounded-full hover:bg-gray-100"
|
||||
:class="{ 'opacity-50 cursor-not-allowed': !segments || segments.length === 0 }"
|
||||
:title="segments && segments.length ? 'Change segment' : 'No segments available for this case'"
|
||||
>
|
||||
<FontAwesomeIcon :icon="faPenToSquare" class="h-4 w-4 text-gray-600" />
|
||||
</button>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="py-1">
|
||||
<template v-if="segments && segments.length">
|
||||
<button v-for="s in segments" :key="s.id" type="button" class="w-full px-3 py-1.5 text-left text-sm hover:bg-gray-50" @click="askChangeSegment(c, s.id)">
|
||||
<span>{{ s.name }}</span>
|
||||
</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<template v-if="all_segments && all_segments.length">
|
||||
<div class="px-3 py-2 text-xs text-gray-500">Ni segmentov v tem primeru. Dodaj in nastavi segment:</div>
|
||||
<button v-for="s in all_segments" :key="s.id" type="button" class="w-full px-3 py-1.5 text-left text-sm hover:bg-gray-50" @click="askChangeSegment(c, s.id, true)">
|
||||
<span>{{ s.name }}</span>
|
||||
</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="px-3 py-2 text-sm text-gray-500">No segments configured.</div>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</FwbTableCell>
|
||||
<FwbTableCell class="text-right">{{ Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(c?.account?.initial_amount ?? 0) }}</FwbTableCell>
|
||||
<FwbTableCell class="text-right">{{ Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(c?.account?.balance_amount ?? 0) }}</FwbTableCell>
|
||||
<FwbTableCell class="text-center">
|
||||
@@ -149,6 +223,18 @@ const closeObjectsList = () => { showObjectsList.value = false; selectedContract
|
||||
</FwbTable>
|
||||
<div v-if="!contracts || contracts.length === 0" class="p-6 text-center text-sm text-gray-500">No contracts.</div>
|
||||
</div>
|
||||
<!-- Confirm change segment -->
|
||||
<div v-if="confirmChange.show" class="fixed inset-0 z-50 flex items-center justify-center bg-black/30">
|
||||
<div class="bg-white rounded-lg shadow-lg p-4 w-full max-w-sm">
|
||||
<div class="text-sm text-gray-800">
|
||||
Ali želite spremeniti segment za pogodbo <span class="font-medium">{{ confirmChange.contract?.reference }}</span>?
|
||||
</div>
|
||||
<div class="mt-4 flex justify-end gap-2">
|
||||
<button class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300" @click="closeConfirm">Prekliči</button>
|
||||
<button class="px-4 py-2 rounded bg-indigo-600 text-white hover:bg-indigo-700" @click="doChangeSegment">Potrdi</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<CaseObjectCreateDialog
|
||||
:show="showObjectDialog"
|
||||
@close="closeObjectDialog"
|
||||
|
||||
@@ -3,7 +3,7 @@ import PersonInfoGrid from "@/Components/PersonInfoGrid.vue";
|
||||
import SectionTitle from "@/Components/SectionTitle.vue";
|
||||
import AppLayout from "@/Layouts/AppLayout.vue";
|
||||
import { FwbButton } from "flowbite-vue";
|
||||
import { onBeforeMount, ref } from "vue";
|
||||
import { onBeforeMount, ref, computed } from "vue";
|
||||
import ContractDrawer from "./Partials/ContractDrawer.vue";
|
||||
import ContractTable from "./Partials/ContractTable.vue";
|
||||
import ActivityDrawer from "./Partials/ActivityDrawer.vue";
|
||||
@@ -12,10 +12,11 @@ import DocumentsTable from "@/Components/DocumentsTable.vue";
|
||||
import DocumentUploadDialog from "@/Components/DocumentUploadDialog.vue";
|
||||
import DocumentViewerDialog from "@/Components/DocumentViewerDialog.vue";
|
||||
import { classifyDocument } from "@/Services/documents";
|
||||
import { router } from '@inertiajs/vue3';
|
||||
import { router, useForm } from '@inertiajs/vue3';
|
||||
import { AngleDownIcon, AngleUpIcon } from "@/Utilities/Icons";
|
||||
import Pagination from "@/Components/Pagination.vue";
|
||||
import ConfirmDialog from "@/Components/ConfirmDialog.vue";
|
||||
import DialogModal from '@/Components/DialogModal.vue';
|
||||
|
||||
const props = defineProps({
|
||||
client: Object,
|
||||
@@ -25,7 +26,9 @@ const props = defineProps({
|
||||
contract_types: Array,
|
||||
actions: Array,
|
||||
types: Object,
|
||||
documents: Array
|
||||
documents: Array,
|
||||
segments: { type: Array, default: () => [] },
|
||||
all_segments: { type: Array, default: () => [] },
|
||||
});
|
||||
|
||||
const showUpload = ref(false);
|
||||
@@ -99,6 +102,27 @@ const showClientDetails = () => {
|
||||
const hideClietnDetails = () => {
|
||||
clientDetails.value = true;
|
||||
};
|
||||
|
||||
// Attach segment to case
|
||||
const showAttachSegment = ref(false)
|
||||
const openAttachSegment = () => { showAttachSegment.value = true }
|
||||
const closeAttachSegment = () => { showAttachSegment.value = false }
|
||||
const attachForm = useForm({ segment_id: null })
|
||||
const availableSegments = computed(() => {
|
||||
const current = new Set((props.segments || []).map(s => s.id))
|
||||
return (props.all_segments || []).filter(s => !current.has(s.id))
|
||||
})
|
||||
const submitAttachSegment = () => {
|
||||
if (!attachForm.segment_id) { return }
|
||||
attachForm.post(route('clientCase.segments.attach', props.client_case), {
|
||||
preserveScroll: true,
|
||||
only: ['segments'],
|
||||
onSuccess: () => {
|
||||
closeAttachSegment()
|
||||
attachForm.reset('segment_id')
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<AppLayout title="Client case">
|
||||
@@ -169,12 +193,18 @@ const hideClietnDetails = () => {
|
||||
<SectionTitle>
|
||||
<template #title> Pogodbe </template>
|
||||
</SectionTitle>
|
||||
<FwbButton @click="openDrawerCreateContract">Nova</FwbButton>
|
||||
<div class="flex items-center gap-2">
|
||||
<FwbButton @click="openDrawerCreateContract">Nova</FwbButton>
|
||||
<FwbButton color="light" :disabled="availableSegments.length === 0" @click="openAttachSegment">
|
||||
{{ availableSegments.length ? 'Dodaj segment' : 'Ni razpoložljivih segmentov' }}
|
||||
</FwbButton>
|
||||
</div>
|
||||
</div>
|
||||
<ContractTable
|
||||
:client_case="client_case"
|
||||
:contracts="contracts"
|
||||
:contract_types="contract_types"
|
||||
:segments="segments"
|
||||
@edit="openDrawerEditContract"
|
||||
@delete="requestDeleteContract"
|
||||
@add-activity="openDrawerAddActivity"
|
||||
@@ -252,4 +282,21 @@ const hideClietnDetails = () => {
|
||||
@close="closeConfirmDelete"
|
||||
@confirm="doDeleteContract"
|
||||
/>
|
||||
<DialogModal :show="showAttachSegment" @close="closeAttachSegment">
|
||||
<template #title>Dodaj segment k primeru</template>
|
||||
<template #content>
|
||||
<div class="space-y-2">
|
||||
<label class="block text-sm font-medium text-gray-700">Segment</label>
|
||||
<select v-model="attachForm.segment_id" class="w-full rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500">
|
||||
<option :value="null" disabled>-- izberi segment --</option>
|
||||
<option v-for="s in availableSegments" :key="s.id" :value="s.id">{{ s.name }}</option>
|
||||
</select>
|
||||
<div v-if="attachForm.errors.segment_id" class="text-sm text-red-600">{{ attachForm.errors.segment_id }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<FwbButton color="light" @click="closeAttachSegment">Prekliči</FwbButton>
|
||||
<FwbButton class="ml-2" :disabled="attachForm.processing || !attachForm.segment_id" @click="submitAttachSegment">Dodaj</FwbButton>
|
||||
</template>
|
||||
</DialogModal>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,172 @@
|
||||
<script setup>
|
||||
import AppLayout from '@/Layouts/AppLayout.vue'
|
||||
import SectionTitle from '@/Components/SectionTitle.vue'
|
||||
import PrimaryButton from '@/Components/PrimaryButton.vue'
|
||||
import DialogModal from '@/Components/DialogModal.vue'
|
||||
import ConfirmationModal from '@/Components/ConfirmationModal.vue'
|
||||
import InputLabel from '@/Components/InputLabel.vue'
|
||||
import InputError from '@/Components/InputError.vue'
|
||||
import { useForm, router } from '@inertiajs/vue3'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
configs: Array,
|
||||
types: Array,
|
||||
segments: Array,
|
||||
})
|
||||
|
||||
// create modal
|
||||
const showCreate = ref(false)
|
||||
const openCreate = () => { showCreate.value = true }
|
||||
const closeCreate = () => { showCreate.value = false; createForm.reset() }
|
||||
const createForm = useForm({ contract_type_id: null, segment_id: null, is_initial: false })
|
||||
const submitCreate = () => {
|
||||
createForm.post(route('settings.contractConfigs.store'), {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => closeCreate(),
|
||||
})
|
||||
}
|
||||
|
||||
// inline edit
|
||||
const editing = ref(null)
|
||||
const editForm = useForm({ segment_id: null, is_initial: false, active: true })
|
||||
const openEdit = (row) => { editing.value = row; editForm.segment_id = row?.segment_id ?? row?.segment?.id; editForm.is_initial = !!row.is_initial; editForm.active = !!row.active }
|
||||
const closeEdit = () => { editing.value = null }
|
||||
const submitEdit = () => {
|
||||
if (!editing.value) return
|
||||
editForm.put(route('settings.contractConfigs.update', editing.value.id), {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => closeEdit(),
|
||||
})
|
||||
}
|
||||
|
||||
// delete confirmation
|
||||
const showDelete = ref(false)
|
||||
const toDelete = ref(null)
|
||||
const confirmDelete = (row) => { toDelete.value = row; showDelete.value = true }
|
||||
const cancelDelete = () => { toDelete.value = null; showDelete.value = false }
|
||||
const destroyConfig = () => {
|
||||
if (!toDelete.value) return
|
||||
router.delete(route('settings.contractConfigs.destroy', toDelete.value.id), {
|
||||
preserveScroll: true,
|
||||
onFinish: () => cancelDelete(),
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppLayout title="Settings: Contract Configurations">
|
||||
<template #header />
|
||||
<div class="pt-12">
|
||||
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
|
||||
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg border-l-4 border-indigo-400">
|
||||
<div class="p-4 flex items-center justify-between">
|
||||
<SectionTitle>
|
||||
<template #title>Contract configurations</template>
|
||||
</SectionTitle>
|
||||
<PrimaryButton @click="openCreate">+ New</PrimaryButton>
|
||||
</div>
|
||||
<div class="px-4 pb-4">
|
||||
<table class="min-w-full text-left text-sm">
|
||||
<thead>
|
||||
<tr class="border-b">
|
||||
<th class="py-2 pr-4">Type</th>
|
||||
<th class="py-2 pr-4">Segment</th>
|
||||
<th class="py-2 pr-4">Active</th>
|
||||
<th class="py-2 pr-4 text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="cfg in configs" :key="cfg.id" class="border-b last:border-0">
|
||||
<td class="py-2 pr-4">{{ cfg.type?.name }}</td>
|
||||
<td class="py-2 pr-4">{{ cfg.segment?.name }} <span v-if="cfg.is_initial" class="ml-2 text-xs text-indigo-600">(initial)</span></td>
|
||||
<td class="py-2 pr-4">{{ cfg.active ? 'Yes' : 'No' }}</td>
|
||||
<td class="py-2 pr-4 text-right">
|
||||
<button class="px-2 py-1 text-indigo-600 hover:underline" @click="openEdit(cfg)">Edit</button>
|
||||
<button class="ml-2 px-2 py-1 text-red-600 hover:underline" @click="confirmDelete(cfg)">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="!configs || configs.length === 0">
|
||||
<td colspan="4" class="py-6 text-center text-gray-500">No configurations.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- create modal -->
|
||||
<DialogModal :show="showCreate" @close="closeCreate">
|
||||
<template #title>New Contract Configuration</template>
|
||||
<template #content>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<InputLabel for="type">Contract Type</InputLabel>
|
||||
<select id="type" v-model="createForm.contract_type_id" class="mt-1 w-full rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500">
|
||||
<option :value="null" disabled>-- select type --</option>
|
||||
<option v-for="t in types" :key="t.id" :value="t.id">{{ t.name }}</option>
|
||||
</select>
|
||||
<InputError :message="createForm.errors.contract_type_id" />
|
||||
</div>
|
||||
<div>
|
||||
<InputLabel for="segment">Segment</InputLabel>
|
||||
<select id="segment" v-model="createForm.segment_id" class="mt-1 w-full rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500">
|
||||
<option :value="null" disabled>-- select segment --</option>
|
||||
<option v-for="s in segments" :key="s.id" :value="s.id">{{ s.name }}</option>
|
||||
</select>
|
||||
<InputError :message="createForm.errors.segment_id" />
|
||||
<div class="mt-3 flex items-center gap-2">
|
||||
<input id="is_initial" type="checkbox" v-model="createForm.is_initial" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
|
||||
<label for="is_initial" class="text-sm text-gray-700">Mark as initial</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button class="px-4 py-2 rounded bg-gray-200" @click="closeCreate">Cancel</button>
|
||||
<PrimaryButton class="ml-2" :disabled="createForm.processing || !createForm.contract_type_id || !createForm.segment_id" @click="submitCreate">Create</PrimaryButton>
|
||||
</template>
|
||||
</DialogModal>
|
||||
|
||||
<!-- simple inline edit dialog -->
|
||||
<DialogModal :show="!!editing" @close="closeEdit">
|
||||
<template #title>Edit Configuration</template>
|
||||
<template #content>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<InputLabel>Segment</InputLabel>
|
||||
<select v-model="editForm.segment_id" class="mt-1 w-full rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500">
|
||||
<option v-for="s in segments" :key="s.id" :value="s.id">{{ s.name }}</option>
|
||||
</select>
|
||||
<InputError :message="editForm.errors.segment_id" />
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<input id="is_initial_edit" type="checkbox" v-model="editForm.is_initial" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
|
||||
<label for="is_initial_edit" class="text-sm text-gray-700">Initial</label>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<input id="active" type="checkbox" v-model="editForm.active" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
|
||||
<label for="active" class="text-sm text-gray-700">Active</label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button class="px-4 py-2 rounded bg-gray-200" @click="closeEdit">Cancel</button>
|
||||
<PrimaryButton class="ml-2" :disabled="editForm.processing || !editForm.segment_id" @click="submitEdit">Save</PrimaryButton>
|
||||
</template>
|
||||
</DialogModal>
|
||||
</AppLayout>
|
||||
<ConfirmationModal :show="showDelete" @close="cancelDelete">
|
||||
<template #title>
|
||||
Delete configuration
|
||||
</template>
|
||||
<template #content>
|
||||
Are you sure you want to delete configuration for type "{{ toDelete?.type?.name }}"?
|
||||
</template>
|
||||
<template #footer>
|
||||
<button @click="cancelDelete" class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300 me-2">Cancel</button>
|
||||
<PrimaryButton @click="destroyConfig">Delete</PrimaryButton>
|
||||
</template>
|
||||
</ConfirmationModal>
|
||||
</template>
|
||||
@@ -1,10 +1,51 @@
|
||||
<script setup>
|
||||
import AppLayout from '@/Layouts/AppLayout.vue';
|
||||
import { Link } from '@inertiajs/vue3';
|
||||
import { Link, useForm } from '@inertiajs/vue3';
|
||||
import DialogModal from '@/Components/DialogModal.vue';
|
||||
import PrimaryButton from '@/Components/PrimaryButton.vue';
|
||||
import InputLabel from '@/Components/InputLabel.vue';
|
||||
import InputError from '@/Components/InputError.vue';
|
||||
import { ref, onMounted } from 'vue';
|
||||
import Multiselect from 'vue-multiselect';
|
||||
|
||||
const props = defineProps({
|
||||
settings: Array,
|
||||
segments: Array,
|
||||
decisions: Array,
|
||||
});
|
||||
|
||||
const showCreate = ref(false);
|
||||
const segmentOptions = ref([]);
|
||||
const decisionOptions = ref([]);
|
||||
|
||||
onMounted(() => {
|
||||
segmentOptions.value = (props.segments || []).map(s => ({ id: s.id, name: s.name }));
|
||||
decisionOptions.value = (props.decisions || []).map(d => ({ id: d.id, name: d.name }));
|
||||
});
|
||||
|
||||
const form = useForm({
|
||||
segment_id: null,
|
||||
initial_decision_id: null,
|
||||
asign_decision_id: null,
|
||||
complete_decision_id: null,
|
||||
});
|
||||
|
||||
const openCreate = () => {
|
||||
form.reset();
|
||||
showCreate.value = true;
|
||||
};
|
||||
|
||||
const closeCreate = () => {
|
||||
showCreate.value = false;
|
||||
form.reset();
|
||||
};
|
||||
|
||||
const store = () => {
|
||||
form.post(route('settings.fieldjob.store'), {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => closeCreate(),
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -12,20 +53,93 @@ const props = defineProps({
|
||||
<template #header></template>
|
||||
<div class="pt-12">
|
||||
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
|
||||
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-6">
|
||||
<h3 class="text-lg font-semibold mb-2">Segments</h3>
|
||||
<p class="text-sm text-gray-600 mb-4">Manage segments used across the app.</p>
|
||||
<Link :href="route('settings.segments')" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700">Open Segments</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-6">
|
||||
<h2 class="text-xl font-semibold mb-4">Field Job Settings</h2>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-xl font-semibold">Field Job Settings</h2>
|
||||
<PrimaryButton @click="openCreate">+ New</PrimaryButton>
|
||||
</div>
|
||||
|
||||
<DialogModal :show="showCreate" @close="closeCreate">
|
||||
<template #title>
|
||||
Create Field Job Setting
|
||||
</template>
|
||||
<template #content>
|
||||
<form @submit.prevent="store">
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
<div>
|
||||
<InputLabel for="segment" value="Segment" />
|
||||
<multiselect
|
||||
id="segment"
|
||||
v-model="form.segment_id"
|
||||
:options="segmentOptions.map(o=>o.id)"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
placeholder="Select segment"
|
||||
:append-to-body="true"
|
||||
:custom-label="(opt) => (segmentOptions.find(o=>o.id===opt)?.name || '')"
|
||||
/>
|
||||
<InputError :message="form.errors.segment_id" class="mt-1" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<InputLabel for="initialDecision" value="Initial Decision" />
|
||||
<multiselect
|
||||
id="initialDecision"
|
||||
v-model="form.initial_decision_id"
|
||||
:options="decisionOptions.map(o=>o.id)"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
placeholder="Select initial decision"
|
||||
:append-to-body="true"
|
||||
:custom-label="(opt) => (decisionOptions.find(o=>o.id===opt)?.name || '')"
|
||||
/>
|
||||
<InputError :message="form.errors.initial_decision_id" class="mt-1" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<InputLabel for="assignDecision" value="Assign Decision" />
|
||||
<multiselect
|
||||
id="assignDecision"
|
||||
v-model="form.asign_decision_id"
|
||||
:options="decisionOptions.map(o=>o.id)"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
placeholder="Select assign decision"
|
||||
:append-to-body="true"
|
||||
:custom-label="(opt) => (decisionOptions.find(o=>o.id===opt)?.name || '')"
|
||||
/>
|
||||
<InputError :message="form.errors.asign_decision_id" class="mt-1" />
|
||||
</div>
|
||||
|
||||
<div class="mt-2">
|
||||
<InputLabel for="completeDecision" value="Complete Decision" />
|
||||
<multiselect
|
||||
id="completeDecision"
|
||||
v-model="form.complete_decision_id"
|
||||
:options="decisionOptions.map(o=>o.id)"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
placeholder="Select complete decision"
|
||||
:append-to-body="true"
|
||||
:custom-label="(opt) => (decisionOptions.find(o=>o.id===opt)?.name || '')"
|
||||
/>
|
||||
<InputError :message="form.errors.complete_decision_id" class="mt-1" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-2 mt-6">
|
||||
<button type="button" @click="closeCreate" class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300">Cancel</button>
|
||||
<PrimaryButton :disabled="form.processing">Create</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</DialogModal>
|
||||
<table class="min-w-full text-left text-sm">
|
||||
<thead>
|
||||
<tr class="border-b">
|
||||
<th class="py-2 pr-4">ID</th>
|
||||
<th class="py-2 pr-4">Segment</th>
|
||||
<th class="py-2 pr-4">Initial Decision</th>
|
||||
<th class="py-2 pr-4">Assign Decision</th>
|
||||
<th class="py-2 pr-4">Complete Decision</th>
|
||||
</tr>
|
||||
@@ -34,6 +148,7 @@ const props = defineProps({
|
||||
<tr v-for="row in settings" :key="row.id" class="border-b last:border-0">
|
||||
<td class="py-2 pr-4">{{ row.id }}</td>
|
||||
<td class="py-2 pr-4">{{ row.segment?.name }}</td>
|
||||
<td class="py-2 pr-4">{{ row.initial_decision?.name || row.initialDecision?.name }}</td>
|
||||
<td class="py-2 pr-4">{{ row.asign_decision?.name || row.asignDecision?.name }}</td>
|
||||
<td class="py-2 pr-4">{{ row.complete_decision?.name || row.completeDecision?.name }}</td>
|
||||
</tr>
|
||||
|
||||
@@ -24,6 +24,11 @@ import { Link } from '@inertiajs/vue3';
|
||||
<p class="text-sm text-gray-600 mb-4">Configure segment-based field job rules.</p>
|
||||
<Link :href="route('settings.fieldjob.index')" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700">Open Field Job</Link>
|
||||
</div>
|
||||
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-6">
|
||||
<h3 class="text-lg font-semibold mb-2">Contract Configs</h3>
|
||||
<p class="text-sm text-gray-600 mb-4">Auto-assign initial segments for contracts by type.</p>
|
||||
<Link :href="route('settings.contractConfigs.index')" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700">Open Contract Configs</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
<script setup>
|
||||
import { FwbTable, FwbTableBody, FwbTableHead, FwbTableHeadCell, FwbTableCell, FwbTableRow, FwbDropdown } from 'flowbite-vue';
|
||||
import { DottedMenu, EditIcon, TrashBinIcon } from '@/Utilities/Icons';
|
||||
import { FwbTable, FwbTableBody, FwbTableHead, FwbTableHeadCell, FwbTableCell, FwbTableRow } from 'flowbite-vue';
|
||||
import { EditIcon, TrashBinIcon } from '@/Utilities/Icons';
|
||||
import DialogModal from '@/Components/DialogModal.vue';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useForm } from '@inertiajs/vue3';
|
||||
import ConfirmationModal from '@/Components/ConfirmationModal.vue';
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
import { router, useForm } from '@inertiajs/vue3';
|
||||
import InputLabel from '@/Components/InputLabel.vue';
|
||||
import TextInput from '@/Components/TextInput.vue';
|
||||
import Multiselect from 'vue-multiselect';
|
||||
@@ -16,10 +17,13 @@ const props = defineProps({
|
||||
segments: Array
|
||||
});
|
||||
|
||||
const menuDropdown = ref();
|
||||
|
||||
const drawerEdit = ref(false);
|
||||
const drawerCreate = ref(false);
|
||||
const showDelete = ref(false);
|
||||
const toDelete = ref(null);
|
||||
|
||||
const search = ref('');
|
||||
const selectedSegment = ref(null);
|
||||
|
||||
const selectOptions = ref([]);
|
||||
const segmentOptions = ref([]);
|
||||
@@ -91,6 +95,15 @@ onMounted(() => {
|
||||
|
||||
});
|
||||
|
||||
const filtered = computed(() => {
|
||||
const term = search.value?.toLowerCase() ?? '';
|
||||
return (props.actions || []).filter(a => {
|
||||
const matchesSearch = !term || a.name?.toLowerCase().includes(term) || a.color_tag?.toLowerCase().includes(term);
|
||||
const matchesSegment = !selectedSegment.value || a.segment?.id === selectedSegment.value;
|
||||
return matchesSearch && matchesSegment;
|
||||
});
|
||||
});
|
||||
|
||||
const update = () => {
|
||||
form.put(route('settings.actions.update', { id: form.id }), {
|
||||
onSuccess: () => {
|
||||
@@ -107,11 +120,44 @@ const store = () => {
|
||||
});
|
||||
};
|
||||
|
||||
const confirmDelete = (action) => {
|
||||
toDelete.value = action;
|
||||
showDelete.value = true;
|
||||
};
|
||||
|
||||
const cancelDelete = () => {
|
||||
toDelete.value = null;
|
||||
showDelete.value = false;
|
||||
};
|
||||
|
||||
const destroyAction = () => {
|
||||
if (!toDelete.value) return;
|
||||
router.delete(route('settings.actions.destroy', { id: toDelete.value.id }), {
|
||||
preserveScroll: true,
|
||||
onFinish: () => cancelDelete(),
|
||||
});
|
||||
};
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="py-4 px-3">
|
||||
<div class="p-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div class="flex gap-3 items-center w-full sm:w-auto">
|
||||
<TextInput v-model="search" placeholder="Search actions..." class="w-full sm:w-64" />
|
||||
<div class="w-64">
|
||||
<Multiselect
|
||||
v-model="selectedSegment"
|
||||
:options="segmentOptions.map(o=>o.id)"
|
||||
:multiple="false"
|
||||
:searchable="true"
|
||||
placeholder="Filter by segment"
|
||||
:append-to-body="true"
|
||||
:custom-label="(opt) => (segmentOptions.find(o=>o.id===opt)?.name || '')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<PrimaryButton @click="openCreateDrawer">+ Dodaj akcijo</PrimaryButton>
|
||||
</div>
|
||||
|
||||
<fwb-table>
|
||||
<fwb-table-head>
|
||||
<fwb-table-head-cell>#</fwb-table-head-cell>
|
||||
@@ -123,22 +169,25 @@ const store = () => {
|
||||
</fwb-table-head-cell>
|
||||
</fwb-table-head>
|
||||
<fwb-table-body>
|
||||
<fwb-table-row v-for="act in actions" :key="act.id">
|
||||
<fwb-table-row v-for="act in filtered" :key="act.id">
|
||||
<fwb-table-cell>{{ act.id }}</fwb-table-cell>
|
||||
<fwb-table-cell>{{ act.name }}</fwb-table-cell>
|
||||
<fwb-table-cell>{{ act.color_tag }}</fwb-table-cell>
|
||||
<fwb-table-cell>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="inline-block h-4 w-4 rounded" :style="{ backgroundColor: act.color_tag }"></span>
|
||||
<span>{{ act.color_tag }}</span>
|
||||
</div>
|
||||
</fwb-table-cell>
|
||||
<fwb-table-cell>{{ act.decisions.length }}</fwb-table-cell>
|
||||
<fwb-table-cell>
|
||||
<button class="px-2" @click="openEditDrawer(act)"><EditIcon size="md" css="text-gray-500" /></button>
|
||||
<button class="px-2 disabled:opacity-40" :disabled="(act.activities_count ?? 0) > 0" @click="confirmDelete(act)"><TrashBinIcon size="md" css="text-red-500" /></button>
|
||||
</fwb-table-cell>
|
||||
</fwb-table-row>
|
||||
</fwb-table-body>
|
||||
</fwb-table>
|
||||
<DialogModal
|
||||
:show="drawerEdit"
|
||||
@close="closeEditDrawer"
|
||||
>
|
||||
|
||||
<DialogModal :show="drawerEdit" @close="closeEditDrawer">
|
||||
<template #title>
|
||||
<span>Spremeni akcijo</span>
|
||||
</template>
|
||||
@@ -215,10 +264,7 @@ const store = () => {
|
||||
</template>
|
||||
</DialogModal>
|
||||
|
||||
<DialogModal
|
||||
:show="drawerCreate"
|
||||
@close="closeCreateDrawer"
|
||||
>
|
||||
<DialogModal :show="drawerCreate" @close="closeCreateDrawer">
|
||||
<template #title>
|
||||
<span>Dodaj akcijo</span>
|
||||
</template>
|
||||
@@ -290,4 +336,17 @@ const store = () => {
|
||||
</form>
|
||||
</template>
|
||||
</DialogModal>
|
||||
|
||||
<ConfirmationModal :show="showDelete" @close="cancelDelete">
|
||||
<template #title>
|
||||
Delete action
|
||||
</template>
|
||||
<template #content>
|
||||
Are you sure you want to delete action "{{ toDelete?.name }}"? This cannot be undone.
|
||||
</template>
|
||||
<template #footer>
|
||||
<button @click="cancelDelete" class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300 me-2">Cancel</button>
|
||||
<PrimaryButton @click="destroyAction">Delete</PrimaryButton>
|
||||
</template>
|
||||
</ConfirmationModal>
|
||||
</template>
|
||||
@@ -1,9 +1,10 @@
|
||||
<script setup>
|
||||
import { FwbTable, FwbTableBody, FwbTableHead, FwbTableHeadCell, FwbTableCell, FwbTableRow } from 'flowbite-vue';
|
||||
import { EditIcon } from '@/Utilities/Icons';
|
||||
import { EditIcon, TrashBinIcon } from '@/Utilities/Icons';
|
||||
import DialogModal from '@/Components/DialogModal.vue';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useForm } from '@inertiajs/vue3';
|
||||
import ConfirmationModal from '@/Components/ConfirmationModal.vue';
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { router, useForm } from '@inertiajs/vue3';
|
||||
import InputLabel from '@/Components/InputLabel.vue';
|
||||
import TextInput from '@/Components/TextInput.vue';
|
||||
import Multiselect from 'vue-multiselect';
|
||||
@@ -17,6 +18,10 @@ const props = defineProps({
|
||||
|
||||
const drawerEdit = ref(false);
|
||||
const drawerCreate = ref(false);
|
||||
const showDelete = ref(false);
|
||||
const toDelete = ref(null);
|
||||
|
||||
const search = ref('');
|
||||
|
||||
const actionOptions = ref([]);
|
||||
|
||||
@@ -72,6 +77,13 @@ onMounted(() => {
|
||||
});
|
||||
});
|
||||
|
||||
const filtered = computed(() => {
|
||||
const term = search.value?.toLowerCase() ?? '';
|
||||
return (props.decisions || []).filter(d => {
|
||||
return !term || d.name?.toLowerCase().includes(term) || d.color_tag?.toLowerCase().includes(term);
|
||||
});
|
||||
});
|
||||
|
||||
const update = () => {
|
||||
form.put(route('settings.decisions.update', { id: form.id }), {
|
||||
onSuccess: () => {
|
||||
@@ -88,11 +100,31 @@ const store = () => {
|
||||
});
|
||||
};
|
||||
|
||||
const confirmDelete = (decision) => {
|
||||
toDelete.value = decision;
|
||||
showDelete.value = true;
|
||||
};
|
||||
|
||||
const cancelDelete = () => {
|
||||
toDelete.value = null;
|
||||
showDelete.value = false;
|
||||
};
|
||||
|
||||
const destroyDecision = () => {
|
||||
if (!toDelete.value) return;
|
||||
router.delete(route('settings.decisions.destroy', { id: toDelete.value.id }), {
|
||||
preserveScroll: true,
|
||||
onFinish: () => cancelDelete(),
|
||||
});
|
||||
};
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="py-4 px-3">
|
||||
<div class="p-4 flex items-center justify-between gap-3">
|
||||
<TextInput v-model="search" placeholder="Search decisions..." class="w-full sm:w-72" />
|
||||
<PrimaryButton @click="openCreateDrawer">+ Dodaj odločitev</PrimaryButton>
|
||||
</div>
|
||||
|
||||
<fwb-table>
|
||||
<fwb-table-head>
|
||||
<fwb-table-head-cell>#</fwb-table-head-cell>
|
||||
@@ -104,22 +136,25 @@ const store = () => {
|
||||
</fwb-table-head-cell>
|
||||
</fwb-table-head>
|
||||
<fwb-table-body>
|
||||
<fwb-table-row v-for="d in decisions" :key="d.id">
|
||||
<fwb-table-row v-for="d in filtered" :key="d.id">
|
||||
<fwb-table-cell>{{ d.id }}</fwb-table-cell>
|
||||
<fwb-table-cell>{{ d.name }}</fwb-table-cell>
|
||||
<fwb-table-cell>{{ d.color_tag }}</fwb-table-cell>
|
||||
<fwb-table-cell>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="inline-block h-4 w-4 rounded" :style="{ backgroundColor: d.color_tag }"></span>
|
||||
<span>{{ d.color_tag }}</span>
|
||||
</div>
|
||||
</fwb-table-cell>
|
||||
<fwb-table-cell>{{ d.actions.length }}</fwb-table-cell>
|
||||
<fwb-table-cell>
|
||||
<button class="px-2" @click="openEditDrawer(d)"><EditIcon size="md" css="text-gray-500" /></button>
|
||||
<button class="px-2 disabled:opacity-40" :disabled="(d.activities_count ?? 0) > 0" @click="confirmDelete(d)"><TrashBinIcon size="md" css="text-red-500" /></button>
|
||||
</fwb-table-cell>
|
||||
</fwb-table-row>
|
||||
</fwb-table-body>
|
||||
</fwb-table>
|
||||
|
||||
<DialogModal
|
||||
:show="drawerEdit"
|
||||
@close="closeEditDrawer"
|
||||
>
|
||||
<DialogModal :show="drawerEdit" @close="closeEditDrawer">
|
||||
<template #title>
|
||||
<span>Spremeni odločitev</span>
|
||||
</template>
|
||||
@@ -177,10 +212,7 @@ const store = () => {
|
||||
</template>
|
||||
</DialogModal>
|
||||
|
||||
<DialogModal
|
||||
:show="drawerCreate"
|
||||
@close="closeCreateDrawer"
|
||||
>
|
||||
<DialogModal :show="drawerCreate" @close="closeCreateDrawer">
|
||||
<template #title>
|
||||
<span>Dodaj odločitev</span>
|
||||
</template>
|
||||
@@ -237,4 +269,17 @@ const store = () => {
|
||||
</form>
|
||||
</template>
|
||||
</DialogModal>
|
||||
|
||||
<ConfirmationModal :show="showDelete" @close="cancelDelete">
|
||||
<template #title>
|
||||
Delete decision
|
||||
</template>
|
||||
<template #content>
|
||||
Are you sure you want to delete decision "{{ toDelete?.name }}"? This cannot be undone.
|
||||
</template>
|
||||
<template #footer>
|
||||
<button @click="cancelDelete" class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300 me-2">Cancel</button>
|
||||
<PrimaryButton @click="destroyDecision">Delete</PrimaryButton>
|
||||
</template>
|
||||
</ConfirmationModal>
|
||||
</template>
|
||||
@@ -1,9 +1,73 @@
|
||||
<script setup>
|
||||
import AppLayout from '@/Layouts/AppLayout.vue';
|
||||
import { useForm, router } from '@inertiajs/vue3';
|
||||
import { ref } from 'vue';
|
||||
import DialogModal from '@/Components/DialogModal.vue';
|
||||
import PrimaryButton from '@/Components/PrimaryButton.vue';
|
||||
import InputLabel from '@/Components/InputLabel.vue';
|
||||
import InputError from '@/Components/InputError.vue';
|
||||
import TextInput from '@/Components/TextInput.vue';
|
||||
|
||||
const props = defineProps({
|
||||
segments: Array,
|
||||
});
|
||||
|
||||
const showCreate = ref(false);
|
||||
const showEdit = ref(false);
|
||||
const editing = ref(null);
|
||||
|
||||
const createForm = useForm({
|
||||
name: '',
|
||||
description: '',
|
||||
active: true,
|
||||
});
|
||||
|
||||
const editForm = useForm({
|
||||
id: null,
|
||||
name: '',
|
||||
description: '',
|
||||
active: true,
|
||||
});
|
||||
|
||||
const openCreate = () => {
|
||||
createForm.reset();
|
||||
createForm.active = true;
|
||||
showCreate.value = true;
|
||||
};
|
||||
|
||||
const closeCreate = () => {
|
||||
showCreate.value = false;
|
||||
createForm.reset();
|
||||
};
|
||||
|
||||
const store = () => {
|
||||
createForm.post(route('settings.segments.store'), {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => closeCreate(),
|
||||
});
|
||||
};
|
||||
|
||||
const openEdit = (segment) => {
|
||||
editing.value = segment;
|
||||
editForm.id = segment.id;
|
||||
editForm.name = segment.name;
|
||||
editForm.description = segment.description ?? '';
|
||||
editForm.active = !!segment.active;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
const closeEdit = () => {
|
||||
showEdit.value = false;
|
||||
editing.value = null;
|
||||
editForm.reset();
|
||||
};
|
||||
|
||||
const update = () => {
|
||||
editForm.put(route('settings.segments.update', { segment: editForm.id }), {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => closeEdit(),
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -12,10 +76,93 @@ const props = defineProps({
|
||||
<div class="pt-12">
|
||||
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
|
||||
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-6">
|
||||
<h2 class="text-xl font-semibold mb-4">Segments</h2>
|
||||
<ul class="list-disc list-inside">
|
||||
<li v-for="s in segments" :key="s.id">{{ s.name }}</li>
|
||||
</ul>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-xl font-semibold">Segments</h2>
|
||||
<PrimaryButton @click="openCreate">+ New</PrimaryButton>
|
||||
</div>
|
||||
|
||||
<DialogModal :show="showCreate" @close="closeCreate">
|
||||
<template #title>New Segment</template>
|
||||
<template #content>
|
||||
<form @submit.prevent="store" class="space-y-4">
|
||||
<div>
|
||||
<InputLabel for="nameCreate" value="Name" />
|
||||
<TextInput id="nameCreate" v-model="createForm.name" type="text" class="mt-1 block w-full" />
|
||||
<InputError :message="createForm.errors.name" class="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<InputLabel for="descCreate" value="Description" />
|
||||
<TextInput id="descCreate" v-model="createForm.description" type="text" class="mt-1 block w-full" />
|
||||
<InputError :message="createForm.errors.description" class="mt-1" />
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<input id="activeCreate" type="checkbox" v-model="createForm.active" />
|
||||
<label for="activeCreate">Active</label>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-2 mt-4">
|
||||
<button type="button" @click="closeCreate" class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300">Cancel</button>
|
||||
<PrimaryButton :disabled="createForm.processing">Create</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</DialogModal>
|
||||
|
||||
<DialogModal :show="showEdit" @close="closeEdit">
|
||||
<template #title>Edit Segment</template>
|
||||
<template #content>
|
||||
<form @submit.prevent="update" class="space-y-4">
|
||||
<div>
|
||||
<InputLabel for="nameEdit" value="Name" />
|
||||
<TextInput id="nameEdit" v-model="editForm.name" type="text" class="mt-1 block w-full" />
|
||||
<InputError :message="editForm.errors.name" class="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<InputLabel for="descEdit" value="Description" />
|
||||
<TextInput id="descEdit" v-model="editForm.description" type="text" class="mt-1 block w-full" />
|
||||
<InputError :message="editForm.errors.description" class="mt-1" />
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<input id="activeEdit" type="checkbox" v-model="editForm.active" />
|
||||
<label for="activeEdit">Active</label>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-2 mt-4">
|
||||
<button type="button" @click="closeEdit" class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300">Cancel</button>
|
||||
<PrimaryButton :disabled="editForm.processing">Save</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</DialogModal>
|
||||
|
||||
<table class="min-w-full text-left text-sm">
|
||||
<thead>
|
||||
<tr class="border-b">
|
||||
<th class="py-2 pr-4">ID</th>
|
||||
<th class="py-2 pr-4">Name</th>
|
||||
<th class="py-2 pr-4">Description</th>
|
||||
<th class="py-2 pr-4">Active</th>
|
||||
<th class="py-2 pr-4">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="s in segments" :key="s.id" class="border-b last:border-0">
|
||||
<td class="py-2 pr-4">{{ s.id }}</td>
|
||||
<td class="py-2 pr-4">{{ s.name }}</td>
|
||||
<td class="py-2 pr-4">{{ s.description }}</td>
|
||||
<td class="py-2 pr-4">
|
||||
<span class="inline-flex items-center gap-1">
|
||||
<span :class="s.active ? 'bg-green-500' : 'bg-gray-400'" class="inline-block w-2 h-2 rounded-full"></span>
|
||||
{{ s.active ? 'Yes' : 'No' }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="py-2 pr-4">
|
||||
<button class="text-indigo-600 hover:text-indigo-800" @click="openEdit(s)">Edit</button>
|
||||
<!-- Delete intentionally skipped as requested -->
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user