-
Notifications
You must be signed in to change notification settings - Fork 583
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add bulk actions to page builder (#3530)
- Loading branch information
Showing
33 changed files
with
830 additions
and
66 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/ActionMove.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/ActionPublish.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
...ages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/ActionUnpublish.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
95 changes: 95 additions & 0 deletions
95
packages/app-page-builder/src/admin/components/BulkActions/ActionDelete.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| import React, { useMemo } from "react"; | ||
| import { ReactComponent as DeleteIcon } from "@material-design-icons/svg/outlined/delete.svg"; | ||
| import { useRecords } from "@webiny/app-aco"; | ||
| import { observer } from "mobx-react-lite"; | ||
| import { PageListConfig } from "~/admin/config/pages"; | ||
| import { useAdminPageBuilder } from "~/admin/hooks/useAdminPageBuilder"; | ||
| import { usePagesPermissions } from "~/hooks/permissions"; | ||
| import { getPagesLabel } from "~/admin/components/BulkActions/BulkActions"; | ||
|
|
||
| export const ActionDelete = observer(() => { | ||
| const { canDelete } = usePagesPermissions(); | ||
| const { deletePage, client } = useAdminPageBuilder(); | ||
| const { removeRecordFromCache } = useRecords(); | ||
|
|
||
| const { useWorker, useButtons, useDialog } = PageListConfig.Browser.BulkAction; | ||
| const { IconButton } = useButtons(); | ||
| const worker = useWorker(); | ||
| const { showConfirmationDialog, showResultsDialog } = useDialog(); | ||
|
|
||
| const pagesLabel = useMemo(() => { | ||
| return getPagesLabel(worker.items.length); | ||
| }, [worker.items.length]); | ||
|
|
||
| const canDeleteAll = useMemo(() => { | ||
| return worker.items.every(item => canDelete(item?.createdBy?.id)); | ||
| }, [worker.items]); | ||
|
|
||
| const openDeletePagesDialog = () => | ||
| showConfirmationDialog({ | ||
| title: "Delete pages", | ||
| message: `You are about to delete ${pagesLabel}. Are you sure you want to continue?`, | ||
| loadingLabel: `Processing ${pagesLabel}`, | ||
| execute: async () => { | ||
| await worker.processInSeries(async ({ item, report }) => { | ||
| try { | ||
| const response = await deletePage( | ||
| { id: item.id }, | ||
| { | ||
| client: client, | ||
| mutationOptions: { | ||
| update(_, { data }) { | ||
| if (data.pageBuilder.deletePage.error) { | ||
| return; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| ); | ||
|
|
||
| const { error } = response; | ||
|
|
||
| if (error) { | ||
| throw new Error( | ||
| error.message || "Unknown error while deleting the page" | ||
| ); | ||
| } | ||
|
|
||
| removeRecordFromCache(item.pid); | ||
|
|
||
| report.success({ | ||
| title: `${item.title}`, | ||
| message: "Page successfully deleted." | ||
| }); | ||
| } catch (e) { | ||
| report.error({ | ||
| title: `${item.title}`, | ||
| message: e.message | ||
| }); | ||
| } | ||
| }); | ||
|
|
||
| worker.resetItems(); | ||
|
|
||
| showResultsDialog({ | ||
| results: worker.results, | ||
| title: "Delete pages", | ||
| message: "Operation completed, here below you find the complete report:" | ||
| }); | ||
| } | ||
| }); | ||
|
|
||
| if (!canDeleteAll) { | ||
| console.log("Does not have permission to delete one or more pages."); | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <IconButton | ||
| icon={<DeleteIcon />} | ||
| onAction={openDeletePagesDialog} | ||
| label={`Delete ${pagesLabel}`} | ||
| tooltipPlacement={"bottom"} | ||
| /> | ||
| ); | ||
| }); |
39 changes: 39 additions & 0 deletions
39
packages/app-page-builder/src/admin/components/BulkActions/ActionExport.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import React, { useMemo } from "react"; | ||
| import { ReactComponent as ExportIcon } from "@material-design-icons/svg/outlined/file_download.svg"; | ||
| import { observer } from "mobx-react-lite"; | ||
| import { PageListConfig } from "~/admin/config/pages"; | ||
| import useExportPageRevisionSelectorDialog from "~/editor/plugins/defaultBar/components/ExportPageButton/useExportPageRevisionSelectorDialog"; | ||
| import useExportPageDialog from "~/editor/plugins/defaultBar/components/ExportPageButton/useExportPageDialog"; | ||
| import { getPagesLabel } from "~/admin/components/BulkActions/BulkActions"; | ||
|
|
||
| export const ActionExport = observer(() => { | ||
| const { showExportPageRevisionSelectorDialog } = useExportPageRevisionSelectorDialog(); | ||
| const { showExportPageInitializeDialog } = useExportPageDialog(); | ||
|
|
||
| const { useWorker, useButtons } = PageListConfig.Browser.BulkAction; | ||
| const { IconButton } = useButtons(); | ||
| const worker = useWorker(); | ||
|
|
||
| const selected = useMemo(() => { | ||
| return worker.items.map(item => item.pid); | ||
| }, [worker.items]); | ||
|
|
||
| const pagesLabel = useMemo(() => { | ||
| return getPagesLabel(selected.length); | ||
| }, [selected.length]); | ||
|
|
||
| const openExportPagesDialog = () => | ||
| showExportPageRevisionSelectorDialog({ | ||
| onAccept: () => showExportPageInitializeDialog({ ids: selected }), | ||
| selected | ||
| }); | ||
|
|
||
| return ( | ||
| <IconButton | ||
| icon={<ExportIcon />} | ||
| onAction={openExportPagesDialog} | ||
| label={`Export ${pagesLabel}`} | ||
| tooltipPlacement={"bottom"} | ||
| /> | ||
| ); | ||
| }); |
85 changes: 85 additions & 0 deletions
85
packages/app-page-builder/src/admin/components/BulkActions/ActionMove.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| import React, { useCallback, useMemo } from "react"; | ||
| import { ReactComponent as MoveIcon } from "@material-design-icons/svg/outlined/drive_file_move.svg"; | ||
| import { useRecords, useMoveToFolderDialog, useNavigateFolder } from "@webiny/app-aco"; | ||
| import { FolderItem } from "@webiny/app-aco/types"; | ||
| import { observer } from "mobx-react-lite"; | ||
| import { PageListConfig } from "~/admin/config/pages"; | ||
| import { ROOT_FOLDER } from "~/admin/constants"; | ||
| import { getPagesLabel } from "~/admin/components/BulkActions/BulkActions"; | ||
|
|
||
| export const ActionMove = observer(() => { | ||
| const { moveRecord } = useRecords(); | ||
| const { currentFolderId } = useNavigateFolder(); | ||
|
|
||
| const { useWorker, useButtons, useDialog } = PageListConfig.Browser.BulkAction; | ||
| const { IconButton } = useButtons(); | ||
| const worker = useWorker(); | ||
| const { showConfirmationDialog, showResultsDialog } = useDialog(); | ||
| const { showDialog: showMoveDialog } = useMoveToFolderDialog(); | ||
|
|
||
| const pagesLabel = useMemo(() => { | ||
| return getPagesLabel(worker.items.length); | ||
| }, [worker.items.length]); | ||
|
|
||
| const openWorkerDialog = useCallback( | ||
| (folder: FolderItem) => { | ||
| showConfirmationDialog({ | ||
| title: "Move pages", | ||
| message: `You are about to move ${pagesLabel} to ${folder.title}. Are you sure you want to continue?`, | ||
| loadingLabel: `Processing ${pagesLabel}`, | ||
| execute: async () => { | ||
| await worker.processInSeries(async ({ item, report }) => { | ||
| try { | ||
| await moveRecord({ | ||
| id: item.pid, | ||
| location: { | ||
| folderId: folder.id | ||
| } | ||
| }); | ||
|
|
||
| report.success({ | ||
| title: `${item.title}`, | ||
| message: "Page successfully moved." | ||
| }); | ||
| } catch (e) { | ||
| report.error({ | ||
| title: `${item.title}`, | ||
| message: e.message | ||
| }); | ||
| } | ||
| }); | ||
|
|
||
| worker.resetItems(); | ||
|
|
||
| showResultsDialog({ | ||
| results: worker.results, | ||
| title: "Move pages", | ||
| message: "Operation completed, here below you find the complete report:" | ||
| }); | ||
| } | ||
| }); | ||
| }, | ||
| [pagesLabel] | ||
| ); | ||
|
|
||
| const openMovePagesDialog = () => | ||
| showMoveDialog({ | ||
| title: "Select folder", | ||
| message: "Select a new location for selected pages:", | ||
| loadingLabel: `Processing ${pagesLabel}`, | ||
| acceptLabel: `Move`, | ||
| focusedFolderId: currentFolderId || ROOT_FOLDER, | ||
| async onAccept({ folder }) { | ||
| openWorkerDialog(folder); | ||
| } | ||
| }); | ||
|
|
||
| return ( | ||
| <IconButton | ||
| icon={<MoveIcon />} | ||
| onAction={openMovePagesDialog} | ||
| label={`Move ${pagesLabel}`} | ||
| tooltipPlacement={"bottom"} | ||
| /> | ||
| ); | ||
| }); |
Oops, something went wrong.