From 837ff71276dbc565b2d7068c37b52b498ae80361 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Mon, 20 Nov 2023 12:06:55 +0800
Subject: [PATCH] :art: filter
 https://github.com/siyuan-note/siyuan/issues/9667

---
 app/src/assets/scss/business/_av.scss | 21 +++++++++++----------
 app/src/protyle/render/av/col.ts      |  5 +++--
 app/src/protyle/render/av/filter.ts   | 15 +++++++++++++--
 app/src/types/index.d.ts              |  2 ++
 4 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss
index 61489758c..118cb50bb 100644
--- a/app/src/assets/scss/business/_av.scss
+++ b/app/src/assets/scss/business/_av.scss
@@ -269,15 +269,16 @@
     align-items: center;
     flex: 1;
     overflow: hidden;
-  }
 
-  &__cellheadericon {
-    height: 1em;
-    width: 1em;
-    color: var(--b3-theme-on-surface);
-    margin: 0 5px 0 0;
-    flex-shrink: 0;
-    line-height: 1em;
+    .av__cellheadericon {
+      height: 1em;
+      width: 1em;
+      color: var(--b3-theme-on-surface);
+      margin: 0 5px 0 0;
+      flex-shrink: 0;
+      line-height: 1em;
+      font-size: inherit;
+    }
   }
 
   &__celltext {
@@ -448,10 +449,10 @@ img.av__cellassetimg {
   vertical-align: top;
 }
 
-html[data-theme-mode="dark"] .av__panel .b3-menu__item {
+html[data-theme-mode="dark"] .av__panel .b3-menu__item[draggable="true"] {
   mix-blend-mode: lighten;
 }
 
-html[data-theme-mode="light"] .av__panel .b3-menu__item {
+html[data-theme-mode="light"] .av__panel .b3-menu__item[draggable="true"] {
   mix-blend-mode: darken;
 }
diff --git a/app/src/protyle/render/av/col.ts b/app/src/protyle/render/av/col.ts
index 8c00f2f79..ff5d6cffc 100644
--- a/app/src/protyle/render/av/col.ts
+++ b/app/src/protyle/render/av/col.ts
@@ -107,7 +107,7 @@ export const getEditHTML = (options: {
 <button class="b3-menu__separator"></button>
 <button class="b3-menu__item" data-type="nobg">
     <span style="padding: 5px;margin-right: 8px;width: 14px;font-size: 14px;" class="block__icon block__icon--show" data-col-type="${colData.type}" data-icon="${colData.icon}" data-type="update-icon">${colData.icon ? unicode2Emoji(colData.icon) : `<svg><use xlink:href="#${getColIconByType(colData.type)}"></use></svg>`}</span>
-    <span class="b3-menu__label" style="padding: 4px"><input data-type="name" class="b3-text-field fn__block" type="text" value="${colData.name}"></span>
+    <span class="b3-menu__label" style="padding: 4px;display: flex;"><input data-type="name" class="b3-text-field fn__block" type="text" value="${colData.name}"></span>
 </button>
 <button class="b3-menu__item" data-type="goUpdateColType">
     <span class="b3-menu__label">${window.siyuan.languages.type}</span>
@@ -120,7 +120,7 @@ export const getEditHTML = (options: {
         html += `<button class="b3-menu__separator"></button>
 <button class="b3-menu__item">
     <svg class="b3-menu__icon" style=""><use xlink:href="#iconAdd"></use></svg>
-    <span class="b3-menu__label" style="padding: 4px"><input data-type="addOption" class="b3-text-field fn__block fn__size200" type="text" placeholder="Enter ${window.siyuan.languages.addAttr}"></span>
+    <span class="b3-menu__label" style="padding: 4px;display: flex"><input data-type="addOption" class="b3-text-field fn__block fn__size200" type="text" placeholder="Enter ${window.siyuan.languages.addAttr}"></span>
 </button>`;
         colData.options.forEach(item => {
             html += `<button class="b3-menu__item${html ? "" : " b3-menu__item--current"}" draggable="true" data-name="${item.name}" data-color="${item.color}">
@@ -177,6 +177,7 @@ export const getEditHTML = (options: {
     ${genUpdateColItem("mSelect", colData.type, colData.name)}
     ${genUpdateColItem("date", colData.type, colData.name)}
     ${genUpdateColItem("mAsset", colData.type, colData.name)}
+    ${genUpdateColItem("checkbox", colData.type, colData.name)}
     ${genUpdateColItem("url", colData.type, colData.name)}
     ${genUpdateColItem("email", colData.type, colData.name)}
     ${genUpdateColItem("phone", colData.type, colData.name)}
diff --git a/app/src/protyle/render/av/filter.ts b/app/src/protyle/render/av/filter.ts
index bb04969f8..7d4aca26d 100644
--- a/app/src/protyle/render/av/filter.ts
+++ b/app/src/protyle/render/av/filter.ts
@@ -9,7 +9,7 @@ import * as dayjs from "dayjs";
 import {unicode2Emoji} from "../../../emoji";
 
 export const getDefaultOperatorByType = (type: TAVCol) => {
-    if (type === "number" || type === "select") {
+    if (["select", "number"].includes(type)) {
         return "=";
     }
     if (["text", "mSelect", "url", "block", "email", "phone", "template"].includes(type)) {
@@ -75,7 +75,10 @@ export const setFilter = (options: {
                 cellValue = genCellValue(colData.type, textElements[0].value);
             }
         } else {
-            const mSelect: { color: string, content: string }[] = [];
+            const mSelect: {
+                color: string,
+                content: string
+            }[] = [];
             window.siyuan.menus.menu.element.querySelectorAll("svg").forEach(item => {
                 if (item.firstElementChild.getAttribute("xlink:href") === "#iconCheck") {
                     const chipElement = item.nextElementSibling.firstElementChild as HTMLElement;
@@ -137,6 +140,10 @@ export const setFilter = (options: {
         }
     });
     switch (colData.type) {
+        case "checkbox":
+            selectHTML = `<option ${"Is true" === options.filter.operator ? "selected" : ""} value="Is true">${window.siyuan.languages.checked}</option>
+<option ${"Is false" === options.filter.operator ? "selected" : ""} value="Is false">${window.siyuan.languages.unchecked}</option>`;
+            break;
         case "block":
         case "text":
         case "url":
@@ -375,6 +382,10 @@ export const getFiltersHTML = (data: IAVTable) => {
                     filterValue = ": " + window.siyuan.languages.filterOperatorIsEmpty;
                 } else if (filter.operator === "Is not empty") {
                     filterValue = ": " + window.siyuan.languages.filterOperatorIsNotEmpty;
+                } else if (filter.operator === "Is false") {
+                    filterValue = ": " + window.siyuan.languages.unchecked;
+                } else if (filter.operator === "Is true") {
+                    filterValue = ": " + window.siyuan.languages.checked;
                 } else if (filter.value?.date?.content) {
                     if (filter.value?.date?.content2 && filter.operator === "Is between") {
                         filterValue = ` ${window.siyuan.languages.filterOperatorIsBetween} ${dayjs(filter.value.date.content).format("YYYY-MM-DD")} ${dayjs(filter.value.date.content2).format("YYYY-MM-DD")}`;
diff --git a/app/src/types/index.d.ts b/app/src/types/index.d.ts
index 2c5e7de8d..a9467c571 100644
--- a/app/src/types/index.d.ts
+++ b/app/src/types/index.d.ts
@@ -88,6 +88,8 @@ type TAVFilterOperator =
     | "Ends with"
     | "Is between"
     | "Is relative to today"
+    | "Is true"
+    | "Is false"
 declare module "blueimp-md5"
 
 interface Window {