Zuoqiu-Yingyi/widget-query

或许我们可以扩展config.handler的配置来完成更多的渲染操作

jpanda-cn opened this issue · 4 comments

jpanda-cn commented

我的想法

大致看了下代码,markdown元素的渲染操作主要委托给了config的handler方法处理,在这里handler方法根据对应的字段名称去渲染数据.

如果我们允许用户提供config#handler的扩展,那么就可以实现更巧妙的定制化处理操作,比如,中文标题,自定义标签等操作.

以自定义标签为例,我们可以解析blocks表中ial列的tags部分,对其以,区分,获取文档块的标签,甚至可以提供一个配置项针对不同的tag做不同的颜色渲染.
image

怎么去实现

为了实现上述的能力,我们需要:

  1. 允许用户提供自定义的表头,下面称之为header
  2. 允许用户针对指定的header提供自定义处理方法

其中第一点,目前通过custom-query-fields属性已经实现,接下来是第二步,允许用户针对指定的header提供自定义处理方法.

参考做custom-query-fields的思路,我们可以同样借助于思源的ial属性存放自定义的处理方法定义,比如: custom-handler.

为了更方便的去使用自定义handler,可以考虑提供一个上下文对象Context,这个Context包含了常用方法的引用的同时包含一些新的内置函数,比如:

//深度解析ial属性
// 
/**
 * 获取ial中指定key值,并解析为json对象
 * @key ial中的key值
 * @filter 一个方法,用来过滤元素,比如,上图中,ial有一个名为TODO的标签,我不想展示,可以通过filter过滤掉
 */
funct parseIalJson(key,filter){}
/* 
 * 获取ial中指定key值,并解析为数组
 * @key  ial中的key值
 *  @filter 一个方法,用来过滤元素
 * /
funct parseIalStrArraykey){key,split,filter}

/*
 * 渲染markdown数据
 * /
funct render(md)

这样的话下面的handler方法就需要有针对性的进行一些调整:

  handler: { // 块查询结果各字段处理方法
            content: (row) => {
                switch (config.query.limit) {
                    case 'len':
                        return markdown2span(cutString(ReplaceSpace(row.content, config.query.space), config.query.maxlen));
                    case 'row':
                        return markdown2span(ReplaceCRLF(cutString(row.content, undefined, config.query.maxrow), config.query.CRLF));
                    default:
                        return markdown2span(row.content);
                }
            },

以context对应的处理方法为例,其定义可能会变成:

context:(row,context)->{
// do somethings
}

关于自定义函数的解析,我们可以交由eval方法去处理,当然在我们点击query按钮表达式解析报错时,可以将报错数据通过一些方式显式的展示出来,比如:alert.

当我们做到了这些,本质上我们拥有了一个十分强大的表格,甚至在一定程度上要比notion的database还要强大,因为借助于javascript语言,我们可以实现更丰富的操作.比如:
image

一些其他的想法

当前这种设计的使用成本很高,对于有一定编程经验的人来说,会比较容易上手,但是对于非程序员来说,使用时可能会是一个困扰.

针对这种情况,可以考虑有一个可视化界面,在Query按钮旁,放置一个设置按钮,点击时,全屏展示,这样可以跳过iframe本身大小的限制.

之后,可以提供一个简单的可视化界面,做多级操作:

  1. 新增表头,即需要展示的内容
  2. 填写自定义处理方法,这里可以直接选择内置的一些方法,也可以自己写javascript. 更进一步,我们可以通过列出context对象的方法成员生成一个下拉列表,来选择一些内置的处理方法
  3. 继续新增表头,或者保存
    用户保存的内容,我们可以存放到ial字段的指定key值中.
Zuoqiu-Yingyi commented

@jpanda-cn

  1. 默认块查询 SELECT * FROM blocks ... 的确可以优化, 我尝试按照文中所提到的方案, 将 IAL 解析后传给 config.query.handler 内的函数句柄中
  2. 自定义表头可以通过字符串拼接 + 自定义别名前缀 __pre__ 的方案在 SQL 语句中渲染样式
Zuoqiu-Yingyi commented

@jpanda-cn Release Query v0.2.0 release · Zuoqiu-Yingyi/widget-query

  • 默认块查询 SELECT * FROM blocks ... , 将 IAL 解析后传给 config.query.handler 内的函数句柄中
  • 使用背景颜色显示当前状态: 查询中/查询结果为空/SQL语句错误/...