Cellule-financiere-transverse-PMO/visua-vue
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🐛 fix: File component updated

Browse Source
This commit is contained in:
Paul Valerie GOMA 2025-07-25 18:31:48 +02:00
parent fc64beda13
commit 4d343e7f87
1 changed files with 50 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
src/components/file/VFile.vue
View File

@ -69,22 +69,22 @@ const onRemoveTemplatingFile = (file: File, removeFileCallback: (index: number)
};
const getFileIconClass = (file: File) => {
const type = file.name.toLowerCase();
if (type.endsWith('.pdf')) return 'ri-file-pdf-2-line';
if (type.endsWith('.doc') || type.endsWith('.docx')) return 'ri-file-word-2-line';
if (type.endsWith('.xls') || type.endsWith('.xlsx')) return 'ri-file-excel-2-line';
if (type.endsWith('.txt')) return 'ri-file-text-line';
if (type.endsWith('.zip') || type.endsWith('.rar')) return 'ri-file-zip-line';
const type = file?.name.toLowerCase();
if (type?.endsWith('.pdf')) return 'ri-file-pdf-2-line';
if (type?.endsWith('.doc') || type?.endsWith('.docx')) return 'ri-file-word-2-line';
if (type?.endsWith('.xls') || type?.endsWith('.xlsx')) return 'ri-file-excel-2-line';
if (type?.endsWith('.txt')) return 'ri-file-text-line';
if (type?.endsWith('.zip') || type?.endsWith('.rar')) return 'ri-file-zip-line';
return 'ri-file-line'; // icône générique
};
const getFileIconColor = (file: File) => {
const type = file.name.toLowerCase();
if (type.endsWith('.pdf')) return 'var(--border-plain-error)'; // rouge
if (type.endsWith('.doc') || type.endsWith('.docx')) return 'var(--border-plain-blue-france)'; // bleu
if (type.endsWith('.xls') || type.endsWith('.xlsx')) return 'var(--border-plain-success)'; // vert
if (type.endsWith('.txt')) return 'var(--border-plain-grey)'; // gris
if (type.endsWith('.zip') || type.endsWith('.rar')) return 'var(--illustration-color-850-tournesol-default)'; // jaune
const type = file?.name.toLowerCase();
if (type?.endsWith('.pdf')) return 'var(--border-plain-error)'; // rouge
if (type?.endsWith('.doc') || type?.endsWith('.docx')) return 'var(--border-plain-blue-france)'; // bleu
if (type?.endsWith('.xls') || type?.endsWith('.xlsx')) return 'var(--border-plain-success)'; // vert
if (type?.endsWith('.txt')) return 'var(--border-plain-grey)'; // gris
if (type?.endsWith('.zip') || type?.endsWith('.rar')) return 'var(--illustration-color-850-tournesol-default)'; // jaune
return 'var(--border-plain-blue-france)'; // bleu marine
};
@ -109,24 +109,37 @@ const getImagePreview = (file: File) => {
class="advanced-file"
:title="`Fichier : ${props.file.name}`"
:style="{border: borderColor}"
:class="[styles['text-body-XS-mention-text-Medium']]"
>
<VButton
tertiary
noOutline
size="sm"
icon="ri-close-line"
@click="onRemoveTemplatingFile(props.file, props.removeFileCallback, props.index)"
title='Spprimer le fichier'
ref="clearfile"
aria-controls="clear-file"
type="button"
class="button"
/>
<div>
<img
v-if="file.type.startsWith('image/')"
v-if="file?.type.startsWith('image/')"
role="presentation"
:alt="props.file.name"
:alt="props.file?.name"
:src="getImagePreview(props.file)"
/>
<i
v-else
:class="getFileIconClass(props.file)"
:style="{color: getFileIconColor(props.file), fontSize: '6.25rem'}"
:style="{color: getFileIconColor(props.file), fontSize: '4rem', fontWeight: 500}"
/>
</div>
<span :title="props.file.name" class="file-name">
{{ props.file.name }}
<span :title="props.file?.name" class="file-name">
{{ props.file?.name }}
</span>
<div>{{ formatSize(props.file.size) }}</div>
<span>{{ formatSize(props.file?.size ?? 0) }}</span>
<VBadge
v-if="advanced"
:label="badgeLabel"
@ -138,25 +151,14 @@ const getImagePreview = (file: File) => {
v-if="advanced && status === 'pending'"
:value="props.progress"
:show-value="false"
style="width: 100%; margin-top: 0.5rem;"
/>
<VButton
tertiary
noOutline
size="sm"
icon="ri-close-line"
@click="onRemoveTemplatingFile(props.file, props.removeFileCallback, props.index)"
title='Spprimer le fichier'
ref="clearfile"
aria-controls="clear-file"
type="button"
style="width: 6rem; margin-top: 0.5rem;"
/>
</div>
<!-- Simple file -->
<div v-else class="simple-file" >
<div>
<img
v-if="file.type.startsWith('image/')"
v-if="file?.type.startsWith('image/')"
role="presentation"
:alt="props.file.name"
:src="getImagePreview(props.file)"
@ -168,9 +170,15 @@ const getImagePreview = (file: File) => {
/>
</div>
<div class="file-info" :class="[styles['text-body-SM-detail-text-Regular']]">
<span>{{ props.file.name }}</span>
<span>{{ formatSize(props.file.size) }}</span>
<span>{{ props.file?.name }}</span>
<span>{{ formatSize(props.file?.size ?? 0) }}</span>
</div>
<VBadge
:label="badgeLabel"
:type="badgeType"
small
no-icon
/>
</div>
</template>
@ -180,6 +188,11 @@ img{
height: auto;
}
.button{
display: flex;
align-self: self-end;
}
.advanced-file{
border-radius: 3px;
width: fit-content;
@ -187,6 +200,7 @@ img{
flex-direction: column;
justify-content: space-between;
align-items: center;
padding-bottom: 0.25rem;
}
.simple-file{
@ -197,10 +211,12 @@ img{
}
.file-name{
max-width: 7.5rem;
width: 6rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0rem 0.5rem;
text-align: center;
}
.file-info{