From 5f92c5d3d72befba916f3ebdfad1bab672f03981 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 3 Nov 2023 16:33:41 +0530
Subject: [PATCH] fix: added organization page

---
 crm/api/session.py                            |  16 +-
 frontend/src/components/AppSidebar.vue        |   6 +
 ...nizationIcon.vue => OrganizationsIcon.vue} |   0
 frontend/src/pages/Organization.vue           | 208 ++++++++++++++++++
 frontend/src/pages/Organizations.vue          | 109 +++++++++
 frontend/src/router.js                        |  13 ++
 frontend/src/stores/organizations.js          |  34 +++
 7 files changed, 385 insertions(+), 1 deletion(-)
 rename frontend/src/components/Icons/{OrganizationIcon.vue => OrganizationsIcon.vue} (100%)
 create mode 100644 frontend/src/pages/Organization.vue
 create mode 100644 frontend/src/pages/Organizations.vue
 create mode 100644 frontend/src/stores/organizations.js

diff --git a/crm/api/session.py b/crm/api/session.py
index e40a769b..c6c5e3dd 100644
--- a/crm/api/session.py
+++ b/crm/api/session.py
@@ -30,4 +30,18 @@ def get_contacts():
 		distinct=True,
 	).run(as_dict=1)
 
-	return contacts
\ No newline at end of file
+	return contacts
+
+@frappe.whitelist()
+def get_organizations():
+	if frappe.session.user == "Guest":
+		frappe.throw("Authentication failed", exc=frappe.AuthenticationError)
+
+	organizations = frappe.qb.get_query(
+		"CRM Organization",
+		fields=['name', 'organization_logo', 'website'],
+		order_by="name asc",
+		distinct=True,
+	).run(as_dict=1)
+
+	return organizations
diff --git a/frontend/src/components/AppSidebar.vue b/frontend/src/components/AppSidebar.vue
index 7fc0af60..a0217a1e 100644
--- a/frontend/src/components/AppSidebar.vue
+++ b/frontend/src/components/AppSidebar.vue
@@ -37,6 +37,7 @@ import UserDropdown from '@/components/UserDropdown.vue'
 import LeadsIcon from '@/components/Icons/LeadsIcon.vue'
 import DealsIcon from '@/components/Icons/DealsIcon.vue'
 import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
+import OrganizationsIcon from '@/components/Icons/OrganizationsIcon.vue'
 import NoteIcon from '@/components/Icons/NoteIcon.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import CollapseSidebar from '@/components/Icons/CollapseSidebar.vue'
@@ -59,6 +60,11 @@ const links = [
     icon: ContactsIcon,
     to: 'Contacts',
   },
+  {
+    label: 'Organizations',
+    icon: OrganizationsIcon,
+    to: 'Organizations',
+  },
   {
     label: 'Notes',
     icon: NoteIcon,
diff --git a/frontend/src/components/Icons/OrganizationIcon.vue b/frontend/src/components/Icons/OrganizationsIcon.vue
similarity index 100%
rename from frontend/src/components/Icons/OrganizationIcon.vue
rename to frontend/src/components/Icons/OrganizationsIcon.vue
diff --git a/frontend/src/pages/Organization.vue b/frontend/src/pages/Organization.vue
new file mode 100644
index 00000000..6e8b228d
--- /dev/null
+++ b/frontend/src/pages/Organization.vue
@@ -0,0 +1,208 @@
+<template>
+  <div>
+    <div class="flex gap-6 p-5">
+      <FileUploader
+        @success="changeOrganizationImage"
+        :validateFile="validateFile"
+      >
+        <template #default="{ openFileSelector, error }">
+          <div class="group relative h-24 w-24">
+            <Avatar
+              size="3xl"
+              :image="organization.organization_logo"
+              :label="organization.name"
+              class="!h-24 !w-24"
+            />
+            <component
+              :is="organization.organization_logo ? Dropdown : 'div'"
+              v-bind="
+                organization.organization_logo
+                  ? {
+                      options: [
+                        {
+                          icon: 'upload',
+                          label: organization.organization_logo
+                            ? 'Change image'
+                            : 'Upload image',
+                          onClick: openFileSelector,
+                        },
+                        {
+                          icon: 'trash-2',
+                          label: 'Remove image',
+                          onClick: () => changeOrganizationImage(''),
+                        },
+                      ],
+                    }
+                  : { onClick: openFileSelector }
+              "
+              class="!absolute bottom-0 left-0 right-0"
+            >
+              <div
+                class="z-1 absolute bottom-0 left-0 right-0 flex h-13 cursor-pointer items-center justify-center rounded-b-full bg-black bg-opacity-40 pt-3 opacity-0 duration-300 ease-in-out group-hover:opacity-100"
+                style="
+                  -webkit-clip-path: inset(12px 0 0 0);
+                  clip-path: inset(12px 0 0 0);
+                "
+              >
+                <CameraIcon class="h-6 w-6 cursor-pointer text-white" />
+              </div>
+            </component>
+            <ErrorMessage class="mt-2" :message="error" />
+          </div>
+        </template>
+      </FileUploader>
+      <div class="flex flex-col justify-center gap-2">
+        <div class="text-3xl font-semibold text-gray-900">
+          {{ organization.name }}
+        </div>
+        <div class="flex items-center gap-2 text-base text-gray-700">
+          <div v-if="organization.website" class="flex items-center gap-1.5">
+            <WebsiteIcon class="h-4 w-4" />
+            <span class="">{{ website(organization.website) }}</span>
+          </div>
+          <span
+            v-if="organization.email_id"
+            class="text-3xl leading-[0] text-gray-600"
+            >&middot;</span
+          >
+          <div v-if="organization.email_id" class="flex items-center gap-1.5">
+            <EmailIcon class="h-4 w-4" />
+            <span class="">{{ organization.email_id }}</span>
+          </div>
+          <span
+            v-if="
+              (organization.name || organization.email_id) &&
+              organization.mobile_no
+            "
+            class="text-3xl leading-[0] text-gray-600"
+            >&middot;</span
+          >
+          <div v-if="organization.mobile_no" class="flex items-center gap-1.5">
+            <PhoneIcon class="h-4 w-4" />
+            <span class="">{{ organization.mobile_no }}</span>
+          </div>
+        </div>
+        <div class="mt-1 flex gap-2">
+          <Button label="Edit" size="sm" @click="showOrganizationModal = true">
+            <template #prefix>
+              <EditIcon class="h-4 w-4" />
+            </template>
+          </Button>
+          <Button
+            label="Delete"
+            theme="red"
+            size="sm"
+            @click="deleteOrganization"
+          >
+            <template #prefix>
+              <FeatherIcon name="trash-2" class="h-4 w-4" />
+            </template>
+          </Button>
+          <!-- <Button label="Add lead" size="sm">
+              <template #prefix>
+                <FeatherIcon name="plus" class="h-4 w-4" />
+              </template>
+            </Button>
+            <Button label="Add deal" size="sm">
+              <template #prefix>
+                <FeatherIcon name="plus" class="h-4 w-4" />
+              </template>
+            </Button> -->
+        </div>
+      </div>
+    </div>
+    <Tabs v-model="tabIndex" v-slot="{ tab }" :tabs="tabs">
+      {{ tab.label }}
+    </Tabs>
+    <!-- <OrganizationModal
+      v-model="showOrganizationModal"
+      v-model:reloadOrganizations="organizations"
+      :organization="organization"
+      /> -->
+  </div>
+</template>
+
+<script setup>
+import {
+  FeatherIcon,
+  Avatar,
+  FileUploader,
+  ErrorMessage,
+  Dropdown,
+  call,
+  Tabs,
+} from 'frappe-ui'
+// import OrganizationModal from '@/components/OrganizationModal.vue'
+import WebsiteIcon from '@/components/Icons/WebsiteIcon.vue'
+import EmailIcon from '@/components/Icons/EmailIcon.vue'
+import EditIcon from '@/components/Icons/EditIcon.vue'
+import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
+import CameraIcon from '@/components/Icons/CameraIcon.vue'
+import LeadsIcon from '@/components/Icons/LeadsIcon.vue'
+import DealsIcon from '@/components/Icons/DealsIcon.vue'
+import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
+import { organizationsStore } from '@/stores/organizations.js'
+import { h, ref } from 'vue'
+const props = defineProps({
+  organization: {
+    type: Object,
+    required: true,
+  },
+})
+const { organizations } = organizationsStore()
+const showOrganizationModal = ref(false)
+function validateFile(file) {
+  let extn = file.name.split('.').pop().toLowerCase()
+  if (!['png', 'jpg', 'jpeg'].includes(extn)) {
+    return 'Only PNG and JPG images are allowed'
+  }
+}
+async function changeOrganizationImage(file) {
+  await call('frappe.client.set_value', {
+    doctype: 'Organization',
+    name: props.organization.name,
+    fieldname: 'image',
+    value: file?.file_url || '',
+  })
+  organizations.reload()
+}
+async function deleteOrganization() {
+  $dialog({
+    title: 'Delete organization',
+    message: 'Are you sure you want to delete this organization?',
+    actions: [
+      {
+        label: 'Delete',
+        theme: 'red',
+        variant: 'solid',
+        async onClick({ close }) {
+          await call('frappe.client.delete', {
+            doctype: 'Organization',
+            name: props.organization.name,
+          })
+          organizations.reload()
+          close()
+        },
+      },
+    ],
+  })
+}
+function website(url) {
+  return url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, '')
+}
+const tabIndex = ref(0)
+const tabs = [
+  {
+    label: 'Leads',
+    icon: h(LeadsIcon, { class: 'h-4 w-4' }),
+  },
+  {
+    label: 'Deals',
+    icon: h(DealsIcon, { class: 'h-4 w-4' }),
+  },
+  {
+    label: 'Contacts',
+    icon: h(ContactsIcon, { class: 'h-4 w-4' }),
+  },
+]
+</script>
diff --git a/frontend/src/pages/Organizations.vue b/frontend/src/pages/Organizations.vue
new file mode 100644
index 00000000..8dc41eaa
--- /dev/null
+++ b/frontend/src/pages/Organizations.vue
@@ -0,0 +1,109 @@
+<template>
+  <LayoutHeader>
+    <template #left-header>
+      <Breadcrumbs :items="breadcrumbs" />
+    </template>
+    <template #right-header>
+      <Button
+        variant="solid"
+        label="Create"
+        @click="showOrganizationModal = true"
+      >
+        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
+        Create organization
+      </Button>
+    </template>
+  </LayoutHeader>
+  <div class="flex h-full overflow-hidden">
+    <div class="flex flex-col overflow-y-auto border-r">
+      <router-link
+        :to="{
+          name: 'Organization',
+          params: { organizationId: organization.name },
+        }"
+        v-for="(organization, i) in organizations.data"
+        :key="i"
+        :class="[
+          currentOrganization?.name === organization.name
+            ? 'bg-gray-50 hover:bg-gray-100'
+            : 'hover:bg-gray-50',
+        ]"
+      >
+        <div class="flex w-[352px] items-center gap-3 border-b px-5 py-4">
+          <Avatar
+            :image="organization.organization_logo"
+            :label="organization.name"
+            size="xl"
+          />
+          <div class="flex flex-col items-start gap-1">
+            <span class="text-base font-medium text-gray-900">
+              {{ organization.name }}
+            </span>
+            <span class="text-sm text-gray-700">{{
+              website(organization.website)
+            }}</span>
+          </div>
+        </div>
+      </router-link>
+    </div>
+    <div class="flex-1">
+      <router-view
+        v-if="currentOrganization"
+        :organization="currentOrganization"
+      />
+      <div
+        v-else
+        class="grid h-full place-items-center text-xl font-medium text-gray-500"
+      >
+        <div class="flex flex-col items-center justify-center space-y-2">
+          <OrganizationsIcon class="h-10 w-10" />
+          <div>No organization selected</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- <OrganizationModal
+      v-model="showOrganizationModal"
+      v-model:reloadOrganizations="organizations"
+      :organization="{}"
+    /> -->
+</template>
+<script setup>
+import LayoutHeader from '@/components/LayoutHeader.vue'
+// import OrganizationModal from '@/components/OrganizationModal.vue'
+import OrganizationsIcon from '@/components/Icons/OrganizationsIcon.vue'
+import { FeatherIcon, Breadcrumbs, Avatar } from 'frappe-ui'
+import { organizationsStore } from '@/stores/organizations.js'
+import { ref, computed, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+const { organizations } = organizationsStore()
+const route = useRoute()
+const showOrganizationModal = ref(false)
+const currentOrganization = computed(() => {
+  return organizations.data.find(
+    (organization) => organization.name === route.params.organizationId
+  )
+})
+const breadcrumbs = computed(() => {
+  let items = [{ label: 'Organizations', route: { name: 'Organizations' } }]
+  if (!currentOrganization.value) return items
+  items.push({
+    label: currentOrganization.value.name,
+    route: {
+      name: 'Organization',
+      params: { organizationId: currentOrganization.value.name },
+    },
+  })
+  return items
+})
+onMounted(() => {
+  const el = document.querySelector('.router-link-active')
+  if (el)
+    setTimeout(() => {
+      el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    })
+})
+function website(url) {
+  return url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, '')
+}
+</script>
diff --git a/frontend/src/router.js b/frontend/src/router.js
index 44da837f..c841ccb1 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -39,6 +39,19 @@ const routes = [
     name: 'Contacts',
     component: () => import('@/pages/Contacts.vue'),
   },
+  {
+    path: '/organizations',
+    name: 'Organizations',
+    component: () => import('@/pages/Organizations.vue'),
+    children: [
+      {
+        path: '/organizations/:organizationId?',
+        name: 'Organization',
+        component: () => import('@/pages/Organization.vue'),
+        props: true,
+      },
+    ],
+  },
   {
     path: '/call-logs',
     name: 'Call Logs',
diff --git a/frontend/src/stores/organizations.js b/frontend/src/stores/organizations.js
new file mode 100644
index 00000000..dc8ada9b
--- /dev/null
+++ b/frontend/src/stores/organizations.js
@@ -0,0 +1,34 @@
+import { defineStore } from 'pinia'
+import { createResource } from 'frappe-ui'
+import { reactive } from 'vue'
+
+export const organizationsStore = defineStore('crm-organizations', () => {
+  let organizationsByName = reactive({})
+
+  const organizations = createResource({
+    url: 'crm.api.session.get_organizations',
+    cache: 'organizations',
+    initialData: [],
+    transform(organizations) {
+      for (let organization of organizations) {
+        organizationsByName[organization.name] = organization
+      }
+      return organizations
+    },
+    onError(error) {
+      if (error && error.exc_type === 'AuthenticationError') {
+        router.push('/login')
+      }
+    },
+  })
+  organizations.fetch()
+
+  function getOrganization(name) {
+    return organizationsByName[name]
+  }
+
+  return {
+    organizations,
+    getOrganization,
+  }
+})