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,11 @@ 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 +160,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 +223,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,11 @@ 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 +161,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 +181,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 +200,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/components/FormView.vue

@@ -36,7 +36,7 @@
 							{
 								label: 'Delete',
 								condition: showDeleteButton,
-								handler: () => showDeleteDialog = true,
+								handler: () => (showDeleteDialog = true),
 							},
 							{ label: 'Reload', handler: () => handleDocReload() },
 						]"
@@ -179,7 +179,7 @@
 		:options="{
 			title: `Delete ${props.doctype}`,
 			message: `Are you sure you want to delete the ${props.doctype} ${formModel.name}?`,
-			icon: { name: 'trash', appearance: 'danger'},
+			icon: { name: 'trash', appearance: 'danger' },
 			size: 'xs',
 			actions: [
 				{

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() {

hrms/api/__init__.py

@@ -1,4 +1,5 @@
 import frappe
+from frappe import _
 from frappe.query_builder import Order
 from frappe.query_builder.functions import Count
 from frappe.utils import getdate
@@ -443,7 +444,7 @@ def upload_base64_file(content, filename, dt=None, dn=None, fieldname=None):
 	decoded_content = base64.b64decode(content)
 	content_type = guess_type(filename)[0]
 	if content_type not in ALLOWED_MIMETYPES:
-		frappe.throw("You can only upload JPG, PNG, PDF, TXT or Microsoft documents.")
+		frappe.throw(_("You can only upload JPG, PNG, PDF, TXT or Microsoft documents."))
 
 	return frappe.get_doc(
 		{