-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
3950c58
commit 1b032b0
Showing
9 changed files
with
1,060 additions
and
9 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
4 changes: 2 additions & 2 deletions
4
app/layout/project/sidebar/project/inventory-panel/constants.ts
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
64 changes: 64 additions & 0 deletions
64
app/layout/project/sidebar/project/inventory-panel/cost-surfaces/bulk-action-menu/index.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,64 @@ | ||
| import { useCallback, useState } from 'react'; | ||
|
|
||
| import Button from 'components/button'; | ||
| import Icon from 'components/icon'; | ||
| import Modal from 'components/modal/component'; | ||
| import DeleteModal from 'layout/project/sidebar/project/inventory-panel/cost-surfaces/modals/delete/index'; | ||
| import { CostSurface } from 'types/api/cost-surface'; | ||
|
|
||
| import EDIT_SVG from 'svgs/ui/edit.svg?sprite'; | ||
| import DELETE_SVG from 'svgs/ui/new-layout/delete.svg?sprite'; | ||
|
|
||
| const BUTTON_CLASSES = | ||
| 'col-span-1 flex items-center space-x-2 rounded-lg bg-gray-700 px-4 text-xs text-gray-50'; | ||
| const ICON_CLASSES = 'h-5 w-5 transition-colors text-gray-400 group-hover:text-gray-50'; | ||
|
|
||
| const CostSurfaceBulkActionMenu = ({ | ||
| selectedCostSurfacesIds, | ||
| }: { | ||
| selectedCostSurfacesIds: CostSurface['id'][]; | ||
| }): JSX.Element => { | ||
| const [modalState, setModalState] = useState<{ edit: boolean; delete: boolean }>({ | ||
| edit: false, | ||
| delete: false, | ||
| }); | ||
|
|
||
| const handleModal = useCallback((modalKey: keyof typeof modalState, isVisible: boolean) => { | ||
| setModalState((prevState) => ({ ...prevState, [modalKey]: isVisible })); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <> | ||
| <div className="grid w-full grid-cols-2 items-center space-x-2 rounded-xl bg-gray-500 p-1"> | ||
| <span className="col-span-1 flex items-center justify-center space-x-2"> | ||
| <span className="block w-[20px] rounded-[4px] bg-blue-400/25 px-1 text-center text-xs font-semibold text-blue-400"> | ||
| {selectedCostSurfacesIds.length} | ||
| </span> | ||
| <span className="text-xs text-gray-50">Selected</span> | ||
| </span> | ||
|
|
||
| <Button | ||
| theme="secondary" | ||
| size="base" | ||
| className={BUTTON_CLASSES} | ||
| onClick={() => handleModal('delete', true)} | ||
| > | ||
| <Icon icon={DELETE_SVG} className={ICON_CLASSES} /> | ||
| <span>Delete</span> | ||
| </Button> | ||
| </div> | ||
|
|
||
| <Modal | ||
| id="delete-cost-surfaces-modal" | ||
| open={modalState.delete} | ||
| size="narrow" | ||
| dismissable | ||
| onDismiss={() => handleModal('delete', false)} | ||
| > | ||
| <DeleteModal selectedCostSurfacesIds={selectedCostSurfacesIds} /> | ||
| </Modal> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default CostSurfaceBulkActionMenu; |
75 changes: 75 additions & 0 deletions
75
app/layout/project/sidebar/project/inventory-panel/cost-surfaces/bulk-action-menu/utils.ts
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,75 @@ | ||
| import { Session } from 'next-auth'; | ||
|
|
||
| import { Feature } from 'types/api/feature'; | ||
| import { Project } from 'types/api/project'; | ||
|
|
||
| import PROJECTS from 'services/projects'; | ||
|
|
||
| export function bulkDeleteFeatureFromProject( | ||
| pid: Project['id'], | ||
| fids: Feature['id'][], | ||
| session: Session | ||
| ) { | ||
| const deleteFeatureFromProject = ({ pid, fid }: { pid: Project['id']; fid: Feature['id'] }) => { | ||
| return PROJECTS.delete(`/${pid}/features/${fid}`, { | ||
| headers: { | ||
| Authorization: `Bearer ${session.accessToken}`, | ||
| }, | ||
| }); | ||
| }; | ||
|
|
||
| return Promise.all(fids.map((fid) => deleteFeatureFromProject({ pid, fid }))); | ||
| } | ||
|
|
||
| export function editFeaturesTagsBulk( | ||
| projectId: Project['id'], | ||
| featureIds: Feature['id'][], | ||
| session: Session, | ||
| data: { | ||
| tagName: string; | ||
| } | ||
| ) { | ||
| const editFeatureTag = ({ | ||
| featureId, | ||
| projectId, | ||
| data, | ||
| }: { | ||
| featureId: Feature['id']; | ||
| projectId: Project['id']; | ||
| data: { | ||
| tagName: string; | ||
| }; | ||
| }) => { | ||
| return PROJECTS.request({ | ||
| method: 'PATCH', | ||
| url: `/${projectId}/features/${featureId}/tags`, | ||
| data, | ||
| headers: { | ||
| Authorization: `Bearer ${session.accessToken}`, | ||
| }, | ||
| }); | ||
| }; | ||
| return Promise.all(featureIds.map((featureId) => editFeatureTag({ projectId, featureId, data }))); | ||
| } | ||
|
|
||
| export function deleteFeaturesTagsBulk( | ||
| projectId: Project['id'], | ||
| featureIds: Feature['id'][], | ||
| session: Session | ||
| ) { | ||
| const deleteFeatureTags = ({ | ||
| projectId, | ||
| featureId, | ||
| }: { | ||
| projectId: Project['id']; | ||
| featureId: Feature['id']; | ||
| }) => { | ||
| return PROJECTS.delete(`/${projectId}/features/${featureId}/tags`, { | ||
| headers: { | ||
| Authorization: `Bearer ${session.accessToken}`, | ||
| }, | ||
| }); | ||
| }; | ||
|
|
||
| return Promise.all(featureIds.map((featureId) => deleteFeatureTags({ projectId, featureId }))); | ||
| } |
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
File renamed without changes.
131 changes: 131 additions & 0 deletions
131
app/layout/project/sidebar/project/inventory-panel/cost-surfaces/modals/delete/index.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,131 @@ | ||
| import { useCallback, useMemo } from 'react'; | ||
|
|
||
| import { useQueryClient } from 'react-query'; | ||
|
|
||
| import { useRouter } from 'next/router'; | ||
|
|
||
| import { useSession } from 'next-auth/react'; | ||
|
|
||
| import { useProjectCostSurfaces } from 'hooks/cost-surface'; | ||
| import { useToasts } from 'hooks/toast'; | ||
|
|
||
| import { Button } from 'components/button/component'; | ||
| import Icon from 'components/icon/component'; | ||
| import { ModalProps } from 'components/modal'; | ||
| import { bulkDeleteFeatureFromProject } from 'layout/project/sidebar/project/inventory-panel/features/bulk-action-menu/utils'; | ||
| import { CostSurface } from 'types/api/cost-surface'; | ||
| import { Pagination } from 'types/api/meta'; | ||
|
|
||
| import ALERT_SVG from 'svgs/ui/new-layout/alert.svg?sprite'; | ||
|
|
||
| const DeleteModal = ({ | ||
| selectedCostSurfacesIds, | ||
| onDismiss, | ||
| }: { | ||
| selectedCostSurfacesIds: CostSurface['id'][]; | ||
| onDismiss?: ModalProps['onDismiss']; | ||
| }): JSX.Element => { | ||
| const { data: session } = useSession(); | ||
| const queryClient = useQueryClient(); | ||
| const { query } = useRouter(); | ||
| const { pid } = query as { pid: string }; | ||
| const { addToast } = useToasts(); | ||
|
|
||
| const allProjectCostSurfacesQuery = useProjectCostSurfaces(pid, {}); | ||
|
|
||
| const selectedCostSurfaces = useMemo(() => { | ||
| return allProjectCostSurfacesQuery.data?.filter(({ id }) => | ||
| selectedCostSurfacesIds.includes(id) | ||
| ); | ||
| }, [allProjectCostSurfacesQuery.data, selectedCostSurfacesIds]); | ||
|
|
||
| const costSurfaceNames = selectedCostSurfaces.map(({ name }) => name); | ||
| // ? the user will be able to delete the features only if they are not being used by any scenario. | ||
| const haveScenarioAssociated = selectedCostSurfaces.some(({ scenarioUsageCount }) => | ||
| Boolean(scenarioUsageCount) | ||
| ); | ||
|
|
||
| const handleBulkDelete = useCallback(() => { | ||
| const deletableFeatureIds = selectedCostSurfaces.map(({ id }) => id); | ||
|
|
||
| bulkDeleteFeatureFromProject(pid, deletableFeatureIds, session) | ||
| .then(async () => { | ||
| await queryClient.invalidateQueries(['cost-surfaces', pid]); | ||
|
|
||
| onDismiss(); | ||
|
|
||
| addToast( | ||
| 'delete-bulk-project-cost-surfaces', | ||
| <> | ||
| <h2 className="font-medium">Success</h2> | ||
| <p className="text-sm">The features were deleted successfully.</p> | ||
| </>, | ||
| { | ||
| level: 'success', | ||
| } | ||
| ); | ||
| }) | ||
| .catch(() => { | ||
| addToast( | ||
| 'delete-bulk-project-cost-surfaces', | ||
| <> | ||
| <h2 className="font-medium">Error!</h2> | ||
| <p className="text-sm">Something went wrong deleting the cost surfaces.</p> | ||
| </>, | ||
| { | ||
| level: 'error', | ||
| } | ||
| ); | ||
| }); | ||
| }, [selectedCostSurfaces, addToast, onDismiss, pid, queryClient, session]); | ||
|
|
||
| return ( | ||
| <div className="flex flex-col space-y-5 px-8 py-1"> | ||
| <h2 className="font-heading font-bold text-black">{`Delete cost surface${ | ||
| selectedCostSurfacesIds.length > 1 ? 's' : '' | ||
| }`}</h2> | ||
| <p className="font-heading text-sm font-medium text-black"> | ||
| {selectedCostSurfacesIds.length > 1 ? ( | ||
| <div className="space-y-2"> | ||
| <span> | ||
| Are you sure you want to delete the following cost surfaces? <br /> | ||
| This action cannot be undone. | ||
| </span> | ||
| <ul> | ||
| {costSurfaceNames.map((name) => ( | ||
| <li key={name}>{name}</li> | ||
| ))} | ||
| </ul> | ||
| </div> | ||
| ) : ( | ||
| <span> | ||
| Are you sure you want to delete "{costSurfaceNames[0]}" cost surface? <br /> | ||
| This action cannot be undone. | ||
| </span> | ||
| )} | ||
| </p> | ||
| <div className="flex items-center space-x-1.5 rounded border-l-[5px] border-red-600 bg-red-50/50 px-1.5 py-4"> | ||
| <Icon className="h-10 w-10 text-red-600" icon={ALERT_SVG} /> | ||
| <p className="font-sans text-xs font-medium text-black"> | ||
| A cost surface can be deleted ONLY if it's not being used by any scenario | ||
| </p> | ||
| </div> | ||
| <div className="flex w-full justify-between space-x-3 px-10 py-2"> | ||
| <Button theme="secondary" size="lg" className="w-full" onClick={onDismiss}> | ||
| Cancel | ||
| </Button> | ||
| <Button | ||
| theme="danger-alt" | ||
| size="lg" | ||
| className="w-full" | ||
| disabled={haveScenarioAssociated} | ||
| onClick={handleBulkDelete} | ||
| > | ||
| Delete | ||
| </Button> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default DeleteModal; |
Oops, something went wrong.