g.spar
/
wdm-web4
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity
Browse Source

Anpassung bought, photo, neu updPhoto

pull/1/head
Georg Spar 1 year ago
parent
cf12f78565
commit
7051ed621a
3 changed files with 175 additions and 10 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 58
      components/Bought.vue
  2. 12
      components/Photo.vue
  3. 115
      components/UpdPhoto.vue

58
components/Bought.vue
Unescape View File

@ -23,7 +23,8 @@
</div>
<div class="col-12 gap-3 flex">
<Button severity="info" @click="openDetail(slotProps.data.id)" target="_blank" label=" Details " icon="pi pi-list" />
<Button severity="success" @click="openEval(slotProps.data.typid)" label=" Evaluation " icon="pi pi-eye" />
<Button severity="success" @click="openEval(slotProps.data.id)" label=" Evaluation " icon="pi pi-eye" />
<Button severity="warning" @click="openFrontview(slotProps.data.id)" label=" Frontview" icon="pi pi-camera" />
</div>
</div>
@ -79,10 +80,12 @@
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ref } from "vue";
const pfad = '/photos';
import { useToast } from 'primevue/usetoast';
import { stringify } from "querystring";
import { useDialog } from "primevue/usedialog";
import UpdPhoto from "./UpdPhoto.vue";
interface cItemB {
id: number;
@ -96,8 +99,9 @@ import { stringify } from "querystring";
frontviewid: number;
}
const toast = useToast();
const dialog = useDialog();
const createItemBDialog = ref(false);
const itemb = ref({id: 0, bezeichnung: '', kurzbeschreibung: '', groesse: '', farbe: '', typid: 0, material: '', abmessungenid: 1, frontviewid: 4});
let itemb = ref({id: 0, bezeichnung: '', kurzbeschreibung: '', groesse: '', farbe: '', typid: 0, material: '', abmessungenid: 1, frontviewid: 4});
let imgurl = ref();
const imgref = ref();
//imgref.value='1679468897186c75b5379eb6691871da30ef18b98a_1.jpg';
@ -136,16 +140,52 @@ async function awaitItemsb() {
async function openEval(id) {
};
onMounted(() => {
});
}
async function openFrontview(iid: number) {
const itemb = await useFetch('http://ubodroid-2:8081/api/v1/itb/'+iid);
let itb: cItemB;
console.log(itemb.data.value);
itb = itemb.data.value;
console.log(itb);
let refid = ref();
dialog.open(UpdPhoto, { onClose(options) {
refid = options?.data;
console.log('RefId = ', refid);
if (refid) {
console.log('refid.id = ', refid.id);
itb.frontviewid = refid.id;
doUpdate(itb);
}
},});
}
async function doUpdate(t: cItemB) {
let fd = new FormData();
fd.append('id', t.id);
fd.append('bezeichnung', t.bezeichnung);
fd.append('kurzbeschreibung', t.kurzbeschreibung);
fd.append('groesse', t.groesse);
fd.append('farbe', t.farbe);
fd.append('typid', t.type.id.toString());
fd.append('material', t.material);
fd.append('abmessungenid', t.abmessungen.id.toString());
fd.append('frontviewid', t.frontviewid.toString());
console.log('fd = ', fd);
await $fetch('http://ubodroid-2:8081/api/v1/itb/'+t.id,{
method: 'PUT',
body: fd
});
toast.add({ severity: 'success', summary: 'Item updated', detail: 'Title: ' + t.kurzbeschreibung, life: 3000 });
await refreshNuxtData();
console.log('PUT ausgeführt...'+ t.kurzbeschreibung);
}
const onNew = () => {
itemb.value = ref({id: 0, bezeichnung: '', kurzbeschreibung: '', groesse: '', farbe: '', typid: 0, material: '', abmessungenid: 1, frontviewid: 4});
itemb = ref({id: 0, bezeichnung: '', kurzbeschreibung: '', groesse: '', farbe: '', typid: 0, material: '', abmessungenid: 1, frontviewid: 4});
createItemBDialog.value = true;
};

12
components/Photo.vue
Unescape View File

@ -145,7 +145,17 @@ async function doUpdate(ref: any, pho: cPho){
method: "PUT",
body: fd,
});
if (updPho) {
toast.add({
severity: "info",
summary: "Success",
detail: "Photo updated",
life: 10000,
});
refreshNuxtData();
}
}
</script>

115
components/UpdPhoto.vue
Unescape View File

@ -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>
Write Preview
Loading…
Cancel
Save