setHovered(true) : undefined}
- onMouseLeave={isDesktop ? () => setHovered(false) : undefined}
- onClick={isDesktop ? undefined : () => setHovered(!hovered)}
+ onClick={() => {
+ if (!exportedRecording.in_progress) {
+ onSelect(exportedRecording);
+ }
+ }}
>
{exportedRecording.in_progress ? (
@@ -158,95 +186,88 @@ export default function ExportCard({
)}
)}
- {hovered && (
- <>
-
-
-
- {!exportedRecording.in_progress && (
-
-
-
- shareOrCopy(
- `${baseUrl}export?id=${exportedRecording.id}`,
- exportedRecording.name.replaceAll("_", " "),
- )
- }
- >
-
-
-
- {t("tooltip.shareExport")}
-
- )}
- {!exportedRecording.in_progress && (
+ {!exportedRecording.in_progress && (
+
+
+
+ e.stopPropagation()}
+ >
+
+
+
+
+ {
+ e.stopPropagation();
+ shareOrCopy(
+ `${baseUrl}export?id=${exportedRecording.id}`,
+ exportedRecording.name.replaceAll("_", " "),
+ );
+ }}
+ >
+ {t("tooltip.shareExport")}
+
+
e.stopPropagation()}
>
-
-
-
-
-
-
-
- {t("tooltip.downloadVideo")}
-
-
+ {t("tooltip.downloadVideo")}
- )}
- {isAdmin && !exportedRecording.in_progress && (
-
-
-
- setEditName({
- original: exportedRecording.name,
- update: undefined,
- })
- }
- >
-
-
-
- {t("tooltip.editName")}
-
+
+ {isAdmin && onAssignToCase && (
+ {
+ e.stopPropagation();
+ onAssignToCase(exportedRecording);
+ }}
+ >
+ {t("tooltip.assignToCase")}
+
)}
{isAdmin && (
-
-
-
- onDelete({
- file: exportedRecording.id,
- exportName: exportedRecording.name,
- })
- }
- >
-
-
-
- {t("tooltip.deleteExport")}
-
+ {
+ e.stopPropagation();
+ setEditName({
+ original: exportedRecording.name,
+ update: undefined,
+ });
+ }}
+ >
+ {t("tooltip.editName")}
+
)}
-
-
-
- {!exportedRecording.in_progress && (
-
- )}
-
+ {isAdmin && (
+
{
+ e.stopPropagation();
+ onDelete({
+ file: exportedRecording.id,
+ exportName: exportedRecording.name,
+ });
+ }}
+ >
+ {t("tooltip.deleteExport")}
+
+ )}
+
+
+
)}
{loading && (
diff --git a/web/src/components/overlay/dialog/OptionAndInputDialog.tsx b/web/src/components/overlay/dialog/OptionAndInputDialog.tsx
new file mode 100644
index 000000000..cb6b23907
--- /dev/null
+++ b/web/src/components/overlay/dialog/OptionAndInputDialog.tsx
@@ -0,0 +1,166 @@
+import { Button } from "@/components/ui/button";
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+import { isMobile } from "react-device-detect";
+import { useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+type Option = {
+ value: string;
+ label: string;
+};
+
+type OptionAndInputDialogProps = {
+ open: boolean;
+ title: string;
+ description?: string;
+ options: Option[];
+ newValueKey: string;
+ initialValue?: string;
+ nameLabel: string;
+ descriptionLabel: string;
+ setOpen: (open: boolean) => void;
+ onSave: (value: string) => void;
+ onCreateNew: (name: string, description: string) => void;
+};
+
+export default function OptionAndInputDialog({
+ open,
+ title,
+ description,
+ options,
+ newValueKey,
+ initialValue,
+ nameLabel,
+ descriptionLabel,
+ setOpen,
+ onSave,
+ onCreateNew,
+}: OptionAndInputDialogProps) {
+ const { t } = useTranslation("common");
+ const firstOption = useMemo(() => options[0]?.value, [options]);
+
+ const [selectedValue, setSelectedValue] = useState
(
+ initialValue ?? firstOption,
+ );
+ const [name, setName] = useState("");
+ const [descriptionValue, setDescriptionValue] = useState("");
+
+ useEffect(() => {
+ if (open) {
+ setSelectedValue(initialValue ?? firstOption);
+ setName("");
+ setDescriptionValue("");
+ }
+ }, [open, initialValue, firstOption]);
+
+ const isNew = selectedValue === newValueKey;
+ const disableSave = !selectedValue || (isNew && name.trim().length === 0);
+
+ const handleSave = () => {
+ if (!selectedValue) {
+ return;
+ }
+
+ const trimmedName = name.trim();
+ const trimmedDescription = descriptionValue.trim();
+
+ if (isNew) {
+ onCreateNew(trimmedName, trimmedDescription);
+ } else {
+ onSave(selectedValue);
+ }
+ setOpen(false);
+ };
+
+ return (
+
+ );
+}
diff --git a/web/src/pages/Exports.tsx b/web/src/pages/Exports.tsx
index 7e4e820d9..70fa5d5b8 100644
--- a/web/src/pages/Exports.tsx
+++ b/web/src/pages/Exports.tsx
@@ -1,5 +1,5 @@
import { baseUrl } from "@/api/baseUrl";
-import ExportCard from "@/components/card/ExportCard";
+import { CaseCard, ExportCard } from "@/components/card/ExportCard";
import {
AlertDialog,
AlertDialogCancel,
@@ -11,15 +11,24 @@ import {
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
+import Heading from "@/components/ui/heading";
import { Input } from "@/components/ui/input";
import { Toaster } from "@/components/ui/sonner";
import useKeyboardListener from "@/hooks/use-keyboard-listener";
-import { useSearchEffect } from "@/hooks/use-overlay-state";
+import { useOverlayState, useSearchEffect } from "@/hooks/use-overlay-state";
import { cn } from "@/lib/utils";
-import { DeleteClipType, Export } from "@/types/export";
+import { DeleteClipType, Export, ExportCase } from "@/types/export";
+import OptionAndInputDialog from "@/components/overlay/dialog/OptionAndInputDialog";
import axios from "axios";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+ MutableRefObject,
+ useCallback,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+} from "react";
import { isMobile } from "react-device-detect";
import { useTranslation } from "react-i18next";
@@ -29,32 +38,37 @@ import useSWR from "swr";
function Exports() {
const { t } = useTranslation(["views/exports"]);
- const { data: exports, mutate } = useSWR("exports");
useEffect(() => {
document.title = t("documentTitle");
}, [t]);
+ // Data
+
+ const { data: cases, mutate: updateCases } = useSWR("cases");
+ const { data: rawExports, mutate: updateExports } =
+ useSWR("exports");
+
+ const exports = useMemo(
+ () => (rawExports ?? []).filter((e) => !e.export_case),
+ [rawExports],
+ );
+
+ const mutate = useCallback(() => {
+ updateExports();
+ updateCases();
+ }, [updateExports, updateCases]);
+
// Search
const [search, setSearch] = useState("");
- const filteredExports = useMemo(() => {
- if (!search || !exports) {
- return exports;
- }
-
- return exports.filter((exp) =>
- exp.name
- .toLowerCase()
- .replaceAll("_", " ")
- .includes(search.toLowerCase()),
- );
- }, [exports, search]);
-
// Viewing
const [selected, setSelected] = useState();
+ const [selectedCaseId, setSelectedCaseId] = useOverlayState<
+ string | undefined
+ >("caseId", undefined);
const [selectedAspect, setSelectedAspect] = useState(0.0);
useSearchEffect("id", (id) => {
@@ -66,9 +80,25 @@ function Exports() {
return true;
});
- // Deleting
+ useSearchEffect("caseId", (caseId: string) => {
+ if (!cases) {
+ return false;
+ }
+
+ const exists = cases.some((c) => c.id === caseId);
+
+ if (!exists) {
+ return false;
+ }
+
+ setSelectedCaseId(caseId);
+ return true;
+ });
+
+ // Modifying
const [deleteClip, setDeleteClip] = useState();
+ const [exportToAssign, setExportToAssign] = useState();
const onHandleDelete = useCallback(() => {
if (!deleteClip) {
@@ -83,8 +113,6 @@ function Exports() {
});
}, [deleteClip, mutate]);
- // Renaming
-
const onHandleRename = useCallback(
(id: string, update: string) => {
axios
@@ -107,7 +135,7 @@ function Exports() {
});
});
},
- [mutate, t],
+ [mutate, setDeleteClip, t],
);
// Keyboard Listener
@@ -115,10 +143,27 @@ function Exports() {
const contentRef = useRef(null);
useKeyboardListener([], undefined, contentRef);
+ const selectedCase = useMemo(
+ () => cases?.find((c) => c.id === selectedCaseId),
+ [cases, selectedCaseId],
+ );
+
+ const resetCaseDialog = useCallback(() => {
+ setExportToAssign(undefined);
+ }, []);
+
return (
+
+
setDeleteClip(undefined)}
@@ -187,7 +232,7 @@ function Exports() {
- {exports && (
+ {(exports?.length || cases?.length) && (
)}
-
- {exports && filteredExports && filteredExports.length > 0 ? (
-
- {Object.values(exports).map((item) => (
-
- setDeleteClip({ file, exportName })
- }
- />
- ))}
-
- ) : (
-
-
- {t("noExports")}
-
- )}
+ {selectedCase ? (
+
+ ) : (
+
+ )}
+
+ );
+}
+
+type AllExportsViewProps = {
+ contentRef: MutableRefObject
;
+ search: string;
+ cases?: ExportCase[];
+ exports: Export[];
+ setSelectedCaseId: (id: string) => void;
+ setSelected: (e: Export) => void;
+ renameClip: (id: string, update: string) => void;
+ setDeleteClip: (d: DeleteClipType | undefined) => void;
+ onAssignToCase: (e: Export) => void;
+};
+function AllExportsView({
+ contentRef,
+ search,
+ cases,
+ exports,
+ setSelectedCaseId,
+ setSelected,
+ renameClip,
+ setDeleteClip,
+ onAssignToCase,
+}: AllExportsViewProps) {
+ const { t } = useTranslation(["views/exports"]);
+
+ // Filter
+
+ const filteredCases = useMemo(() => {
+ if (!search || !cases) {
+ return cases || [];
+ }
+
+ return cases.filter(
+ (caseItem) =>
+ caseItem.name.toLowerCase().includes(search.toLowerCase()) ||
+ (caseItem.description &&
+ caseItem.description.toLowerCase().includes(search.toLowerCase())),
+ );
+ }, [search, cases]);
+
+ const filteredExports = useMemo(() => {
+ if (!search) {
+ return exports;
+ }
+
+ return exports.filter((exp) =>
+ exp.name
+ .toLowerCase()
+ .replaceAll("_", " ")
+ .includes(search.toLowerCase()),
+ );
+ }, [exports, search]);
+
+ return (
+
+ {filteredCases?.length || filteredExports.length ? (
+
+ {filteredCases.length > 0 && (
+
+
{t("headings.cases")}
+
+ {cases?.map((item) => (
+ {
+ setSelectedCaseId(item.id);
+ }}
+ />
+ ))}
+
+
+ )}
+
+ {filteredExports.length > 0 && (
+
+
{t("headings.uncategorizedExports")}
+
+ {exports.map((item) => (
+
+ setDeleteClip({ file, exportName })
+ }
+ onAssignToCase={onAssignToCase}
+ />
+ ))}
+
+
+ )}
+
+ ) : (
+
+
+ {t("noExports")}
+
+ )}
+
+
+
+ {selectedCase.name}
+
+
+ {selectedCase.description}
+
+
+
+ {exports?.map((item) => (
+
+ setDeleteClip({ file, exportName })
+ }
+ onAssignToCase={onAssignToCase}
+ />
+ ))}