131 lines
4.3 KiB
Vue
131 lines
4.3 KiB
Vue
<template>
|
|
<div>
|
|
<StatusBar />
|
|
<h2>{{ $t('falukant.branch.title') }}</h2>
|
|
|
|
<!-- Branch Selection Section -->
|
|
<div class="branch-selection">
|
|
<h3>{{ $t('falukant.branch.selection.title') }}</h3>
|
|
<div>
|
|
<FormattedDropdown :options="branches" :columns="branchColumns" v-model="selectedBranch"
|
|
:placeholder="$t('falukant.branch.selection.placeholder')" />
|
|
</div>
|
|
<div>
|
|
<button @click="createBranch">{{ $t('falukant.branch.actions.create') }}</button>
|
|
<button @click="upgradeBranch" :disabled="!selectedBranch">
|
|
{{ $t('falukant.branch.actions.upgrade') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Director Info Section -->
|
|
<div class="director-info">
|
|
<h3>{{ $t('falukant.branch.director.title') }}</h3>
|
|
<p v-if="selectedBranch">
|
|
{{ $t('falukant.branch.director.info', { branchName: selectedBranch.cityName }) }}
|
|
</p>
|
|
<p v-else>{{ $t('falukant.branch.director.noSelection') }}</p>
|
|
</div>
|
|
|
|
<!-- Sale Section -->
|
|
<div class="sale-section">
|
|
<h3>{{ $t('falukant.branch.sale.title') }}</h3>
|
|
<p>{{ $t('falukant.branch.sale.info') }}</p>
|
|
</div>
|
|
|
|
<!-- Production Section -->
|
|
<div class="production-section">
|
|
<h3>{{ $t('falukant.branch.production.title') }}</h3>
|
|
<p>{{ $t('falukant.branch.production.info') }}</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import StatusBar from '@/components/falukant/StatusBar.vue';
|
|
import FormattedDropdown from '@/components/form/FormattedDropdown.vue';
|
|
import apiClient from '@/utils/axios.js';
|
|
|
|
export default {
|
|
name: "BranchView",
|
|
components: {
|
|
StatusBar,
|
|
FormattedDropdown,
|
|
},
|
|
data() {
|
|
return {
|
|
selectedBranch: null,
|
|
branches: [],
|
|
branchColumns: [
|
|
{ field: "cityName", label: this.$t('falukant.branch.columns.city') },
|
|
{ field: "type", label: this.$t('falukant.branch.columns.type') },
|
|
],
|
|
};
|
|
},
|
|
async mounted() {
|
|
await this.loadBranches();
|
|
const branchId = this.$route.params.branchId;
|
|
console.log('route params:', this.$route.params, branchId);
|
|
if (branchId) {
|
|
console.log('branch selected');
|
|
this.selectedBranch = this.branches.find(branch => branch.id === parseInt(branchId)) || null;
|
|
} else {
|
|
console.log('main branch selected');
|
|
this.selectMainBranch();
|
|
}
|
|
},
|
|
methods: {
|
|
async loadBranches() {
|
|
try {
|
|
const branchesResult = await apiClient.get('/api/falukant/branches');
|
|
this.branches = branchesResult.data.map((branch) => ({
|
|
id: branch.id,
|
|
cityName: branch.region.name,
|
|
type: this.$t(`falukant.branch.types.${branch.branchType.labelTr}`),
|
|
isMainBranch: branch.isMainBranch,
|
|
}));
|
|
// Wenn keine selectedBranch gesetzt ist, versuche die Main Branch zu wählen
|
|
if (!this.selectedBranch) {
|
|
this.selectMainBranch();
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading branches:', error);
|
|
}
|
|
},
|
|
selectMainBranch() {
|
|
const main = this.branches.find(b => b.isMainBranch) || null;
|
|
if (main !== this.selectedBranch) {
|
|
this.selectedBranch = main;
|
|
console.log("Main branch selected:", this.selectedBranch);
|
|
}
|
|
},
|
|
createBranch() {
|
|
alert(this.$t('falukant.branch.actions.createAlert'));
|
|
},
|
|
upgradeBranch() {
|
|
if (this.selectedBranch) {
|
|
alert(
|
|
this.$t('falukant.branch.actions.upgradeAlert', { branchId: this.selectedBranch.id })
|
|
);
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.branch-selection,
|
|
.director-info,
|
|
.sale-section,
|
|
.production-section {
|
|
border: 1px solid #ccc;
|
|
margin: 10px 0;
|
|
border-radius: 4px;
|
|
padding: 10px;
|
|
}
|
|
|
|
button {
|
|
margin: 5px;
|
|
}
|
|
</style>
|