Revert "refactor: made session, getUser, users globalProperty"

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_full_name: $user()?.full_name || undefined,
+ sender: getUser().name,
+ 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"
- :image="$user(user).user_image"
+ :label="getUser(user).full_name"
+ :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,
- image: $user(doc.receiver).user_image,
+ label: getUser(doc.receiver).full_name,
+ image: getUser(doc.receiver).user_image,
  }
  } else {
  doc.caller = {
- label: $user(doc.caller).full_name,
- image: $user(doc.caller).user_image,
+ label: getUser(doc.caller).full_name,
+ 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,
- image: $user(receiver).user_image,
+ label: getUser(receiver).full_name,
+ image: getUser(receiver).user_image,
  }
  } else {
  caller = {
- label: $user(caller).full_name,
- image: $user(caller).user_image,
+ label: getUser(caller).full_name,
+ 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,
- image: $user(doc.receiver).user_image,
+ label: getUser(doc.receiver).full_name,
+ image: getUser(doc.receiver).user_image,
  }
  } else {
  doc.caller = {
- label: $user(doc.caller).full_name,
- image: $user(doc.caller).user_image,
+ label: getUser(doc.caller).full_name,
+ image: getUser(doc.caller).user_image,
  }
  doc.receiver = {
  label: getContact(doc.to)?.full_name || 'Unknown',