Page MenuHomec4science
Files F77473714

ElemList.vue
No OneTemporary
Actions

File Metadata

Created
Wed, Aug 14, 16:56

ElemList.vue
View Options

<script setup>
const { elems, deleteFunc, editFunc } = defineProps({
elems: [Object, Promise],
readonlyProp: String,
elemProps: Array,
thumbnailProp: String,
deleteFunc: Function,
editFunc: Function,
elevation: Number
});
// TODO update elems after a edit / delete
let elements = elems;
if (elems instanceof Promise) elements = (await elems).value;
</script>
<template>
<v-container v-if="elements.length">
<v-row class="pl-3 pr-13 mr-10 mb-5 font-weight-bold" justify="space-between">
<v-col v-if="thumbnailProp" cols="1"></v-col>
<v-col
v-for="({ header }, i) of elemProps"
:key="i"
>{{ header }}</v-col>
</v-row>
<v-row>
<v-expansion-panels>
<v-expansion-panel
v-for="elem in elements"
:key="elem.id"
:elevation="elevation === undefined ? '' : elevation"
>
<v-expansion-panel-title :readonly="readonlyProp && !elem[readonlyProp]">
<v-row class="align-center" justify="space-between">
<v-col v-if="thumbnailProp" class="text-center">
<v-avatar rounded="0" size="36px">
<v-icon v-if="!elem[thumbnailProp]">mdi-file-question-outline</v-icon>
<v-img v-else :src="elem[thumbnailProp]" />
</v-avatar>
</v-col>
<v-col :cols="thumbnailProp ? '11' : '12'">
<v-row class="align-center" justify="space-between">
<v-col
v-for="({ prop, getter }, i) in elemProps"
:key="i"
:class="i === 0 ? 'font-weight-medium' : ''"
>{{ prop ? elem[prop] : getter(elem.id) }}</v-col>
</v-row>
</v-col>
</v-row>
<template #actions="{ expanded }">
<v-row class="align-center pr-3">
<v-btn
@click="editFunc(elem)"
size="small"
variant="text"
icon
>
<v-icon color="blue">mdi-pencil</v-icon>
</v-btn>
<v-btn
@click="deleteFunc(elem)"
size="small"
variant="text"
icon
>
<v-icon color="red">mdi-delete</v-icon>
</v-btn>
<v-icon
class="pl-3"
:color="readonlyProp && !elem[readonlyProp] ? 'white': ''"
:icon="expanded ? 'mdi-chevron-up' : 'mdi-chevron-down'"
></v-icon>
</v-row>
</template>
</v-expansion-panel-title>
<v-expansion-panel-text class="overflow-x-auto">
<slot :elem="elem"></slot>
</v-expansion-panel-text>
</v-expansion-panel>
</v-expansion-panels>
</v-row>
</v-container>
<div class="w-100 text-subtitle-1 text-center" v-else>Aucun element touvé...</div>
</template>

Event Timeline

c4science · Help