From 53974dcf23d77781675da9ed1a1b459f04eaa33b Mon Sep 17 00:00:00 2001 From: Georg Spar Date: Sun, 11 Jun 2023 13:33:40 +0200 Subject: [PATCH] Sort, Search, Select und Dialog --- .gitignore | 23 ++++++ .npmrc | 2 + .vscode/settings.json | 3 + components/Header.vue | 3 + components/Typ.vue | 171 ++++++++++++++++++------------------------ layouts/default.vue | 7 +- plugins/primevue.js | 6 ++ 7 files changed, 115 insertions(+), 100 deletions(-) create mode 100644 .gitignore create mode 100644 .npmrc create mode 100644 .vscode/settings.json diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..768a14e --- /dev/null +++ b/.gitignore @@ -0,0 +1,23 @@ +# Nuxt dev/build outputs +.output +.nuxt +.nitro +.cache +dist + +# Node dependencies +node_modules + +# Logs +logs +*.log + +# Misc +.DS_Store +.fleet +.idea + +# Local env files +.env +.env.* +!.env.example diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..cf04042 --- /dev/null +++ b/.npmrc @@ -0,0 +1,2 @@ +shamefully-hoist=true +strict-peer-dependencies=false diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..13ee2b0 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "nuxt.isNuxtApp": false +} \ No newline at end of file diff --git a/components/Header.vue b/components/Header.vue index 6e00b95..69c9041 100644 --- a/components/Header.vue +++ b/components/Header.vue @@ -7,6 +7,9 @@ + diff --git a/components/Typ.vue b/components/Typ.vue index 332bb6c..b9232b8 100644 --- a/components/Typ.vue +++ b/components/Typ.vue @@ -19,15 +19,15 @@ required /> Enter a description for the clothing +
- - +
@@ -38,7 +38,9 @@
+ :globalFilterFields="['bezeichnung']" + v-model:selection="selectedTyp" selection-mode="single" @row-select="onRowSelect" :meta-key-selection="false" + tableStyle="min-width: 50rem;"> + +
+ + + Enter a description for the clothing +
+ + @@ -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)); - } - } - } - }*/ \ No newline at end of file diff --git a/layouts/default.vue b/layouts/default.vue index 03ee1e8..337117d 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -1,4 +1,5 @@