1617 add select all checker to filter multi select widget

api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/api",
-  "version": "14.10.0",
+  "version": "14.11.0",
   "description": "",
   "main": "index.js",
   "scripts": {

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "14.10.0",
+  "version": "14.11.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

dashboard/src/components/filter/filter-multi-select/render/widget.styles.ts

@@ -170,6 +170,9 @@ export default createStyles((theme, { radius = 4, name, ...rest }: MultiSelectWi
           overflowWrap: 'break-word',
         },
       },
+      '.rc-select-item-option-state-icon': {
+        lineHeight: '20px',
+      },
     },
     '.rc-virtual-list-holder-inner': {
       alignItems: 'flex-start',

dashboard/src/components/filter/filter-multi-select/render/widget.tsx

@@ -1,10 +1,25 @@
-import { Badge, CloseButton, Group, MantineRadius, Stack, Text, Tooltip } from '@mantine/core';
+import { Badge, Checkbox, CloseButton, Divider, Group, MantineRadius, Stack, Text, Tooltip } from '@mantine/core';
+import { EmotionStyles } from '@mantine/emotion';
+import _ from 'lodash';
 import Select, { Option } from 'rc-select';
 import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ErrorMessageOrNotFound } from '~/components/filter/error-message-or-not-found';
 import useStyles from './widget.styles';
 
+const DropdownHeaderStyles: EmotionStyles = {
+  root: {
+    cursor: 'pointer',
+    '&:hover': {
+      backgroundColor: 'var(--mantine-color-default-hover)',
+    },
+    'input, .mantine-Checkbox-labelWrapper': {
+      cursor: 'pointer',
+      pointerEvents: 'none',
+    },
+  },
+};
+
 export type TSelectOption = {
   label: string;
   value: string;
@@ -55,6 +70,30 @@ export const MultiSelectWidget = ({
     return options.filter(match);
   }, [keyword, options]);
 
+  const allValueSet = useMemo(() => {
+    return new Set(options.map((o) => o.value));
+  }, [options]);
+
+  const selectedValueSet = useMemo(() => {
+    return new Set(value);
+  }, [value]);
+
+  const allSelected = useMemo(() => {
+    if (selectedValueSet.size !== allValueSet.size) {
+      return false;
+    }
+    return Array.from(allValueSet).every((v) => selectedValueSet.has(v));
+  }, [selectedValueSet, allValueSet]);
+
+  const toggleSelectAll = () => {
+    if (allSelected) {
+      onChange([]);
+      return;
+    }
+    const newValue = Array.from(allValueSet);
+    onChange(newValue);
+  };
+
   return (
     <Stack gap={3}>
       <Group justify="space-between">
@@ -93,6 +132,17 @@ export const MultiSelectWidget = ({
         searchValue={keyword}
         onSearch={setKeyword}
         filterOption={false}
+        dropdownRender={(menu) => (
+          <>
+            {allValueSet.size > 0 && !keyword && (
+              <Group px="xs" py="xs" onClick={toggleSelectAll} styles={DropdownHeaderStyles}>
+                <Checkbox size="xs" checked={allSelected} onChange={_.noop} label={t('common.actions.select_all')} />
+              </Group>
+            )}
+            <Divider />
+            {menu}
+          </>
+        )}
       >
         {filteredOptions.map((o) => (
           <Option key={o.value} title={o.label}>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/root",
-  "version": "14.10.0",
+  "version": "14.11.0",
   "private": true,
   "workspaces": [
     "api",

settings-form/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/settings-form",
-  "version": "14.10.0",
+  "version": "14.11.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

website/package.json

@@ -2,7 +2,7 @@
   "name": "@devtable/website",
   "private": true,
   "license": "Apache-2.0",
-  "version": "14.10.0",
+  "version": "14.11.0",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview"