@spacemade/ui 0.0.1

package/src/components/media/items/MediaSourcePreview.tsx

@@ -0,0 +1,35 @@
+/* eslint-disable @next/next/no-img-element */
+import { MediaType } from '@store/model'
+import { OptimizedImage } from '@components/common/Image/OptimizedImage'
+import { MediaDocumentPreview } from './MediaDocumentPreview'
+
+export const MediaSourcePreview = ({
+	sourceUrl,
+	type,
+}: {
+	sourceUrl: string
+	type: MediaType
+}) => {
+	switch (type) {
+		case MediaType.Image:
+			return (
+				<OptimizedImage
+					src={sourceUrl}
+					alt=''
+					width={650}
+					height={400}
+					className='mw-xs-650p mh-xs-400p object-fit-contain img-fluid preview-background'
+				/>
+			)
+		case MediaType.PDF:
+		case MediaType.Document:
+		case MediaType.CSV:
+			return <MediaDocumentPreview sourceUrl={sourceUrl} />
+		default:
+			return (
+				<h2 className='text-danger h6 p-4 border border-danger rounded'>
+					File type is not supported for preview
+				</h2>
+			)
+	}
+}

package/src/components/media/modal/AddMediaModal.tsx

@@ -0,0 +1,237 @@
+/* eslint-disable @next/next/no-img-element */
+import { useState } from 'react'
+import {
+	Drawer,
+	DrawerBody,
+	DrawerCloseButton,
+	DrawerContent,
+	DrawerFooter,
+	DrawerHeader,
+	DrawerOverlay,
+} from '@chakra-ui/react'
+import isEmpty from 'lodash/isEmpty'
+import { FieldValues, SubmitHandler, useForm } from 'react-hook-form'
+import { toast } from 'react-toastify'
+import { Media } from '@store/model'
+import {
+	useBulkMediaUploadMutation,
+	useReuploadMediaMutation,
+} from '@store/slice/api/mediaApiSlice'
+import Button from '@components/common/button/Button'
+import DropZone from '@components/common/forms/Dropzone'
+import { HTTPErrorStatus } from '@enum/HTTPErrorStatus'
+import { DEFAULT_ERROR_MESSAGE } from '@helpers/constants'
+import { bytesToSize } from '@helpers/data-transform'
+import { getIconMappedWithFileType, isImageFile } from '@helpers/images'
+
+interface FormValues extends FieldValues {
+	files: File[]
+}
+
+interface Asset {
+	id: Symbol
+	file: File
+	name: string
+	size: number
+	previewUrl?: string
+	icon?: string
+}
+
+export const AddMediaModal = ({
+	isOpen,
+	onClose,
+	allowMultiple,
+	media,
+}: {
+	isOpen: boolean
+	onClose: () => void
+	allowMultiple: boolean
+	media?: Media
+}) => {
+	const [bulkMediaUpload] = useBulkMediaUploadMutation()
+	const [reuploadMedia] = useReuploadMediaMutation()
+
+	const {
+		register,
+		handleSubmit,
+		setError,
+		clearErrors,
+		reset: resetForm,
+		setValue,
+		formState: { errors, isSubmitting },
+	} = useForm<FormValues>()
+
+	const [assets, setAssets] = useState<Asset[]>([])
+
+	const onSubmit: SubmitHandler<FormValues> = async () => {
+		try {
+			if (isEmpty(assets)) {
+				toast.error('No files to upload')
+				return
+			}
+
+			if (media) {
+				await reuploadMedia({
+					file: assets[0].file,
+					mediaId: media.id,
+				}).unwrap()
+			} else {
+				await bulkMediaUpload({
+					files: assets.map((asset) => asset.file),
+				}).unwrap()
+			}
+
+			toast.success('Assets have been saved successfully')
+			onClose()
+			resetForm()
+			setAssets([])
+		} catch (error: any) {
+			toast.error(
+				error.status === HTTPErrorStatus.INTERNAL_SERVER_ERROR
+					? DEFAULT_ERROR_MESSAGE
+					: error.data.message
+			)
+			setError('server-error', { type: 'custom', message: 'server-error' })
+		}
+	}
+
+	const onFileDrop = async (acceptedFiles: File[]) => {
+		const filesToProcess = allowMultiple
+			? acceptedFiles
+			: acceptedFiles.splice(0)
+		const filePromises = filesToProcess.map((file) => {
+			return new Promise<Asset>((resolve, reject) => {
+				const icon = getIconMappedWithFileType(file.type)
+				const fileName = file.name
+				const size = file.size
+				const id = Symbol('id')
+
+				if (isImageFile(file)) {
+					const reader = new FileReader()
+					reader.onload = async () => {
+						resolve({
+							id,
+							name: fileName,
+							size,
+							file,
+							previewUrl: reader.result as string,
+							icon,
+						})
+					}
+					reader.onerror = (error) => {
+						reject(error)
+					}
+					reader.readAsDataURL(file)
+				} else {
+					resolve({
+						id,
+						name: fileName,
+						size,
+						file,
+						icon,
+					})
+				}
+			})
+		})
+
+		const newAssets = await Promise.all(filePromises)
+
+		if (allowMultiple) {
+			setAssets((items) => [...items, ...newAssets])
+		} else {
+			setAssets(newAssets)
+		}
+	}
+
+	const onDeleteFile = (deletedAsset: Asset) => {
+		setAssets(assets.filter((asset) => asset.id !== deletedAsset.id))
+	}
+
+	return (
+		<Drawer isOpen={isOpen} onClose={onClose} size='xl'>
+			<DrawerOverlay />
+			<DrawerContent className='drawer'>
+				<DrawerCloseButton />
+				<DrawerHeader>
+					{media ? 'Update Media' : 'Upload New Media'}
+				</DrawerHeader>
+				<DrawerBody>
+					<form id='post-update-form' onSubmit={handleSubmit(onSubmit)}>
+						<div className='mt-4'>
+							<DropZone
+								register={register}
+								name='files'
+								setFormValue={setValue}
+								clearFormErrors={clearErrors}
+								errors={errors}
+								label='Drop files to upload'
+								className='w-100 h-xs-250p'
+								onFileDrop={onFileDrop}
+								helperText='Maximum upload file size: 50 MB.'
+								mediaType={media?.mediaType}
+								isMultiple
+								align='center'
+								verticalMode
+							/>
+						</div>
+					</form>
+					{assets.length > 0 && (
+						<>
+							<h2 className='h5 mt-5 mb-3 d-block'>Files</h2>
+							<hr className='text-light-gray opacity-100 my-0' />
+						</>
+					)}
+					<div className='w-100'>
+						{assets.map((asset, key) => (
+							<div className='d-flex border-bottom py-3' key={key}>
+								<div className='me-4'>
+									{asset.previewUrl ? (
+										<img
+											src={asset.previewUrl}
+											alt='Preview Layer'
+											className='w-xs-80p img-fluid object-fit-cover'
+										/>
+									) : (
+										<span className={`${asset.icon} fs-1`}></span>
+									)}
+								</div>
+								<div>
+									<h2 className='h6 mb-0'>{asset.name}</h2>
+									<span className='small'>{bytesToSize(asset.size)}</span>
+								</div>
+								<div className='ms-auto'>
+									<Button
+										className='text-danger no-min-size p-1 w-xs-30p ms-4 border-0'
+										ariaLabel='Delete Layer'
+										color='none'
+										onClick={() => onDeleteFile(asset)}
+									>
+										<i className='bi bi-x'></i>
+									</Button>
+								</div>
+							</div>
+						))}
+					</div>
+				</DrawerBody>
+
+				<DrawerFooter>
+					<Button ariaLabel='Cancel' onClick={onClose}>
+						Cancel
+					</Button>
+					<Button
+						type='submit'
+						className='text-white'
+						ariaLabel='Save new item'
+						color='primary'
+						form='post-update-form'
+						isLoading={isSubmitting}
+						disabled={isSubmitting || isEmpty(assets)}
+						onClick={() => clearErrors(['server-error'])}
+					>
+						Save
+					</Button>
+				</DrawerFooter>
+			</DrawerContent>
+		</Drawer>
+	)
+}

package/src/components/media/modal/MediaAttachmentsModal.tsx

@@ -0,0 +1,113 @@
+/* eslint-disable @next/next/no-img-element */
+import { useMemo } from 'react'
+import Link from 'next/link'
+import {
+	Drawer,
+	DrawerBody,
+	DrawerCloseButton,
+	DrawerContent,
+	DrawerFooter,
+	DrawerHeader,
+	DrawerOverlay,
+} from '@chakra-ui/react'
+import { AttachmentObjectTypes, MediaAttachment } from '@store/model'
+import Button from '@components/common/button/Button'
+import { getAttachmentObjectNameAndLink } from '../items/MediaAttachmentLinks'
+
+export const MediaAttachmentsModal = ({
+	isOpen,
+	onClose,
+	attachments,
+}: {
+	isOpen: boolean
+	onClose: () => void
+	attachments: MediaAttachment[]
+}) => {
+	const mediaForPosts = useMemo(
+		() =>
+			attachments.filter(
+				(att) => att.objectType === AttachmentObjectTypes.post
+			),
+		[attachments]
+	)
+	const mediaForUsers = useMemo(
+		() =>
+			attachments.filter(
+				(att) => att.objectType === AttachmentObjectTypes.user
+			),
+		[attachments]
+	)
+	const mediaForProducts = useMemo(
+		() =>
+			attachments.filter(
+				(att) => att.objectType === AttachmentObjectTypes.product
+			),
+		[attachments]
+	)
+    const mediaForProject = useMemo(
+		() =>
+			attachments.filter(
+				(att) => att.objectType === AttachmentObjectTypes.project
+			),
+		[attachments]
+	)
+	const List = ({
+		list,
+		title,
+	}: {
+		list: MediaAttachment[]
+		title: string
+	}) => (
+		<>
+			{list.length > 0 && (
+				<>
+					<h2 className='mt-3 h5 mb-3 d-block'>{title}</h2>
+					<hr className='text-light-gray opacity-100 my-0' />
+				</>
+			)}
+			<div className='w-100'>
+				{list.map((attachment, key) => {
+					const object = getAttachmentObjectNameAndLink(
+						attachment.object,
+						attachment.objectType
+					)
+
+					return (
+						<div className='border-bottom py-3' key={key}>
+							<Link
+								href={object?.url || ''}
+								className='d-flex align-items-center gap-2 text-primary small-sm text-hover-medium-blue'
+								target='_blank'
+								rel='noopener noreferrer'
+							>
+								<h2 className='h6 mb-0'>{object?.name}</h2>
+								<span className='bi bi-box-arrow-up-right text-primary'></span>
+							</Link>
+						</div>
+					)
+				})}
+			</div>
+		</>
+	)
+
+	return (
+		<Drawer isOpen={isOpen} onClose={onClose} size='xl'>
+			<DrawerOverlay />
+			<DrawerContent className='drawer'>
+				<DrawerCloseButton />
+				<DrawerHeader>Media Attachments</DrawerHeader>
+				<DrawerBody>
+					<List list={mediaForPosts} title='Posts' />
+					<List list={mediaForUsers} title='Users' />
+					<List list={mediaForProducts} title='Products' />
+					<List list={mediaForProject} title='Projects' />
+				</DrawerBody>
+				<DrawerFooter>
+					<Button ariaLabel='Close' onClick={onClose}>
+						Close
+					</Button>
+				</DrawerFooter>
+			</DrawerContent>
+		</Drawer>
+	)
+}

package/src/components/media/modal/MediaBulkDeleteWarningModal.tsx

@@ -0,0 +1,142 @@
+import { useRef, useState } from 'react'
+import {
+	Accordion,
+	AccordionButton,
+	AccordionIcon,
+	AccordionItem,
+	AccordionPanel,
+	AlertDialog,
+	AlertDialogBody,
+	AlertDialogContent,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogOverlay,
+} from '@chakra-ui/react'
+import { toast } from 'react-toastify'
+import { Media } from '@store/model'
+import Button from '@components/common/button/Button'
+import { MediaAttachmentsList } from '@components/media/blocks/MediaAttachmentsList'
+import { DEFAULT_ERROR_MESSAGE } from '@helpers/constants'
+import { truncateString } from '@helpers/string'
+
+export const MediaBulkDeleteWarningModal = ({
+	isOpen,
+	onClose,
+	mediaAssets,
+	onDelete,
+}: {
+	mediaAssets: Media[]
+	isOpen: boolean
+	onClose: () => void
+	onDelete: () => Promise<void>
+}) => {
+	const cancelRef = useRef<HTMLButtonElement>(null!)
+	const [isLoading, setIsLoading] = useState(false)
+
+	const deleteEntity = async () => {
+		try {
+			setIsLoading(true)
+			await onDelete()
+			setIsLoading(false)
+			onClose()
+		} catch (error) {
+			setIsLoading(false)
+			toast.error(DEFAULT_ERROR_MESSAGE)
+		}
+	}
+
+	return (
+		<AlertDialog
+			isOpen={isOpen}
+			leastDestructiveRef={cancelRef}
+			onClose={onClose}
+			isCentered
+		>
+			<AlertDialogOverlay className='dialog'>
+				<AlertDialogContent>
+					<div className='text-center'>
+						<AlertDialogHeader>Delete Media?</AlertDialogHeader>
+
+						<AlertDialogBody>
+							<p className='small-md'>
+								Review your media to delete. Any items with{' '}
+								<span className='bi bi-exclamation-triangle text-danger'></span>{' '}
+								are linked to other entries and will be unlinked after deleting.
+							</p>
+							{mediaAssets.map((media) => {
+								const attachments = media.mediaAttachments || []
+
+								return (
+									<>
+										{attachments.length > 0 ? (
+											<Accordion
+												key={media.id}
+												className='accordion-group border-0'
+												allowToggle
+											>
+												<AccordionItem>
+													<AccordionButton className='d-flex justify-content-between px-0 py-2 no-min-size'>
+														<h2 className='small mb-0 text-dark'>
+															{truncateString(media.name, 40)}
+															{attachments.length > 0 && (
+																<span className='bi bi-exclamation-triangle text-danger ms-2'></span>
+															)}
+														</h2>
+														<AccordionIcon />
+													</AccordionButton>
+													<AccordionPanel className='p-2'>
+														<div className='text-start mt-n2'>
+															{attachments.length > 0 && (
+																<MediaAttachmentsList
+																	attachments={attachments}
+																/>
+															)}
+														</div>
+													</AccordionPanel>
+												</AccordionItem>
+											</Accordion>
+										) : (
+											<div className='text-start py-2' key={media.id}>
+												<h2 className='small mb-0'>
+													{media.name}
+													{attachments.length > 0 && (
+														<span className='bi bi-exclamation-triangle text-danger ms-2'></span>
+													)}
+												</h2>
+												{attachments.length > 0 && (
+													<MediaAttachmentsList attachments={attachments} />
+												)}
+											</div>
+										)}
+									</>
+								)
+							})}
+						</AlertDialogBody>
+
+						<AlertDialogFooter className='d-flex justify-content-center gap-3'>
+							<Button
+								className='me-2'
+								ariaLabel='Close Delete Dialog'
+								buttonRef={cancelRef}
+								onClick={onClose}
+							>
+								Cancel
+							</Button>
+
+							<Button
+								className='text-white'
+								ariaLabel={`Delete media`}
+								color='danger'
+								onClick={deleteEntity}
+								isLoading={isLoading}
+								disabled={isLoading}
+							>
+								Delete
+							</Button>
+						</AlertDialogFooter>
+					</div>
+				</AlertDialogContent>
+			</AlertDialogOverlay>
+		</AlertDialog>
+	)
+}

package/src/components/media/modal/MediaDeleteWarningModal.tsx

@@ -0,0 +1,98 @@
+import { useMemo, useRef, useState } from 'react'
+import {
+	AlertDialog,
+	AlertDialogBody,
+	AlertDialogContent,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogOverlay,
+} from '@chakra-ui/react'
+import { toast } from 'react-toastify'
+import { Media } from '@store/model'
+import Button from '@components/common/button/Button'
+import { MediaAttachmentsList } from '@components/media/blocks/MediaAttachmentsList'
+import { DEFAULT_ERROR_MESSAGE } from '@helpers/constants'
+
+export const MediaDeleteWarningModal = ({
+	isOpen,
+	onClose,
+	media,
+	onDelete,
+}: {
+	media: Media
+	isOpen: boolean
+	onClose: () => void
+	onDelete: () => Promise<void>
+}) => {
+	const cancelRef = useRef<HTMLButtonElement>(null!)
+	const [isLoading, setIsLoading] = useState(false)
+
+	const deleteEntity = async () => {
+		try {
+			setIsLoading(true)
+			await onDelete()
+			setIsLoading(false)
+			onClose()
+		} catch (error) {
+			setIsLoading(false)
+			toast.error(DEFAULT_ERROR_MESSAGE)
+		}
+	}
+
+	const attachments = useMemo(
+		() => media.mediaAttachments || [],
+		[media.mediaAttachments]
+	)
+
+	return (
+		<AlertDialog
+			isOpen={isOpen}
+			leastDestructiveRef={cancelRef}
+			onClose={onClose}
+			isCentered
+		>
+			<AlertDialogOverlay className='dialog'>
+				<AlertDialogContent>
+					<div className='text-center'>
+						<AlertDialogHeader>Delete {`"${media.name}"`}?</AlertDialogHeader>
+
+						<AlertDialogBody>
+							<p>
+								{attachments.length > 0
+									? 'This file will be unlinked from these entries:'
+									: 'You cannot undo this action.'}
+							</p>
+							{attachments.length > 0 && (
+								<div className='text-start'>
+									<MediaAttachmentsList attachments={attachments} />
+								</div>
+							)}
+						</AlertDialogBody>
+
+						<AlertDialogFooter className='d-flex justify-content-center gap-3'>
+							<Button
+								className='me-2'
+								ariaLabel='Close Delete Dialog'
+								buttonRef={cancelRef}
+								onClick={onClose}
+							>
+								Cancel
+							</Button>
+
+							<Button
+								className='text-white'
+								ariaLabel={`Delete media`}
+								color='danger'
+								onClick={deleteEntity}
+								isLoading={isLoading}
+								disabled={isLoading}
+							>
+								Delete
+							</Button>
+						</AlertDialogFooter>
+					</div>
+				</AlertDialogContent>
+			</AlertDialogOverlay>
+		</AlertDialog>
+	)
+}