feat(machine) : allow site editing on machine detail page and align card buttons
- Add site select field in MachineInfoCard (edit mode) - Include siteId in machine PATCH payload - Align action buttons (Modifier/Supprimer/Détails) consistently at card bottom - Use mt-auto + flex-col to push buttons to bottom across all machine cards Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -20,6 +20,29 @@
|
|||||||
{{ machineName }}
|
{{ machineName }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="form-control">
|
||||||
|
<label class="label">
|
||||||
|
<span class="label-text">Site</span>
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
v-if="isEditMode"
|
||||||
|
:value="machineSiteId"
|
||||||
|
class="select select-bordered"
|
||||||
|
@change="$emit('update:machine-site-id', ($event.target as HTMLSelectElement).value); $emit('blur-field')"
|
||||||
|
>
|
||||||
|
<option value="">Sélectionner un site</option>
|
||||||
|
<option
|
||||||
|
v-for="site in sites"
|
||||||
|
:key="site.id"
|
||||||
|
:value="site.id"
|
||||||
|
>
|
||||||
|
{{ site.name }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
<div v-else class="input input-bordered bg-base-200">
|
||||||
|
{{ machineSiteName || 'Non défini' }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div v-if="isEditMode || machineReference" class="form-control">
|
<div v-if="isEditMode || machineReference" class="form-control">
|
||||||
<label class="label">
|
<label class="label">
|
||||||
<span class="label-text">Référence</span>
|
<span class="label-text">Référence</span>
|
||||||
@@ -184,6 +207,9 @@ const props = defineProps<{
|
|||||||
isEditMode: boolean
|
isEditMode: boolean
|
||||||
machineName: string
|
machineName: string
|
||||||
machineReference: string
|
machineReference: string
|
||||||
|
machineSiteId: string
|
||||||
|
machineSiteName: string
|
||||||
|
sites: any[]
|
||||||
machineConstructeurIds: string[]
|
machineConstructeurIds: string[]
|
||||||
machineConstructeursDisplay: any[]
|
machineConstructeursDisplay: any[]
|
||||||
hasMachineConstructeur: boolean
|
hasMachineConstructeur: boolean
|
||||||
@@ -196,6 +222,7 @@ const props = defineProps<{
|
|||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
'update:machine-name': [value: string]
|
'update:machine-name': [value: string]
|
||||||
'update:machine-reference': [value: string]
|
'update:machine-reference': [value: string]
|
||||||
|
'update:machine-site-id': [value: string]
|
||||||
'update:constructeur-ids': [ids: unknown]
|
'update:constructeur-ids': [ids: unknown]
|
||||||
'blur-field': []
|
'blur-field': []
|
||||||
'set-custom-field-value': [field: any, value: unknown]
|
'set-custom-field-value': [field: any, value: unknown]
|
||||||
|
|||||||
@@ -15,6 +15,7 @@ import { useCustomFields } from '~/composables/useCustomFields'
|
|||||||
import { useApi } from '~/composables/useApi'
|
import { useApi } from '~/composables/useApi'
|
||||||
import { useToast } from '~/composables/useToast'
|
import { useToast } from '~/composables/useToast'
|
||||||
import { useConstructeurs } from '~/composables/useConstructeurs'
|
import { useConstructeurs } from '~/composables/useConstructeurs'
|
||||||
|
import { useSites } from '~/composables/useSites'
|
||||||
import { useMachinePrint } from '~/composables/useMachinePrint'
|
import { useMachinePrint } from '~/composables/useMachinePrint'
|
||||||
import {
|
import {
|
||||||
resolveConstructeurs,
|
resolveConstructeurs,
|
||||||
@@ -44,6 +45,7 @@ export function useMachineDetailData(machineId: string) {
|
|||||||
const { get } = useApi()
|
const { get } = useApi()
|
||||||
const toast = useToast()
|
const toast = useToast()
|
||||||
const { constructeurs, loadConstructeurs } = useConstructeurs()
|
const { constructeurs, loadConstructeurs } = useConstructeurs()
|
||||||
|
const { sites, loadSites } = useSites()
|
||||||
|
|
||||||
const {
|
const {
|
||||||
printModalOpen,
|
printModalOpen,
|
||||||
@@ -64,6 +66,7 @@ export function useMachineDetailData(machineId: string) {
|
|||||||
// Machine fields
|
// Machine fields
|
||||||
const machineName = ref('')
|
const machineName = ref('')
|
||||||
const machineReference = ref('')
|
const machineReference = ref('')
|
||||||
|
const machineSiteId = ref('')
|
||||||
const machineConstructeurIds = ref<string[]>([])
|
const machineConstructeurIds = ref<string[]>([])
|
||||||
|
|
||||||
const machineConstructeurId = computed({
|
const machineConstructeurId = computed({
|
||||||
@@ -229,6 +232,7 @@ export function useMachineDetailData(machineId: string) {
|
|||||||
machine.value.constructeurs,
|
machine.value.constructeurs,
|
||||||
machine.value.constructeur,
|
machine.value.constructeur,
|
||||||
)
|
)
|
||||||
|
machineSiteId.value = (machine.value.siteId as string) || (machine.value.site as AnyRecord)?.id as string || ''
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -255,6 +259,7 @@ export function useMachineDetailData(machineId: string) {
|
|||||||
machine,
|
machine,
|
||||||
machineName,
|
machineName,
|
||||||
machineReference,
|
machineReference,
|
||||||
|
machineSiteId,
|
||||||
machineConstructeurIds,
|
machineConstructeurIds,
|
||||||
machineDocumentsLoaded,
|
machineDocumentsLoaded,
|
||||||
machineComponentLinks,
|
machineComponentLinks,
|
||||||
@@ -401,6 +406,7 @@ export function useMachineDetailData(machineId: string) {
|
|||||||
loadConstructeurs(),
|
loadConstructeurs(),
|
||||||
loadComponentTypes(),
|
loadComponentTypes(),
|
||||||
loadPieceTypes(),
|
loadPieceTypes(),
|
||||||
|
loadSites(),
|
||||||
])
|
])
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -419,8 +425,9 @@ export function useMachineDetailData(machineId: string) {
|
|||||||
machineComponentLinks, machinePieceLinks, machineProductLinks,
|
machineComponentLinks, machinePieceLinks, machineProductLinks,
|
||||||
|
|
||||||
// Machine fields
|
// Machine fields
|
||||||
machineName, machineReference, machineConstructeurIds, machineConstructeurId,
|
machineName, machineReference, machineSiteId, machineConstructeurIds, machineConstructeurId,
|
||||||
machineConstructeursDisplay, machineConstructeurContact, hasMachineConstructeur,
|
machineConstructeursDisplay, machineConstructeurContact, hasMachineConstructeur,
|
||||||
|
sites,
|
||||||
|
|
||||||
// UI state
|
// UI state
|
||||||
machineDocumentFiles, machineDocumentsUploading, machineDocumentsLoaded,
|
machineDocumentFiles, machineDocumentsUploading, machineDocumentsLoaded,
|
||||||
|
|||||||
@@ -13,6 +13,7 @@ export interface UseMachineDetailUpdatesDeps {
|
|||||||
machine: Ref<AnyRecord | null>
|
machine: Ref<AnyRecord | null>
|
||||||
machineName: Ref<string>
|
machineName: Ref<string>
|
||||||
machineReference: Ref<string>
|
machineReference: Ref<string>
|
||||||
|
machineSiteId: Ref<string>
|
||||||
machineConstructeurIds: Ref<string[]>
|
machineConstructeurIds: Ref<string[]>
|
||||||
machineDocumentsLoaded: Ref<boolean>
|
machineDocumentsLoaded: Ref<boolean>
|
||||||
machineComponentLinks: Ref<AnyRecord[]>
|
machineComponentLinks: Ref<AnyRecord[]>
|
||||||
@@ -40,6 +41,7 @@ export function useMachineDetailUpdates(deps: UseMachineDetailUpdatesDeps) {
|
|||||||
machine,
|
machine,
|
||||||
machineName,
|
machineName,
|
||||||
machineReference,
|
machineReference,
|
||||||
|
machineSiteId,
|
||||||
machineConstructeurIds,
|
machineConstructeurIds,
|
||||||
machineComponentLinks,
|
machineComponentLinks,
|
||||||
machinePieceLinks,
|
machinePieceLinks,
|
||||||
@@ -63,6 +65,7 @@ export function useMachineDetailUpdates(deps: UseMachineDetailUpdatesDeps) {
|
|||||||
const result: any = await updateMachineApi(machine.value.id as string, {
|
const result: any = await updateMachineApi(machine.value.id as string, {
|
||||||
name: machineName.value,
|
name: machineName.value,
|
||||||
reference: machineReference.value,
|
reference: machineReference.value,
|
||||||
|
siteId: machineSiteId.value || undefined,
|
||||||
constructeurIds: cIds,
|
constructeurIds: cIds,
|
||||||
} as any)
|
} as any)
|
||||||
if (result.success) {
|
if (result.success) {
|
||||||
|
|||||||
@@ -26,8 +26,8 @@
|
|||||||
<!-- Filters -->
|
<!-- Filters -->
|
||||||
<div class="card bg-base-100 shadow-sm mb-8">
|
<div class="card bg-base-100 shadow-sm mb-8">
|
||||||
<div class="card-body py-4">
|
<div class="card-body py-4">
|
||||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
<div class="flex flex-col md:flex-row md:items-end gap-4">
|
||||||
<div class="form-control">
|
<div class="form-control flex-1">
|
||||||
<label class="label">
|
<label class="label">
|
||||||
<span class="label-text text-xs font-semibold uppercase tracking-wide text-base-content/50">Rechercher</span>
|
<span class="label-text text-xs font-semibold uppercase tracking-wide text-base-content/50">Rechercher</span>
|
||||||
</label>
|
</label>
|
||||||
@@ -41,11 +41,11 @@
|
|||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-control">
|
<div class="form-control md:w-64">
|
||||||
<label class="label">
|
<label class="label">
|
||||||
<span class="label-text text-xs font-semibold uppercase tracking-wide text-base-content/50">Site</span>
|
<span class="label-text text-xs font-semibold uppercase tracking-wide text-base-content/50">Site</span>
|
||||||
</label>
|
</label>
|
||||||
<select v-model="selectedSiteFilter" class="select select-bordered">
|
<select v-model="selectedSiteFilter" class="select select-bordered w-full">
|
||||||
<option value="">
|
<option value="">
|
||||||
Tous les sites
|
Tous les sites
|
||||||
</option>
|
</option>
|
||||||
@@ -163,7 +163,7 @@
|
|||||||
<div
|
<div
|
||||||
v-for="machine in site.machines"
|
v-for="machine in site.machines"
|
||||||
:key="machine.id"
|
:key="machine.id"
|
||||||
class="group rounded-xl border border-base-300/40 bg-base-200/30 hover:bg-base-200/60 hover:border-primary/20 transition-all cursor-pointer p-4"
|
class="group flex flex-col rounded-xl border border-base-300/40 bg-base-200/30 hover:bg-base-200/60 hover:border-primary/20 transition-all cursor-pointer p-4"
|
||||||
@click="viewMachineDetails(machine)"
|
@click="viewMachineDetails(machine)"
|
||||||
>
|
>
|
||||||
<div class="flex items-center justify-between mb-2">
|
<div class="flex items-center justify-between mb-2">
|
||||||
@@ -172,29 +172,29 @@
|
|||||||
</h4>
|
</h4>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="machine.reference" class="flex items-center gap-1.5 text-xs text-base-content/40 mb-3">
|
<div v-if="machine.reference" class="flex items-center gap-1.5 text-xs text-base-content/40">
|
||||||
<IconLucideTag class="w-3 h-3" aria-hidden="true" />
|
<IconLucideTag class="w-3 h-3" aria-hidden="true" />
|
||||||
<span>{{ machine.reference }}</span>
|
<span>{{ machine.reference }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex items-center gap-1.5 justify-end">
|
<div class="mt-auto pt-3 flex items-center justify-end gap-2">
|
||||||
<button
|
<button
|
||||||
v-if="canEdit"
|
v-if="canEdit"
|
||||||
class="btn btn-xs btn-ghost text-base-content/40 hover:text-base-content opacity-0 group-hover:opacity-100 transition-opacity"
|
class="btn btn-ghost btn-xs"
|
||||||
@click.stop="editMachine(machine)"
|
@click.stop="editMachine(machine)"
|
||||||
>
|
>
|
||||||
Modifier
|
Modifier
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-if="canEdit"
|
v-if="canEdit"
|
||||||
class="btn btn-xs btn-ghost text-error/50 hover:text-error opacity-0 group-hover:opacity-100 transition-opacity"
|
class="btn btn-ghost btn-xs text-error"
|
||||||
@click.stop="confirmDeleteMachine(machine)"
|
@click.stop="confirmDeleteMachine(machine)"
|
||||||
>
|
>
|
||||||
Supprimer
|
Supprimer
|
||||||
</button>
|
</button>
|
||||||
<NuxtLink
|
<NuxtLink
|
||||||
:to="`/machine/${machine.id}`"
|
:to="`/machine/${machine.id}`"
|
||||||
class="btn btn-xs btn-primary btn-outline opacity-0 group-hover:opacity-100 transition-opacity"
|
class="btn btn-primary btn-xs"
|
||||||
@click.stop
|
@click.stop
|
||||||
>
|
>
|
||||||
Détails
|
Détails
|
||||||
|
|||||||
@@ -53,6 +53,9 @@
|
|||||||
:is-edit-mode="d.isEditMode.value"
|
:is-edit-mode="d.isEditMode.value"
|
||||||
:machine-name="d.machineName.value"
|
:machine-name="d.machineName.value"
|
||||||
:machine-reference="d.machineReference.value"
|
:machine-reference="d.machineReference.value"
|
||||||
|
:machine-site-id="d.machineSiteId.value"
|
||||||
|
:machine-site-name="d.machine.value?.site?.name ?? ''"
|
||||||
|
:sites="d.sites.value"
|
||||||
:machine-constructeur-ids="d.machineConstructeurIds.value"
|
:machine-constructeur-ids="d.machineConstructeurIds.value"
|
||||||
:machine-constructeurs-display="d.machineConstructeursDisplay.value"
|
:machine-constructeurs-display="d.machineConstructeursDisplay.value"
|
||||||
:has-machine-constructeur="d.hasMachineConstructeur.value"
|
:has-machine-constructeur="d.hasMachineConstructeur.value"
|
||||||
@@ -62,6 +65,7 @@
|
|||||||
:machine-custom-field-defs="d.machine.value?.customFields ?? []"
|
:machine-custom-field-defs="d.machine.value?.customFields ?? []"
|
||||||
@update:machine-name="d.machineName.value = $event"
|
@update:machine-name="d.machineName.value = $event"
|
||||||
@update:machine-reference="d.machineReference.value = $event"
|
@update:machine-reference="d.machineReference.value = $event"
|
||||||
|
@update:machine-site-id="d.machineSiteId.value = $event"
|
||||||
@update:constructeur-ids="d.handleMachineConstructeurChange"
|
@update:constructeur-ids="d.handleMachineConstructeurChange"
|
||||||
@blur-field="d.updateMachineInfo"
|
@blur-field="d.updateMachineInfo"
|
||||||
@set-custom-field-value="d.setMachineCustomFieldValue"
|
@set-custom-field-value="d.setMachineCustomFieldValue"
|
||||||
|
|||||||
@@ -68,7 +68,7 @@
|
|||||||
class="card bg-base-100 shadow-sm hover:shadow-xl transition-shadow cursor-pointer"
|
class="card bg-base-100 shadow-sm hover:shadow-xl transition-shadow cursor-pointer"
|
||||||
@click="viewMachineDetails(machine)"
|
@click="viewMachineDetails(machine)"
|
||||||
>
|
>
|
||||||
<div class="card-body">
|
<div class="card-body flex flex-col">
|
||||||
<div class="flex items-center justify-between mb-2">
|
<div class="flex items-center justify-between mb-2">
|
||||||
<h3 class="card-title text-lg">
|
<h3 class="card-title text-lg">
|
||||||
{{ machine.name }}
|
{{ machine.name }}
|
||||||
@@ -87,15 +87,15 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card-actions justify-end mt-4">
|
<div class="mt-auto pt-3 flex items-center justify-end gap-2">
|
||||||
<button class="btn btn-sm btn-outline" @click.stop="editMachine(machine)">
|
<button v-if="canEdit" class="btn btn-ghost btn-xs" @click.stop="editMachine(machine)">
|
||||||
Modifier
|
Modifier
|
||||||
</button>
|
</button>
|
||||||
<button v-if="canEdit" class="btn btn-sm btn-error" @click.stop="confirmDeleteMachine(machine)">
|
<button v-if="canEdit" class="btn btn-ghost btn-xs text-error" @click.stop="confirmDeleteMachine(machine)">
|
||||||
Supprimer
|
Supprimer
|
||||||
</button>
|
</button>
|
||||||
<NuxtLink :to="`/machine/${machine.id}`" class="btn btn-sm btn-primary">
|
<NuxtLink :to="`/machine/${machine.id}`" class="btn btn-primary btn-xs">
|
||||||
Voir détails
|
Détails
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user