95 lines
2.9 KiB
Vue
95 lines
2.9 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<!-- Selezione Colonne -->
|
||
|
|
<div class="q-mb-md">
|
||
|
|
<q-select
|
||
|
|
v-model="selectedColumns"
|
||
|
|
:options="allColumns"
|
||
|
|
label="Colonne da visualizzare"
|
||
|
|
multiple
|
||
|
|
emit-value
|
||
|
|
map-options
|
||
|
|
filled
|
||
|
|
style="max-width: 400px"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Tabella Prodotti -->
|
||
|
|
<table>
|
||
|
|
<!-- Intestazioni (Thead) -->
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th v-if="isColumnVisible('drag')">Drag</th>
|
||
|
|
<th v-if="isColumnVisible('image')">Immagine</th>
|
||
|
|
<th v-if="isColumnVisible('name')">Nome</th>
|
||
|
|
<th v-if="isColumnVisible('authors')">Autore</th>
|
||
|
|
<th v-if="isColumnVisible('catprods')">Argomento</th>
|
||
|
|
<th v-if="isColumnVisible('isbn')">ISBN</th>
|
||
|
|
<th v-if="isColumnVisible('actions')">Azioni</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<!-- Corpo della Tabella (Tbody) -->
|
||
|
|
<draggable
|
||
|
|
v-model="internalProducts"
|
||
|
|
tag="tbody"
|
||
|
|
handle=".drag-handle"
|
||
|
|
item-key="_id"
|
||
|
|
@end="onDragEnd"
|
||
|
|
>
|
||
|
|
<template #item="{ element }">
|
||
|
|
<tr :key="element._id">
|
||
|
|
<!-- Icona Drag Handle -->
|
||
|
|
<td v-if="isColumnVisible('drag')" class="drag-handle">
|
||
|
|
<q-icon name="drag_handle" size="32px" color="primary" />
|
||
|
|
</td>
|
||
|
|
|
||
|
|
<!-- Immagine Piccola -->
|
||
|
|
<td v-if="isColumnVisible('image')">
|
||
|
|
<q-img
|
||
|
|
:src="
|
||
|
|
element.productInfo?.imagefile
|
||
|
|
? tools.getFullFileNameByImageFile('productInfos', element.productInfo?.imagefile)
|
||
|
|
: element.productInfo?.image_link
|
||
|
|
"
|
||
|
|
style="width: 50px; height: 50px"
|
||
|
|
class="rounded-borders"
|
||
|
|
/>
|
||
|
|
</td>
|
||
|
|
|
||
|
|
<!-- Titolo -->
|
||
|
|
<td v-if="isColumnVisible('name')">{{ element.productInfo?.name }}</td>
|
||
|
|
|
||
|
|
<!-- Autore -->
|
||
|
|
<td v-if="isColumnVisible('authors')">{{ formatAuthors(element.productInfo?.authors) }}</td>
|
||
|
|
|
||
|
|
<!-- Argomento -->
|
||
|
|
<td v-if="isColumnVisible('catprods')">{{ formatCatProds(element.productInfo?.catprods) }}</td>
|
||
|
|
|
||
|
|
<!-- ISBN -->
|
||
|
|
<td v-if="isColumnVisible('isbn')">{{ element.isbn }}</td>
|
||
|
|
|
||
|
|
<!-- Azioni -->
|
||
|
|
<td v-if="isColumnVisible('actions')">
|
||
|
|
<q-btn-dropdown label="Azioni" color="primary" flat>
|
||
|
|
<q-list>
|
||
|
|
<q-item clickable v-close-popup @click="removeProduct(element)">
|
||
|
|
<q-item-section>
|
||
|
|
<q-item-label>Elimina</q-item-label>
|
||
|
|
</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
</q-list>
|
||
|
|
</q-btn-dropdown>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</template>
|
||
|
|
</draggable>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
|
||
|
|
<script lang="ts" src="./CProductTable.ts"></script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@import './CProductTable.scss';
|
||
|
|
</style>
|