Styled searching options -- #1133 (#1135)

* checkboxes * fixes * fixes * styled
ispras · Aug 21, 2024 · fa1f669 · fa1f669
1 parent 96c9959
commit fa1f669
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 16 deletions.
diff --git a/src/components/LexicalEntryByIds/component.js b/src/components/LexicalEntryByIds/component.js
@@ -144,7 +144,7 @@ class Perspective extends PureComponent {
           mode={mode}
           id={id}
           entriesIds={entriesIds}
-          filter={perspective.filter}
+          filter={perspective.filter.value}
           submitFilter={submitFilter}
           toggleMode={this.toggleMode}
         />
@@ -154,7 +154,7 @@ class Perspective extends PureComponent {
           entitiesMode={entitiesMode}
           entriesIds={entriesIds}
           page={page}
-          filter={perspective.filter}
+          filter={perspective.filter.value}
           className="content"
           changePage={this.changePage}
         />

diff --git a/src/components/PerspectiveView/index.js b/src/components/PerspectiveView/index.js
@@ -1010,7 +1010,8 @@ export const LexicalEntryByIds = compose(
   })
 )(LexicalEntryViewBaseByIds);
 
-const PerspectiveViewWrapper = ({ id, className, mode, entitiesMode, page, data, filter, sortByField }) => {
+const PerspectiveViewWrapper = ({ id, className, mode, entitiesMode, page, data,
+                                  filter, sortByField, isCaseSens, isRegexp }) => {
   if (data.error) {
     return null;
   }
@@ -1049,8 +1050,8 @@ const PerspectiveViewWrapper = ({ id, className, mode, entitiesMode, page, data,
       offset={ROWS_PER_PAGE * (page - 1)}
       filter={filter}
       isEditMode={mode === "edit"}
-      isCaseSens={true}
-      isRegexp={false}
+      isCaseSens={isCaseSens}
+      isRegexp={isRegexp}
       columns={columns}
       reRender={reRender}
     />
@@ -1064,12 +1065,16 @@ PerspectiveViewWrapper.propTypes = {
   mode: PropTypes.string.isRequired,
   entitiesMode: PropTypes.string.isRequired,
   filter: PropTypes.string,
+  isCaseSens: PropTypes.bool,
+  isRegexp: PropTypes.bool,
   data: PropTypes.object.isRequired,
   sortByField: PropTypes.object
 };
 
 PerspectiveViewWrapper.defaultProps = {
   filter: "",
+  isCaseSens: true,
+  isRegexp: false,
   sortByField: null
 };
 

diff --git a/src/ducks/perspective.js b/src/ducks/perspective.js
@@ -23,10 +23,10 @@ function params(state = {}, action = {}) {
   }
 }
 
-function filter(state = "", action = {}) {
-  switch (action.type) {
+function filter(state = { value: "", isCaseSens: true, isRegexp: false }, { type, payload }) {
+  switch (type) {
     case SET_FILTER:
-      return action.payload;
+      return payload;
     default:
       return state;
   }

diff --git a/src/pages/Perspective/component.js b/src/pages/Perspective/component.js
@@ -1061,21 +1061,29 @@ const Tools = ({
 };
 
 const handlers = compose(
-  withState("value", "updateValue", props => props.filter),
+  withState("value", "updateValue", props => props.filter.value),
+  withState("isCaseSens", "setCaseSens", true),
+  withState("isRegexp", "setRegexp", false),
   withHandlers({
     onChange(props) {
       return event => props.updateValue(event.target.value);
     },
     onSubmit(props) {
       return event => {
         event.preventDefault();
-        props.submitFilter(props.value);
+        props.submitFilter(props.value, props.isCaseSens, props.isRegexp);
       };
+    },
+    onToggleCaseSens(props) {
+      return (e, { checked }) => props.setCaseSens(checked);
+    },
+    onToggleRegexp(props) {
+      return (e, { checked }) => props.setRegexp(checked);
     }
   })
 );
 
-const Filter = handlers(({ value, onChange, onSubmit }) => {
+const Filter = handlers(({ value, onChange, onSubmit, isCaseSens, onToggleCaseSens, isRegexp, onToggleRegexp }) => {
   const getTranslation = useContext(TranslationContext);
 
   return (
@@ -1085,6 +1093,20 @@ const Filter = handlers(({ value, onChange, onSubmit }) => {
         <button type="submit" className="white">
           <i className="search link icon" />
         </button>
+        <div className="lingvo-search-entities__checkboxes">
+          <Checkbox
+            label={getTranslation("A ≠ a")}
+            checked={isCaseSens}
+            onChange={onToggleCaseSens}
+            className="lingvo-checkbox_labeled"
+          />
+          <Checkbox
+            label={getTranslation("a .*")}
+            checked={isRegexp}
+            onChange={onToggleRegexp}
+            className="lingvo-checkbox_labeled"
+          />
+        </div>
       </form>
     </div>
   );
@@ -1193,7 +1215,10 @@ const ModeSelector = compose(
           launchValency={launchValency}
         />
         <Menu.Menu position="right">
-          <Filter filter={filter} submitFilter={submitFilter} />
+          <Filter
+            filter={filter}
+            submitFilter={submitFilter}
+          />
         </Menu.Menu>
       </Menu>
     );
@@ -1349,7 +1374,9 @@ const Perspective = ({
             mode={mode}
             id={id}
             baseUrl={baseUrl}
-            filter={perspective.filter}
+            filter={perspective.filter.value}
+            isCaseSens={perspective.filter.isCaseSens}
+            isRegexp={perspective.filter.isRegexp}
             submitFilter={submitFilter}
             openCognateAnalysisModal={openCognateAnalysisModal}
             openPhonemicAnalysisModal={openPhonemicAnalysisModal}
@@ -1371,7 +1398,9 @@ const Perspective = ({
                     mode={mode}
                     entitiesMode={info.entitiesMode}
                     page={page}
-                    filter={perspective.filter}
+                    filter={perspective.filter.value}
+                    isCaseSens={perspective.filter.isCaseSens}
+                    isRegexp={perspective.filter.isRegexp}
                     className="content"
                     activeDndProvider={dndProvider}
                   />

diff --git a/src/pages/Perspective/index.js b/src/pages/Perspective/index.js
@@ -16,8 +16,8 @@ function init({ location }) {
   return request(getParams(location));
 }
 
-function submitFilter(value) {
-  return setFilter(value);
+function submitFilter(value, isCaseSens, isRegexp) {
+  return setFilter({value, isCaseSens, isRegexp});
 }
 
 function openCognateAnalysisModal(perspectiveId, mode = "") {

diff --git a/src/pages/Perspective/style.scss b/src/pages/Perspective/style.scss
@@ -693,3 +693,26 @@
 
 }
 /* /lingvo perspective component text */
+
+/* lingvo searching options */
+.lingvo-search-entities__checkboxes {
+  margin-left: 1.5em;
+  border: gray solid;
+  border-radius: 30px;
+
+  .lingvo-checkbox_labeled {
+    margin-right: 0.5em;
+    padding: 0.5em;
+
+    & label {
+      color: white !important;
+      font-size: 1.2em !important;
+      font-weight: bold;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+/* /lingvo searching options */