Merge pull request #6 from frappe/revert-5-use-global-properties

frontend/src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <router-view v-if="$route.name == 'Login'" />
-  <CallUI v-else-if="$session.isLoggedIn">
+  <CallUI v-else-if="session().isLoggedIn">
     <DesktopLayout>
       <router-view />
     </DesktopLayout>
@@ -10,6 +10,7 @@
 
 <script setup>
 import DesktopLayout from '@/components/DesktopLayout.vue'
+import { sessionStore as session } from '@/stores/session'
 import CallUI from './components/CallUI.vue'
 import { Toasts } from 'frappe-ui'
 </script>

frontend/src/components/Activities.vue

@@ -52,7 +52,7 @@
           <div class="flex items-center gap-2">
             <UserAvatar :user="note.owner" size="xs" />
             <div class="text-sm text-gray-800">
-              {{ $user(note.owner).full_name }}
+              {{ getUser(note.owner).full_name }}
             </div>
           </div>
           <Tooltip :text="dateFormat(note.modified, dateTooltipFormat)">
@@ -382,6 +382,7 @@ import NoteIcon from '@/components/Icons/NoteIcon.vue'
 import DurationIcon from '@/components/Icons/DurationIcon.vue'
 import PlayIcon from '@/components/Icons/PlayIcon.vue'
 import { timeAgo, dateFormat, dateTooltipFormat } from '@/utils'
+import { usersStore } from '@/stores/users'
 import {
   Button,
   FeatherIcon,
@@ -392,6 +393,8 @@ import {
 } from 'frappe-ui'
 import { computed, h } from 'vue'
 
+const { getUser } = usersStore()
+
 const props = defineProps({
   title: {
     type: String,
@@ -425,7 +428,7 @@ const activities = computed(() => {
     )
       return
 
-    activity.owner_name = $user(activity.owner).full_name
+    activity.owner_name = getUser(activity.owner).full_name
     activity.type = ''
     activity.value = ''
     activity.to = ''

frontend/src/components/CommunicationArea.vue

@@ -6,7 +6,7 @@
       @click="showCommunicationBox = true"
       v-show="!showCommunicationBox"
     >
-      <UserAvatar :user="$user().name" size="sm" />
+      <UserAvatar :user="getUser().name" size="sm" />
       <div class="text-base text-gray-600">Add a reply...</div>
     </button>
     <div
@@ -16,9 +16,9 @@
       @keydown.meta.enter.capture.stop="submitComment"
     >
       <div class="mb-4 flex items-center">
-        <UserAvatar :user="$user().name" size="sm" />
+        <UserAvatar :user="getUser().name" size="sm" />
         <span class="ml-2 text-base font-medium text-gray-900">
-          {{ $user().full_name }}
+          {{ getUser().full_name }}
         </span>
       </div>
       <EmailEditor
@@ -47,11 +47,15 @@
 <script setup>
 import UserAvatar from '@/components/UserAvatar.vue'
 import EmailEditor from '@/components/EmailEditor.vue'
-import { call, Button } from 'frappe-ui'
+import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
+import { usersStore } from '@/stores/users'
+import { Tooltip, call, Button } from 'frappe-ui'
 import { ref, watch, computed, defineModel } from 'vue'
 
 const modelValue = defineModel()
 
+const { getUser } = usersStore()
+
 const showCommunicationBox = ref(false)
 const newEmail = ref('')
 const newEmailEditor = ref(null)
@@ -84,8 +88,8 @@ async function sendMail() {
     doctype: 'CRM Lead',
     name: modelValue.value.data.name,
     send_email: 1,
-    sender: $user().name,
+    sender: getUser().name,
-    sender_full_name: $user()?.full_name || undefined,
+    sender_full_name: getUser()?.full_name || undefined,
   })
 }
 

frontend/src/components/NewDeal.vue

@@ -22,7 +22,7 @@
           <Autocomplete
             v-else-if="field.type === 'link'"
             :options="activeAgents"
-            :value="$user(newDeal[field.name]).full_name"
+            :value="getUser(newDeal[field.name]).full_name"
             @change="(option) => (newDeal[field.name] = option.email)"
             :placeholder="field.placeholder"
           >
@@ -66,6 +66,7 @@
 <script setup>
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
+import { usersStore } from '@/stores/users'
 import { dealStatuses, statusDropdownOptions } from '@/utils'
 import {
   FormControl,
@@ -76,6 +77,7 @@ import {
 } from 'frappe-ui'
 import { computed } from 'vue'
 
+const { getUser, users } = usersStore()
 const props = defineProps({
   newDeal: {
     type: Object,
@@ -154,7 +156,7 @@ const allFields = [
 
 const activeAgents = computed(() => {
   const nonAgents = ['Administrator', 'Guest']
-  return $users.data
+  return users.data
     .filter((user) => !nonAgents.includes(user.name))
     .sort((a, b) => a.full_name - b.full_name)
     .map((user) => {

frontend/src/components/NewLead.vue

@@ -22,7 +22,7 @@
           <Autocomplete
             v-else-if="field.type === 'link'"
             :options="activeAgents"
-            :value="$user(newLead[field.name]).full_name"
+            :value="getUser(newLead[field.name]).full_name"
             @change="(option) => (newLead[field.name] = option.email)"
             :placeholder="field.placeholder"
           >
@@ -66,6 +66,7 @@
 <script setup>
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
+import { usersStore } from '@/stores/users'
 import { leadStatuses, statusDropdownOptions } from '@/utils'
 import {
   FormControl,
@@ -76,6 +77,7 @@ import {
 } from 'frappe-ui'
 import { computed } from 'vue'
 
+const { getUser, users } = usersStore()
 const props = defineProps({
   newLead: {
     type: Object,
@@ -154,7 +156,7 @@ const allFields = [
 
 const activeAgents = computed(() => {
   const nonAgents = ['Administrator', 'Guest']
-  return $users.data
+  return users.data
     .filter((user) => !nonAgents.includes(user.name))
     .sort((a, b) => a.full_name - b.full_name)
     .map((user) => {

frontend/src/components/UserAvatar.vue

@@ -1,12 +1,13 @@
 <template>
   <Avatar
     v-if="user"
-    :label="$user(user).full_name"
+    :label="getUser(user).full_name"
-    :image="$user(user).user_image"
+    :image="getUser(user).user_image"
     v-bind="$attrs"
   />
 </template>
 <script setup>
+import { usersStore } from '@/stores/users'
 import { Avatar } from 'frappe-ui'
 
 const props = defineProps({
@@ -15,4 +16,6 @@ const props = defineProps({
     default: null,
   },
 })
+
+const { getUser } = usersStore()
 </script>

frontend/src/composables/filter.js

@@ -1,6 +1,7 @@
 import { ref, watchEffect } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { toValue } from '@vueuse/core'
+import { usersStore } from '@/stores/users'
 
 const operatorMap = {
   is: '=',
@@ -20,6 +21,7 @@ const operatorMap = {
 export function useFilter(fields) {
   const route = useRoute()
   const router = useRouter()
+  const { getUser } = usersStore()
   const storage = ref(new Set())
 
   watchEffect(() => {
@@ -93,7 +95,7 @@ export function useFilter(fields) {
    */
   function transformOut(f) {
     if (f.value === '@me') {
-      f.value = $user()
+      f.value = getUser()
     }
     return f
   }

frontend/src/main.js

@@ -19,8 +19,6 @@ import {
   frappeRequest,
 } from 'frappe-ui'
 import socket from './socket'
-import { sessionStore as session } from './stores/session'
-import { usersStore } from './stores/users'
 import { getCachedListResource } from 'frappe-ui/src/resources/listResource'
 import { getCachedResource } from 'frappe-ui/src/resources/resources'
 
@@ -48,12 +46,6 @@ for (let key in globalComponents) {
   app.component(key, globalComponents[key])
 }
 
-let { getUser, users } = usersStore()
-
-app.config.globalProperties.$user = getUser
-app.config.globalProperties.$users = users
-app.config.globalProperties.$session = session()
-
 app.mount('#app')
 
 socket.on('refetch_resource', (data) => {
@@ -65,9 +57,3 @@ socket.on('refetch_resource', (data) => {
     }
   }
 })
-
-if (import.meta.env.DEV) {
-  window.$user = getUser
-  window.$users = users
-  window.$session = session()
-}

frontend/src/pages/CallLog.vue

@@ -154,12 +154,14 @@ import {
   Badge,
   createResource,
 } from 'frappe-ui'
+import { usersStore } from '@/stores/users'
 import { contactsStore } from '@/stores/contacts'
 import { secondsToDuration } from '@/utils'
 import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
+const { getUser } = usersStore()
 const { contacts, getContact } = contactsStore()
 
 const props = defineProps({
@@ -186,13 +188,13 @@ const callLog = createResource({
         image: getContact(doc.from)?.image,
       }
       doc.receiver = {
-        label: $user(doc.receiver).full_name,
+        label: getUser(doc.receiver).full_name,
-        image: $user(doc.receiver).user_image,
+        image: getUser(doc.receiver).user_image,
       }
     } else {
       doc.caller = {
-        label: $user(doc.caller).full_name,
+        label: getUser(doc.caller).full_name,
-        image: $user(doc.caller).user_image,
+        image: getUser(doc.caller).user_image,
       }
       doc.receiver = {
         label: getContact(doc.to)?.full_name || 'Unknown',

frontend/src/pages/CallLogs.vue

@@ -27,10 +27,12 @@ import Breadcrumbs from '@/components/Breadcrumbs.vue'
 import SortIcon from '@/components/Icons/SortIcon.vue'
 import FilterIcon from '@/components/Icons/FilterIcon.vue'
 import { secondsToDuration } from '@/utils'
+import { usersStore } from '@/stores/users'
 import { contactsStore } from '@/stores/contacts'
 import { Button, createListResource } from 'frappe-ui'
 import { computed } from 'vue'
 
+const { getUser } = usersStore()
 const { getContact } = contactsStore()
 
 const list = {
@@ -124,13 +126,13 @@ const rows = computed(() => {
         image: getContact(callLog.from)?.image,
       }
       receiver = {
-        label: $user(receiver).full_name,
+        label: getUser(receiver).full_name,
-        image: $user(receiver).user_image,
+        image: getUser(receiver).user_image,
       }
     } else {
       caller = {
-        label: $user(caller).full_name,
+        label: getUser(caller).full_name,
-        image: $user(caller).user_image,
+        image: getUser(caller).user_image,
       }
       receiver = {
         label: getContact(callLog.to)?.full_name || 'Unknown',

frontend/src/pages/Deal.vue

@@ -6,7 +6,7 @@
     <template #right-header>
       <Autocomplete
         :options="activeAgents"
-        :value="$user(deal.data.lead_owner).full_name"
+        :value="getUser(deal.data.lead_owner).full_name"
         @change="(option) => updateAssignedAgent(option.email)"
         placeholder="Deal owner"
       >
@@ -220,7 +220,7 @@
                         <Autocomplete
                           v-else-if="field.type === 'user'"
                           :options="activeAgents"
-                          :value="$user(deal.data[field.name]).full_name"
+                          :value="getUser(deal.data[field.name]).full_name"
                           @change="
                             (option) => updateAssignedAgent(option.email)
                           "
@@ -231,7 +231,7 @@
                             <Button
                               variant="ghost"
                               @click="togglePopover()"
-                              :label="$user(deal.data[field.name]).full_name"
+                              :label="getUser(deal.data[field.name]).full_name"
                               class="!justify-start w-full"
                             >
                               <template #prefix>
@@ -373,6 +373,7 @@ import {
   secondsToDuration,
   createToast,
 } from '@/utils'
+import { usersStore } from '@/stores/users'
 import { contactsStore } from '@/stores/contacts'
 import {
   createResource,
@@ -390,7 +391,9 @@ import {
 } from 'frappe-ui'
 import { ref, computed, inject } from 'vue'
 
+const { getUser, users } = usersStore()
 const { getContact, contacts } = contactsStore()
+
 const makeCall = inject('makeOutgoingCall')
 
 const props = defineProps({
@@ -618,7 +621,7 @@ const detailSections = computed(() => {
 
 const activeAgents = computed(() => {
   const nonAgents = ['Administrator', 'Guest']
-  return $users.data
+  return users.data
     .filter((user) => !nonAgents.includes(user.name))
     .sort((a, b) => a.full_name - b.full_name)
     .map((user) => {
@@ -722,13 +725,13 @@ const calls = createListResource({
           image: getContact(doc.from)?.image,
         }
         doc.receiver = {
-          label: $user(doc.receiver).full_name,
+          label: getUser(doc.receiver).full_name,
-          image: $user(doc.receiver).user_image,
+          image: getUser(doc.receiver).user_image,
         }
       } else {
         doc.caller = {
-          label: $user(doc.caller).full_name,
+          label: getUser(doc.caller).full_name,
-          image: $user(doc.caller).user_image,
+          image: getUser(doc.caller).user_image,
         }
         doc.receiver = {
           label: getContact(doc.to)?.full_name || 'Unknown',

frontend/src/pages/Deals.vue

@@ -60,6 +60,7 @@ import Breadcrumbs from '@/components/Breadcrumbs.vue'
 import NewDeal from '@/components/NewDeal.vue'
 import SortBy from '@/components/SortBy.vue'
 import Filter from '@/components/Filter.vue'
+import { usersStore } from '@/stores/users'
 import { useOrderBy } from '@/composables/orderby'
 import { useFilter } from '@/composables/filter'
 import { useDebounceFn } from '@vueuse/core'
@@ -80,6 +81,7 @@ const list = {
   plural_label: 'Deals',
   singular_label: 'Deal',
 }
+const { getUser } = usersStore()
 const { get: getOrderBy } = useOrderBy()
 const { getArgs, storage } = useFilter()
 
@@ -195,7 +197,7 @@ const rows = computed(() => {
       },
       email: lead.email,
       mobile_no: lead.mobile_no,
-      lead_owner: lead.lead_owner && $user(lead.lead_owner),
+      lead_owner: lead.lead_owner && getUser(lead.lead_owner),
       modified: lead.modified,
     }
   })
@@ -255,7 +257,7 @@ let newDeal = reactive({
   deal_status: 'Qualification',
   email: '',
   mobile_no: '',
-  lead_owner: $user().email,
+  lead_owner: getUser().email,
 })
 
 const createLead = createResource({

frontend/src/pages/Lead.vue

@@ -6,7 +6,7 @@
     <template #right-header>
       <Autocomplete
         :options="activeAgents"
-        :value="$user(lead.data.lead_owner).full_name"
+        :value="getUser(lead.data.lead_owner).full_name"
         @change="(option) => updateAssignedAgent(option.email)"
         placeholder="Lead owner"
       >
@@ -218,7 +218,7 @@
                         <Autocomplete
                           v-else-if="field.type === 'user'"
                           :options="activeAgents"
-                          :value="$user(lead.data[field.name]).full_name"
+                          :value="getUser(lead.data[field.name]).full_name"
                           @change="
                             (option) => updateAssignedAgent(option.email)
                           "
@@ -229,7 +229,7 @@
                             <Button
                               variant="ghost"
                               @click="togglePopover()"
-                              :label="$user(lead.data[field.name]).full_name"
+                              :label="getUser(lead.data[field.name]).full_name"
                               class="!justify-start w-full"
                             >
                               <template #prefix>
@@ -341,9 +341,11 @@ import {
   secondsToDuration,
   createToast,
 } from '@/utils'
+import { usersStore } from '@/stores/users'
 import { contactsStore } from '@/stores/contacts'
 import {
   createResource,
+  createDocumentResource,
   createListResource,
   FileUploader,
   ErrorMessage,
@@ -358,6 +360,7 @@ import {
 import { ref, computed, inject } from 'vue'
 import { useRouter } from 'vue-router'
 
+const { getUser, users } = usersStore()
 const { getContact, contacts } = contactsStore()
 const router = useRouter()
 
@@ -593,7 +596,7 @@ const detailSections = computed(() => {
 
 const activeAgents = computed(() => {
   const nonAgents = ['Administrator', 'admin@example.com', 'Guest']
-  return $users.data
+  return users.data
     .filter((user) => !nonAgents.includes(user.name))
     .sort((a, b) => a.full_name - b.full_name)
     .map((user) => {
@@ -704,13 +707,13 @@ const calls = createListResource({
           image: getContact(doc.from)?.image,
         }
         doc.receiver = {
-          label: $user(doc.receiver).full_name,
+          label: getUser(doc.receiver).full_name,
-          image: $user(doc.receiver).user_image,
+          image: getUser(doc.receiver).user_image,
         }
       } else {
         doc.caller = {
-          label: $user(doc.caller).full_name,
+          label: getUser(doc.caller).full_name,
-          image: $user(doc.caller).user_image,
+          image: getUser(doc.caller).user_image,
         }
         doc.receiver = {
           label: getContact(doc.to)?.full_name || 'Unknown',

frontend/src/pages/Leads.vue

@@ -59,6 +59,7 @@ import Breadcrumbs from '@/components/Breadcrumbs.vue'
 import NewLead from '@/components/NewLead.vue'
 import SortBy from '@/components/SortBy.vue'
 import Filter from '@/components/Filter.vue'
+import { usersStore } from '@/stores/users'
 import { useOrderBy } from '@/composables/orderby'
 import { useFilter } from '@/composables/filter'
 import { useDebounceFn } from '@vueuse/core'
@@ -79,6 +80,7 @@ const list = {
   plural_label: 'Leads',
   singular_label: 'Lead',
 }
+const { getUser } = usersStore()
 const { get: getOrderBy } = useOrderBy()
 const { getArgs, storage } = useFilter()
 
@@ -204,7 +206,7 @@ const rows = computed(() => {
       },
       email: lead.email,
       mobile_no: lead.mobile_no,
-      lead_owner: lead.lead_owner && $user(lead.lead_owner),
+      lead_owner: lead.lead_owner && getUser(lead.lead_owner),
       modified: lead.modified,
     }
   })
@@ -264,7 +266,7 @@ let newLead = reactive({
   status: 'Open',
   email: '',
   mobile_no: '',
-  lead_owner: $user().email,
+  lead_owner: getUser().email,
 })
 
 const createLead = createResource({

frontend/src/pages/Login.vue

@@ -24,7 +24,7 @@
               label="Email"
               v-model="email"
               placeholder="jane@example.com"
-              :disabled="login.loading"
+              :disabled="session.login.loading"
             />
           </div>
           <div class="mt-4">
@@ -34,15 +34,15 @@
               label="Password"
               v-model="password"
               placeholder="••••••"
-              :disabled="login.loading"
+              :disabled="session.login.loading"
               type="password"
             />
           </div>
-          <ErrorMessage class="mt-2" :message="login.error" />
+          <ErrorMessage class="mt-2" :message="session.login.error" />
           <Button
             variant="solid"
             class="mt-6 w-full"
-            :loading="login.loading"
+            :loading="session.login.loading"
           >
             Login
           </Button>
@@ -81,7 +81,7 @@ import { sessionStore } from '@/stores/session'
 import { FormControl, ErrorMessage, createResource } from 'frappe-ui'
 import { ref } from 'vue'
 
-const { login } = sessionStore()
+const session = sessionStore()
 let showEmailLogin = ref(false)
 let email = ref('')
 let password = ref('')
@@ -96,7 +96,7 @@ let authProviders = createResource({
 authProviders.fetch()
 
 function submit() {
-  login.submit({
+  session.login.submit({
     usr: email.value,
     pwd: password.value,
   })

frontend/src/pages/Notes.vue

@@ -48,7 +48,7 @@
         <div class="flex items-center gap-2">
           <UserAvatar :user="note.owner" size="xs" />
           <div class="text-sm text-gray-800">
-            {{ $user(note.owner).full_name }}
+            {{ getUser(note.owner).full_name }}
           </div>
         </div>
         <Tooltip :text="dateFormat(note.modified, dateTooltipFormat)">
@@ -93,6 +93,9 @@ import {
 Tooltip,
 } from 'frappe-ui'
 import { ref } from 'vue'
+import { usersStore } from '@/stores/users'
+
+const { getUser } = usersStore()
 
 const list = {
   title: 'Notes',

frontend/src/router.js

@@ -1,4 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
+import { usersStore } from '@/stores/users'
+import { sessionStore } from '@/stores/session'
 
 const routes = [
   {
@@ -71,11 +73,14 @@ let router = createRouter({
 })
 
 router.beforeEach(async (to, from, next) => {
-  await $users.promise
+  const { users } = usersStore()
+  const { isLoggedIn } = sessionStore()
 
-  if (to.name === 'Login' && $session.isLoggedIn) {
+  await users.promise
+
+  if (to.name === 'Login' && isLoggedIn) {
     next({ name: 'Leads' })
-  } else if (to.name !== 'Login' && !$session.isLoggedIn) {
+  } else if (to.name !== 'Login' && !isLoggedIn) {
     next({ name: 'Login' })
   } else if (to.matched.length === 0) {
     next({ name: 'Invalid Page' })

frontend/src/stores/session.js

@@ -1,9 +1,12 @@
 import { defineStore } from 'pinia'
 import { createResource } from 'frappe-ui'
+import { usersStore } from './users'
 import router from '@/router'
 import { ref, computed } from 'vue'
 
 export const sessionStore = defineStore('crm-session', () => {
+  const { users } = usersStore()
+
   function sessionUser() {
     let cookies = new URLSearchParams(document.cookie.split('; ').join('&'))
     let _sessionUser = cookies.get('user_id')
@@ -22,7 +25,7 @@ export const sessionStore = defineStore('crm-session', () => {
       throw new Error('Invalid email or password')
     },
     onSuccess() {
-      $users.reload()
+      users.reload()
       user.value = sessionUser()
       login.reset()
       router.replace({ path: '/' })
@@ -32,7 +35,7 @@ export const sessionStore = defineStore('crm-session', () => {
   const logout = createResource({
     url: 'logout',
     onSuccess() {
-      $users.reset()
+      users.reset()
       user.value = null
       router.replace({ name: 'Login' })
     },