Files
Inventory_frontend/app/pages/sites.vue
Matthieu cc70fe2b29 feat(permissions) : add role-based UI guards and readonly mode for viewers
- Add usePermissions composable (isAdmin, canEdit, canView)
- Password-protected profile login with modal on profiles page
- Disable all form fields for ROLE_VIEWER across edit/create pages
- Show navigation buttons (Modifier/Consulter) for all roles, hide delete for viewers
- Add readonly prop to ModelTypeForm for category pages
- Disable modal fields (sites, constructeurs) for viewers
- Guard /admin routes in middleware

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-26 13:36:42 +01:00

119 lines
3.3 KiB
Vue

<template>
<main class="container mx-auto px-6 py-8">
<DocumentPreviewModal
:document="previewDocument"
:visible="previewVisible"
@close="closePreview"
/>
<div class="my-8">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold">
Sites
</h2>
<button v-if="canEdit" class="btn btn-primary" @click="openCreateSiteModal">
<IconLucidePlus class="w-5 h-5 mr-2" aria-hidden="true" />
Ajouter un site
</button>
</div>
<div v-if="loading" class="flex justify-center items-center py-12">
<span class="loading loading-spinner loading-lg" />
</div>
<div v-else-if="sites.length === 0" class="text-center py-12">
<div class="max-w-md mx-auto">
<IconLucideMapPin class="w-16 h-16 mx-auto text-gray-400 mb-4" aria-hidden="true" />
<h3 class="text-lg font-medium text-gray-900 mb-2">
Aucun site trouvé
</h3>
<p class="text-gray-500 mb-4">
Commencez par ajouter votre premier site.
</p>
<button v-if="canEdit" class="btn btn-primary" @click="openCreateSiteModal">
Ajouter un site
</button>
</div>
</div>
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<SiteCard
v-for="site in sites"
:key="site.id"
:site="site"
@edit="editSite"
@delete="confirmDeleteSite"
/>
</div>
</div>
<SiteCreateModal
:visible="showAddSiteModal"
:site="newSite"
:disabled="!canEdit"
@close="closeCreateModal"
@submit="handleCreateSite"
/>
<SiteEditModal
:visible="showEditSiteModal"
:site-name="siteBeingEdited?.name || ''"
:form="editSiteForm"
:documents="siteDocuments"
:selected-files="selectedFiles"
:uploading-documents="uploadingDocuments"
:can-preview-document="canPreviewDocument"
:document-icon="documentIcon"
:format-size="formatSize"
:disabled="!canEdit"
@close="closeEditModal"
@submit="handleUpdateSite"
@remove-document="handleRemoveSiteDocument"
@download-document="downloadDocument"
@preview-document="openPreview"
@update:selected-files="(files) => (selectedFiles.value = files)"
/>
</main>
</template>
<script setup>
import IconLucideMapPin from '~icons/lucide/map-pin'
import IconLucidePlus from '~icons/lucide/plus'
import DocumentPreviewModal from '~/components/DocumentPreviewModal.vue'
import SiteCard from '~/components/sites/SiteCard.vue'
import SiteCreateModal from '~/components/sites/SiteCreateModal.vue'
import SiteEditModal from '~/components/sites/SiteEditModal.vue'
import { useSiteManagement } from '~/composables/useSiteManagement'
const { canEdit } = usePermissions()
const {
sites,
loading,
showAddSiteModal,
showEditSiteModal,
siteBeingEdited,
newSite,
editSiteForm,
selectedFiles,
uploadingDocuments,
previewDocument,
previewVisible,
siteDocuments,
documentIcon,
handleCreateSite,
editSite,
handleUpdateSite,
closeEditModal,
handleRemoveSiteDocument,
downloadDocument,
openPreview,
closePreview,
formatSize,
confirmDeleteSite,
canPreviewDocument,
openCreateSiteModal,
closeCreateModal
} = useSiteManagement()
</script>