wdm-web4/components/UpdMeas.vue

<template>
    <ClientOnly>
      <Card style="margin-top: 78px; min-height: 200px;"> 
            <template #content>
                <Panel header="Maintainance / Measures" class="bg-white rounded-4 gap-3">
                    
                  
                    <div  class="g-3 mb-20">
                      <div class="grid nested-grid">
                        <Card class="col-12">
                            <template #content>
                                <div class="col-12 mb-20">
                                    <div class="field">
                                        <label for="kurz">Title</label>
                                        <InputText id="kurz" v-model.trim="measure.kurz" required="true" autofocus />
                                        <small id="kurz-help" >Enter a short description for the measure</small>
                                    </div>
                                </div>
                                <table class="col-12 p-table-sm align-items-left measuretable">
                                                <thead>
                                                    <th>Measure:</th>
                                                    <th>Value (in cm):</th>
                                                </thead>
                                                <tr>
                                                    <td>Breast</td>
                                                    <td>
                                                        <InputText id="brust" v-model.trim="measure.brust" />
                                                        
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>Length Top</td>
                                                    <td>
                                                        
                                                        <InputText id="laenget" v-model.trim="measure.laenget"  />
                                                        
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>Shoulder Width</td>
                                                    <td>
                                                        
                                                        <InputText id="schulterbreite" v-model.trim="measure.schulterbreite" />
                                                       
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>Waist Girth Top</td>
                                                    <td>
                                                       
                                                        <InputText id="taillenumfangt" v-model.trim="measure.taillenumfangt"  />
                                                       
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>Hip Girth</td>
                                                    <td>
                                                       
                                                        <InputText id="hueftumfang" v-model.trim="measure.hueftumfang"  />
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>Inner Seam</td>
                                                    <td>
                                                       
                                                        <InputText id="innennaht" v-model.trim="measure.innennaht" />
                                                       
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>Length Bottom</td>
                                                    <td>
                                                        
                                                        <InputText id="laengeb" v-model.trim="measure.laengeb" />
                                                        
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>Waist Girth Bottom</td>
                                                    <td>
                                                        
                                                        <InputText id="taillenumfangb" v-model.trim="measure.taillenumfangb" />
                                                        
                                                    </td>
                                                </tr>
                                            </table>
                           
                            
                                
                            </template>
                            
                            <template #footer>
                                
                                <Button label="Save" icon="pi pi-check" text @click="onSubmit(measure)" />
                            </template>
                             
                        </Card>
                      </div>
                    </div>
                       
                    <template #fallback>
                      <!-- this will be rendered on server side -->
                      <p>Loading comments...</p>
                    </template>
                </Panel>
            </template>
        </Card>
      </ClientOnly>
      
  </template>
  
  

  <script setup lang="ts">
    import { ref, onMounted } from "vue";
    import { useToast } from 'primevue/usetoast';

    let params : any;
    params = inject('dialogRef');
    //const test = params.data;
    interface cMeasures {
      id: number;
      kurz: string;
      brust: number;
      laenget: number;
      schulterbreite: number;
      taillenumfangt: number;
      hueftumfang: number;
      innennaht: number;
      laengeb: number;
      taillenumfangb: number;
    }

    onMounted (() => {
        //const measure = ref({id: 0, kurz: '', brust:0, laenget:0, schulterbreite:0, taillenumfangt:0, hueftumfang:0, innennaht:0, laengeb:0, taillenumfangb:0});
        console.log('Params: ', params.value);
        measure.value = params.value.data.mea;
        console.log('measure nach onMounted: ', measure);
    });

    const toast = useToast();
    const measure = ref({id: 0, kurz: '', brust:0, laenget:0, schulterbreite:0, taillenumfangt:0, hueftumfang:0, innennaht:0, laengeb:0, taillenumfangb:0});
    
    
    async function onSubmit(m: cMeasures) {
       if(!m.brust) {
        m.brust = 0;
       }
       if(!m.laenget) {
        m.laenget = 0;
       }
       if(!m.schulterbreite) {
        m.schulterbreite = 0;
       }
       if(!m.taillenumfangt) {
        m.taillenumfangt = 0;
       }
       if(!m.hueftumfang) {
        m.hueftumfang = 0;
       }
       if(!m.innennaht) {
        m.innennaht = 0;
       }
       if(!m.laengeb) {
        m.laengeb = 0;
       }
       if(!m.taillenumfangb) {
        m.taillenumfangb = 0;
       }
       
        await this.params.close(m);
    }
  </script>