151 lines
3.4 KiB
Vue
151 lines
3.4 KiB
Vue
<template>
|
|
<div class="branch-selection">
|
|
<h3>{{ $t('falukant.branch.selection.title') }}</h3>
|
|
<div class="selection-row">
|
|
<div class="dropdown-wrapper">
|
|
<FormattedDropdown
|
|
:key="branchesKey"
|
|
:options="branches"
|
|
:columns="branchColumns"
|
|
v-model="localSelectedBranch"
|
|
:placeholder="$t('falukant.branch.selection.placeholder')"
|
|
@update:modelValue="updateSelectedBranch"
|
|
/>
|
|
</div>
|
|
<div v-if="selectedBranchWeather" class="weather-info">
|
|
<span class="weather-label">{{ $t('falukant.branch.selection.weather') }}:</span>
|
|
<span class="weather-value">{{ $t(`falukant.weather.${selectedBranchWeather}`) }}</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<button
|
|
@click="openCreateBranchDialog"
|
|
:disabled="blocked"
|
|
>
|
|
{{ $t('falukant.branch.actions.create') }}
|
|
</button>
|
|
<button
|
|
@click="$emit('upgradeBranch')"
|
|
:disabled="!localSelectedBranch || blocked"
|
|
>
|
|
{{ $t('falukant.branch.actions.upgrade') }}
|
|
</button>
|
|
<span v-if="blocked && blockedReason" class="blocked-hint">{{ blockedReason }}</span>
|
|
</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 },
|
|
blocked: { type: Boolean, default: false },
|
|
blockedReason: { type: String, default: '' },
|
|
},
|
|
data() {
|
|
return {
|
|
localSelectedBranch: this.selectedBranch,
|
|
branchColumns: [
|
|
{ field: "cityName", label: this.$t('falukant.branch.columns.city') },
|
|
{ field: "type", label: this.$t('falukant.branch.columns.type') },
|
|
],
|
|
};
|
|
},
|
|
computed: {
|
|
// Erzwingt ein Neu-Rendern des Dropdowns, wenn sich die Branch-Liste ändert
|
|
branchesKey() {
|
|
return this.branches.map(b => b.id).join('-');
|
|
},
|
|
selectedBranchWeather() {
|
|
return this.localSelectedBranch?.weather || null;
|
|
},
|
|
},
|
|
watch: {
|
|
selectedBranch(newVal) {
|
|
this.localSelectedBranch = newVal;
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
updateSelectedBranch(value) {
|
|
this.$emit('branchSelected', value);
|
|
},
|
|
|
|
openCreateBranchDialog() {
|
|
if (this.blocked) return;
|
|
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;
|
|
}
|
|
|
|
.selection-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.dropdown-wrapper {
|
|
min-width: 200px;
|
|
}
|
|
|
|
button {
|
|
margin: 5px;
|
|
}
|
|
|
|
.weather-info {
|
|
padding: 8px 12px;
|
|
background-color: #f0f0f0;
|
|
border-radius: 4px;
|
|
font-size: 0.9em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.weather-label {
|
|
font-weight: bold;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.weather-value {
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.blocked-hint {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
margin-left: 8px;
|
|
color: #8b2f23;
|
|
font-size: 0.88rem;
|
|
font-weight: 600;
|
|
}
|
|
</style>
|