refactor : merge Inventory_frontend submodule into frontend/ directory
Merges the full git history of Inventory_frontend into the monorepo under frontend/. Removes the submodule in favor of a unified repo. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matthieu
85
frontend/app/components/sites/SiteCard.vue
Normal file
85
frontend/app/components/sites/SiteCard.vue
Normal file
@@ -0,0 +1,85 @@
|
||||
<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>
|
||||
132
frontend/app/components/sites/SiteContactFormFields.vue
Normal file
132
frontend/app/components/sites/SiteContactFormFields.vue
Normal file
@@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">Nom du contact</span>
|
||||
</label>
|
||||
<input
|
||||
v-model="contactName"
|
||||
type="text"
|
||||
placeholder="Nom et prénom"
|
||||
class="input input-bordered"
|
||||
:disabled="disabled"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FieldPhone v-model="contactPhone" :disabled="disabled" required />
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">Adresse</span>
|
||||
</label>
|
||||
<input
|
||||
v-model="contactAddress"
|
||||
type="text"
|
||||
placeholder="Adresse complète"
|
||||
class="input input-bordered"
|
||||
:disabled="disabled"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">Code postal</span>
|
||||
</label>
|
||||
<input
|
||||
v-model="contactPostalCode"
|
||||
type="text"
|
||||
placeholder="Code postal"
|
||||
class="input input-bordered"
|
||||
:disabled="disabled"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">Ville</span>
|
||||
</label>
|
||||
<input
|
||||
v-model="contactCity"
|
||||
type="text"
|
||||
placeholder="Ville"
|
||||
class="input input-bordered"
|
||||
:disabled="disabled"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, toRef } from 'vue'
|
||||
import type { PropType } from 'vue'
|
||||
|
||||
import FieldPhone from '~/components/form/FieldPhone.vue'
|
||||
|
||||
type SiteForm = {
|
||||
contactName: string
|
||||
contactPhone: string
|
||||
contactAddress: string
|
||||
contactPostalCode: string
|
||||
contactCity: string
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
form: {
|
||||
type: Object as PropType<SiteForm>,
|
||||
required: true,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
const form = toRef(props, 'form')
|
||||
|
||||
const contactName = computed({
|
||||
get: () => form.value.contactName,
|
||||
set: (value: string) => {
|
||||
form.value.contactName = value
|
||||
},
|
||||
})
|
||||
|
||||
const contactPhone = computed({
|
||||
get: () => form.value.contactPhone,
|
||||
set: (value: string) => {
|
||||
form.value.contactPhone = value
|
||||
},
|
||||
})
|
||||
|
||||
const contactAddress = computed({
|
||||
get: () => form.value.contactAddress,
|
||||
set: (value: string) => {
|
||||
form.value.contactAddress = value
|
||||
},
|
||||
})
|
||||
|
||||
const contactPostalCode = computed({
|
||||
get: () => form.value.contactPostalCode,
|
||||
set: (value: string) => {
|
||||
form.value.contactPostalCode = value
|
||||
},
|
||||
})
|
||||
|
||||
const contactCity = computed({
|
||||
get: () => form.value.contactCity,
|
||||
set: (value: string) => {
|
||||
form.value.contactCity = value
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<!--
|
||||
Bloc de formulaire partagé pour la saisie/édition des informations de contact d'un site.
|
||||
Utilisation :
|
||||
<SiteContactFormFields :form="siteForm" />
|
||||
-->
|
||||
115
frontend/app/components/sites/SiteCreateModal.vue
Normal file
115
frontend/app/components/sites/SiteCreateModal.vue
Normal file
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<div v-if="visible" class="modal modal-open">
|
||||
<div class="modal-box max-w-md">
|
||||
<h3 class="font-bold text-lg mb-4">Ajouter un nouveau site</h3>
|
||||
<form @submit.prevent="emit('submit')" class="space-y-4">
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">Nom du site</span>
|
||||
</label>
|
||||
<input
|
||||
v-model="siteName"
|
||||
type="text"
|
||||
placeholder="Ex: Usine principale"
|
||||
class="input input-bordered"
|
||||
:disabled="disabled"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">Couleur</span>
|
||||
</label>
|
||||
<div v-if="siteRef.color" class="flex items-center gap-3">
|
||||
<input
|
||||
:value="siteRef.color"
|
||||
type="color"
|
||||
class="w-10 h-10 rounded cursor-pointer border border-base-300"
|
||||
:disabled="disabled"
|
||||
@input="(e: Event) => { siteRef.color = (e.target as HTMLInputElement).value }"
|
||||
>
|
||||
<input
|
||||
v-model="siteRef.color"
|
||||
type="text"
|
||||
placeholder="#000000"
|
||||
class="input input-bordered input-sm flex-1"
|
||||
:disabled="disabled"
|
||||
maxlength="7"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost btn-xs"
|
||||
:disabled="disabled"
|
||||
@click="siteRef.color = ''"
|
||||
>
|
||||
Effacer
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
v-else
|
||||
type="button"
|
||||
class="btn btn-outline btn-sm w-fit"
|
||||
:disabled="disabled"
|
||||
@click="siteRef.color = '#3b82f6'"
|
||||
>
|
||||
Choisir une couleur
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<SiteContactFormFields :form="siteRef" :disabled="disabled" />
|
||||
|
||||
<div class="modal-action">
|
||||
<button type="button" class="btn" @click="emit('close')">
|
||||
Annuler
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary" :disabled="disabled">
|
||||
Créer le site
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, toRef } from 'vue'
|
||||
import type { PropType } from 'vue'
|
||||
import SiteContactFormFields from '~/components/sites/SiteContactFormFields.vue'
|
||||
|
||||
type SiteForm = {
|
||||
name: string
|
||||
color: string
|
||||
contactName: string
|
||||
contactPhone: string
|
||||
contactAddress: string
|
||||
contactPostalCode: string
|
||||
contactCity: string
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
site: {
|
||||
type: Object as PropType<SiteForm>,
|
||||
required: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['close', 'submit'])
|
||||
|
||||
const siteRef = toRef(props, 'site')
|
||||
|
||||
const siteName = computed({
|
||||
get: () => siteRef.value.name,
|
||||
set: (value: string) => {
|
||||
siteRef.value.name = value
|
||||
}
|
||||
})
|
||||
</script>
|
||||
220
frontend/app/components/sites/SiteEditModal.vue
Normal file
220
frontend/app/components/sites/SiteEditModal.vue
Normal file
@@ -0,0 +1,220 @@
|
||||
<template>
|
||||
<div v-if="visible" class="modal modal-open">
|
||||
<div class="modal-box max-w-md">
|
||||
<h3 class="font-bold text-lg mb-4">
|
||||
{{ disabled ? 'Détails du site' : 'Modifier le site' }}
|
||||
<span v-if="siteName" class="block text-sm font-normal text-base-content/50">{{ siteName }}</span>
|
||||
</h3>
|
||||
<form class="space-y-4" @submit.prevent="emit('submit')">
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">Nom du site</span>
|
||||
</label>
|
||||
<input
|
||||
v-model="form.name"
|
||||
type="text"
|
||||
placeholder="Nom du site"
|
||||
class="input input-bordered"
|
||||
:disabled="disabled"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">Couleur</span>
|
||||
</label>
|
||||
<div v-if="form.color" class="flex items-center gap-3">
|
||||
<input
|
||||
:value="form.color"
|
||||
type="color"
|
||||
class="w-10 h-10 rounded cursor-pointer border border-base-300"
|
||||
:disabled="disabled"
|
||||
@input="form.color = $event.target.value"
|
||||
>
|
||||
<input
|
||||
v-model="form.color"
|
||||
type="text"
|
||||
placeholder="#000000"
|
||||
class="input input-bordered input-sm flex-1"
|
||||
:disabled="disabled"
|
||||
maxlength="7"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost btn-xs"
|
||||
:disabled="disabled"
|
||||
@click="form.color = ''"
|
||||
>
|
||||
Effacer
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
v-else
|
||||
type="button"
|
||||
class="btn btn-outline btn-sm w-fit"
|
||||
:disabled="disabled"
|
||||
@click="form.color = '#3b82f6'"
|
||||
>
|
||||
Choisir une couleur
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<SiteContactFormFields :form="props.form" :disabled="disabled" />
|
||||
|
||||
<div class="border-t border-base-200 pt-4 space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h4 class="font-semibold text-sm">
|
||||
Documents liés
|
||||
</h4>
|
||||
<p class="text-xs text-base-content/50">
|
||||
Ajoutez des documents (PDF, images...) relatifs à ce site.
|
||||
</p>
|
||||
</div>
|
||||
<span v-if="selectedFilesModel.length" class="badge badge-outline">
|
||||
{{ selectedFilesModel.length }} fichier{{ selectedFilesModel.length > 1 ? 's' : '' }} prêt{{ selectedFilesModel.length > 1 ? 's' : '' }} à être ajouté
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<DocumentUpload
|
||||
v-if="!disabled"
|
||||
v-model="selectedFilesModel"
|
||||
title="Déposer vos fichiers"
|
||||
subtitle="Formats courants acceptés : PDF, JPG, PNG, DOCX..."
|
||||
/>
|
||||
|
||||
<div v-if="documents.length" class="space-y-3">
|
||||
<h5 class="text-sm font-medium">
|
||||
Documents existants
|
||||
</h5>
|
||||
<div class="space-y-2 max-h-48 overflow-y-auto pr-1">
|
||||
<div
|
||||
v-for="document in documents"
|
||||
:key="document.id"
|
||||
class="flex items-center justify-between rounded border border-base-200 bg-base-100 px-3 py-2"
|
||||
>
|
||||
<div class="flex items-center gap-3 text-sm">
|
||||
<div class="h-14 w-14 flex-shrink-0 overflow-hidden rounded-md border border-base-200 bg-base-200/70 flex items-center justify-center">
|
||||
<img
|
||||
v-if="isImageDocument(document) && (document.fileUrl || document.path)"
|
||||
:src="document.fileUrl || document.path"
|
||||
class="h-full w-full object-cover"
|
||||
:alt="`Aperçu de ${document.name}`"
|
||||
>
|
||||
<component
|
||||
v-else
|
||||
:is="documentIcon(document).component"
|
||||
class="h-6 w-6"
|
||||
:class="documentIcon(document).colorClass"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-medium">
|
||||
{{ document.name }}
|
||||
</div>
|
||||
<div class="text-xs text-base-content/50">
|
||||
{{ document.mimeType || 'Inconnu' }} • {{ formatSize(document.size) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost btn-xs"
|
||||
:disabled="!canPreviewDocument(document)"
|
||||
:title="canPreviewDocument(document) ? 'Consulter le document' : 'Aucun aperçu disponible pour ce type'"
|
||||
@click="emit('preview-document', document)"
|
||||
>
|
||||
Consulter
|
||||
</button>
|
||||
<button type="button" class="btn btn-ghost btn-xs" @click="emit('download-document', document)">
|
||||
Télécharger
|
||||
</button>
|
||||
<button v-if="!disabled" type="button" class="btn btn-error btn-xs" @click="emit('remove-document', document.id)">
|
||||
Supprimer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-action">
|
||||
<button type="button" class="btn" @click="emit('close')">
|
||||
Annuler
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary" :disabled="disabled || uploadingDocuments">
|
||||
<span v-if="uploadingDocuments" class="loading loading-spinner loading-xs mr-2" />
|
||||
Enregistrer
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { isImageDocument } from '~/utils/documentPreview'
|
||||
import DocumentUpload from '~/components/DocumentUpload.vue'
|
||||
import SiteContactFormFields from '~/components/sites/SiteContactFormFields.vue'
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
siteName: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
form: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
documents: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
selectedFiles: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
uploadingDocuments: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
canPreviewDocument: {
|
||||
type: Function,
|
||||
required: true
|
||||
},
|
||||
documentIcon: {
|
||||
type: Function,
|
||||
required: true
|
||||
},
|
||||
formatSize: {
|
||||
type: Function,
|
||||
required: true
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits([
|
||||
'close',
|
||||
'submit',
|
||||
'remove-document',
|
||||
'download-document',
|
||||
'preview-document',
|
||||
'update:selectedFiles'
|
||||
])
|
||||
|
||||
const selectedFilesModel = computed({
|
||||
get: () => props.selectedFiles,
|
||||
set: value => emit('update:selectedFiles', value)
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user