first guess vue vertragsbestandteil und gehaltsbestandteil components

application/controllers/system/TestVBform.php

@@ -0,0 +1,32 @@
+<?php
+
+if (! defined('BASEPATH')) exit('No direct script access allowed');
+
+/**
+ * Test VBform Vue Component
+ */
+class TestVBform extends Auth_Controller
+{
+	/**
+	 * Constructor
+	 */
+	public function __construct()
+	{
+		parent::__construct(
+			array(
+				'index' => 'system/developer:r'
+			)
+		);
+	}
+
+	// -----------------------------------------------------------------------------------------------------------------
+	// Public methods
+
+	/**
+	 * Everything has a beginning
+	 */
+	public function index()
+	{
+		$this->load->view('system/logs/testVBform.php');
+	}
+}

application/views/system/logs/testVBform.php

@@ -0,0 +1,16 @@
+<?php
+	$includesArray = array(
+		'title' => 'Test VBform',
+		'bootstrap5' => true,
+		'fontawesome6' => true,
+		'vue3' => true,
+		'customJSModules' => array('public/js/apps/vbform/vbform.js')
+	);
+
+	$this->load->view('templates/FHC-Header', $includesArray);
+?>
+
+	<div id="main"></div>
+
+<?php $this->load->view('templates/FHC-Footer', $includesArray); ?>
+

public/js/apps/vbform/vbform.js

@@ -0,0 +1,22 @@
+import vertragsbestandteilhelper from '../../components/vbform/vertragsbestandteilhelper.js';
+
+Vue.createApp({
+  template: `
+  <div class="container-fluid">
+    <h1>{{ title }}</h1>
+    <vertragsbestandteilhelper></vertragsbestandteilhelper>
+  </div>
+  `,
+  data: function() {
+    return {
+      "title": "Vertragsbestandteil Form",
+    };
+  },
+  components: {
+    'vertragsbestandteilhelper': vertragsbestandteilhelper
+  },
+  created: function() {
+  },
+  methods: {
+  }
+}).mount('#main');

public/js/components/vbform/gehaltsbestandteil.js

@@ -0,0 +1,57 @@
+import gueltigkeit from './gueltigkeit.js';
+
+export default {
+  props: [
+    'id'
+  ],
+  data: function() {
+    return {
+      gehaltstyp : '',
+      betrag: '',
+      gueltig_ab: '',
+      gueltig_bis: '',
+      valorisierung: ''
+    }
+  },
+  template: `
+  <div class="row g-2 py-2">
+    <div class="col-3">
+      <select v-model="gehaltstyp" class="form-select form-select-sm" aria-label=".form-select-sm example">
+        <option value="" selected>Gehaltstyp wählen</option>
+        <option value="1">Basisgehalt</option>
+        <option value="2">Grundgehalt</option>
+        <option value="3">Zulage</option>
+      </select>
+    </div>
+    <div class="col-2">
+      <input v-model="betrag" type="text" class="form-control form-control-sm" placeholder="betrag" aria-label="betrag">
+    </div>
+    <gueltigkeit ref="gueltigkeit"></gueltigkeit>
+    <div class="col-2 form-check form-control-sm">
+      <input v-model="valorisierung" class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
+      <label class="form-check-label" for="flexCheckDefault">
+        Valorisierung
+      </label>
+    </div>
+    <div class="col-1">
+      <button type="button" class="btn-close btn-sm p-2 float-end" @click="removeGB" aria-label="Close"></button>
+    </div>
+  </div>
+  `,
+  components: {
+    'gueltigkeit': gueltigkeit
+  },
+  methods: {
+    removeGB: function() {
+      this.$emit('removeGB', {id: this.id});
+    },
+    getPayload: function() {
+      return {
+        gehaltstyp: this.gehaltstyp,
+        betrag: this.betrag,
+        gueltigkeit: this.$refs.gueltigkeit.getPayload(),
+        valorisierung: this.valorisierung
+      };
+    }
+  }
+}

public/js/components/vbform/gehaltsbestandteilhelper.js

@@ -0,0 +1,53 @@
+import gehaltsbestandteil from './gehaltsbestandteil';
+
+export default {
+  template: `
+  <div class="row g-2 py-2">
+    <div class="col">
+      <a href="javascript:void(0);" @click="addGB"><i class="fas fa-plus"></i> Gehaltsbestandteil hinzufuegen</a>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col">
+        <gehaltsbestandteil v-bind:ref="gb.id" v-for="gb in gbs" v-bind:id="gb.id" @removeGB="removeGB"></gehaltsbestandteil>
+    </div>
+  </div>
+  `,
+  data: function() {
+    return {
+      payload: [],
+      gbs: [],
+    };
+  },
+  components: {
+    'gehaltsbestandteil': gehaltsbestandteil,
+  },
+  methods: {
+    addGB: function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+
+      var gbid = 'testgb' + (this.gbs.length + 1);
+      this.gbs.push({
+        id: gbid
+      });
+    },
+    removeGB: function(payload) {
+      var gbs = this.gbs.filter(function(gb) {
+        return gb.id !== payload.id;
+      });
+      this.gbs = gbs;
+    },
+    getPayload: function() {
+      var gbs = this.gbs;
+      var that = this;
+
+      this.payload = [];
+      gbs.forEach(function(gb) {
+        that.payload.push(that.$refs[gb.id][0].getPayload());
+      });
+
+      return this.payload;
+    }
+  }
+}

public/js/components/vbform/gueltigkeit.js

@@ -0,0 +1,25 @@
+export default {
+  data: function() {
+    return {
+      gueltig_ab: '',
+      gueltig_bis: ''
+    }
+  },
+  template: `
+  <div class="col-2">
+    <input v-model="gueltig_ab" type="text" class="form-control form-control-sm" placeholder="gültig ab" aria-label="gueltig ab">
+  </div>
+  <div class="col-2">
+    <input v-model="gueltig_bis" type="text" class="form-control form-control-sm" placeholder="gültig bis" aria-label="gueltig bis">
+  </div>
+  `,
+  components: {},
+  methods: {
+    getPayload: function() {
+      return {
+        gueltig_ab: this.gueltig_ab,
+        gueltig_bis: this.gueltig_bis,
+      };
+    }
+  }
+}

public/js/components/vbform/vertragsbestandteil_freitext.js

@@ -0,0 +1,72 @@
+import gehaltsbestandteilhelper from './gehaltsbestandteilhelper.js';
+import gueltigkeit from './gueltigkeit.js';
+
+export default {
+  props: [
+    'id'
+  ],
+  emits: {
+    removeVB: null
+  },
+  data: function() {
+    return {
+      freitexttyp: '',
+      titel: '',
+      freitext: '',
+      kuendigungsrelevant: ''
+    }
+  },
+  template: `
+  <div v-bind:id="id" class="border-bottom py-2 mb-3">
+    <div class="row g-2 flex-row-reverse">
+      <div class="col">
+        <button type="button" class="btn-close btn-sm p-2 float-end" @click="removeVB" aria-label="Close"></button>
+      </div>
+    </div>
+    <div class="row g-2 py-2">
+      <div class="col-3">
+        <select v-model="freitexttyp" class="form-select form-select-sm" aria-label=".form-select-sm example">
+          <option value="" selected>Freitexttyp wählen</option>
+          <option value="allin">AllIn</option>
+          <option value="ersatzkraft">Ersatzarbeitskraft</option>
+          <option value="zusatzvbg">Zusatzvereinbarung</option>
+          <option value="sonstiges">Sonstiges</option>
+        </select>
+      </div>
+      <gueltigkeit ref="gueltigkeit"></gueltigkeit>
+    </div>
+    <div class="row g-2 py-2">
+      <div class="col">
+        <input v-model="titel" type="text" class="form-control form-control-sm" placeholder="Titel" aria-label="Titel">
+      </div>
+    </div>
+    <div class="row g-2 py-2">
+      <div class="col">
+        <textarea v-model="freitext" rows="5" class="form-control form-control-sm" placeholder="Freitext" aria-label="Freitext"></textarea>
+      </div>
+    </div>
+    <div class="row g-2 py-2">
+      <gehaltsbestandteilhelper ref="gbh"></gehaltsbestandteilhelper>
+    </div>
+  </div>
+  `,
+  components: {
+    'gehaltsbestandteilhelper': gehaltsbestandteilhelper,
+    'gueltigkeit': gueltigkeit
+  },
+  methods: {
+    removeVB: function() {
+      this.$emit('removeVB', {id: this.id});
+    },
+    getPayload: function() {
+      return {
+        freitexttyp: this.freitexttyp,
+        titel: this.titel,
+        freitext: this.freitext,
+        kuendigungsrelevant: this.kuendigungsrelevant,
+        gueltigkeit: this.$refs.gueltigkeit.getPayload(),
+        gehaltsbestandteile: this.$refs.gbh.getPayload()
+      };
+    }
+  }
+}

public/js/components/vbform/vertragsbestandteil_funktion.js

@@ -0,0 +1,55 @@
+import gehaltsbestandteilhelper from './gehaltsbestandteilhelper.js'
+import gueltigkeit from './gueltigkeit.js';
+
+export default {
+  props: [
+    'id'
+  ],
+  emits: {
+    removeVB: null
+  },
+  data: function () {
+    return {
+      funktion: '',
+      orget: '',
+      gueltig_ab: '',
+      gueltig_bis: ''
+    }
+  },
+  template: `
+  <div v-bind:id="id" class="border-bottom py-2 mb-3">
+    <div class="row g-2 flex-row-reverse">
+      <div class="col">
+        <button type="button" class="btn-close btn-sm p-2 float-end" @click="removeVB" aria-label="Close"></button>
+      </div>
+    </div>
+    <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">
+      </div>
+      <div class="col">
+        <input v-model="orget" type="text" class="form-control form-control-sm" placeholder="Organisations-Einheit" aria-label="orget">
+      </div>
+      <gueltigkeit ref="gueltigkeit"></gueltigkeit>
+    </div>
+    <gehaltsbestandteilhelper ref="gbh"></gehaltsbestandteilhelper>
+  </div>
+  `,
+  components: {
+    'gehaltsbestandteilhelper': gehaltsbestandteilhelper,
+    'gueltigkeit': gueltigkeit
+  },
+  methods: {
+    removeVB: function() {
+      this.$emit('removeVB', {id: this.id});
+    },
+    getPayload: function() {
+      return {
+        funktion: this.funktion,
+        orget: this.orget,
+        gueltigkeit: this.$refs.gueltigkeit.getPayload(),
+        gehaltsbestandteile: this.$refs.gbh.getPayload()
+      };
+    }
+  }
+}

public/js/components/vbform/vertragsbestandteil_stunden.js

@@ -0,0 +1,48 @@
+import gehaltsbestandteilhelper from './gehaltsbestandteilhelper.js';
+import gueltigkeit from './gueltigkeit.js';
+
+export default {
+  props: [
+    'id'
+  ],
+  emits: {
+    removeVB: null
+  },
+  data: function () {
+    return {
+      stunden: ''
+    }
+  },
+  "template": `
+  <div v-bind:id="id" class="border-bottom py-2 mb-3">
+    <div class="row g-2 flex-row-reverse">
+      <div class="col">
+        <button type="button" class="btn-close btn-sm p-2 float-end" @click="removeVB" aria-label="Close"></button>
+      </div>
+    </div>
+    <div class="row g-2">
+      <div class="col">
+        <input v-model="stunden" type="text" class="form-control form-control-sm" placeholder="Stunden" aria-label="stunden">
+      </div>
+      <gueltigkeit ref="gueltigkeit"></gueltigkeit>
+    </div>
+    <gehaltsbestandteilhelper ref="gbh"></gehaltsbestandteilhelper>
+  </div>
+  `,
+  components: {
+    'gehaltsbestandteilhelper': gehaltsbestandteilhelper,
+    'gueltigkeit': gueltigkeit
+  },
+  methods: {
+    removeVB: function() {
+      this.$emit('removeVB', {id: this.id});
+    },
+    getPayload: function() {
+      return {
+        stunden: this.stunden,
+        gueltigkeit: this.$refs.gueltigkeit.getPayload(),
+        gehaltsbestandteile: this.$refs.gbh.getPayload()
+      };
+    }
+  }
+}

public/js/components/vbform/vertragsbestandteil_zeitaufzeichnung.js

@@ -0,0 +1,65 @@
+import gueltigkeit from './gueltigkeit.js';
+
+export default {
+  props: [
+    'id'
+  ],
+  emits: {
+    removeVB: null
+  },
+  data: function () {
+    return {
+      zeitaufzeichnung: '',
+      azgrelevant: '',
+      homeoffice: '',
+      gueltig_ab: '',
+      gueltig_bis: ''
+    }
+  },
+  template: `
+  <div v-bind:id="id" class="border-bottom py-2 mb-3">
+    <div class="row g-2 flex-row-reverse">
+      <div class="col">
+        <button type="button" class="btn-close btn-sm p-2 float-end" @click="removeVB" aria-label="Close"></button>
+      </div>
+    </div>
+    <div class="row g-2">
+      <div class="col-2 form-check form-control-sm">
+        <input v-model="zeitaufzeichnung" class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
+        <label class="form-check-label" for="flexCheckDefault">
+          Zeitaufzeichnung
+        </label>
+      </div>
+      <div class="col-2 form-check form-control-sm">
+        <input v-model="azgrelevant" class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
+        <label class="form-check-label" for="flexCheckDefault">
+          AZG-relevant
+        </label>
+      </div>
+      <div class="col-2 form-check form-control-sm">
+        <input v-model="homeoffice" class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
+        <label class="form-check-label" for="flexCheckDefault">
+          Home-Office
+        </label>
+      </div>
+      <gueltigkeit ref="gueltigkeit"></gueltigkeit>
+    </div>
+  </div>
+  `,
+  components: {
+    'gueltigkeit': gueltigkeit
+  },
+  methods: {
+    removeVB: function() {
+      this.$emit('removeVB', {id: this.id});
+    },
+    getPayload: function() {
+      return {
+        zeitaufzeichnung: this.zeitaufzeichnung,
+        azgrelevant: this.azgrelevant,
+        homeoffice: this.homeoffice,
+        gueltigkeit: this.$refs.gueltigkeit.getPayload(),
+      };
+    }
+  }
+}

public/js/components/vbform/vertragsbestandteilhelper.js

@@ -0,0 +1,98 @@
+import vertragsbestandteilstunden from './vertragsbestandteil_stunden.js';
+import vertragsbestandteilzeitaufzeichnung from './vertragsbestandteil_zeitaufzeichnung.js';
+import vertragsbestandteilfunktion from './vertragsbestandteil_funktion.js';
+import vertragsbestandteilfreitext from './vertragsbestandteil_freitext.js';
+
+export default {
+  template: `
+  <div class="row">
+    <div class="col-7">
+      <form>
+        <div class="row">
+          <div class="col">
+            <select v-model="vertragsbestandteiltyp" class="form-select form-select-sm" aria-label=".form-select-sm example">
+              <option value="vertragsbestandteilstunden">Vertragsbestandteil Stunden</option>
+              <option value="vertragsbestandteilzeitaufzeichnung">Vertragsbestandteil Zeitaufzeichnung</option>
+              <option value="vertragsbestandteilfunktion">Vertragsbestandteil Funktion</option>
+              <option value="vertragsbestandteilfreitext">Vertragsbestandteil Freitext</option>
+            </select>
+          </div>
+          <div class="col">
+            <button class="btn btn-primary btn-sm" @click="addVB">Vertragsbestandteil hinzufuegen</button>
+          </div>
+          <div class="col">
+            <button class="btn btn-secondary btn-sm" @click="getJSON">get JSON</button>
+          </div>
+        </div>
+        <component v-bind:ref="vb.id" v-bind:is="vb.type" v-for="vb in vbs" v-bind:id="vb.id" @removeVB="removeVB"></component>
+      </form>
+    </div>
+    <div class="col-5">
+      <pre style="background-color: #000; color: #0f0; padding: .5em; height: 90vh;">
+{{resjson}}
+      </pre>
+    </div>
+  </div>
+  `,
+  data: function() {
+    return {
+      vertragsbestandteiltyp: 'vertragsbestandteil',
+      payload: {
+        vbs: []
+      },
+      vbs: [
+        {
+          type: 'vertragsbestandteilstunden',
+          id: 'test1'
+        },
+        {
+          type: 'vertragsbestandteilzeitaufzeichnung',
+          id: 'test2'
+        }
+      ],
+    };
+  },
+  components: {
+    'vertragsbestandteilstunden': vertragsbestandteilstunden,
+    'vertragsbestandteilzeitaufzeichnung': vertragsbestandteilzeitaufzeichnung,
+    'vertragsbestandteilfunktion': vertragsbestandteilfunktion,
+    'vertragsbestandteilfreitext': vertragsbestandteilfreitext,
+  },
+  methods: {
+    addVB: function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+
+      var vbid = 'test' + (this.vbs.length + 1);
+      this.vbs.push({
+        type: this.vertragsbestandteiltyp,
+        id: vbid
+      });
+    },
+    removeVB: function(payload) {
+      var vbs = this.vbs.filter(function(vb) {
+        return vb.id !== payload.id;
+      });
+      this.vbs = vbs;
+    },
+    getJSON: function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+
+      var vbs = this.vbs;
+      var that = this;
+
+      this.payload = {
+        vbs: []
+      };
+      vbs.forEach(function(vb) {
+        that.payload.vbs.push(that.$refs[vb.id][0].getPayload());
+      });
+    }
+  },
+  computed: {
+    resjson: function() {
+      return JSON.stringify(this.payload, null, 2);
+    }
+  }
+}