81664 display modal with body

packages/app/src/components/SearchPage/FilterOptionModal.tsx

@@ -0,0 +1,58 @@
+import React, { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import {
+  Modal, ModalHeader, ModalBody, ModalFooter,
+} from 'reactstrap';
+
+
+type Props = {
+  isOpen: boolean,
+  onClose: () => void,
+  onExcludeUsersHome?: () => void,
+  onExcludeTrash?: () => void,
+}
+
+const FilterOptionModal: FC<Props> = (props: Props) => {
+
+  const { t } = useTranslation('');
+
+  return (
+    <Modal size="lg" isOpen={props.isOpen} toggle={props.onClose} autoFocus={false}>
+      <ModalHeader tag="h4" toggle={props.onClose} className="bg-primary text-light">
+        Filter Option
+      </ModalHeader>
+      <ModalBody>
+        <div className="d-flex align-items-center mr-3">
+          <div className="border border-gray mr-3">
+            <label className="px-3 py-2 mb-0 d-flex align-items-center" htmlFor="flexCheckDefault">
+              <input
+                className="mr-2"
+                type="checkbox"
+                id="flexCheckDefault"
+                onClick={props.onExcludeUsersHome}
+              />
+              {t('Include Subordinated Target Page', { target: '/user' })}
+            </label>
+          </div>
+          <div className="border border-gray">
+            <label className="px-3 py-2 mb-0 d-flex align-items-center" htmlFor="flexCheckChecked">
+              <input
+                className="mr-2"
+                type="checkbox"
+                id="flexCheckChecked"
+                onClick={props.onExcludeTrash}
+              />
+              {t('Include Subordinated Target Page', { target: '/trash' })}
+            </label>
+          </div>
+        </div>
+
+      </ModalBody>
+      <ModalFooter>
+      </ModalFooter>
+    </Modal>
+  );
+};
+
+export default FilterOptionModal;

packages/app/src/components/SearchPage/SearchControl.tsx

@@ -1,8 +1,9 @@
-import React, { FC } from 'react';
+import React, { FC, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import SearchPageForm from './SearchPageForm';
 import AppContainer from '../../client/services/AppContainer';
 import DeleteSelectedPageGroup from './DeleteSelectedPageGroup';
+import FilterOptionModal from './FilterOptionModal';
 import { CheckboxType } from '../../interfaces/search';
 
 type Props = {
@@ -14,6 +15,8 @@ type Props = {
 }
 
 const SearchControl: FC <Props> = (props: Props) => {
+
+  const [isFileterOptionModalShown, setIsFileterOptionModalShown] = useState(false);
   // Temporaly workaround for lint error
   // later needs to be fixed: SearchControl to typescript componet
   const SearchPageFormTypeAny : any = SearchPageForm;
@@ -46,6 +49,25 @@ const SearchControl: FC <Props> = (props: Props) => {
     // ref: https://getbootstrap.com/docs/4.5/components/forms/#checkboxes
   };
 
+  const openPageRenameModalHandler = () => {
+    setIsFileterOptionModalShown(true);
+  };
+
+  const closePageRenameModalHandler = () => {
+    setIsFileterOptionModalShown(false);
+  };
+
+  const rednerModal = () => {
+    return (
+      <FilterOptionModal
+        isOpen={isFileterOptionModalShown || false}
+        onClose={closePageRenameModalHandler}
+        onExcludeUsersHome={onExcludeUsersHome}
+        onExcludeTrash={onExcludeTrash}
+      />
+    );
+  };
+
   return (
     <>
       <div className="search-page-nav d-flex py-3 align-items-center">
@@ -71,6 +93,15 @@ const SearchControl: FC <Props> = (props: Props) => {
             onCheckInvoked={onCheckAllPagesInvoked}
           />
         </div>
+        {/** filter option */}
+        <div className="d-lg-none mr-4">
+          <button
+            type="button"
+            onClick={openPageRenameModalHandler}
+          >
+            <i className="icon-equalizer"></i>
+          </button>
+        </div>
         <div className="d-none d-lg-flex align-items-center mr-3">
           <div className="border border-gray mr-3">
             <label className="px-3 py-2 mb-0 d-flex align-items-center" htmlFor="flexCheckDefault">
@@ -96,6 +127,7 @@ const SearchControl: FC <Props> = (props: Props) => {
           </div>
         </div>
       </div>
+      {rednerModal()}
     </>
   );
 };