@@ -57,6 +98,7 @@ export function MediaUploadModal({
variant="outline"
size="default"
className="text-[12px]"
+ disabled={pending}
onClick={() => onOpenChange(false)}
>
Close
diff --git a/src/app/(protected)/workorders/_components/media/media-uploader-dropzone.tsx b/src/app/(protected)/workorders/_components/media/media-uploader-dropzone.tsx
new file mode 100644
index 00000000..9233d212
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/media/media-uploader-dropzone.tsx
@@ -0,0 +1,94 @@
+import type { RefObject } from "react";
+import { Upload } from "lucide-react";
+import type { UploadableMediaCategory } from "@/domain/work-orders/mappers/work-order-board-detail-mapper";
+import { formatMediaSizeLimit } from "@/domain/work-orders/utils/work-order-media-limits";
+
+const PHOTO_CATEGORIES: UploadableMediaCategory[] = ["Before", "After"];
+
+type MediaUploaderDropzoneProps = {
+ inputRef: RefObject
;
+ category: UploadableMediaCategory;
+ onCategoryChange: (category: UploadableMediaCategory) => void;
+ showCategoryPicker: boolean;
+ pending: boolean;
+ onFilesSelected: (files: FileList | null) => void;
+};
+
+export function MediaUploaderDropzone({
+ inputRef,
+ category,
+ onCategoryChange,
+ showCategoryPicker,
+ pending,
+ onFilesSelected,
+}: MediaUploaderDropzoneProps) {
+ return (
+ <>
+ {showCategoryPicker && (
+
+
+
+
+ )}
+
+ {
+ onFilesSelected(e.target.files);
+ e.target.value = "";
+ }}
+ />
+
+ );
+}
diff --git a/src/app/(protected)/workorders/_components/media/media-uploader-grid-item.tsx b/src/app/(protected)/workorders/_components/media/media-uploader-grid-item.tsx
new file mode 100644
index 00000000..55a30ea2
--- /dev/null
+++ b/src/app/(protected)/workorders/_components/media/media-uploader-grid-item.tsx
@@ -0,0 +1,96 @@
+import {
+ File as FileIcon,
+ FileText,
+ Film,
+ Image as ImageIcon,
+ Paperclip,
+ Play,
+ X,
+} from "lucide-react";
+import type { FileCategory, MediaFile } from "@/domain/work-orders/types/work-order-media";
+import { canDeleteWorkOrderMedia } from "@/domain/work-orders/utils/work-order-media-limits";
+
+const FILETYPE_ICON: Record = {
+ image: ImageIcon,
+ video: Film,
+ pdf: FileText,
+ doc: FileIcon,
+ other: Paperclip,
+};
+
+type MediaUploaderGridItemProps = {
+ file: MediaFile;
+ readOnly: boolean;
+ pending: boolean;
+ onRemove: (id: string) => void;
+};
+
+export function MediaUploaderGridItem({
+ file,
+ readOnly,
+ pending,
+ onRemove,
+}: MediaUploaderGridItemProps) {
+ const TypeIcon = FILETYPE_ICON[file.fileType];
+ const showDelete = !readOnly && canDeleteWorkOrderMedia(file);
+
+ return (
+
+
+ {file.fileType === "image" ? (
+
+ ) : file.fileType === "video" ? (
+ <>
+
+
+
+
+
+ ) : (
+
+
+
+ )}
+ {showDelete && (
+
+ )}
+
+
+
+ {uploads.map((file) => (
+
+ ))}
+
+ );
+}
diff --git a/src/app/(protected)/workorders/_components/media/media-uploader.tsx b/src/app/(protected)/workorders/_components/media/media-uploader.tsx
index bd7fcc9a..106aa32b 100644
--- a/src/app/(protected)/workorders/_components/media/media-uploader.tsx
+++ b/src/app/(protected)/workorders/_components/media/media-uploader.tsx
@@ -1,143 +1,90 @@
-import { useRef } from "react";
+import { useRef, useState } from "react";
+import { toast } from "react-toastify";
+import type { UploadableMediaCategory } from "@/domain/work-orders/mappers/work-order-board-detail-mapper";
+import type { MediaFile } from "@/domain/work-orders/types/work-order-media";
import {
- File as FileIcon,
- FileText,
- Film,
- Image as ImageIcon,
- Paperclip,
- Play,
- Upload,
- X,
-} from "lucide-react";
-import type { FileCategory, MediaFile } from "@/domain/work-orders/types/work-order-media";
+ canDeleteWorkOrderMedia,
+ formatMediaSizeLimit,
+ isWorkOrderFileTooLarge,
+} from "@/domain/work-orders/utils/work-order-media-limits";
import { makeMediaFile } from "@/domain/work-orders/utils/work-order-media-utils";
-
-const FILETYPE_ICON: Record = {
- image: ImageIcon,
- video: Film,
- pdf: FileText,
- doc: FileIcon,
- other: Paperclip,
-};
+import { MediaUploaderDropzone } from "./media-uploader-dropzone";
+import { MediaUploaderGrid } from "./media-uploader-grid";
type MediaUploaderProps = {
uploads: MediaFile[];
- onChange: (next: MediaFile[]) => void;
+ /** When provided, uploads go to the API with the selected Before/After category. */
+ onUpload?: (files: File[], category: UploadableMediaCategory) => void;
+ onRemove?: (id: string) => void;
+ /** Legacy local-only mode (table modal fallback). */
+ onChange?: (next: MediaFile[]) => void;
+ readOnly?: boolean;
+ pending?: boolean;
};
-export function MediaUploader({ uploads, onChange }: MediaUploaderProps) {
+export function MediaUploader({
+ uploads,
+ onUpload,
+ onRemove,
+ onChange,
+ readOnly = false,
+ pending = false,
+}: MediaUploaderProps) {
const inputRef = useRef(null);
+ const [category, setCategory] = useState("Before");
const addFiles = (files: FileList | null) => {
- if (!files || files.length === 0) return;
- onChange([...uploads, ...Array.from(files).map(makeMediaFile)]);
+ if (readOnly || pending || !files || files.length === 0) return;
+
+ const accepted: File[] = [];
+ for (const file of Array.from(files)) {
+ if (isWorkOrderFileTooLarge(file)) {
+ toast.error(`"${file.name}" exceeds the ${formatMediaSizeLimit()} limit.`);
+ continue;
+ }
+ accepted.push(file);
+ }
+ if (accepted.length === 0) return;
+
+ if (onUpload) {
+ onUpload(accepted, category);
+ return;
+ }
+
+ if (onChange) {
+ onChange([...uploads, ...accepted.map(makeMediaFile)]);
+ }
};
- const remove = (id: string) => onChange(uploads.filter((u) => u.id !== id));
+ const remove = (id: string) => {
+ if (readOnly || pending) return;
+ const target = uploads.find((u) => u.id === id);
+ if (target && !canDeleteWorkOrderMedia(target)) return;
+ if (onRemove) {
+ onRemove(id);
+ return;
+ }
+ onChange?.(uploads.filter((u) => u.id !== id));
+ };
return (
-
-
addFiles(e.target.files)}
- />
- {uploads.length > 0 && (
-
- {uploads.map((u) => {
- const TypeIcon = FILETYPE_ICON[u.fileType];
- return (
-
-
- {u.fileType === "image" ? (
-
- ) : u.fileType === "video" ? (
- <>
-
-
-
-
-
- ) : (
-
-
-
- )}
-
-
-
-
- );
- })}
-
+ {!readOnly && (
+
)}
+