test/crm
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #845 from shariquerik/agents

Browse Source
This commit is contained in:
Shariq Ansari 2025-06-23 13:22:56 +05:30 committed by GitHub
commit 2c45673f54
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
39 changed files with 1481 additions and 411 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
crm/api/__init__.py
View File

@ -71,7 +71,7 @@ def check_app_permission():
roles = frappe.get_roles()
if any(
role in ["System Manager", "Sales User", "Sales Manager", "Sales Master Manager"] for role in roles
role in ["System Manager", "Sales User", "Sales Manager"] for role in roles
):
return True
@ -99,9 +99,9 @@ def accept_invitation(key: str | None = None):
@frappe.whitelist()
def invite_by_email(emails: str, role: str):
frappe.only_for("Sales Manager")
frappe.only_for(["Sales Manager", "System Manager"])
if role not in ["Sales Manager", "Sales User"]:
if role not in ["System Manager", "Sales Manager", "Sales User"]:
frappe.throw("Cannot invite for this role")
if not emails:
@ -114,7 +114,10 @@ def invite_by_email(emails: str, role: str):
existing_members = frappe.db.get_all("User", filters={"email": ["in", email_list]}, pluck="email")
existing_invites = frappe.db.get_all(
"CRM Invitation",
filters={"email": ["in", email_list], "role": ["in", ["Sales Manager", "Sales User"]]},
filters={
"email": ["in", email_list],
"role": ["in", ["System Manager", "Sales Manager", "Sales User"]],
},
pluck="email",
)

28
crm/api/session.py
View File

@ -23,11 +23,35 @@ def get_users():
if frappe.session.user == user.name:
user.session_user = True
user.is_manager = "Sales Manager" in frappe.get_roles(user.name) or user.name == "Administrator"
user.is_manager = "Sales Manager" in frappe.get_roles(user.name)
user.is_admin = user.name == "Administrator"
user.roles = frappe.get_roles(user.name)
user.role = ""
if "System Manager" in user.roles:
user.role = "System Manager"
elif "Sales Manager" in user.roles:
user.role = "Sales Manager"
elif "Sales User" in user.roles:
user.role = "Sales User"
elif "Guest" in user.roles:
user.role = "Guest"
if frappe.session.user == user.name:
user.session_user = True
user.is_agent = frappe.db.exists("CRM Telephony Agent", {"user": user.name})
return users
crm_users = []
# crm users are users with role Sales User or Sales Manager
for user in users:
if "Sales User" in user.roles or "Sales Manager" in user.roles:
crm_users.append(user)
return users, crm_users
@frappe.whitelist()

84
crm/api/user.py Normal file
View File

@ -0,0 +1,84 @@
import frappe
@frappe.whitelist()
def add_existing_users(users, role="Sales User"):
"""
Add existing users to the CRM by assigning them a role (Sales User or Sales Manager).
:param users: List of user names to be added
"""
frappe.only_for(["System Manager", "Sales Manager"])
users = frappe.parse_json(users)
for user in users:
add_user(user, role)
@frappe.whitelist()
def update_user_role(user, new_role):
"""
Update the role of the user to Sales Manager, Sales User, or System Manager.
:param user: The name of the user
:param new_role: The new role to assign (Sales Manager or Sales User)
"""
frappe.only_for(["System Manager", "Sales Manager"])
if new_role not in ["System Manager", "Sales Manager", "Sales User"]:
frappe.throw("Cannot assign this role")
user_doc = frappe.get_doc("User", user)
if new_role == "System Manager":
user_doc.append_roles("System Manager", "Sales Manager", "Sales User")
user_doc.set("block_modules", [])
if new_role == "Sales Manager":
user_doc.append_roles("Sales Manager", "Sales User")
user_doc.remove_roles("System Manager")
if new_role == "Sales User":
user_doc.append_roles("Sales User")
user_doc.remove_roles("Sales Manager", "System Manager")
update_module_in_user(user_doc, "FCRM")
user_doc.save(ignore_permissions=True)
@frappe.whitelist()
def add_user(user, role):
"""
Add a user means adding role (Sales User or/and Sales Manager) to the user.
:param user: The name of the user to be added
:param role: The role to be assigned (Sales User or Sales Manager)
"""
update_user_role(user, role)
@frappe.whitelist()
def remove_user(user):
"""
Remove a user means removing Sales User & Sales Manager roles from the user.
:param user: The name of the user to be removed
"""
frappe.only_for(["System Manager", "Sales Manager"])
user_doc = frappe.get_doc("User", user)
roles = [d.role for d in user_doc.roles]
if "Sales User" in roles:
user_doc.remove_roles("Sales User")
if "Sales Manager" in roles:
user_doc.remove_roles("Sales Manager")
user_doc.save(ignore_permissions=True)
frappe.msgprint(f"User {user} has been removed from CRM roles.")
def update_module_in_user(user, module):
block_modules = frappe.get_all(
"Module Def",
fields=["name as module"],
filters={"name": ["!=", module]},
)
if block_modules:
user.set("block_modules", block_modules)

7
crm/fcrm/doctype/crm_invitation/crm_invitation.json
View File

@ -27,7 +27,7 @@
"fieldtype": "Select",
"in_list_view": 1,
"label": "Role",
"options": "\nSales User\nSales Manager",
"options": "\nSales User\nSales Manager\nSystem Manager",
"reqd": 1
},
{
@ -66,7 +66,7 @@
],
"index_web_pages_for_search": 1,
"links": [],
"modified": "2024-09-03 14:59:29.450018",
"modified": "2025-06-17 17:20:18.935395",
"modified_by": "Administrator",
"module": "FCRM",
"name": "CRM Invitation",
@ -106,7 +106,8 @@
"share": 1
}
],
"row_format": "Dynamic",
"sort_field": "creation",
"sort_order": "DESC",
"states": []
}
}

2
crm/fcrm/doctype/crm_invitation/crm_invitation.py
View File

@ -35,7 +35,7 @@ class CRMInvitation(Document):
@frappe.whitelist()
def accept_invitation(self):
frappe.only_for("System Manager")
frappe.only_for(["System Manager", "Sales Manager"])
self.accept()
def accept(self):

2
frappe-ui

@ -1 +1 @@
Subproject commit 8b615c0e899d75b99c7d36ec6df97b5d0386b2ca
Subproject commit 883bb643d1e662d6467925927e347dd28376960f

9
frontend/components.d.ts vendored
View File

@ -12,6 +12,7 @@ declare module 'vue' {
Activities: typeof import('./src/components/Activities/Activities.vue')['default']
ActivityHeader: typeof import('./src/components/Activities/ActivityHeader.vue')['default']
ActivityIcon: typeof import('./src/components/Icons/ActivityIcon.vue')['default']
AddExistingUserModal: typeof import('./src/components/Modals/AddExistingUserModal.vue')['default']
AddressIcon: typeof import('./src/components/Icons/AddressIcon.vue')['default']
AddressModal: typeof import('./src/components/Modals/AddressModal.vue')['default']
AllModals: typeof import('./src/components/Activities/AllModals.vue')['default']
@ -38,6 +39,7 @@ declare module 'vue' {
CallUI: typeof import('./src/components/Telephony/CallUI.vue')['default']
CameraIcon: typeof import('./src/components/Icons/CameraIcon.vue')['default']
CertificateIcon: typeof import('./src/components/Icons/CertificateIcon.vue')['default']
ChangePasswordModal: typeof import('./src/components/Modals/ChangePasswordModal.vue')['default']
CheckCircleIcon: typeof import('./src/components/Icons/CheckCircleIcon.vue')['default']
CheckIcon: typeof import('./src/components/Icons/CheckIcon.vue')['default']
CollapseSidebar: typeof import('./src/components/Icons/CollapseSidebar.vue')['default']
@ -136,10 +138,11 @@ declare module 'vue' {
InboxIcon: typeof import('./src/components/Icons/InboxIcon.vue')['default']
IndicatorIcon: typeof import('./src/components/Icons/IndicatorIcon.vue')['default']
InviteIcon: typeof import('./src/components/Icons/InviteIcon.vue')['default']
InviteMemberPage: typeof import('./src/components/Settings/InviteMemberPage.vue')['default']
InviteUserPage: typeof import('./src/components/Settings/InviteUserPage.vue')['default']
KanbanIcon: typeof import('./src/components/Icons/KanbanIcon.vue')['default']
KanbanSettings: typeof import('./src/components/Kanban/KanbanSettings.vue')['default']
KanbanView: typeof import('./src/components/Kanban/KanbanView.vue')['default']
KeyboardShortcut: typeof import('./src/components/KeyboardShortcut.vue')['default']
LayoutHeader: typeof import('./src/components/LayoutHeader.vue')['default']
LeadModal: typeof import('./src/components/Modals/LeadModal.vue')['default']
LeadsIcon: typeof import('./src/components/Icons/LeadsIcon.vue')['default']
@ -151,7 +154,9 @@ declare module 'vue' {
ListIcon: typeof import('./src/components/Icons/ListIcon.vue')['default']
ListRows: typeof import('./src/components/ListViews/ListRows.vue')['default']
LoadingIndicator: typeof import('./src/components/Icons/LoadingIndicator.vue')['default']
LucideInfo: typeof import('~icons/lucide/info')['default']
LucidePlus: typeof import('~icons/lucide/plus')['default']
LucideSearch: typeof import('~icons/lucide/search')['default']
MarkAsDoneIcon: typeof import('./src/components/Icons/MarkAsDoneIcon.vue')['default']
MaximizeIcon: typeof import('./src/components/Icons/MaximizeIcon.vue')['default']
MenuIcon: typeof import('./src/components/Icons/MenuIcon.vue')['default']
@ -164,6 +169,7 @@ declare module 'vue' {
MultiActionButton: typeof import('./src/components/MultiActionButton.vue')['default']
MultipleAvatar: typeof import('./src/components/MultipleAvatar.vue')['default']
MultiSelectEmailInput: typeof import('./src/components/Controls/MultiSelectEmailInput.vue')['default']
MultiSelectUserInput: typeof import('./src/components/Controls/MultiSelectUserInput.vue')['default']
MuteIcon: typeof import('./src/components/Icons/MuteIcon.vue')['default']
NestedPopover: typeof import('./src/components/NestedPopover.vue')['default']
NoteArea: typeof import('./src/components/Activities/NoteArea.vue')['default']
@ -228,6 +234,7 @@ declare module 'vue' {
UnpinIcon: typeof import('./src/components/Icons/UnpinIcon.vue')['default']
UserAvatar: typeof import('./src/components/UserAvatar.vue')['default']
UserDropdown: typeof import('./src/components/UserDropdown.vue')['default']
Users: typeof import('./src/components/Settings/Users.vue')['default']
ViewBreadcrumbs: typeof import('./src/components/ViewBreadcrumbs.vue')['default']
ViewControls: typeof import('./src/components/ViewControls.vue')['default']
ViewModal: typeof import('./src/components/Modals/ViewModal.vue')['default']

2
frontend/src/components/Activities/DataFields.vue
View File

@ -31,7 +31,7 @@
</div>
<div
v-if="document.get.loading"
class="flex flex-1 flex-col items-center justify-center gap-3 text-xl font-medium text-gray-500"
class="flex flex-1 flex-col items-center justify-center gap-3 text-xl font-medium text-ink-gray-6"
>
<LoadingIndicator class="h-6 w-6" />
<span>{{ __('Loading...') }}</span>

2
frontend/src/components/CommentBox.vue
View File

@ -149,7 +149,7 @@ function removeAttachment(attachment) {
const users = computed(() => {
return (
usersList.data
usersList.data?.crmUsers
?.filter((user) => user.enabled)
.map((user) => ({
label: user.full_name.trimEnd(),

16
frontend/src/components/Controls/Grid.vue
View File

@ -380,9 +380,9 @@ const props = defineProps({
},
})
const triggerOnChange = inject('triggerOnChange')
const triggerOnRowAdd = inject('triggerOnRowAdd')
const triggerOnRowRemove = inject('triggerOnRowRemove')
const triggerOnChange = inject('triggerOnChange', () => {})
const triggerOnRowAdd = inject('triggerOnRowAdd', () => {})
const triggerOnRowRemove = inject('triggerOnRowRemove', () => {})
const {
getGridViewSettings,
@ -393,7 +393,7 @@ const {
getGridSettings,
} = getMeta(props.doctype)
getMeta(props.parentDoctype)
const { getUser } = usersStore()
const { users, getUser } = usersStore()
const rows = defineModel()
const parentDoc = defineModel('parent')
@ -438,6 +438,14 @@ function getFieldObj(field) {
}
}
if (field.fieldtype === 'Link' && field.options === 'User') {
field.fieldtype = 'User'
field.link_filters = JSON.stringify({
...(field.link_filters ? JSON.parse(field.link_filters) : {}),
name: ['in', users.data.crmUsers?.map((user) => user.name)],
})
}
return {
...field,
filters: field.link_filters && JSON.parse(field.link_filters),

14
frontend/src/components/Controls/MultiSelectEmailInput.vue
View File

@ -70,7 +70,7 @@
{{
fetchContacts
? __('No results found')
: __('Type an email address to add')
: __('Type an email address to invite')
}}
</div>
<ComboboxOption
@ -156,6 +156,10 @@ const props = defineProps({
type: Boolean,
default: true,
},
existingEmails: {
type: Array,
default: () => [],
},
})
const values = defineModel()
@ -205,6 +209,14 @@ const filterOptions = createResource({
value: email,
}
})
// Filter out existing emails
if (props.existingEmails?.length) {
allData = allData.filter((option) => {
return !props.existingEmails.includes(option.value)
})
}
return allData
},
})

278
frontend/src/components/Controls/MultiSelectUserInput.vue Normal file
View File

@ -0,0 +1,278 @@
<template>
<div>
<div class="flex flex-wrap gap-1">
<Button
ref="emails"
v-for="value in values"
:key="value"
:label="value"
theme="gray"
variant="subtle"
:class="{
'rounded bg-surface-white hover:!bg-surface-gray-1 focus-visible:ring-outline-gray-4':
variant === 'subtle',
}"
@keydown.delete.capture.stop="removeLastValue"
>
<template #suffix>
<FeatherIcon
class="h-3.5"
name="x"
@click.stop="removeValue(value)"
/>
</template>
</Button>
<div class="flex-1">
<Combobox v-model="selectedValue" nullable>
<Popover class="w-full" v-model:show="showOptions">
<template #target="{ togglePopover }">
<ComboboxInput
ref="search"
class="search-input form-input w-full border-none focus:border-none focus:!shadow-none focus-visible:!ring-0"
:class="[
variant == 'ghost'
? 'bg-surface-white hover:bg-surface-white'
: 'bg-surface-gray-2 hover:bg-surface-gray-3',
inputClass,
]"
:placeholder="placeholder"
type="text"
:value="query"
@change="
(e) => {
query = e.target.value
showOptions = true
}
"
autocomplete="off"
@focus="() => togglePopover()"
@keydown.delete.capture.stop="removeLastValue"
/>
</template>
<template #body="{ isOpen }">
<div v-show="isOpen">
<div
class="mt-1 rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
>
<ComboboxOptions
class="p-1.5 max-h-[12rem] overflow-y-auto"
static
>
<div
v-if="!options.length"
class="flex gap-2 rounded px-2 py-1 text-base text-ink-gray-5"
>
<FeatherIcon
v-if="fetchUsers"
name="search"
class="h-4"
/>
{{
fetchUsers
? __('No results found')
: __('Type an email address to invite')
}}
</div>
<ComboboxOption
v-for="option in options"
:key="option.value"
:value="option"
v-slot="{ active }"
>
<li
:class="[
'flex cursor-pointer items-center rounded px-2 py-1 text-base',
{ 'bg-surface-gray-3': active },
]"
>
<UserAvatar
class="mr-2"
:user="option.value"
size="lg"
/>
<div class="flex flex-col gap-1 p-1 text-ink-gray-8">
<div class="text-base font-medium">
{{ option.label }}
</div>
<div class="text-sm text-ink-gray-5">
{{ option.value }}
</div>
</div>
</li>
</ComboboxOption>
</ComboboxOptions>
</div>
</div>
</template>
</Popover>
</Combobox>
</div>
</div>
<ErrorMessage class="mt-2 pl-2" v-if="error" :message="error" />
<div
v-if="info"
class="whitespace-pre-line text-sm text-ink-blue-3 mt-2 pl-2"
>
{{ info }}
</div>
</div>
</template>
<script setup>
import {
Combobox,
ComboboxInput,
ComboboxOptions,
ComboboxOption,
} from '@headlessui/vue'
import UserAvatar from '@/components/UserAvatar.vue'
import Popover from '@/components/frappe-ui/Popover.vue'
import { usersStore } from '@/stores/users'
import { ref, computed, nextTick } from 'vue'
const props = defineProps({
validate: {
type: Function,
default: null,
},
variant: {
type: String,
default: 'subtle',
},
placeholder: {
type: String,
default: '',
},
inputClass: {
type: String,
default: '',
},
errorMessage: {
type: Function,
default: (value) => `${value} is an Invalid value`,
},
fetchUsers: {
type: Boolean,
default: true,
},
existingEmails: {
type: Array,
default: () => [],
},
})
const values = defineModel()
const { users } = usersStore()
const emails = ref([])
const search = ref(null)
const error = ref(null)
const info = ref(null)
const query = ref('')
const showOptions = ref(false)
const selectedValue = computed({
get: () => query.value || '',
set: (val) => {
query.value = ''
if (val) {
showOptions.value = false
}
val?.value && addValue(val.value)
},
})
const options = computed(() => {
let userEmails = props.fetchUsers ? users?.data?.allUsers : []
if (props.fetchUsers) {
userEmails = userEmails.map((user) => ({
label: user.full_name || user.name || user.email,
value: user.email,
}))
if (props.existingEmails?.length) {
userEmails = userEmails.filter((option) => {
return !props.existingEmails.includes(option.value)
})
}
if (query.value) {
userEmails = userEmails.filter(
(option) =>
option.label.toLowerCase().includes(query.value.toLowerCase()) ||
option.value.toLowerCase().includes(query.value.toLowerCase()),
)
}
} else if (!userEmails?.length && query.value) {
userEmails.push({
label: query.value,
value: query.value,
})
}
return userEmails || []
})
const addValue = (value) => {
error.value = null
info.value = null
if (value) {
const splitValues = value.split(',')
splitValues.forEach((value) => {
value = value.trim()
if (value) {
// check if value is not already in the values array
if (!values.value?.includes(value)) {
// check if value is valid
if (value && props.validate && !props.validate(value)) {
error.value = props.errorMessage(value)
query.value = value
return
}
// add value to values array
if (!values.value) {
values.value = [value]
} else {
values.value.push(value)
}
value = value.replace(value, '')
} else {
info.value = __('email already exists')
}
}
})
!error.value && (value = '')
}
}
const removeValue = (value) => {
values.value = values.value.filter((v) => v !== value)
}
const removeLastValue = () => {
if (query.value) return
let emailRef = emails.value[emails.value.length - 1]?.$el
if (document.activeElement === emailRef) {
values.value.pop()
nextTick(() => {
if (values.value.length) {
emailRef = emails.value[emails.value.length - 1].$el
emailRef?.focus()
} else {
setFocus()
}
})
} else {
emailRef?.focus()
}
}
function setFocus() {
search.value.$el.focus()
}
defineExpose({ setFocus })
</script>

38
frontend/src/components/Controls/Password.vue
View File

@ -3,17 +3,47 @@
:type="show ? 'text' : 'password'"
:value="modelValue || value"
v-bind="$attrs"
@keydown.meta.i.prevent="show = !show"
@keydown.ctrl.i.prevent="show = !show"
>
<template #prefix v-if="$slots.prefix">
<slot name="prefix" />
</template>
<template #suffix>
<Button v-show="showEye" class="!h-4" @click="show = !show">
<FeatherIcon :name="show ? 'eye-off' : 'eye'" class="h-3" />
</Button>
<Tooltip>
<template #body>
<div
class="rounded bg-surface-gray-7 py-1.5 px-2 text-xs text-ink-white shadow-xl"
>
<span class="flex items-center gap-1">
{{ show ? __('Hide Password') : __('Show Password') }}
<KeyboardShortcut
bg
ctrl
class="!bg-surface-gray-5 !text-ink-gray-2 px-1"
>
<span class="font-mono leading-none tracking-widest">+I</span>
</KeyboardShortcut>
</span>
</div>
</template>
<div>
<FeatherIcon
v-show="showEye"
:name="show ? 'eye-off' : 'eye'"
class="h-3 cursor-pointer mr-1"
@click="show = !show"
/>
</div>
</Tooltip>
</template>
</FormControl>
</template>
<script setup>
import { FormControl } from 'frappe-ui'
import KeyboardShortcut from '@/components/KeyboardShortcut.vue'
import { FormControl, Tooltip } from 'frappe-ui'
import { ref, computed } from 'vue'
const props = defineProps({
modelValue: {
type: [String, Number],

8
frontend/src/components/FieldLayout/Field.vue
View File

@ -243,7 +243,7 @@ const isGridRow = inject('isGridRow')
const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
getMeta(doctype)
const { getUser } = usersStore()
const { users, getUser } = usersStore()
let triggerOnChange
let parentDoc
@ -260,7 +260,7 @@ if (!isGridRow) {
provide('triggerOnRowAdd', triggerOnRowAdd)
provide('triggerOnRowRemove', triggerOnRowRemove)
} else {
triggerOnChange = inject('triggerOnChange')
triggerOnChange = inject('triggerOnChange', () => {})
parentDoc = inject('parentDoc')
}
@ -278,6 +278,10 @@ const field = computed(() => {
if (field.fieldtype === 'Link' && field.options === 'User') {
field.fieldtype = 'User'
field.link_filters = JSON.stringify({
...(field.link_filters ? JSON.parse(field.link_filters) : {}),
name: ['in', users.data.crmUsers?.map((user) => user.name)],
})
}
if (field.fieldtype === 'Link' && field.options !== 'User') {

33
frontend/src/components/KeyboardShortcut.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div
class="inline-flex items-center gap-0.5 text-sm"
:class="{
'bg-surface-gray-2 rounded-sm text-ink-gray-5 py-0.5 px-1': bg,
'text-ink-gray-4': !bg,
}"
>
<span v-if="ctrl || meta">
<LucideCommand v-if="isMac" class="w-3 h-3" />
<span v-else>Ctrl</span>
</span>
<span v-if="shift"><LucideShift class="w-3 h-3" /></span>
<span v-if="alt"><LucideAlt class="w-3 h-3" /></span>
<slot></slot>
</div>
</template>
<script setup>
import LucideCommand from '~icons/lucide/command'
import LucideShift from '~icons/lucide/arrow-big-up'
import LucideAlt from '~icons/lucide/option'
const isMac = navigator.userAgent.includes('Mac')
defineProps({
meta: Boolean,
ctrl: Boolean,
shift: Boolean,
alt: Boolean,
shortcut: String,
bg: Boolean,
})
</script>

8
frontend/src/components/Layouts/AppSidebar.vue
View File

@ -172,6 +172,7 @@ import {
import { usersStore } from '@/stores/users'
import { sessionStore } from '@/stores/session'
import { showSettings, activeSettingsPage } from '@/composables/settings'
import { showChangePasswordModal } from '@/composables/modals'
import { FeatherIcon, call } from 'frappe-ui'
import {
SignupBanner,
@ -329,8 +330,7 @@ const steps = reactive([
completed: false,
onClick: () => {
minimize.value = true
showSettings.value = true
activeSettingsPage.value = 'Profile'
showChangePasswordModal.value = true
},
},
{
@ -351,7 +351,7 @@ const steps = reactive([
onClick: () => {
minimize.value = true
showSettings.value = true
activeSettingsPage.value = 'Invite Members'
activeSettingsPage.value = 'Invite User'
},
condition: () => isManager(),
},
@ -529,7 +529,7 @@ const articles = ref([
{ name: 'profile', title: __('Profile') },
{ name: 'custom-branding', title: __('Custom branding') },
{ name: 'home-actions', title: __('Home actions') },
{ name: 'invite-members', title: __('Invite members') },
{ name: 'invite-users', title: __('Invite users') },
],
},
{

112
frontend/src/components/Modals/AddExistingUserModal.vue Normal file
View File

@ -0,0 +1,112 @@
<template>
<Dialog
v-model="show"
:options="{ title: __('Add Existing User') }"
@close="show = false"
>
<template #body-content>
<div class="flex gap-1 border rounded mb-4 p-2 text-ink-gray-5">
<FeatherIcon name="info" class="size-3.5" />
<p class="text-sm">
{{
__(
'Add existing system users to this CRM. Assign them a role to grant access with their current credentials.',
)
}}
</p>
</div>
<label class="block text-xs text-ink-gray-5 mb-1.5">
{{ __('Users') }}
</label>
<div class="p-2 group bg-surface-gray-2 hover:bg-surface-gray-3 rounded">
<MultiSelectUserInput
v-if="users?.data?.crmUsers?.length"
class="flex-1"
inputClass="!bg-surface-gray-2 hover:!bg-surface-gray-3 group-hover:!bg-surface-gray-3"
:placeholder="__('john@doe.com')"
v-model="newUsers"
:validate="validateEmail"
:existingEmails="[
...users.data.crmUsers.map((user) => user.name),
'admin@example.com',
]"
:error-message="
(value) => __('{0} is an invalid email address', [value])
"
/>
</div>
<FormControl
type="select"
class="mt-4"
v-model="role"
:label="__('Role')"
:options="roleOptions"
:description="description"
/>
</template>
<template #actions>
<div class="flex justify-end gap-2">
<Button
variant="solid"
:label="__('Add')"
:disabled="!newUsers.length"
@click="addNewUser.submit()"
:loading="addNewUser.loading"
/>
</div>
</template>
</Dialog>
</template>
<script setup>
import MultiSelectUserInput from '@/components/Controls/MultiSelectUserInput.vue'
import { validateEmail } from '@/utils'
import { usersStore } from '@/stores/users'
import { createResource, toast } from 'frappe-ui'
import { ref, computed } from 'vue'
const { users, isAdmin, isManager } = usersStore()
const show = defineModel()
const newUsers = ref([])
const role = ref('Sales User')
const description = computed(() => {
return {
'System Manager':
'Can manage all aspects of the CRM, including user management, customizations and settings.',
'Sales Manager':
'Can manage and invite new users, and create public & private views (reports).',
'Sales User':
'Can work with leads and deals and create private views (reports).',
}[role.value]
})
const roleOptions = computed(() => {
return [
{ value: 'Sales User', label: __('Sales User') },
...(isManager() ? [{ value: 'Sales Manager', label: __('Manager') }] : []),
...(isAdmin() ? [{ value: 'System Manager', label: __('Admin') }] : []),
]
})
const addNewUser = createResource({
url: 'crm.api.user.add_existing_users',
makeParams: () => ({
users: JSON.stringify(newUsers.value),
role: role.value,
}),
onSuccess: () => {
toast.success(__('Users added successfully'))
newUsers.value = []
show.value = false
users.reload()
},
onError: (error) => {
toast.error(error.messages[0] || __('Failed to add users'))
},
})
</script>

3
frontend/src/components/Modals/AssignmentModal.vue
View File

@ -33,6 +33,7 @@
doctype="User"
@change="(option) => addValue(option) && ($refs.input.value = '')"
:placeholder="__('John Doe')"
:filters="{ name: ['in', users.data.crmUsers?.map((user) => user.name)] }"
:hideMe="true"
>
<template #item-prefix="{ option }">
@ -105,7 +106,7 @@ const oldAssignees = ref([])
const error = ref('')
const { getUser } = usersStore()
const { users, getUser } = usersStore()
const removeValue = (value) => {
assignees.value = assignees.value.filter(

129
frontend/src/components/Modals/ChangePasswordModal.vue Normal file
View File

@ -0,0 +1,129 @@
<template>
<Dialog v-model="show" :options="{ title: __('Change Password') }">
<template #body-content>
<div class="flex flex-col gap-4">
<div>
<Password v-model="newPassword" :placeholder="__('New Password')">
<template #prefix>
<LockKeyhole class="size-4 text-ink-gray-4" />
</template>
</Password>
<p v-if="newPasswordMessage" class="text-sm text-ink-gray-5 mt-2">
{{ newPasswordMessage }}
</p>
</div>
<div>
<Password
v-model="confirmPassword"
:placeholder="__('Confirm Password')"
>
<template #prefix>
<LockKeyhole class="size-4 text-ink-gray-4" />
</template>
</Password>
<p
v-if="confirmPasswordMessage"
class="text-sm text-ink-gray-5 mt-2"
:class="
confirmPasswordMessage === 'Passwords match'
? 'text-ink-green-3'
: 'text-ink-red-3'
"
>
{{ confirmPasswordMessage }}
</p>
</div>
</div>
</template>
<template #actions>
<div class="flex justify-between items-center">
<div>
<ErrorMessage :message="error" />
</div>
<Button
variant="solid"
:label="__('Update')"
:disabled="
!newPassword || !confirmPassword || newPassword !== confirmPassword
"
:loading="updatePassword.loading"
@click="updatePassword.submit()"
/>
</div>
</template>
</Dialog>
</template>
<script setup>
import LockKeyhole from '~icons/lucide/lock-keyhole'
import Password from '@/components/Controls/Password.vue'
import { usersStore } from '@/stores/users'
import { Dialog, toast, createResource } from 'frappe-ui'
import { useOnboarding } from 'frappe-ui/frappe'
import { ref, watch } from 'vue'
const show = defineModel()
const { getUser } = usersStore()
const { updateOnboardingStep } = useOnboarding('frappecrm')
const newPassword = ref('')
const confirmPassword = ref('')
const newPasswordMessage = ref('')
const confirmPasswordMessage = ref('')
const error = ref('')
const updatePassword = createResource({
url: 'frappe.client.set_value',
makeParams() {
return {
doctype: 'User',
name: getUser().name,
fieldname: 'new_password',
value: newPassword.value,
}
},
onSuccess: () => {
updateOnboardingStep('setup_your_password')
toast.success(__('Password updated successfully'))
show.value = false
newPassword.value = ''
confirmPassword.value = ''
error.value = ''
},
onError: (err) => {
error.value = err.messages[0] || __('Failed to update password')
},
})
function isStrongPassword(password) {
const regex =
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/
return regex.test(password)
}
watch([newPassword, confirmPassword], () => {
confirmPasswordMessage.value = ''
newPasswordMessage.value = ''
if (newPassword.value.length < 8) {
newPasswordMessage.value = 'Password must be at least 8 characters'
} else if (!isStrongPassword(newPassword.value)) {
newPasswordMessage.value =
'Password must contain uppercase, lowercase, number, and symbol'
}
if (
confirmPassword.value.length &&
newPassword.value !== confirmPassword.value
) {
confirmPasswordMessage.value = 'Passwords do not match'
} else if (
newPassword.value === confirmPassword.value &&
newPassword.value.length &&
confirmPassword.value.length
) {
confirmPasswordMessage.value = 'Passwords match'
}
})
</script>

8
frontend/src/components/Modals/GlobalModals.vue
View File

@ -16,9 +16,14 @@
v-model="showAddressModal"
v-bind="addressProps"
/>
<ChangePasswordModal
v-if="showChangePasswordModal"
v-model="showChangePasswordModal"
/>
<AboutModal v-model="showAboutModal" />
</template>
<script setup>
import ChangePasswordModal from '@/components/Modals/ChangePasswordModal.vue'
import CreateDocumentModal from '@/components/Modals/CreateDocumentModal.vue'
import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
import AddressModal from '@/components/Modals/AddressModal.vue'
@ -34,6 +39,7 @@ import {
quickEntryProps,
showAddressModal,
addressProps,
showAboutModal
showAboutModal,
showChangePasswordModal,
} from '@/composables/modals'
</script>

139
frontend/src/components/Modals/TaskModal.vue
View File

@ -1,23 +1,32 @@
<template>
<Dialog v-model="show" :options="{
size: 'xl',
actions: [
{
label: editMode ? __('Update') : __('Create'),
variant: 'solid',
onClick: () => updateTask(),
},
],
}">
<Dialog
v-model="show"
:options="{
size: 'xl',
actions: [
{
label: editMode ? __('Update') : __('Create'),
variant: 'solid',
onClick: () => updateTask(),
},
],
}"
>
<template #body-title>
<div class="flex items-center gap-3">
<h3 class="text-2xl font-semibold leading-6 text-ink-gray-9">
{{ editMode ? __('Edit Task') : __('Create Task') }}
</h3>
<Button v-if="task?.reference_docname" size="sm" :label="task.reference_doctype == 'CRM Deal'
? __('Open Deal')
: __('Open Lead')
" @click="redirect()">
<Button
v-if="task?.reference_docname"
size="sm"
:label="
task.reference_doctype == 'CRM Deal'
? __('Open Deal')
: __('Open Lead')
"
@click="redirect()"
>
<template #suffix>
<ArrowUpRightIcon class="w-4 h-4" />
</template>
@ -27,17 +36,29 @@
<template #body-content>
<div class="flex flex-col gap-4">
<div>
<FormControl ref="title" :label="__('Title')" v-model="_task.title" :placeholder="__('Call with John Doe')"
required />
<FormControl
ref="title"
:label="__('Title')"
v-model="_task.title"
:placeholder="__('Call with John Doe')"
required
/>
</div>
<div>
<div class="mb-1.5 text-xs text-ink-gray-5">
{{ __('Description') }}
</div>
<TextEditor variant="outline" ref="description"
<TextEditor
variant="outline"
ref="description"
editor-class="!prose-sm overflow-auto min-h-[180px] max-h-80 py-1.5 px-2 rounded border border-[--surface-gray-2] bg-surface-gray-2 placeholder-ink-gray-4 hover:border-outline-gray-modals hover:bg-surface-gray-3 hover:shadow-sm focus:bg-surface-white focus:border-outline-gray-4 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3 text-ink-gray-8 transition-colors"
:bubbleMenu="true" :content="_task.description" @change="(val) => (_task.description = val)" :placeholder="__('Took a call with John Doe and discussed the new project.')
" />
:bubbleMenu="true"
:content="_task.description"
@change="(val) => (_task.description = val)"
:placeholder="
__('Took a call with John Doe and discussed the new project.')
"
/>
</div>
<div class="flex flex-wrap items-center gap-2">
<Dropdown :options="taskStatusOptions(updateTaskStatus)">
@ -47,24 +68,38 @@
</template>
</Button>
</Dropdown>
<Link class="form-control" :value="getUser(_task.assigned_to).full_name" doctype="User"
@change="(option) => (_task.assigned_to = option)" :placeholder="__('John Doe')" :hideMe="true">
<template #prefix>
<UserAvatar class="mr-2 !h-4 !w-4" :user="_task.assigned_to" />
</template>
<template #item-prefix="{ option }">
<UserAvatar class="mr-2" :user="option.value" size="sm" />
</template>
<template #item-label="{ option }">
<Tooltip :text="option.value">
<div class="cursor-pointer text-ink-gray-9">
{{ getUser(option.value).full_name }}
</div>
</Tooltip>
</template>
<Link
class="form-control"
:value="getUser(_task.assigned_to).full_name"
doctype="User"
@change="(option) => (_task.assigned_to = option)"
:placeholder="__('John Doe')"
:filters="{
name: ['in', users.data.crmUsers?.map((user) => user.name)],
}"
:hideMe="true"
>
<template #prefix>
<UserAvatar class="mr-2 !h-4 !w-4" :user="_task.assigned_to" />
</template>
<template #item-prefix="{ option }">
<UserAvatar class="mr-2" :user="option.value" size="sm" />
</template>
<template #item-label="{ option }">
<Tooltip :text="option.value">
<div class="cursor-pointer text-ink-gray-9">
{{ getUser(option.value).full_name }}
</div>
</Tooltip>
</template>
</Link>
<DateTimePicker class="datepicker w-36" v-model="_task.due_date" :placeholder="__('01/04/2024 11:30 PM')"
:formatter="(date) => getFormat(date, '', true, true)" input-class="border-none" />
<DateTimePicker
class="datepicker w-36"
v-model="_task.due_date"
:placeholder="__('01/04/2024 11:30 PM')"
:formatter="(date) => getFormat(date, '', true, true)"
input-class="border-none"
/>
<Dropdown :options="taskPriorityOptions(updateTaskPriority)">
<Button :label="_task.priority" class="justify-between w-full">
<template #prefix>
@ -114,7 +149,7 @@ const tasks = defineModel('reloadTasks')
const emit = defineEmits(['updateTask', 'after'])
const router = useRouter()
const { getUser } = usersStore()
const { users, getUser } = usersStore()
const { updateOnboardingStep } = useOnboarding('frappecrm')
const error = ref(null)
@ -164,20 +199,24 @@ async function updateTask() {
emit('after', d)
}
} else {
let d = await call('frappe.client.insert', {
doc: {
doctype: 'CRM Task',
reference_doctype: props.doctype,
reference_docname: props.doc || null,
..._task.value,
let d = await call(
'frappe.client.insert',
{
doc: {
doctype: 'CRM Task',
reference_doctype: props.doctype,
reference_docname: props.doc || null,
..._task.value,
},
},
}, {
onError: (err) => {
if (err.error.exc_type == 'MandatoryError') {
error.value = "Title is mandatory"
}
}
})
{
onError: (err) => {
if (err.error.exc_type == 'MandatoryError') {
error.value = 'Title is mandatory'
}
},
},
)
if (d.name) {
updateOnboardingStep('create_first_task')
capture('task_created')

4
frontend/src/components/Settings/ERPNextSettings.vue
View File

@ -1,8 +1,8 @@
<template>
<SettingsPage
doctype="ERPNext CRM Settings"
:title="__('ERPNext Settings')"
:successMessage="__('ERPNext Settings updated')"
:title="__('ERPNext settings')"
:successMessage="__('ERPNext settings updated')"
class="p-8"
/>
</template>

8
frontend/src/components/Settings/EmailAccountCard.vue
View File

@ -1,19 +1,19 @@
<template>
<div
class="flex items-center justify-between p-1 py-3 border-b border-gray-200 dark:border-gray-700 cursor-pointer"
class="flex items-center justify-between p-1 py-3 border-b border-outline-gray-modals 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-ink-gray-9">
<p class="text-sm font-semibold text-ink-gray-8">
{{ emailAccount.email_account_name }}
</p>
<div class="text-sm text-gray-500">{{ emailAccount.email_id }}</div>
<div class="text-sm text-ink-gray-4">{{ emailAccount.email_id }}</div>
</div>
</div>
<div>
<Badge variant="subtle" :label="badgeTitle" :theme="gray" />
<Badge variant="subtle" :label="badgeTitle" theme="gray" />
</div>
<!-- email id -->
</div>

40
frontend/src/components/Settings/EmailAccountList.vue
View File

@ -1,22 +1,30 @@
<template>
<div>
<!-- header -->
<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 class="flex justify-between text-ink-gray-8">
<div class="flex flex-col gap-1 w-9/12">
<h2 class="flex gap-2 text-xl font-semibold leading-none h-5">
{{ __('Email accounts') }}
</h2>
<p class="text-p-base text-ink-gray-6">
{{
__(
'Manage your email accounts to send and receive emails directly from CRM. You can add multiple accounts and set one as default for incoming and outgoing emails.',
)
}}
</p>
</div>
<div class="flex item-center space-x-2 w-3/12 justify-end">
<Button
:label="__('Add Account')"
theme="gray"
variant="solid"
icon-left="plus"
@click="emit('update:step', 'email-add')"
/>
</div>
</div>
<!-- list accounts -->
<div
v-if="!emailAccounts.loading && Boolean(emailAccounts.data?.length)"
@ -30,7 +38,7 @@
</div>
</div>
<!-- fallback if no email accounts -->
<div v-else class="flex items-center justify-center h-64 text-gray-500">
<div v-else class="flex items-center justify-center h-64 text-ink-gray-4">
{{ __('Please add an email account to continue.') }}
</div>
</div>

22
frontend/src/components/Settings/EmailAdd.vue
View File

@ -2,10 +2,10 @@
<div class="flex flex-col h-full gap-4">
<!-- title and desc -->
<div role="heading" aria-level="1" class="flex flex-col gap-1">
<h2 class="text-xl font-semibold text-ink-gray-9">
<h2 class="text-xl font-semibold text-ink-gray-8">
{{ __('Setup Email') }}
</h2>
<p class="text-sm text-gray-600">
<p class="text-sm text-ink-gray-5">
{{ __('Choose the email service provider you want to configure.') }}
</p>
</div>
@ -27,14 +27,15 @@
<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-400 dark:ring-gray-700 text-gray-700 dark:text-gray-500"
class="flex items-center gap-2 p-2 rounded-md ring-1 ring-outline-gray-3 text-ink-gray-6"
>
<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="underline"
>here</a
>.
<a :href="selectedService.link" target="_blank" class="underline">
{{ __('here') }}
</a>
.
</div>
</div>
<!-- service provider fields -->
@ -66,23 +67,22 @@
:name="field.name"
:type="field.type"
/>
<p class="text-gray-500 text-p-sm">{{ field.description }}</p>
<p class="text-ink-gray-4 text-p-sm">{{ field.description }}</p>
</div>
</div>
<ErrorMessage v-if="error" class="ml-1" :message="error" />
<ErrorMessage class="ml-1" :message="error" />
</div>
</div>
<!-- action button -->
<div v-if="selectedService" class="flex justify-between mt-auto">
<Button
label="Back"
theme="gray"
:label="__('Back')"
variant="outline"
:disabled="addEmailRes.loading"
@click="emit('update:step', 'email-list')"
/>
<Button
label="Create"
:label="__('Create')"
variant="solid"
:loading="addEmailRes.loading"
@click="createEmailAccount"

16
frontend/src/components/Settings/EmailEdit.vue
View File

@ -2,7 +2,7 @@
<div class="flex flex-col h-full gap-4">
<!-- title and desc -->
<div role="heading" aria-level="1" class="flex justify-between gap-1">
<h2 class="text-xl font-semibold text-ink-gray-9">
<h2 class="text-xl font-semibold text-ink-gray-8">
{{ __('Edit Email') }}
</h2>
</div>
@ -14,16 +14,16 @@
</div>
<!-- banner for setting up email account -->
<div
class="flex items-center gap-2 p-2 rounded-md ring-1 ring-gray-400 dark:ring-gray-700"
class="flex items-center gap-2 p-2 rounded-md ring-1 ring-outline-gray-3"
>
<CircleAlert
class="size-6 text-gray-500 w-min-5 w-max-5 min-h-5 max-w-5"
class="size-6 text-ink-gray-4 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">
<div class="text-xs text-ink-gray-6 text-wrap">
{{ info.description }}
<a :href="info.link" target="_blank" class="underline">{{
__('here')
}}</a>
<a :href="info.link" target="_blank" class="underline">
{{ __('here') }}
</a>
.
</div>
</div>
@ -56,7 +56,7 @@
:name="field.name"
:type="field.type"
/>
<p class="text-gray-500 text-p-sm">{{ field.description }}</p>
<p class="text-ink-gray-4 text-p-sm">{{ field.description }}</p>
</div>
</div>
<ErrorMessage v-if="error" class="ml-1" :message="error" />

11
frontend/src/components/Settings/EmailProviderIcon.vue
View File

@ -1,14 +1,11 @@
<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-gray-500 dark:ring-gray-100': selected }"
class="flex items-center justify-center w-8 h-8 bg-surface-gray-2 cursor-pointer rounded-xl hover:bg-surface-gray-3"
:class="{ 'ring-2 ring-outline-gray-4': selected }"
>
<img :src="logo" class="w-4 h-4" />
</div>
<p
v-if="serviceName"
class="text-xs text-center text-gray-700 dark:text-gray-500 mt-2"
>
<p v-if="serviceName" class="text-xs text-center text-ink-gray-6 mt-2">
{{ serviceName }}
</p>
</template>
@ -29,5 +26,3 @@ defineProps({
},
})
</script>
<style scoped></style>

53
frontend/src/components/Settings/GeneralSettings.vue
View File

@ -1,14 +1,29 @@
<template>
<div class="flex h-full flex-col gap-8 p-8 text-ink-gray-9">
<h2 class="flex gap-2 text-xl font-semibold leading-none h-5">
{{ __('General') }}
<Badge
v-if="settings.isDirty"
:label="__('Not Saved')"
variant="subtle"
theme="orange"
/>
</h2>
<div class="flex h-full flex-col gap-6 p-8 text-ink-gray-8">
<div class="flex justify-between">
<div class="flex flex-col gap-1 w-9/12">
<h2 class="flex gap-2 text-xl font-semibold leading-none h-5">
{{ __('General') }}
<Badge
v-if="settings.isDirty"
:label="__('Not Saved')"
variant="subtle"
theme="orange"
/>
</h2>
<p class="text-p-base text-ink-gray-6">
{{ __('Configure general settings for your CRM') }}
</p>
</div>
<div class="flex item-center space-x-2 w-3/12 justify-end">
<Button
variant="solid"
:label="__('Update')"
:disabled="!settings.isDirty"
@click="updateSettings"
/>
</div>
</div>
<div v-if="settings.doc" class="flex-1 flex flex-col gap-8 overflow-y-auto">
<div class="flex w-full">
@ -16,14 +31,14 @@
type="text"
class="w-1/2"
v-model="settings.doc.brand_name"
:label="__('Brand Name')"
:label="__('Brand name')"
/>
</div>
<!-- logo -->
<div class="flex flex-col justify-between gap-4">
<span class="text-base font-semibold text-ink-gray-9">
<span class="text-base font-semibold text-ink-gray-8">
{{ __('Logo') }}
</span>
<div class="flex flex-1 gap-5">
@ -58,7 +73,7 @@
<!-- favicon -->
<div class="flex flex-col justify-between gap-4">
<span class="text-base font-semibold text-ink-gray-9">
<span class="text-base font-semibold text-ink-gray-8">
{{ __('Favicon') }}
</span>
<div class="flex flex-1 gap-5">
@ -93,7 +108,7 @@
<!-- Home actions -->
<div class="flex flex-col justify-between gap-4">
<span class="text-base font-semibold text-ink-gray-9">
<span class="text-base font-semibold text-ink-gray-8">
{{ __('Home actions') }}
</span>
<div class="flex flex-1">
@ -107,15 +122,7 @@
</div>
</div>
<div class="flex justify-between flex-row-reverse">
<Button
variant="solid"
:label="__('Update')"
:disabled="!settings.isDirty"
@click="updateSettings"
/>
<ErrorMessage :message="settings.save.error" />
</div>
<ErrorMessage :message="settings.save.error" />
</div>
</template>
<script setup>

111
frontend/src/components/Settings/InviteMemberPage.vue → frontend/src/components/Settings/InviteUserPage.vue
View File

@ -1,8 +1,28 @@
<template>
<div class="flex h-full flex-col gap-8 p-8 text-ink-gray-9">
<h2 class="flex gap-2 text-xl font-semibold leading-none h-5">
{{ __('Send Invites To') }}
</h2>
<div class="flex h-full flex-col gap-6 p-8 text-ink-gray-8">
<div class="flex justify-between">
<div class="flex flex-col gap-1 w-9/12">
<h2 class="flex gap-2 text-xl font-semibold leading-none h-5">
{{ __('Send invites to') }}
</h2>
<p class="text-p-base text-ink-gray-6">
{{
__(
'Invite users to access CRM. Specify their roles to control access and permissions',
)
}}
</p>
</div>
<div class="flex item-center space-x-2 w-3/12 justify-end">
<Button
:label="__('Send Invites')"
variant="solid"
:disabled="!invitees.length"
@click="inviteByEmail.submit()"
:loading="inviteByEmail.loading"
/>
</div>
</div>
<div class="flex-1 flex flex-col gap-8 overflow-y-auto">
<div>
<label class="block text-xs text-ink-gray-5 mb-1.5">
@ -11,7 +31,7 @@
<div
class="p-2 group bg-surface-gray-2 hover:bg-surface-gray-3 rounded"
>
<MultiSelectEmailInput
<MultiSelectUserInput
class="flex-1"
inputClass="!bg-surface-gray-2 hover:!bg-surface-gray-3 group-hover:!bg-surface-gray-3"
:placeholder="__('john@doe.com')"
@ -20,18 +40,21 @@
:error-message="
(value) => __('{0} is an invalid email address', [value])
"
:fetchContacts="false"
:fetchUsers="false"
/>
</div>
<div
v-if="userExistMessage || inviteeExistMessage"
class="text-xs text-ink-red-3 mt-1.5"
>
{{ userExistMessage || inviteeExistMessage }}
</div>
<FormControl
type="select"
class="mt-4"
v-model="role"
:label="__('Invite as')"
:options="[
{ label: __('Regular Access'), value: 'Sales User' },
{ label: __('Manager Access'), value: 'Sales Manager' },
]"
:options="roleOptions"
:description="description"
/>
</div>
@ -49,7 +72,7 @@
:key="user.name"
>
<div class="text-base">
<span class="text-ink-gray-9">
<span class="text-ink-gray-8">
{{ user.email }}
</span>
<span class="text-ink-gray-5">
@ -76,21 +99,13 @@
</div>
</template>
</div>
<div class="flex justify-between items-center gap-2">
<div><ErrorMessage v-if="error" :message="error" /></div>
<Button
:label="__('Send Invites')"
variant="solid"
:disabled="!invitees.length"
@click="inviteByEmail.submit()"
:loading="inviteByEmail.loading"
/>
</div>
<ErrorMessage :message="error" />
</div>
</template>
<script setup>
import MultiSelectEmailInput from '@/components/Controls/MultiSelectEmailInput.vue'
import MultiSelectUserInput from '@/components/Controls/MultiSelectUserInput.vue'
import { validateEmail, convertArrayToString } from '@/utils'
import { usersStore } from '@/stores/users'
import {
createListResource,
createResource,
@ -101,23 +116,67 @@ import { useOnboarding } from 'frappe-ui/frappe'
import { ref, computed } from 'vue'
const { updateOnboardingStep } = useOnboarding('frappecrm')
const { users, isAdmin, isManager } = usersStore()
const invitees = ref([])
const role = ref('Sales User')
const error = ref(null)
const userExistMessage = computed(() => {
const inviteesSet = new Set(invitees.value)
if (!inviteesSet.size) return null
if (!users.data?.crmUsers?.length) return null
const existingEmails = users.data.crmUsers.map((user) => user.name)
const existingUsersSet = new Set(existingEmails)
const existingInvitees = inviteesSet.intersection(existingUsersSet)
if (existingInvitees.size === 0) return null
return __('User with email {0} already exists', [
Array.from(existingInvitees).join(', '),
])
})
const inviteeExistMessage = computed(() => {
const inviteesSet = new Set(invitees.value)
if (!inviteesSet.size) return null
if (!pendingInvitations.data?.length) return null
const existingEmails = pendingInvitations.data.map((user) => user.email)
const existingUsersSet = new Set(existingEmails)
const existingInvitees = inviteesSet.intersection(existingUsersSet)
if (existingInvitees.size === 0) return null
return __('User with email {0} already invited', [
Array.from(existingInvitees).join(', '),
])
})
const description = computed(() => {
return {
'System Manager':
'Can manage all aspects of the CRM, including user management, customizations and settings.',
'Sales Manager':
'Can manage and invite new members, and create public & private views (reports).',
'Can manage and invite new users, and create public & private views (reports).',
'Sales User':
'Can work with leads and deals and create private views (reports).',
}[role.value]
})
const roleOptions = computed(() => {
return [
{ value: 'Sales User', label: __('Sales User') },
...(isManager() ? [{ value: 'Sales Manager', label: __('Manager') }] : []),
...(isAdmin() ? [{ value: 'System Manager', label: __('Admin') }] : []),
]
})
const roleMap = {
'Sales User': __('Regular Access'),
'Sales Manager': __('Manager Access'),
'Sales User': __('Sales User'),
'Sales Manager': __('Manager'),
'System Manager': __('Admin'),
}
const inviteByEmail = createResource({
@ -130,7 +189,7 @@ const inviteByEmail = createResource({
},
onSuccess(data) {
if (data?.existing_invites?.length) {
error.value = __('Agent with email {0} already exists', [
error.value = __('User with email {0} already exists', [
data.existing_invites.join(', '),
])
} else {

58
frontend/src/components/Settings/ProfileImageEditor.vue
View File

@ -1,58 +0,0 @@
<template>
<FileUploader
@success="(file) => setUserImage(file.file_url)"
:validateFile="validateIsImageFile"
>
<template v-slot="{ file, progress, error, uploading, openFileSelector }">
<div class="flex flex-col items-center">
<button
class="group relative rounded-full border-2"
@click="openFileSelector"
>
<div
class="absolute inset-0 grid place-items-center rounded-full bg-gray-400/20 text-base text-ink-gray-5 transition-opacity"
:class="[
uploading ? 'opacity-100' : 'opacity-0 group-hover:opacity-100',
'drop-shadow-sm',
]"
>
<span
class="inline-block rounded-md bg-surface-gray-7/60 px-2 py-1 text-ink-white"
>
{{
uploading
? `Uploading ${progress}%`
: profile.user_image
? 'Change Image'
: 'Upload Image'
}}
</span>
</div>
<img
v-if="profile.user_image"
class="h-64 w-64 rounded-full object-cover"
:src="profile.user_image"
alt="Profile Photo"
/>
<div v-else class="h-64 w-64 rounded-full bg-surface-gray-2"></div>
</button>
<ErrorMessage class="mt-4" :message="error" />
<div class="mt-4 flex items-center gap-4">
<Button v-if="profile.user_image" @click="setUserImage(null)">
Remove
</Button>
</div>
</div>
</template>
</FileUploader>
</template>
<script setup>
import { FileUploader } from 'frappe-ui'
import { validateIsImageFile } from '@/utils';
const profile = defineModel()
function setUserImage(url) {
profile.value.user_image = url
}
</script>

216
frontend/src/components/Settings/ProfileSettings.vue
View File

@ -1,140 +1,160 @@
<template>
<div class="flex h-full flex-col gap-8 p-8 text-ink-gray-9">
<div class="flex-1 flex flex-col gap-8 mt-2 overflow-y-auto">
<div class="flex h-full flex-col gap-6 p-8 text-ink-gray-8">
<div class="flex-1 flex flex-col gap-6 mt-2 overflow-y-auto">
<div v-if="profile" class="flex w-full items-center justify-between">
<div class="flex items-center gap-4">
<Avatar
class="!size-16"
:image="profile.user_image"
:label="profile.full_name"
/>
<div class="flex flex-col gap-1">
<span class="text-2xl font-semibold text-ink-gray-9">{{
profile.full_name
}}</span>
<span class="text-base text-ink-gray-7">{{ profile.email }}</span>
</div>
</div>
<Button
:label="__('Edit profile photo')"
@click="showEditProfilePhotoModal = true"
/>
<Dialog
:options="{ title: __('Edit profile photo') }"
v-model="showEditProfilePhotoModal"
<FileUploader
@success="(file) => updateImage(file.file_url)"
:validateFile="validateIsImageFile"
>
<template #body-content>
<ProfileImageEditor v-model="profile" />
<template #default="{ openFileSelector, error: _error }">
<div class="flex items-center gap-4">
<div class="group relative !size-[66px]">
<Avatar
class="!size-16"
:image="profile.user_image"
:label="profile.full_name"
/>
<component
:is="profile.user_image ? Dropdown : 'div'"
v-bind="
profile.user_image
? {
options: [
{
icon: 'upload',
label: profile.user_image
? __('Change image')
: __('Upload image'),
onClick: openFileSelector,
},
{
icon: 'trash-2',
label: __('Remove image'),
onClick: () => updateImage(),
},
],
}
: { onClick: openFileSelector }
"
class="!absolute bottom-0 left-0 right-0"
>
<div
class="z-1 absolute bottom-0.5 left-0 right-0.5 flex h-9 cursor-pointer items-center justify-center rounded-b-full bg-black bg-opacity-40 pt-3 opacity-0 duration-300 ease-in-out group-hover:opacity-100"
style="
-webkit-clip-path: inset(12px 0 0 0);
clip-path: inset(12px 0 0 0);
"
>
<CameraIcon class="size-4 cursor-pointer text-white" />
</div>
</component>
</div>
<div class="flex flex-col gap-1">
<span class="text-2xl font-semibold text-ink-gray-8">
{{ profile.full_name }}
</span>
<span class="text-base text-ink-gray-7">
{{ profile.email }}
</span>
<ErrorMessage :message="__(_error)" />
</div>
</div>
</template>
<template #actions>
<Button
variant="solid"
class="w-full"
:loading="loading"
@click="updateUser"
:label="__('Save')"
/>
</template>
</Dialog>
</FileUploader>
<Button
:label="__('Change Password')"
icon-left="lock"
@click="showChangePasswordModal = true"
/>
<ChangePasswordModal
v-if="showChangePasswordModal"
v-model="showChangePasswordModal"
/>
</div>
<div class="flex flex-col gap-4">
<div class="flex justify-between gap-4">
<FormControl
class="w-full"
label="First name"
:label="__('First name')"
v-model="profile.first_name"
/>
<FormControl
class="w-full"
label="Last name"
:label="__('Last name')"
v-model="profile.last_name"
/>
</div>
<div class="flex justify-between gap-4">
<FormControl
class="w-full"
label="Email"
v-model="profile.email"
:disabled="true"
/>
<Password
class="w-full"
label="Set new password"
v-model="profile.new_password"
/>
</div>
</div>
</div>
<div class="flex justify-between flex-row-reverse">
<div class="flex justify-between items-center">
<div>
<ErrorMessage :message="error" />
</div>
<Button
variant="solid"
:label="__('Update')"
:loading="loading"
@click="updateUser"
:disabled="!dirty"
:loading="setUser.loading"
@click="setUser.submit()"
/>
<ErrorMessage :message="error" />
</div>
</div>
</template>
<script setup>
import Password from '@/components/Controls/Password.vue'
import ProfileImageEditor from '@/components/Settings/ProfileImageEditor.vue'
import ChangePasswordModal from '@/components/Modals/ChangePasswordModal.vue'
import CameraIcon from '@/components/Icons/CameraIcon.vue'
import { usersStore } from '@/stores/users'
import { Dialog, Avatar, createResource, ErrorMessage, toast } from 'frappe-ui'
import { useOnboarding } from 'frappe-ui/frappe'
import { validateIsImageFile } from '@/utils'
import {
Dropdown,
FileUploader,
Avatar,
createResource,
toast,
} from 'frappe-ui'
import { ref, computed, onMounted } from 'vue'
const { getUser, users } = usersStore()
const { updateOnboardingStep } = useOnboarding('frappecrm')
const user = computed(() => getUser() || {})
const showEditProfilePhotoModal = ref(false)
const profile = ref({})
const loading = ref(false)
const error = ref('')
const showChangePasswordModal = ref(false)
function updateUser() {
loading.value = true
const dirty = computed(() => {
return (
profile.value.first_name !== user.value.first_name ||
profile.value.last_name !== user.value.last_name
)
})
let passwordUpdated = false
if (profile.value.new_password) {
passwordUpdated = true
}
const fieldname = {
first_name: profile.value.first_name,
last_name: profile.value.last_name,
user_image: profile.value.user_image,
email: profile.value.email,
new_password: profile.value.new_password,
}
createResource({
url: 'frappe.client.set_value',
params: {
const setUser = createResource({
url: 'frappe.client.set_value',
makeParams() {
return {
doctype: 'User',
name: user.value.name,
fieldname,
},
auto: true,
onSuccess: () => {
if (passwordUpdated) {
updateOnboardingStep('setup_your_password')
}
loading.value = false
error.value = ''
profile.value.new_password = ''
showEditProfilePhotoModal.value = false
toast.success(__('Profile updated successfully'))
users.reload()
},
onError: (err) => {
loading.value = false
error.value = err.message
},
})
fieldname: {
first_name: profile.value.first_name,
last_name: profile.value.last_name,
user_image: profile.value.user_image,
},
}
},
onSuccess: () => {
error.value = ''
toast.success(__('Profile updated successfully'))
users.reload()
},
onError: (err) => {
error.value = err.messages[0] || __('Failed to update profile')
},
})
function updateImage(fileUrl = '') {
profile.value.user_image = fileUrl
setUser.submit()
}
onMounted(() => {

32
frontend/src/components/Settings/Settings.vue
View File

@ -7,7 +7,7 @@
<template #body>
<div class="flex h-[calc(100vh_-_8rem)]">
<div class="flex flex-col p-2 w-52 shrink-0 bg-surface-gray-2">
<h1 class="px-2 pt-2 mb-3 text-lg font-semibold text-ink-gray-9">
<h1 class="px-2 pt-2 mb-3 text-lg font-semibold text-ink-gray-8">
{{ __('Settings') }}
</h1>
<div v-for="tab in tabs">
@ -28,20 +28,12 @@
? 'bg-surface-selected shadow-sm hover:bg-surface-selected'
: 'hover:bg-surface-gray-3'
"
@click="activeTab = i"
@click="activeSettingsPage = i.label"
/>
</nav>
</div>
</div>
<div
class="relative flex flex-col flex-1 overflow-y-auto bg-surface-modal"
>
<Button
class="absolute right-5 top-5"
variant="ghost"
icon="x"
@click="showSettings = false"
/>
<div class="flex flex-col flex-1 overflow-y-auto bg-surface-modal">
<component :is="activeTab.component" v-if="activeTab" />
</div>
</div>
@ -52,10 +44,10 @@
import WhatsAppIcon from '@/components/Icons/WhatsAppIcon.vue'
import ERPNextIcon from '@/components/Icons/ERPNextIcon.vue'
import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
import InviteIcon from '@/components/Icons/InviteIcon.vue'
import Email2Icon from '@/components/Icons/Email2Icon.vue'
import Users from '@/components/Settings/Users.vue'
import GeneralSettings from '@/components/Settings/GeneralSettings.vue'
import InviteMemberPage from '@/components/Settings/InviteMemberPage.vue'
import InviteUserPage from '@/components/Settings/InviteUserPage.vue'
import ProfileSettings from '@/components/Settings/ProfileSettings.vue'
import WhatsAppSettings from '@/components/Settings/WhatsAppSettings.vue'
import ERPNextSettings from '@/components/Settings/ERPNextSettings.vue'
@ -68,7 +60,7 @@ import {
showSettings,
activeSettingsPage,
} from '@/composables/settings'
import { Dialog, Button, Avatar } from 'frappe-ui'
import { Dialog, Avatar } from 'frappe-ui'
import { ref, markRaw, computed, watch, h } from 'vue'
const { isManager, isAgent, getUser } = usersStore()
@ -98,9 +90,15 @@ const tabs = computed(() => {
condition: () => isManager(),
},
{
label: __('Invite Members'),
icon: InviteIcon,
component: markRaw(InviteMemberPage),
label: __('Users'),
icon: 'user',
component: markRaw(Users),
condition: () => isManager(),
},
{
label: __('Invite User'),
icon: 'user-plus',
component: markRaw(InviteUserPage),
condition: () => isManager(),
},
{

48
frontend/src/components/Settings/SettingsPage.vue
View File

@ -1,16 +1,28 @@
<template>
<div class="flex h-full flex-col gap-8">
<h2
class="flex gap-2 text-xl font-semibold leading-none h-5 text-ink-gray-9"
>
<div>{{ title || __(doctype) }}</div>
<Badge
v-if="data.isDirty"
:label="__('Not Saved')"
variant="subtle"
theme="orange"
/>
</h2>
<div class="flex h-full flex-col gap-6">
<div class="flex justify-between">
<div class="flex flex-col gap-1 w-9/12">
<h2
class="flex gap-2 text-xl font-semibold leading-none h-5 text-ink-gray-8"
>
{{ title || __(doctype) }}
<Badge
v-if="data.isDirty"
:label="__('Not Saved')"
variant="subtle"
theme="orange"
/>
</h2>
</div>
<div class="flex item-center space-x-2 w-3/12 justify-end">
<Button
:loading="data.save.loading"
:label="__('Update')"
variant="solid"
@click="data.save.submit()"
/>
</div>
</div>
<div v-if="!data.get.loading" class="flex-1 overflow-y-auto">
<FieldLayout
v-if="data?.doc && tabs"
@ -22,17 +34,7 @@
<div v-else class="flex flex-1 items-center justify-center">
<Spinner class="size-8" />
</div>
<div class="flex justify-between gap-2">
<div>
<ErrorMessage class="mt-2" :message="data.save.error" />
</div>
<Button
:loading="data.save.loading"
:label="__('Update')"
variant="solid"
@click="data.save.submit()"
/>
</div>
<ErrorMessage :message="data.save.error" />
</div>
</template>
<script setup>

58
frontend/src/components/Settings/TelephonySettings.vue
View File

@ -1,16 +1,31 @@
<template>
<div class="flex h-full flex-col gap-8 p-8">
<h2
class="flex gap-2 text-xl font-semibold leading-none h-5 text-ink-gray-9"
>
<div>{{ __('Telephony Settings') }}</div>
<Badge
v-if="twilio.isDirty || exotel.isDirty || mediumChanged"
:label="__('Not Saved')"
variant="subtle"
theme="orange"
/>
</h2>
<div class="flex h-full flex-col gap-6 p-8">
<div class="flex justify-between">
<div class="flex flex-col gap-1 w-9/12">
<h2
class="flex gap-2 text-xl font-semibold leading-none h-5 text-ink-gray-8"
>
{{ __('Telephony settings') }}
<Badge
v-if="twilio.isDirty || exotel.isDirty || mediumChanged"
:label="__('Not Saved')"
variant="subtle"
theme="orange"
/>
</h2>
<p class="text-p-base text-ink-gray-6">
{{ __('Configure telephony settings for your CRM') }}
</p>
</div>
<div class="flex item-center space-x-2 w-3/12 justify-end">
<Button
:loading="twilio.save.loading || exotel.save.loading"
:label="__('Update')"
variant="solid"
@click="update"
/>
</div>
</div>
<div
v-if="!twilio.get.loading || !exotel.get.loading"
class="flex-1 flex flex-col gap-8 overflow-y-auto"
@ -31,7 +46,7 @@
<!-- Twilio -->
<div v-if="isManager()" class="flex flex-col justify-between gap-4">
<span class="text-base font-semibold text-ink-gray-9">
<span class="text-base font-semibold text-ink-gray-8">
{{ __('Twilio') }}
</span>
<FieldLayout
@ -44,7 +59,7 @@
<!-- Exotel -->
<div v-if="isManager()" class="flex flex-col justify-between gap-4">
<span class="text-base font-semibold text-ink-gray-9">
<span class="text-base font-semibold text-ink-gray-8">
{{ __('Exotel') }}
</span>
<FieldLayout
@ -58,20 +73,7 @@
<div v-else class="flex flex-1 items-center justify-center">
<Spinner class="size-8" />
</div>
<div class="flex justify-between gap-2">
<div>
<ErrorMessage
class="mt-2"
:message="twilio.save.error || exotel.save.error || error"
/>
</div>
<Button
:loading="twilio.save.loading || exotel.save.loading"
:label="__('Update')"
variant="solid"
@click="update"
/>
</div>
<ErrorMessage :message="twilio.save.error || exotel.save.error || error" />
</div>
</template>
<script setup>

244
frontend/src/components/Settings/Users.vue Normal file
View File

@ -0,0 +1,244 @@
<template>
<div class="flex h-full flex-col gap-6 p-8 text-ink-gray-8">
<!-- Header -->
<div class="flex justify-between">
<div class="flex flex-col gap-1 w-9/12">
<h2 class="flex gap-2 text-xl font-semibold leading-none h-5">
{{ __('Users') }}
</h2>
<p class="text-p-base text-ink-gray-6">
{{
__(
'Manage CRM users by adding or inviting them, and assign roles to control their access and permissions',
)
}}
</p>
</div>
<div class="flex item-center space-x-2 w-3/12 justify-end">
<Dropdown
:options="[
{
label: __('Add Existing User'),
onClick: () => (showAddExistingModal = true),
},
{
label: __('Invite New User'),
onClick: () => (activeSettingsPage = 'Invite User'),
},
]"
:button="{
label: __('New'),
iconLeft: 'plus',
variant: 'solid',
}"
placement="right"
/>
</div>
</div>
<!-- loading state -->
<div v-if="users.loading" class="flex mt-28 justify-between w-full h-full">
<Button
:loading="users.loading"
variant="ghost"
class="w-full"
size="2xl"
/>
</div>
<!-- Empty State -->
<div
v-if="
!users.loading &&
users.data?.crmUsers?.length === 1 &&
users.data?.crmUsers[0].name == 'Administrator'
"
class="flex justify-between w-full h-full"
>
<div
class="text-ink-gray-4 border border-dashed rounded w-full flex items-center justify-center"
>
{{ __('No users found') }}
</div>
</div>
<!-- Users List -->
<ul
v-if="!users.loading && Boolean(users.data?.crmUsers?.length)"
class="divide-y divide-outline-gray-modals overflow-auto"
>
<template v-for="user in users.data?.crmUsers" :key="user.name">
<li
v-if="user.name !== 'Administrator'"
class="flex items-center justify-between py-2"
>
<div class="flex items-center">
<Avatar
:image="user.user_image"
:label="user.full_name"
size="xl"
/>
<div class="flex flex-col gap-1 ml-3">
<div class="flex items-center text-base text-ink-gray-8 h-4">
{{ user.full_name }}
</div>
<div class="text-base text-ink-gray-5">
{{ user.name }}
</div>
</div>
</div>
<div class="flex gap-2 items-center flex-row-reverse">
<Dropdown
:options="getMoreOptions(user)"
:button="{
icon: 'more-horizontal',
}"
placement="right"
/>
<Dropdown
:options="getDropdownOptions(user)"
:button="{
label: roleMap[getUserRole(user.name)],
iconRight: 'chevron-down',
}"
placement="right"
/>
</div>
</li>
</template>
<!-- Load More Button -->
<div
v-if="!users.loading && users.hasNextPage"
class="flex justify-center"
>
<Button
class="mt-3.5 p-2"
@click="() => users.next()"
:loading="users.loading"
:label="__('Load More')"
icon-left="refresh-cw"
/>
</div>
</ul>
</div>
<AddExistingUserModal
v-if="showAddExistingModal"
v-model="showAddExistingModal"
/>
</template>
<script setup>
import LucideCheck from '~icons/lucide/check'
import AddExistingUserModal from '@/components/Modals/AddExistingUserModal.vue'
import { activeSettingsPage } from '@/composables/settings'
import { usersStore } from '@/stores/users'
import { Avatar, toast, call } from 'frappe-ui'
import { ref, h } from 'vue'
const { users, getUserRole, isAdmin, isManager } = usersStore()
const showAddExistingModal = ref(false)
const roleMap = {
'System Manager': __('Admin'),
'Sales Manager': __('Manager'),
'Sales User': __('Sales User'),
}
function getMoreOptions(user) {
let options = [
{
label: __('Remove'),
icon: 'trash-2',
onClick: () => removeUser(user, true),
},
]
return options.filter((option) => option.condition?.() || true)
}
function getDropdownOptions(user) {
const userRole = getUserRole(user.name)
let options = [
{
label: __('Admin'),
component: (props) =>
RoleOption({
role: __('Admin'),
active: props.active,
selected: userRole === 'System Manager',
onClick: () => updateRole(user, 'System Manager'),
}),
condition: () => isAdmin(),
},
{
label: __('Manager'),
component: (props) =>
RoleOption({
role: __('Manager'),
active: props.active,
selected: userRole === 'Sales Manager',
onClick: () => updateRole(user, 'Sales Manager'),
}),
condition: () => isManager(),
},
{
label: __('Sales User'),
component: (props) =>
RoleOption({
role: __('Sales User'),
active: props.active,
selected: userRole === 'Sales User',
onClick: () => updateRole(user, 'Sales User'),
}),
},
]
return options.filter((option) => option.condition?.() || true)
}
function RoleOption({ active, role, onClick, selected }) {
return h(
'button',
{
class: [
active ? 'bg-surface-gray-2' : 'text-ink-gray-8',
'group flex w-full justify-between items-center rounded-md px-2 py-2 text-sm',
],
onClick: !selected ? onClick : null,
},
[
h('span', { class: 'whitespace-nowrap' }, role),
selected
? h(LucideCheck, {
class: ['h-4 w-4 shrink-0 text-ink-gray-7'],
'aria-hidden': true,
})
: null,
],
)
}
function updateRole(user, newRole) {
if (user.role === newRole) return
call('crm.api.user.update_user_role', {
user: user.name,
new_role: newRole,
}).then(() => {
toast.success(
__('{0} has been granted {1} access', [user.full_name, roleMap[newRole]]),
)
users.reload()
})
}
function removeUser(user) {
call('crm.api.user.remove_user', {
user: user.name,
}).then(() => {
toast.success(__('User {0} has been removed', [user.full_name]))
users.reload()
})
}
</script>

7
frontend/src/components/SidePanelLayout.vue
View File

@ -429,7 +429,7 @@ const emit = defineEmits(['afterFieldChange', 'reload'])
const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
getMeta(props.doctype)
const { isManager, getUser } = usersStore()
const { users, isManager, getUser } = usersStore()
const showSidePanelModal = ref(false)
@ -471,8 +471,11 @@ function parsedField(field) {
}
if (field.fieldtype === 'Link' && field.options === 'User') {
field.options = field.options
field.fieldtype = 'User'
field.link_filters = JSON.stringify({
...(field.link_filters ? JSON.parse(field.link_filters) : {}),
name: ['in', users.data?.crmUsers?.map((user) => user.name)],
})
}
let _field = {

5
frontend/src/components/Telephony/TaskPanel.vue
View File

@ -45,6 +45,9 @@
doctype="User"
@change="(option) => (task.assigned_to = option)"
:placeholder="__('John Doe')"
:filters="{
name: ['in', users.data?.crmUsers?.map((user) => user.name)],
}"
:hideMe="true"
>
<template #prefix>
@ -94,7 +97,7 @@ const props = defineProps({
},
})
const { getUser } = usersStore()
const { users, getUser } = usersStore()
function updateTaskStatus(status) {
props.task.status = status

4
frontend/src/composables/modals.js
View File

@ -6,4 +6,6 @@ export const quickEntryProps = ref({});
export const showAddressModal = ref(false);
export const addressProps = ref({});
export const showAboutModal = ref(false);
export const showAboutModal = ref(false);
export const showChangePasswordModal = ref(false);

22
frontend/src/stores/users.js
View File

@ -12,17 +12,17 @@ export const usersStore = defineStore('crm-users', () => {
const users = createResource({
url: 'crm.api.session.get_users',
cache: 'Users',
cache: 'crm-users',
initialData: [],
auto: true,
transform(users) {
for (let user of users) {
transform([allUsers, crmUsers]) {
for (let user of allUsers) {
usersByName[user.name] = user
if (user.name === 'Administrator') {
usersByName[user.email] = user
}
}
return users
return { allUsers, crmUsers }
},
onError(error) {
if (error && error.exc_type === 'AuthenticationError') {
@ -49,6 +49,10 @@ export const usersStore = defineStore('crm-users', () => {
return usersByName[email]
}
function isAdmin(email) {
return getUser(email).is_admin
}
function isManager(email) {
return getUser(email).is_manager
}
@ -57,10 +61,20 @@ export const usersStore = defineStore('crm-users', () => {
return getUser(email).is_agent
}
function getUserRole(email) {
const user = getUser(email)
if (user && user.role) {
return user.role
}
return null
}
return {
users,
getUser,
isAdmin,
isManager,
isAgent,
getUserRole,
}
})