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

Merge pull request #213 from shariquerik/settings

Browse Source 
feat: Settings Page (Modal)
This commit is contained in:
Shariq Ansari 2024-06-12 15:56:43 +05:30 committed by GitHub
commit fc80e535b2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
15 changed files with 2121 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
crm/api/doc.py
View File

@ -534,8 +534,10 @@ def get_assigned_users(doctype, name, default_assigned_to=None):
@frappe.whitelist()
def get_fields(doctype: str):
def get_fields(doctype: str, allow_all_fieldtypes: bool = False):
not_allowed_fieldtypes = list(frappe.model.no_value_fields) + ["Read Only"]
if allow_all_fieldtypes:
not_allowed_fieldtypes = []
fields = frappe.get_meta(doctype).fields
_fields = []
@ -553,6 +555,7 @@ def get_fields(doctype: str):
"type": field.fieldtype,
"value": field.fieldname,
"options": field.options,
"mandatory": field.reqd,
})
return _fields

2
crm/api/session.py
View File

@ -5,7 +5,7 @@ import frappe
def get_users():
users = frappe.qb.get_query(
"User",
fields=["name", "email", "enabled", "user_image", "full_name", "user_type"],
fields=["name", "email", "enabled", "user_image", "first_name", "last_name", "full_name", "user_type"],
order_by="full_name asc",
distinct=True,
).run(as_dict=1)

6
crm/api/whatsapp.py
View File

@ -96,6 +96,12 @@ def is_whatsapp_enabled():
return False
return frappe.get_cached_value("WhatsApp Settings", "WhatsApp Settings", "enabled")
@frappe.whitelist()
def is_whatsapp_installed():
if not frappe.db.exists("DocType", "WhatsApp Settings"):
return False
return True
@frappe.whitelist()
def get_whatsapp_messages(reference_doctype, reference_name):

12
crm/fcrm/doctype/twilio_settings/twilio_settings.json
View File

@ -7,17 +7,17 @@
"editable_grid": 1,
"engine": "InnoDB",
"field_order": [
"section_break_ssqj",
"enabled",
"column_break_avmt",
"record_calls",
"section_break_malx",
"account_sid",
"api_key",
"api_secret",
"column_break_idds",
"auth_token",
"twiml_sid",
"section_break_ssqj",
"enabled",
"column_break_avmt",
"record_calls"
"twiml_sid"
],
"fields": [
{
@ -84,7 +84,7 @@
"index_web_pages_for_search": 1,
"issingle": 1,
"links": [],
"modified": "2024-01-13 14:24:16.726645",
"modified": "2024-06-11 17:42:38.256260",
"modified_by": "Administrator",
"module": "FCRM",
"name": "Twilio Settings",

2
frappe-ui

@ -1 +1 @@
Subproject commit 1eead791a7d5ed06363e0d04de9b1f5e15853b37
Subproject commit 0c0212cc5bbac151cffc6dc73dfbdf7b69d45ec2

64
frontend/src/components/Settings/ProfileImageEditor.vue Normal file
View File

@ -0,0 +1,64 @@
<template>
<FileUploader
@success="(file) => setUserImage(file.file_url)"
:validateFile="validateFile"
>
<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-gray-600 transition-opacity"
:class="[
uploading ? 'opacity-100' : 'opacity-0 group-hover:opacity-100',
'drop-shadow-sm',
]"
>
<span
class="inline-block rounded-md bg-gray-900/60 px-2 py-1 text-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-gray-100"></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'
const profile = defineModel()
function setUserImage(url) {
profile.value.user_image = url
}
function validateFile(file) {
let extn = file.name.split('.').pop().toLowerCase()
if (!['png', 'jpg'].includes(extn)) {
return 'Only PNG and JPG images are allowed'
}
}
</script>

100
frontend/src/components/Settings/ProfileSettings.vue Normal file
View File

@ -0,0 +1,100 @@
<template>
<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">{{ profile.full_name }}</span>
<span class="text-base text-gray-700">{{ profile.email }}</span>
</div>
</div>
<Button :label="__('Edit profile')" @click="showProfileModal = true" />
<Dialog
:options="{ title: __('Edit Profile') }"
v-model="showProfileModal"
@after-leave="editingProfilePhoto = false"
>
<template #body-content>
<div v-if="user" class="space-y-4">
<ProfileImageEditor v-model="profile" v-if="editingProfilePhoto" />
<template v-else>
<div class="flex items-center gap-4">
<Avatar
size="lg"
:image="profile.user_image"
:label="profile.full_name"
/>
<Button
:label="__('Edit Profile Photo')"
@click="editingProfilePhoto = true"
/>
</div>
<FormControl label="First Name" v-model="profile.first_name" />
<FormControl label="Last Name" v-model="profile.last_name" />
</template>
</div>
</template>
<template #actions>
<Button
v-if="editingProfilePhoto"
class="mb-2 w-full"
@click="editingProfilePhoto = false"
:label="__('Back')"
/>
<Button
variant="solid"
class="w-full"
:loading="loading"
@click="updateUser"
:label="__('Save')"
/>
</template>
</Dialog>
</div>
</template>
<script setup>
import ProfileImageEditor from '@/components/Settings/ProfileImageEditor.vue'
import { usersStore } from '@/stores/users'
import { Dialog, Avatar, createResource } from 'frappe-ui'
import { ref, computed, onMounted } from 'vue'
const { getUser, users } = usersStore()
const user = computed(() => getUser() || {})
const showProfileModal = ref(false)
const editingProfilePhoto = ref(false)
const profile = ref({})
const loading = ref(false)
function updateUser() {
loading.value = true
const fieldname = {
first_name: profile.value.first_name,
last_name: profile.value.last_name,
user_image: profile.value.user_image,
}
createResource({
url: 'frappe.client.set_value',
params: {
doctype: 'User',
name: user.value.name,
fieldname,
},
auto: true,
onSuccess: () => {
loading.value = false
showProfileModal.value = false
users.reload()
},
})
}
onMounted(() => {
profile.value = { ...user.value }
})
</script>

93
frontend/src/components/Settings/SettingsModal.vue Normal file
View File

@ -0,0 +1,93 @@
<template>
<Dialog v-model="show" :options="{ size: '5xl' }">
<template #body>
<div class="flex h-[calc(100vh_-_8rem)]">
<div class="flex w-52 shrink-0 flex-col bg-gray-50 p-2">
<h1 class="px-2 pt-2 text-lg font-semibold">
{{ __('Settings') }}
</h1>
<nav class="mt-3 space-y-1">
<SidebarLink
v-for="tab in tabs"
:icon="tab.icon"
:label="__(tab.label)"
class="w-full"
:class="
activeTab?.label == tab.label
? 'bg-white shadow-sm'
: 'hover:bg-gray-100'
"
@click="activeTab = tab"
/>
</nav>
<div
class="mb-2 mt-3 flex cursor-pointer gap-1.5 px-1 text-base font-medium text-gray-600 transition-all duration-300 ease-in-out"
>
<span>{{ __('Integrations') }}</span>
</div>
<nav class="space-y-1">
<SidebarLink
v-for="i in integrations"
:icon="i.icon"
:label="__(i.label)"
class="w-full"
:class="
activeTab?.label == i.label
? 'bg-white shadow-sm'
: 'hover:bg-gray-100'
"
@click="activeTab = i"
/>
</nav>
</div>
<div class="flex flex-1 flex-col overflow-y-auto p-8">
<component :is="activeTab.component" v-if="activeTab" />
</div>
</div>
</template>
</Dialog>
</template>
<script setup>
import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
import WhatsAppIcon from '@/components/Icons/WhatsAppIcon.vue'
import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
import ProfileSettings from '@/components/Settings/ProfileSettings.vue'
import WhatsAppSettings from '@/components/Settings/WhatsAppSettings.vue'
import TwilioSettings from '@/components/Settings/TwilioSettings.vue'
import SidebarLink from '@/components/SidebarLink.vue'
import { isWhatsappInstalled } from '@/composables/settings'
import { Dialog } from 'frappe-ui'
import { ref, markRaw, computed } from 'vue'
const show = defineModel()
let tabs = [
{
label: 'Profile',
icon: ContactsIcon,
component: markRaw(ProfileSettings),
},
]
let integrations = computed(() => {
let items = [
{
label: 'Twilio',
icon: PhoneIcon,
component: markRaw(TwilioSettings),
},
]
if (isWhatsappInstalled.value) {
items.push({
label: 'WhatsApp',
icon: WhatsAppIcon,
component: markRaw(WhatsAppSettings),
})
}
return items
})
const activeTab = ref(tabs[0])
</script>

97
frontend/src/components/Settings/SettingsPage.vue Normal file
View File

@ -0,0 +1,97 @@
<template>
<div class="flex h-full flex-col gap-8">
<h2 class="flex gap-2 text-xl font-semibold leading-none">
<div>{{ __(doctype) }}</div>
<Badge
:label="__('Not Saved')"
variant="subtle"
theme="orange"
v-if="data.isDirty"
/>
</h2>
<div v-if="!data.get.loading" class="flex-1 overflow-y-auto">
<Fields
v-if="data?.doc && sections"
:sections="sections"
:data="data.doc"
/>
</div>
<div v-else class="flex flex-1 items-center justify-center">
<Spinner />
</div>
<div class="flex flex-row-reverse">
<Button
:loading="data.save.loading"
:label="__('Update')"
variant="solid"
@click="update"
/>
</div>
</div>
</template>
<script setup>
import Fields from '@/components/Fields.vue'
import { createDocumentResource, createResource, Spinner, Badge } from 'frappe-ui'
import { computed } from 'vue'
const props = defineProps({
doctype: {
type: String,
required: true,
},
})
const fields = createResource({
url: 'crm.api.doc.get_fields',
cache: ['fields', props.doctype],
params: {
doctype: props.doctype,
allow_all_fieldtypes: true,
},
auto: true,
})
const data = createDocumentResource({
doctype: props.doctype,
name: props.doctype,
fields: ['*'],
cache: props.doctype,
auto: true,
})
const sections = computed(() => {
if (!fields.data) return []
let _sections = []
let fieldsData = fields.data
if (fieldsData[0].type !== 'Section Break') {
_sections.push({
label: 'General',
columns: 1,
fields: [],
})
}
fieldsData.forEach((field) => {
if (field.type === 'Section Break') {
_sections.push({
label: field.value,
columns: 1,
fields: [],
})
} else if (field.type === 'Column Break') {
_sections[_sections.length - 1].columns += 1
} else {
_sections[_sections.length - 1].fields.push({
...field,
name: field.value,
})
}
})
return _sections
})
function update() {
data.save.submit()
}
</script>

6
frontend/src/components/Settings/TwilioSettings.vue Normal file
View File

@ -0,0 +1,6 @@
<template>
<SettingsPage doctype="Twilio Settings" />
</template>
<script setup>
import SettingsPage from '@/components/Settings/SettingsPage.vue'
</script>

6
frontend/src/components/Settings/WhatsAppSettings.vue Normal file
View File

@ -0,0 +1,6 @@
<template>
<SettingsPage doctype="WhatsApp Settings" />
</template>
<script setup>
import SettingsPage from '@/components/Settings/SettingsPage.vue'
</script>

13
frontend/src/components/UserDropdown.vue
View File

@ -1,5 +1,5 @@
<template>
<Dropdown :options="dropdownOptions">
<Dropdown :options="dropdownOptions" v-bind="$attrs">
<template v-slot="{ open }">
<button
class="flex h-12 items-center rounded-md py-2 duration-300 ease-in-out"
@ -44,9 +44,11 @@
</button>
</template>
</Dropdown>
<SettingsModal v-model="showSettingsModal" />
</template>
<script setup>
import SettingsModal from '@/components/Settings/SettingsModal.vue'
import CRMLogo from '@/components/Icons/CRMLogo.vue'
import { sessionStore } from '@/stores/session'
import { usersStore } from '@/stores/users'
@ -65,6 +67,8 @@ const { getUser } = usersStore()
const user = computed(() => getUser() || {})
const showSettingsModal = ref(false)
let dropdownOptions = ref([
{
group: 'Manage',
@ -88,9 +92,14 @@ let dropdownOptions = ref([
],
},
{
group: 'Logout',
group: 'Others',
hideLabel: true,
items: [
{
icon: 'settings',
label: computed(() => __('Settings')),
onClick: () => (showSettingsModal.value = true),
},
{
icon: 'log-out',
label: computed(() => __('Log out')),

10
frontend/src/composables/settings.js
View File

@ -2,6 +2,7 @@ import { createResource } from 'frappe-ui'
import { computed, ref } from 'vue'
export const whatsappEnabled = ref(false)
export const isWhatsappInstalled = ref(false)
createResource({
url: 'crm.api.whatsapp.is_whatsapp_enabled',
cache: 'Is Whatsapp Enabled',
@ -10,6 +11,15 @@ createResource({
whatsappEnabled.value = Boolean(data)
},
})
createResource({
url: 'crm.api.whatsapp.is_whatsapp_installed',
cache: 'Is Whatsapp Installed',
auto: true,
onSuccess: (data) => {
isWhatsappInstalled.value = Boolean(data)
},
})
export const callEnabled = ref(false)
createResource({
url: 'crm.integrations.twilio.api.is_enabled',

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

@ -40,6 +40,8 @@ export const usersStore = defineStore('crm-users', () => {
name: email,
email: email,
full_name: email.split('@')[0],
first_name: email.split('@')[0],
last_name: '',
user_image: null,
role: null,
}

1780
yarn.lock
View File

File diff suppressed because it is too large Load Diff