@spacemade/ui 0.0.1

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

@@ -0,0 +1,201 @@
+import { useState } from 'react'
+import {
+	Modal,
+	ModalBody,
+	ModalCloseButton,
+	ModalContent,
+	ModalFooter,
+	ModalHeader,
+	ModalOverlay,
+	Tab,
+	TabList,
+	TabPanel,
+	TabPanels,
+	Tabs,
+} from '@chakra-ui/react'
+import isEmpty from 'lodash/isEmpty'
+import { isDesktop } from 'react-device-detect'
+import { FieldValues, useForm } from 'react-hook-form'
+import { toast } from 'react-toastify'
+import { Media, MediaType } from '@store/model'
+import { useBulkMediaUploadMutation } from '@store/slice/api/mediaApiSlice'
+import { useSearchAndFilterCommon } from '@hooks'
+import Button from '@components/common/button/Button'
+import DropZone from '@components/common/forms/Dropzone'
+import Spinner from '@components/common/loading/Spinner'
+import { MediaGrid } from '@components/media/blocks/MediaGrid'
+import { HTTPErrorStatus } from '@enum/HTTPErrorStatus'
+import { DEFAULT_ERROR_MESSAGE } from '@helpers/constants'
+import { MediaTableFilter } from '../table/MediaTableFilter'
+
+interface FormValues extends FieldValues {
+	files: File[]
+}
+
+const getErrorMessage = (error: unknown, fallback: string) => {
+	if (typeof error === 'string') return error
+	if (error && typeof error === 'object') {
+		const err = error as Record<string, unknown>
+		const data = err.data
+		if (data && typeof data === 'object') {
+			const message = (data as Record<string, unknown>).message
+			if (typeof message === 'string') return message
+		}
+		const message = err.message
+		if (typeof message === 'string') return message
+	}
+	return fallback
+}
+
+export const MediaPickerModal = ({
+	isOpen,
+	onClose,
+	onMediaSelected,
+	canSelectMultiple,
+	defaultSelectedMedia,
+}: {
+	isOpen: boolean
+	onClose: () => void
+	onMediaSelected?: (media: Media[]) => void
+	canSelectMultiple?: boolean
+	defaultSelectedMedia?: Media[]
+}) => {
+	const [bulkMediaUpload] = useBulkMediaUploadMutation()
+	const [selectedAssets, setSelectedAssets] = useState<Media[]>(
+		defaultSelectedMedia || []
+	)
+	const [page, setPage] = useState(1)
+	const [tabIndex, setTabIndex] = useState(0)
+	const [isUploading, setIsUploading] = useState(false)
+
+	const {
+		register,
+		clearErrors,
+		setValue,
+		formState: { errors },
+	} = useForm<FormValues>()
+
+	const { searchState, setSearchState } = useSearchAndFilterCommon()
+
+	const onFileDrop = async (acceptedFiles: File[]) => {
+		if (isEmpty(acceptedFiles)) {
+			return
+		}
+
+		try {
+			setIsUploading(true)
+			setPage(1)
+
+			await bulkMediaUpload({
+				files: acceptedFiles,
+			}).unwrap()
+
+			setTabIndex(0)
+		} catch (error: unknown) {
+			toast.error(
+				(error as { status?: number })?.status === HTTPErrorStatus.INTERNAL_SERVER_ERROR
+					? DEFAULT_ERROR_MESSAGE
+					: getErrorMessage(error, DEFAULT_ERROR_MESSAGE)
+			)
+		} finally {
+			setIsUploading(false)
+		}
+	}
+
+	return (
+		<Modal onClose={onClose} size='full' isOpen={isOpen}>
+			<ModalOverlay />
+			<ModalContent className='full'>
+				<div>
+					<ModalHeader>
+						<h3 className='text-center'>Select Media</h3>
+					</ModalHeader>
+					<ModalCloseButton />
+					<ModalBody id='media-picker-modal-body'>
+						<Tabs
+							className='mb-4 w-100 h-100'
+							index={tabIndex}
+							onChange={setTabIndex}
+						>
+							<TabList>
+								<Tab>Library</Tab>
+								<Tab>Upload</Tab>
+							</TabList>
+
+							<TabPanels>
+								<TabPanel className='position-relative'>
+									<div className='py-3 position-absolute top-0 left-0 right-0 bg-white z-index-1 me-4'>
+										<MediaTableFilter
+											setSearchState={setSearchState}
+											onChangeFilter={() => setPage(1)}
+											hideTypeSearch
+										/>
+									</div>
+									<MediaGrid
+										type={MediaType.Image}
+										mode='selection'
+										onSelectMedia={setSelectedAssets}
+										canSelectMultiple={canSelectMultiple}
+										defaultItemsSelected={defaultSelectedMedia}
+										externalPageState={[page, setPage]}
+										nameLike={searchState.nameLike}
+										date={searchState.date}
+										topSpace={isDesktop ? 8 : 13}
+									/>
+								</TabPanel>
+								<TabPanel className='position-relative'>
+									{isUploading && (
+										<div className='z-index-10 position-absolute top-0 bottom-0 right-0 left-0 d-flex align-items-center justify-content-center'>
+											<Spinner />
+										</div>
+									)}
+									<form
+										className={`h-100 ${isUploading ? 'opacity-1' : ''}`}
+										onSubmit={(e) => e.preventDefault()}
+									>
+										<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-500p'
+												onFileDrop={onFileDrop}
+												helperText='Maximum upload file size: 50 MB.'
+												mediaType={MediaType.Image}
+												isMultiple
+												align='center'
+												verticalMode
+											/>
+										</div>
+									</form>
+								</TabPanel>
+							</TabPanels>
+						</Tabs>
+					</ModalBody>
+					<ModalFooter className='z-index-10 bg-white border-top'>
+						<Button ariaLabel='Cancel' onClick={onClose}>
+							Cancel
+						</Button>
+						<Button
+							ariaLabel='Select Image'
+							color='primary'
+							className='text-white'
+							disabled={isEmpty(selectedAssets)}
+							onClick={() => {
+								if (onMediaSelected && !isEmpty(selectedAssets)) {
+									onMediaSelected(selectedAssets)
+								}
+								onClose()
+							}}
+						>
+							Select
+						</Button>
+					</ModalFooter>
+				</div>
+			</ModalContent>
+		</Modal>
+	)
+}

package/src/components/media/table/MediaTable.tsx

@@ -0,0 +1,340 @@
+/* eslint-disable @next/next/no-img-element */
+import React, { SyntheticEvent, useEffect, useState } from 'react'
+import { useRouter } from '@lib/next-router'
+import { Tooltip, useDisclosure } from '@chakra-ui/react'
+import isEmpty from 'lodash/isEmpty'
+import { toast } from 'react-toastify'
+import { Media, MediaType } from '@store/model'
+import {
+	useBulkDeleteMediaMutation,
+	useGetMediaListQuery,
+} from '@store/slice/api/mediaApiSlice'
+import { useSearchAndFilterCommon } from '@hooks'
+import { OptimizedImage } from '@components/common/Image/OptimizedImage'
+import Button from '@components/common/button/Button'
+import Spinner from '@components/common/loading/Spinner'
+import TablePaging from '@components/common/table/TablePaging'
+import { MediaGrid } from '@components/media/blocks/MediaGrid'
+import { MediaAttachmentLinks } from '@components/media/items/MediaAttachmentLinks'
+import { MediaFileIcon } from '@components/media/items/MediaFileIcon'
+import { MediaBulkDeleteWarningModal } from '@components/media/modal/MediaBulkDeleteWarningModal'
+import { MediaTableActions } from '@components/media/table/MediaTableActions'
+import { MediaTableFilter } from '@components/media/table/MediaTableFilter'
+import { DEFAULT_ERROR_MESSAGE } from '@helpers/constants'
+import { bytesToSize } from '@helpers/data-transform'
+import { FullDateAndTimeFormat } from '@helpers/date'
+import { defaultAvatar } from '@helpers/images'
+import { truncateString } from '@helpers/string'
+
+export const MediaTable = () => {
+	const {
+		push: redirect,
+		query: { page, limit, type, date, nameLike, ownerId },
+	} = useRouter()
+	const [infinityScrollPage, setInfinityScrollPage] = useState(1)
+	const [bulkDeleteMedia, { isLoading: isDeletingMedia }] =
+		useBulkDeleteMediaMutation()
+
+	const { getLimitFromQuery, calculateProperPageNumber } =
+		useSearchAndFilterCommon()
+
+	const {
+		isOpen: isDialogOpen,
+		onOpen: onOpenDialog,
+		onClose: onCloseDialog,
+	} = useDisclosure()
+
+	const { data, isLoading, isFetching } = useGetMediaListQuery({
+		nameLike: nameLike?.toString(),
+		type: type?.toString(),
+		date: date?.toString(),
+		limit: getLimitFromQuery(limit),
+		page: calculateProperPageNumber(page),
+		ownerId: ownerId?.toString(),
+	})
+
+	const [viewMode, setViewMode] = useState<'list' | 'grid' | 'bulk_select'>(
+		'list'
+	)
+	const [selectedAssets, setSelectedAssets] = useState<Media[]>([])
+
+	const [isTopPosition, setIsTopPosition] = useState(true)
+
+	useEffect(() => {
+		if (viewMode === 'list') return
+
+		const onScroll = (event: Event) => {
+			const position = window.scrollY
+			const PIXELS_TO_CHANGE_TO_POSITION_FIXED = 97
+			setIsTopPosition(position < PIXELS_TO_CHANGE_TO_POSITION_FIXED)
+		}
+
+		window.addEventListener('scroll', onScroll)
+
+		return () => {
+			window.removeEventListener('scroll', onScroll)
+		}
+	}, [viewMode])
+
+	const onRowClick = (event: SyntheticEvent, object: Media) => {
+		const parent = (event.target as HTMLElement).closest('[data-type]')
+		const type = parent?.getAttribute('data-type')
+		if (type === 'action') {
+			return
+		}
+
+		redirect(`/admin/media/${object.id}`)
+	}
+
+	const onDeleteMedia = async () => {
+		if (!isEmpty(selectedAssets)) {
+			try {
+				await bulkDeleteMedia({ media: selectedAssets }).unwrap()
+				toast.success('Your media has been deleted successfully')
+				setSelectedAssets([])
+			} catch (error) {
+				toast.error(DEFAULT_ERROR_MESSAGE)
+			}
+		}
+	}
+
+	return (
+		<>
+			<div
+				className={`d-flex gap-3 flex-wrap align-items-center minh-xs-70p ${
+					viewMode === 'bulk_select' ? 'justify-content-between' : ''
+				} ${
+					!isTopPosition
+						? 'position-fixed top-0 bg-white z-index-1 py-2 w-admin-content-size'
+						: 'w-100'
+				}`}
+			>
+				{viewMode === 'bulk_select' ? (
+					<>
+						<Button
+							type='button'
+							color='danger'
+							ariaLabel='Delete item'
+							className='text-white'
+							disabled={isEmpty(selectedAssets) || isDeletingMedia}
+							onClick={onOpenDialog}
+						>
+							Delete
+						</Button>
+						<MediaBulkDeleteWarningModal
+							isOpen={isDialogOpen}
+							onClose={onCloseDialog}
+							mediaAssets={selectedAssets}
+							onDelete={() => onDeleteMedia()}
+						/>
+					</>
+				) : (
+					<div className='flex-grow-1'>
+						<MediaTableFilter onChangeFilter={() => setInfinityScrollPage(1)} />
+					</div>
+				)}
+
+				<div className='d-flex gap-2 w-xs-210p h-xs-70p justify-content-end'>
+					<Button
+						type='button'
+						className={`${
+							viewMode === 'list' ? 'text-white' : 'text-hover-white'
+						}  border-light-gray no-min-size w-xs-65p position-relative`}
+						ariaLabel='Update layout to list'
+						color='primary'
+						outline={viewMode !== 'list'}
+						onClick={() => setViewMode('list')}
+					>
+						<Tooltip
+							className='tooltip tooltip-md text-white'
+							label={'List View'}
+							hasArrow
+							placement='bottom'
+							fontSize='md'
+							mb='6'
+						>
+							<span className='d-flex align-items-center justify-content-center position-absolute top-0 left-0 right-0 bottom-0'>
+								<span className='bi bi-card-checklist fs-4'></span>
+							</span>
+						</Tooltip>
+					</Button>
+					<Button
+						type='button'
+						className={`${
+							viewMode === 'grid' ? 'text-white' : 'text-hover-white'
+						}  border-light-gray no-min-size w-xs-65p position-relative`}
+						ariaLabel='Update layout to grid'
+						color='primary'
+						outline={viewMode !== 'grid'}
+						onClick={() => setViewMode('grid')}
+					>
+						<Tooltip
+							className='tooltip tooltip-md text-white'
+							label={'Grid View'}
+							hasArrow
+							placement='bottom'
+							fontSize='md'
+							mb='6'
+						>
+							<span className='d-flex align-items-center justify-content-center position-absolute top-0 left-0 right-0 bottom-0'>
+								<span className='bi bi-grid fs-4'></span>
+							</span>
+						</Tooltip>
+					</Button>
+					<Button
+						type='button'
+						className={`${
+							viewMode === 'bulk_select' ? 'text-white' : 'text-hover-white'
+						}  border-light-gray no-min-size w-xs-65p position-relative`}
+						ariaLabel='Bulk Select'
+						color='primary'
+						outline={viewMode !== 'bulk_select'}
+						onClick={() => setViewMode('bulk_select')}
+					>
+						<Tooltip
+							className='tooltip tooltip-md text-white'
+							label={'Bulk Select'}
+							hasArrow
+							placement='bottom'
+							fontSize='md'
+							mb='6'
+						>
+							<span className='d-flex align-items-center justify-content-center position-absolute top-0 left-0 right-0 bottom-0'>
+								<span className='bi bi-layers fs-4'></span>
+							</span>
+						</Tooltip>
+					</Button>
+				</div>
+			</div>
+
+			{['grid', 'bulk_select'].includes(viewMode) ? (
+				<MediaGrid
+					canSelectMultiple
+					date={date?.toString()}
+					nameLike={nameLike?.toString()}
+					type={type as MediaType}
+					mode={viewMode === 'grid' ? 'list' : 'selection'}
+					ownerId={ownerId?.toString()}
+					externalPageState={[infinityScrollPage, setInfinityScrollPage]}
+					onSelectMedia={setSelectedAssets}
+				/>
+			) : (
+				<>
+					<div className='mt-4'>
+						<table className='table'>
+							<thead>
+								<tr>
+									<th scope='col' className='w-lg-90-down'>
+										File
+									</th>
+									<th scope='col' className='d-none d-lg-table-cell'>
+										By
+									</th>
+									<th scope='col' className='d-none d-lg-table-cell'>
+										Uploaded To
+									</th>
+									<th scope='col' className='d-none d-lg-table-cell'>
+										On
+									</th>
+									<th scope='col' className='d-none d-lg-table-cell'>
+										<span className='opacity-0'>Actions</span>
+									</th>
+								</tr>
+							</thead>
+							<tbody>
+								{data &&
+									!isFetching &&
+									data.results.map((media, key) => (
+										<tr
+											key={key}
+											className='pointer'
+											onClick={(e) => onRowClick(e, media)}
+										>
+											<td>
+												<div className='d-flex gap-3'>
+													<div>
+														<MediaFileIcon
+															mimeType={media.mimeType}
+															type={media.mediaType}
+															sourceUrl={media.sourceUrl}
+														/>
+													</div>
+													<div>
+														<span className='d-block'>
+															{truncateString(media.name, 40)}
+														</span>
+														<span className='mt-1 d-block small-sm'>
+															{truncateString(media.slug, 50)}
+														</span>
+														<span className='mt-1 d-block small-sm text-medium-gray'>
+															{bytesToSize(media.details?.fileSize || 0)}
+														</span>
+													</div>
+												</div>
+											</td>
+											<td className='d-none d-lg-table-cell'>
+												<OptimizedImage
+													src={
+														media.owner?.profileMedia?.media.sourceUrl ||
+														defaultAvatar
+													}
+													alt={
+														media.owner?.profileMedia?.media.details?.altText ||
+														''
+													}
+													width={35}
+													height={35}
+													className='object-fit-cover rounded-pill'
+												/>
+											</td>
+											<td className='d-none d-lg-table-cell'>
+												<div className='w-xs-150p' data-type='action'>
+													<MediaAttachmentLinks
+														attachments={media.mediaAttachments || []}
+													/>
+												</div>
+											</td>
+											<td className='d-none d-lg-table-cell'>
+												{FullDateAndTimeFormat(media.createdAt)}
+											</td>
+											<td className='d-none d-lg-table-cell'>
+												<div
+													className='w-100 d-flex justify-content-end'
+													data-type='action'
+												>
+													<MediaTableActions
+														media={media}
+														btnBgHoverColor='background'
+													/>
+												</div>
+											</td>
+										</tr>
+									))}
+							</tbody>
+						</table>
+
+						{isFetching && (
+							<div className='w-100 d-flex justify-content-center py-4'>
+								<Spinner color='primary' />
+							</div>
+						)}
+
+						{!isLoading && !isFetching && isEmpty(data?.results) && (
+							<div className='d-flex flex-column align-items-center justify-content-center'>
+								{nameLike || type || date ? (
+									<p>{`There are no media to show that match your search`}</p>
+								) : (
+									<p>{`You don't have any media yet`}</p>
+								)}
+							</div>
+						)}
+					</div>
+
+					{!isEmpty(data?.results) && data?.count !== undefined && (
+						<TablePaging totalCount={data.count} />
+					)}
+				</>
+			)}
+		</>
+	)
+}

package/src/components/media/table/MediaTableActions.tsx

@@ -0,0 +1,130 @@
+import { useRouter } from '@lib/next-router'
+import type { ReactElement } from 'react'
+import {
+	IconButton,
+	Menu,
+	MenuButton,
+	MenuItem,
+	MenuList,
+	useDisclosure,
+} from '@chakra-ui/react'
+import { toast } from 'react-toastify'
+import { Media } from '@store/model'
+import { useMediaStore } from '@hooks'
+import { MediaDeleteWarningModal } from '@components/media/modal/MediaDeleteWarningModal'
+import { copyToClipboard } from '@helpers/sharer'
+
+export const MediaTableActions = ({
+	media,
+	icon = <span className='bi bi-three-dots-vertical fs-4'></span>,
+	btnBgColor,
+	btnBgHoverColor,
+	textColor,
+	width = 45,
+	height = 45,
+	skipEdit = false,
+	}: {
+		media: Media
+		icon?: ReactElement
+	btnBgColor?: string
+	btnBgHoverColor?: string
+	textColor?: string
+	width?: number | null
+	height?: number | null
+	skipEdit?: boolean
+}) => {
+	const { push: redirect } = useRouter()
+
+	const { removeMedia } = useMediaStore()
+
+	const {
+		isOpen: isDialogOpen,
+		onOpen: onOpenDialog,
+		onClose: onCloseDialog,
+	} = useDisclosure()
+
+	const onDeleteMedia = async () => {
+		await removeMedia(media)
+		redirect(`/admin/media`)
+		toast.success('Your media has been deleted successfully')
+	}
+
+	const handleDownload = () => {
+		const element = document.createElement('a')
+		element.href = media.sourceUrl
+		element.download = media.name
+		document.body.appendChild(element)
+		element.click()
+
+		// Clean up
+		document.body.removeChild(element)
+	}
+
+	return (
+		<>
+			<Menu>
+				<MenuButton
+					as={IconButton}
+					aria-label='Options'
+					icon={icon}
+					className={`btn no-min-size link ${
+						btnBgColor ? 'btn-' + btnBgColor : ''
+					} ${btnBgHoverColor ? 'bg-hover-' + btnBgHoverColor : ''} ${
+						width ? `w-xs-${width}p` : ''
+					} ${height ? `h-xs-${height}p` : ''} ${
+						textColor ? `text-${textColor}` : ''
+					}`}
+				/>
+				<div className='z-index-1'>
+					<MenuList className='bg-white shadow rounded-md menu-list-container'>
+						{!skipEdit && (
+							<MenuItem
+								className='border-0 bg-white bg-hover-background px-3 py-2 text-capitalize'
+								icon={<span className='bi bi-pencil-square'></span>}
+								onClick={() => redirect(`/admin/media/${media.id}`)}
+							>
+								Edit
+							</MenuItem>
+						)}
+						<MenuItem
+							className='border-0 bg-white bg-hover-background px-3 py-2 text-capitalize'
+							icon={<span className='bi bi-box-arrow-up-right'></span>}
+							onClick={() => window.open(media.sourceUrl, '_blank')}
+						>
+							View
+						</MenuItem>
+						<MenuItem
+							className='border-0 bg-white bg-hover-background px-3 py-2 text-capitalize'
+							icon={<span className='bi bi-files'></span>}
+							onClick={() =>
+								copyToClipboard(media.sourceUrl, 'File URL Copied')
+							}
+						>
+							Copy URL
+						</MenuItem>
+						<MenuItem
+							className='border-0 bg-white bg-hover-background px-3 py-2 text-capitalize'
+							icon={<span className='bi bi-file-earmark-arrow-down'></span>}
+							onClick={handleDownload}
+						>
+							Download File
+						</MenuItem>
+						<MenuItem
+							className='border-0 bg-white bg-hover-background px-3 py-2 text-capitalize text-danger'
+							icon={<span className='bi bi-trash'></span>}
+							onClick={onOpenDialog}
+						>
+							Delete
+						</MenuItem>
+					</MenuList>
+				</div>
+			</Menu>
+			<MediaDeleteWarningModal
+				isOpen={isDialogOpen}
+				onClose={onCloseDialog}
+				media={media}
+				onDelete={() => onDeleteMedia()}
+			/>
+		</>
+	)
+}