ISI-1798-Begrenzung-Ergebnismenge-Bauvorhaben-Auswahl

frontend/src/components/abfragen/baugenehmigungsverfahren/AllgemeineInformationenBaugenehmigungsverfahrenComponent.vue

@@ -3,7 +3,7 @@
     <v-row justify="center">
       <v-col
         cols="12"
-        md="4"
+        md="3"
       >
         <v-text-field
           id="aktenzeichen_pro_lbk_field"
@@ -18,7 +18,7 @@
       </v-col>
       <v-col
         cols="12"
-        md="4"
+        md="3"
       >
         <v-text-field
           id="bebauungsplannummer_field"
@@ -34,21 +34,43 @@
       <v-col
         cols="12"
         md="4"
+        class="d-flex align-center"
       >
-        <v-autocomplete
-          id="bauvorhaben_dropdown"
-          ref="bauvorhabenDropdown"
-          v-model="abfrage.bauvorhaben"
-          :disabled="!(isEditableByAbfrageerstellung || isEditableBySachbearbeitung)"
-          variant="underlined"
-          :items="bauvorhaben"
-          item-title="nameVorhaben"
-          item-value="id"
-          label="Bauvorhaben"
-          clearable
-          @update:focused="!$event || fetchBauvorhaben()"
-          @update:model-value="formChanged"
-        />
+        <span
+          v-if="isBauverfahrenEditable"
+          class="v-label theme--light"
+        >
+          {{ nameBauvorhaben }}
+        </span>
+        <span
+          v-else
+          class="v-label text-grey-lighten-1"
+        >
+          {{ nameBauvorhaben }}
+        </span>
+      </v-col>
+      <v-col
+        cols="12"
+        md="2"
+      >
+        <div class="d-flex align-center ml-8">
+          <v-btn
+            id="open_auswahl_bauvorhaben"
+            class="mt-3"
+            variant="plain"
+            :icon="isBauverfahrenEditable ? 'mdi-pencil-outline' : 'mdi-eye-outline'"
+            :disabled="!isBauverfahrenEditable"
+            @click="isAuswahlBauvorhabenDialogOpen = true"
+          />
+          <v-btn
+            id="bauvorhaben_loeschen"
+            variant="plain"
+            class="mt-3"
+            icon="mdi-delete"
+            :disabled="!isBauverfahrenDeleteable"
+            @click="deleteBauvorhaben"
+          />
+        </div>
       </v-col>
     </v-row>
     <v-row justify="center">
@@ -68,7 +90,7 @@
           :rules="[pflichtfeld, notUnspecified]"
           @update:model-value="formChanged"
         >
-          <template #label> Stand des Verfahrens <span class="text-secondary">*</span> </template>
+          <template #label> Stand des Verfahrens <span class="text-secondary">*</span></template>
         </v-select>
       </v-col>
       <v-col
@@ -91,39 +113,72 @@
       </v-col>
     </v-row>
   </field-group-card>
+  <auswahl-bauvorhaben-dialog
+    id="auswahl_bauvorhaben_dialog"
+    v-model="isAuswahlBauvorhabenDialogOpen"
+    @bauvorhaben-uebernehmen="bauvorhabenUebernehmen"
+    @bauvorhaben-auswahl-abbrechen="isAuswahlBauvorhabenDialogOpen = false"
+  />
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
+import { ref, watch, computed } from "vue";
 import FieldGroupCard from "@/components/common/FieldGroupCard.vue";
 import BaugenehmigungsverfahrenModel from "@/types/model/abfrage/BaugenehmigungsverfahrenModel";
-import {
-  type BauvorhabenSearchResultDto,
-  BaugenehmigungsverfahrenDtoStandVerfahrenEnum,
-  SearchQueryAndSortingDtoSortByEnum,
-  SearchQueryAndSortingDtoSortOrderEnum,
-} from "@/api/api-client/isi-backend";
+import { BaugenehmigungsverfahrenDtoStandVerfahrenEnum, BauvorhabenDto } from "@/api/api-client/isi-backend";
 import { pflichtfeld, notUnspecified } from "@/utils/FieldValidationRules";
 import { useLookupStore } from "@/stores/LookupStore";
 import { useSaveLeave } from "@/composables/SaveLeave";
-import { useSearchApi } from "@/composables/requests/search/SearchApi";
+
+const { getBauvorhabenById } = useBauvorhabenApi();
 import { useAbfrageSecurity } from "@/composables/security/AbfrageSecurity";
+import _ from "lodash";
+import AuswahlBauvorhabenDialog from "@/components/common/AuswahlBauvorhabenDialog.vue";
+import { useBauvorhabenApi } from "@/composables/requests/BauvorhabenApi";
+import { createBauvorhabenDto } from "@/utils/Factories";
 
 interface Props {
   isEditable?: boolean;
 }
 
 const { formChanged } = useSaveLeave();
 const lookupStore = useLookupStore();
-const { searchForEntities } = useSearchApi();
 const { isEditableByAbfrageerstellung, isEditableBySachbearbeitung } = useAbfrageSecurity();
 const abfrage = defineModel<BaugenehmigungsverfahrenModel>({ required: true });
 const standVerfahrenFreieEingabeVisible = ref(false);
-const bauvorhaben = ref<BauvorhabenSearchResultDto[]>([]);
+const bauvorhaben = ref<BauvorhabenDto>(createBauvorhabenDto());
+const isAuswahlBauvorhabenDialogOpen = ref(false);
+const isBauverfahrenEditable = computed(() => {
+  return isEditableByAbfrageerstellung.value || isEditableBySachbearbeitung.value;
+});
+const isBauverfahrenDeleteable = computed(() => {
+  return isBauverfahrenEditable && !_.isEmpty(abfrage.value.bauvorhaben);
+});
+const nameBauvorhaben = computed(() => {
+  return !_.isEmpty(bauvorhaben.value.nameVorhaben) ? bauvorhaben.value.nameVorhaben : "Kein Bauvorhaben zugeordnet";
+});
 
-withDefaults(defineProps<Props>(), { isEditable: false });
+watch(
+  () => abfrage.value.bauvorhaben,
+  async (value) => {
+    await getBauvorhaben();
+  },
+  { immediate: true },
+);
+
+async function getBauvorhaben(): Promise<void> {
+  if (
+    !_.isNil(abfrage.value.bauvorhaben) &&
+    !_.isEmpty(abfrage.value.bauvorhaben) &&
+    abfrage.value.bauvorhaben != bauvorhaben.value.id
+  ) {
+    bauvorhaben.value = await getBauvorhabenById(abfrage.value.bauvorhaben);
+  } else {
+    bauvorhaben.value = createBauvorhabenDto();
+  }
+}
 
-onMounted(() => fetchBauvorhaben());
+withDefaults(defineProps<Props>(), { isEditable: false });
 
 watch(
   () => abfrage.value.standVerfahren,
@@ -138,30 +193,14 @@ watch(
   { immediate: true },
 );
 
-/**
- * Holt alle Bauvorhaben vom Backend.
- */
-async function fetchBauvorhaben(): Promise<void> {
-  const searchQueryAndSortingDto = {
-    searchQuery: "",
-    selectBauleitplanverfahren: false,
-    selectBaugenehmigungsverfahren: false,
-    selectWeiteresVerfahren: false,
-    selectBauvorhaben: true,
-    selectGrundschule: false,
-    selectGsNachmittagBetreuung: false,
-    selectHausFuerKinder: false,
-    selectKindergarten: false,
-    selectKinderkrippe: false,
-    selectMittelschule: false,
-    page: undefined,
-    pageSize: undefined,
-    sortBy: SearchQueryAndSortingDtoSortByEnum.LastModifiedDateTime,
-    sortOrder: SearchQueryAndSortingDtoSortOrderEnum.Desc,
-  };
-  const searchResults = await searchForEntities(searchQueryAndSortingDto);
-  bauvorhaben.value = searchResults.searchResults?.map(
-    (searchResults) => searchResults as BauvorhabenSearchResultDto,
-  ) as Array<BauvorhabenSearchResultDto>;
+function bauvorhabenUebernehmen(idBauvorhaben: string): void {
+  abfrage.value.bauvorhaben = idBauvorhaben;
+  isAuswahlBauvorhabenDialogOpen.value = false;
+  formChanged();
+}
+
+function deleteBauvorhaben(): void {
+  abfrage.value.bauvorhaben = undefined;
+  formChanged();
 }
 </script>