fix: add/edit organization through modal

frontend/src/components/Activities.vue

@@ -619,8 +619,8 @@ import EmailAtIcon from '@/components/Icons/EmailAtIcon.vue'
 import InboundCallIcon from '@/components/Icons/InboundCallIcon.vue'
 import OutboundCallIcon from '@/components/Icons/OutboundCallIcon.vue'
 import CommunicationArea from '@/components/CommunicationArea.vue'
-import NoteModal from '@/components/NoteModal.vue'
+import NoteModal from '@/components/Modals/NoteModal.vue'
-import TaskModal from '@/components/TaskModal.vue'
+import TaskModal from '@/components/Modals/TaskModal.vue'
 import {
   timeAgo,
   dateFormat,

frontend/src/components/CallUI.vue

@@ -180,12 +180,12 @@ import MinimizeIcon from '@/components/Icons/MinimizeIcon.vue'
 import DialpadIcon from '@/components/Icons/DialpadIcon.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import CountUpTimer from '@/components/CountUpTimer.vue'
+import NoteModal from '@/components/Modals/NoteModal.vue'
 import { Device } from '@twilio/voice-sdk'
 import { useDraggable, useWindowSize } from '@vueuse/core'
 import { contactsStore } from '@/stores/contacts'
 import { Avatar, call } from 'frappe-ui'
 import { onMounted, ref, watch, getCurrentInstance } from 'vue'
-import NoteModal from './NoteModal.vue'
 
 const { getContact } = contactsStore()
 

frontend/src/components/Modals/OrganizationModal.vue

@@ -0,0 +1,103 @@
+<template>
+  <Dialog
+    v-model="show"
+    :options="{
+      title: editMode ? 'Edit Organization' : 'Create Organization',
+      size: 'xl',
+      actions: [
+        {
+          label: editMode ? 'Update' : 'Create',
+          variant: 'solid',
+          onClick: ({ close }) => updateOrganization(close),
+        },
+      ],
+    }"
+  >
+    <template #body-content>
+      <div class="flex flex-col gap-4">
+        <div>
+          <div class="mb-1.5 text-sm text-gray-600">Organization name</div>
+          <TextInput
+            ref="title"
+            variant="outline"
+            v-model="_organization.name"
+            placeholder="Add organization name"
+          />
+        </div>
+        <div>
+          <div class="mb-1.5 text-sm text-gray-600">Website</div>
+          <TextInput
+            variant="outline"
+            v-model="_organization.website"
+            placeholder="Add website"
+          />
+        </div>
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script setup>
+import { TextInput, Dialog, call } from 'frappe-ui'
+import { ref, defineModel, nextTick, watch } from 'vue'
+
+const props = defineProps({
+  organization: {
+    type: Object,
+    default: {},
+  },
+})
+
+const show = defineModel()
+const organizations = defineModel('reloadOrganizations')
+
+const title = ref(null)
+const editMode = ref(false)
+let _organization = ref({})
+
+async function updateOrganization(close) {
+  if (
+    props.organization.organization_name === _organization.value.name &&
+    props.organization.website === _organization.value.website
+  )
+    return
+
+  if (editMode.value) {
+    let d = await call('frappe.client.set_value', {
+      doctype: 'CRM Organization',
+      name: _organization.value.name,
+      fieldname: _organization.value,
+    })
+    if (d.name) {
+      organizations.value.reload()
+    }
+  } else {
+    let d = await call('frappe.client.insert', {
+      doc: {
+        doctype: 'CRM Organization',
+        organization_name: _organization.value.name,
+        website: _organization.value.website,
+      },
+    })
+    if (d.name) {
+      organizations.value.reload()
+    }
+  }
+  close()
+}
+
+watch(
+  () => show.value,
+  (value) => {
+    if (!value) return
+    editMode.value = false
+    nextTick(() => {
+      title.value.el.focus()
+      _organization.value = { ...props.organization }
+      if (_organization.value.name) {
+        editMode.value = true
+      }
+    })
+  }
+)
+</script>

frontend/src/pages/CallLog.vue

@@ -142,7 +142,7 @@
 <script setup>
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import DurationIcon from '@/components/Icons/DurationIcon.vue'
-import NoteModal from '@/components/NoteModal.vue'
+import NoteModal from '@/components/Modals/NoteModal.vue'
 import { dateFormat, timeAgo, dateTooltipFormat } from '@/utils'
 import {
   TextEditor,

frontend/src/pages/Notes.vue

@@ -81,7 +81,7 @@
 import LayoutHeader from '@/components/LayoutHeader.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import NoteIcon from '@/components/Icons/NoteIcon.vue'
-import NoteModal from '@/components/NoteModal.vue'
+import NoteModal from '@/components/Modals/NoteModal.vue'
 import { timeAgo, dateFormat, dateTooltipFormat } from '@/utils'
 import {
   FeatherIcon,

frontend/src/pages/Organization.vue

@@ -142,11 +142,11 @@
         </div>
       </div>
     </Tabs>
-    <!-- <OrganizationModal
+    <OrganizationModal
       v-model="showOrganizationModal"
       v-model:reloadOrganizations="organizations"
       :organization="organization"
-      /> -->
+    />
   </div>
 </template>
 
@@ -161,7 +161,7 @@ import {
   call,
   createListResource,
 } from 'frappe-ui'
-// import OrganizationModal from '@/components/OrganizationModal.vue'
+import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
 import LeadsListView from '@/components/ListViews/LeadsListView.vue'
 import DealsListView from '@/components/ListViews/DealsListView.vue'
 import ContactsListView from '@/components/ListViews/ContactsListView.vue'
@@ -204,9 +204,9 @@ function validateFile(file) {
 
 async function changeOrganizationImage(file) {
   await call('frappe.client.set_value', {
-    doctype: 'Organization',
+    doctype: 'CRM Organization',
     name: props.organization.name,
-    fieldname: 'image',
+    fieldname: 'organization_logo',
     value: file?.file_url || '',
   })
   organizations.reload()
@@ -223,7 +223,7 @@ async function deleteOrganization() {
         variant: 'solid',
         async onClick({ close }) {
           await call('frappe.client.delete', {
-            doctype: 'Organization',
+            doctype: 'CRM Organization',
             name: props.organization.name,
           })
           organizations.reload()
@@ -235,7 +235,7 @@ async function deleteOrganization() {
 }
 
 function website(url) {
-  return url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, '')
+  return url && url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, '')
 }
 
 const tabIndex = ref(0)

frontend/src/pages/Organizations.vue

@@ -60,15 +60,15 @@
       </div>
     </div>
   </div>
-  <!-- <OrganizationModal
+  <OrganizationModal
-      v-model="showOrganizationModal"
+    v-model="showOrganizationModal"
-      v-model:reloadOrganizations="organizations"
+    v-model:reloadOrganizations="organizations"
-      :organization="{}"
+    :organization="{}"
-    /> -->
+  />
 </template>
 <script setup>
 import LayoutHeader from '@/components/LayoutHeader.vue'
-// import OrganizationModal from '@/components/OrganizationModal.vue'
+import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
 import OrganizationsIcon from '@/components/Icons/OrganizationsIcon.vue'
 import { FeatherIcon, Breadcrumbs, Avatar } from 'frappe-ui'
 import { organizationsStore } from '@/stores/organizations.js'
@@ -102,6 +102,6 @@ onMounted(() => {
     })
 })
 function website(url) {
-  return url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, '')
+  return url && url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, '')
 }
 </script>