From 0e488855219d8dac76debbc0b33d6c39940bb2ae Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sat, 26 Aug 2023 13:05:58 +0530
Subject: [PATCH] fix: added notes list and added in sidebar

---
 frappe-ui                               |   2 +-
 frontend/src/components/AppSidebar.vue  |   6 ++
 frontend/src/components/ListRowItem.vue |  19 ++++-
 frontend/src/pages/Notes.vue            | 101 ++++++++++++++++++++++++
 frontend/src/router.js                  |   5 ++
 frontend/src/utils.js                   |   6 ++
 6 files changed, 136 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/pages/Notes.vue

diff --git a/frappe-ui b/frappe-ui
index 4f618ce2..91670575 160000
--- a/frappe-ui
+++ b/frappe-ui
@@ -1 +1 @@
-Subproject commit 4f618ce26fac8f32596a33d722ad79f415288567
+Subproject commit 9167057574f2650e83360beb05ae25f0b6478211
diff --git a/frontend/src/components/AppSidebar.vue b/frontend/src/components/AppSidebar.vue
index de33b2ee..4076c6da 100644
--- a/frontend/src/components/AppSidebar.vue
+++ b/frontend/src/components/AppSidebar.vue
@@ -36,6 +36,7 @@ import LeadsIcon from '@/components/Icons/LeadsIcon.vue'
 import DealsIcon from '@/components/Icons/DealsIcon.vue'
 import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
 import InboxIcon from '@/components/Icons/InboxIcon.vue'
+import NoteIcon from '@/components/Icons/NoteIcon.vue'
 import DashboardIcon from '@/components/Icons/DashboardIcon.vue'
 import NavLinks from '@/components/NavLinks.vue'
 
@@ -60,6 +61,11 @@ const navigations = [
     icon: ContactsIcon,
     route: { name: 'Contacts' },
   },
+  {
+    name: 'Notes',
+    icon: NoteIcon,
+    route: { name: 'Notes' },
+  },
   {
     name: 'Dashboard',
     icon: DashboardIcon,
diff --git a/frontend/src/components/ListRowItem.vue b/frontend/src/components/ListRowItem.vue
index 5469c570..553101ad 100644
--- a/frontend/src/components/ListRowItem.vue
+++ b/frontend/src/components/ListRowItem.vue
@@ -1,5 +1,9 @@
 <template>
-  <Tooltip :text="tooltipText" class="flex items-center space-x-2.5">
+  <Tooltip
+    :text="tooltipText"
+    :html="tooltipHTML"
+    class="flex items-center space-x-2.5"
+  >
     <slot name="prefix"></slot>
     <div class="text-base truncate">
       {{ label }}
@@ -7,7 +11,7 @@
   </Tooltip>
 </template>
 <script setup>
-import { dateFormat, timeAgo, dateTooltipFormat } from '@/utils'
+import { dateFormat, timeAgo, dateTooltipFormat, htmlToText } from '@/utils'
 import { Tooltip } from 'frappe-ui'
 import { computed } from 'vue'
 
@@ -22,7 +26,15 @@ const props = defineProps({
   },
 })
 
+const tooltipHTML = computed(() => {
+  if (props.type === 'html') {
+    return props.value?.toString()
+  }
+  return ''
+})
+
 const tooltipText = computed(() => {
+  if (props.type === 'html') return ''
   if (props.type === 'pretty_date') {
     return dateFormat(props.value, dateTooltipFormat)
   }
@@ -33,6 +45,9 @@ const label = computed(() => {
   if (props.type === 'pretty_date') {
     return timeAgo(props.value)
   }
+  if (props.type === 'html') {
+    return htmlToText(props.value?.toString())
+  }
   return props.value?.toString()
 })
 </script>
diff --git a/frontend/src/pages/Notes.vue b/frontend/src/pages/Notes.vue
new file mode 100644
index 00000000..1726f86d
--- /dev/null
+++ b/frontend/src/pages/Notes.vue
@@ -0,0 +1,101 @@
+<template>
+  <LayoutHeader>
+    <template #left-header>
+      <Breadcrumbs :items="[{ label: list.title }]" />
+    </template>
+    <template #right-header>
+      <Button variant="solid" label="Create">
+        <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
+      </Button>
+    </template>
+  </LayoutHeader>
+  <div class="flex justify-between items-center px-5 pb-2.5 border-b">
+    <div class="flex items-center gap-2">
+      <TabButtons
+        v-model="currentView"
+        :buttons="[{ label: 'List' }, { label: 'Grid' }]"
+        class="w-max"
+      />
+    </div>
+    <div class="flex items-center gap-2">
+      <Button label="Sort">
+        <template #prefix><SortIcon class="h-4" /></template>
+      </Button>
+      <Button label="Filter">
+        <template #prefix><FilterIcon class="h-4" /></template>
+      </Button>
+      <Button icon="more-horizontal" />
+    </div>
+  </div>
+  <ListView :list="list" :columns="columns" :rows="rows" row-key="name" />
+</template>
+
+<script setup>
+import ListView from '@/components/ListView.vue'
+import LayoutHeader from '@/components/LayoutHeader.vue'
+import Breadcrumbs from '@/components/Breadcrumbs.vue'
+import SortIcon from '@/components/Icons/SortIcon.vue'
+import FilterIcon from '@/components/Icons/FilterIcon.vue'
+import { usersStore } from '@/stores/users'
+import { FeatherIcon, Button, createListResource, TabButtons } from 'frappe-ui'
+import { computed, ref } from 'vue'
+
+const { getUser } = usersStore()
+
+const currentView = ref('List')
+
+const list = {
+  title: 'Notes',
+  plural_label: 'Notes',
+  singular_label: 'Note',
+}
+
+const notes = createListResource({
+  type: 'list',
+  doctype: 'CRM Note',
+  fields: ['name', 'title', 'content', 'owner', 'modified'],
+  filters: {},
+  orderBy: 'modified desc',
+  pageLength: 20,
+  auto: true,
+})
+
+const columns = [
+  {
+    label: 'Title',
+    key: 'title',
+    type: 'data',
+    size: 'w-48',
+  },
+  {
+    label: 'Content',
+    key: 'content',
+    type: 'html',
+    size: 'w-96',
+  },
+  {
+    label: 'Created by',
+    key: 'owner',
+    type: 'avatar',
+    size: 'w-36',
+  },
+  {
+    label: 'Last modified',
+    key: 'modified',
+    type: 'pretty_date',
+    size: 'w-28',
+  },
+]
+
+const rows = computed(() => {
+  return notes.data?.map((note) => {
+    return {
+      name: note.name,
+      title: note.title,
+      content: note.content,
+      owner: note.owner && getUser(note.owner),
+      modified: note.modified,
+    }
+  })
+})
+</script>
diff --git a/frontend/src/router.js b/frontend/src/router.js
index 3d9c5758..92b84f89 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -34,6 +34,11 @@ const routes = [
     name: 'Inbox',
     component: () => import('@/pages/Inbox.vue'),
   },
+  {
+    path: '/notes',
+    name: 'Notes',
+    component: () => import('@/pages/Notes.vue'),
+  },
   {
     path: '/contacts',
     name: 'Contacts',
diff --git a/frontend/src/utils.js b/frontend/src/utils.js
index 3e93f980..22ff8fcc 100644
--- a/frontend/src/utils.js
+++ b/frontend/src/utils.js
@@ -93,3 +93,9 @@ export function statusDropdownOptions(data, doctype) {
 export function openWebsite(url) {
   window.open(url, '_blank')
 }
+
+export function htmlToText(html) {
+  const div = document.createElement('div')
+  div.innerHTML = html
+  return div.textContent || div.innerText || ''
+}