Tooloop/Caramel-CRM-Backup
Archived
2
0
Fork 0
Code Issues 40 Pull Requests Projects 3 Releases Wiki Activity

Some work on customers view #3

Browse Source
This commit is contained in:
Daniel Stock
2025-11-04 13:51:31 +01:00
parent 0f145f5f53
commit d222b4c10d
13 changed files with 154 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/app.css
+1 -1
View File
@@ -111,7 +111,7 @@ :root {
--secondary-foreground: hsl(0 0% 9%);
--muted: var(--color-slate-50);
--muted-foreground: var(--color-slate-400);
--accent: var(--color-slate-100);
--accent: var(--color-stone-50);
--accent-foreground: hsl(0 0% 9%);
--destructive: var(--color-red-500);
--destructive-foreground: hsl(0 0% 98%);
resources/js/components/AppSidebar.vue
+2 -2
View File
@@ -86,13 +86,13 @@ const footerNavItems: NavItem[] = [
<Sidebar collapsible="icon" variant="inset">
<SidebarHeader>
<Link :href="dashboard()" class="flex row items-center">
<Link :href="dashboard()" class="flex row items-center mt-6">
<AppLogo />
</Link>
<TooltipProvider>
<Tooltip>
<TooltipTrigger class="w-fit absolute right-3 group-data-[collapsible=icon]:right-5">
<TooltipTrigger class="w-fit absolute top-11 right-3 group-data-[collapsible=icon]:right-5">
<SidebarTrigger class="hidden md:flex text-primary-foreground" />
</TooltipTrigger>
<TooltipContent>
resources/js/components/CustomerDialog.vue
+11 -3
View File
@@ -34,12 +34,12 @@ watch(() => props.customerData as Customer,
isDirty.value = false
isLoading.value = true
console.log("customerData", "Dirty: " + isDirty.value, "loading: " + isLoading.value)
// console.log("customerData", "Dirty: " + isDirty.value, "loading: " + isLoading.value)
}
)
watch(customer, (newValue) => {
console.log(newValue)
// console.log(newValue)
})
const saveChanges = () => {
@@ -101,7 +101,7 @@ const cancelChanges = (event: Event | null) => {
<div class="overflow-y-auto px-6">
<div id="document-header"
<div
class="block sticky top-0 py-4 bg-slate-100 bg-white dark:bg-neutral-800 z-1 flex items-end gap-12">
<div class="grow">
<DialogTitle class="text-xl text-primary-foreground font-bold">Edit profile</DialogTitle>
@@ -110,6 +110,14 @@ const cancelChanges = (event: Event | null) => {
</DialogDescription>
</div>
</div>
<div class="flex-none md:flex gap-12 mt-6 2 p-6 bg-slate-100 dark:bg-neutral-900 rounded-lg">
Customer Form hier
</div>
<div class="px-4 mt-6">
Contacts hier
</div>
</div>
<DialogFooter></DialogFooter>
resources/js/components/documents/InvoiceDialog.vue
+4 -3
View File
@@ -84,8 +84,10 @@ watch(invoice,
(newValue, oldValue) => {
if (isLoading.value) {
if (!invoice.value) return;
// Initial load of invoice data
if (invoice.value && !invoice.value.billingData) {
if (!invoice.value.billingData) {
// Set default billing data from customer
invoice.value.billingData = {
companyName: invoice.value.customer?.companyName || "",
@@ -104,7 +106,7 @@ watch(invoice,
}
}
if (invoice.value && invoice.value.customer?.id !== 0) {
if (invoice.value.customer?.id !== 0) {
importCustomer.value = invoice.value.customer as Customer
// console.log("billingData contact", invoice.value?.billingData?.contactFirstName, invoice.value?.billingData?.contactLastName)
@@ -120,7 +122,6 @@ watch(invoice,
}
value.value = fromDate(new Date(invoice.value.invoiceDate), getLocalTimeZone())
}
else {
isDirty.value = true
resources/js/components/documents/LineItemTable.vue
+1 -1
View File
@@ -133,7 +133,7 @@ const recalculatePositions = () => {
<!-- Preis -->
<TableCell class="w-1/8 text-right tabular-nums">
<NumberInput :modelValue="Number(element.price)"
<NumberInput v-model="element.price"
class="bg-transparent p-1 h-7! dark:bg-transparent hover:bg-background/66 dark:hover:bg-background/66 rounded shadow-none!" />
</TableCell>
resources/js/components/ui/alert-dialog/AlertDialogContent.vue
+1 -1
View File
@@ -28,7 +28,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
v-bind="forwarded"
:class="
cn(
'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-bottom-[5%] data-[state=open]:slide-in-from-bottom-[5%] sm:rounded-lg',
'fixed left-1/2 top-1/2 z-50 grid max-w-lg -translate-x-1/2 -translate-y-1/2 gap-8 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-bottom-[5%] data-[state=open]:slide-in-from-bottom-[5%] sm:rounded-lg',
props.class,
)
"
resources/js/components/ui/number-input/NumberInput.vue
+1 -1
View File
@@ -56,7 +56,7 @@ export default defineComponent({
<template>
<div class="flex items-center gap-2">
<vue-number class="file:text-foreground placeholder:text-muted-foreground dark:bg-input/30 border-input flex h-9 min-w-4 rounded-md bg-input px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive tabular-nums h-6 py-0 px-1 m-0 bg-transparent border-none dark:bg-transparent hover:border-1
<vue-number class="file:text-foreground border-input flex min-w-4 rounded-lg text-base transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive tabular-nums h-6 py-0 px-1 m-0 bg-transparent border-none dark:bg-transparent hover:border-1
dark:hover:border-1 placeholder:text-muted-foreground/30 shadow-none w-28 text-right" v-model="value"
v-bind="number" />
</div>
resources/js/pages/Customers.vue
+110 -38
View File
@@ -11,7 +11,9 @@ import { randomInt, bgColorForString } from '@/lib/utils'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'
import { Copy, Delete, Edit, Phone, Plus, Search } from "lucide-vue-next"
import { Badge } from '@/components/ui/badge'
import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, } from '@/components/ui/button-group'
import { Copy, Delete, Edit, Globe, House, LayoutGrid, LayoutList, Phone, Plus, Rows3, Rows4, Search } from "lucide-vue-next"
import Fuse from 'fuse.js';
import { getInitials } from '@/composables/useInitials';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from '@/components/ui/card'
@@ -46,12 +48,12 @@ onMounted(async () => {
})
watch(activeCustomer, () => {
console.log(activeCustomer.value?.companyName)
})
const fuse = computed(() => {
return new Fuse(customersData.value, {
keys: ['companyName', 'firstName', 'lastName', 'email', 'phone'],
keys: ['companyName', 'contacts.firstName', 'contacts.lastName'],
threshold: 0.3
});
})
@@ -64,28 +66,41 @@ const filteredCustomers = computed(() => {
})
const addressToClipbard = async function (address: Address) {
const addressToClipbard = async function (companyName: string | null, address: Address | null, event: Event) {
event.stopPropagation();
try {
await navigator.clipboard.writeText(
address.lineOne + '\n' +
(address.lineTwo ? address.lineTwo + '\n' : '') +
address.postalCode + ' ' + address.city
)
let copy = '';
if (companyName) copy += companyName + '\n'
if (address) {
copy +=
address.lineOne + '\n' +
(address.lineTwo ? address.lineTwo + '\n' : '') +
address.postalCode + ' ' + address.city
}
await navigator.clipboard.writeText(copy)
toast('Adresse kopiert', { duration: 2000 })
} catch (notAllowedError: DOMException) {
if (notAllowedError instanceof Error) {
toast.error(notAllowedError.name, { description: notAllowedError.message })
}
}
}
const showDetail = (customer: Customer) => {
// make a deep copy, so the changes in the dialog won’t affect the data until saved
activeCustomer.value = JSON.parse(JSON.stringify(customer))
detailDialogOpen.value = true
}
const browse = (url: string, event: Event) => {
event.stopPropagation();
window.open(url, '_blank')
}
const call = (number: string, event: Event) => {
event.stopPropagation();
window.open('tel:' + number, '_self')
}
</script>
<template>
@@ -93,56 +108,113 @@ const showDetail = (customer: Customer) => {
<Head title="Dashboard" />
<AppLayout :breadcrumbs="breadcrumbs">
<div class="flex h-full flex-1 flex-col gap-4 overflow-x-auto p-4 bg-slate-50 dark:bg-neutral-900/40">
<div
class="flex h-full flex-1 flex-col gap-4 overflow-x-auto p-4 lg:p-8 print:bg-transparent print:p-0 print:m-0">
<div class="flex">
<div class="relative w-full max-w-sm items-center mx-auto mb-6">
<Input ref="search-field" id="search" type="text" placeholder="Suchen" class="px-8"
v-model="searchQuery" autofocus />
<!-- Function Header -->
<div id="function-header" class="flex row justify-between items-center mb-4 gap-4">
<!-- View buttons -->
<ButtonGroup aria-label="Button group">
<Button variant="pressed" size="sm">
<LayoutGrid stroke-width="1.5" />
</Button>
<Button variant="outline" size="sm">
<Rows3 stroke-width="1.5" />
</Button>
</ButtonGroup>
<!-- Search field -->
<div class="relative w-full max-w-sm items-center">
<Input ref="search-field" id="search" type="text" placeholder="Filtern" class="px-8 bg-background"
v-model="searchQuery" />
<span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
<Search class="size-4 text-muted-foreground" :stroke-width="1.5" />
</span>
<span class="absolute end-0 inset-y-0 flex items-center justify-center px-0">
<span class="absolute end-0 inset-y-0 flex items-center justify-center px-0 mr-1">
<Button :size="'sm'" :variant="'ghost'" @click="searchQuery = ''; searchField.focus()">
<Delete class="size-4 text-muted-foreground" :stroke-width="1.5" />
</Button>
</span>
</div>
<Button :size="'sm'" :variant="'action'" @click="">
<Plus /> Neu
<!-- New button -->
<Button size="sm" variant="action" @click="">
<Plus stroke-width="1.5" /> Neu
</Button>
</div>
<div class="columns-xs gap-4">
<div class="columns-xs gap-6">
<Card v-for="customer in filteredCustomers" :key="customer.id"
class="mb-4 shadow-xl break-inside-avoid hover:bg-accent" @click="showDetail(customer)">
<CardHeader>
<CardTitle>{{ customer.companyName }}</CardTitle>
<CardDescription>Kategorie / Umsatz</CardDescription>
class="relative mb-6 break-inside-avoid hover:bg-accent active:shadow-none overflow-clip"
@click="showDetail(customer)">
<CardHeader v-if="customer.logo" class="z-0">
<img :src="'storage/uploads/' + customer.logo" alt="Logo {{ customer.companyName }}"
class="max-h-8 max-w-[50%]">
</CardHeader>
<CardContent class="text-sm">
<address class="relative not-italic my-2">
{{ customer.billingAddress.lineOne }}<br />
{{ customer.billingAddress.lineTwo }}<br v-if="customer.billingAddress.lineTwo" />
{{ customer.billingAddress.postalCode }} {{ customer.billingAddress.city }}
<Button class="absolute end-0 top-0" size="sm" variant="ghost"
@click="addressToClipbard(customer.billingAddress)">
<Copy :stroke-width="1.5" />
</Button>
<CardContent class="flex justify-between gap-4 flex-col sm:flex-row pr-4 z-0">
<address class="not-italic">
<CardTitle>
{{ customer.companyName }}
<!-- <Badge variant="secondary">Badge</Badge> -->
</CardTitle>
<CardDescription class="mt-2">
{{ customer.billingAddress?.lineOne }}<br />
{{ customer.billingAddress?.lineTwo }}<br v-if="customer.billingAddress?.lineTwo" />
{{ customer.billingAddress?.postalCode }} {{ customer.billingAddress?.city }}
</CardDescription>
</address>
<a href="https://www.tooloop.de">www.tooloop.de</a><br />
<a href="tel://+4982165079983">+49 821 650799-83</a><br />
<div class="flex items-start">
<TooltipProvider>
<Tooltip v-if="customer.url">
<TooltipTrigger>
<Button variant="ghost" size="sm"
@click="(event: Event) => browse(customer.url as string, event)">
<Globe stroke-width="1.5" />
</Button>
</TooltipTrigger>
<TooltipContent>
{{ customer.url }} öffnen
</TooltipContent>
</Tooltip>
<Tooltip v-if="customer.phone">
<TooltipTrigger>
<Button variant="ghost" size="sm"
@click="(event: Event) => call(customer.phone as string, event)">
<Phone stroke-width="1.5" />
</Button>
</TooltipTrigger>
<TooltipContent>
{{ customer.phone }} anrufen
</TooltipContent>
</Tooltip>
<Tooltip v-if="customer.billingAddress">
<TooltipTrigger>
<Button variant="ghost" size="sm"
@click="(event: Event) => addressToClipbard(customer.companyName, customer.billingAddress as Address | null, event)">
<House stroke-width="1.5" />
</Button>
</TooltipTrigger>
<TooltipContent>
Adresse in Zwischenablage kopieren
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</CardContent>
<CardFooter>
<CardFooter v-if="customer.contacts.length > 0">
<TooltipProvider :delay-duration="0">
<Tooltip v-for="contact in customer.contacts">
<TooltipTrigger>
<Avatar class="-mr-2 border-2 size-14">
<AvatarImage :src="contact.avatar || ''" />
<Avatar class="-mr-2 size-14 shadow">
<AvatarImage v-if="contact.avatar"
:src="'/storage/uploads/' + contact.avatar" loading="lazy" />
<AvatarFallback
:class="bgColorForString(getInitials(contact.firstName + ' ' + contact.lastName))">
{{ getInitials(contact.firstName + ' ' + contact.lastName) }}
resources/js/types/index.d.ts
Vendored
+3
View File
@@ -105,6 +105,7 @@ export interface Customer {
customerNr: number | null;
vatId: string | null;
contacts: Contact[];
url?: string;
email?: string;
phone?: string;
billingAddress?: Address;
@@ -112,6 +113,7 @@ export interface Customer {
status: string;
avatar?: string | null;
notes?: string;
logo: string | null;
}
export type CustomerType = Customer
@@ -126,6 +128,7 @@ export function newCustomer(): Customer {
billingAddress: newAddress(),
paymentTerms: newPaymentTerms(),
status: 'active',
logo: null
}
}