WIP: implement convertMenuItemClickedHandler

packages/app/src/components/PrivateLegacyPages.tsx

@@ -7,17 +7,19 @@ import {
   UncontrolledButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem,
 } from 'reactstrap';
 
-import AppContainer from '~/client/services/AppContainer';
 import { IFormattedSearchResult } from '~/interfaces/search';
+import AppContainer from '~/client/services/AppContainer';
 import { ISelectableAll, ISelectableAndIndeterminatable } from '~/client/interfaces/selectable-all';
+import { toastSuccess } from '~/client/util/apiNotification';
 import {
   ISearchConfigurations, useSWRxNamedQuerySearch,
 } from '~/stores/search';
+import { ILegacyPrivatePage, useLegacyPrivatePagesMigrationModal } from '~/stores/modal';
 
 import PaginationWrapper from './PaginationWrapper';
 import { OperateAllControl } from './SearchPage/OperateAllControl';
 
-import { SearchPageBase } from './SearchPage2/SearchPageBase';
+import { IReturnSelectedItems, SearchPageBase } from './SearchPage2/SearchPageBase';
 import { MenuItemType } from './Common/Dropdown/PageItemControl';
 
 
@@ -124,7 +126,7 @@ export const PrivateLegacyPages = (props: Props): JSX.Element => {
     limit: INITIAL_PAGIONG_SIZE,
   });
 
-  const selectAllControlRef = useRef<ISelectableAndIndeterminatable|null>(null);
+  const selectAllControlRef = useRef<ISelectableAndIndeterminatable & IReturnSelectedItems|null>(null);
   const searchPageBaseRef = useRef<ISelectableAll|null>(null);
 
   const { data, conditions } = useSWRxNamedQuerySearch('PrivateLegacyPages', {
@@ -132,6 +134,8 @@ export const PrivateLegacyPages = (props: Props): JSX.Element => {
     ...configurationsByPagination,
   });
 
+  const { open: openLegacyPrivatePagesMigrationModal, close: closeLegacyPrivatePagesMigrationModal } = useLegacyPrivatePagesMigrationModal();
+
   const selectAllCheckboxChangedHandler = useCallback((isChecked: boolean) => {
     const instance = searchPageBaseRef.current;
 
@@ -165,6 +169,27 @@ export const PrivateLegacyPages = (props: Props): JSX.Element => {
     }
   }, []);
 
+  const convertMenuItemClickedHandler = useCallback(() => {
+    const instance = selectAllControlRef.current;
+
+    if (instance == null) {
+      return;
+    }
+
+    const selectedPages = instance.getItems();
+    const argPages: ILegacyPrivatePage[] = selectedPages.map((page) => {
+      return { pageId: page.pageData._id, path: page.pageData.path };
+    });
+
+    openLegacyPrivatePagesMigrationModal(
+      argPages,
+      () => {
+        toastSuccess('success');
+        closeLegacyPrivatePagesMigrationModal();
+      },
+    );
+  }, [closeLegacyPrivatePagesMigrationModal, openLegacyPrivatePagesMigrationModal]);
+
   const pagingNumberChangedHandler = useCallback((activePage: number) => {
     const currentLimit = configurationsByPagination.limit ?? INITIAL_PAGIONG_SIZE;
     setConfigurationsByPagination({
@@ -187,9 +212,11 @@ export const PrivateLegacyPages = (props: Props): JSX.Element => {
         onCheckboxChanged={selectAllCheckboxChangedHandler}
       >
         <UncontrolledButtonDropdown>
-          <DropdownToggle caret color="outline-primary">{t('private_legacy_pages.bulk_operation')}</DropdownToggle>
+          <DropdownToggle caret color="outline-primary" disabled={isDisabled}>
+            {t('private_legacy_pages.bulk_operation')}
+          </DropdownToggle>
           <DropdownMenu>
-            <DropdownItem onClick={() => { /* TODO: implement */ }}>
+            <DropdownItem onClick={convertMenuItemClickedHandler}>
               <i className="icon-fw icon-refresh"></i>
               {t('private_legacy_pages.convert_all_selected_pages')}
             </DropdownItem>
@@ -203,7 +230,7 @@ export const PrivateLegacyPages = (props: Props): JSX.Element => {
         </UncontrolledButtonDropdown>
       </OperateAllControl>
     );
-  }, [hitsCount, selectAllCheckboxChangedHandler, t]);
+  }, [convertMenuItemClickedHandler, hitsCount, selectAllCheckboxChangedHandler, t]);
 
   const searchControl = useMemo(() => {
     return (

packages/app/src/components/SearchPage2/SearchPageBase.tsx

@@ -11,6 +11,11 @@ import { ForceHideMenuItems } from '../Common/Dropdown/PageItemControl';
 import { SearchResultContent } from '../SearchPage/SearchResultContent';
 import { SearchResultList } from '../SearchPage/SearchResultList';
 
+export interface IReturnSelectedItems {
+  getItems(): IPageWithMeta<IPageSearchMeta>[],
+}
+
+
 type Props = {
   appContainer: AppContainer,
 
@@ -25,7 +30,7 @@ type Props = {
   searchPager: React.ReactNode,
 }
 
-const SearchPageBaseSubstance: ForwardRefRenderFunction<ISelectableAll, Props> = (props:Props, ref) => {
+const SearchPageBaseSubstance: ForwardRefRenderFunction<ISelectableAll & IReturnSelectedItems, Props> = (props:Props, ref) => {
   const {
     appContainer,
     pages,
@@ -44,7 +49,7 @@ const SearchPageBaseSubstance: ForwardRefRenderFunction<ISelectableAll, Props> =
   // ref: RevisionRenderer
   //   [...keywords.match(/"[^"]+"|[^\u{20}\u{3000}]+/ug)].forEach((keyword, i) => {
   const [highlightKeywords, setHightlightKeywords] = useState<string[]>([]);
-  const [selectedPageIdsByCheckboxes] = useState<Set<string>>(new Set());
+  const [selectedPagesByCheckboxes, setSelectedPagesByCheckboxes] = useState<Record<string, IPageWithMeta<IPageSearchMeta>>>({});
   // const [allPageIds] = useState<Set<string>>(new Set());
   const [selectedPageWithMeta, setSelectedPageWithMeta] = useState<IPageWithMeta<IPageSearchMeta> | undefined>();
 
@@ -57,7 +62,9 @@ const SearchPageBaseSubstance: ForwardRefRenderFunction<ISelectableAll, Props> =
       }
 
       if (pages != null) {
-        pages.forEach(page => selectedPageIdsByCheckboxes.add(page.pageData._id));
+        pages.forEach((page) => {
+          selectedPagesByCheckboxes[page.pageData._id] = page;
+        });
       }
     },
     deselectAll: () => {
@@ -66,7 +73,10 @@ const SearchPageBaseSubstance: ForwardRefRenderFunction<ISelectableAll, Props> =
         instance.deselectAll();
       }
 
-      selectedPageIdsByCheckboxes.clear();
+      setSelectedPagesByCheckboxes({});
+    },
+    getItems: () => {
+      return Object.values(selectedPagesByCheckboxes);
     },
   }));
 
@@ -76,14 +86,16 @@ const SearchPageBaseSubstance: ForwardRefRenderFunction<ISelectableAll, Props> =
     }
 
     if (isChecked) {
-      selectedPageIdsByCheckboxes.add(pageId);
+      const page = pages.find(page => page.pageData._id === pageId);
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      selectedPagesByCheckboxes[pageId] = page!;
     }
     else {
-      selectedPageIdsByCheckboxes.delete(pageId);
+      delete selectedPagesByCheckboxes[pageId];
     }
 
     if (onSelectedPagesByCheckboxesChanged != null) {
-      onSelectedPagesByCheckboxesChanged(selectedPageIdsByCheckboxes.size, pages.length);
+      onSelectedPagesByCheckboxesChanged(Object.keys(selectedPagesByCheckboxes).length, pages.length);
     }
   };
 
@@ -101,13 +113,14 @@ const SearchPageBaseSubstance: ForwardRefRenderFunction<ISelectableAll, Props> =
     }
 
     if (pages.length > 0) {
-      selectedPageIdsByCheckboxes.clear();
+      // clear
+      setSelectedPagesByCheckboxes({});
     }
 
     if (onSelectedPagesByCheckboxesChanged != null) {
-      onSelectedPagesByCheckboxesChanged(selectedPageIdsByCheckboxes.size, pages.length);
+      onSelectedPagesByCheckboxesChanged(Object.keys(selectedPagesByCheckboxes).length, pages.length);
     }
-  }, [onSelectedPagesByCheckboxesChanged, pages, selectedPageIdsByCheckboxes]);
+  }, [onSelectedPagesByCheckboxesChanged, pages, selectedPagesByCheckboxes]);
 
   if (!isSearchServiceConfigured) {
     return (