diff --git a/README-zh.md b/README-zh.md index 18d29c4..2981589 100644 --- a/README-zh.md +++ b/README-zh.md @@ -1,5 +1,7 @@ +**Obsidian Bases Table View Support** - +QueryDash now supports views powered by the Obsidian Bases plugin. Thanks to the open API provided by Bases, users can +seamlessly display and interact with Bases data in a flexible format. **项目目标** QueryDash的目标是开发一款类似Notion Database的Obsidian插件，但不仅限于数据库功能。 @@ -19,8 +21,14 @@ QueryDash的目标是开发一款类似Notion Database的Obsidian插件，但不 - **分页**：优化大数据量下的浏览体验。 - **任务**：支持任务管理，包括任务编辑。 -**使用教程** +# **使用教程** +## bases + + +![DashTableView.png](docs/DashTableView.png) + +## dataview ~~~markdown ```querydash diff --git a/README.md b/README.md index d7a435e..69de49a 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,24 @@ +**Obsidian Bases Table View Support** + +QueryDash now supports views powered by the Obsidian Bases plugin. Thanks to the open API provided by Bases, users can +seamlessly display and interact with Bases data in a flexible format. + **Project Objective** -The goal of QueryDash is to develop an Obsidian plugin similar to Notion Database, but not limited to database functionality. +The goal of QueryDash is to develop an Obsidian plugin similar to Notion Database, but not limited to database +functionality. **Since the API of Dataview is used, the Dataview plugin must be enabled.** -In the future, it will gradually expand with more practical features to help users manage knowledge, tasks, and life more efficiently. +In the future, it will gradually expand with more practical features to help users manage knowledge, tasks, and life +more efficiently. **If you are interested in this project, please consider starring it. Thank you very much, it means a lot to me.** **language** + - [English](README.md) - [简体中文](README-zh.md) **Current Features** + 1. **Multi-view Support**: Provides table and list views to meet different scenario needs. - **timeline**: use timeline view to display data. 2. **Dataview SQL Support**: Compatible with Dataview's SQL syntax . @@ -18,11 +27,19 @@ In the future, it will gradually expand with more practical features to help use - **Filter**: Screen data based on conditions. - **Aggregation**: Supports data summary statistics. - **Pagination**: Optimizes browsing experience for large datasets. - - **Task**: Supports task management, including task editing. + - **Task**: Supports task management, including task editing. -**Tutorial** +# **Tutorial** + +## bases + + +![DashTableView.png](docs/DashTableView.png) + +## dataview **table** + ~~~markdown ```querydash table file.name , file.outlinks as "links" ,file.ctime as "ctime", @@ -33,6 +50,7 @@ file.mtime as "mtime" ,file.tags as "tags" from #clippings ![demo.gif](docs/demo.gif) **task** + ~~~markdown ```querydash task @@ -44,15 +62,18 @@ task **timeline** **simple mode** + ~~~markdown ```querydash timeline from #start ``` ~~~ + ![timeline.png](docs/timeline.png) **full mode** If you want to append the time later, alias a specific field as "time". + ~~~markdown ```querydash timeline file.ctime as "time" from #start where file.ctime<=date(today) sort file.mtime desc @@ -60,6 +81,7 @@ timeline file.ctime as "time" from #start where file.ctime<=date(today) sort fil ~~~ **Future Vision** + 1. **Homepage**: Integrate frequently used functions into the homepage for one-stop convenience. 2. **Multi-view Support**: Supports timeline, gallery, table, and other views to meet diverse scenario needs. 3. **Review Cards**: Built-in review function to help users efficiently consolidate knowledge. @@ -67,18 +89,25 @@ timeline file.ctime as "time" from #start where file.ctime<=date(today) sort fil 5. **More Features**: Continuous development to enrich plugin functionality and enhance user experience. **Reference Projects** + - [Dataview](https://github.com/blacksmithgu/obsidian-dataview): A powerful data query and management tool. - [Project](https://github.com/marcusolsson/obsidian-projects): A task and project management plugin. **Project Introduction** -As a deep user of Obsidian, I found that existing plugins could not fully meet my needs in terms of search, review, and editing/deleting Dataview tables. Therefore, I decided to develop a brand-new view system based on Ant Design, aiming to enhance the Obsidian experience and better assist daily life and work. +As a deep user of Obsidian, I found that existing plugins could not fully meet my needs in terms of search, review, and +editing/deleting Dataview tables. Therefore, I decided to develop a brand-new view system based on Ant Design, aiming to +enhance the Obsidian experience and better assist daily life and work. -Currently, the project is in its early stages, but I will continue to invest in development to gradually improve and expand its features. I believe that through continuous iteration, this project will become increasingly practical and powerful. +Currently, the project is in its early stages, but I will continue to invest in development to gradually improve and +expand its features. I believe that through continuous iteration, this project will become increasingly practical and +powerful. **About Sponsorship** -This project is entirely developed out of personal interest. If you find it helpful and are willing to support my work, every sponsorship will be a motivation for me to continue developing. Thank you very much! +This project is entirely developed out of personal interest. If you find it helpful and are willing to support my work, +every sponsorship will be a motivation for me to continue developing. Thank you very much! **Future Plans** + - Improve existing features to enhance user experience. - Add more practical features, such as advanced search and intelligent review. - Optimize performance to ensure system stability. diff --git a/docs/DashTableView.png b/docs/DashTableView.png new file mode 100644 index 0000000..3ee9b25 Binary files /dev/null and b/docs/DashTableView.png differ diff --git a/package.json b/package.json index 055b4f0..6358747 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "obsidian-querydash", - "description": "Refer to Dataview and add search, sorting, and pagination functions, just like Notion.", + "description": "The new view for bases refers to an updated or additional interface that allows users to interact with base data in a different way, such as through enhanced search, sorting, and pagination features, similar to Notion. This improves usability and data management within your application. It was originally a new view for dataview, but now its functionality has been extended to bases.", "main": "main.js", "scripts": { "dev": "vite build --watch --mode development", diff --git a/src/pages/bases/DashTableView.tsx b/src/pages/bases/DashTableView.tsx index 5e71ae0..2892ab1 100644 --- a/src/pages/bases/DashTableView.tsx +++ b/src/pages/bases/DashTableView.tsx @@ -1,10 +1,11 @@ import {BasesPropertyId, BasesView, MarkdownRenderer, parsePropertyId, QueryController} from 'obsidian'; import {createRoot} from "react-dom/client"; -import React, {useEffect} from "react"; +import React, {useEffect, useState} from "react"; import {ViewProps} from "../../models/ViewProps"; import {ProColumns, ProTable} from "@ant-design/pro-components"; import {ellipsisDisplay, ellipsisLink, externalLink} from "../GenerateColumns"; -import {List, Tag} from "antd"; +import {ConfigProvider, List, Tag, theme} from "antd"; +import enUS from "antd/locale/en_US"; export const TableViewType = 'dash-table-view'; @@ -152,6 +153,10 @@ export class DashTableView extends BasesView { const TableView: React.FC = ({columnsHead, data}) => { + const [isDarkTheme, setIsDarkTheme] = useState( + document.body.classList.contains("theme-dark") + ); + const [columns, setColumns] = React.useState[]>([]); function parseTableResult(rows: any, params: any): Array> { @@ -185,51 +190,76 @@ const } useEffect(() => { - // console.log("source", source); + // Detect Obsidian's theme + const updateTheme = () => { + const isDark = document.body.classList.contains("theme-dark"); + setIsDarkTheme(isDark); + }; + + // Initial theme detection + updateTheme(); + + // Listen for theme changes + const observer = new MutationObserver(updateTheme); + observer.observe(document.body, {attributes: true, attributeFilter: ["class"]}); + + return () => observer.disconnect(); }, []); return ( - record.key} - search={{ - labelWidth: 'auto', - }} - pagination={{ - showSizeChanger: true, - }} - headerTitle="TableView" - request={async (params, sort, filter) => { - // console.log('params:', params); - const response = await executeTableQuery(data, params); + > + record.key} + search={{ + labelWidth: 'auto', + }} + pagination={{ + showSizeChanger: true, + }} + headerTitle="TableView" + request={async (params, sort, filter) => { + // console.log('params:', params); + const response = await executeTableQuery(data, params); - const {tableData, columns} = response; + const {tableData, columns} = response; - setColumns(columns); - return Promise.resolve({ - data: tableData, - success: true, - total: tableData.length, - }); - }} - /> + setColumns(columns); + return Promise.resolve({ + data: tableData, + success: true, + total: tableData.length, + }); + }} + /> + ); };