set filter modal

packages/web/src/datagrid/DataFilterControl.js

@@ -7,6 +7,7 @@ import { parseFilter, createMultiLineFilter } from '@dbgate/filterparser';
 import InlineButton from '../widgets/InlineButton';
 import showModal from '../modals/showModal';
 import FilterMultipleValuesModal from '../modals/FilterMultipleValuesModal';
+import SetFilterModal from '../modals/SetFilterModal';
 // import { $ } from '../../Utility/jquery';
 // import autobind from 'autobind-decorator';
 // import * as React from 'react';
@@ -184,7 +185,16 @@ export default function DataFilterControl({ isReadOnly = false, filterType, filt
       />
     ));
   };
-  const openFilterWindow = (operator) => {};
+  const openFilterWindow = (operator) => {
+    showModal((modalState) => (
+      <SetFilterModal
+        filterType={filterType}
+        modalState={modalState}
+        onFilter={(text) => setFilterText(text)}
+        condition1={operator}
+      />
+    ));
+  };
   const buttonRef = React.useRef();
   const editorRef = React.useRef();
 

packages/web/src/modals/SetFilterModal.js

@@ -0,0 +1,134 @@
+import React from 'react';
+import ModalBase from './ModalBase';
+import FormStyledButton from '../widgets/FormStyledButton';
+import styled from 'styled-components';
+import { FontIcon } from '../icons';
+import { FormButtonRow, FormSubmit, FormSelectFieldRaw, FormRow, FormRadioGroupItem, FormTextFieldRaw } from '../utility/forms';
+import ModalHeader from './ModalHeader';
+import ModalFooter from './ModalFooter';
+import ModalContent from './ModalContent';
+import { Formik, Form } from 'formik';
+import { TextField } from '../utility/inputs';
+
+const Wrapper = styled.div`
+  display: flex;
+`;
+
+const OptionsWrapper = styled.div`
+  margin-left: 10px;
+`;
+
+function RadioGroupItem({ text, value, defaultChecked = undefined, setMode }) {
+  return (
+    <div>
+      <input
+        type="radio"
+        name="multiple_values_option"
+        id={`multiple_values_option_${value}`}
+        defaultChecked={defaultChecked}
+        onClick={() => setMode(value)}
+      />
+      <label htmlFor={`multiple_values_option_${value}`}>{text}</label>
+    </div>
+  );
+}
+
+function Select({ filterType, name }) {
+  return (
+    <FormSelectFieldRaw name={name}>
+      {filterType == 'number' && (
+        <>
+          <option value="=">eqals</option>
+          <option value="<>">does not equal</option>
+          <option value="<">is smaller</option>
+          <option value=">">is greater</option>
+          <option value="<=">is smaller or equal</option>
+          <option value=">=">is greater or equal</option>
+        </>
+      )}
+      {filterType == 'string' && (
+        <>
+          <option value="+">contains</option>
+          <option value="~">does not contain</option>
+          <option value="^">begins with</option>
+          <option value="!^">does not begin with</option>
+          <option value="$">ends with</option>
+          <option value="!$">does not end with</option>
+          <option value="=">equals</option>
+          <option value="<>">does not equal</option>
+          <option value="<">is smaller</option>
+          <option value=">">is greater</option>
+          <option value="<=">is smaller or equal</option>
+          <option value=">=">is greater or equal</option>
+        </>
+      )}
+      {filterType == 'datetime' && (
+        <>
+          <option value="=">eqals</option>
+          <option value="<>">does not equal</option>
+          <option value="<">is before</option>
+          <option value=">">is after</option>
+          <option value="<=">is before or equal</option>
+          <option value=">=">is after or equal</option>
+        </>
+      )}
+    </FormSelectFieldRaw>
+  );
+}
+
+export default function SetFilterModal({ modalState, onFilter, filterType, condition1 }) {
+  const editorRef = React.useRef(null);
+  //   const [condition1, setValue1] = React.useState(condition);
+  //   const [value2, setValue2] = React.useState('equals');
+  //   const [mode, setMode] = React.useState('and');
+  React.useEffect(() => {
+    setTimeout(() => {
+      if (editorRef.current) editorRef.current.focus();
+    }, 1);
+  }, []);
+
+  const createTerm = (condition, value) => {
+    if (!value) return null;
+    if (filterType == 'string') return `${condition}"${value}"`;
+    return `${condition}${value}`;
+  };
+
+  const handleOk = (values) => {
+    const { value1, condition1, value2, condition2, joinOperator } = values;
+    const term1 = createTerm(condition1, value1);
+    const term2 = createTerm(condition2, value2);
+    if (term1 && term2) onFilter(`${term1}${joinOperator}${term2}`);
+    else if (term1) onFilter(term1);
+    else if (term2) onFilter(term2);
+    modalState.close();
+  };
+
+  return (
+    <ModalBase modalState={modalState}>
+      <Formik onSubmit={handleOk} initialValues={{ condition1, condition2: '=', joinOperator: ' ' }}>
+        <Form>
+          <ModalHeader modalState={modalState}>Set filter</ModalHeader>
+          <ModalContent>
+            <FormRow>Show rows where</FormRow>
+            <FormRow>
+              <Select filterType={filterType} name="condition1" />
+              <FormTextFieldRaw name="value1" editorRef={editorRef} />
+            </FormRow>
+            <FormRow>
+              <FormRadioGroupItem name="joinOperator" value=" " text="And" />
+              <FormRadioGroupItem name="joinOperator" value="," text="Or" />
+            </FormRow>
+            <FormRow>
+              <Select filterType={filterType} name="condition2" />
+              <FormTextFieldRaw name="value2" />
+            </FormRow>
+          </ModalContent>
+          <ModalFooter>
+            <FormSubmit text="OK" />
+            <FormStyledButton type="button" value="Close" onClick={modalState.close} />
+          </ModalFooter>
+        </Form>
+      </Formik>
+    </ModalBase>
+  );
+}

packages/web/src/utility/forms.js

@@ -22,25 +22,35 @@ export const FormLabel = styled.div`
 
 export const FormValue = styled.div``;
 
+export function FormTextFieldRaw({ ...other }) {
+  return <Field {...other} as={TextField} />;
+}
+
 export function FormTextField({ label, ...other }) {
   return (
     <FormRow>
       <FormLabel>{label}</FormLabel>
       <FormValue>
-        <Field {...other} as={TextField} />
+        <FormTextFieldRaw {...other} />
       </FormValue>
     </FormRow>
   );
 }
 
+export function FormSelectFieldRaw({ children, ...other }) {
+  return (
+    <Field {...other} as={SelectField}>
+      {children}
+    </Field>
+  );
+}
+
 export function FormSelectField({ label, children, ...other }) {
   return (
     <FormRow>
       <FormLabel>{label}</FormLabel>
       <FormValue>
-        <Field {...other} as={SelectField}>
-          {children}
-        </Field>
+        <FormSelectFieldRaw {...other}>{children}</FormSelectFieldRaw>
       </FormValue>
     </FormRow>
   );
@@ -54,3 +64,19 @@ export function FormButton({ text, onClick, ...other }) {
   const { values } = useFormikContext();
   return <FormStyledButton type="button" value={text} onClick={() => onClick(values)} {...other} />;
 }
+
+export function FormRadioGroupItem({ name, text, value }) {
+  const { setFieldValue, values } = useFormikContext();
+  return (
+    <div>
+      <input
+        type="radio"
+        name={name}
+        id={`${name}_${value}`}
+        defaultChecked={values[name] == value}
+        onClick={() => setFieldValue(name, value)}
+      />
+      <label htmlFor={`multiple_values_option_${value}`}>{text}</label>
+    </div>
+  );
+}

packages/web/src/utility/inputs.js

@@ -1,13 +1,9 @@
 import React from 'react';
 
-export function TextField({ ...other }) {
-  return <input type="text" {...other}></input>;
+export function TextField({ editorRef = undefined, ...other }) {
+  return <input type="text" {...other} ref={editorRef}></input>;
 }
 
 export function SelectField({ children, ...other }) {
-  return (
-    <select {...other}>
-      {children}
-    </select>
-  );
+  return <select {...other}>{children}</select>;
 }