mirror of
https://github.com/FH-Complete/FHC-Core.git
synced 2026-06-01 12:19:28 +00:00
refactored to allow grouping elements in tabs, while maintaining json structure
This commit is contained in:
Harald Bamberger
+268
-276
@@ -6,315 +6,307 @@ export default [
|
||||
guioptions: {
|
||||
id: 'leer',
|
||||
label: 'Leer',
|
||||
description: 'keine vordefinierten Vertrags- und Gehaltsbestandteile. Alles kann/muss manuell angelegt werden.'
|
||||
description: 'Leere Vorlage. Alles muss manuell definiert werden.'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'dv',
|
||||
guioptions: {
|
||||
},
|
||||
children: []
|
||||
},
|
||||
{
|
||||
type: 'vertragsbestandteillist',
|
||||
guioptions: {
|
||||
title: 'Arbeitszeit',
|
||||
vertragsbestandteiltyp: 'vertragsbestandteilstunden'
|
||||
},
|
||||
children: []
|
||||
},
|
||||
{
|
||||
type: 'vertragsbestandteillist',
|
||||
guioptions: {
|
||||
title: 'Zeitaufzeichnung',
|
||||
vertragsbestandteiltyp: 'vertragsbestandteilzeitaufzeichnung'
|
||||
},
|
||||
children: []
|
||||
},
|
||||
{
|
||||
type: 'vertragsbestandteillist',
|
||||
guioptions: {
|
||||
title: 'Kündigungsfrist',
|
||||
vertragsbestandteiltyp: 'vertragsbestandteilkuendigungsfrist'
|
||||
},
|
||||
children: []
|
||||
},
|
||||
{
|
||||
type: 'vertragsbestandteillist',
|
||||
guioptions: {
|
||||
title: 'Funktionen',
|
||||
vertragsbestandteiltyp: 'vertragsbestandteilfunktion'
|
||||
},
|
||||
children: []
|
||||
},
|
||||
{
|
||||
type: 'vertragsbestandteillist',
|
||||
guioptions: {
|
||||
title: 'Sonstiges',
|
||||
vertragsbestandteiltyp: 'vertragsbestandteilfreitext'
|
||||
},
|
||||
children: []
|
||||
}
|
||||
],
|
||||
data: {
|
||||
dienstverhaeltnisid: null
|
||||
},
|
||||
vbs: []
|
||||
vbs: {
|
||||
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'preset',
|
||||
guioptions: {
|
||||
id: 'neustd',
|
||||
label: 'Neuanlage Standard DV',
|
||||
description: 'Standard Dienstvertrag Vorlage'
|
||||
id: 'echterdv',
|
||||
label: 'Echter DV',
|
||||
description: 'Standard Vorlage für echte Dienstverträge'
|
||||
},
|
||||
data: {
|
||||
dienstverhaeltnisid: null,
|
||||
unternehmen: 'fhtw',
|
||||
vertragsart_kurzbz: 'echterDV'
|
||||
},
|
||||
vbs: [
|
||||
children: [
|
||||
{
|
||||
type: 'tabs',
|
||||
guioptions: {
|
||||
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'tab',
|
||||
guioptions: {
|
||||
title: 'Allgemein',
|
||||
id: 'allgemein'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'dv',
|
||||
guioptions: {
|
||||
},
|
||||
children: []
|
||||
},
|
||||
{
|
||||
type: 'vertragsbestandteillist',
|
||||
guioptions: {
|
||||
title: 'Kündigungsfrist',
|
||||
vertragsbestandteiltyp: 'vertragsbestandteilkuendigungsfrist'
|
||||
},
|
||||
children: []
|
||||
},
|
||||
{
|
||||
type: 'vertragsbestandteillist',
|
||||
guioptions: {
|
||||
title: 'Befristung',
|
||||
vertragsbestandteiltyp: 'vertragsbestandteilfreitext'
|
||||
},
|
||||
children: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'tab',
|
||||
guioptions: {
|
||||
title: 'Arbeitszeit & Basisgehalt',
|
||||
id: 'arbeitszeit'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'vertragsbestandteillist',
|
||||
guioptions: {
|
||||
title: 'Arbeitszeit',
|
||||
vertragsbestandteiltyp: 'vertragsbestandteilstunden',
|
||||
errors: [
|
||||
'test1',
|
||||
'test2'
|
||||
],
|
||||
infos: []
|
||||
},
|
||||
children: [
|
||||
uuid.get_uuidbyname('test1')
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'vertragsbestandteillist',
|
||||
guioptions: {
|
||||
title: 'Zeitaufzeichnung',
|
||||
vertragsbestandteiltyp: 'vertragsbestandteilzeitaufzeichnung',
|
||||
errors: [],
|
||||
infos: []
|
||||
},
|
||||
children: [
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'tab',
|
||||
guioptions: {
|
||||
title: 'Funktionen',
|
||||
id: 'funktionen'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'vertragsbestandteillist',
|
||||
guioptions: {
|
||||
title: 'Funktion',
|
||||
vertragsbestandteiltyp: 'vertragsbestandteilfunktion',
|
||||
errors: [],
|
||||
infos: []
|
||||
},
|
||||
children: [
|
||||
uuid.get_uuidbyname('test2')
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'tab',
|
||||
guioptions: {
|
||||
title: 'Zusatzvereinbarungen',
|
||||
id: 'zusatzvereinbarungen'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'vertragsbestandteillist',
|
||||
guioptions: {
|
||||
title: 'Zusatzvereinbarungen',
|
||||
vertragsbestandteiltyp: 'vertragsbestandteilfreitext'
|
||||
},
|
||||
children: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'tab',
|
||||
guioptions: {
|
||||
title: 'Sonstiges',
|
||||
id: 'sonstiges'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'vertragsbestandteillist',
|
||||
guioptions: {
|
||||
title: 'Kündigungsfrist',
|
||||
vertragsbestandteiltyp: 'vertragsbestandteilkuendigungsfrist',
|
||||
errors: [],
|
||||
infos: []
|
||||
},
|
||||
children: [
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
data: {
|
||||
dienstverhaeltnisid: null
|
||||
},
|
||||
vbs: {
|
||||
[uuid.get_uuidbyname('test1')]: {
|
||||
type: 'vertragsbestandteilstunden',
|
||||
guioptions: {
|
||||
id: uuid.get_uuid(),
|
||||
removable: false
|
||||
id: uuid.get_uuidbyname('test1'),
|
||||
infos: [
|
||||
'test info 1',
|
||||
'test info 2'
|
||||
],
|
||||
errors: [
|
||||
'test error 1',
|
||||
'test error 2'
|
||||
]
|
||||
},
|
||||
data: {
|
||||
stunden: '38,5'
|
||||
},
|
||||
gbs: [
|
||||
{
|
||||
type: 'gehaltsbestandteil',
|
||||
guioptions: {
|
||||
id: uuid.get_uuid(),
|
||||
removable: false
|
||||
infos: [
|
||||
'test info 1',
|
||||
'test info 2'
|
||||
],
|
||||
errors: [
|
||||
'test error 1',
|
||||
'test error 2'
|
||||
]
|
||||
},
|
||||
data: {
|
||||
gehaltstyp: 'basis',
|
||||
valorisierung: true
|
||||
}
|
||||
data: {}
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'vertragsbestandteilzeitaufzeichnung',
|
||||
guioptions: {
|
||||
id: uuid.get_uuid(),
|
||||
removable: false
|
||||
},
|
||||
data: {
|
||||
zeitaufzeichnung: true,
|
||||
azgrelevant: true,
|
||||
homeoffice: true
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'vertragsbestandteilkuendigungsfrist',
|
||||
guioptions: {
|
||||
id: uuid.get_uuid(),
|
||||
removable: false
|
||||
},
|
||||
data: {
|
||||
arbeitgeber_frist: 6,
|
||||
arbeitnehmer_frist: 4
|
||||
}
|
||||
},
|
||||
{
|
||||
[uuid.get_uuidbyname('test2')]: {
|
||||
type: 'vertragsbestandteilfunktion',
|
||||
guioptions: {
|
||||
id: uuid.get_uuid(),
|
||||
removable: false,
|
||||
canhavegehaltsbestandteile: false,
|
||||
nobottomborder: true,
|
||||
nobottommargin: true,
|
||||
disabled: [
|
||||
'funktion'
|
||||
]
|
||||
id: uuid.get_uuidbyname('test2')
|
||||
},
|
||||
data: {
|
||||
funktion: 'Standardkostenstelle'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'vertragsbestandteilfunktion',
|
||||
guioptions: {
|
||||
id: uuid.get_uuid(),
|
||||
removable: false,
|
||||
canhavegehaltsbestandteile: false,
|
||||
nobottomborder: true,
|
||||
nobottommargin: true,
|
||||
disabled: [
|
||||
'funktion'
|
||||
]
|
||||
funktion: 'Leitung',
|
||||
oe_kurzbz: 'core'
|
||||
},
|
||||
data: {
|
||||
funktion: 'Diszpl-Zuordnung'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'vertragsbestandteilfunktion',
|
||||
guioptions: {
|
||||
id: uuid.get_uuid(),
|
||||
removable: false,
|
||||
canhavegehaltsbestandteile: false,
|
||||
disabled: [
|
||||
'funktion'
|
||||
]
|
||||
},
|
||||
data: {
|
||||
funktion: 'Fachliche-Zuordnung'
|
||||
}
|
||||
gbs: []
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'preset',
|
||||
guioptions: {
|
||||
id: 'allin',
|
||||
label: 'AllIn',
|
||||
description: 'AllIn Vertrag'
|
||||
id: 'freierdv',
|
||||
label: 'Freier DV',
|
||||
description: 'freier Dienstvertrag'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'tabs',
|
||||
guioptions: {
|
||||
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'tab',
|
||||
guioptions: {
|
||||
title: 'Allgemein',
|
||||
id: 'allgemein'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'dv',
|
||||
guioptions: {
|
||||
},
|
||||
children: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'tab',
|
||||
guioptions: {
|
||||
title: 'Zusatzvereinbarungen',
|
||||
id: 'zusatzvereinbarungen'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'vertragsbestandteillist',
|
||||
guioptions: {
|
||||
title: 'Zusatzvereinbarungen',
|
||||
vertragsbestandteiltyp: 'vertragsbestandteilfreitext'
|
||||
},
|
||||
children: []
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
data: {
|
||||
dienstverhaeltnisid: null
|
||||
},
|
||||
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"
|
||||
},
|
||||
"data": {
|
||||
"dienstverhaeltnisid": 135,
|
||||
"gueltigkeit": {
|
||||
"guioptions": {
|
||||
"sharedstatemode": "set"
|
||||
},
|
||||
"data": {
|
||||
"gueltig_ab": "01.03.2023",
|
||||
"gueltig_bis": ""
|
||||
}
|
||||
}
|
||||
},
|
||||
"vbs": [
|
||||
{
|
||||
"type": "vertragsbestandteilstunden",
|
||||
"guioptions": {
|
||||
"id": "44c4d3bc-ee1f-4edf-8b2a-82736e09d287",
|
||||
"removable": false
|
||||
},
|
||||
"data": {
|
||||
"stunden": "38,5",
|
||||
"gueltigkeit": {
|
||||
"guioptions": {
|
||||
"sharedstatemode": "reflect"
|
||||
},
|
||||
"data": {
|
||||
"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": {
|
||||
"guioptions": {
|
||||
"sharedstatemode": "reflect"
|
||||
},
|
||||
"data": {
|
||||
"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": {
|
||||
"guioptions": {
|
||||
"sharedstatemode": "reflect"
|
||||
},
|
||||
"data": {
|
||||
"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": {
|
||||
"guioptions": {
|
||||
"sharedstatemode": "reflect"
|
||||
},
|
||||
"data": {
|
||||
"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": {
|
||||
"guioptions": {
|
||||
"sharedstatemode": "reflect"
|
||||
},
|
||||
"data": {
|
||||
"gueltig_ab": "01.03.2023",
|
||||
"gueltig_bis": ""
|
||||
}
|
||||
},
|
||||
"valorisierung": false
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
vbs: {
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
@@ -1,25 +1,80 @@
|
||||
import presets_chooser from '../../components/vbform/presets_chooser.js';
|
||||
import vertragsbestandteillist from '../../components/vbform/vertragsbestandteillist.js';
|
||||
import presets from './presets.js';
|
||||
import debug_viewer from '../../components/vbform/debug_viewer.js';
|
||||
import vbformhelper from '../../components/vbform/vbformhelper.js';
|
||||
import store from '../../components/vbform/vbsharedstate.js';
|
||||
import presets_chooser from './../../components/vbform/presets_chooser.js';
|
||||
|
||||
Vue.createApp({
|
||||
template: `
|
||||
<div class="container-fluid">
|
||||
<h1>{{ title }}</h1>
|
||||
<presets_chooser v-bind:presets="presets"></presets_chooser>
|
||||
|
||||
<presets_chooser :presets="presets" @presetselected="presetselected"></presets_chooser>
|
||||
|
||||
<div class="row g-2 py-2">
|
||||
|
||||
<div class="col-8">
|
||||
<vbformhelper ref="vbformhelper" :preset="preset" @vbhjsonready="processJSON"></vbformhelper>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<debug_viewer v-bind:text="vbhjson"></debug_viewer>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
`,
|
||||
data: function() {
|
||||
return {
|
||||
vbhjson: presets,
|
||||
"title": "Vertragsbestandteil Form",
|
||||
presets: presets
|
||||
presets: presets,
|
||||
preset: presets[1],
|
||||
store: store,
|
||||
config: [],
|
||||
configstunden: [
|
||||
{
|
||||
type: 'vertragsbestandteilstunden',
|
||||
guioptions: {
|
||||
removeable: false,
|
||||
},
|
||||
gbs: [
|
||||
{
|
||||
type: 'gehaltsbestandteil',
|
||||
guioptions: {
|
||||
removeable: false
|
||||
},
|
||||
data: {
|
||||
type: 'basis'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
components: {
|
||||
'presets_chooser': presets_chooser
|
||||
'presets_chooser': presets_chooser,
|
||||
'vertragsbestandteillist': vertragsbestandteillist,
|
||||
'debug_viewer': debug_viewer,
|
||||
'vbformhelper': vbformhelper
|
||||
},
|
||||
created: function() {
|
||||
var vbs = JSON.parse(JSON.stringify(this.preset.vbs));
|
||||
for( var key in vbs ) {
|
||||
this.store.addVB(key, vbs[key]);
|
||||
}
|
||||
this.store.setDV(JSON.parse(JSON.stringify(this.preset.data)));
|
||||
},
|
||||
methods: {
|
||||
presetselected: function(preset) {
|
||||
this.preset = preset;
|
||||
},
|
||||
processJSON: function(payload) {
|
||||
this.vbhjson = payload;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
}
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
import presetable from '../../mixins/vbform/presetable.js';
|
||||
import dvneuanlage from './dvneuanlage.js';
|
||||
import dvaenderung from './dvaenderung.js';
|
||||
import store from './vbsharedstate.js';
|
||||
|
||||
export default {
|
||||
template:`
|
||||
<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>
|
||||
`,
|
||||
components: {
|
||||
'dvneuanlage': dvneuanlage,
|
||||
'dvaenderung': dvaenderung
|
||||
},
|
||||
mixins: [
|
||||
presetable
|
||||
],
|
||||
data: function() {
|
||||
return {
|
||||
store: store,
|
||||
data: {}
|
||||
}
|
||||
},
|
||||
created: function() {
|
||||
this.data = this.store.getDV();
|
||||
},
|
||||
methods: {
|
||||
getPayload: function() {
|
||||
this.store.setDV(this.$refs.formheader.getPayload());
|
||||
return JSON.parse(JSON.stringify(this.preset));
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isaenderung: function() {
|
||||
var ret = ((this.data?.dienstverhaeltnisid !== undefined)
|
||||
&& !isNaN(parseInt(this.data.dienstverhaeltnisid))
|
||||
&& parseInt(this.data.dienstverhaeltnisid) > 0);
|
||||
return ret;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
export default {
|
||||
template: `
|
||||
<div v-if="errors.length > 0" class="row g-2">
|
||||
<div class="col-12">
|
||||
<div class="alert py-1 alert-danger" v-for="(error, idx) in errors" :key="idx">{{ error }}</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
props: [
|
||||
'errors'
|
||||
]
|
||||
}
|
||||
@@ -1,8 +1,12 @@
|
||||
import gueltigkeit from './gueltigkeit.js';
|
||||
import configurable from '../../mixins/vbform/configurable.js';
|
||||
import errors from './errors.js';
|
||||
import infos from './infos.js';
|
||||
|
||||
export default {
|
||||
template: `
|
||||
<infos :infos="(config?.guioptions?.infos !== undefined) ? config?.guioptions?.infos : []"></infos>
|
||||
<errors :errors="(config?.guioptions?.errors !== undefined) ? config?.guioptions?.errors : []"></errors>
|
||||
<div class="row g-2 py-2">
|
||||
<div class="col-1">
|
||||
|
||||
@@ -43,11 +47,16 @@ export default {
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'gueltigkeit': gueltigkeit
|
||||
'gueltigkeit': gueltigkeit,
|
||||
'infos': infos,
|
||||
'errors': errors
|
||||
},
|
||||
mixins: [
|
||||
configurable
|
||||
],
|
||||
emits: [
|
||||
'removeGB'
|
||||
],
|
||||
created: function() {
|
||||
this.setDataFromConfig();
|
||||
},
|
||||
|
||||
@@ -4,7 +4,7 @@ import uuid from '../../helpers/vbform/uuid.js';
|
||||
|
||||
export default {
|
||||
template: `
|
||||
<gehaltsbestandteil v-bind:ref="config.guioptions.id" v-for="config in children"
|
||||
<gehaltsbestandteil ref="parts" v-for="config in children"
|
||||
v-bind:config="config" :key="config.guioptions.id" @removeGB="removeGB"></gehaltsbestandteil>
|
||||
<div class="row">
|
||||
<div class="col-1">
|
||||
@@ -46,15 +46,13 @@ export default {
|
||||
this.children = children;
|
||||
},
|
||||
getPayload: function() {
|
||||
var children = this.children;
|
||||
var that = this;
|
||||
var payload = [];
|
||||
|
||||
this.payload = [];
|
||||
children.forEach(function(gb) {
|
||||
that.payload.push(that.$refs[gb.guioptions.id][0].getPayload());
|
||||
});
|
||||
for( var i in this.$refs.parts ) {
|
||||
payload.push(this.$refs.parts[i].getPayload());
|
||||
}
|
||||
|
||||
return this.payload;
|
||||
return payload;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
export default {
|
||||
template: `
|
||||
<div v-if="infos.length > 0" class="row g-2">
|
||||
<div class="col-12">
|
||||
<div class="alert py-1 alert-info" v-for="(error, idx) in infos" :key="idx">{{ error }}</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
props: [
|
||||
'infos'
|
||||
]
|
||||
}
|
||||
@@ -1,28 +1,18 @@
|
||||
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="selectedpresetvbs" v-bind:data="selectedpresetdata" @vbhjsonready="process_json"></vertragsbestandteilhelper>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<debug_viewer v-bind:text="vbhjson"></debug_viewer>
|
||||
|
||||
<select v-model="selectedpresetidx" @change="selectpreset">
|
||||
<option v-for="(preset, idx) in presets" :key="idx"
|
||||
:value="idx"
|
||||
:selected="idx === selectedpresetidx">
|
||||
{{ preset.guioptions.label }}
|
||||
</option>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
<div class="col-8"> </div>
|
||||
</div>
|
||||
`,
|
||||
props:[
|
||||
@@ -30,31 +20,16 @@ export default {
|
||||
],
|
||||
data: function() {
|
||||
return {
|
||||
selectedpresetidx: 0,
|
||||
selectedpresetvbs: [],
|
||||
selectedpresetdata: {},
|
||||
vbhjson: ''
|
||||
selectedpresetidx: 1
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'vertragsbestandteilhelper': vertragsbestandteilhelper,
|
||||
'debug_viewer': debug_viewer
|
||||
},
|
||||
emits: [
|
||||
"presetselected"
|
||||
],
|
||||
methods: {
|
||||
selectpreset: function(idx) {
|
||||
if( typeof this.presets[idx] !== 'undefined' ) {
|
||||
this.seletedpresetidx = idx;
|
||||
this.selectedpresetvbs = this.presets[idx].vbs;
|
||||
this.selectedpresetdata = this.presets[idx].data;
|
||||
}
|
||||
},
|
||||
isactive: function(idx) {
|
||||
return (idx === this.selectedpresetidx) ? 'active' : '';
|
||||
},
|
||||
process_json: function(payload) {
|
||||
this.vbhjson = payload;
|
||||
selectpreset: function() {
|
||||
var preset = this.presets[this.selectedpresetidx];
|
||||
this.$emit("presetselected", preset);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
export default {
|
||||
props: [
|
||||
'preset'
|
||||
],
|
||||
template: `
|
||||
<div v-for="(id, label) in preset.guioptions.tabs" :key="id" class="sections">
|
||||
<div>{{label}}</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import presetable from '../../mixins/vbform/presetable.js';
|
||||
import vertragsbestandteillist from '../../components/vbform/vertragsbestandteillist.js';
|
||||
import dv from './dv.js';
|
||||
|
||||
export default {
|
||||
template: `
|
||||
<div class="tab-pane fade" :class="(activetab === preset.guioptions.id) ? 'active show' : ''"
|
||||
:id="'v-pills-' + preset.guioptions.id"
|
||||
role="tabpanel"
|
||||
:aria-labelledby="'v-pills-' + preset.guioptions.id + '-tab'"
|
||||
tabindex="0">
|
||||
<component ref="parts" v-for="(child, idx) in children" :is="child.type" :key="idx" :preset="child"></component>
|
||||
</div>
|
||||
`,
|
||||
props: [
|
||||
'activetab'
|
||||
],
|
||||
data: function() {
|
||||
return {
|
||||
payload: {
|
||||
type: 'tab',
|
||||
guioptions: {
|
||||
title: '',
|
||||
id: ''
|
||||
},
|
||||
children: []
|
||||
}
|
||||
};
|
||||
},
|
||||
components: {
|
||||
"dv": dv,
|
||||
"vertragsbestandteillist": vertragsbestandteillist
|
||||
},
|
||||
mixins: [
|
||||
presetable
|
||||
],
|
||||
methods: {
|
||||
getPayload: function() {
|
||||
var children = [];
|
||||
for( var i in this.$refs.parts ) {
|
||||
children.push(this.$refs.parts[i].getPayload());
|
||||
}
|
||||
var payload = {
|
||||
type: 'tab',
|
||||
guioptions: JSON.parse(JSON.stringify(this.preset.guioptions)),
|
||||
children: children
|
||||
};
|
||||
return payload;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
import presetable from '../../mixins/vbform/presetable.js';
|
||||
import tab from './tab.js';
|
||||
|
||||
export default {
|
||||
template: `
|
||||
<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="(child, idx) in children"
|
||||
:key="idx"
|
||||
class="nav-link"
|
||||
:class="(this.activetab === child.guioptions.id) ? 'active' : ''"
|
||||
:id="'v-pills-' + child.guioptions.id + 'tab'"
|
||||
data-bs-toggle="pill"
|
||||
:data-bs-target="'#v-pills-' + child.guioptions.id"
|
||||
type="button"
|
||||
role="tab"
|
||||
:aria-controls="'v-pills-' + child.guioptions.id"
|
||||
:aria-selected="(this.activetab === child.guioptions.id) ? 'true' : 'false'">
|
||||
{{ child.guioptions.title }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="tab-content w-100" id="v-pills-tabContent">
|
||||
<component ref="parts" v-for="(child, idx) in children" :is="child.type" :key="idx" :preset="child" :activetab="activetab"></component>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
components: {
|
||||
"tab": tab
|
||||
},
|
||||
mixins: [
|
||||
presetable
|
||||
],
|
||||
created: function() {
|
||||
if( this.children.length > 0 ) {
|
||||
this.activetab = this.children[0].guioptions.id;
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
activetab: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getPayload: function() {
|
||||
var children = [];
|
||||
for( var i in this.$refs.parts ) {
|
||||
children.push(this.$refs.parts[i].getPayload());
|
||||
}
|
||||
var payload = {
|
||||
"type": "tabs",
|
||||
"guioptions": JSON.parse(JSON.stringify(this.preset.guioptions)),
|
||||
"children": children
|
||||
}
|
||||
return payload;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
import presetable from '../../mixins/vbform/presetable.js';
|
||||
import tabs from './tabs.js';
|
||||
import vertragsbestandteillist from './vertragsbestandteillist.js';
|
||||
import dv from './dv.js';
|
||||
import store from './vbsharedstate.js';
|
||||
|
||||
export default {
|
||||
template: `
|
||||
<div class="vbformhelper">
|
||||
<div class="border-bottom py-2 mb-3">
|
||||
<div class="row g-2 py-2">
|
||||
<div class="col-11"> </div>
|
||||
<div class="col-1">
|
||||
<button class="btn btn-secondary btn-sm float-end" @click="getJSON">get JSON</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<component ref="parts" v-for="(child, idx) in children" :key="idx" :is="child.type" :preset="child"></component>
|
||||
</div>
|
||||
`,
|
||||
components: {
|
||||
"tabs": tabs,
|
||||
"dv": dv,
|
||||
"vertragsbestandteillist": vertragsbestandteillist
|
||||
},
|
||||
mixins: [
|
||||
presetable
|
||||
],
|
||||
data: function() {
|
||||
return {
|
||||
store: store
|
||||
};
|
||||
},
|
||||
emits: [
|
||||
"vbhjsonready"
|
||||
],
|
||||
methods: {
|
||||
getJSON: function() {
|
||||
var children = [];
|
||||
for ( var i in this.$refs.parts) {
|
||||
children.push(this.$refs.parts[i].getPayload());
|
||||
}
|
||||
var payload = {
|
||||
"type": "formdata",
|
||||
"children": children,
|
||||
"data": this.store.getDVPayload(),
|
||||
"vbs": this.store.getVBsPayload()
|
||||
};
|
||||
this.$emit('vbhjsonready', JSON.stringify(payload, null, 2));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -2,5 +2,32 @@ export default Vue.reactive({
|
||||
gueltigkeit: {
|
||||
gueltig_ab: '',
|
||||
gueltig_bis: ''
|
||||
},
|
||||
dv: {
|
||||
|
||||
},
|
||||
vbs: {
|
||||
|
||||
},
|
||||
getDV: function() {
|
||||
return this.dv;
|
||||
},
|
||||
setDV: function(dv) {
|
||||
this.dv = JSON.parse(JSON.stringify(dv));
|
||||
},
|
||||
getDVPayload: function() {
|
||||
return JSON.parse(JSON.stringify(this.dv));
|
||||
},
|
||||
addVB: function(uuid, vb) {
|
||||
this.vbs[uuid] = vb;
|
||||
},
|
||||
removeVB: function(uuid) {
|
||||
delete this.vbs[uuid];
|
||||
},
|
||||
getVB: function(uuid) {
|
||||
return this.vbs[uuid];
|
||||
},
|
||||
getVBsPayload: function() {
|
||||
return JSON.parse(JSON.stringify(this.vbs));
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,10 +1,14 @@
|
||||
import gehaltsbestandteilhelper from './gehaltsbestandteilhelper.js';
|
||||
import gueltigkeit from './gueltigkeit.js';
|
||||
import configurable from '../../mixins/vbform/configurable.js';
|
||||
import errors from './errors.js';
|
||||
import infos from './infos.js';
|
||||
|
||||
export default {
|
||||
template: `
|
||||
<div class="border-bottom py-2 mb-3">
|
||||
<infos :infos="(config?.guioptions?.infos !== undefined) ? config?.guioptions?.infos : []"></infos>
|
||||
<errors :errors="(config?.guioptions?.errors !== undefined) ? config?.guioptions?.errors : []"></errors>
|
||||
<div class="row g-2">
|
||||
<div class="col-3">
|
||||
<div class="input-group input-group-sm mb-3">
|
||||
@@ -23,7 +27,9 @@ export default {
|
||||
`,
|
||||
components: {
|
||||
'gehaltsbestandteilhelper': gehaltsbestandteilhelper,
|
||||
'gueltigkeit': gueltigkeit
|
||||
'gueltigkeit': gueltigkeit,
|
||||
'infos': infos,
|
||||
'errors': errors
|
||||
},
|
||||
mixins: [
|
||||
configurable
|
||||
|
||||
@@ -0,0 +1,112 @@
|
||||
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 vertragsbestandteilkuendigungsfrist from './vertragsbestandteil_kuendigungsfrist.js';
|
||||
import presetable from '../../mixins/vbform/presetable.js';
|
||||
import uuid from '../../helpers/vbform/uuid.js';
|
||||
import store from './vbsharedstate.js';
|
||||
|
||||
export default {
|
||||
template: `
|
||||
<div>
|
||||
<div class="row g-2 py-2 border-bottom mb-3">
|
||||
<div class="col">
|
||||
<a class="fs-6 fw-light" href="javascript:void(0);" @click="addVB"><i class="fas fa-plus-square"></i></a>
|
||||
|
||||
<em>{{ title }}</em>
|
||||
</div>
|
||||
</div>
|
||||
<component ref="parts" v-bind:is="config.type" v-for="config in getChildren()"
|
||||
v-bind:config="config" :key="config.guioptions.id" @removeVB="removeVB"></component>
|
||||
</div>
|
||||
`,
|
||||
props: [
|
||||
'data'
|
||||
],
|
||||
data: function() {
|
||||
return {
|
||||
title: '',
|
||||
vertragsbestandteiltyp: '',
|
||||
store: store,
|
||||
payload: {
|
||||
type: 'vertragsbestandteillist',
|
||||
guioptions: {
|
||||
title: '',
|
||||
vertragsbestandteiltyp: '',
|
||||
},
|
||||
children: []
|
||||
}
|
||||
};
|
||||
},
|
||||
components: {
|
||||
'vertragsbestandteilstunden': vertragsbestandteilstunden,
|
||||
'vertragsbestandteilzeitaufzeichnung': vertragsbestandteilzeitaufzeichnung,
|
||||
'vertragsbestandteilfunktion': vertragsbestandteilfunktion,
|
||||
'vertragsbestandteilfreitext': vertragsbestandteilfreitext,
|
||||
'vertragsbestandteilkuendigungsfrist': vertragsbestandteilkuendigungsfrist
|
||||
},
|
||||
mixins: [
|
||||
presetable
|
||||
],
|
||||
created: function() {
|
||||
this.title = this.preset.guioptions.title;
|
||||
this.vertragsbestandteiltyp = this.preset.guioptions.vertragsbestandteiltyp
|
||||
},
|
||||
methods: {
|
||||
addVB: function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
if( this.vertragsbestandteiltyp === '') {
|
||||
return;
|
||||
}
|
||||
|
||||
var vbid = uuid.get_uuid();
|
||||
this.store.addVB(vbid, {
|
||||
type: this.vertragsbestandteiltyp,
|
||||
guioptions: {
|
||||
id: vbid,
|
||||
removeable: true
|
||||
}
|
||||
});
|
||||
this.children.push(vbid);
|
||||
},
|
||||
removeVB: function(payload) {
|
||||
this.store.removeVB(payload.id);
|
||||
var children = this.children.filter(function(vbid) {
|
||||
return vbid !== payload.id;
|
||||
});
|
||||
this.children = children;
|
||||
},
|
||||
getPayload: function() {
|
||||
this.payload = {
|
||||
type: 'vertragsbestandteillist',
|
||||
guioptions: {
|
||||
title: this.title,
|
||||
vertragsbestandteiltyp: this.vertragsbestandteiltyp
|
||||
},
|
||||
children: JSON.parse(JSON.stringify(this.children))
|
||||
};
|
||||
this.updateVBsInStore();
|
||||
return this.payload;
|
||||
},
|
||||
updateVBsInStore: function() {
|
||||
for( var id in this.$refs.parts) {
|
||||
var payload = this.$refs.parts[id].getPayload();
|
||||
this.store.addVB(this.$refs.parts[id].config.guioptions.id, payload);
|
||||
}
|
||||
},
|
||||
getChildren: function() {
|
||||
var vbs = [];
|
||||
var that = this;
|
||||
|
||||
for( var i in this.children ) {
|
||||
var uuid = this.children[i];
|
||||
vbs.push(that.store.getVB(uuid));
|
||||
}
|
||||
|
||||
return vbs;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
export default {
|
||||
_uuidsbyname: {},
|
||||
get_uuid: function() {
|
||||
var uuidValue = "", k, randomValue;
|
||||
for (k = 0; k < 32; k++) {
|
||||
@@ -10,5 +11,11 @@ export default {
|
||||
uuidValue += (k == 12 ? 4 : (k == 16 ? (randomValue & 3 | 8) : randomValue)).toString(16);
|
||||
}
|
||||
return uuidValue;
|
||||
},
|
||||
get_uuidbyname: function(name) {
|
||||
if( this._uuidsbyname[name] === undefined ) {
|
||||
this._uuidsbyname[name] = this.get_uuid();
|
||||
}
|
||||
return this._uuidsbyname[name];
|
||||
}
|
||||
}
|
||||
|
||||
@@ -20,7 +20,8 @@ export default {
|
||||
? true : this.config.guioptions.canhavegehaltsbestandteile;
|
||||
},
|
||||
getgehaltsbestandteile: function() {
|
||||
return (this.config?.gbs !== undefined) ? this.config.gbs : [];
|
||||
var gbs = (this.config?.gbs !== undefined) ? this.config.gbs : [];
|
||||
return { children: gbs };
|
||||
},
|
||||
getgueltigkeit: function() {
|
||||
if( this.config?.gueltigkeit !== undefined ) {
|
||||
|
||||
@@ -8,13 +8,13 @@ export default {
|
||||
}
|
||||
},
|
||||
created: function() {
|
||||
this.children = JSON.parse(JSON.stringify(this.preset));
|
||||
this.children = JSON.parse(JSON.stringify(this.preset.children));
|
||||
},
|
||||
watch: {
|
||||
preset: function() {
|
||||
this.children = [];
|
||||
this.$nextTick(function() {
|
||||
this.children = JSON.parse(JSON.stringify(this.preset));
|
||||
this.children = JSON.parse(JSON.stringify(this.preset.children));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user