feat: add constructors selection and management
This commit is contained in:
@@ -20,7 +20,7 @@
|
||||
<h3 class="text-lg font-semibold">{{ component.name }}</h3>
|
||||
<div class="flex flex-wrap gap-2 mt-2">
|
||||
<span v-if="component.reference" class="badge badge-outline badge-sm">{{ component.reference }}</span>
|
||||
<span v-if="component.constructeur" class="badge badge-outline badge-sm">{{ component.constructeur }}</span>
|
||||
<span v-if="component.constructeur" class="badge badge-outline badge-sm">{{ component.constructeur?.name }}</span>
|
||||
<span v-if="component.emplacement" class="badge badge-outline badge-sm">{{ component.emplacement }}</span>
|
||||
<span v-if="component.prix" class="badge badge-primary badge-sm">{{ component.prix }}€</span>
|
||||
</div>
|
||||
@@ -54,17 +54,6 @@
|
||||
/>
|
||||
<div v-else class="input input-bordered input-sm bg-base-200">{{ component.reference || 'Non définie' }}</div>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label"><span class="label-text font-medium">Constructeur</span></label>
|
||||
<input
|
||||
v-if="isEditMode"
|
||||
v-model="component.constructeur"
|
||||
type="text"
|
||||
class="input input-bordered input-sm"
|
||||
@blur="updateComponent"
|
||||
/>
|
||||
<div v-else class="input input-bordered input-sm bg-base-200">{{ component.constructeur || 'Non défini' }}</div>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label"><span class="label-text font-medium">Emplacement</span></label>
|
||||
<input
|
||||
@@ -88,6 +77,21 @@
|
||||
/>
|
||||
<div v-else class="input input-bordered input-sm bg-base-200">{{ component.prix ? `${component.prix}€` : 'Non défini' }}</div>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label"><span class="label-text font-medium">Constructeur</span></label>
|
||||
<ConstructeurSelect
|
||||
v-if="isEditMode"
|
||||
v-model="component.constructeurId"
|
||||
/>
|
||||
<div v-else class="input input-bordered input-sm bg-base-200">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-medium">{{ component.constructeur?.name || 'Non défini' }}</span>
|
||||
<span class="text-xs text-gray-500">
|
||||
{{ [component.constructeur?.email, component.constructeur?.phone].filter(Boolean).join(' • ') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -251,7 +255,9 @@
|
||||
import { ref, watch, computed } from 'vue'
|
||||
import PieceItem from './PieceItem.vue'
|
||||
import DocumentUpload from './DocumentUpload.vue'
|
||||
import ConstructeurSelect from './ConstructeurSelect.vue'
|
||||
import { useDocuments } from '~/composables/useDocuments'
|
||||
import { getFileIcon } from '~/utils/fileIcons'
|
||||
|
||||
const props = defineProps({
|
||||
component: {
|
||||
@@ -280,6 +286,7 @@ const uploadingDocuments = ref(false)
|
||||
const loadingDocuments = ref(false)
|
||||
const documentsLoaded = ref(!!(props.component.documents && props.component.documents.length))
|
||||
const componentDocuments = computed(() => props.component.documents || [])
|
||||
const documentIcon = (doc) => getFileIcon({ name: doc.filename || doc.name, mime: doc.mimeType })
|
||||
|
||||
const { uploadDocuments, deleteDocument, loadDocumentsByComponent } = useDocuments()
|
||||
|
||||
@@ -294,6 +301,17 @@ watch(
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.component.constructeurId,
|
||||
(newVal, oldVal) => {
|
||||
if (!props.isEditMode) return
|
||||
if (oldVal === undefined) return
|
||||
if (newVal !== oldVal) {
|
||||
updateComponent()
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.component.documents,
|
||||
(docs) => {
|
||||
|
||||
Reference in New Issue
Block a user