Zwischenstand

frontend/components/personalComposing.vue

@@ -12,6 +12,10 @@ const props = defineProps({
 const hourrates = ref([])
 const units = ref([])
 
+const hourrateSearchInput = {
+  placeholder: 'Stundensatz suchen...'
+}
+
 const setup = async () => {
   hourrates.value = await useEntities("hourrates").select()
   units.value = await useEntities("units").selectSpecial()
@@ -82,14 +86,14 @@ const setRowData = (row) => {
       >
         <td>
           <USelectMenu
-              searchable
-              :search-attributes="['name']"
-              :options="hourrates"
-              value-attribute="id"
-              option-attribute="name"
-              v-model="row.hourrate"
-              :color="row.hourrate ? 'primary' : 'rose'"
-              @change="setRowData(row)"
+            :items="hourrates"
+            label-key="name"
+            value-key="id"
+            :search-input="hourrateSearchInput"
+            :filter-fields="['name']"
+            v-model="row.hourrate"
+            :color="row.hourrate ? 'primary' : 'error'"
+            @change="setRowData(row)"
           >
 <!--            <template #label>
               {{products.find(i => i.id === product.product) ? products.find(i => i.id === product.product).name : 'Kein Artikel ausgewählt'}}
@@ -106,10 +110,10 @@ const setRowData = (row) => {
         </td>
         <td>
           <USelectMenu
-            :options="units"
+            :items="units"
             disabled
-            value-attribute="id"
-            option-attribute="name"
+            label-key="name"
+            value-key="id"
             v-model="row.unit"
           ></USelectMenu>
         </td>
@@ -134,7 +138,7 @@ const setRowData = (row) => {
             icon="i-heroicons-x-mark"
             @click="removeRowFromPersonalComposition(row.id)"
             variant="outline"
-            color="rose"
+            color="error"
           />
         </td>
       </tr>
@@ -146,4 +150,4 @@ const setRowData = (row) => {
 td {
   margin-bottom: 0.5em;
 }
-</style>
+</style>