Setup base for refactoring addPersons.vue

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AddEntities/_components/AddEntity.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <h2>Add {{ entityType }}</h2>
+
+    <label for="entityType">Select type:</label>
+    <select v-model="entityType">
+      <option value="person">Person</option>
+      <option value="thirdparty">Thirdparty</option>
+    </select>
+
+    <SearchEntity :entityType="entityType" @entity-selected="handleEntitySelection" />
+
+    <PersonDetails v-if="entityType === 'person' && selectedEntity" :person="selectedEntity" />
+    <ThirdpartyDetails v-if="entityType === 'thirdparty' && selectedEntity" :thirdparty="selectedEntity" />
+  </div>
+</template>
+
+<script>
+import { mapState, mapMutations } from 'vuex';
+import SearchEntity from '@/components/SearchEntity.vue';
+import PersonDetails from '@/components/PersonDetails.vue';
+import ThirdpartyDetails from '@/components/ThirdpartyDetails.vue';
+
+export default {
+  components: {
+    SearchEntity,
+    PersonDetails,
+    ThirdpartyDetails
+  },
+  data() {
+    return {
+      entityType: 'person'
+    };
+  },
+  computed: {
+    ...mapState('entities', ['selectedEntity'])
+  },
+  methods: {
+    ...mapMutations('entities', ['SET_SELECTED_ENTITY']),
+    handleEntitySelection(entity) {
+      this.SET_SELECTED_ENTITY(entity);
+    }
+  }
+};
+</script>
+
+<style scoped>
+select {
+  margin: 10px 0;
+  padding: 5px;
+}
+</style>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AddEntities/_components/EntityDetails/PersonDetails.vue

@@ -0,0 +1,25 @@
+<template>
+  <div v-if="person">
+    <h2>{{ person.name }}</h2>
+    <p><strong>Email:</strong> {{ person.email }}</p>
+    <p><strong>Phone:</strong> {{ person.phone }}</p>
+    <div v-if="person.household">
+      <h3>Household</h3>
+      <ul>
+        <li v-for="member in person.household" :key="member.id">{{ member.name }}</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+
+const store = useStore();
+const person = computed(() => store.state.selectedEntity);
+</script>
+
+<style scoped>
+h2 { margin-bottom: 8px; }
+</style>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AddEntities/_components/SearchEntity.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <label for="search">Search {{ entityType }}:</label>
+    <input
+        id="search"
+        v-model="query"
+        @input="debouncedSearch"
+        placeholder="Type to search..."
+    />
+
+    <ul v-if="results.length">
+      <li v-for="result in results" :key="result.id" @click="selectEntity(result)">
+        {{ result.name }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, computed } from 'vue';
+import { useStore } from 'vuex';
+import debounce from 'lodash.debounce';
+
+const props = defineProps({
+  entityType: {
+    type: String,
+    required: true,
+    validator: (value) => ['Person', 'Thirdparty'].includes(value),
+  },
+});
+
+const store = useStore();
+const query = ref('');
+const results = computed(() => store.state.entity.searchResults);
+
+const searchEntities = () => {
+  if (query.value.trim().length > 2) {
+    store.dispatch('entity/searchEntities', { type: props.entityType, query: query.value });
+  }
+};
+
+const debouncedSearch = debounce(searchEntities, 300);
+
+const selectEntity = (entity) => {
+  store.dispatch('entity/selectEntity', entity);
+};
+</script>
+
+<style scoped>
+ul {
+  list-style: none;
+  padding: 0;
+  margin-top: 5px;
+}
+li {
+  cursor: pointer;
+  padding: 5px;
+  background: #f5f5f5;
+  margin: 2px 0;
+}
+li:hover {
+  background: #e0e0e0;
+}
+</style>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AddEntities/index.js

@@ -0,0 +1,7 @@
+import { createApp } from 'vue';
+import store from './store/entities';
+import AddEntity from './components/AddEntity.vue';
+
+const app = createApp(AddEntity);
+app.use(store);
+app.mount('#add-entity-app');

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AddEntities/store/entities.js

@@ -0,0 +1,37 @@
+export default {
+    namespaced: true,
+    state: {
+        selectedEntity: null,
+        persons: [],
+        thirdparties: [],
+        accompanyingPeriodWorks: []
+    },
+    mutations: {
+        SET_SELECTED_ENTITY(state, entity) {
+            state.selectedEntity = entity;
+        },
+        SET_PERSONS(state, persons) {
+            state.persons = persons;
+        },
+        SET_THIRDPARTIES(state, thirdparties) {
+            state.thirdparties = thirdparties;
+        },
+        SET_ACCOMPANYING_PERIOD_WORKS(state, works) {
+            state.accompanyingPeriodWorks = works;
+        }
+    },
+    actions: {
+        async fetchPersons({ commit }, query) {
+            const response = await api.get(`/persons?search=${query}`);
+            commit('SET_PERSONS', response.data);
+        },
+        async fetchThirdparties({ commit }, query) {
+            const response = await api.get(`/thirdparties?search=${query}`);
+            commit('SET_THIRDPARTIES', response.data);
+        },
+        async fetchAccompanyingPeriodWorks({ commit }, personId) {
+            const response = await api.get(`/persons/${personId}/accompanying-period-works`);
+            commit('SET_ACCOMPANYING_PERIOD_WORKS', response.data);
+        }
+    }
+};