feat: update source

This commit is contained in:
Hussain Nagaria 2025-10-03 22:11:48 +05:30
parent 9237398342
commit 4148640472
4 changed files with 91 additions and 36 deletions

View File

@ -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">
<Switch size="sm" v-model="source.enabled" />
<div v-if="leadSyncSourceDoc.doc" class="flex items-center space-x-2">
<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 { inject, onMounted, ref } from "vue";
import { Switch, toast } from "frappe-ui"
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>

View File

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

View File

@ -38,17 +38,19 @@
</div>
</div>
<div v-if="state.fbAccountPages.length">
<FormControl type="autocomplete" :placeholder="__('Select an account page')"
:options="state.fbAccountPages" :label="__('Facebook Page')"
v-model="syncSource.facebook_page" />
</div>
<div v-if="syncSource.facebook_page">
<FormControl type="autocomplete" :placeholder="__('Select a lead gen form')"
:options="leadFormsForSelectedPage" :label="__('Lead Form')"
v-model="syncSource.facebook_lead_form" />
</div>
<div class="grid sm:grid-cols-2 gap-4">
<div v-if="state.fbAccountPages.length">
<FormControl type="autocomplete" :placeholder="__('Select an account page')"
:options="state.fbAccountPages" :label="__('Facebook Page')"
v-model="syncSource.facebook_page" />
</div>
<div v-if="syncSource.facebook_page">
<FormControl type="autocomplete" :placeholder="__('Select a lead gen form')"
:options="leadFormsForSelectedPage" :label="__('Lead Form')"
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);

View File

@ -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"),
}
];