|
|
|
@ -19,15 +19,15 @@
|
|
|
|
|
required |
|
|
|
|
/> |
|
|
|
|
<small id="bezeichnung-help">Enter a description for the clothing</small> |
|
|
|
|
<InputText type="hidden" v-model="id" /> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="col-12 gap-3 flex" style="margin-bottom:40px;"> |
|
|
|
|
|
|
|
|
|
<Button severity="primary" label=" NEW " icon="pi pi-check" @click="onSubmit()" /> |
|
|
|
|
<Button severity="secondary" label=" UPDATE " @click="onUpdate()" /> |
|
|
|
|
<Button severity="danger" label=" DELETE " @click="onDelete()" /> |
|
|
|
|
<Button type="reset" class="btn btn-dark">Reset</Button> |
|
|
|
|
|
|
|
|
|
<Button severity="primary" label=" NEW " icon="pi pi-check" @click="openNew" /> |
|
|
|
|
<Button severity="secondary" label=" UPDATE " icon="pi pi-file-edit" @click="onUpdate()" /> |
|
|
|
|
<Button severity="danger" label=" DELETE " icon="pi pi-trash" @click="onDelete()" /> |
|
|
|
|
<Button type="reset" severity="warning" label=" RESET " icon="pi pi-undo" /> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
@ -38,7 +38,9 @@
|
|
|
|
|
<div class="col-12"> |
|
|
|
|
<DataTable class="p-datatable-sm" :filters="filters" dataKey="id" filterDisplay="row" :value="typen" |
|
|
|
|
showGridlines stripedRows paginator :rows="10" :rowsPerPageOptions="[5, 10, 20, 50]" |
|
|
|
|
:globalFilterFields="['bezeichnung']" tableStyle="min-width: 50rem;"> |
|
|
|
|
:globalFilterFields="['bezeichnung']" |
|
|
|
|
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"> |
|
|
|
@ -64,6 +66,17 @@
|
|
|
|
|
<!-- this will be rendered on server side --> |
|
|
|
|
<p>Loading comments...</p> |
|
|
|
|
</template> |
|
|
|
|
<Dialog :visible="createTypDialog" :style="{width: '450px'}" header="New Clothing Type" :modal="true" class="p-fluid"> |
|
|
|
|
<div class="field"> |
|
|
|
|
<label for="bezeichnung">Description</label> |
|
|
|
|
<InputText id="bezeichnung" v-model.trim="typ.bezeichnung" required="true" autofocus /> |
|
|
|
|
<small id="bezeichnung-help" >Enter a description for the clothing</small> |
|
|
|
|
</div> |
|
|
|
|
<template #footer> |
|
|
|
|
<Button label="Cancel" icon="pi pi-times" text @click="hideDialog"/> |
|
|
|
|
<Button label="Save" icon="pi pi-check" text @click="onSubmit(typ)" /> |
|
|
|
|
</template> |
|
|
|
|
</Dialog> |
|
|
|
|
</Panel> |
|
|
|
|
</ClientOnly> |
|
|
|
|
|
|
|
|
@ -75,10 +88,20 @@
|
|
|
|
|
//import { MDBBtn, MDBCol, MDBCheckbox, MDBInput, MDBRow, MDBContainer } from "mdb-vue-ui-kit"; |
|
|
|
|
import { ref } from "vue"; |
|
|
|
|
import { FilterMatchMode } from "primevue/api"; |
|
|
|
|
import { useToast } from 'primevue/usetoast'; |
|
|
|
|
|
|
|
|
|
interface cTyp { |
|
|
|
|
id: number; |
|
|
|
|
bezeichnung: string; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const bezeichnung = ref(""); |
|
|
|
|
//const loading = ref(true); |
|
|
|
|
|
|
|
|
|
const selectedTyp = ref(""); |
|
|
|
|
const id = ref(""); |
|
|
|
|
const toast = useToast(); |
|
|
|
|
const createTypDialog = ref(false); |
|
|
|
|
const typ = ref({id: 0, bezeichnung: ''}); |
|
|
|
|
const checkForm = (event: Event) => { |
|
|
|
|
event.target.classList.add("was-validated"); |
|
|
|
|
}; |
|
|
|
@ -93,103 +116,57 @@
|
|
|
|
|
global: { value: null, matchMode: FilterMatchMode.CONTAINS }, |
|
|
|
|
bezeichnung: {value: null, matchMode: FilterMatchMode.STARTS_WITH } |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
const onRowSelect = (event) => { |
|
|
|
|
id.value = event.data.id; |
|
|
|
|
bezeichnung.value = event.data.bezeichnung; |
|
|
|
|
toast.add({ severity: 'info', summary: 'Type Selected', detail: 'Description: ' + event.data.bezeichnung, life: 3000 }); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const openNew = () => { |
|
|
|
|
typ.value = {}; |
|
|
|
|
createTypDialog.value = true; |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const hideDialog = () => { |
|
|
|
|
createTypDialog.value = false; |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
async function onSubmit() { |
|
|
|
|
async function onSubmit(t: cTyp) { |
|
|
|
|
let fd = new FormData(); |
|
|
|
|
fd.append('bezeichnung', bezeichnung.value); |
|
|
|
|
fd.append('bezeichnung', t.bezeichnung); |
|
|
|
|
await $fetch('http://ubodroid-2:8081/api/v1/typ',{ |
|
|
|
|
method: 'POST', |
|
|
|
|
body: fd |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
createTypDialog.value = false; |
|
|
|
|
toast.add({ severity: 'success', summary: 'New Type created', detail: 'Description: ' + t.bezeichnung, life: 3000 }); |
|
|
|
|
await refreshNuxtData(); |
|
|
|
|
console.log('POST ausgeführt...'+ bezeichnung); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
async function onUpdate() { |
|
|
|
|
let fd = new FormData(); |
|
|
|
|
fd.append('bezeichnung', bezeichnung.value); |
|
|
|
|
fd.append('id', id.value) |
|
|
|
|
await $fetch('http://ubodroid-2:8081/api/v1/typ/'+id.value,{ |
|
|
|
|
method: 'PUT', |
|
|
|
|
body: fd |
|
|
|
|
}); |
|
|
|
|
console.log('UPDATE ausgeführt...'+ bezeichnung); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
async function onDelete() { |
|
|
|
|
let fd = new FormData(); |
|
|
|
|
fd.append('bezeichnung', bezeichnung.value); |
|
|
|
|
fd.append('id', id.value) |
|
|
|
|
await $fetch('http://ubodroid-2:8081/api/v1/typ/'+id.value,{ |
|
|
|
|
method: 'DELETE', |
|
|
|
|
body: fd |
|
|
|
|
}); |
|
|
|
|
await refreshNuxtData(); |
|
|
|
|
console.log('DELETE ausgeführt...'+ bezeichnung); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*export default { |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
selectMode: 'single', |
|
|
|
|
componentKey: 0, |
|
|
|
|
certs: [], |
|
|
|
|
form:{ |
|
|
|
|
id: "", |
|
|
|
|
bezeichnung: "", |
|
|
|
|
}, |
|
|
|
|
fields: [ |
|
|
|
|
{ |
|
|
|
|
key: 'id', |
|
|
|
|
sortable: true |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
key: 'bezeichnung', |
|
|
|
|
sortable: true |
|
|
|
|
}, |
|
|
|
|
] |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
created() { |
|
|
|
|
this.fetch(); |
|
|
|
|
} |
|
|
|
|
, |
|
|
|
|
methods: { |
|
|
|
|
onRowSelect(items) { |
|
|
|
|
this.selected = items; |
|
|
|
|
// alert(JSON.stringify(this.selected)); |
|
|
|
|
this.onFill(this.selected); |
|
|
|
|
}, |
|
|
|
|
async fetch() { |
|
|
|
|
console.log("fetching..."); |
|
|
|
|
this.certs = await fetch( |
|
|
|
|
'http://ubodroid-2:8080/api/v1/typ' |
|
|
|
|
).then(res => res.json()) |
|
|
|
|
}, |
|
|
|
|
async onSubmit() { |
|
|
|
|
// event.preventDefault(); |
|
|
|
|
this.form.id = ""; |
|
|
|
|
console.log("submitting..."); |
|
|
|
|
await this.$http.$post('http://ubodroid-2:8080/api/v1/typ', this.form); |
|
|
|
|
// return result; |
|
|
|
|
// this.subm(this.form); |
|
|
|
|
this.fetch(); |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
async onUpdate() { |
|
|
|
|
// event.preventDefault(); |
|
|
|
|
console.log("updating..."); |
|
|
|
|
console.log("Laufzeit: ", this.form.laufzeit) |
|
|
|
|
console.log(this.form); |
|
|
|
|
await this.$http.$put('http://ubodroid-2:8080/api/v1/typ/'+this.form.id, this.form); |
|
|
|
|
// return result; |
|
|
|
|
// this.subm(this.form); |
|
|
|
|
this.fetch(); |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
async onDelete() { |
|
|
|
|
// event.preventDefault(); |
|
|
|
|
console.log("updating..."); |
|
|
|
|
await this.$http.$delete('http://ubodroid-2:8080/api/v1/typ/'+this.form.id); |
|
|
|
|
// return result; |
|
|
|
|
// this.subm(this.form); |
|
|
|
|
this.fetch(); |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
onReset(event) { |
|
|
|
|
event.preventDefault(); |
|
|
|
|
this.form.bezeichnung = ''; |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
onFill(item) { |
|
|
|
|
// alert(JSON.stringify(item)); |
|
|
|
|
if(item.length !== 0) { |
|
|
|
|
this.form.bezeichnung = item[0].bezeichnung; |
|
|
|
|
this.form.id = item[0].id; |
|
|
|
|
console.log(JSON.stringify(item[0].bezeichnung)); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}*/ |
|
|
|
|
</script> |