Sort, Search, Select und Dialog

1 year ago · 53974dcf23
7 changed files with 115 additions and 100 deletions
--- a/.gitignore
+++ 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
--- a/.npmrc
+++ b/.npmrc
@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,3 @@
+{
+    "nuxt.isNuxtApp": false
+}
--- a/components/Header.vue
+++ b/components/Header.vue
@ -7,6 +7,9 @@
                <template #start>
                    <img alt="logo" src="sc_logo_icon.png" height="40" class="mr-2" />
                </template>
+                <template #end>
+                    <InputText placeholder="Search" type="text" />
+                </template>
              </Menubar>
           
  
--- a/components/Typ.vue
+++ b/components/Typ.vue
@ -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");
  };
@ -94,102 +117,56 @@
      bezeichnung: {value: null, matchMode: FilterMatchMode.STARTS_WITH }
    })

-    async function onSubmit() {
+    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(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>
--- a/layouts/default.vue
+++ b/layouts/default.vue
@ -1,4 +1,5 @@
 <template>
+     <Toast />
     <div class="grid">
        <div class="col-6 col-offset-3">
            <Header />
@ -9,11 +10,11 @@
        <!-- Mask -->
        <div class="mask" style="background-color: hsla(0, 0%, 0%, 0.6)">
            <div class="grid nested-grid">            
-                    <div class="col-6 col-offset-3">
-                        <div class="justify-content-center align-items-center">
+                    <div class="col-6 col-offset-3 justify-content-center align-items-center">
+                        <!--<div class="flex sm:col-6 justify-content-center align-items-center"> -->

                            <slot />
-                        </div>
+                        <!--</div>-->
                    </div>
            </div>
        </div>
--- a/plugins/primevue.js
+++ b/plugins/primevue.js
@ -9,6 +9,9 @@ import Menubar from 'primevue/menubar';
 import Card from 'primevue/card';
 import Panel from 'primevue/panel';
 import InputText from 'primevue/inputtext';
+import ToastService from 'primevue/toastservice';
+import Toast from 'primevue/toast';
+import Dialog from 'primevue/dialog';


 export default defineNuxtPlugin((nuxtApp) => {
@ -22,4 +25,7 @@ export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.component("Card", Card);
    nuxtApp.vueApp.component("Panel", Panel);
    nuxtApp.vueApp.component("InputText", InputText);
+    nuxtApp.vueApp.use(ToastService);
+    nuxtApp.vueApp.component("Toast", Toast);   
+    nuxtApp.vueApp.component("Dialog", Dialog); 
 });