changes UI
This commit is contained in:
Simon Pocrnjič
@@ -1,12 +1,12 @@
|
||||
<script setup>
|
||||
import { ref, computed } from "vue";
|
||||
import { Link, router } from "@inertiajs/vue3";
|
||||
import { router } from "@inertiajs/vue3";
|
||||
import DataTable from "@/Components/DataTable/DataTable.vue";
|
||||
import Dropdown from "@/Components/Dropdown.vue";
|
||||
import DeleteDialog from "@/Components/Dialogs/DeleteDialog.vue";
|
||||
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
||||
import { library } from "@fortawesome/fontawesome-svg-core";
|
||||
import { faTrash, faEllipsisVertical, faCopy } from "@fortawesome/free-solid-svg-icons";
|
||||
import Dropdown from "@/Components/Dropdown.vue";
|
||||
|
||||
library.add(faTrash, faEllipsisVertical, faCopy);
|
||||
|
||||
@@ -35,6 +35,7 @@ const fmtDate = (d) => {
|
||||
return String(d);
|
||||
}
|
||||
};
|
||||
|
||||
const fmtDateTime = (d) => {
|
||||
if (!d) return "";
|
||||
try {
|
||||
@@ -54,12 +55,11 @@ const fmtDateTime = (d) => {
|
||||
return String(d);
|
||||
}
|
||||
};
|
||||
|
||||
const fmtCurrency = (v) => {
|
||||
const n = Number(v ?? 0);
|
||||
try {
|
||||
return new Intl.NumberFormat("sl-SI", { style: "currency", currency: "EUR" }).format(
|
||||
n
|
||||
);
|
||||
return new Intl.NumberFormat("sl-SI", { style: "currency", currency: "EUR" }).format(n);
|
||||
} catch {
|
||||
return `${n.toFixed(2)} €`;
|
||||
}
|
||||
@@ -72,36 +72,32 @@ const deleteActivity = (row) => {
|
||||
client_case: props.client_case.uuid,
|
||||
activity: row.id,
|
||||
}),
|
||||
{
|
||||
preserveScroll: true,
|
||||
}
|
||||
{ preserveScroll: true }
|
||||
);
|
||||
};
|
||||
|
||||
// Confirmation modal state
|
||||
const confirmDelete = ref(false);
|
||||
const toDeleteRow = ref(null);
|
||||
|
||||
const openDelete = (row) => {
|
||||
toDeleteRow.value = row;
|
||||
confirmDelete.value = true;
|
||||
};
|
||||
|
||||
const cancelDelete = () => {
|
||||
confirmDelete.value = false;
|
||||
toDeleteRow.value = null;
|
||||
};
|
||||
|
||||
const confirmDeleteAction = () => {
|
||||
if (toDeleteRow.value) deleteActivity(toDeleteRow.value);
|
||||
confirmDelete.value = false;
|
||||
toDeleteRow.value = null;
|
||||
cancelDelete();
|
||||
};
|
||||
|
||||
// Copy function
|
||||
const copyToClipboard = async (text) => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
// You could add a toast notification here if available
|
||||
} catch (err) {
|
||||
// Fallback for older browsers
|
||||
const textArea = document.createElement("textarea");
|
||||
textArea.value = text;
|
||||
document.body.appendChild(textArea);
|
||||
@@ -113,23 +109,24 @@ const copyToClipboard = async (text) => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative">
|
||||
<div class="activity-scroll-wrapper max-h-[32rem] overflow-y-auto overflow-x-auto">
|
||||
<DataTable
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
:show-toolbar="true"
|
||||
:show-pagination="false"
|
||||
:show-search="false"
|
||||
:show-page-size="false"
|
||||
:hoverable="true"
|
||||
row-key="id"
|
||||
empty-text="Ni aktivnosti."
|
||||
class="border-0"
|
||||
>
|
||||
<div class="p-4">
|
||||
<DataTable
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
:show-toolbar="true"
|
||||
:show-pagination="false"
|
||||
:show-search="false"
|
||||
:show-page-size="false"
|
||||
:show-add="!!$slots.add"
|
||||
:hoverable="true"
|
||||
row-key="id"
|
||||
empty-text="Ni aktivnosti."
|
||||
class="border-0"
|
||||
>
|
||||
<template #toolbar-add>
|
||||
<slot name="add" />
|
||||
</template>
|
||||
|
||||
<template #cell-decision_dot="{ row }">
|
||||
<div class="flex justify-center">
|
||||
<span
|
||||
@@ -137,18 +134,13 @@ const copyToClipboard = async (text) => {
|
||||
class="inline-block h-4 w-4 rounded-full ring-1 ring-gray-300"
|
||||
:style="{ backgroundColor: row.decision?.color_tag }"
|
||||
:title="row.decision?.color_tag"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #cell-contract="{ row }">
|
||||
<template v-if="row.contract?.reference">
|
||||
{{ row.contract.reference }}
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="text-gray-400">—</span>
|
||||
</template>
|
||||
<span v-if="row.contract?.reference">{{ row.contract.reference }}</span>
|
||||
<span v-else class="text-gray-400">—</span>
|
||||
</template>
|
||||
|
||||
<template #cell-decision="{ row }">
|
||||
@@ -170,24 +162,15 @@ const copyToClipboard = async (text) => {
|
||||
</template>
|
||||
<template v-else-if="row.note">
|
||||
<span>{{ row.note.slice(0, 60) }}… </span>
|
||||
<Dropdown
|
||||
align="left"
|
||||
width="56"
|
||||
:content-classes="['p-2', 'bg-white', 'shadow', 'max-w-xs']"
|
||||
>
|
||||
<Dropdown align="left" width="56" :content-classes="['p-2', 'bg-white', 'shadow', 'max-w-xs']">
|
||||
<template #trigger>
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex items-center text-[11px] text-indigo-600 hover:underline focus:outline-none"
|
||||
>
|
||||
<button type="button" class="inline-flex items-center text-[11px] text-indigo-600 hover:underline">
|
||||
Več
|
||||
</button>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="relative" @click.stop>
|
||||
<div
|
||||
class="flex items-center justify-between p-1 border-b border-gray-200"
|
||||
>
|
||||
<div class="flex items-center justify-between p-1 border-b border-gray-200">
|
||||
<span class="text-xs font-medium text-gray-600">Opomba</span>
|
||||
<button
|
||||
@click="copyToClipboard(row.note)"
|
||||
@@ -198,9 +181,7 @@ const copyToClipboard = async (text) => {
|
||||
<span>Kopiraj</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="max-h-60 overflow-auto text-[12px] whitespace-pre-wrap break-words p-2"
|
||||
>
|
||||
<div class="max-h-60 overflow-auto text-[12px] whitespace-pre-wrap break-words p-2">
|
||||
{{ row.note }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -223,10 +204,7 @@ const copyToClipboard = async (text) => {
|
||||
<span class="text-gray-500">D:</span>
|
||||
<span class="ml-1">{{ fmtDate(row.due_date) }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="!row.due_date && (!row.amount || Number(row.amount) === 0)"
|
||||
class="text-gray-400"
|
||||
>
|
||||
<div v-if="!row.due_date && (!row.amount || Number(row.amount) === 0)" class="text-gray-400">
|
||||
—
|
||||
</div>
|
||||
</div>
|
||||
@@ -237,9 +215,7 @@ const copyToClipboard = async (text) => {
|
||||
{{ row.user?.name || row.user_name || "" }}
|
||||
</div>
|
||||
<div v-if="row.created_at" class="mt-1">
|
||||
<span
|
||||
class="inline-block px-2 py-0.5 rounded text-[11px] bg-gray-100 text-gray-600 tracking-wide"
|
||||
>
|
||||
<span class="inline-block px-2 py-0.5 rounded text-[11px] bg-gray-100 text-gray-600 tracking-wide">
|
||||
{{ fmtDateTime(row.created_at) }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -251,12 +227,9 @@ const copyToClipboard = async (text) => {
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex items-center justify-center h-8 w-8 rounded-full hover:bg-gray-100 focus:outline-none"
|
||||
title="Actions"
|
||||
title="Možnosti"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
:icon="faEllipsisVertical"
|
||||
class="h-4 w-4 text-gray-700"
|
||||
/>
|
||||
<FontAwesomeIcon :icon="faEllipsisVertical" class="h-4 w-4 text-gray-700" />
|
||||
</button>
|
||||
</template>
|
||||
<template #content>
|
||||
@@ -271,8 +244,7 @@ const copyToClipboard = async (text) => {
|
||||
</template>
|
||||
</Dropdown>
|
||||
</template>
|
||||
</DataTable>
|
||||
</div>
|
||||
</DataTable>
|
||||
</div>
|
||||
|
||||
<DeleteDialog
|
||||
@@ -285,42 +257,3 @@ const copyToClipboard = async (text) => {
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.activity-scroll-wrapper {
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
/* Ensure sticky header works within scroll container */
|
||||
.activity-scroll-wrapper :deep(table) {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.activity-scroll-wrapper :deep([data-table-container]) {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.activity-scroll-wrapper :deep([data-table-container] > div) {
|
||||
overflow-x: visible !important;
|
||||
overflow-y: visible !important;
|
||||
}
|
||||
|
||||
.activity-scroll-wrapper :deep(table thead) {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.activity-scroll-wrapper :deep(table thead tr) {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.activity-scroll-wrapper :deep(table thead th) {
|
||||
background-color: white !important;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
box-shadow: 0 1px 0 0 #e5e7eb;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user