Skip to content
Snippets Groups Projects

chore(ui): utilise le composant react-dsfr

Merged BITARD Michaël requested to merge use-react-dsfr into master
1 file
+ 67
63
Compare changes
  • Side-by-side
  • Inline
import { FunctionalComponent, defineComponent, onMounted, ref } from 'vue'
import { FunctionalComponent, computed, defineComponent, onMounted, ref } from 'vue'
import { LoadingElement } from '@/components/_ui/functional-loader'
import { AsyncData, getDownloadRestRoute } from '@/api/client-rest'
import { EntrepriseDocument, EntrepriseDocumentId, EntrepriseId } from 'camino-common/src/entreprise'
@@ -12,12 +12,16 @@ import { ApiClient } from '@/api/api-client'
import { DsfrButtonIcon } from '../_ui/dsfr-button'
import { isNotNullNorUndefined } from 'camino-common/src/typescript-tools'
import { fr } from '@codegouvfr/react-dsfr'
import { Column, TableAuto } from '../_ui/table-auto'
import { TableRow } from '../_ui/table'
interface Props {
apiClient: Pick<ApiClient, 'getEntrepriseDocuments' | 'creerEntrepriseDocument' | 'deleteEntrepriseDocument' | 'uploadTempDocument'>
user: User
entrepriseId: EntrepriseId
}
type ColumnId = 'nom' | 'date' | 'description' | 'actions'
export const EntrepriseDocuments = defineComponent<Props>(props => {
const data = ref<AsyncData<EntrepriseDocument[]>>({ status: 'LOADING' })
@@ -39,70 +43,70 @@ export const EntrepriseDocuments = defineComponent<Props>(props => {
await reloadDocuments()
})
const columns = computed<Column<ColumnId>[]>(() => {
const rawColumns: Column<ColumnId>[] = [
{ id: 'nom', contentTitle: 'Nom', noSort: true },
{ id: 'date', contentTitle: 'Date', noSort: true },
{ id: 'description', contentTitle: 'Description', noSort: true },
]
if (canEditEntreprise(props.user, props.entrepriseId)) {
rawColumns.push({
id: 'actions',
class: [fr.cx('fr-cell--right')],
contentTitle: (
<DsfrButtonIcon
icon="fr-icon-add-line"
buttonType="primary"
title="Ajouter un document"
onClick={() => {
addPopup.value = true
}}
/>
),
noSort: true,
})
}
return rawColumns
})
const rows = (items: EntrepriseDocument[]): TableRow<ColumnId>[] => {
return items.map<TableRow<ColumnId>>(item => ({
id: item.id,
link: null,
columns: {
nom: { type: 'jsx', jsxElement: <EntrepriseDocumentLink documentId={item.id} documentTypeId={item.entreprise_document_type_id} />, value: item.id },
date: { type: 'text', value: dateFormat(item.date) },
description: { type: 'text', value: item.description ?? '' },
actions: {
type: 'jsx',
jsxElement: item.can_delete_document ? (
<DsfrButtonIcon
icon="fr-icon-delete-line"
buttonType="secondary"
class={[fr.cx('fr-mb-0')]}
title={`Supprimer le document ${DocumentsTypes[item.entreprise_document_type_id].nom}`}
onClick={() => {
deleteDocument.value = { nom: DocumentsTypes[item.entreprise_document_type_id].nom, id: item.id }
deletePopup.value = true
}}
/>
) : (
<div></div>
),
value: item.id,
},
},
}))
}
return () => (
<div style={{ overflowX: 'auto' }}>
<div class="fr-container">
<div class={[fr.cx('fr-table'), fr.cx('fr-table--no-scroll')]}>
<div class={[fr.cx('fr-table__wrapper')]} style={{ width: 'auto' }}>
<div class={[fr.cx('fr-table__container')]}>
<div class={[fr.cx('fr-table__content')]}>
<table style={{ display: 'table', width: '100%' }}>
<caption>Documents de l'entreprise</caption>
<thead>
<tr>
<th scope="col">Nom</th>
<th scope="col">Date</th>
<th scope="col">Description</th>
<th scope="col" style={{ display: 'flex', justifyContent: 'end' }}>
{canEditEntreprise(props.user, props.entrepriseId) ? (
<DsfrButtonIcon
icon="fr-icon-add-line"
buttonType="primary"
title="Ajouter un document"
onClick={() => {
addPopup.value = true
}}
/>
) : null}
</th>
</tr>
</thead>
<tbody>
<LoadingElement
data={data.value}
renderItem={items => (
<>
{items.map(item => (
<tr>
<td>
<EntrepriseDocumentLink documentId={item.id} documentTypeId={item.entreprise_document_type_id} />
</td>
<td>{dateFormat(item.date)}</td>
<td>{item.description}</td>
<td>
{item.can_delete_document ? (
<button
class={['fr-btn', 'fr-icon-delete-line', 'fr-btn--secondary', 'fr-mb-0']}
title={`Supprimer le document ${DocumentsTypes[item.entreprise_document_type_id].nom}`}
onClick={() => {
deleteDocument.value = { nom: DocumentsTypes[item.entreprise_document_type_id].nom, id: item.id }
deletePopup.value = true
}}
/>
) : null}
</td>
</tr>
))}
</>
)}
/>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<LoadingElement
data={data.value}
renderItem={items => <TableAuto caption={{ value: "Documents de l'entreprise", visible: true }} columns={columns.value} rows={rows(items)} initialSort="noSort" />}
/>
{addPopup.value ? (
<AddEntrepriseDocumentPopup
apiClient={{
Loading