91 lines
2.0 KiB
Vue
91 lines
2.0 KiB
Vue
<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')"
|
|
@update:modelValue="updateSelectedBranch"
|
|
/>
|
|
</div>
|
|
<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;
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
updateSelectedBranch(value) {
|
|
this.$emit('branchSelected', value);
|
|
},
|
|
|
|
openCreateBranchDialog() {
|
|
this.$refs.createBranchDialog.open();
|
|
},
|
|
|
|
handleCreateBranch() {
|
|
this.$emit('createBranch');
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.branch-selection {
|
|
border: 1px solid #ccc;
|
|
margin: 10px 0;
|
|
border-radius: 4px;
|
|
padding: 10px;
|
|
}
|
|
|
|
button {
|
|
margin: 5px;
|
|
}
|
|
</style>
|