feat: delete child table row

- fix child row add/update button disabling logic

frontend/src/components/ExpenseTaxesTable.vue

@@ -96,10 +96,20 @@
 						v-if="!isReadOnly"
 						class="flex w-full flex-row items-center justify-between gap-3"
 					>
+						<Button
+							v-if="editingIdx !== null"
+							class="py-3 px-12 border-red-600 text-red-600"
+							icon-left="trash"
+							appearance="white"
+							@click="deleteExpenseTax()"
+						>
+							Delete
+						</Button>
 						<Button
 							appearance="primary"
 							class="w-full py-3 px-12"
-							@click="closeModal()"
+							:icon-left="editingIdx === null ? 'plus' : 'check'"
+							@click="updateExpenseTax()"
 							:disabled="addButtonDisabled"
 						>
 							{{ editingIdx === null ? "Add Tax" : "Update Tax" }}
@@ -114,7 +124,7 @@
 <script setup>
 import { IonModal } from "@ionic/vue"
 import { FeatherIcon, createResource } from "frappe-ui"
-import { computed, ref, watch, inject } from "vue"
+import { computed, ref, watch } from "vue"
 
 import FormField from "@/components/FormField.vue"
 import EmptyState from "@/components/EmptyState.vue"
@@ -133,7 +143,7 @@ const props = defineProps({
 		default: false,
 	},
 })
-const emit = defineEmits(["add-expense-tax", "update-expense-tax"])
+const emit = defineEmits(["add-expense-tax", "update-expense-tax", "delete-expense-tax"])
 const expenseTax = ref({})
 const editingIdx = ref(null)
 
@@ -146,7 +156,12 @@ const openModal = async (item, idx) => {
 	isModalOpen.value = true
 }
 
-const closeModal = async () => {
+const deleteExpenseTax = () => {
+	emit("delete-expense-tax", editingIdx.value)
+	resetSelectedItem()
+}
+
+const updateExpenseTax = () => {
 	if (editingIdx.value === null) {
 		emit("add-expense-tax", expenseTax.value)
 	} else {
@@ -204,7 +219,7 @@ const modalTitle = computed(() => {
 })
 
 const addButtonDisabled = computed(() => {
-	return props.fields?.some((field) => {
+	return taxesTableFields.data?.some((field) => {
 		if (field.reqd && !expenseTax.value[field.fieldname]) {
 			return true
 		}

frontend/src/components/ExpensesTable.vue

@@ -40,7 +40,7 @@
 									{{ `Sanctioned: ${currency} ${item.sanctioned_amount || 0}` }}
 								</span>
 								<span class="whitespace-pre"> &middot; </span>
-								<span class="whitespace-nowrap">
+								<span class="whitespace-nowrap" v-if="item.expense_date">
 									{{ dayjs(item.expense_date).format("D MMM") }}
 								</span>
 							</div>
@@ -94,10 +94,20 @@
 					v-if="!isReadOnly"
 					class="flex w-full flex-row items-center justify-between gap-3"
 				>
+					<Button
+						v-if="editingIdx !== null"
+						class="py-3 px-12 border-red-600 text-red-600"
+						icon-left="trash"
+						appearance="white"
+						@click="deleteExpenseItem()"
+					>
+						Delete
+					</Button>
 					<Button
 						appearance="primary"
 						class="w-full py-3 px-12"
-						@click="closeModal()"
+						:icon-left="editingIdx === null ? 'plus' : 'check'"
+						@click="updateExpenseItem()"
 						:disabled="addButtonDisabled"
 					>
 						{{ editingIdx === null ? "Add Expense" : "Update Expense" }}
@@ -132,7 +142,7 @@ const props = defineProps({
 		default: false,
 	},
 })
-const emit = defineEmits(["add-expense-item", "update-expense-item"])
+const emit = defineEmits(["add-expense-item", "update-expense-item", "delete-expense-item"])
 const dayjs = inject("$dayjs")
 const expenseItem = ref({})
 const editingIdx = ref(null)
@@ -147,7 +157,12 @@ const openModal = async (item, idx) => {
 	isModalOpen.value = true
 }
 
-const closeModal = async () => {
+const deleteExpenseItem = () => {
+	emit("delete-expense-item", editingIdx.value)
+	resetSelectedItem()
+}
+
+const updateExpenseItem = () => {
 	if (editingIdx.value === null) {
 		emit("add-expense-item", expenseItem.value)
 	} else {
@@ -162,20 +177,6 @@ function resetSelectedItem() {
 	editingIdx.value = null
 }
 
-const modalTitle = computed(() => {
-	if (props.isReadOnly) return "Expense Item"
-
-	return editingIdx.value === null ? "New Expense Item" : "Edit Expense Item"
-})
-
-const addButtonDisabled = computed(() => {
-	return props.fields?.some((field) => {
-		if (field.reqd && !expenseItem.value[field.fieldname]) {
-			return true
-		}
-	})
-})
-
 const expensesTableFields = createResource({
 	url: "hrms.api.get_doctype_fields",
 	params: { doctype: "Expense Claim Detail" },
@@ -195,6 +196,20 @@ const expensesTableFields = createResource({
 })
 expensesTableFields.reload()
 
+const modalTitle = computed(() => {
+	if (props.isReadOnly) return "Expense Item"
+
+	return editingIdx.value === null ? "New Expense Item" : "Edit Expense Item"
+})
+
+const addButtonDisabled = computed(() => {
+	return expensesTableFields.data?.some((field) => {
+		if (field.reqd && !expenseItem.value[field.fieldname]) {
+			return true
+		}
+	})
+})
+
 // child table form scripts
 watch(
 	() => expenseItem.value.expense_type,

frontend/src/views/expense_claim/Form.vue

@@ -21,6 +21,7 @@
 						:isReadOnly="isReadOnly || isFormReadOnly"
 						@addExpenseItem="addExpenseItem"
 						@updateExpenseItem="updateExpenseItem"
+						@deleteExpenseItem="deleteExpenseItem"
 					/>
 				</template>
 
@@ -31,6 +32,7 @@
 						:isReadOnly="isReadOnly || isFormReadOnly"
 						@addExpenseTax="addExpenseTax"
 						@updateExpenseTax="updateExpenseTax"
+						@deleteExpenseTax="deleteExpenseTax"
 					/>
 				</template>
 
@@ -47,7 +49,7 @@
 </template>
 
 <script setup>
-import { IonPage, IonContent, modalController } from "@ionic/vue"
+import { IonPage, IonContent } from "@ionic/vue"
 import { createResource } from "frappe-ui"
 import { computed, ref, watch, inject } from "vue"
 
@@ -264,30 +266,39 @@ function addExpenseItem(item) {
 	calculateTotals()
 	calculateTaxes()
 	allocateAdvanceAmount()
-	modalController.dismiss()
 }
 
 function updateExpenseItem(item, idx) {
 	expenseClaim.value.expenses[idx] = item
 	calculateTotals()
 	calculateTaxes()
 	allocateAdvanceAmount()
-	modalController.dismiss()
+}
+
+function deleteExpenseItem(idx) {
+	expenseClaim.value.expenses.splice(idx, 1)
+	calculateTotals()
+	calculateTaxes()
+	allocateAdvanceAmount()
 }
 
 function addExpenseTax(item) {
 	if (!expenseClaim.value.taxes) expenseClaim.value.taxes = []
 	expenseClaim.value.taxes.push(item)
 	calculateTaxes()
 	allocateAdvanceAmount()
-	modalController.dismiss()
 }
 
 function updateExpenseTax(item, idx) {
 	expenseClaim.value.taxes[idx] = item
 	calculateTaxes()
 	allocateAdvanceAmount()
-	modalController.dismiss()
+}
+
+function deleteExpenseTax(idx) {
+	expenseClaim.value.taxes.splice(idx, 1)
+	calculateTaxes()
+	allocateAdvanceAmount()
 }
 
 function calculateTotals() {