b0124c11ba
- Site color field with color picker in create/edit modals - Dark mode theme (mytheme-dark) with toggle in navbar - Stronger site color visibility on cards (gradient, top border, badges) - Bigger action buttons (btn-sm) on machine cards - White card backgrounds with proper dark mode support Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
86 lines
2.9 KiB
Vue
86 lines
2.9 KiB
Vue
<template>
|
|
<div
|
|
class="card site-card shadow-md hover:shadow-xl transition-shadow overflow-hidden"
|
|
:style="{
|
|
borderTop: site.color ? `4px solid ${site.color}` : '4px solid transparent',
|
|
background: site.color ? `linear-gradient(160deg, ${site.color}30 0%, ${site.color}08 40%, var(--color-base-100) 100%)` : undefined,
|
|
}"
|
|
>
|
|
<div class="card-body">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="card-title text-lg text-base-content">
|
|
{{ site.name }}
|
|
</h3>
|
|
<div
|
|
class="badge font-bold"
|
|
:style="site.color ? { backgroundColor: site.color + '30', color: site.color, borderColor: site.color + '50' } : {}"
|
|
:class="!site.color ? 'badge-primary' : ''"
|
|
>
|
|
{{ machineCount }} machines
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-3 text-sm">
|
|
<div class="flex items-center gap-2 text-base-content/80">
|
|
<IconLucideUser class="w-4 h-4 text-primary" aria-hidden="true" />
|
|
<span class="font-medium">{{ site.contactName }}</span>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2 text-base-content/60">
|
|
<IconLucidePhone class="w-4 h-4 text-secondary" aria-hidden="true" />
|
|
<span>{{ formattedContactPhone }}</span>
|
|
</div>
|
|
|
|
<div class="flex items-start gap-2 text-base-content/60">
|
|
<IconLucideMapPin class="w-4 h-4 text-accent mt-1" aria-hidden="true" />
|
|
<span>
|
|
{{ site.contactAddress }}<br>
|
|
{{ site.contactPostalCode }} {{ site.contactCity }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2 text-base-content/60">
|
|
<IconLucideFactory class="w-4 h-4 text-blue-500" aria-hidden="true" />
|
|
<span>{{ machineCount }} machine(s)</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-actions justify-end mt-4">
|
|
<button class="btn btn-sm btn-outline" @click="emit('edit', site)">
|
|
{{ canEdit ? 'Modifier' : 'Consulter' }}
|
|
</button>
|
|
<button v-if="canEdit" class="btn btn-sm btn-error" @click="emit('delete', site)">
|
|
Supprimer
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
import IconLucideFactory from '~icons/lucide/factory'
|
|
import IconLucideMapPin from '~icons/lucide/map-pin'
|
|
import IconLucidePhone from '~icons/lucide/phone'
|
|
import IconLucideUser from '~icons/lucide/user'
|
|
import { formatPhone } from '~/utils/formatters/phone'
|
|
|
|
const { canEdit } = usePermissions()
|
|
|
|
const props = defineProps({
|
|
site: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['edit', 'delete'])
|
|
|
|
const machineCount = computed(() => props.site?.machines?.length || 0)
|
|
const formattedContactPhone = computed(() => {
|
|
const value = props.site?.contactPhone ?? ''
|
|
const formatted = formatPhone(value)
|
|
return formatted || value || '—'
|
|
})
|
|
</script>
|