wdm-web4/components/Typ.vue

<template>
    <ClientOnly>
      <Panel header="Maintainance / Type" class="bg-white rounded-4" style="margin-top: 78px;">
      
        
          <div tag="form" class="g-3 mb-20 needs-validation" novalidate @submit.prevent="checkForm">
            <div class="grid nested-grid">
              <div class="col-4">
                <p>Image Galery</p>
              </div>
              <div class="col-8">
                  <div class="grid">
                    <div class="col-12 gap-2">
                      <label for="bezeichnung">Description *</label>
                      <InputText class="col-12"
                                              v-model="bezeichnung"
                                              invalidFeedback="Please provide a description of the clothing-type"
                                              validFeedback="Looks good!"
                                              required
                                          />
                      <small id="bezeichnung-help">Enter a description for the clothing</small>
                    </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>
                      
                    </div> 
                  </div>
              </div>
          </div>
          </div>
              <!--<MDBContainer class="bg-white rounded-4"> -->
                <div class="grid" style="margin-bottom:40px;">
                  <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;">
                          <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>
                  
                  </div>
                </div> 
            <!--</MDBContainer>-->

          
          <template #fallback>
            <!-- this will be rendered on server side -->
            <p>Loading comments...</p>
          </template>
      </Panel>
      </ClientOnly>
      
  </template>
  
  

  <script setup lang="ts">
    //import { MDBBtn, MDBCol, MDBCheckbox, MDBInput, MDBRow, MDBContainer } from "mdb-vue-ui-kit";
    import { ref } from "vue";
    import { FilterMatchMode } from "primevue/api";

    const bezeichnung = ref("");
    //const loading = ref(true); 
    
    const checkForm = (event: Event) => {
    event.target.classList.add("was-validated");
  };
    const {data: typen } = await useFetch('http://ubodroid-2:8081/api/v1/typ');
  
    const columns = [
      { field: 'id', header: '#'}, 
      { header: 'Description', field: 'bezeichnung'},
    ];

    const filters = ref({
      global: { value: null, matchMode: FilterMatchMode.CONTAINS },
      bezeichnung: {value: null, matchMode: FilterMatchMode.STARTS_WITH }
    })
    
    async function onSubmit() {
      let fd = new FormData();
      fd.append('bezeichnung', bezeichnung.value);
      await $fetch('http://ubodroid-2:8081/api/v1/typ',{
      method: 'POST',
      body: fd
    });
    console.log('POST 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>