Merge pull request #213 from shariquerik/settings

feat: Settings Page (Modal)

crm/api/doc.py

@@ -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

crm/api/session.py

@@ -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)

crm/api/whatsapp.py

@@ -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):

crm/fcrm/doctype/twilio_settings/twilio_settings.json

@@ -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",
+  "twiml_sid"
-  "section_break_ssqj",
-  "enabled",
-  "column_break_avmt",
-  "record_calls"
  ],
  "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",

frappe-ui

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

frontend/src/components/Settings/ProfileImageEditor.vue

@@ -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>

frontend/src/components/Settings/ProfileSettings.vue

@@ -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>

frontend/src/components/Settings/SettingsModal.vue

@@ -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>

frontend/src/components/Settings/SettingsPage.vue

@@ -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>

frontend/src/components/Settings/TwilioSettings.vue

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

frontend/src/components/Settings/WhatsAppSettings.vue

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

frontend/src/components/UserDropdown.vue

@@ -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')),

frontend/src/composables/settings.js

@@ -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',

frontend/src/stores/users.js

@@ -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,
       }