wdm-web/components/Typ.vue

<template>
    <div>
      <div style="margin-bottom: 20px;">
        <b-form  @reset="onReset">
  
          <b-form-group
              id="ip-g-1"
              label="Bezeichnung:"
              label-for="bezeichnung"
              description="Name des Zertifikat-Typs:"
              >
              <b-form-input
                id="bezeichnung"
                v-model="form.bezeichnung"
                required
                placeholder="Name eingeben"
                size="50"
              >
              </b-form-input>
          </b-form-group>    
  
          <b-button  variant="primary" @click="onSubmit()">Neu eintragen</b-button>
          <b-button  variant="secondary" @click="onUpdate()">Aktualisieren</b-button>
          <b-button  variant="danger" @click="onDelete()">Löschen</b-button>
          <b-button type="reset" variant="danger">Reset</b-button>
        </b-form>
      </div>
      <div>
        <b-table striped hover bordered head-variant="dark" selectable :select-mode="selectMode" :items="certs" :fields="fields"  @row-selected="onRowSelect"></b-table>
      </div>
    </div>
  </template>
  
  <script>
  
    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://localhost:8081/api/v1/typ'
          ).then(res => res.json())
        },
        async onSubmit() {
          // event.preventDefault();
          this.form.id = "";
          console.log("submitting...");
          await this.$http.$post('http://localhost:8081/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://localhost:8081/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://localhost:8081/api/v1/typ/'+this.form.id);
          // return result;
          // this.subm(this.form);
         this.fetch();
  
        },
  
  
        onReset(event) {
          event.preventDefault();
          this.form.name = '';
          this.form.laufzeit = 0;
        },
  
        onFill(item) {
          // alert(JSON.stringify(item));
          if(item.length !== 0) {
            this.form.bezeichnung = item[0].bezeichnung;
            this.form.id = item[0].id;
            this.form.laufzeit = parseInt(item[0].laufzeit);
            console.log(JSON.stringify(item[0].bezeichnung));
          }
        }
      }
    }
  </script>