From 3c93a8f2ada43359db6dae39e7516b432a18bf94 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Mon, 4 Sep 2023 16:36:07 +0530
Subject: [PATCH] refactor: replace Input with FormControl wherever possible

---
 frontend/src/components/ExpenseAdvancesTable.vue |  4 ++--
 frontend/src/components/FormField.vue            | 12 ++++++------
 frontend/src/components/FormattedField.vue       |  4 ++--
 frontend/src/main.js                             |  2 ++
 frontend/src/views/Login.vue                     |  6 +++---
 5 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/ExpenseAdvancesTable.vue b/frontend/src/components/ExpenseAdvancesTable.vue
index 55e85a7a25..6186997783 100644
--- a/frontend/src/components/ExpenseAdvancesTable.vue
+++ b/frontend/src/components/ExpenseAdvancesTable.vue
@@ -17,7 +17,7 @@
 		>
 			<div class="flex flex-row justify-between items-center">
 				<div class="flex flex-row items-start gap-3">
-					<Input
+					<FormControl
 						type="checkbox"
 						class="mt-[0.5px]"
 						v-model="advance.selected"
@@ -42,7 +42,7 @@
 					<span class="text-normal">
 						{{ currency }}
 					</span>
-					<Input
+					<FormControl
 						type="number"
 						class="w-20"
 						v-model="advance.allocated_amount"
diff --git a/frontend/src/components/FormField.vue b/frontend/src/components/FormField.vue
index 55c3856b6c..fdab0a9e13 100644
--- a/frontend/src/components/FormField.vue
+++ b/frontend/src/components/FormField.vue
@@ -26,7 +26,7 @@
 		/>
 
 		<!-- Text -->
-		<Input
+		<FormControl
 			v-else-if="
 				['Text Editor', 'Small Text', 'Text', 'Long Text'].includes(
 					props.fieldtype
@@ -42,7 +42,7 @@
 		/>
 
 		<!-- Check -->
-		<Input
+		<FormControl
 			v-else-if="props.fieldtype === 'Check'"
 			type="checkbox"
 			:label="props.label"
@@ -54,7 +54,7 @@
 		/>
 
 		<!-- Data field -->
-		<Input
+		<FormControl
 			v-else-if="props.fieldtype === 'Data'"
 			type="text"
 			:value="modelValue"
@@ -65,7 +65,7 @@
 		/>
 
 		<!-- Read only currency field -->
-		<Input
+		<FormControl
 			v-else-if="props.fieldtype === 'Currency' && isReadOnly"
 			type="text"
 			:value="modelValue"
@@ -76,7 +76,7 @@
 		/>
 
 		<!-- Float/Int field -->
-		<Input
+		<FormControl
 			v-else-if="isNumberType"
 			type="number"
 			:value="modelValue"
@@ -99,7 +99,7 @@
 
 		<!-- Date -->
 		<!-- FIXME: default datepicker has poor UI -->
-		<Input
+		<FormControl
 			v-else-if="props.fieldtype === 'Date'"
 			type="date"
 			v-model="date"
diff --git a/frontend/src/components/FormattedField.vue b/frontend/src/components/FormattedField.vue
index e5e661dfcf..d23bcad6b8 100644
--- a/frontend/src/components/FormattedField.vue
+++ b/frontend/src/components/FormattedField.vue
@@ -9,7 +9,7 @@
 		{{ dayjs(props.value).format("D MMM") }}
 	</div>
 
-	<Input
+	<FormControl
 		v-else-if="props.fieldtype === 'Check'"
 		type="checkbox"
 		label=""
@@ -35,7 +35,7 @@
 
 <script setup>
 import { inject } from "vue"
-import { Badge, Input } from "frappe-ui"
+import { Badge, FormControl, Input } from "frappe-ui"
 
 import EmployeeAvatar from "@/components/EmployeeAvatar.vue"
 
diff --git a/frontend/src/main.js b/frontend/src/main.js
index e0d0a5f96c..4f07e7d2dc 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -6,6 +6,7 @@ import socket from "./socket"
 import {
 	Button,
 	Input,
+	FormControl,
 	setConfig,
 	frappeRequest,
 	resourcesPlugin,
@@ -34,6 +35,7 @@ app.use(resourcesPlugin)
 
 app.component("Button", Button)
 app.component("Input", Input)
+app.component("FormControl", FormControl)
 app.component("EmptyState", EmptyState)
 
 app.use(router)
diff --git a/frontend/src/views/Login.vue b/frontend/src/views/Login.vue
index ceda179940..e0162cc54f 100644
--- a/frontend/src/views/Login.vue
+++ b/frontend/src/views/Login.vue
@@ -7,13 +7,13 @@
 				</div>
 				<div class="mx-auto mt-6 w-full px-8 sm:w-96">
 					<form class="flex flex-col space-y-4" @submit.prevent="submit">
-						<Input
+						<FormControl
 							label="Email"
 							placeholder="johndoe@mail.com"
 							v-model="email"
 							:type="email !== 'Administrator' ? 'email' : 'text'"
 						/>
-						<Input
+						<FormControl
 							label="Password"
 							type="password"
 							placeholder="••••••"
@@ -32,7 +32,7 @@
 <script setup>
 import { IonPage, IonContent } from "@ionic/vue"
 import { inject, ref } from "vue"
-import { Input, Button } from "frappe-ui"
+import { Button, FormControl } from "frappe-ui"
 
 const email = ref(null)
 const password = ref(null)