enhance guioptions to be able to disable selected fields and hide gehaltsbestandteile add link

public/js/apps/vbform/presets.js

@@ -73,7 +73,46 @@ export default [
         type: 'vertragsbestandteilfunktion',
         guioptions: {
           id: uuid.get_uuid(),
-          removable: false
+          removable: false,
+          canhavegehaltsbestandteile: false,
+          nobottomborder: true,
+          nobottommargin: true,
+          disabled: [
+            'funktion'
+          ]
+        },
+        data: {
+          funktion: 'Standardkostenstelle'
+        }
+      },
+      {
+        type: 'vertragsbestandteilfunktion',
+        guioptions: {
+          id: uuid.get_uuid(),
+          removable: false,
+          canhavegehaltsbestandteile: false,
+          nobottomborder: true,
+          nobottommargin: true,
+          disabled: [
+            'funktion'
+          ]
+        },
+        data: {
+          funktion: 'Diszpl-Zuordnung'
+        }
+      },
+      {
+        type: 'vertragsbestandteilfunktion',
+        guioptions: {
+          id: uuid.get_uuid(),
+          removable: false,
+          canhavegehaltsbestandteile: false,
+          disabled: [
+            'funktion'
+          ]
+        },
+        data: {
+          funktion: 'Fachliche-Zuordnung'
         }
       }
     ]

public/js/components/vbform/gehaltsbestandteil.js

@@ -4,7 +4,10 @@ import configurable from '../../mixins/vbform/configurable.js';
 export default {
   template: `
   <div class="row g-2 py-2">
-    <div class="col-3">
+    <div class="col-1">
+      &nbsp;
+    </div>
+    <div class="col-2">
       <select v-model="gehaltstyp" class="form-select form-select-sm" aria-label=".form-select-sm example">
         <option value="" selected disabled>Gehaltstyp wählen</option>
         <option value="basis">Basisgehalt</option>

public/js/components/vbform/gehaltsbestandteilhelper.js

@@ -4,15 +4,14 @@ import uuid from '../../helpers/vbform/uuid.js';
 
 export default {
   template: `
-  <div class="row g-2 py-2">
-    <div class="col">
-      <a class="fs-6 fw-light" href="javascript:void(0);" @click="addGB"><i class="fas fa-plus"></i> Gehaltsbestandteil hinzufuegen</a>
-    </div>
-  </div>
+  <gehaltsbestandteil v-bind:ref="config.guioptions.id" v-for="config in children"
+    v-bind:config="config" :key="config.guioptions.id" @removeGB="removeGB"></gehaltsbestandteil>
   <div class="row">
-    <div class="col">
-        <gehaltsbestandteil v-bind:ref="config.guioptions.id" v-for="config in children"
-          v-bind:config="config" :key="config.guioptions.id" @removeGB="removeGB"></gehaltsbestandteil>
+    <div class="col-1">
+      &nbsp;
+    </div>
+    <div class="col-11">
+      <a class="fs-6 fw-light" href="javascript:void(0);" @click="addGB"><i class="fas fa-plus"></i> Gehaltsbestandteil hinzufuegen</a>
     </div>
   </div>
   `,
@@ -32,7 +31,7 @@ export default {
       e.preventDefault();
       e.stopPropagation();
 
-      this.children.unshift({
+      this.children.push({
         type: 'gehaltsbestandteil',
         guioptions: {
           id: uuid.get_uuid(),

public/js/components/vbform/vertragsbestandteil_freitext.js

@@ -12,6 +12,7 @@ export default {
           <option value="allin">AllIn</option>
           <option value="ersatzkraft">Ersatzarbeitskraft</option>
           <option value="zusatzvbg">Zusatzvereinbarung</option>
+          <option value="befristung">Befristung</option>
           <option value="sonstiges">Sonstiges</option>
         </select>
       </div>

public/js/components/vbform/vertragsbestandteil_funktion.js

@@ -4,10 +4,10 @@ import configurable from '../../mixins/vbform/configurable.js';
 
 export default {
   template: `
-  <div class="border-bottom py-2 mb-3">
+  <div class="py-2" :class="vbcssclasses">
     <div class="row g-2">
       <div class="col">
-        <input v-model="funktion" type="text" class="form-control form-control-sm" placeholder="Funktion" aria-label="funktion">
+        <input v-model="funktion" :disabled="isinputdisabled('funktion')" type="text" class="form-control form-control-sm" placeholder="Funktion" aria-label="funktion">
       </div>
       <div class="col">
         <input v-model="orget" type="text" class="form-control form-control-sm" placeholder="Organisations-Einheit" aria-label="orget">
@@ -17,7 +17,7 @@ export default {
         <button v-if="isremoveable" type="button" class="btn-close btn-sm p-2 float-end" @click="removeVB" aria-label="Close"></button>
       </div>
     </div>
-    <gehaltsbestandteilhelper ref="gbh" v-bind:preset="getgehaltsbestandteile"></gehaltsbestandteilhelper>
+    <gehaltsbestandteilhelper v-if="canhavegehaltsbestandteile" ref="gbh" v-bind:preset="getgehaltsbestandteile"></gehaltsbestandteilhelper>
   </div>
   `,
   components: {
@@ -52,6 +52,9 @@ export default {
     removeVB: function() {
       this.$emit('removeVB', {id: this.config.guioptions.id});
     },
+    getGehaltsbestandteilePayload: function() {
+      return (!this.$refs?.gbh === undefined) ? this.$refs.gbh.getPayload() : [];
+    },
     getPayload: function() {
       return {
         type: this.config.type,
@@ -61,7 +64,7 @@ export default {
           orget: this.orget,
           gueltigkeit: this.$refs.gueltigkeit.getPayload()
         },
-        gbs: this.$refs.gbh.getPayload()
+        gbs: this.getGehaltsbestandteilePayload()
       };
     }
   }

public/js/components/vbform/vertragsbestandteilhelper.js

@@ -12,10 +12,12 @@ import sharedstate from './vbsharedstate.js';
 export default {
   template: `
       <div>
-        <div class="row g-2 py-2 mb-3">
+        <div class="row g-2 py-2 border-bottom mb-3">
           <dvaenderung ref="formheader" :config="data" v-if="isaenderung"></dvaenderung>
           <dvneuanlage ref="formheader" :config="data" v-else=""></dvneuanlage>
         </div>
+        <component v-bind:ref="config.guioptions.id" v-bind:is="config.type" v-for="config in children"
+          v-bind:config="config" :key="config.guioptions.id" @removeVB="removeVB"></component>
         <div class="row py-2 border-bottom mb-3">
           <div class="col">
             <select v-model="vertragsbestandteiltyp" class="form-select form-select-sm" aria-label=".form-select-sm example">
@@ -34,8 +36,6 @@ export default {
             <button class="btn btn-secondary btn-sm float-end" @click="getJSON">get JSON</button>
           </div>
         </div>
-        <component v-bind:ref="config.guioptions.id" v-bind:is="config.type" v-for="config in children"
-          v-bind:config="config" :key="config.guioptions.id" @removeVB="removeVB"></component>
       </div>
   `,
   props: [
@@ -75,7 +75,7 @@ export default {
         return;
       }
 
-      this.children.unshift({
+      this.children.push({
         type: this.vertragsbestandteiltyp,
         guioptions: {
           id: uuid.get_uuid(),
@@ -110,7 +110,9 @@ export default {
   },
   computed: {
     isaenderung: function() {
-      return ((typeof this.data.dienstverhaeltnisid !== 'undefined') && parseInt(this.data.dienstverhaeltnisid) > 0);
+      return ((typeof this.data.dienstverhaeltnisid !== 'undefined')
+        && !isNaN(parseInt(this.data.dienstverhaeltnisid))
+        && parseInt(this.data.dienstverhaeltnisid) > 0);
     }
   }
 }

public/js/mixins/vbform/configurable.js

@@ -2,11 +2,23 @@ export default {
   props: [
     'config'
   ],
+  methods: {
+    isinputdisabled: function(inputname) {
+      if( this.config?.guioptions?.disabled === undefined ) {
+        return false;
+      }
+      return this.config.guioptions.disabled.includes(inputname);
+    }
+  },
   computed: {
     isremoveable: function() {
       return (this.config?.guioptions?.removeable === undefined)
         ? false : this.config.guioptions.removeable;
     },
+    canhavegehaltsbestandteile: function() {
+      return (this.config?.guioptions?.canhavegehaltsbestandteile === undefined)
+        ? true : this.config.guioptions.canhavegehaltsbestandteile;
+    },
     getgehaltsbestandteile: function() {
       return (this.config?.gbs !== undefined) ? this.config.gbs : [];
     },
@@ -18,6 +30,20 @@ export default {
       } else {
         return {};
       }
+    },
+    vbcssclasses: function() {
+      var classes = [];
+      if( (this.config?.guioptions?.nobottomborder === undefined)
+        || ((this.config?.guioptions?.nobottomborder !== undefined)
+              && this.config.guioptions.nobottomborder === false) ) {
+        classes.push('border-bottom');
+      }
+      if( (this.config?.guioptions?.nobottommargin === undefined)
+        || ((this.config?.guioptions?.nobottommargin !== undefined)
+              && this.config.guioptions.nobottommargin === false) ) {
+        classes.push('mb-3');
+      }
+      return classes;
     }
   }
 }