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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boarteam/boar-pack-common-frontend",
-  "version": "2.1.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": "ff8bb25f429f1e0a7d20038c9094e1bed9e37321"
+  "gitHead": "29f4f6c6598c7422bef8e02dfd1e679b471a4aa4"
 }

package/src/components/Descriptions/DescriptionsCreateModal.tsx

@@ -4,7 +4,7 @@ import { TDescriptionsCreateModalProps } from "./descriptionTypes";
 import { ProDescriptions } from "@ant-design/pro-components";
 import { columnsToDescriptionItemProps } from "./useDescriptionColumns";
 import { useForm } from "antd/es/form/Form";
-import { buildFieldsFromColumns } from "../Table";
+import { buildFieldsFromColumnsForDescriptionsDisplay } from "../Table";
 
 const DescriptionsCreateModal = <Entity extends Record<string | symbol, any>>({
   idColumnName,
@@ -19,7 +19,7 @@ const DescriptionsCreateModal = <Entity extends Record<string | symbol, any>>({
 
   const editableKeys = useMemo(() => {
     return [
-      ...buildFieldsFromColumns(
+      ...buildFieldsFromColumnsForDescriptionsDisplay(
         columns,
         idColumnName,
       ),

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/Table.tsx

@@ -68,6 +68,7 @@ const Table = <Entity extends Record<string | symbol, any>,
     popupCreation = false,
     toolBarRender,
     params,
+    popupDataState,
     ...rest
   }: TTableProps<Entity,
     CreateDto,
@@ -77,7 +78,7 @@ const Table = <Entity extends Record<string | symbol, any>,
 ) => {
   const actionRefComponent = useRef<ActionType>();
   const actionRef = actionRefProp || actionRefComponent;
-  const [createPopupData, setCreatePopupData] = useState<Partial<Entity> | undefined>();
+  const [createPopupData, setCreatePopupData] = popupDataState ?? useState<Partial<Entity> | undefined>();
   const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
   const [selectedRecords, setSelectedRecords] = useState<Entity[]>([]);
   const [lastRequest, setLastRequest] = useState<[TGetAllParams & TPathParams, any] | []>([]);

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(
@@ -113,6 +140,21 @@ export function collectFieldsFromColumns<T>(
   return [Array.from(buildFieldsFromColumns<T>(columns, idColumnName, joinFields, fields)).join(',')];
 }
 
+export function buildFieldsFromColumnsForDescriptionsDisplay<T>(
+  columns: TIndexableRecord[] | undefined,
+  idColumnName: string | string[],
+  fields: Set<string> = new Set,
+): Set<string> {
+  columns?.forEach(col => {
+    if ('children' in col && Array.isArray(col.children)) {
+      buildFieldsFromColumnsForDescriptionsDisplay(col.children, idColumnName, fields);
+    }
+    fields.add(String(Array.isArray(col.dataIndex) ? col.dataIndex[0] : col.dataIndex));
+  });
+
+  return fields;
+}
+
 export function buildFieldsFromColumns<T>(
   columns: TIndexableRecord[] | undefined,
   idColumnName: string | string[],

package/src/components/Table/tableTypes.ts

@@ -98,6 +98,7 @@ interface BaseProps<Entity,
   popupCreation?: boolean;
   columnsState?: ColumnStateType;
   columnsSetSelect?: () => React.ReactNode;
+  popupDataState?: [Partial<Entity>, React.Dispatch<React.SetStateAction<Partial<Entity>>>]
 }
 
 interface EditableProps<Entity, CreateDto, UpdateDto, TPathParams = {}> {