@boarteam/boar-pack-common-frontend 2.3.0 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boarteam/boar-pack-common-frontend",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "Common frontend package for Boar Pack",
   "repository": "git@github.com:boarteam/boar-pack.git",
   "author": "Andrew Balakirev <balakirev.andrey@gmail.com>",
@@ -46,5 +46,5 @@
   "scripts": {
     "yalc:push": "yalc push"
   },
-  "gitHead": "41820e4b6df7d9d82c5a87e735d59dbf95e36751"
+  "gitHead": "29f4f6c6598c7422bef8e02dfd1e679b471a4aa4"
 }

package/src/components/Inputs/filterDropdowns.tsx

@@ -1,7 +1,9 @@
-import { Tag, Input, InputNumber, Space, Button } from "antd";
+import { Tag, Input, InputNumber, Space, Button, Switch, Descriptions, Checkbox, Typography } from "antd";
 import { ColumnFilterItem, FilterDropdownProps } from "antd/es/table/interface";
 import { ReactNode, useEffect, useState } from "react";
 
+const { Text } = Typography;
+
 export const booleanFilters: ColumnFilterItem[] = [
   { text: <Tag color='red'>Disabled</Tag>, value: 0 },
   { text: <Tag color='green'>Enabled</Tag>, value: 1 },
@@ -22,9 +24,45 @@ export function NumberFilterDropdown({ setSelectedKeys, selectedKeys, confirm, c
   )
 }
 
+export function SwitchFilterDropdown({ setSelectedKeys, selectedKeys, confirm, clearFilters, close }: FilterDropdownProps) {
+  return (
+    <DynamicOptionsFilterDropdown confirm={confirm} clearFilters={clearFilters}>
+      <Descriptions
+        style={{ margin: '8px 16px', width: 200 }}
+        items={[
+          {
+            label: 'Only filled values',
+            children: <Switch
+              checked={selectedKeys.length ? Boolean(selectedKeys[0]) : undefined}
+              onChange={(value) => setSelectedKeys([value as any])}
+            />,
+            style: { padding: 0 },
+            contentStyle: { justifyContent: 'flex-end' },
+          }
+        ]}
+      />
+    </DynamicOptionsFilterDropdown>
+  )
+}
+
+export function CheckboxFilterDropdown({ setSelectedKeys, selectedKeys, confirm, clearFilters, close }: FilterDropdownProps) {
+  return (
+    <DynamicOptionsFilterDropdown confirm={confirm} clearFilters={clearFilters}>
+      <Checkbox
+        checked={selectedKeys.length ? Boolean(selectedKeys[0]) : undefined}
+        onChange={(event) => setSelectedKeys([event.target.checked as any])}
+        indeterminate={selectedKeys.length === 0}
+        style={{ margin: '8px 16px', width: 250 }}
+      >
+        {selectedKeys.length ? (selectedKeys[0] ? 'Will show only filled values' : 'Will show only empty values') : <Text type="secondary">Click to filter</Text>}
+      </Checkbox>
+    </DynamicOptionsFilterDropdown>
+  )
+}
+
 export function NumberRangeFilterDropdown({ setSelectedKeys, selectedKeys, confirm, clearFilters, close }: FilterDropdownProps) {
   const [range, updateRange] = useState<[number, number] | undefined>(selectedKeys);
-  
+
   useEffect(() => {
     updateRange(selectedKeys);
   }, [selectedKeys]);
@@ -71,8 +109,8 @@ export function StringFilterDropdown({ setSelectedKeys, selectedKeys, confirm, c
 
 export const DynamicOptionsFilterDropdown = ({
   children,
-  confirm, 
-  clearFilters, 
+  confirm,
+  clearFilters,
 }: Partial<FilterDropdownProps> & { children: ReactNode}) => {
   return (
     <div style={{ display: 'flex', flexDirection: 'column' }} onKeyDown={(e) => e.stopPropagation()}>
@@ -80,8 +118,8 @@ export const DynamicOptionsFilterDropdown = ({
       <Space className="ant-table-filter-dropdown-btns">
         <Button
           type="link"
-          onClick={() => { 
-            clearFilters(); 
+          onClick={() => {
+            clearFilters();
             confirm();
           }}
           size="small"

package/src/components/Table/tableTools.ts

@@ -20,19 +20,44 @@ export function getFiltersSearch({
     let operator = col.filterOperator || col.operator;
     let value = filters[colDataIndex] || baseFilters[colDataIndex];
     filterKeys.delete(colDataIndex);
-    if (!value || col.numeric && !Number.isFinite(Number(value))) {
+    if (value === '' || value === undefined || col.numeric && !Number.isFinite(Number(value))) {
       return;
     }
 
-    if (operator === Operators.between) {
-      if (value?.[0] === undefined) {
-        operator = Operators.lowerOrEquals;
-        value = value?.[1];
-      }
-      else if (value?.[1] === undefined) {
-        operator = Operators.greaterOrEquals;
-        value = value?.[0];
-      }
+    switch (operator) {
+      case Operators.between:
+        if (Array.isArray(value)) {
+          if (value?.[0] === undefined) {
+            operator = Operators.lowerOrEquals;
+            value = value?.[1];
+          } else if (value?.[1] === undefined) {
+            operator = Operators.greaterOrEquals;
+            value = value?.[0];
+          }
+        }
+        break;
+
+      case Operators.isNull:
+        if (Array.isArray(value)) {
+          value = value[0];
+        }
+
+        if (value !== true) {
+          operator = Operators.notNull;
+          value = true;
+        }
+        break;
+
+      case Operators.notNull:
+        if (Array.isArray(value)) {
+          value = value[0];
+        }
+
+        if (value !== true) {
+          operator = Operators.isNull;
+          value = true;
+        }
+        break;
     }
 
     search.$and?.push({ [field]: { [operator]: value } });
@@ -54,6 +79,8 @@ export const Operators = {
   between: CondOperator.BETWEEN,
   greaterOrEquals: CondOperator.GREATER_THAN_EQUALS,
   lowerOrEquals: CondOperator.LOWER_THAN_EQUALS,
+  isNull: CondOperator.IS_NULL,
+  notNull: CondOperator.NOT_NULL,
 } as const;
 
 export function applyKeywordToSearch(