Some fixes and additions

frontend/src/components/falukant/BranchSelection.vue

@@ -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>