Merge pull request #25 from liufree/dev

feat: support elink

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "querydash",
 	"name": "QueryDash",
-	"version": "1.0.8",
+	"version": "1.0.9",
 	"minAppVersion": "1.8.0",
 	"description": "Refer to Dataview and add search, sorting, and pagination functions, just like Notion.",
 	"author": "lwx",

src/pages/GenerateColumns.tsx

@@ -1,3 +1,8 @@
+import {TFile} from "obsidian";
+import React from "react";
+import {Typography} from "antd";
+
+const {Text, Link} = Typography;
 
 export function formatValue(
 	value: Record<string, any>
@@ -19,18 +24,70 @@ export function formatValue(
 }
 
 function formatObject(value: any) {
-	const type =value.type;
-	if(type==='file') {
+	const type = value.type;
+	if (type === 'file') {
 		const fileName = value.path.split('/').pop().replace(/\.md$/, '')
 		return {type: "link", path: value.path, display: fileName};
 	}
 
 	if ("path" in value && "display" in value) {
-	//	console.log("link value", value);
+		//	console.log("link value", value);
 		return {type: "link", path: value.path, display: value.display};
 	}
 	if ("ts" in value) {
-		const display= window.moment(value.ts).format("YYYY-MM-DD HH:mm:ss");
+		const display = window.moment(value.ts).format("YYYY-MM-DD HH:mm:ss");
 		return {type: "datetime", display: display};
 	}
+	if (value.url) {
+		return {type: "externalLink", path: value.url, display: value.display || value.url};
+	}
+
+	return {type: "text", display: value.display};
 }
+
+export const ellipsisLink = (app: any, display: string, path: any) => {
+	return (
+		<a
+			onClick={() => {
+				const file = app.vault.getAbstractFileByPath(path);
+				if (file && file instanceof TFile) {
+					const leaf = app.workspace.getLeaf();
+					leaf.openFile(file);
+				}
+			}}>
+			<Text
+				style={display ? {maxWidth: 200, color: '#1890ff'} : {color: '#1890ff'}}
+				ellipsis={{expanded: true}}
+			>
+				{display}
+			</Text>
+		</a>
+	);
+};
+
+export const ellipsisDisplay = (display: string) => {
+	return (
+		<Text
+			style={display ? {maxWidth: 300} : undefined}
+			ellipsis={{expanded: true}}
+		>
+			{display?.toString()}
+		</Text>
+	);
+};
+
+export const externalLink = (display: string, path: string) => {
+	// 在obsidian中打开外部链接
+	return <a
+		onClick={() => {
+			window.open(path, "_blank");
+		}}>
+		<Text
+			style={display ? {maxWidth: 200, color: '#1890ff'} : {color: '#1890ff'}}
+			ellipsis={{expanded: true}}
+		>
+			{display}
+		</Text>
+	</a>;
+}
+

src/pages/tableview/TableView.tsx

@@ -1,51 +1,16 @@
 import type {ActionType, ProColumns} from '@ant-design/pro-components';
 import {ProTable} from '@ant-design/pro-components';
-import {List, Tag, Typography} from 'antd';
+import {List, Tag} from 'antd';
 import React, {useEffect, useRef} from 'react';
 import {getAPI} from 'obsidian-dataview';
-import {formatValue} from "../GenerateColumns";
-import {App, TFile} from "obsidian";
+import {formatValue, ellipsisLink, ellipsisDisplay, externalLink} from "../GenerateColumns";
 import {ViewProps} from "../../models/ViewProps";
 
 
 const TableView: React.FC<ViewProps> = ({app, source}) => {
 
 	const [columns, setColumns] = React.useState<ProColumns<any>[]>([]);
-
 	const dv = getAPI(app);
-	const {Text, Link} = Typography;
-
-
-	const ellipsisLink = (display: string, path: any) => {
-		return (
-			<Link
-				onClick={() => {
-					const file = app.vault.getAbstractFileByPath(path);
-					if (file && file instanceof TFile) {
-						const leaf = app.workspace.getLeaf();
-						leaf.openFile(file);
-					}
-				}}>
-				<Text
-					style={display ? {maxWidth: 200, color: '#1890ff'} : {color: '#1890ff'}}
-					ellipsis={{expanded:true}}
-				>
-					{display}
-				</Text>
-			</Link>
-		);
-	};
-
-	const ellipsisDisplay = (display: string) => {
-		return (
-			<Text
-				style={display ? {maxWidth: 300} : undefined}
-				ellipsis={{expanded:true}}
-			>
-				{display?.toString()}
-			</Text>
-		);
-	};
 
 	const createColumns = (headers: string[]) => {
 		let columns = [];
@@ -66,14 +31,17 @@ const TableView: React.FC<ViewProps> = ({app, source}) => {
 					if (type === "datetime") {
 						return ellipsisDisplay(display);
 					}
+					if (type === "externalLink") {
+						return externalLink(display, path);
+					}
 					if (type === "link") {
-						return ellipsisLink(display, path);
+						return ellipsisLink(app, display, path);
 					}
 					if (type === "array") {
 						return display.map((v: any) => {
 							if (typeof v === "object") {
 								return <List.Item>
-									{ellipsisLink(v.display, v.path)}
+									{ellipsisLink(app, v.display, v.path)}
 								</List.Item>
 							} else {
 								// tags
@@ -138,6 +106,8 @@ const TableView: React.FC<ViewProps> = ({app, source}) => {
 
 		const queryResult = await dvApi.query(sql);
 
+		console.log("queryResult", queryResult);
+
 		const tableData: any = parseTableResult(queryResult.value, params);
 
 		const headers: string[] = queryResult.value.headers;
@@ -181,6 +151,8 @@ const TableView: React.FC<ViewProps> = ({app, source}) => {
 			request={async (params, sort, filter) => {
 				//	console.log('params:', params);
 				const response = await executeTableQuery(dv, source, params);
+
+				console.log("response", response);
 				const {tableData, columns} = response;
 
 				setColumns(columns);