Merge pull request #753 from pratikb64/email-account-dark-mode
fix: dark mode email account css
This commit is contained in:
Pratik Badhe
GitHub
commit
de806ee6d9
@ -1,55 +1,50 @@
|
||||
<template>
|
||||
<div class="flex items-center justify-between p-1 border-b border-gray-200 cursor-pointer">
|
||||
<div
|
||||
class="flex items-center justify-between p-1 py-3 border-b border-gray-200 dark:border-gray-700 cursor-pointer"
|
||||
>
|
||||
<!-- avatar and name -->
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<EmailProviderIcon :logo="emailIcon[emailAccount.service]" />
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-gray-700">
|
||||
<p class="text-sm font-semibold text-ink-gray-9">
|
||||
{{ emailAccount.email_account_name }}
|
||||
</p>
|
||||
<div class="text-sm text-gray-500">{{ emailAccount.email_id }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Badge variant="subtle" :label="badgeTitleColor[0]" :theme="badgeTitleColor[1]" />
|
||||
<Badge variant="subtle" :label="badgeTitleColor" :theme="gray" />
|
||||
</div>
|
||||
<!-- email id -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { emailIcon } from "./emailConfig";
|
||||
import EmailProviderIcon from "./EmailProviderIcon.vue";
|
||||
import { computed } from "vue";
|
||||
import { emailIcon } from './emailConfig'
|
||||
import EmailProviderIcon from './EmailProviderIcon.vue'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
emailAccount: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const badgeTitleColor = computed(() => {
|
||||
if (
|
||||
props.emailAccount.default_incoming &&
|
||||
props.emailAccount.default_outgoing
|
||||
) {
|
||||
const color =
|
||||
props.emailAccount.enable_incoming && props.emailAccount.enable_outgoing
|
||||
? "blue"
|
||||
: "gray";
|
||||
return ["Default Sending and Inbox", color];
|
||||
return 'Default Sending and Inbox'
|
||||
} else if (props.emailAccount.default_incoming) {
|
||||
const color = props.emailAccount.enable_incoming ? "blue" : "gray";
|
||||
return ["Default Inbox", color];
|
||||
return 'Default Inbox'
|
||||
} else if (props.emailAccount.default_outgoing) {
|
||||
const color = props.emailAccount.enable_outgoing ? "blue" : "gray";
|
||||
return ["Default Sending", color];
|
||||
return 'Default Sending'
|
||||
} else {
|
||||
const color = props.emailAccount.enable_incoming ? "blue" : "gray";
|
||||
return ["Inbox", color];
|
||||
return 'Inbox'
|
||||
}
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
@ -1,18 +1,32 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- header -->
|
||||
<div class="flex items-center justify-between">
|
||||
<h1 class="text-xl font-semibold">Email Accounts</h1>
|
||||
<Button label="Add Account" theme="gray" variant="solid" @click="emit('update:step', 'email-add')" class="mr-8">
|
||||
<div class="flex items-center justify-between text-ink-gray-9">
|
||||
<h2 class="flex gap-2 text-xl font-semibold leading-none h-5">
|
||||
Email Accounts
|
||||
</h2>
|
||||
<Button
|
||||
label="Add Account"
|
||||
theme="gray"
|
||||
variant="solid"
|
||||
@click="emit('update:step', 'email-add')"
|
||||
class="mr-8"
|
||||
>
|
||||
<template #prefix>
|
||||
<LucidePlus class="w-4 h-4" />
|
||||
</template>
|
||||
</Button>
|
||||
</div>
|
||||
<!-- list accounts -->
|
||||
<div v-if="!emailAccounts.loading && Boolean(emailAccounts.data?.length)" class="mt-4">
|
||||
<div
|
||||
v-if="!emailAccounts.loading && Boolean(emailAccounts.data?.length)"
|
||||
class="mt-4"
|
||||
>
|
||||
<div v-for="emailAccount in emailAccounts.data" :key="emailAccount.name">
|
||||
<EmailAccountCard :emailAccount="emailAccount" @click="emit('update:step', 'email-edit', emailAccount)" />
|
||||
<EmailAccountCard
|
||||
:emailAccount="emailAccount"
|
||||
@click="emit('update:step', 'email-edit', emailAccount)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- fallback if no email accounts -->
|
||||
@ -23,28 +37,28 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { createListResource } from "frappe-ui";
|
||||
import EmailAccountCard from "./EmailAccountCard.vue";
|
||||
import { createListResource } from 'frappe-ui'
|
||||
import EmailAccountCard from './EmailAccountCard.vue'
|
||||
|
||||
const emit = defineEmits(["update:step"]);
|
||||
const emit = defineEmits(['update:step'])
|
||||
|
||||
const emailAccounts = createListResource({
|
||||
doctype: "Email Account",
|
||||
doctype: 'Email Account',
|
||||
cache: true,
|
||||
fields: ["*"],
|
||||
fields: ['*'],
|
||||
filters: {
|
||||
email_id: ["Not Like", "%example%"],
|
||||
email_id: ['Not Like', '%example%'],
|
||||
},
|
||||
pageLength: 10,
|
||||
auto: true,
|
||||
onSuccess: (accounts) => {
|
||||
// convert 0 to false to handle boolean fields
|
||||
accounts.forEach((account) => {
|
||||
account.enable_incoming = Boolean(account.enable_incoming);
|
||||
account.enable_outgoing = Boolean(account.enable_outgoing);
|
||||
account.default_incoming = Boolean(account.default_incoming);
|
||||
account.default_outgoing = Boolean(account.default_outgoing);
|
||||
});
|
||||
account.enable_incoming = Boolean(account.enable_incoming)
|
||||
account.enable_outgoing = Boolean(account.enable_outgoing)
|
||||
account.default_incoming = Boolean(account.default_incoming)
|
||||
account.default_outgoing = Boolean(account.default_outgoing)
|
||||
})
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -2,38 +2,68 @@
|
||||
<div class="flex flex-col h-full gap-4">
|
||||
<!-- title and desc -->
|
||||
<div role="heading" aria-level="1" class="flex flex-col gap-1">
|
||||
<h5 class="text-xl font-semibold">Setup Email</h5>
|
||||
<h2 class="text-xl font-semibold text-ink-gray-9">Setup Email</h2>
|
||||
<p class="text-sm text-gray-600">
|
||||
Choose the email service provider you want to configure.
|
||||
</p>
|
||||
</div>
|
||||
<!-- email service provider selection -->
|
||||
<div class="flex flex-wrap items-center">
|
||||
<div v-for="s in services" :key="s.name" class="flex flex-col items-center gap-1 mt-4 w-[70px]"
|
||||
@click="handleSelect(s)">
|
||||
<EmailProviderIcon :service-name="s.name" :logo="s.icon" :selected="selectedService?.name === s?.name" />
|
||||
<div
|
||||
v-for="s in services"
|
||||
:key="s.name"
|
||||
class="flex flex-col items-center gap-1 mt-4 w-[70px]"
|
||||
@click="handleSelect(s)"
|
||||
>
|
||||
<EmailProviderIcon
|
||||
:service-name="s.name"
|
||||
:logo="s.icon"
|
||||
:selected="selectedService?.name === s?.name"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="selectedService" class="flex flex-col gap-4">
|
||||
<!-- email service provider info -->
|
||||
<div class="flex items-center gap-2 p-2 rounded-md ring-1 ring-gray-200">
|
||||
<CircleAlert class="w-5 h-6 text-blue-500 w-min-5 w-max-5 min-h-5 max-w-5" />
|
||||
<div class="text-xs text-gray-700 text-wrap">
|
||||
<div
|
||||
class="flex items-center gap-2 p-2 rounded-md ring-1 ring-gray-400 dark:ring-gray-700 text-gray-700 dark:text-gray-500"
|
||||
>
|
||||
<CircleAlert class="w-5 h-6 w-min-5 w-max-5 min-h-5 max-w-5" />
|
||||
<div class="text-xs text-wrap">
|
||||
{{ selectedService.info }}
|
||||
<a :href="selectedService.link" target="_blank" class="text-blue-500 underline">here</a>.
|
||||
<a :href="selectedService.link" target="_blank" class="underline"
|
||||
>here</a
|
||||
>.
|
||||
</div>
|
||||
</div>
|
||||
<!-- service provider fields -->
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
<div v-for="field in fields" :key="field.name" class="flex flex-col gap-1">
|
||||
<FormControl v-model="state[field.name]" :label="field.label" :name="field.name" :type="field.type"
|
||||
:placeholder="field.placeholder" />
|
||||
<div
|
||||
v-for="field in fields"
|
||||
:key="field.name"
|
||||
class="flex flex-col gap-1"
|
||||
>
|
||||
<FormControl
|
||||
v-model="state[field.name]"
|
||||
:label="field.label"
|
||||
:name="field.name"
|
||||
:type="field.type"
|
||||
:placeholder="field.placeholder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div v-for="field in incomingOutgoingFields" :key="field.name" class="flex flex-col gap-1">
|
||||
<FormControl v-model="state[field.name]" :label="field.label" :name="field.name" :type="field.type" />
|
||||
<div
|
||||
v-for="field in incomingOutgoingFields"
|
||||
:key="field.name"
|
||||
class="flex flex-col gap-1"
|
||||
>
|
||||
<FormControl
|
||||
v-model="state[field.name]"
|
||||
:label="field.label"
|
||||
:name="field.name"
|
||||
:type="field.type"
|
||||
/>
|
||||
<p class="text-gray-500 text-p-sm">{{ field.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -42,79 +72,89 @@
|
||||
</div>
|
||||
<!-- action button -->
|
||||
<div v-if="selectedService" class="flex justify-between mt-auto">
|
||||
<Button label="Back" theme="gray" variant="outline" :disabled="addEmailRes.loading"
|
||||
@click="emit('update:step', 'email-list')" />
|
||||
<Button label="Create" variant="solid" :loading="addEmailRes.loading" @click="createEmailAccount" />
|
||||
<Button
|
||||
label="Back"
|
||||
theme="gray"
|
||||
variant="outline"
|
||||
:disabled="addEmailRes.loading"
|
||||
@click="emit('update:step', 'email-list')"
|
||||
/>
|
||||
<Button
|
||||
label="Create"
|
||||
variant="solid"
|
||||
:loading="addEmailRes.loading"
|
||||
@click="createEmailAccount"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, reactive, ref } from "vue";
|
||||
import { createResource } from "frappe-ui";
|
||||
import CircleAlert from "~icons/lucide/circle-alert";
|
||||
import { createToast } from "@/utils";
|
||||
import { computed, reactive, ref } from 'vue'
|
||||
import { createResource } from 'frappe-ui'
|
||||
import CircleAlert from '~icons/lucide/circle-alert'
|
||||
import { createToast } from '@/utils'
|
||||
import {
|
||||
customProviderFields,
|
||||
popularProviderFields,
|
||||
services,
|
||||
validateInputs,
|
||||
incomingOutgoingFields,
|
||||
} from "./emailConfig";
|
||||
import EmailProviderIcon from "./EmailProviderIcon.vue";
|
||||
} from './emailConfig'
|
||||
import EmailProviderIcon from './EmailProviderIcon.vue'
|
||||
|
||||
const emit = defineEmits();
|
||||
const emit = defineEmits()
|
||||
|
||||
const state = reactive({
|
||||
service: "",
|
||||
email_account_name: "",
|
||||
email_id: "",
|
||||
password: "",
|
||||
api_key: "",
|
||||
api_secret: "",
|
||||
frappe_mail_site: "",
|
||||
service: '',
|
||||
email_account_name: '',
|
||||
email_id: '',
|
||||
password: '',
|
||||
api_key: '',
|
||||
api_secret: '',
|
||||
frappe_mail_site: '',
|
||||
enable_incoming: false,
|
||||
enable_outgoing: false,
|
||||
default_incoming: false,
|
||||
default_outgoing: false,
|
||||
});
|
||||
})
|
||||
|
||||
const selectedService = ref(null);
|
||||
const selectedService = ref(null)
|
||||
const fields = computed(() =>
|
||||
selectedService.value.custom ? customProviderFields : popularProviderFields
|
||||
);
|
||||
selectedService.value.custom ? customProviderFields : popularProviderFields,
|
||||
)
|
||||
|
||||
function handleSelect(service) {
|
||||
selectedService.value = service;
|
||||
state.service = service.name;
|
||||
selectedService.value = service
|
||||
state.service = service.name
|
||||
}
|
||||
|
||||
const addEmailRes = createResource({
|
||||
url: "crm.api.settings.create_email_account",
|
||||
url: 'crm.api.settings.create_email_account',
|
||||
makeParams: (val) => {
|
||||
return {
|
||||
...val,
|
||||
};
|
||||
}
|
||||
},
|
||||
onSuccess: () => {
|
||||
createToast({
|
||||
title: "Email account created successfully",
|
||||
icon: "check",
|
||||
iconClasses: "text-green-600",
|
||||
});
|
||||
emit("update:step", "email-list");
|
||||
title: 'Email account created successfully',
|
||||
icon: 'check',
|
||||
iconClasses: 'text-green-600',
|
||||
})
|
||||
emit('update:step', 'email-list')
|
||||
},
|
||||
onError: () => {
|
||||
error.value = "Failed to create email account, Invalid credentials";
|
||||
error.value = 'Failed to create email account, Invalid credentials'
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
const error = ref();
|
||||
const error = ref()
|
||||
function createEmailAccount() {
|
||||
error.value = validateInputs(state, selectedService.value.custom);
|
||||
if (error.value) return;
|
||||
error.value = validateInputs(state, selectedService.value.custom)
|
||||
if (error.value) return
|
||||
|
||||
addEmailRes.submit({ data: state });
|
||||
addEmailRes.submit({ data: state })
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -2,31 +2,56 @@
|
||||
<div class="flex flex-col h-full gap-4">
|
||||
<!-- title and desc -->
|
||||
<div role="heading" aria-level="1" class="flex justify-between gap-1">
|
||||
<h5 class="text-lg font-semibold">Edit Email</h5>
|
||||
<h2 class="text-xl font-semibold text-ink-gray-9">Edit Email</h2>
|
||||
</div>
|
||||
<div class="w-fit">
|
||||
<EmailProviderIcon :logo="emailIcon[accountData.service]" :service-name="accountData.service" />
|
||||
<EmailProviderIcon
|
||||
:logo="emailIcon[accountData.service]"
|
||||
:service-name="accountData.service"
|
||||
/>
|
||||
</div>
|
||||
<!-- banner for setting up email account -->
|
||||
<div class="flex items-center gap-2 p-2 rounded-md ring-1 ring-gray-200">
|
||||
<CircleAlert class="w-5 h-6 text-blue-500 w-min-5 w-max-5 min-h-5 max-w-5" />
|
||||
<div class="text-xs text-gray-700 text-wrap">
|
||||
<div
|
||||
class="flex items-center gap-2 p-2 rounded-md ring-1 ring-gray-400 dark:ring-gray-700"
|
||||
>
|
||||
<CircleAlert
|
||||
class="size-6 text-gray-500 w-min-5 w-max-5 min-h-5 max-w-5"
|
||||
/>
|
||||
<div class="text-xs text-gray-700 dark:text-gray-500 text-wrap">
|
||||
{{ info.description }}
|
||||
<a :href="info.link" target="_blank" class="text-blue-500 underline">here</a>
|
||||
<a :href="info.link" target="_blank" class="underline">here</a>
|
||||
.
|
||||
</div>
|
||||
</div>
|
||||
<!-- fields -->
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
<div v-for="field in fields" :key="field.name" class="flex flex-col gap-1">
|
||||
<FormControl v-model="state[field.name]" :label="field.label" :name="field.name" :type="field.type"
|
||||
:placeholder="field.placeholder" />
|
||||
<div
|
||||
v-for="field in fields"
|
||||
:key="field.name"
|
||||
class="flex flex-col gap-1"
|
||||
>
|
||||
<FormControl
|
||||
v-model="state[field.name]"
|
||||
:label="field.label"
|
||||
:name="field.name"
|
||||
:type="field.type"
|
||||
:placeholder="field.placeholder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div v-for="field in incomingOutgoingFields" :key="field.name" class="flex flex-col gap-1">
|
||||
<FormControl v-model="state[field.name]" :label="field.label" :name="field.name" :type="field.type" />
|
||||
<div
|
||||
v-for="field in incomingOutgoingFields"
|
||||
:key="field.name"
|
||||
class="flex flex-col gap-1"
|
||||
>
|
||||
<FormControl
|
||||
v-model="state[field.name]"
|
||||
:label="field.label"
|
||||
:name="field.name"
|
||||
:type="field.type"
|
||||
/>
|
||||
<p class="text-gray-500 text-p-sm">{{ field.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -34,17 +59,27 @@
|
||||
</div>
|
||||
<!-- action buttons -->
|
||||
<div class="flex justify-between mt-auto">
|
||||
<Button label="Back" theme="gray" variant="outline" :disabled="loading"
|
||||
@click="emit('update:step', 'email-list')" />
|
||||
<Button label="Update Account" variant="solid" @click="updateAccount" :loading="loading" />
|
||||
<Button
|
||||
label="Back"
|
||||
theme="gray"
|
||||
variant="outline"
|
||||
:disabled="loading"
|
||||
@click="emit('update:step', 'email-list')"
|
||||
/>
|
||||
<Button
|
||||
label="Update Account"
|
||||
variant="solid"
|
||||
@click="updateAccount"
|
||||
:loading="loading"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, reactive, ref } from "vue";
|
||||
import { call } from "frappe-ui";
|
||||
import EmailProviderIcon from "./EmailProviderIcon.vue";
|
||||
import { computed, reactive, ref } from 'vue'
|
||||
import { call } from 'frappe-ui'
|
||||
import EmailProviderIcon from './EmailProviderIcon.vue'
|
||||
import {
|
||||
emailIcon,
|
||||
services,
|
||||
@ -52,88 +87,87 @@ import {
|
||||
customProviderFields,
|
||||
validateInputs,
|
||||
incomingOutgoingFields,
|
||||
} from "./emailConfig";
|
||||
import { createToast } from "@/utils";
|
||||
import CircleAlert from "~icons/lucide/circle-alert";
|
||||
|
||||
} from './emailConfig'
|
||||
import { createToast } from '@/utils'
|
||||
import CircleAlert from '~icons/lucide/circle-alert'
|
||||
|
||||
const props = defineProps({
|
||||
accountData: null,
|
||||
})
|
||||
|
||||
const emit = defineEmits();
|
||||
const emit = defineEmits()
|
||||
|
||||
const state = reactive({
|
||||
email_account_name: props.accountData.email_account_name || "",
|
||||
service: props.accountData.service || "",
|
||||
email_id: props.accountData.email_id || "",
|
||||
email_account_name: props.accountData.email_account_name || '',
|
||||
service: props.accountData.service || '',
|
||||
email_id: props.accountData.email_id || '',
|
||||
api_key: props.accountData?.api_key || null,
|
||||
api_secret: props.accountData?.api_secret || null,
|
||||
password: props.accountData?.password || null,
|
||||
frappe_mail_site: props.accountData?.frappe_mail_site || "",
|
||||
frappe_mail_site: props.accountData?.frappe_mail_site || '',
|
||||
enable_incoming: props.accountData.enable_incoming || false,
|
||||
enable_outgoing: props.accountData.enable_outgoing || false,
|
||||
default_outgoing: props.accountData.default_outgoing || false,
|
||||
default_incoming: props.accountData.default_incoming || false,
|
||||
});
|
||||
})
|
||||
|
||||
const info = {
|
||||
description: "To know more about setting up email accounts, click",
|
||||
link: "https://docs.erpnext.com/docs/user/manual/en/email-account",
|
||||
};
|
||||
description: 'To know more about setting up email accounts, click',
|
||||
link: 'https://docs.erpnext.com/docs/user/manual/en/email-account',
|
||||
}
|
||||
|
||||
const isCustomService = computed(() => {
|
||||
return services.find((s) => s.name === props.accountData.service).custom;
|
||||
});
|
||||
return services.find((s) => s.name === props.accountData.service).custom
|
||||
})
|
||||
|
||||
const fields = computed(() => {
|
||||
if (isCustomService.value) {
|
||||
return customProviderFields;
|
||||
return customProviderFields
|
||||
}
|
||||
return popularProviderFields;
|
||||
});
|
||||
return popularProviderFields
|
||||
})
|
||||
|
||||
const error = ref();
|
||||
const loading = ref(false);
|
||||
const error = ref()
|
||||
const loading = ref(false)
|
||||
async function updateAccount() {
|
||||
error.value = validateInputs(state, isCustomService.value);
|
||||
if (error.value) return;
|
||||
const old = { ...props.accountData };
|
||||
const updatedEmailAccount = { ...state };
|
||||
error.value = validateInputs(state, isCustomService.value)
|
||||
if (error.value) return
|
||||
const old = { ...props.accountData }
|
||||
const updatedEmailAccount = { ...state }
|
||||
|
||||
const nameChanged =
|
||||
old.email_account_name !== updatedEmailAccount.email_account_name;
|
||||
delete old.email_account_name;
|
||||
delete updatedEmailAccount.email_account_name;
|
||||
old.email_account_name !== updatedEmailAccount.email_account_name
|
||||
delete old.email_account_name
|
||||
delete updatedEmailAccount.email_account_name
|
||||
|
||||
const otherFieldsChanged = isDirty.value;
|
||||
const values = updatedEmailAccount;
|
||||
const otherFieldsChanged = isDirty.value
|
||||
const values = updatedEmailAccount
|
||||
|
||||
if (!nameChanged && !otherFieldsChanged) {
|
||||
createToast({
|
||||
title: "No changes made",
|
||||
icon: "info",
|
||||
iconClasses: "text-blue-600",
|
||||
});
|
||||
return;
|
||||
title: 'No changes made',
|
||||
icon: 'info',
|
||||
iconClasses: 'text-blue-600',
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (nameChanged) {
|
||||
try {
|
||||
loading.value = true;
|
||||
await callRenameDoc();
|
||||
succesHandler();
|
||||
loading.value = true
|
||||
await callRenameDoc()
|
||||
succesHandler()
|
||||
} catch (err) {
|
||||
errorHandler();
|
||||
errorHandler()
|
||||
}
|
||||
}
|
||||
if (otherFieldsChanged) {
|
||||
try {
|
||||
loading.value = true;
|
||||
await callSetValue(values);
|
||||
succesHandler();
|
||||
loading.value = true
|
||||
await callSetValue(values)
|
||||
succesHandler()
|
||||
} catch (err) {
|
||||
errorHandler();
|
||||
errorHandler()
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -149,38 +183,38 @@ const isDirty = computed(() => {
|
||||
state.default_outgoing !== props.accountData.default_outgoing ||
|
||||
state.default_incoming !== props.accountData.default_incoming ||
|
||||
state.frappe_mail_site !== props.accountData.frappe_mail_site
|
||||
);
|
||||
});
|
||||
)
|
||||
})
|
||||
|
||||
async function callRenameDoc() {
|
||||
const d = await call("frappe.client.rename_doc", {
|
||||
doctype: "Email Account",
|
||||
const d = await call('frappe.client.rename_doc', {
|
||||
doctype: 'Email Account',
|
||||
old_name: props.accountData.email_account_name,
|
||||
new_name: state.email_account_name,
|
||||
});
|
||||
return d;
|
||||
})
|
||||
return d
|
||||
}
|
||||
|
||||
async function callSetValue(values) {
|
||||
const d = await call("frappe.client.set_value", {
|
||||
doctype: "Email Account",
|
||||
const d = await call('frappe.client.set_value', {
|
||||
doctype: 'Email Account',
|
||||
name: state.email_account_name,
|
||||
fieldname: values,
|
||||
});
|
||||
return d.name;
|
||||
})
|
||||
return d.name
|
||||
}
|
||||
|
||||
function succesHandler() {
|
||||
emit("update:step", "email-list");
|
||||
emit('update:step', 'email-list')
|
||||
createToast({
|
||||
title: "Email account updated successfully",
|
||||
icon: "check",
|
||||
iconClasses: "text-green-600",
|
||||
});
|
||||
title: 'Email account updated successfully',
|
||||
icon: 'check',
|
||||
iconClasses: 'text-green-600',
|
||||
})
|
||||
}
|
||||
|
||||
function errorHandler() {
|
||||
loading.value = false;
|
||||
error.value = "Failed to update email account, Invalid credentials";
|
||||
loading.value = false
|
||||
error.value = 'Failed to update email account, Invalid credentials'
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,28 +1,32 @@
|
||||
<template>
|
||||
<div class="flex items-center justify-center w-8 h-8 bg-gray-100 cursor-pointer rounded-xl hover:bg-gray-200"
|
||||
:class="{ 'ring-2 ring-blue-500': selected }">
|
||||
<div
|
||||
class="flex items-center justify-center w-8 h-8 bg-gray-100 cursor-pointer rounded-xl hover:bg-gray-200"
|
||||
:class="{ 'ring-2 ring-gray-500 dark:ring-gray-100': selected }"
|
||||
>
|
||||
<img :src="logo" class="w-4 h-4" />
|
||||
</div>
|
||||
<p v-if="serviceName" class="text-xs text-center text-gray-700">
|
||||
<p
|
||||
v-if="serviceName"
|
||||
class="text-xs text-center text-gray-700 dark:text-gray-500 mt-2"
|
||||
>
|
||||
{{ serviceName }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
defineProps({
|
||||
logo: {
|
||||
type: String,
|
||||
required: true
|
||||
required: true,
|
||||
},
|
||||
serviceName: {
|
||||
type: String,
|
||||
default: ''
|
||||
default: '',
|
||||
},
|
||||
selected: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user