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

Some fixes and additions

Browse Source
This commit is contained in:
Torsten Schulz
2025-07-09 14:28:35 +02:00
parent 5029be81e9
commit fceea5b7fb
32 changed files with 4373 additions and 1294 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
frontend/src/components/SimpleTabs.vue
View File

@@ -1,56 +1,63 @@
<template>
<div class="simple-tabs">
<button
v-for="tab in tabs"
:key="tab.value"
:class="['simple-tab', { active: internalValue === tab.value }]"
@click="$emit('update:modelValue', tab.value)"
>
<slot name="label" :tab="tab">
{{ $t(tab.label) }}
</slot>
</button>
</div>
</template>
<script>
export default {
name: 'SimpleTabs',
props: {
tabs: {
type: Array,
required: true,
},
modelValue: {
type: [String, Number],
required: true,
},
<div class="simple-tabs">
<button
v-for="tab in tabs"
:key="tab.value"
:class="['simple-tab', { active: internalValue === tab.value }]"
@click="selectTab(tab.value)"
>
<slot name="label" :tab="tab">
{{ $t(tab.label) }}
</slot>
</button>
</div>
</template>
<script>
export default {
name: 'SimpleTabs',
props: {
tabs: {
type: Array,
required: true,
},
computed: {
internalValue() {
return this.modelValue;
}
modelValue: {
type: [String, Number],
required: true,
},
},
computed: {
internalValue() {
return this.modelValue;
}
},
methods: {
selectTab(value) {
// 1) v-model aktualisieren
this.$emit('update:modelValue', value);
// 2) zusätzliches change-Event
this.$emit('change', value);
}
};
</script>
<style scoped>
.simple-tabs {
display: flex;
margin-top: 1rem;
}
.simple-tab {
padding: 0.5rem 1rem;
background: #fff;
border: none;
cursor: pointer;
transition: background 0.2s;
}
.simple-tab.active {
background: #F9A22C;
color: #000;
}
</style>
};
</script>
<style scoped>
.simple-tabs {
display: flex;
margin-top: 1rem;
}
.simple-tab {
padding: 0.5rem 1rem;
background: #fff;
border: none;
cursor: pointer;
transition: background 0.2s;
}
.simple-tab.active {
background: #F9A22C;
color: #000;
}
</style>

143
frontend/src/components/falukant/BranchSelection.vue
View File

@@ -1,64 +1,91 @@
<template>
<div class="branch-selection">
<h3>{{ $t('falukant.branch.selection.title') }}</h3>
<div>
<FormattedDropdown
:options="branches"
:columns="branchColumns"
v-model="localSelectedBranch"
:placeholder="$t('falukant.branch.selection.placeholder')"
@input="updateSelectedBranch"
/>
</div>
<div>
<button @click="$emit('createBranch')">{{ $t('falukant.branch.actions.create') }}</button>
<button @click="$emit('upgradeBranch')" :disabled="!localSelectedBranch">
{{ $t('falukant.branch.actions.upgrade') }}
</button>
</div>
<div class="branch-selection">
<h3>{{ $t('falukant.branch.selection.title') }}</h3>
<div>
<FormattedDropdown
:options="branches"
:columns="branchColumns"
v-model="localSelectedBranch"
:placeholder="$t('falukant.branch.selection.placeholder')"
@input="updateSelectedBranch"
/>
</div>
</template>
<script>
import FormattedDropdown from '@/components/form/FormattedDropdown.vue';
export default {
name: "BranchSelection",
components: { FormattedDropdown },
props: {
branches: { type: Array, required: true },
selectedBranch: { type: Object, default: null },
<div>
<button @click="openCreateBranchDialog">
{{ $t('falukant.branch.actions.create') }}
</button>
<button
@click="$emit('upgradeBranch')"
:disabled="!localSelectedBranch"
>
{{ $t('falukant.branch.actions.upgrade') }}
</button>
</div>
</div>
<!-- Dialog-Komponente -->
<CreateBranchDialog
ref="createBranchDialog"
:regions="availableRegions"
@create-branch="handleCreateBranch"
/>
</template>
<script>
import FormattedDropdown from '@/components/form/FormattedDropdown.vue';
import CreateBranchDialog from '@/dialogues/falukant/CreateBranchDialog.vue';
export default {
name: "BranchSelection",
components: {
FormattedDropdown,
CreateBranchDialog,
},
props: {
branches: { type: Array, required: true },
selectedBranch: { type: Object, default: null },
},
data() {
return {
localSelectedBranch: this.selectedBranch,
branchColumns: [
{ field: "cityName", label: this.$t('falukant.branch.columns.city') },
{ field: "type", label: this.$t('falukant.branch.columns.type') },
],
};
},
watch: {
selectedBranch(newVal) {
this.localSelectedBranch = newVal;
},
data() {
return {
localSelectedBranch: this.selectedBranch,
branchColumns: [
{ field: "cityName", label: this.$t('falukant.branch.columns.city') },
{ field: "type", label: this.$t('falukant.branch.columns.type') },
],
};
},
methods: {
updateSelectedBranch(value) {
this.$emit('branchSelected', value);
},
watch: {
selectedBranch(newVal) {
this.localSelectedBranch = newVal;
},
openCreateBranchDialog() {
this.$refs.createBranchDialog.open();
},
methods: {
updateSelectedBranch(value) {
this.$emit('branchSelected', value);
},
handleCreateBranch() {
// wird ausgelöst, sobald der Dialog onConfirm erfolgreich abschließt
this.$emit('createBranch');
},
};
</script>
<style scoped>
.branch-selection {
border: 1px solid #ccc;
margin: 10px 0;
border-radius: 4px;
padding: 10px;
}
button {
margin: 5px;
}
</style>
},
};
</script>
<style scoped>
.branch-selection {
border: 1px solid #ccc;
margin: 10px 0;
border-radius: 4px;
padding: 10px;
}
button {
margin: 5px;
}
</style>