Georg Spar
1 year ago
3 changed files with 175 additions and 10 deletions
@ -0,0 +1,115 @@
|
||||
<template> |
||||
<ClientOnly> |
||||
<Card style="margin-top: 78px; min-height: 200px;"> |
||||
<template #content> |
||||
<Panel header="Managing photos" class="rounded-4 bg-white" > |
||||
|
||||
<div class="grid"> |
||||
<Card class="col-12"> |
||||
<template #header> |
||||
<h1>Search Frontview Photo</h1> |
||||
</template> |
||||
<template #content> |
||||
<div class="col-12"> |
||||
<DataTable class="p-datatable-sm" :filters="filters" dataKey="id" filterDisplay="row" :value="photos" |
||||
showGridlines stripedRows paginator :rows="10" :rowsPerPageOptions="[5, 10, 20, 50]" |
||||
:globalFilterFields="['pfad']" |
||||
v-model:selection="selectedTyp" selection-mode="single" @row-select="onRowSelect" :meta-key-selection="false" |
||||
tableStyle="min-width: 50rem;"> |
||||
<template #header> |
||||
<div class="flex justify-content-end"> |
||||
<span class="p-input-icon-left"> |
||||
<i class="pi pi-search" /> |
||||
<InputText v-model="filters['global'].value" placeholder="Keyword Search" /> |
||||
</span> |
||||
</div> |
||||
</template> |
||||
<template #empty> No Photos found. </template> |
||||
<!--<template #loading> Loading customers data. Please wait. </template> --> |
||||
<Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" sortable :filter-field="col.field" > |
||||
<Column v-if="col.field=='image'"> |
||||
<template #body="slotProps"> |
||||
<img :src="`${pfad}/thumb-${slotProps.data.pfad}`" :alt="slotProps.data.pfad" /> |
||||
</template> |
||||
</Column> |
||||
</Column> |
||||
|
||||
</DataTable> |
||||
|
||||
</div> |
||||
</template> |
||||
<template #footer> |
||||
<div class="col-12 gap-3 flex"> |
||||
<Button severity="secondary" label=" UPDATE " icon="pi pi-file-edit" @click="doUpdate(id)" /> |
||||
|
||||
</div> |
||||
</template> |
||||
</Card> |
||||
</div> |
||||
|
||||
</Panel> |
||||
</template> |
||||
</Card> |
||||
</ClientOnly> |
||||
|
||||
|
||||
|
||||
|
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { ref } from "vue"; |
||||
import { FilterMatchMode } from "primevue/api"; |
||||
|
||||
const pfad = '/photos'; |
||||
let params: any; |
||||
params = inject('dialogRef'); |
||||
|
||||
const selectedTyp = ref(""); |
||||
const id = ref(0); |
||||
interface cPho { |
||||
id: number; |
||||
pfad: string; |
||||
itembid: number; |
||||
itemextid: number; |
||||
} |
||||
|
||||
const columns = [ |
||||
{ field: 'id', header: '#'}, |
||||
{ header: 'Image', field: 'image'}, |
||||
{ header: 'Filename', field: 'pfad'}, |
||||
{ header: 'ItemB', field: 'itembid'}, |
||||
{ header: 'ItemEva', field: 'itemextid'}, |
||||
]; |
||||
|
||||
const filters = ref({ |
||||
global: { value: null, matchMode: FilterMatchMode.CONTAINS }, |
||||
bezeichnung: {value: null, matchMode: FilterMatchMode.STARTS_WITH }, |
||||
kurzbeschreibung: {value: null, matchMode: FilterMatchMode.STARTS_WITH } |
||||
}); |
||||
|
||||
const onRowSelect = (event) => { |
||||
id.value = event.data.id; |
||||
//bezeichnung.value = event.data.kurzbeschreibung; |
||||
toast.add({ severity: 'info', summary: 'Photo Selected', detail: 'Description: ' + event.data.pfad, life: 3000 }); |
||||
}; |
||||
|
||||
//const photo = ref({id:0,pfad:'',itembid:0,itemextid:0}); |
||||
import { useToast } from 'primevue/usetoast'; |
||||
const toast = useToast(); |
||||
|
||||
const uploadedFiles = ref([]); |
||||
const {data: photos } = await useFetch('http://ubodroid-2:8081/api/v1/pho'); |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
async function doUpdate(ref: number){ |
||||
this.params.close({id: ref}); |
||||
|
||||
|
||||
} |
||||
|
||||
</script> |
Loading…
Reference in new issue