feat: added view controls on notes view

crm/fcrm/doctype/crm_note/crm_note.py

@@ -6,4 +6,14 @@ from frappe.model.document import Document
 
 
 class CRMNote(Document):
-	pass
+	@staticmethod
+	def default_list_data():
+		rows = [
+			"name",
+			"title",
+			"content",
+			"reference_doctype",
+			"reference_docname",
+			"modified",
+		]
+		return {'columns': [], 'rows': rows}

frontend/src/components/ViewControls.vue

@@ -41,6 +41,7 @@
         />
         <SortBy v-model="list" :doctype="doctype" @update="updateSort" />
         <ColumnSettings
+          v-if="!options.hideColumnsButton"
           v-model="list"
           :doctype="doctype"
           @update="(isDefault) => updateColumns(isDefault)"
@@ -97,6 +98,13 @@ const props = defineProps({
     type: Object,
     default: {},
   },
+  options: {
+    type: Object,
+    default: {
+      hideColumnsButton: false,
+      defaultViewName: '',
+    },
+  },
 })
 
 const { $dialog } = globalStore()
@@ -117,7 +125,7 @@ const showViewModal = ref(false)
 const currentView = computed(() => {
   let _view = getView(route.query.view)
   return {
-    label: _view?.label || 'List View',
+    label: _view?.label || props.options?.defaultViewName || 'List View',
     icon: _view?.icon || 'list',
   }
 })
@@ -232,7 +240,7 @@ function reload() {
 
 const defaultViews = [
   {
-    label: 'List View',
+    label: props.options?.defaultViewName || 'List View',
     icon: 'list',
     onClick() {
       viewUpdated.value = false

frontend/src/pages/Notes.vue

@@ -9,12 +9,21 @@
       </Button>
     </template>
   </LayoutHeader>
+  <ViewControls
+    v-model="notes"
+    v-model:loadMore="loadMore"
+    doctype="CRM Note"
+    :options="{
+      hideColumnsButton: true,
+      defaultViewName: 'Notes View',
+    }"
+  />
   <div
-    v-if="notes.data?.length"
+    v-if="notes.data?.data?.length"
-    class="grid grid-cols-4 gap-4 overflow-y-auto p-5"
+    class="grid grid-cols-4 gap-4 overflow-y-auto px-5 pb-3"
   >
     <div
-      v-for="note in notes.data"
+      v-for="note in notes.data.data"
       class="group flex h-56 cursor-pointer flex-col justify-between gap-2 rounded-lg border px-5 py-4 shadow-sm hover:bg-gray-50"
       @click="editNote(note)"
     >
@@ -61,6 +70,16 @@
       </div>
     </div>
   </div>
+  <ListFooter
+    v-if="notes.data?.data?.length"
+    class="border-t px-5 py-2"
+    v-model="notes.data.page_length_count"
+    :options="{
+      rowCount: notes.data.row_count,
+      totalCount: notes.data.total_count,
+    }"
+    @loadMore="() => loadMore++"
+  />
   <div v-else class="flex h-full items-center justify-center">
     <div
       class="flex flex-col items-center gap-3 text-xl font-medium text-gray-500"
@@ -84,14 +103,15 @@ import LayoutHeader from '@/components/LayoutHeader.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import NoteIcon from '@/components/Icons/NoteIcon.vue'
 import NoteModal from '@/components/Modals/NoteModal.vue'
+import ViewControls from '@/components/ViewControls.vue'
 import { timeAgo, dateFormat, dateTooltipFormat } from '@/utils'
 import {
-  createListResource,
   TextEditor,
   call,
   Dropdown,
   Tooltip,
   Breadcrumbs,
+  ListFooter,
 } from 'frappe-ui'
 import { ref } from 'vue'
 import { usersStore } from '@/stores/users'
@@ -109,16 +129,8 @@ const breadcrumbs = [{ label: list.title, route: { name: 'Notes' } }]
 const showNoteModal = ref(false)
 const currentNote = ref(null)
 
-const notes = createListResource({
+const notes = ref({})
-  type: 'list',
+const loadMore = ref(1)
-  doctype: 'CRM Note',
-  cache: 'Notes',
-  fields: ['name', 'title', 'content', 'owner', 'modified'],
-  filters: {},
-  orderBy: 'modified desc',
-  pageLength: 20,
-  auto: true,
-})
 
 function createNote() {
   currentNote.value = {