feat: update source

frontend/src/components/Settings/LeadSyncing/EditLeadSyncSource.vue

@@ -12,26 +12,66 @@
                 </div>
             </div>
             <div class="flex item-center space-x-4 w-3/12 justify-end">
-                <div class="flex items-center space-x-2">
+                <div v-if="leadSyncSourceDoc.doc" class="flex items-center space-x-2">
-                    <Switch size="sm" v-model="source.enabled" />
+                    <Switch size="sm" v-model="leadSyncSourceDoc.doc.enabled" />
                     <span class="text-sm text-ink-gray-7">{{ __('Enabled') }}</span>
                 </div>
                 <Button :label="__('Update')" icon-left="edit" variant="solid" :loading="sources.setValue.loading"
                     @click="updateSource" />
             </div>
         </div>
+
+        <!-- Form -->
+        <div v-if="leadSyncSourceDoc.doc">
+            <div class="grid grid-cols-1 gap-4">
+                <div v-for="field in fbSourceFields" :key="field.name" class="flex flex-col gap-1">
+                    <FormControl v-model="leadSyncSourceDoc.doc[field.name]" :label="field.label" :name="field.name"
+                        :type="field.type" :placeholder="field.placeholder" />
+                </div>
+            </div>
+        </div>
+
+        <div class="grid sm:grid-cols-2 gap-4">
+            <Link
+                label="Facebook Page"
+                doctype="Facebook Page"
+                v-model="leadSyncSourceDoc.doc.facebook_page" 
+            />
+
+             <Link
+                label="Facebook Lead Form"
+                doctype="Facebook Lead Form"
+                v-model="leadSyncSourceDoc.doc.facebook_lead_form" 
+                :filters="{
+                    page: leadSyncSourceDoc.doc.facebook_page
+                }"
+            />
+        </div>
+
+        <!-- Mapping Table -->
+         <div v-if="formDoc.doc">
+             <Grid
+                 v-model="formDoc.doc.questions"
+                 v-model:parent="formDoc.doc"
+                 doctype="Facebook Lead Form Question"
+                 parentDoctype="Facebook Lead Form"
+                 parentFieldname="questions"
+              />
+         </div>
     </div>
 </template>
 
 <script setup>
-import { Switch } from "frappe-ui";
+import { Switch, toast } from "frappe-ui"
-import { inject, onMounted, ref } from "vue";
+import { useDocument } from '@/data/document'
-
+import { inject, onMounted, ref } from "vue"
+import Grid from '@/components/Controls/Grid.vue'
+import { fbSourceFields } from "./leadSyncSourceConfig"
 import { sourceIcon } from "./leadSyncSourceConfig";
-import EmailProviderIcon from "../EmailProviderIcon.vue";
+import EmailProviderIcon from "../EmailProviderIcon.vue"
+import Link from '@/components/Controls/Link.vue'
 
 const emit = defineEmits();
-
 const props = defineProps({
 	sourceData: {
 		type: Object,
@@ -46,5 +86,12 @@ onMounted(() => {
 	source.value = { ...props.sourceData };
 });
 
-function updateSource() {}
+const {document: leadSyncSourceDoc} = useDocument("Lead Sync Source", props.sourceData.name)
+const {document: formDoc} = useDocument("Facebook Lead Form", props.sourceData.facebook_lead_form)
+
+function updateSource() {
+    leadSyncSourceDoc.save.submit()
+    formDoc.save.submit()
+}
+
 </script>

frontend/src/components/Settings/LeadSyncing/LeadSyncSourcePage.vue

@@ -36,7 +36,8 @@ const sources = createListResource({
     'name',
     'enabled',
     'type',
-    'last_synced_at'
+    'last_synced_at',
+    'facebook_lead_form'
   ],
   auto: true,
   orderBy: 'modified desc',

frontend/src/components/Settings/LeadSyncing/NewLeadSyncSource.vue

@@ -38,17 +38,19 @@
                     </div>
                 </div>
 
-                <div v-if="state.fbAccountPages.length">
+				<div class="grid sm:grid-cols-2 gap-4">
-                    <FormControl type="autocomplete" :placeholder="__('Select an account page')"
+					<div v-if="state.fbAccountPages.length">
-                        :options="state.fbAccountPages" :label="__('Facebook Page')"
+						<FormControl type="autocomplete" :placeholder="__('Select an account page')"
-                        v-model="syncSource.facebook_page" />
+							:options="state.fbAccountPages" :label="__('Facebook Page')"
-                </div>
+							v-model="syncSource.facebook_page" />
-
+					</div>
-                <div v-if="syncSource.facebook_page">
+	
-                    <FormControl type="autocomplete" :placeholder="__('Select a lead gen form')"
+					<div v-if="syncSource.facebook_page">
-                        :options="leadFormsForSelectedPage" :label="__('Lead Form')"
+						<FormControl type="autocomplete" :placeholder="__('Select a lead gen form')"
-                        v-model="syncSource.facebook_lead_form" />
+							:options="leadFormsForSelectedPage" :label="__('Lead Form')"
-                </div>
+							v-model="syncSource.facebook_lead_form" />
+					</div>
+				</div>
             </div>
         </div>
 
@@ -71,7 +73,7 @@
 import { ref, inject, onMounted, reactive, watch, computed } from "vue";
 import { FormControl, toast, call } from "frappe-ui";
 import CircleAlert from "~icons/lucide/circle-alert";
-import { supportedSourceTypes } from "./leadSyncSourceConfig";
+import { supportedSourceTypes, fbSourceFields } from "./leadSyncSourceConfig";
 import EmailProviderIcon from "../EmailProviderIcon.vue";
 
 const syncSource = ref({
@@ -101,20 +103,6 @@ const selectedSourceType = ref(supportedSourceTypes[0]);
 syncSource.value.type = selectedSourceType.value.name;
 
 const sources = inject("sources");
-const fbSourceFields = [
-	{
-		name: "name",
-		label: __("Name"),
-		type: "text",
-		placeholder: __("Add a name for your source"),
-	},
-	{
-		name: "access_token",
-		label: __("Access Token"),
-		type: "password",
-		placeholder: __("Enter your Facebook Access Token"),
-	},
-];
 
 function handleSelect(sourceType) {
 	selectedSourceType.value = sourceType;
@@ -180,6 +168,10 @@ const leadFormsForSelectedPage = computed(() => {
 	}));
 });
 
+watch(syncSource.value.facebook_page, () => {
+	syncSource.value.facebook_lead_form = null;
+});
+
 onMounted(() => {
 	if (props.sourceData?.name) {
 		Object.assign(syncSource.value, props.sourceData);

frontend/src/components/Settings/LeadSyncing/leadSyncSourceConfig.js

@@ -13,4 +13,19 @@ export const supportedSourceTypes = [
 
 export const sourceIcon = {
   'Facebook': LogoFacebook
-}
+}
+
+export const fbSourceFields = [
+	{
+		name: "name",
+		label: __("Name"),
+		type: "text",
+		placeholder: __("Add a name for your source"),
+	},
+	{
+		name: "access_token",
+		label: __("Access Token"),
+		type: "password",
+		placeholder: __("Enter your Facebook Access Token"),
+	}
+];