feat: update source
This commit is contained in:
parent
9237398342
commit
4148640472
@ -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>
|
||||
@ -36,7 +36,8 @@ const sources = createListResource({
|
||||
'name',
|
||||
'enabled',
|
||||
'type',
|
||||
'last_synced_at'
|
||||
'last_synced_at',
|
||||
'facebook_lead_form'
|
||||
],
|
||||
auto: true,
|
||||
orderBy: 'modified desc',
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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"),
|
||||
}
|
||||
];
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user