torsten/yourpart3
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Implemented personal settings

Browse Source
This commit is contained in:
Torsten Schulz
2024-07-22 18:14:12 +02:00
parent cd0699f3fd
commit 89842ff6c5
34 changed files with 899 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
frontend/src/components/form/CheckboxWidget.vue Normal file
View File

@@ -0,0 +1,48 @@
<template>
<label>
<input type="checkbox" :checked="value" @change="updateValue($event.target.checked)" :title="$t(tooltipTr)" />
<span :style="{ width: width + 'em' }">{{ $t(labelTr) }}</span>
</label>
</template>
<script>
export default {
name: "CheckboxWidget",
props: {
labelTr: {
type: String,
required: true,
},
value: {
type: Boolean,
required: false,
default: false
},
tooltipTr: {
type: String,
required: true,
},
width: {
type: Number,
required: false,
default: 10
}
},
methods: {
updateValue(checked) {
this.$emit("input", checked);
}
}
};
</script>
<style scoped>
label {
display: flex;
align-items: center;
}
input[type="checkbox"] {
margin-right: 0.5em;
}
</style>

67
frontend/src/components/form/DateInputWidget.vue Normal file
View File

@@ -0,0 +1,67 @@
<template>
<label>
<span :style="{ width: width + 'em' }">{{ $t(labelTr) }}</span>
<input type="date" v-model="internalValue" :placeholder="$t(labelTr)" :title="$t(tooltipTr)"
@change="updateValue($event.target.value)" />
</label>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
name: "DateInputWidget",
props: {
labelTr: {
type: String,
required: true,
},
value: {
type: String,
required: false,
},
tooltipTr: {
type: String,
required: true,
},
width: {
type: Number,
required: false,
default: 10
}
},
data() {
return {
internalValue: this.value
}
},
watch: {
value(newValue) {
this.internalValue = newValue;
}
},
computed: {
...mapGetters(['language']),
},
methods: {
updateValue(value) {
this.internalValue = value;
this.$emit("input", value);
}
}
};
</script>
<style scoped>
label {
display: block;
}
label>span {
display: inline-block;
}
input {
margin-left: 0.5em;
}
</style>

67
frontend/src/components/form/FloatInputWidget.vue Normal file
View File

@@ -0,0 +1,67 @@
<template>
<label>
<span :style="{ width: width + 'em' }">{{ $t(labelTr) }}</span>
<input type="number" :value="formattedValue" :placeholder="$t(labelTr)" :title="$t(tooltipTr)"
@input="updateValue($event.target.value)" :step="step" />
<span v-if="postfix">{{ postfix }}</span>
</label>
</template>
<script>
export default {
name: "FloatInputWidget",
props: {
labelTr: {
type: String,
required: true,
},
value: {
type: Number,
required: false,
},
tooltipTr: {
type: String,
required: true,
},
width: {
type: Number,
required: false,
default: 10
},
decimals: {
type: Number,
required: false,
default: 2
},
postfix: {
type: String,
required: false,
default: ''
}
},
computed: {
formattedValue() {
return this.value != null ? this.value.toFixed(this.decimals) : '';
},
step() {
return Math.pow(10, -this.decimals);
}
},
methods: {
updateValue(value) {
this.$emit("input", parseFloat(value).toFixed(this.decimals));
}
}
};
</script>
<style scoped>
label {
display: flex;
align-items: center;
}
input {
margin-right: 0.5em;
}
</style>

45
frontend/src/components/form/InputNumberWidget.vue Normal file
View File

@@ -0,0 +1,45 @@
<template>
<label>
<span :style="{ width: width + 'em' }">{{ $t(labelTr) }}</span>
<input type="number" :value="value" :title="$t(tooltipTr)" :min="min" :max="max"
@input="updateValue($event.target.value)" />
</label>
</template>
<script>
export default {
name: "InputNumberWidget",
props: {
labelTr: {
type: String,
required: true,
},
value: {
type: Number,
required: false,
},
tooltipTr: {
type: String,
required: true,
},
width: {
type: Number,
required: false,
default: 10
},
min: {
type: Number,
required: false
},
max: {
type: Number,
required: false
}
},
methods: {
updateValue(value) {
this.$emit("input", parseFloat(value));
}
}
};
</script>

65
frontend/src/components/form/InputStringWidget.vue Normal file
View File

@@ -0,0 +1,65 @@
<template>
<label>
<span :style="{ width: width + 'em' }">{{ $t(labelTr) }}</span>
<input type="text" :value="value" :placeholder="$t(labelTr)" :title="$t(tooltipTr)"
@input="validateAndUpdate($event.target.value)" />
</label>
</template>
<script>
export default {
name: "InputStringWidget",
props: {
labelTr: {
type: String,
required: true,
},
value: {
type: String,
required: false,
},
tooltipTr: {
type: String,
required: true,
},
width: {
type: Number,
required: false,
default: 10
},
regex: {
type: String,
required: false,
default: null
}
},
methods: {
validateAndUpdate(value) {
if (this.regex) {
const pattern = new RegExp(this.regex);
if (pattern.test(value)) {
this.updateValue(value);
}
} else {
this.updateValue(value);
}
},
updateValue(value) {
this.$emit("input", value);
}
}
};
</script>
<style scoped>
label {
display: block;
}
label > span {
display: inline-block;
}
input {
margin-left: 0.5em;
}
</style>

69
frontend/src/components/form/SelectDropdownWidget.vue Normal file
View File

@@ -0,0 +1,69 @@
<template>
<label>
<span :style="{ width: width + 'em' }">{{ $t(labelTr) }}</span>
<select :title="$t(tooltipTr)" :value="value" @change="updateValue($event.target.value)">
<option v-if="allowNone" :value="noneValue">{{ $t('none') }}</option>
<option v-for="item in list" :key="item.value" :value="item.value">
{{ item.captionTr ? $t(item.captionTr) : item.caption }}
</option>
</select>
</label>
</template>
<script>
export default {
name: "SelectDropdownWidget",
props: {
labelTr: {
type: String,
required: true,
},
value: {
type: String,
required: false,
},
tooltipTr: {
type: String,
required: true,
},
width: {
type: Number,
required: false,
default: 10
},
list: {
type: Array,
required: true,
},
allowNone: {
type: Boolean,
required: false,
default: false
},
noneValue: {
type: String,
required: false,
default: ''
}
},
methods: {
updateValue(value) {
this.$emit("input", value);
}
}
};
</script>
<style scoped>
label {
display: block;
}
label>span {
display: inline-block;
}
select {
margin-left: 0.5em;
}
</style>