feat: refactor ListView with frappe-ui ListView

frontend/package.json

@@ -29,7 +29,7 @@
 		"dom-to-image": "^2.6.0",
 		"echarts": "^5.4.0",
 		"feather-icons": "^4.28.0",
-		"frappe-ui": "0.1.5",
+		"frappe-ui": "0.1.35",
 		"grid-layout-plus": "^1.0.2",
 		"lucide-vue-next": "^0.300.0",
 		"pinia": "^2.0.30",

frontend/src/dashboard/useDashboard.js

@@ -1,5 +1,4 @@
 import useQuery from '@/query/resources/useQuery'
-import { useQueryResource } from '@/query/useQueryResource'
 import sessionStore from '@/stores/sessionStore'
 import { areDeeplyEqual, safeJSONParse } from '@/utils'
 import { createToast } from '@/utils/toasts'
@@ -45,9 +44,7 @@ export default function useDashboard(name) {
 		state.itemLayouts = state.doc.items.map(makeLayoutObject)
 		state.isOwner = state.doc.owner == session.user.user_id
 		state.canShare = state.isOwner || session.user.is_admin
-		resource.is_private.fetch().then((res) => {
-			state.isPrivate = res.message
-		})
+		resource.is_private.fetch().then((res) => (state.isPrivate = res))
 		state.loading = false
 	}
 	reload()
@@ -186,13 +183,11 @@ export default function useDashboard(name) {
 			throw new Error(`Query not found for item ${itemId}`)
 		}
 		const filters = await getChartFilters(itemId)
-		return resource.fetch_chart_data
-			.submit({
-				item_id: itemId,
-				query_name: queryName,
-				filters,
-			})
-			.then((res) => res.message)
+		return resource.fetch_chart_data.submit({
+			item_id: itemId,
+			query_name: queryName,
+			filters,
+		})
 	}
 
 	function refreshFilter(filter_id) {

frontend/src/datasource/DataSource.vue

@@ -9,18 +9,17 @@
 		/>
 	</header>
 
-	<ListView
-		:columns="[
-			{ label: 'Table', name: 'label' },
-			{ label: 'Status', name: 'status' },
-		]"
-		:rows="dataSource.tableList.filter((table) => !table.is_query_based)"
-	>
-		<template #actions>
+	<div class="mb-4 flex h-full flex-col gap-2 overflow-auto px-4">
+		<div class="flex gap-2 overflow-visible py-1">
+			<FormControl placeholder="Search by Title" v-model="searchQuery" :debounce="300">
+				<template #prefix>
+					<SearchIcon class="h-4 w-4 text-gray-500" />
+				</template>
+			</FormControl>
 			<Button
 				variant="outline"
 				iconLeft="link-2"
-				@click="$router.push(`/data-source/${dataSource.doc.name}/relationships`)"
+				@click="router.push(`/data-source/${dataSource.doc.name}/relationships`)"
 			>
 				Manage Relationships
 			</Button>
@@ -29,31 +28,30 @@
 				:button="{ icon: 'more-horizontal', variant: 'outline' }"
 				:options="dropdownActions"
 			/>
-		</template>
-
-		<template #list-row="{ row: table }">
-			<ListRow
-				as="router-link"
-				:row="table"
-				:to="{
+		</div>
+		<ListView
+			:columns="tableListColumns"
+			:rows="filteredTableList"
+			:row-key="'name'"
+			:options="{
+				showTooltip: false,
+				getRowRoute: (table) => ({
 					name: 'DataSourceTable',
 					params: { name: dataSource.doc.name, table: table.name },
-				}"
-			>
-				<ListRowItem> {{ table.label }} </ListRowItem>
-				<ListRowItem class="space-x-2">
-					<IndicatorIcon :class="table.hidden ? 'text-gray-500' : 'text-green-500'" />
-					<span> {{ table.hidden ? 'Disabled' : 'Enabled' }} </span>
-				</ListRowItem>
-			</ListRow>
-		</template>
-
-		<template #emptyState>
-			<div class="text-xl font-medium">No tables.</div>
-			<div class="mt-1 text-base text-gray-600">No tables to display.</div>
-			<Button class="mt-4" label="Sync Tables" variant="solid" @click="syncTables" />
-		</template>
-	</ListView>
+				}),
+				emptyState: {
+					title: 'No tables.',
+					description: 'No tables to display.',
+					button: {
+						label: 'Sync Tables',
+						variant: 'solid',
+						onClick: syncTables,
+					},
+				},
+			}"
+		>
+		</ListView>
+	</div>
 
 	<Dialog
 		v-model="showDeleteDialog"
@@ -80,9 +78,9 @@
 
 <script setup lang="jsx">
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
-import ListView from '@/components/ListView.vue'
 import PageBreadcrumbs from '@/components/PageBreadcrumbs.vue'
-import { ListRow, ListRowItem } from 'frappe-ui'
+import { ListView } from 'frappe-ui'
+import { SearchIcon } from 'lucide-vue-next'
 import { computed, inject, provide, ref, watchEffect } from 'vue'
 import { useRouter } from 'vue-router'
 import useDataSource from './useDataSource'
@@ -100,15 +98,13 @@ provide('dataSource', dataSource)
 dataSource.fetchTables()
 
 const searchQuery = ref('')
-const filteredList = computed(() => {
-	if (!searchQuery.value) {
-		return dataSource.tableList.filter((table) => !table.is_query_based)
-	}
-	return dataSource.tableList.filter(
-		(table) =>
-			!table.is_query_based &&
-			table.label.toLowerCase().includes(searchQuery.value.toLowerCase())
-	)
+const filteredTableList = computed(() => {
+	const tableList = dataSource.tableList.filter((t) => !t.is_query_based)
+	if (!tableList.length) return []
+	if (!searchQuery.value) return tableList
+	return tableList.filter((table) => {
+		return table.label.toLowerCase().includes(searchQuery.value.toLowerCase())
+	})
 })
 
 const showDeleteDialog = ref(false)
@@ -140,4 +136,17 @@ watchEffect(() => {
 		document.title = `${title} - Frappe Insights`
 	}
 })
+
+const tableListColumns = [
+	{ label: 'Table', key: 'label' },
+	{
+		label: 'Status',
+		key: 'status',
+		getLabel: ({ row }) => (row.hidden ? 'Disabled' : 'Enabled'),
+		prefix: ({ row }) => {
+			const color = row.hidden ? 'text-gray-500' : 'text-green-500'
+			return <IndicatorIcon class={color} />
+		},
+	},
+]
 </script>

frontend/src/datasource/DataSourceList.vue

@@ -9,49 +9,38 @@
 			</Button>
 		</div>
 	</header>
-	<ListView
-		:columns="[
-			{ label: 'Title', name: 'title' },
-			{ label: 'Status', name: 'status' },
-			{ label: 'Database Type', name: 'database_type' },
-			{ label: 'Created', name: 'created_from_now' },
-		]"
-		:rows="sources.list"
-	>
-		<template #list-row="{ row: dataSource }">
-			<ListRow
-				as="router-link"
-				:row="dataSource"
-				:to="{
+
+	<div class="mb-4 flex h-full flex-col gap-2 overflow-auto px-4">
+		<div class="flex gap-2 overflow-visible py-1">
+			<FormControl placeholder="Search by Title" v-model="searchQuery" :debounce="300">
+				<template #prefix>
+					<SearchIcon class="h-4 w-4 text-gray-500" />
+				</template>
+			</FormControl>
+		</div>
+		<ListView
+			:columns="dataSourceListColumns"
+			:rows="filteredSourceList"
+			:row-key="'name'"
+			:options="{
+				showTooltip: false,
+				getRowRoute: (dataSource) => ({
 					name: 'DataSource',
 					params: { name: dataSource.name },
-				}"
-			>
-				<ListRowItem> {{ dataSource.title }} </ListRowItem>
-				<ListRowItem class="space-x-2">
-					<IndicatorIcon
-						:class="
-							dataSource.status == 'Inactive' ? 'text-gray-500' : 'text-green-500'
-						"
-					/>
-					<span> {{ dataSource.status }} </span>
-				</ListRowItem>
-				<ListRowItem> {{ dataSource.database_type }} </ListRowItem>
-				<ListRowItem> {{ dataSource.created_from_now }} </ListRowItem>
-			</ListRow>
-		</template>
-
-		<template #emptyState>
-			<div class="text-xl font-medium">No data sources.</div>
-			<div class="mt-1 text-base text-gray-600">No data sources to display.</div>
-			<Button
-				class="mt-4"
-				label="New Data Source"
-				variant="solid"
-				@click="new_dialog = true"
-			/>
-		</template>
-	</ListView>
+				}),
+				emptyState: {
+					title: 'No Data Sources.',
+					description: 'No data sources to display.',
+					button: {
+						label: 'New Data Source',
+						variant: 'solid',
+						onClick: () => (new_dialog = true),
+					},
+				},
+			}"
+		>
+		</ListView>
+	</div>
 
 	<NewDialogWithTypes
 		v-model:show="new_dialog"
@@ -66,17 +55,16 @@
 
 <script setup lang="jsx">
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
-import ListView from '@/components/ListView.vue'
 import NewDialogWithTypes from '@/components/NewDialogWithTypes.vue'
 import PageBreadcrumbs from '@/components/PageBreadcrumbs.vue'
 import ConnectMariaDBDialog from '@/datasource/ConnectMariaDBDialog.vue'
 import ConnectPostgreDBDialog from '@/datasource/ConnectPostgreDBDialog.vue'
 import UploadCSVFileDialog from '@/datasource/UploadCSVFileDialog.vue'
 import useDataSourceStore from '@/stores/dataSourceStore'
 import { updateDocumentTitle } from '@/utils'
-import { ListRow, ListRowItem } from 'frappe-ui'
-import { PlusIcon } from 'lucide-vue-next'
-import { ref } from 'vue'
+import { ListView } from 'frappe-ui'
+import { PlusIcon, SearchIcon } from 'lucide-vue-next'
+import { ref, computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 const new_dialog = ref(false)
@@ -87,11 +75,15 @@ if (route.hash == '#new') {
 }
 
 const sources = useDataSourceStore()
-
-const StatusCell = (props) => (
-	<Badge theme={props.row.status == 'Inactive' ? 'orange' : 'green'}>{props.row.status}</Badge>
-)
-const columns = []
+const searchQuery = ref('')
+const filteredSourceList = computed(() => {
+	if (searchQuery.value) {
+		return sources.list.filter((source) => {
+			return source.title.toLowerCase().includes(searchQuery.value.toLowerCase())
+		})
+	}
+	return sources.list
+})
 
 const router = useRouter()
 const showConnectMariaDBDialog = ref(false)
@@ -127,6 +119,20 @@ const databaseTypes = ref([
 	},
 ])
 
+const dataSourceListColumns = [
+	{ label: 'Title', key: 'title' },
+	{
+		label: 'Status',
+		key: 'status',
+		prefix: ({ row }) => {
+			const color = row.status == 'Inactive' ? 'text-gray-500' : 'text-green-500'
+			return <IndicatorIcon class={color} />
+		},
+	},
+	{ label: 'Database Type', key: 'database_type' },
+	{ label: 'Created', key: 'created_from_now' },
+]
+
 const pageMeta = ref({ title: 'Data Sources' })
 updateDocumentTitle(pageMeta)
 </script>

frontend/src/datasource/useDataSource.ts

@@ -24,8 +24,8 @@ function useDataSource(name: string) {
 	async function fetchTables() {
 		const promises = [resource.get_tables.submit(), resource.get_queries.submit()]
 		const responses = await Promise.all(promises)
-		tableList.value = responses[0].message
-		queryList.value = responses[1].message
+		tableList.value = responses[0]
+		queryList.value = responses[1]
 		dropdownOptions.value = makeDropdownOptions()
 		groupedTableOptions.value = makeGroupedTableOptions()
 		return tableList.value

frontend/src/datasource/useDataSourceTable.ts

@@ -44,7 +44,7 @@ async function useDataSourceTable(params: GetTableParams) {
 	const table: DataSourceTable = reactive({
 		doc,
 		columns,
-		rows: computed(() => resource.getPreview.data?.message),
+		rows: computed(() => resource.getPreview.data),
 		loading: resource.loading,
 		syncing: resource.syncTable.loading,
 		sync: () => resource.syncTable.submit(),