fix: added notes list and added in sidebar

frappe-ui

@@ -1 +1 @@
-Subproject commit 4f618ce26fac8f32596a33d722ad79f415288567
+Subproject commit 9167057574f2650e83360beb05ae25f0b6478211

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,

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>

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>

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',

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 || ''
+}