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

updated sms package creator, removed result for segments with exeption true, replaced some ui elements

Browse Source
This commit is contained in:
Simon Pocrnjič
2026-02-01 13:43:18 +01:00
parent 9cc1b7072c
commit b1c531bb70
9 changed files with 484 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Pages/Admin/Packages/Create.vue
+70 -60
View File
@@ -2,6 +2,7 @@
import AdminLayout from "@/Layouts/AdminLayout.vue";
import { Link, router, useForm } from "@inertiajs/vue3";
import { ref, computed, nextTick } from "vue";
import axios from "axios";
import {
Card,
CardContent,
@@ -39,6 +40,9 @@ import {
BadgeCheckIcon,
} from "lucide-vue-next";
import { fmtDateDMY } from "@/Utilities/functions";
import { upperFirst } from "lodash";
import AppCombobox from "@/Components/app/ui/AppCombobox.vue";
import AppRangeDatePicker from "@/Components/app/ui/AppRangeDatePicker.vue";
const props = defineProps({
profiles: { type: Array, default: () => [] },
@@ -123,13 +127,19 @@ const contracts = ref({
const segmentId = ref(null);
const search = ref("");
const clientId = ref(null);
const startDateFrom = ref("");
const startDateTo = ref("");
const promiseDateFrom = ref("");
const promiseDateTo = ref("");
const startDateRange = ref({ start: null, end: null });
const promiseDateRange = ref({ start: null, end: null });
const onlyMobile = ref(false);
const onlyValidated = ref(false);
const loadingContracts = ref(false);
// Transform clients for AppCombobox
const clientItems = computed(() =>
props.clients.map((c) => ({
value: c.id,
label: c.name,
}))
);
const selectedContractIds = ref(new Set());
const perPage = ref(25);
@@ -153,6 +163,11 @@ const contractColumns = [
accessorFn: (row) => row.selected_phone?.number || "—",
header: "Izbrana številka",
},
{
id: "segment",
accessorFn: (row) => upperFirst(row.segment?.name) || "—",
header: "Segment",
},
{ accessorKey: "no_phone_reason", header: "Opomba" },
];
@@ -175,19 +190,22 @@ async function loadContracts(url = null) {
if (segmentId.value) params.append("segment_id", segmentId.value);
if (search.value) params.append("q", search.value);
if (clientId.value) params.append("client_id", clientId.value);
if (startDateFrom.value) params.append("start_date_from", startDateFrom.value);
if (startDateTo.value) params.append("start_date_to", startDateTo.value);
if (promiseDateFrom.value) params.append("promise_date_from", promiseDateFrom.value);
if (promiseDateTo.value) params.append("promise_date_to", promiseDateTo.value);
if (startDateRange.value?.start)
params.append("start_date_from", startDateRange.value.start);
if (startDateRange.value?.end)
params.append("start_date_to", startDateRange.value.end);
if (promiseDateRange.value?.start)
params.append("promise_date_from", promiseDateRange.value.start);
if (promiseDateRange.value?.end)
params.append("promise_date_to", promiseDateRange.value.end);
if (onlyMobile.value) params.append("only_mobile", "1");
if (onlyValidated.value) params.append("only_validated", "1");
params.append("per_page", perPage.value);
const target = url || `${route("admin.packages.contracts")}?${params.toString()}`;
const res = await fetch(target, {
const { data: json } = await axios.get(target, {
headers: { "X-Requested-With": "XMLHttpRequest" },
});
const json = await res.json();
// Wait for next tick before updating to avoid Vue reconciliation issues
await nextTick();
@@ -238,10 +256,13 @@ function goToPage(page) {
if (segmentId.value) params.append("segment_id", segmentId.value);
if (search.value) params.append("q", search.value);
if (clientId.value) params.append("client_id", clientId.value);
if (startDateFrom.value) params.append("start_date_from", startDateFrom.value);
if (startDateTo.value) params.append("start_date_to", startDateTo.value);
if (promiseDateFrom.value) params.append("promise_date_from", promiseDateFrom.value);
if (promiseDateTo.value) params.append("promise_date_to", promiseDateTo.value);
if (startDateRange.value?.start)
params.append("start_date_from", startDateRange.value.start);
if (startDateRange.value?.end) params.append("start_date_to", startDateRange.value.end);
if (promiseDateRange.value?.start)
params.append("promise_date_from", promiseDateRange.value.start);
if (promiseDateRange.value?.end)
params.append("promise_date_to", promiseDateRange.value.end);
if (onlyMobile.value) params.append("only_mobile", "1");
if (onlyValidated.value) params.append("only_validated", "1");
params.append("per_page", perPage.value);
@@ -255,10 +276,8 @@ function resetFilters() {
segmentId.value = null;
clientId.value = null;
search.value = "";
startDateFrom.value = "";
startDateTo.value = "";
promiseDateFrom.value = "";
promiseDateTo.value = "";
startDateRange.value = { start: null, end: null };
promiseDateRange.value = { start: null, end: null };
onlyMobile.value = false;
onlyValidated.value = false;
contracts.value = {
@@ -448,9 +467,10 @@ const numbersCount = computed(() => {
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<Checkbox
:checked="form.delivery_report"
@update:checked="(val) => (form.delivery_report = val)"
:model-value="form.delivery_report"
@update:model-value="(val) => (form.delivery_report = val)"
id="delivery-report"
:disabled="true"
/>
<Label for="delivery-report" class="cursor-pointer text-sm">
Zahtevaj delivery report
@@ -553,17 +573,15 @@ const numbersCount = computed(() => {
</div>
<div class="space-y-2">
<Label>Stranka</Label>
<Select v-model="clientId" @update:model-value="loadContracts()">
<SelectTrigger>
<SelectValue placeholder="Vse stranke" />
</SelectTrigger>
<SelectContent>
<SelectItem :value="null">Vse stranke</SelectItem>
<SelectItem v-for="c in clients" :key="c.id" :value="c.id">
{{ c.name }}
</SelectItem>
</SelectContent>
</Select>
<AppCombobox
v-model="clientId"
:items="clientItems"
placeholder="Vse stranke"
search-placeholder="Išči stranko..."
empty-text="Stranka ni najdena."
button-class="w-full"
@update:model-value="loadContracts()"
/>
</div>
<div class="space-y-2">
<Label>Iskanje po referenci</Label>
@@ -586,29 +604,21 @@ const numbersCount = computed(() => {
<div class="grid gap-4 md:grid-cols-2">
<div class="space-y-3">
<p class="text-sm text-muted-foreground">Datum začetka pogodbe</p>
<div class="grid grid-cols-2 gap-2">
<div class="space-y-2">
<Label class="text-xs">Od</Label>
<Input v-model="startDateFrom" type="date" />
</div>
<div class="space-y-2">
<Label class="text-xs">Do</Label>
<Input v-model="startDateTo" type="date" />
</div>
</div>
<AppRangeDatePicker
v-model="startDateRange"
placeholder="Izberi obdobje"
button-class="w-full"
:number-of-months="1"
/>
</div>
<div class="space-y-3">
<p class="text-sm text-muted-foreground">Datum obljube plačila</p>
<div class="grid grid-cols-2 gap-2">
<div class="space-y-2">
<Label class="text-xs">Od</Label>
<Input v-model="promiseDateFrom" type="date" />
</div>
<div class="space-y-2">
<Label class="text-xs">Do</Label>
<Input v-model="promiseDateTo" type="date" />
</div>
</div>
<AppRangeDatePicker
v-model="promiseDateRange"
placeholder="Izberi obdobje"
button-class="w-full"
:number-of-months="1"
/>
</div>
</div>
</div>
@@ -621,8 +631,8 @@ const numbersCount = computed(() => {
<div class="flex flex-wrap gap-4">
<div class="flex items-center gap-2">
<Checkbox
:checked="onlyMobile"
@update:checked="
:model-value="onlyMobile"
@update:model-value="
(val) => {
onlyMobile = val;
}
@@ -635,8 +645,8 @@ const numbersCount = computed(() => {
</div>
<div class="flex items-center gap-2">
<Checkbox
:checked="onlyValidated"
@update:checked="
:model-value="onlyValidated"
@update:model-value="
(val) => {
onlyValidated = val;
}
@@ -653,11 +663,11 @@ const numbersCount = computed(() => {
<!-- Action buttons -->
<div class="flex items-center gap-2">
<Button @click="loadContracts()">
<SearchIcon class="h-4 w-4 mr-2" />
<SearchIcon class="h-4 w-4" />
Išči pogodbe
</Button>
<Button @click="resetFilters" variant="outline">
<XCircleIcon class="h-4 w-4 mr-2" />
<XCircleIcon class="h-4 w-4" />
Počisti filtre
</Button>
</div>
@@ -669,7 +679,7 @@ const numbersCount = computed(() => {
<CardHeader>
<div class="flex items-center justify-between">
<div>
<CardTitle>Rezultati iskanja</CardTitle>
<CardTitle>Rezultati iskanja (do 500 zapisov)</CardTitle>
<CardDescription v-if="contracts.meta.total > 0">
Najdeno {{ contracts.meta.total }}
{{
@@ -689,7 +699,7 @@ const numbersCount = computed(() => {
variant="secondary"
class="text-sm"
>
<CheckCircle2Icon class="h-3 w-3 mr-1" />
<CheckCircle2Icon class="h-3 w-3" />
Izbrano: {{ selectedContractIds.size }}
</Badge>
<Button
@@ -702,7 +712,7 @@ const numbersCount = computed(() => {
@click="submitCreateFromContracts"
:disabled="selectedContractIds.size === 0 || creatingFromContracts"
>
<SaveIcon class="h-4 w-4 mr-2" />
<SaveIcon class="h-4 w-4" />
Ustvari paket ({{ selectedContractIds.size }}
{{
selectedContractIds.size === 1
resources/js/Pages/Admin/Packages/Index.vue
+9 -9
View File
@@ -18,6 +18,7 @@ import {
import DataTableNew2 from "@/Components/DataTable/DataTableNew2.vue";
import { PackageIcon, PlusIcon, Trash2Icon, EyeIcon } from "lucide-vue-next";
import AppCard from "@/Components/app/ui/card/AppCard.vue";
import { fmtDateTime } from "@/Utilities/functions";
const props = defineProps({
packages: { type: Object, required: true },
@@ -29,7 +30,6 @@ const showDeleteDialog = ref(false);
const columns = [
{ accessorKey: "id", header: "ID" },
{ accessorKey: "uuid", header: "UUID" },
{ accessorKey: "name", header: "Ime" },
{ accessorKey: "type", header: "Tip" },
{ accessorKey: "status", header: "Status" },
@@ -84,7 +84,7 @@ function confirmDelete() {
</div>
<Link :href="route('admin.packages.create')">
<Button>
<PlusIcon class="h-4 w-4 mr-2" />
<PlusIcon class="h-4 w-4" />
Nov paket
</Button>
</Link>
@@ -111,10 +111,6 @@ function confirmDelete() {
:meta="packages"
route-name="admin.packages.index"
>
<template #cell-uuid="{ row }">
<span class="font-mono text-xs text-muted-foreground">{{ row.uuid }}</span>
</template>
<template #cell-name="{ row }">
<span class="text-sm">{{ row.name ?? "—" }}</span>
</template>
@@ -128,7 +124,9 @@ function confirmDelete() {
</template>
<template #cell-finished_at="{ row }">
<span class="text-xs text-muted-foreground">{{ row.finished_at ?? "—" }}</span>
<span class="text-xs text-muted-foreground">{{
fmtDateTime(row.finished_at) ?? "—"
}}</span>
</template>
<template #cell-actions="{ row }">
@@ -157,8 +155,10 @@ function confirmDelete() {
<AlertDialogTitle>Izbriši paket?</AlertDialogTitle>
<AlertDialogDescription>
Ali ste prepričani, da želite izbrisati paket
<strong v-if="packageToDelete">#{{ packageToDelete.id }} - {{ packageToDelete.name || 'Brez imena' }}</strong>?
Tega dejanja ni mogoče razveljaviti.
<strong v-if="packageToDelete"
>#{{ packageToDelete.id }} -
{{ packageToDelete.name || "Brez imena" }}</strong
>? Tega dejanja ni mogoče razveljaviti.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
resources/js/Pages/Imports/Create.vue
+1 -1
View File
@@ -245,7 +245,7 @@ async function startImport() {
<!-- Has Header Checkbox -->
<div class="flex items-center space-x-2">
<Checkbox id="has-header" v-model:checked="form.has_header" />
<Checkbox id="has-header" :model-value="form.has_header" />
<Label
for="has-header"
class="cursor-pointer text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
resources/js/Pages/Imports/Import.vue
+2 -1
View File
@@ -1317,7 +1317,8 @@ async function fetchSimulation() {
<Checkbox
:id="'show-missing-checkbox'"
:checked="showMissingEnabled"
@update:checked="
:model-value="showMissingEnabled"
@update:model-value="
(val) => {
showMissingEnabled = val;
saveImportOptions();
resources/js/Pages/Imports/Partials/ActionsBar.vue
+2 -2
View File
@@ -34,8 +34,8 @@ const emits = defineEmits([
:disabled="!importId"
title="Preznesi originalno uvozno datoteko"
>
<ArrowDownTrayIcon class="h-4 w-4 mr-2" />
Presnemi datoteko
<ArrowDownTrayIcon class="h-4 w-4" />
Prenos datoteko
</Button>
<!-- Other action buttons - only when not completed -->
resources/js/Pages/Imports/Partials/MappingTable.vue
+188 -119
View File
@@ -1,10 +1,24 @@
<script setup>
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/Components/ui/table';
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/Components/ui/select';
import { Checkbox } from '@/Components/ui/checkbox';
import { Input } from '@/Components/ui/input';
import { Badge } from '@/Components/ui/badge';
import { ScrollArea } from '@/Components/ui/scroll-area';
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/Components/ui/table";
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/Components/ui/select";
import { Checkbox } from "@/Components/ui/checkbox";
import { Input } from "@/Components/ui/input";
import { Badge } from "@/Components/ui/badge";
import { ScrollArea } from "@/Components/ui/scroll-area";
const props = defineProps({
rows: Array,
@@ -19,12 +33,12 @@ const props = defineProps({
mappingError: String,
show: { type: Boolean, default: true },
fieldsForEntity: Function,
})
const emits = defineEmits(['update:rows','save'])
});
const emits = defineEmits(["update:rows", "save"]);
function duplicateTarget(row){
if(!row || !row.entity || !row.field) return false
return props.duplicateTargets?.has?.(row.entity + '.' + row.field) || false
function duplicateTarget(row) {
if (!row || !row.entity || !row.field) return false;
return props.duplicateTargets?.has?.(row.entity + "." + row.field) || false;
}
</script>
<template>
@@ -32,137 +46,192 @@ function duplicateTarget(row){
<div class="flex items-center justify-between mb-2">
<h3 class="font-semibold">
Detected Columns
<Badge variant="outline" class="ml-2 text-[10px]">{{ detected?.has_header ? 'header' : 'positional' }}</Badge>
<Badge variant="outline" class="ml-2 text-[10px]">{{
detected?.has_header ? "header" : "positional"
}}</Badge>
</h3>
<div class="text-xs text-muted-foreground">
detected: {{ detected?.columns?.length || 0 }}, rows: {{ rows.length }}, delimiter: {{ detected?.delimiter || 'auto' }}
detected: {{ detected?.columns?.length || 0 }}, rows: {{ rows.length }},
delimiter: {{ detected?.delimiter || "auto" }}
</div>
</div>
<p v-if="detectedNote" class="text-xs text-muted-foreground mb-2">{{ detectedNote }}</p>
<p v-if="detectedNote" class="text-xs text-muted-foreground mb-2">
{{ detectedNote }}
</p>
<div class="relative border rounded-lg">
<ScrollArea class="h-[420px]">
<Table>
<TableHeader class="sticky top-0 z-10 bg-background">
<TableRow class="hover:bg-transparent">
<TableHead class="w-[180px] bg-muted/95 backdrop-blur">Source column</TableHead>
<TableHead class="w-[180px] bg-muted/95 backdrop-blur"
>Source column</TableHead
>
<TableHead class="w-[150px] bg-muted/95 backdrop-blur">Entity</TableHead>
<TableHead class="w-[150px] bg-muted/95 backdrop-blur">Field</TableHead>
<TableHead class="w-[140px] bg-muted/95 backdrop-blur">Meta key</TableHead>
<TableHead class="w-[120px] bg-muted/95 backdrop-blur">Meta type</TableHead>
<TableHead class="w-[120px] bg-muted/95 backdrop-blur">Transform</TableHead>
<TableHead class="w-[130px] bg-muted/95 backdrop-blur">Apply mode</TableHead>
<TableHead class="w-[60px] text-center bg-muted/95 backdrop-blur">Skip</TableHead>
<TableHead class="w-[130px] bg-muted/95 backdrop-blur"
>Apply mode</TableHead
>
<TableHead class="w-[60px] text-center bg-muted/95 backdrop-blur"
>Skip</TableHead
>
</TableRow>
</TableHeader>
<TableBody>
<TableRow v-for="(row, idx) in rows" :key="idx" :class="duplicateTarget(row) ? 'bg-destructive/10' : ''">
<TableCell class="font-medium">{{ row.source_column }}</TableCell>
<TableCell>
<Select :model-value="row.entity || ''" @update:model-value="(val) => row.entity = val || ''" :disabled="isCompleted">
<SelectTrigger class="h-8 text-xs">
<SelectValue placeholder="Select entity..." />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem v-for="opt in entityOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</TableCell>
<TableCell>
<Select
:model-value="row.field || ''"
@update:model-value="(val) => row.field = val || ''"
:disabled="isCompleted"
:class="duplicateTarget(row) ? 'border-destructive' : ''"
>
<SelectTrigger class="h-8 text-xs" :class="duplicateTarget(row) ? 'border-destructive bg-destructive/10' : ''">
<SelectValue placeholder="Select field..." />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem v-for="f in fieldsForEntity(row.entity)" :key="f" :value="f">{{ f }}</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</TableCell>
<TableCell>
<Input
v-if="row.field === 'meta'"
v-model="(row.options ||= {}).key"
type="text"
class="h-8 text-xs"
placeholder="e.g. monthly_rent"
:disabled="isCompleted"
/>
<span v-else class="text-muted-foreground text-xs">—</span>
</TableCell>
<TableCell>
<Select
v-if="row.field === 'meta'"
:model-value="(row.options ||= {}).type || 'string'"
@update:model-value="(val) => (row.options ||= {}).type = val"
:disabled="isCompleted"
>
<SelectTrigger class="h-8 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem value="string">string</SelectItem>
<SelectItem value="number">number</SelectItem>
<SelectItem value="date">date</SelectItem>
<SelectItem value="boolean">boolean</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
<span v-else class="text-muted-foreground text-xs">—</span>
</TableCell>
<TableCell>
<Select :model-value="row.transform || 'none'" @update:model-value="(val) => row.transform = val === 'none' ? '' : val" :disabled="isCompleted">
<SelectTrigger class="h-8 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem value="none">None</SelectItem>
<SelectItem value="trim">Trim</SelectItem>
<SelectItem value="upper">Uppercase</SelectItem>
<SelectItem value="lower">Lowercase</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</TableCell>
<TableCell>
<Select :model-value="row.apply_mode || 'both'" @update:model-value="(val) => row.apply_mode = val" :disabled="isCompleted">
<SelectTrigger class="h-8 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem value="keyref">Keyref</SelectItem>
<SelectItem value="both">Both</SelectItem>
<SelectItem value="insert">Insert only</SelectItem>
<SelectItem value="update">Update only</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</TableCell>
<TableCell class="text-center">
<Checkbox :checked="row.skip" @update:checked="(val) => row.skip = val" :disabled="isCompleted" />
</TableCell>
</TableRow>
</TableBody>
</Table>
<TableRow
v-for="(row, idx) in rows"
:key="idx"
:class="duplicateTarget(row) ? 'bg-destructive/10' : ''"
>
<TableCell class="font-medium">{{ row.source_column }}</TableCell>
<TableCell>
<Select
:model-value="row.entity || ''"
@update:model-value="(val) => (row.entity = val || '')"
:disabled="isCompleted"
>
<SelectTrigger class="h-8 text-xs">
<SelectValue placeholder="Select entity..." />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem
v-for="opt in entityOptions"
:key="opt.value"
:value="opt.value"
>{{ opt.label }}</SelectItem
>
</SelectGroup>
</SelectContent>
</Select>
</TableCell>
<TableCell>
<Select
:model-value="row.field || ''"
@update:model-value="(val) => (row.field = val || '')"
:disabled="isCompleted"
:class="duplicateTarget(row) ? 'border-destructive' : ''"
>
<SelectTrigger
class="h-8 text-xs"
:class="
duplicateTarget(row) ? 'border-destructive bg-destructive/10' : ''
"
>
<SelectValue placeholder="Select field..." />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem
v-for="f in fieldsForEntity(row.entity)"
:key="f"
:value="f"
>{{ f }}</SelectItem
>
</SelectGroup>
</SelectContent>
</Select>
</TableCell>
<TableCell>
<Input
v-if="row.field === 'meta'"
v-model="(row.options ||= {}).key"
type="text"
class="h-8 text-xs"
placeholder="e.g. monthly_rent"
:disabled="isCompleted"
/>
<span v-else class="text-muted-foreground text-xs">—</span>
</TableCell>
<TableCell>
<Select
v-if="row.field === 'meta'"
:model-value="(row.options ||= {}).type || 'string'"
@update:model-value="(val) => ((row.options ||= {}).type = val)"
:disabled="isCompleted"
>
<SelectTrigger class="h-8 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem value="string">string</SelectItem>
<SelectItem value="number">number</SelectItem>
<SelectItem value="date">date</SelectItem>
<SelectItem value="boolean">boolean</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
<span v-else class="text-muted-foreground text-xs">—</span>
</TableCell>
<TableCell>
<Select
:model-value="row.transform || 'none'"
@update:model-value="
(val) => (row.transform = val === 'none' ? '' : val)
"
:disabled="isCompleted"
>
<SelectTrigger class="h-8 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem value="none">None</SelectItem>
<SelectItem value="trim">Trim</SelectItem>
<SelectItem value="upper">Uppercase</SelectItem>
<SelectItem value="lower">Lowercase</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</TableCell>
<TableCell>
<Select
:model-value="row.apply_mode || 'both'"
@update:model-value="(val) => (row.apply_mode = val)"
:disabled="isCompleted"
>
<SelectTrigger class="h-8 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem value="keyref">Keyref</SelectItem>
<SelectItem value="both">Both</SelectItem>
<SelectItem value="insert">Insert only</SelectItem>
<SelectItem value="update">Update only</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</TableCell>
<TableCell class="text-center">
<Checkbox
:model-value="row.skip"
@update:model-value="(val) => (row.skip = val)"
:disabled="isCompleted"
/>
</TableCell>
</TableRow>
</TableBody>
</Table>
</ScrollArea>
</div>
<div v-if="mappingSaved" class="text-sm text-emerald-700 mt-2 flex items-center gap-2">
<div
v-if="mappingSaved"
class="text-sm text-emerald-700 mt-2 flex items-center gap-2"
>
<Badge variant="default" class="bg-emerald-600">Saved</Badge>
<span>{{ mappingSavedCount }} mappings saved</span>
</div>
<div v-else-if="mappingError" class="text-sm text-destructive mt-2">{{ mappingError }}</div>
<div v-else-if="mappingError" class="text-sm text-destructive mt-2">
{{ mappingError }}
</div>
<div v-if="missingCritical?.length" class="mt-2">
<Badge variant="destructive" class="text-xs">Missing critical: {{ missingCritical.join(', ') }}</Badge>
<Badge variant="destructive" class="text-xs"
>Missing critical: {{ missingCritical.join(", ") }}</Badge
>
</div>
</div>
</template>
resources/js/Pages/Testing/Index.vue
+19 -4
View File
@@ -1,13 +1,21 @@
<script setup>
import { ref } from "vue";
import { ref, watch } from "vue";
import AppLayout from "@/Layouts/AppLayout.vue";
import DataTableClient from "@/Components/DataTable/DataTableClient.vue";
import DataTableExample from "../Examples/DataTableExample.vue";
import { useForm } from "@inertiajs/vue3";
import Checkbox from "@/Components/ui/checkbox/Checkbox.vue";
const props = defineProps({
example: { type: String, default: "Demo" },
});
const checkboxValue = ref(false);
const testForm = useForm({
allowed: false,
});
// Dummy columns
const columns = [
{ key: "id", label: "ID", sortable: true, class: "w-16" },
@@ -53,10 +61,17 @@ function onRowClick(row) {
// no-op demo; could show toast or details
console.debug("Row clicked:", row);
}
watch(
() => testForm.allowed,
(newVal) => {
console.log(newVal);
}
);
</script>
<template>
<DataTableExample></DataTableExample>
<AppLayout>
<Checkbox v-model:checked="testForm.allowed" />
</AppLayout>
</template>