Start implementation of branches, new form element tabledropdown, model improvements

frontend/src/views/falukant/BranchView.vue

@@ -0,0 +1,130 @@
+<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>