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

New report system and views

Browse Source
This commit is contained in:
Simon Pocrnjič
2026-01-02 12:32:20 +01:00
parent 9fc5b54b8a
commit 703b52ff59
67 changed files with 8255 additions and 2794 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Pages/Settings/ContractConfigs/Index.vue
+286 -124
View File
@@ -1,58 +1,141 @@
<script setup>
import AppLayout from '@/Layouts/AppLayout.vue'
import SectionTitle from '@/Components/SectionTitle.vue'
import PrimaryButton from '@/Components/PrimaryButton.vue'
import CreateDialog from '@/Components/Dialogs/CreateDialog.vue'
import UpdateDialog from '@/Components/Dialogs/UpdateDialog.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'
import AppLayout from "@/Layouts/AppLayout.vue";
import AppCard from "@/Components/app/ui/card/AppCard.vue";
import CardTitle from "@/Components/ui/card/CardTitle.vue";
import { Button } from "@/Components/ui/button";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogFooter,
} from "@/Components/ui/dialog";
import {
AlertDialog,
AlertDialogContent,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogFooter,
} from "@/Components/ui/alert-dialog";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/Components/ui/select";
import { Checkbox } from "@/Components/ui/checkbox";
import InputLabel from "@/Components/InputLabel.vue";
import InputError from "@/Components/InputError.vue";
import DataTableClient from "@/Components/DataTable/DataTableClient.vue";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/Components/ui/dropdown-menu";
import { useForm, router } from "@inertiajs/vue3";
import { ref, nextTick } from "vue";
import {
MoreHorizontal,
Pencil,
Trash,
FileText,
Badge as BadgeIcon,
Check as CheckIcon,
} from "lucide-vue-next";
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 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'), {
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 showEdit = ref(false);
const editing = ref(null);
const editFormIsInitial = ref(false);
const editFormActive = ref(false);
const editForm = useForm({ segment_id: null, is_initial: false, active: false });
const openEdit = (row) => {
editing.value = row;
editForm.clearErrors();
// Set values
editForm.segment_id = row?.segment_id ?? row?.segment?.id ?? null;
editFormIsInitial.value = row.is_initial === 1 || row.is_initial === true;
editFormActive.value = row.active === 1 || row.active === true;
showEdit.value = true;
};
const closeEdit = () => {
showEdit.value = false;
editing.value = null;
editFormIsInitial.value = false;
editFormActive.value = false;
editForm.reset();
editForm.clearErrors();
};
const submitEdit = () => {
if (!editing.value) return
editForm.put(route('settings.contractConfigs.update', editing.value.id), {
if (!editing.value) return;
editForm.is_initial = editFormIsInitial.value;
editForm.active = editFormActive.value;
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 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), {
if (!toDelete.value) return;
router.delete(route("settings.contractConfigs.destroy", toDelete.value.id), {
preserveScroll: true,
onFinish: () => cancelDelete(),
})
}
});
};
// DataTable state
const sort = ref({ key: null, direction: null });
const page = ref(1);
const pageSize = ref(25);
const columns = [
{ key: "id", label: "ID", sortable: true, class: "w-16" },
{ key: "type", label: "Type", sortable: false },
{ key: "segment", label: "Segment", sortable: false },
{ key: "active", label: "Active", sortable: false, class: "w-24" },
];
</script>
<template>
@@ -60,116 +143,195 @@ const destroyConfig = () => {
<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>
<AppCard
title=""
padding="none"
class="p-0! gap-0"
header-class="py-3! px-4 gap-0 text-muted-foreground"
body-class=""
>
<template #header>
<div class="flex items-center justify-between w-full">
<div class="flex items-center gap-2">
<FileText :size="18" />
<CardTitle class="uppercase">Contract configurations</CardTitle>
</div>
<Button @click="openCreate">+ New</Button>
</div>
</template>
<DataTableClient
:columns="columns"
:rows="configs"
:sort="sort"
:search="''"
:page="page"
:pageSize="pageSize"
:showToolbar="false"
:showPagination="true"
@update:sort="(v) => (sort = v)"
@update:page="(v) => (page = v)"
@update:pageSize="(v) => (pageSize = v)"
>
<template #cell-type="{ row }">
{{ row.type?.name }}
</template>
<template #cell-segment="{ row }">
<div class="flex items-center gap-2">
{{ row.segment?.name }}
<CheckIcon v-if="row.is_initial" class="w-5 h-5 text-primary" />
</div>
</template>
<template #cell-active="{ row }">
<div class="flex items-center">
<div
class="w-3 h-3 rounded-full"
:class="row.active ? 'bg-green-500' : 'bg-red-500'"
></div>
</div>
</template>
<template #actions="{ row }">
<DropdownMenu>
<DropdownMenuTrigger as-child>
<Button variant="ghost" size="icon">
<MoreHorizontal class="w-4 h-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem @click="openEdit(row)">
<Pencil class="w-4 h-4 mr-2" />
Uredi
</DropdownMenuItem>
<DropdownMenuItem
@click="confirmDelete(row)"
class="text-red-600 focus:text-red-600"
>
<Trash class="w-4 h-4 mr-2" />
Izbriši
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</template>
</DataTableClient>
</AppCard>
</div>
</div>
<!-- create modal -->
<CreateDialog
:show="showCreate"
title="New Contract Configuration"
confirm-text="Create"
:processing="createForm.processing"
:disabled="!createForm.contract_type_id || !createForm.segment_id"
@close="closeCreate"
@confirm="submitCreate"
>
<div class="space-y-4">
<Dialog v-model:open="showCreate">
<DialogContent class="max-w-xl">
<DialogHeader>
<DialogTitle>New Contract Configuration</DialogTitle>
</DialogHeader>
<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" />
<Select v-model="createForm.contract_type_id">
<SelectTrigger id="type" class="w-full">
<SelectValue placeholder="-- select type --" />
</SelectTrigger>
<SelectContent>
<SelectItem v-for="t in types" :key="t.id" :value="t.id">
{{ t.name }}
</SelectItem>
</SelectContent>
</Select>
<InputError :message="createForm.errors.contract_type_id" class="mt-1" />
</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" />
<Select v-model="createForm.segment_id">
<SelectTrigger id="segment" class="w-full">
<SelectValue placeholder="-- select segment --" />
</SelectTrigger>
<SelectContent>
<SelectItem v-for="s in segments" :key="s.id" :value="s.id">
{{ s.name }}
</SelectItem>
</SelectContent>
</Select>
<InputError :message="createForm.errors.segment_id" class="mt-1" />
<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>
<Checkbox id="is_initial" v-model="createForm.is_initial" />
<InputLabel for="is_initial" class="text-sm font-normal cursor-pointer"
>Mark as initial</InputLabel
>
</div>
</div>
</div>
</CreateDialog>
</div>
<DialogFooter>
<Button variant="outline" @click="closeCreate">Cancel</Button>
<Button
@click="submitCreate"
:disabled="
createForm.processing ||
!createForm.contract_type_id ||
!createForm.segment_id
"
>Create</Button
>
</DialogFooter>
</DialogContent>
</Dialog>
<!-- simple inline edit dialog -->
<UpdateDialog
:show="!!editing"
title="Edit Configuration"
confirm-text="Save"
:processing="editForm.processing"
:disabled="!editForm.segment_id"
@close="closeEdit"
@confirm="submitEdit"
>
<div class="space-y-4">
<Dialog v-model:open="showEdit">
<DialogContent class="max-w-xl">
<DialogHeader>
<DialogTitle>Edit Configuration</DialogTitle>
</DialogHeader>
<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" />
<Select v-model="editForm.segment_id">
<SelectTrigger class="w-full">
<SelectValue placeholder="-- select segment --" />
</SelectTrigger>
<SelectContent>
<SelectItem v-for="s in segments" :key="s.id" :value="s.id">
{{ s.name }}
</SelectItem>
</SelectContent>
</Select>
<InputError :message="editForm.errors.segment_id" class="mt-1" />
</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>
<Checkbox id="is_initial_edit" v-model="editFormIsInitial" />
<InputLabel for="is_initial_edit" class="text-sm font-normal cursor-pointer"
>Initial</InputLabel
>
</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>
<Checkbox id="active" v-model="editFormActive" />
<InputLabel for="active" class="text-sm font-normal cursor-pointer"
>Active</InputLabel
>
</div>
</div>
</UpdateDialog>
</div>
<DialogFooter>
<Button variant="outline" @click="closeEdit">Cancel</Button>
<Button
@click="submitEdit"
:disabled="editForm.processing || !editForm.segment_id"
>Save</Button
>
</DialogFooter>
</DialogContent>
</Dialog>
</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>
<AlertDialog v-model:open="showDelete">
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Delete configuration</AlertDialogTitle>
</AlertDialogHeader>
<div class="text-sm text-muted-foreground">
Are you sure you want to delete configuration for type "{{
toDelete?.type?.name
}}"?
</div>
<AlertDialogFooter>
<Button variant="outline" @click="cancelDelete">Cancel</Button>
<Button variant="destructive" @click="destroyConfig">Delete</Button>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</template>