Optimise invoice data requests #56

resources/js/components/documents/LineItemTable.vue

@@ -19,7 +19,7 @@ import NumberInput from '../ui/number-input/NumberInput.vue';
 import { GrowingTextarea } from '../ui/growing-textarea';
 
 const props = defineProps<{
-  lineItems: LineItem[],
+  lineItems: LineItem[] | undefined,
   stickyTop: number | string,
   class?: HTMLAttributes['class']
 }>()
@@ -29,11 +29,16 @@ const emit = defineEmits<{
 }>()
 
 const units = ref(['Stück', 'Stunden', 'Tage', 'pauschal'])
-const items = ref(props.lineItems.sort(function (a, b) { return a.position - b.position })) // items only uses props.lineItems as the initial value;
+const items = ref((props.lineItems ?? []).slice().sort(function (a, b) { return a.position - b.position })) // items only uses props.lineItems as the initial value;
+
 watch(items, (newItems) => {
   emit('update:lineItems', newItems)
 }, { deep: true })
 
+watch(() => props.lineItems, (newLineItems) => {
+  items.value = (newLineItems ?? []).slice().sort(function (a, b) { return a.position - b.position })
+}, { deep: true })
+
 const newItem = () => {
   const position = items.value.length + 1
   let item = newLineItem()