You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
118 lines
4.6 KiB
118 lines
4.6 KiB
<template> |
|
<ClientOnly> |
|
<Card style="margin-top: 78px; min-height: 200px;"> |
|
<template #content> |
|
<Panel header="Maintainance / Assign Measures" class="bg-white rounded-4 gap-3"> |
|
|
|
|
|
|
|
<div class="g-3 mb-20 needs-validation"> |
|
<div class="grid nested-grid"> |
|
<Card class="col-12"> |
|
<template #content> |
|
<DataTable class="p-datatable-sm" :filters="filters" dataKey="id" filterDisplay="row" :value="measures" |
|
showGridlines stripedRows paginator :rows="10" :rowsPerPageOptions="[5, 10, 20, 50]" |
|
:globalFilterFields="['kurz']" |
|
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 customers 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> |
|
|
|
</DataTable> |
|
</template> |
|
|
|
<template #footer> |
|
<Button label="Assign" icon="pi pi-check" text @click="onSubmit(id)" /> |
|
</template> |
|
|
|
</Card> |
|
</div> |
|
</div> |
|
|
|
</Panel> |
|
</template> |
|
</Card> |
|
</ClientOnly> |
|
|
|
</template> |
|
|
|
<script setup lang="ts"> |
|
//import { MDBBtn, MDBCol, MDBCheckbox, MDBInput, MDBRow, MDBContainer } from "mdb-vue-ui-kit"; |
|
import { ref, onMounted } from "vue"; |
|
import { FilterMatchMode } from "primevue/api"; |
|
import { useToast } from 'primevue/usetoast'; |
|
|
|
interface cMeasures { |
|
id: number; |
|
kurz: string; |
|
brust: number; |
|
laenget: number; |
|
schulterbreite: number; |
|
taillenumfangt: number; |
|
hueftumfang: number; |
|
innennaht: number; |
|
laengeb: number; |
|
taillenumfangb: number; |
|
} |
|
const mea = ref({id: 0, kurz: '', brust:0, laenget:0, schulterbreite:0, taillenumfangt:0, hueftumfang:0, innennaht:0, laengeb:0, taillenumfangb:0}); |
|
const kurz = ref(""); |
|
//const loading = ref(true); |
|
const selectedTyp = ref(""); |
|
const id = ref(0); |
|
const toast = useToast(); |
|
|
|
let params: any; |
|
params = inject('dialogRef'); |
|
|
|
|
|
const {data: measures } = await useFetch('http://ubodroid-2:8081/api/v1/meas'); |
|
|
|
|
|
|
|
const columns = [ |
|
{ field: 'id', header: '#'}, |
|
{ header: 'Description', field: 'kurz'}, |
|
{ header: 'Breast', field: 'brust'}, |
|
{ header: 'Lengh Top', field: 'laenget'}, |
|
{ header: 'Shoulder Width', field: 'schulterbreite'}, |
|
{ header: 'Waist Girth Top', field: 'taillenumfangt'}, |
|
{ header: 'Hip Girth', field: 'hueftumfang'}, |
|
{ header: 'Inner Seam', field: 'innennaht'}, |
|
{ header: 'Length Bottom', field: 'laengeb'}, |
|
{ header: 'Waist Girth Bottom', field: 'taillenumfangb'}, |
|
]; |
|
|
|
const filters = ref({ |
|
global: { value: null, matchMode: FilterMatchMode.CONTAINS }, |
|
kurz: {value: null, matchMode: FilterMatchMode.STARTS_WITH } |
|
}) |
|
|
|
const onRowSelect = (event) => { |
|
id.value = event.data.id; |
|
kurz.value = event.data.kurz; |
|
toast.add({ severity: 'info', summary: 'Measure Selected', detail: 'Description: ' + event.data.kurz, life: 3000 }); |
|
}; |
|
|
|
onMounted(() => { |
|
|
|
mea.value = params.value.data.mea; |
|
}); |
|
|
|
async function onSubmit(id: number) { |
|
console.log('id = ', id); |
|
await this.params.close({ id: id }); |
|
} |
|
|
|
</script> |
|
|