Merge pull request #348 from xieliuduo/dev-checkbox

feat(control): add Checkbox controller for board
running-elephant · Dec 13, 2021 · 2a7cbcb · 2a7cbcb
2 parents 64ea038 + dae76e2
commit 2a7cbcb
Show file tree

Hide file tree

Showing 10 changed files with 112 additions and 29 deletions.
diff --git a/...shBoardPage/components/WidgetCore/ControllerWIdget/Controller/CheckboxGroupController.tsx b/...shBoardPage/components/WidgetCore/ControllerWIdget/Controller/CheckboxGroupController.tsx
@@ -0,0 +1,68 @@
+/**
+ * Datart
+ *
+ * Copyright 2021
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Checkbox, Form } from 'antd';
+import { CheckboxValueType } from 'antd/lib/checkbox/Group';
+import { ControlOption } from 'app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/types';
+import React, { memo, useCallback } from 'react';
+import styled from 'styled-components/macro';
+
+export interface CheckboxGroupControllerProps {
+  options?: ControlOption[];
+  value?: CheckboxValueType[];
+  placeholder?: string;
+  onChange: (values) => void;
+  label?: React.ReactNode;
+  name?: string;
+  required?: boolean;
+}
+
+export const CheckboxGroupControllerForm: React.FC<CheckboxGroupControllerProps> =
+  memo(({ label, name, required, ...rest }) => {
+    return (
+      <Form.Item
+        name={name}
+        label={label}
+        validateTrigger={['onChange', 'onBlur']}
+        rules={[{ required: false }]}
+      >
+        <CheckboxGroupSetter {...rest} />
+      </Form.Item>
+    );
+  });
+export const CheckboxGroupSetter: React.FC<CheckboxGroupControllerProps> = memo(
+  ({ options, onChange, value }) => {
+    const renderOptions = useCallback(() => {
+      return (options || []).map(o => ({
+        label: o.label ?? o.value,
+        value: o.value,
+      }));
+    }, [options]);
+    return (
+      <Wrapper>
+        <Checkbox.Group
+          value={value}
+          onChange={onChange}
+          options={renderOptions()}
+        />
+      </Wrapper>
+    );
+  },
+);
+const Wrapper = styled.div`
+  display: flex;
+`;
diff --git a/...c/app/pages/DashBoardPage/components/WidgetCore/ControllerWIdget/ControllerWidgetCore.tsx b/...c/app/pages/DashBoardPage/components/WidgetCore/ControllerWIdget/ControllerWidgetCore.tsx
@@ -43,6 +43,7 @@ import React, {
 } from 'react';
 import styled from 'styled-components/macro';
 import { LabelName } from '../WidgetName/WidgetName';
+import { CheckboxGroupControllerForm } from './Controller/CheckboxGroupController';
 import { MultiSelectControllerForm } from './Controller/MultiSelectController';
 import { NumberControllerForm } from './Controller/NumberController';
 import { RadioGroupControllerForm } from './Controller/RadioGroupController';
@@ -223,7 +224,16 @@ export const ControllerWidgetCore: React.FC<{}> = memo(() => {
             label={leftControlLabel}
           />
         );
-
+      case ControllerFacadeTypes.CheckboxGroup:
+        form.setFieldsValue({ value: controllerValues });
+        return (
+          <CheckboxGroupControllerForm
+            onChange={onControllerChange}
+            options={selectOptions}
+            name={'value'}
+            label={leftControlLabel}
+          />
+        );
       case ControllerFacadeTypes.Slider:
         form.setFieldsValue({ value: controllerValues?.[0] });
         const step = config.sliderConfig?.step || 1;

diff --git a/frontend/src/app/pages/DashBoardPage/constants.ts b/frontend/src/app/pages/DashBoardPage/constants.ts
@@ -193,6 +193,10 @@ export const SQL_OPERATOR_OPTIONS_TYPES = {
     FilterSqlOperator.In,
     FilterSqlOperator.NotIn,
   ],
+  [ControllerFacadeTypes.CheckboxGroup]: [
+    FilterSqlOperator.In,
+    FilterSqlOperator.NotIn,
+  ],
   [ControllerFacadeTypes.RadioGroup]: [
     FilterSqlOperator.Equal,
     FilterSqlOperator.NotEqual,

diff --git a/...ages/DashBoardPage/pages/BoardEditor/components/BoardToolBar/AddControl/AddControlBtn.tsx b/...ages/DashBoardPage/pages/BoardEditor/components/BoardToolBar/AddControl/AddControlBtn.tsx
@@ -31,7 +31,7 @@ export interface ButtonItemType<T> {
   name: string;
   icon: any;
   type: T;
-  disabled: boolean;
+  disabled?: boolean;
 }
 export const AddControlBtn: React.FC<AddControlBtnProps> = () => {
   const { boardId, boardType, showLabel } = useContext(BoardToolBarContext);
@@ -52,31 +52,26 @@ export const AddControlBtn: React.FC<AddControlBtnProps> = () => {
       name: '单选下拉菜单',
       icon: '',
       type: ControllerFacadeTypes.DropdownList,
-      disabled: false,
     },
     {
       name: '多选下拉菜单',
       icon: '',
       type: ControllerFacadeTypes.MultiDropdownList,
-      disabled: false,
     },
     {
       name: '单选按钮',
       icon: '',
       type: ControllerFacadeTypes.RadioGroup,
-      disabled: false,
     },
-    // {
-    //   name: '复选框',
-    //   icon: '',
-    //   type: ControllerFacadeTypes.RadioGroup,
-    //   disabled: false,
-    // },
+    {
+      name: '多选框',
+      icon: '',
+      type: ControllerFacadeTypes.CheckboxGroup,
+    },
     {
       name: '文本',
       icon: '',
       type: ControllerFacadeTypes.Text,
-      disabled: false,
     },
     // {
     //   name: '单选下拉树',
@@ -96,33 +91,28 @@ export const AddControlBtn: React.FC<AddControlBtnProps> = () => {
       name: '日期范围',
       icon: '',
       type: ControllerFacadeTypes.RangeTime,
-      disabled: false,
     },
     {
       name: '日期',
       icon: '',
       type: ControllerFacadeTypes.Time,
-      disabled: false,
     },
   ];
   const numericalControllers = [
     {
       name: '数值范围',
       icon: '',
       type: ControllerFacadeTypes.RangeValue,
-      disabled: false,
     },
     {
       name: '数值',
       icon: '',
       type: ControllerFacadeTypes.Value,
-      disabled: false,
     },
     {
       name: '滑块',
       icon: '',
       type: ControllerFacadeTypes.Slider,
-      disabled: false,
     },
     // {
     //   name: '范围滑块',
@@ -151,22 +141,22 @@ export const AddControlBtn: React.FC<AddControlBtnProps> = () => {
   const controlerItems = (
     <Menu onClick={onAddControler}>
       <Menu.ItemGroup key="conventionalControllers" title={renderTitle('常规')}>
-        {conventionalControllers.map(({ name, icon, type, disabled }) => (
-          <Menu.Item key={type} icon={icon} disabled={disabled}>
+        {conventionalControllers.map(({ name, icon, type }) => (
+          <Menu.Item key={type} icon={icon}>
             {name}
           </Menu.Item>
         ))}
       </Menu.ItemGroup>
       <Menu.ItemGroup key="dateControllers" title={renderTitle('日期')}>
-        {dateControllers.map(({ name, icon, type, disabled }) => (
-          <Menu.Item key={type} icon={icon} disabled={disabled}>
+        {dateControllers.map(({ name, icon, type }) => (
+          <Menu.Item key={type} icon={icon}>
             {name}
           </Menu.Item>
         ))}
       </Menu.ItemGroup>
       <Menu.ItemGroup key="numericalControllers" title={renderTitle('数值')}>
-        {numericalControllers.map(({ name, icon, type, disabled }) => (
-          <Menu.Item key={type} icon={icon} disabled={disabled}>
+        {numericalControllers.map(({ name, icon, type }) => (
+          <Menu.Item key={type} icon={icon}>
             {name}
           </Menu.Item>
         ))}

diff --git a/...shBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/index.tsx b/...shBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/ControllerConfig/index.tsx
@@ -80,7 +80,7 @@ export const WidgetControlForm: React.FC<RelatedViewFormProps> = memo(
     otherHasOptionControllers,
   }) => {
     const filterT = useI18NPrefix('viz.common.filter');
-
+ 
     const hasRadio = useMemo(() => {
       return controllerType === ControllerFacadeTypes.RadioGroup;
     }, [controllerType]);

diff --git a/...c/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/constants.ts b/...c/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/constants.ts
@@ -55,4 +55,5 @@ export const HasOptionsControlTypes = [
   ControllerFacadeTypes.DropdownList,
   ControllerFacadeTypes.MultiDropdownList,
   ControllerFacadeTypes.RadioGroup,
+  ControllerFacadeTypes.CheckboxGroup,
 ];
diff --git a/...d/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/utils.ts b/...d/src/app/pages/DashBoardPage/pages/BoardEditor/components/ControllerWidgetPanel/utils.ts
@@ -170,6 +170,8 @@ export const getInitWidgetController = (
       return getRangeSliderControllerConfig();
     case ControllerFacadeTypes.RadioGroup:
       return getRadioGroupControllerConfig();
+    case ControllerFacadeTypes.CheckboxGroup:
+      return getCheckboxGroupControllerConfig();
     case ControllerFacadeTypes.Slider:
       return getSliderControllerConfig();
     case ControllerFacadeTypes.DropdownList:
@@ -227,6 +229,11 @@ export const getMultiDropdownListControllerConfig = () => {
   config.sqlOperator = FilterSqlOperator.In;
   return config;
 };
+export const getCheckboxGroupControllerConfig = () => {
+  const config = getInitControllerConfig();
+  config.sqlOperator = FilterSqlOperator.In;
+  return config;
+};
 export const getRadioGroupControllerConfig = () => {
   const config = getInitControllerConfig();
   config.sqlOperator = FilterSqlOperator.Equal;

diff --git a/frontend/src/app/types/FilterControlPanel.ts b/frontend/src/app/types/FilterControlPanel.ts
@@ -19,6 +19,7 @@
 export enum ControllerFacadeTypes {
   DropdownList = 'dropdownList',
   RadioGroup = 'radioGroup',
+  CheckboxGroup = 'checkboxGroup',
   MultiDropdownList = 'multiDropdownList',
   RangeTime = 'rangeTime',
   RangeValue = 'rangeValue',

diff --git a/frontend/src/locales/en/translation.json b/frontend/src/locales/en/translation.json
@@ -40,7 +40,8 @@
         "controllerFacadeTypes": {
           "dropdownList": "Dropdown List",
           "radioGroup": "Radio Group",
-          "multiDropdownList": "Multipile Dropdown List",
+          "checkboxGroup" :"Checkbox Group",
+          "multiDropdownList": "multiple Dropdown List",
           "rangeTime": "Range Time",
           "rangeValue": "Range Value",
           "text": "Text",
@@ -77,7 +78,7 @@
         "button": "Button",
         "date": {
           "recommend": "Recommend",
-          "manual": "Mannual",
+          "manual": "Manual",
           "today": "Today",
           "yesterday": "Yesterday",
           "this_week": "This Week",
@@ -131,7 +132,7 @@
       }
     },
     "management": {
-      "title": "widgets manangement",
+      "title": "widgets management",
       "subTitle": "widgets list",
       "table": {
         "header": {
@@ -269,8 +270,8 @@
         },
         "axis": {
           "y": {
-            "left": "left axis demision",
-            "right": "right axis demision"
+            "left": "left axis dimension",
+            "right": "right axis dimension"
           }
         },
         "enum": {

diff --git a/frontend/src/locales/zh/translation.json b/frontend/src/locales/zh/translation.json
@@ -40,6 +40,7 @@
         "controllerFacadeTypes": {
           "dropdownList": "下拉列表",
           "radioGroup": "单选按钮",
+          "checkboxGroup":"多选框",
           "multiDropdownList": "多选下拉列表",
           "rangeTime": "日期范围",
           "rangeValue": "数值范围",