From 25abc8dc4a11b525366dd5eac773091d78b12c8f Mon Sep 17 00:00:00 2001 From: Sebastian <13592751+MrSebastian@users.noreply.github.com> Date: Sun, 17 Mar 2024 01:43:10 +0100 Subject: [PATCH 1/4] add delete function to frontend client and service --- .../features/person/services/PersonService.ts | 4 ++++ .../services/api/PersonClientInterface.ts | 3 +++ .../localstorage/PersonClientLocalStorage.ts | 22 +++++++++++++++---- .../api/impl/rest/PersonRestClient.ts | 8 +++++++ 4 files changed, 33 insertions(+), 4 deletions(-) diff --git a/frontend/frontend/src/features/person/services/PersonService.ts b/frontend/frontend/src/features/person/services/PersonService.ts index 8306ccf7..28a201bc 100644 --- a/frontend/frontend/src/features/person/services/PersonService.ts +++ b/frontend/frontend/src/features/person/services/PersonService.ts @@ -27,4 +27,8 @@ export default class PersonService { ) ); } + + deletePerson(personId: string): Promise { + return this.personClient.deletePerson(personId); + } } diff --git a/frontend/frontend/src/features/person/services/api/PersonClientInterface.ts b/frontend/frontend/src/features/person/services/api/PersonClientInterface.ts index 8701280d..4c4d0c8e 100644 --- a/frontend/frontend/src/features/person/services/api/PersonClientInterface.ts +++ b/frontend/frontend/src/features/person/services/api/PersonClientInterface.ts @@ -3,5 +3,8 @@ import type PersonDTO from "@/features/person/services/api/model/PersonDTO"; export interface PersonClientInterface { getPersonen(): Promise; + createPerson(person: PersonCreateDTO): Promise; + + deletePerson(id: string): Promise; } diff --git a/frontend/frontend/src/features/person/services/api/impl/localstorage/PersonClientLocalStorage.ts b/frontend/frontend/src/features/person/services/api/impl/localstorage/PersonClientLocalStorage.ts index db00ca78..41133f00 100644 --- a/frontend/frontend/src/features/person/services/api/impl/localstorage/PersonClientLocalStorage.ts +++ b/frontend/frontend/src/features/person/services/api/impl/localstorage/PersonClientLocalStorage.ts @@ -27,6 +27,19 @@ export default class PersonClientLocalStorage implements PersonClientInterface { ); } + deletePerson(id: string): Promise { + const personsOfLocalStorage = this.getOrCreatePersonsOfLocalStorage(); + const indexOfPersonToDelete = personsOfLocalStorage.findIndex( + (person) => person.id === id + ); + if (indexOfPersonToDelete !== -1) { + personsOfLocalStorage.splice(indexOfPersonToDelete); + this.saveAllPersons(personsOfLocalStorage); + } + + return Promise.resolve(); + } + private getOrCreatePersonsOfLocalStorage(): Array { let localStoragePersonsAsString = localStorage.getItem( this.KEY_PERSON_ARRAY @@ -46,9 +59,10 @@ export default class PersonClientLocalStorage implements PersonClientInterface { private savePerson(person: Person): void { const localPersons = this.getOrCreatePersonsOfLocalStorage(); localPersons.push(person); - localStorage.setItem( - this.KEY_PERSON_ARRAY, - JSON.stringify(localPersons) - ); + this.saveAllPersons(localPersons); + } + + private saveAllPersons(persons: Person[]): void { + localStorage.setItem(this.KEY_PERSON_ARRAY, JSON.stringify(persons)); } } diff --git a/frontend/frontend/src/features/person/services/api/impl/rest/PersonRestClient.ts b/frontend/frontend/src/features/person/services/api/impl/rest/PersonRestClient.ts index 77783f15..75a6bb0c 100644 --- a/frontend/frontend/src/features/person/services/api/impl/rest/PersonRestClient.ts +++ b/frontend/frontend/src/features/person/services/api/impl/rest/PersonRestClient.ts @@ -9,6 +9,7 @@ export default class PersonRestClient implements PersonClientInterface { private readonly PATH_PERSON = "/person"; private readonly fetchUtils = new FetchUtils(); + createPerson(person: PersonCreateDTO): Promise { return this.fetchUtils.doFetch( `${API_BACKEND_BASE}${this.PATH_PERSON}`, @@ -22,4 +23,11 @@ export default class PersonRestClient implements PersonClientInterface { FetchUtils.getGETConfig() ); } + + deletePerson(id: string): Promise { + return this.fetchUtils.doFetch( + `${API_BACKEND_BASE}${this.PATH_PERSON}/${id}`, + FetchUtils.getDeletConfig() + ); + } } From 6b17504c7ea934fc3515b4ddf0de7febc9d26413 Mon Sep 17 00:00:00 2001 From: Sebastian <13592751+MrSebastian@users.noreply.github.com> Date: Sun, 17 Mar 2024 01:43:28 +0100 Subject: [PATCH 2/4] add deletion function to components --- .../person/components/BasePersonList.vue | 8 ++++++++ .../person/components/BasePersonListItem.vue | 15 +++++++++++++++ frontend/frontend/src/views/PersonView.vue | 16 ++++++++++++---- 3 files changed, 35 insertions(+), 4 deletions(-) diff --git a/frontend/frontend/src/features/person/components/BasePersonList.vue b/frontend/frontend/src/features/person/components/BasePersonList.vue index 3be3c791..fe97e3be 100644 --- a/frontend/frontend/src/features/person/components/BasePersonList.vue +++ b/frontend/frontend/src/features/person/components/BasePersonList.vue @@ -4,6 +4,7 @@ v-for="(person, index) in props.persons" :key="index" :person="person" + @delete="handleDeleteRequest" /> @@ -18,6 +19,13 @@ interface IProps { } const props = defineProps(); +const emit = defineEmits<{ + (e: "delete", value: string): void; +}>(); + +function handleDeleteRequest(personIdToDelete: string) { + emit("delete", personIdToDelete); +} diff --git a/frontend/frontend/src/features/person/components/BasePersonListItem.vue b/frontend/frontend/src/features/person/components/BasePersonListItem.vue index 1c623391..914e7f41 100644 --- a/frontend/frontend/src/features/person/components/BasePersonListItem.vue +++ b/frontend/frontend/src/features/person/components/BasePersonListItem.vue @@ -4,6 +4,12 @@ :subtitle="props.person.id" > {{ props.person.email }} + + @@ -12,15 +18,24 @@ import type PersonPersisted from "@/features/person/types/PersonPersisted"; import { computed } from "vue"; +import BaseDeleteIconButton from "@/components/common/buttons/icon/BaseDeleteIconButton.vue"; + interface IProps { person: PersonPersisted; } const props = defineProps(); +const emit = defineEmits<{ + (e: "delete", value: string): void; +}>(); const fullname = computed( () => `${props.person.firstname ?? ""} ${props.person.lastname ?? ""}` ); + +function handleDeleteClicked() { + emit("delete", props.person.id); +} diff --git a/frontend/frontend/src/views/PersonView.vue b/frontend/frontend/src/views/PersonView.vue index 0b5111a5..fb7fc9d8 100644 --- a/frontend/frontend/src/views/PersonView.vue +++ b/frontend/frontend/src/views/PersonView.vue @@ -1,8 +1,8 @@