added possibility to crud pastries and flavours

frontend/src/core/use-cases/bakers/add-baker.use-case.ts

@@ -1,22 +1,20 @@
+import type { Pastry } from '@/core/models/pastry'
 import type RemoteUseCaseProxy from '../remote-use-case-proxy'
 import type {ApiResponse, BakerInput} from '../remote-use-case-proxy'
 
 export default class AddBakerUseCase {
     constructor(private remoteUseCaseProxy: RemoteUseCaseProxy) {
     }
 
-    public async execute(bakerName: string, quota: string): Promise<ApiResponse<any, any>> {
+    public async execute(bakerName: string, quota: string, flavours: string[], pastries: Pastry[]): Promise<ApiResponse<any, any>> {
         const resp = await this.remoteUseCaseProxy.execute<BakerInput, Record<string, never>, string>(
             'bakers',
             'post',
             {
                 name: bakerName,
                 quota: quota,
-                flavours: ['Kotlin'],
-                pastries: [{
-                    id: '1',
-                    name: 'BakeTime'
-                }]
+                flavours: flavours,
+                pastries: pastries
             }
         )
 

frontend/src/pages/bakers/BakersListView.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="listView">
     <div class="flex flex-col gap-2 grow">
-      <div v-for="baker of bakers" :key="baker.id" @click="selectBaker(baker)" class="flex flex-row gap-2">
+      <div v-for="baker of bakers" :key="baker.id" @click="selectBaker(baker)" class="flex flex-row gap-2" :class="{'bg-sbb-red border border-transparent text-white px-4 py-3 rounded-full': selectedBaker?.id === baker.id}">
         <div>{{ baker.name }}</div>
         <div>{{ baker.quota }}</div>
         <div>{{ baker.flavours?.join(' | ') || 'No flavours available' }}</div>
@@ -10,23 +10,28 @@
         </div>
       </div>
       <div class="flex flex-row gap-5 mt-5">
-      <input v-model="newName" placeholder="New Baker Name" class="text-black" />
-      <input v-model="newQuota" placeholder="New Baker Quota" class="text-black" />
-      <PrimaryButton v-if="selectedBaker == null" :disabled="!validate(newName, newQuota)" @click="saveBaker">Create</PrimaryButton>
-      <div v-else>
-        <PrimaryButton :disabled="newName.length <= 0" @click="updateBaker">Update</PrimaryButton>
-        <PrimaryButton @click="deleteBaker">Delete</PrimaryButton>
+        <input v-model="newName" placeholder="New Baker Name" class="text-black" />
+        <input v-model="newQuota" placeholder="New Baker Quota" class="text-black" />
+        <PastriesCheckboxesView v-model:selectedPastries="newPastries" />
+        <FlavoursListView v-model:selectedFlavours="newFlavours"/>
+        <PrimaryButton v-if="selectedBaker == null" :disabled="!validate(newName, newQuota)" @click="saveBaker">Create</PrimaryButton>
+        <div v-else>
+          <PrimaryButton :disabled="newName.length <= 0" @click="updateBaker">Update</PrimaryButton>
+          <PrimaryButton @click="deleteBaker">Delete</PrimaryButton>
+        </div>
       </div>
     </div>
-    </div>
   </div>
 </template>
 <script lang="ts" setup>
 import { type Ref, ref } from 'vue'
 import { AppContainerKey } from '@/core/container/app-container'
 import { injectStrict } from '@/core/container/inject'
 import PrimaryButton from '@/shared/components/PrimaryButton.vue'
+import PastriesCheckboxesView from '@/pages/bakers/PastriesCheckboxesView.vue'
+import FlavoursListView from '@/pages/bakers/FlavoursListView.vue'
 import type { Baker } from '../../core/models/baker'
+import type { Pastry } from '../../core/models/pastry'
 import { SavingState, useSaving } from '../../shared/functions/use-saving'
 import { ResponseState } from '@/core/use-cases/remote-use-case-proxy'
 
@@ -37,6 +42,8 @@ const { savingState, save } = useSaving<void>()
 
 const newName = ref('')
 const newQuota = ref('1.0')
+const newFlavours = ref<string[]>([])
+const newPastries = ref<Pastry[]>([])
 
 const selectedBaker: Ref<Baker | null> = ref(null)
 
@@ -46,7 +53,7 @@ interface Props {
 
 const saveBaker = async () => {
   await save(() => {
-    return addBakerUseCase.execute(newName.value, newQuota.value)
+    return addBakerUseCase.execute(newName.value, newQuota.value, newFlavours.value, newPastries.value)
   })
 
   switch (savingState.value) {
@@ -62,10 +69,14 @@ const selectBaker = (baker: Baker) => {
   if (selectedBaker.value?.id == baker.id) {
     selectedBaker.value = null;
     newName.value = ''
+    newFlavours.value = []
+    newPastries.value = []
   } else {
     selectedBaker.value = baker
     newName.value = baker.name
     newQuota.value = baker.quota
+    newFlavours.value = baker.flavours || []
+    newPastries.value = baker.pastries || []
   }
 }
 
@@ -74,8 +85,8 @@ const updateBaker = async () => {
     id:selectedBaker.value!.id, 
     name: newName.value, 
     quota: newQuota.value,
-    flavours: [],
-    pastries: []
+    flavours: newFlavours.value,
+    pastries: newPastries.value
   })
   if (response.status === ResponseState.Success) {
     emit('updated')
@@ -100,4 +111,4 @@ function inRange(x: number, min: number, max: number) {
 const emit = defineEmits(['added', 'updated', 'deleted'])
 
 defineProps<Props>()
-</script>../../core/models/baker
+</script>

frontend/src/pages/bakers/FlavoursListView.vue

@@ -0,0 +1,48 @@
+<template>
+    <div>
+      <div class="flex flex-col gap-2">
+        <div v-for="(flavour, index) in localSelectedFlavours" :key="index" class="flex flex-row gap-2">
+          <div>{{ flavour }}</div>
+          <button @click="removeFlavour(index)">Remove</button>
+        </div>
+      </div>
+      <div class="flex flex-row gap-5 mt-5">
+        <input v-model="newFlavour" placeholder="New Flavour" class="text-black" />
+        <button @click="addFlavour" :disabled="newFlavour.length === 0">Add Flavour</button>
+      </div>
+    </div>
+  </template>
+
+<script lang="ts" setup>
+import { ref, defineEmits, watch } from 'vue'
+
+const props = defineProps<{ selectedFlavours: string[] }>()
+const emit = defineEmits(['update:selectedFlavours'])
+
+const localSelectedFlavours = ref<string[]>([])
+const newFlavour = ref('')
+
+const addFlavour = () => {
+  if (newFlavour.value && !localSelectedFlavours.value.includes(newFlavour.value)) {
+    localSelectedFlavours.value.push(newFlavour.value)
+    newFlavour.value = ''
+    emitSelectedFlavours()
+  }
+}
+
+const removeFlavour = (index: number) => {
+  localSelectedFlavours.value.splice(index, 1)
+  emitSelectedFlavours()
+}
+
+const emitSelectedFlavours = () => {
+  emit('update:selectedFlavours', localSelectedFlavours.value)
+}
+
+watch(localSelectedFlavours, emitSelectedFlavours)
+
+watch(() => props.selectedFlavours, (newSelectedPastries) => {
+  localSelectedFlavours.value = newSelectedPastries
+})
+
+</script>

frontend/src/pages/bakers/PastriesCheckboxesView.vue

@@ -0,0 +1,45 @@
+<template>
+    <LoadingWrapper :state="state">
+      <div v-for="pastry in data" :key="pastry.id" class="flex flex-row gap-2">
+        <input 
+            type="checkbox" 
+            :id="pastry.id" 
+            :value="pastry.id" 
+            v-model="localSelectedPastryIds"
+            @change="emitSelectedPastries"
+        >
+        <label :for="pastry.id">{{ pastry.name }}</label><br>
+      </div>
+    </LoadingWrapper>
+  </template>
+<script lang="ts" setup>
+import { type Ref, ref, watch } from 'vue'
+import { AppContainerKey } from '@/core/container/app-container'
+import { injectStrict } from '@/core/container/inject'
+import { useLoading } from '../../shared/functions/use-loading'
+import type { Pastry } from '../../core/models/pastry'
+
+const props = defineProps<{ selectedPastries: Pastry[] }>()
+const emit = defineEmits(['update:selectedPastries'])
+
+const getPastriesListUseCase = injectStrict(AppContainerKey.getPastriesUseCase)
+const { state, data, load } = useLoading<Pastry[]>()
+    
+const localSelectedPastryIds: Ref<string[]> = ref(props.selectedPastries.map(pastry => pastry.id))
+
+load(() => {
+  return getPastriesListUseCase.execute()
+})
+
+const emitSelectedPastries = () => {
+  const selectedPastries = data.value.filter(pastry => localSelectedPastryIds.value.includes(pastry.id))
+  emit('update:selectedPastries', selectedPastries)
+}
+
+watch(localSelectedPastryIds, emitSelectedPastries)
+
+watch(() => props.selectedPastries, (newSelectedPastries) => {
+  localSelectedPastryIds.value = newSelectedPastries.map(pastry => pastry.id)
+})
+
+</script>