mirror of
https://github.com/FH-Complete/FHC-Core.git
synced 2026-06-01 12:19:28 +00:00
cleanup form, add preset functionality for structure and data, use same JSON for preset and formoutput - prepare for save and restore before persisting to db
This commit is contained in:
Harald Bamberger
@@ -0,0 +1,222 @@
|
||||
import uuid from '../../helpers/vbform/uuid.js';
|
||||
|
||||
export default [
|
||||
{
|
||||
type: 'preset',
|
||||
guioptions: {
|
||||
id: 'leer',
|
||||
label: 'Leer',
|
||||
description: 'keine vordefinierten Vertrags- und Gehaltsbestandteile. Alles kann/muss manuell angelegt werden.'
|
||||
},
|
||||
vbs: []
|
||||
},
|
||||
{
|
||||
type: 'preset',
|
||||
guioptions: {
|
||||
id: 'neustd',
|
||||
label: 'Neuanlage Standard DV',
|
||||
description: 'Standard Dienstvertrag Vorlage'
|
||||
},
|
||||
vbs: [
|
||||
{
|
||||
type: 'vertragsbestandteilstunden',
|
||||
guioptions: {
|
||||
id: uuid.get_uuid(),
|
||||
removable: false
|
||||
},
|
||||
gbs: [
|
||||
{
|
||||
type: 'gehaltsbestandteil',
|
||||
guioptions: {
|
||||
id: uuid.get_uuid(),
|
||||
removable: false
|
||||
},
|
||||
data: {
|
||||
gehaltstyp: 'basis',
|
||||
valorisierung: true
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'vertragsbestandteilzeitaufzeichnung',
|
||||
guioptions: {
|
||||
id: uuid.get_uuid(),
|
||||
removable: false
|
||||
},
|
||||
data: {
|
||||
zeitaufzeichnung: true,
|
||||
azgrelevant: true,
|
||||
homeoffice: true
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'vertragsbestandteilfunktion',
|
||||
guioptions: {
|
||||
id: uuid.get_uuid(),
|
||||
removable: false
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'preset',
|
||||
guioptions: {
|
||||
id: 'allin',
|
||||
label: 'AllIn',
|
||||
description: 'AllIn Vertrag'
|
||||
},
|
||||
vbs: [
|
||||
{
|
||||
type: 'vertragsbestandteilstunden',
|
||||
guioptions: {
|
||||
id: uuid.get_uuid(),
|
||||
removable: false
|
||||
},
|
||||
gbs: [
|
||||
{
|
||||
type: 'gehaltsbestandteil',
|
||||
guioptions: {
|
||||
id: uuid.get_uuid(),
|
||||
removable: false
|
||||
},
|
||||
data: {
|
||||
gehaltstyp: 'grund',
|
||||
valorisierung: true
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'vertragsbestandteilzeitaufzeichnung',
|
||||
guioptions: {
|
||||
id: uuid.get_uuid(),
|
||||
removable: false
|
||||
},
|
||||
data: {
|
||||
zeitaufzeichnung: true,
|
||||
azgrelevant: false,
|
||||
homeoffice: true
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'vertragsbestandteilfreitext',
|
||||
guioptions: {
|
||||
id: uuid.get_uuid(),
|
||||
removable: false,
|
||||
},
|
||||
data: {
|
||||
freitexttyp: 'allin',
|
||||
titel: 'AllIn Vereinbarung',
|
||||
freitext: 'Es wird AllIn vereinbart.'
|
||||
},
|
||||
gbs: [
|
||||
{
|
||||
type: 'gehaltsbestandteil',
|
||||
guioptions: {
|
||||
id: uuid.get_uuid(),
|
||||
removable: false
|
||||
},
|
||||
data: {
|
||||
gehaltstyp: 'zulage',
|
||||
valorisierung: false
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "preset",
|
||||
"guioptions": {
|
||||
"id": "savedallin",
|
||||
"label": "Test Zwischenspeichern",
|
||||
"description": "generiertes JSON aus ausgeflltem Formular als POC für das Zwischenspeichern"
|
||||
},
|
||||
"vbs": [
|
||||
{
|
||||
"type": "vertragsbestandteilstunden",
|
||||
"guioptions": {
|
||||
"id": "44c4d3bc-ee1f-4edf-8b2a-82736e09d287",
|
||||
"removable": false
|
||||
},
|
||||
"data": {
|
||||
"stunden": "38,5",
|
||||
"gueltigkeit": {
|
||||
"gueltig_ab": "01.03.2023",
|
||||
"gueltig_bis": ""
|
||||
}
|
||||
},
|
||||
"gbs": [
|
||||
{
|
||||
"type": "gehaltsbestandteil",
|
||||
"guioptions": {
|
||||
"id": "cc38c689-5c79-4a82-899a-000fd77ed582",
|
||||
"removable": false
|
||||
},
|
||||
"data": {
|
||||
"gehaltstyp": "grund",
|
||||
"betrag": "3500",
|
||||
"gueltigkeit": {
|
||||
"gueltig_ab": "01.03.2023",
|
||||
"gueltig_bis": ""
|
||||
},
|
||||
"valorisierung": true
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "vertragsbestandteilzeitaufzeichnung",
|
||||
"guioptions": {
|
||||
"id": "b55a558e-458c-4ea5-bebf-dd9cbe247ca6",
|
||||
"removable": false
|
||||
},
|
||||
"data": {
|
||||
"zeitaufzeichnung": true,
|
||||
"azgrelevant": false,
|
||||
"homeoffice": true,
|
||||
"gueltigkeit": {
|
||||
"gueltig_ab": "01.03.2023",
|
||||
"gueltig_bis": ""
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "vertragsbestandteilfreitext",
|
||||
"guioptions": {
|
||||
"id": "6f5756d9-2128-48b8-8954-408f96816b22",
|
||||
"removable": false
|
||||
},
|
||||
"data": {
|
||||
"freitexttyp": "allin",
|
||||
"titel": "AllIn Vereinbarung",
|
||||
"freitext": "Es wird AllIn vereinbart.",
|
||||
"kuendigungsrelevant": "",
|
||||
"gueltigkeit": {
|
||||
"gueltig_ab": "01.03.2023",
|
||||
"gueltig_bis": ""
|
||||
}
|
||||
},
|
||||
"gbs": [
|
||||
{
|
||||
"type": "gehaltsbestandteil",
|
||||
"guioptions": {
|
||||
"id": "d0c8946f-1c64-4981-9c15-e09ac5c9ba0a",
|
||||
"removable": false
|
||||
},
|
||||
"data": {
|
||||
"gehaltstyp": "zulage",
|
||||
"betrag": "500",
|
||||
"gueltigkeit": {
|
||||
"gueltig_ab": "01.03.2023",
|
||||
"gueltig_bis": ""
|
||||
},
|
||||
"valorisierung": false
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
@@ -1,22 +1,26 @@
|
||||
import vertragsbestandteilhelper from '../../components/vbform/vertragsbestandteilhelper.js';
|
||||
import presets_chooser from '../../components/vbform/presets_chooser.js';
|
||||
import presets from './presets.js';
|
||||
|
||||
Vue.createApp({
|
||||
template: `
|
||||
<div class="container-fluid">
|
||||
<h1>{{ title }}</h1>
|
||||
<vertragsbestandteilhelper></vertragsbestandteilhelper>
|
||||
<presets_chooser v-bind:presets="presets"></presets_chooser>
|
||||
</div>
|
||||
`,
|
||||
data: function() {
|
||||
return {
|
||||
"title": "Vertragsbestandteil Form",
|
||||
presets: presets
|
||||
};
|
||||
},
|
||||
components: {
|
||||
'vertragsbestandteilhelper': vertragsbestandteilhelper
|
||||
'presets_chooser': presets_chooser
|
||||
},
|
||||
created: function() {
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
computed: {
|
||||
}
|
||||
}).mount('#main');
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
export default {
|
||||
template: `
|
||||
<div>
|
||||
<pre style="background-color: #000; color: #0f0; padding: .5em; height: 90vh;">
|
||||
{{text}}
|
||||
</pre>
|
||||
</div>
|
||||
`,
|
||||
props: [
|
||||
"text"
|
||||
]
|
||||
}
|
||||
@@ -1,9 +1,35 @@
|
||||
import gueltigkeit from './gueltigkeit.js';
|
||||
import configurable from '../../mixins/vbform/configurable.js';
|
||||
|
||||
export default {
|
||||
props: [
|
||||
'id'
|
||||
],
|
||||
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 disabled>Gehaltstyp wählen</option>
|
||||
<option value="basis">Basisgehalt</option>
|
||||
<option value="grund">Grundgehalt</option>
|
||||
<option value="zulage">Zulage</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<div class="input-group input-group-sm mb-3">
|
||||
<input v-model="betrag" type="text" class="form-control form-control-sm" placeholder="betrag" aria-label="betrag">
|
||||
<span class="input-group-text">€</span>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<gueltigkeit ref="gueltigkeit"></gueltigkeit>
|
||||
<div class="col-1">
|
||||
<button v-if="isremoveable" type="button" class="btn-close btn-sm p-2 float-end" @click="removeGB" aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
data: function() {
|
||||
return {
|
||||
gehaltstyp : '',
|
||||
@@ -13,44 +39,44 @@ export default {
|
||||
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
|
||||
},
|
||||
mixins: [
|
||||
configurable
|
||||
],
|
||||
created: function() {
|
||||
this.setDataFromConfig();
|
||||
},
|
||||
methods: {
|
||||
setDataFromConfig: function() {
|
||||
if( typeof this.config.data === 'undefined' ) {
|
||||
return;
|
||||
}
|
||||
|
||||
if( typeof this.config.data.gehaltstyp !== 'undefined' ) {
|
||||
this.gehaltstyp = this.config.data.gehaltstyp;
|
||||
}
|
||||
if( typeof this.config.data.betrag !== 'undefined' ) {
|
||||
this.betrag = this.config.data.betrag;
|
||||
}
|
||||
if( typeof this.config.data.valorisierung !== 'undefined' ) {
|
||||
this.valorisierung = this.config.data.valorisierung;
|
||||
}
|
||||
},
|
||||
removeGB: function() {
|
||||
this.$emit('removeGB', {id: this.id});
|
||||
this.$emit('removeGB', {id: this.config.guioptions.id});
|
||||
},
|
||||
getPayload: function() {
|
||||
return {
|
||||
gehaltstyp: this.gehaltstyp,
|
||||
betrag: this.betrag,
|
||||
gueltigkeit: this.$refs.gueltigkeit.getPayload(),
|
||||
valorisierung: this.valorisierung
|
||||
type: this.config.type,
|
||||
guioptions: this.config.guioptions,
|
||||
data: {
|
||||
gehaltstyp: this.gehaltstyp,
|
||||
betrag: this.betrag,
|
||||
gueltigkeit: this.$refs.gueltigkeit.getPayload(),
|
||||
valorisierung: this.valorisierung
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,50 +1,58 @@
|
||||
import gehaltsbestandteil from './gehaltsbestandteil.js';
|
||||
import gehaltsbestandteil from './gehaltsbestandteil';
|
||||
import presetable from '../../mixins/vbform/presetable.js';
|
||||
import uuid from '../../helpers/vbform/uuid.js';
|
||||
|
||||
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>
|
||||
<a class="fs-6 fw-light" 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>
|
||||
<gehaltsbestandteil v-bind:ref="config.guioptions.id" v-for="config in children"
|
||||
v-bind:config="config" :key="config.guioptions.id" @removeGB="removeGB"></gehaltsbestandteil>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
data: function() {
|
||||
return {
|
||||
payload: [],
|
||||
gbs: [],
|
||||
payload: []
|
||||
};
|
||||
},
|
||||
components: {
|
||||
'gehaltsbestandteil': gehaltsbestandteil,
|
||||
},
|
||||
mixins: [
|
||||
presetable
|
||||
],
|
||||
methods: {
|
||||
addGB: function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
var gbid = 'testgb' + (this.gbs.length + 1);
|
||||
this.gbs.push({
|
||||
id: gbid
|
||||
this.children.unshift({
|
||||
type: 'gehaltsbestandteil',
|
||||
guioptions: {
|
||||
id: uuid.get_uuid(),
|
||||
removeable: true
|
||||
}
|
||||
});
|
||||
},
|
||||
removeGB: function(payload) {
|
||||
var gbs = this.gbs.filter(function(gb) {
|
||||
return gb.id !== payload.id;
|
||||
var children = this.children.filter(function(gb) {
|
||||
return gb.guioptions.id !== payload.id;
|
||||
});
|
||||
this.gbs = gbs;
|
||||
this.children = children;
|
||||
},
|
||||
getPayload: function() {
|
||||
var gbs = this.gbs;
|
||||
var children = this.children;
|
||||
var that = this;
|
||||
|
||||
this.payload = [];
|
||||
gbs.forEach(function(gb) {
|
||||
that.payload.push(that.$refs[gb.id][0].getPayload());
|
||||
children.forEach(function(gb) {
|
||||
that.payload.push(that.$refs[gb.guioptions.id][0].getPayload());
|
||||
});
|
||||
|
||||
return this.payload;
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
import vertragsbestandteilhelper from './vertragsbestandteilhelper.js';
|
||||
import debug_viewer from './debug_viewer.js';
|
||||
|
||||
export default {
|
||||
template: `
|
||||
<div class="row g-2 py-2">
|
||||
<div class="col-2">
|
||||
|
||||
<div class="d-flex align-items-start">
|
||||
<div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
|
||||
<button v-for="(preset, idx) in presets" @click="selectpreset(idx)" class="nav-link"
|
||||
v-bind:class="isactive(idx)" data-bs-toggle="pill" type="button"
|
||||
:title="preset.guioptions.description">{{ preset.guioptions.label }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<vertragsbestandteilhelper v-bind:preset="selectedpreset" @vbhjsonready="process_json"></vertragsbestandteilhelper>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<debug_viewer v-bind:text="vbhjson"></debug_viewer>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
props:[
|
||||
'presets'
|
||||
],
|
||||
data: function() {
|
||||
return {
|
||||
selectedpresetidx: 0,
|
||||
selectedpreset: [],
|
||||
vbhjson: ''
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'vertragsbestandteilhelper': vertragsbestandteilhelper,
|
||||
'debug_viewer': debug_viewer
|
||||
},
|
||||
methods: {
|
||||
selectpreset: function(idx) {
|
||||
if( typeof this.presets[idx] !== 'undefined' ) {
|
||||
this.seletedpresetidx = idx;
|
||||
this.selectedpreset = this.presets[idx].vbs;
|
||||
}
|
||||
},
|
||||
isactive: function(idx) {
|
||||
return (idx === this.selectedpresetidx) ? 'active' : '';
|
||||
},
|
||||
process_json: function(payload) {
|
||||
this.vbhjson = payload;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
}
|
||||
}
|
||||
@@ -1,9 +1,46 @@
|
||||
import gehaltsbestandteilhelper from './gehaltsbestandteilhelper.js';
|
||||
import gueltigkeit from './gueltigkeit.js';
|
||||
import configurable from '../../mixins/vbform/configurable.js';
|
||||
|
||||
export default {
|
||||
props: [
|
||||
'id'
|
||||
template: `
|
||||
<div class="border-bottom py-2 mb-3">
|
||||
<div class="row g-2 py-2">
|
||||
<div class="col-7">
|
||||
<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 class="col-1">
|
||||
<button v-if="isremoveable" 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-11">
|
||||
<input v-model="titel" type="text" class="form-control form-control-sm" placeholder="Titel" aria-label="Titel">
|
||||
</div>
|
||||
<div class="col-1"> </div>
|
||||
</div>
|
||||
<div class="row g-2 py-2">
|
||||
<div class="col-11">
|
||||
<textarea v-model="freitext" rows="5" class="form-control form-control-sm" placeholder="Freitext" aria-label="Freitext"></textarea>
|
||||
</div>
|
||||
<div class="col-1"> </div>
|
||||
</div>
|
||||
<gehaltsbestandteilhelper ref="gbh" v-bind:preset="getgehaltsbestandteile"></gehaltsbestandteilhelper>
|
||||
</div>
|
||||
`,
|
||||
components: {
|
||||
'gehaltsbestandteilhelper': gehaltsbestandteilhelper,
|
||||
'gueltigkeit': gueltigkeit
|
||||
},
|
||||
mixins: [
|
||||
configurable
|
||||
],
|
||||
emits: {
|
||||
removeVB: null
|
||||
@@ -16,56 +53,40 @@ export default {
|
||||
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
|
||||
created: function() {
|
||||
this.setDataFromConfig();
|
||||
},
|
||||
methods: {
|
||||
setDataFromConfig: function() {
|
||||
if( typeof this.config.data === 'undefined' ) {
|
||||
return;
|
||||
}
|
||||
|
||||
if( typeof this.config.data.freitexttyp !== 'undefined' ) {
|
||||
this.freitexttyp = this.config.data.freitexttyp;
|
||||
}
|
||||
if( typeof this.config.data.titel !== 'undefined' ) {
|
||||
this.titel = this.config.data.titel;
|
||||
}
|
||||
if( typeof this.config.data.freitexttyp !== 'undefined' ) {
|
||||
this.freitext = this.config.data.freitext
|
||||
}
|
||||
},
|
||||
removeVB: function() {
|
||||
this.$emit('removeVB', {id: this.id});
|
||||
this.$emit('removeVB', {id: this.config.guioptions.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()
|
||||
type: 'vertragsbestandteilfreitext',
|
||||
guioptions: this.config.guioptions,
|
||||
data: {
|
||||
freitexttyp: this.freitexttyp,
|
||||
titel: this.titel,
|
||||
freitext: this.freitext,
|
||||
kuendigungsrelevant: this.kuendigungsrelevant,
|
||||
gueltigkeit: this.$refs.gueltigkeit.getPayload()
|
||||
},
|
||||
gbs: this.$refs.gbh.getPayload()
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,31 @@
|
||||
import gehaltsbestandteilhelper from './gehaltsbestandteilhelper.js'
|
||||
import gueltigkeit from './gueltigkeit.js';
|
||||
import configurable from '../../mixins/vbform/configurable.js';
|
||||
|
||||
export default {
|
||||
props: [
|
||||
'id'
|
||||
template: `
|
||||
<div class="border-bottom py-2 mb-3">
|
||||
<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 class="col-1">
|
||||
<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>
|
||||
</div>
|
||||
`,
|
||||
components: {
|
||||
'gehaltsbestandteilhelper': gehaltsbestandteilhelper,
|
||||
'gueltigkeit': gueltigkeit
|
||||
},
|
||||
mixins: [
|
||||
configurable
|
||||
],
|
||||
emits: {
|
||||
removeVB: null
|
||||
@@ -16,39 +38,32 @@ export default {
|
||||
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
|
||||
created: function() {
|
||||
this.setDataFromConfig();
|
||||
},
|
||||
methods: {
|
||||
setDataFromConfig: function() {
|
||||
if( typeof this.config.data === 'undefined' ) {
|
||||
return;
|
||||
}
|
||||
|
||||
if( typeof this.config.data.funktion !== 'undefined' ) {
|
||||
this.funktion = this.config.data.funktion;
|
||||
}
|
||||
},
|
||||
removeVB: function() {
|
||||
this.$emit('removeVB', {id: this.id});
|
||||
this.$emit('removeVB', {id: this.config.guioptions.id});
|
||||
},
|
||||
getPayload: function() {
|
||||
return {
|
||||
funktion: this.funktion,
|
||||
orget: this.orget,
|
||||
gueltigkeit: this.$refs.gueltigkeit.getPayload(),
|
||||
gehaltsbestandteile: this.$refs.gbh.getPayload()
|
||||
type: this.config.type,
|
||||
guioptions: this.config.guioptions,
|
||||
data: {
|
||||
funktion: this.funktion,
|
||||
orget: this.orget,
|
||||
gueltigkeit: this.$refs.gueltigkeit.getPayload()
|
||||
},
|
||||
gbs: this.$refs.gbh.getPayload()
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,32 @@
|
||||
import gehaltsbestandteilhelper from './gehaltsbestandteilhelper.js';
|
||||
import gueltigkeit from './gueltigkeit.js';
|
||||
import configurable from '../../mixins/vbform/configurable.js';
|
||||
|
||||
export default {
|
||||
props: [
|
||||
'id'
|
||||
template: `
|
||||
<div class="border-bottom py-2 mb-3">
|
||||
<div class="row g-2">
|
||||
<div class="col-3">
|
||||
<div class="input-group input-group-sm mb-3">
|
||||
<input v-model="stunden" type="text" class="form-control form-control-sm" placeholder="Stunden" aria-label="stunden">
|
||||
<span class="input-group-text">Std/Woche</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4"> </div>
|
||||
<gueltigkeit ref="gueltigkeit"></gueltigkeit>
|
||||
<div class="col-1">
|
||||
<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>
|
||||
</div>
|
||||
`,
|
||||
components: {
|
||||
'gehaltsbestandteilhelper': gehaltsbestandteilhelper,
|
||||
'gueltigkeit': gueltigkeit
|
||||
},
|
||||
mixins: [
|
||||
configurable
|
||||
],
|
||||
emits: {
|
||||
removeVB: null
|
||||
@@ -13,35 +36,31 @@ export default {
|
||||
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
|
||||
created: function() {
|
||||
this.setDataFromConfig();
|
||||
},
|
||||
methods: {
|
||||
setDataFromConfig: function() {
|
||||
if( typeof this.config.data === 'undefined' ) {
|
||||
return;
|
||||
}
|
||||
|
||||
if( typeof this.config.data.stunden !== 'undefined' ) {
|
||||
this.stunden = this.config.data.stunden;
|
||||
}
|
||||
},
|
||||
removeVB: function() {
|
||||
this.$emit('removeVB', {id: this.id});
|
||||
this.$emit('removeVB', {id: this.config.guioptions.id});
|
||||
},
|
||||
getPayload: function() {
|
||||
return {
|
||||
stunden: this.stunden,
|
||||
gueltigkeit: this.$refs.gueltigkeit.getPayload(),
|
||||
gehaltsbestandteile: this.$refs.gbh.getPayload()
|
||||
type: this.config.type,
|
||||
guioptions: this.config.guioptions,
|
||||
data: {
|
||||
stunden: this.stunden,
|
||||
gueltigkeit: this.$refs.gueltigkeit.getPayload()
|
||||
},
|
||||
gbs: this.$refs.gbh.getPayload()
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,28 +1,9 @@
|
||||
import gueltigkeit from './gueltigkeit.js';
|
||||
import configurable from '../../mixins/vbform/configurable.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="border-bottom py-2 mb-3">
|
||||
<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">
|
||||
@@ -42,23 +23,64 @@ export default {
|
||||
Home-Office
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-1 form-check form-control-sm"> </div>
|
||||
<gueltigkeit ref="gueltigkeit"></gueltigkeit>
|
||||
<div class="col-1">
|
||||
<button v-if="isremoveable" type="button" class="btn-close btn-sm p-2 float-end" @click="removeVB" aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
components: {
|
||||
'gueltigkeit': gueltigkeit
|
||||
},
|
||||
mixins: [
|
||||
configurable
|
||||
],
|
||||
emits: {
|
||||
removeVB: null
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
zeitaufzeichnung: '',
|
||||
azgrelevant: '',
|
||||
homeoffice: '',
|
||||
gueltig_ab: '',
|
||||
gueltig_bis: ''
|
||||
}
|
||||
},
|
||||
created: function() {
|
||||
this.setDataFromConfig();
|
||||
},
|
||||
methods: {
|
||||
setDataFromConfig: function() {
|
||||
if( typeof this.config.data === 'undefined' ) {
|
||||
return;
|
||||
}
|
||||
|
||||
if( typeof this.config.data.zeitaufzeichnung !== 'undefined' ) {
|
||||
this.zeitaufzeichnung = this.config.data.zeitaufzeichnung;
|
||||
}
|
||||
if( typeof this.config.data.azgrelevant !== 'undefined' ) {
|
||||
this.azgrelevant = this.config.data.azgrelevant;
|
||||
}
|
||||
if( typeof this.config.data.homeoffice !== 'undefined' ) {
|
||||
this.homeoffice = this.config.data.homeoffice
|
||||
}
|
||||
},
|
||||
removeVB: function() {
|
||||
this.$emit('removeVB', {id: this.id});
|
||||
this.$emit('removeVB', {id: this.config.guioptions.id});
|
||||
},
|
||||
getPayload: function() {
|
||||
return {
|
||||
zeitaufzeichnung: this.zeitaufzeichnung,
|
||||
azgrelevant: this.azgrelevant,
|
||||
homeoffice: this.homeoffice,
|
||||
gueltigkeit: this.$refs.gueltigkeit.getPayload(),
|
||||
type: this.config.type,
|
||||
guioptions: this.config.guioptions,
|
||||
data: {
|
||||
zeitaufzeichnung: this.zeitaufzeichnung,
|
||||
azgrelevant: this.azgrelevant,
|
||||
homeoffice: this.homeoffice,
|
||||
gueltigkeit: this.$refs.gueltigkeit.getPayload()
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,15 +2,16 @@ import vertragsbestandteilstunden from './vertragsbestandteil_stunden.js';
|
||||
import vertragsbestandteilzeitaufzeichnung from './vertragsbestandteil_zeitaufzeichnung.js';
|
||||
import vertragsbestandteilfunktion from './vertragsbestandteil_funktion.js';
|
||||
import vertragsbestandteilfreitext from './vertragsbestandteil_freitext.js';
|
||||
import presetable from '../../mixins/vbform/presetable.js';
|
||||
import uuid from '../../helpers/vbform/uuid.js';
|
||||
|
||||
export default {
|
||||
template: `
|
||||
<div class="row">
|
||||
<div class="col-7">
|
||||
<form>
|
||||
<div class="row">
|
||||
<div>
|
||||
<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">
|
||||
<option value="" selected disabled>Vertragsbestandteil wählen</option>
|
||||
<option value="vertragsbestandteilstunden">Vertragsbestandteil Stunden</option>
|
||||
<option value="vertragsbestandteilzeitaufzeichnung">Vertragsbestandteil Zeitaufzeichnung</option>
|
||||
<option value="vertragsbestandteilfunktion">Vertragsbestandteil Funktion</option>
|
||||
@@ -18,38 +19,23 @@ export default {
|
||||
</select>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button class="btn btn-primary btn-sm" @click="addVB">Vertragsbestandteil hinzufuegen</button>
|
||||
<button class="btn btn-primary btn-sm" @click="addVB" v-bind:disabled="(this.vertragsbestandteiltyp === '')">Vertragsbestandteil hinzufuegen</button>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button class="btn btn-secondary btn-sm" @click="getJSON">get JSON</button>
|
||||
<button class="btn btn-secondary btn-sm float-end" @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>
|
||||
<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>
|
||||
`,
|
||||
data: function() {
|
||||
return {
|
||||
vertragsbestandteiltyp: 'vertragsbestandteil',
|
||||
vertragsbestandteiltyp: '',
|
||||
payload: {
|
||||
type: 'formdata',
|
||||
vbs: []
|
||||
},
|
||||
vbs: [
|
||||
{
|
||||
type: 'vertragsbestandteilstunden',
|
||||
id: 'test1'
|
||||
},
|
||||
{
|
||||
type: 'vertragsbestandteilzeitaufzeichnung',
|
||||
id: 'test2'
|
||||
}
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
components: {
|
||||
@@ -58,41 +44,51 @@ export default {
|
||||
'vertragsbestandteilfunktion': vertragsbestandteilfunktion,
|
||||
'vertragsbestandteilfreitext': vertragsbestandteilfreitext,
|
||||
},
|
||||
mixins: [
|
||||
presetable
|
||||
],
|
||||
emits: {
|
||||
vbhjsonready: null
|
||||
},
|
||||
methods: {
|
||||
addVB: function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
var vbid = 'test' + (this.vbs.length + 1);
|
||||
this.vbs.push({
|
||||
if( this.vertragsbestandteiltyp === '') {
|
||||
return;
|
||||
}
|
||||
|
||||
this.children.unshift({
|
||||
type: this.vertragsbestandteiltyp,
|
||||
id: vbid
|
||||
guioptions: {
|
||||
id: uuid.get_uuid(),
|
||||
removeable: true
|
||||
}
|
||||
});
|
||||
},
|
||||
removeVB: function(payload) {
|
||||
var vbs = this.vbs.filter(function(vb) {
|
||||
return vb.id !== payload.id;
|
||||
var children = this.children.filter(function(vb) {
|
||||
return vb.guioptions.id !== payload.id;
|
||||
});
|
||||
this.vbs = vbs;
|
||||
this.children = children;
|
||||
},
|
||||
getJSON: function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
var vbs = this.vbs;
|
||||
var children = this.children;
|
||||
var that = this;
|
||||
|
||||
this.payload = {
|
||||
type: 'formdata',
|
||||
vbs: []
|
||||
};
|
||||
vbs.forEach(function(vb) {
|
||||
that.payload.vbs.push(that.$refs[vb.id][0].getPayload());
|
||||
children.forEach(function(vb) {
|
||||
that.payload.vbs.push(that.$refs[vb.guioptions.id][0].getPayload());
|
||||
});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
resjson: function() {
|
||||
return JSON.stringify(this.payload, null, 2);
|
||||
|
||||
this.$emit('vbhjsonready', JSON.stringify(this.payload, null, 2));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
export default {
|
||||
get_uuid: function() {
|
||||
var uuidValue = "", k, randomValue;
|
||||
for (k = 0; k < 32; k++) {
|
||||
randomValue = Math.random() * 16 | 0;
|
||||
|
||||
if (k == 8 || k == 12 || k == 16 || k == 20) {
|
||||
uuidValue += "-"
|
||||
}
|
||||
uuidValue += (k == 12 ? 4 : (k == 16 ? (randomValue & 3 | 8) : randomValue)).toString(16);
|
||||
}
|
||||
return uuidValue;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
export default {
|
||||
props: [
|
||||
'config'
|
||||
],
|
||||
computed: {
|
||||
isremoveable: function() {
|
||||
return (typeof this.config.guioptions.removeable === 'undefined')
|
||||
? false : this.config.guioptions.removeable;
|
||||
},
|
||||
getgehaltsbestandteile: function() {
|
||||
return (typeof this.config.gbs !== 'undefined') ? this.config.gbs : [];
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
export default {
|
||||
props: [
|
||||
'preset'
|
||||
],
|
||||
data: function() {
|
||||
return {
|
||||
children: []
|
||||
}
|
||||
},
|
||||
created: function() {
|
||||
this.children = JSON.parse(JSON.stringify(this.preset));
|
||||
},
|
||||
watch: {
|
||||
preset: function() {
|
||||
this.children = [];
|
||||
this.$nextTick(function() {
|
||||
this.children = JSON.parse(JSON.stringify(this.preset));
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user