Single asset card implementation

src/assets/components/asset-card/AssetCard.tsx

@@ -0,0 +1,93 @@
+import { Asset } from "@/assets/entities/Assets";
+import { Card, AspectRatio, Group, LoadingOverlay, Image, Text, rem, ActionIcon, useMantineTheme } from "@mantine/core";
+import classes from './AssetCard.module.css';
+import { Icon3dRotate, IconFile, IconFile3d, IconFileTypePdf, IconZoomScan } from "@tabler/icons-react";
+import { DropDownMenu } from "../parts/drop-down-menu/DropDownMenu";
+import { SetAsMain } from "../parts/set-as-main/SetAsMain";
+import { SettingsContext } from "@/core/settings/settingsContext";
+import { useCallback, useContext, useState } from "react";
+import { Lightbox } from "react-modal-image";
+import { useToggle } from "@mantine/hooks";
+import { SelectBtn } from "../parts/select-btn/SelectBtn";
+
+type AssetCardProps = {
+    asset: Asset;
+    focused: boolean;
+    onFocused: () => void;
+    onDelete: () => void;
+    onChange: () => void;
+    view3d: boolean;
+    onView3dChange: (arg0: boolean) => void;
+}
+
+const iconMap = new Map<string, JSX.Element>();
+iconMap.set('.pdf', <IconFileTypePdf />);
+iconMap.set('.jpg', <IconFile />);
+iconMap.set('.stl', <IconFile3d />);
+
+export function AssetCard({ asset, focused, onFocused, onDelete, onChange, view3d, onView3dChange }: AssetCardProps) {
+    const theme = useMantineTheme();
+    const { settings } = useContext(SettingsContext);
+    const [loading, setLoading] = useState(false);
+    const [modal, toggleModal] = useToggle([false, true]);
+    const toggleLoadingCallback = useCallback(() => {
+        setLoading((l) => {
+            return !l
+        })
+    }, [loading])
+
+    const size = rem('280px');
+    return (
+        <>
+            {modal && asset.image_id && asset.image_id != "" && <Lightbox
+                medium={`${settings.localBackend}/projects/${asset.project_uuid}/assets/${asset.image_id}`}
+                large={`${settings.localBackend}/projects/${asset.project_uuid}/assets/${asset.image_id}`}
+                hideDownload={true}
+                onClose={toggleModal}
+            />}
+            <Card withBorder padding="lg" radius="md" className={classes.card} style={{ minWidth: size, width: size, borderColor: focused ? 'red' : '' }} >
+                <Card.Section mb="sm" onClick={() => toggleModal()}>
+                    <AspectRatio ratio={16 / 9}>
+                        {asset?.image_id === "" ? (iconMap.get(asset.extension) ?? <IconFile />) :
+                            <Image
+                                src={`${settings.localBackend}/projects/${asset.project_uuid}/assets/${asset.image_id}`}
+                                alt={asset.name}
+                            />
+                        }
+                    </AspectRatio>
+                </Card.Section>
+
+                <Text fw={700} className={classes.title} mt="xs" onClick={() => { onFocused() }}>
+                    {asset.name}
+                </Text>
+
+                <LoadingOverlay visible={loading} zIndex={1000} overlayProps={{ blur: 2 }} />
+                <Card.Section className={classes.footer}>
+                    <Group justify="flex-end">
+                        <Group gap={0}>
+                            {asset.extension == '.stl' &&
+                                onView3dChange &&
+                                view3d !== undefined &&
+                                <SelectBtn selected={view3d} onChange={onView3dChange} icon={<Icon3dRotate />} />}
+                            {asset.image_id && asset.image_id != "" && <ActionIcon variant="subtle" color="gray" onClick={() => toggleModal()}>
+                                <IconZoomScan
+                                    style={{ width: rem(20), height: rem(20) }}
+                                    color={theme.colors.red[6]}
+                                    stroke={1.5}
+                                />
+                            </ActionIcon>}
+                            < DropDownMenu
+                                projectUuid={asset.project_uuid}
+                                id={asset.id}
+                                openDetails={() => { onFocused() }}
+                                downloadURL={`${settings.localBackend}/projects/${asset.project_uuid}/assets/${asset.id}?download=true'`}
+                                onDelete={onDelete}
+                                toggleLoad={toggleLoadingCallback}>
+                                <SetAsMain projectUuid={asset.project_uuid} assetId={asset.image_id} onChange={onChange} />
+                            </DropDownMenu>
+                        </Group>
+                    </Group>
+                </Card.Section>
+            </Card >
+        </>)
+}

src/assets/components/parts/drop-down-menu/DropDownMenu.tsx

@@ -14,11 +14,11 @@ type DropDownMenuProps = {
     toggleLoad?: () => void;
 }
 
-export function DropDownMenu({ id, children, downloadURL, onDelete, openDetails, toggleLoad }: DropDownMenuProps) {
+export function DropDownMenu({ id, projectUuid, children, downloadURL, onDelete, openDetails, toggleLoad }: DropDownMenuProps) {
     const { settings } = useContext(SettingsContext);
     const [{ }, callDelete] = useAxios(
         {
-            url: `${settings.localBackend}/assets/${id}/delete`,
+            url: `${settings.localBackend}/projects/${projectUuid}/assets/${id}/delete`,
             method: 'POST'
         },
         { manual: true }

src/assets/entities/Assets.ts

@@ -3,7 +3,7 @@ export type AssetType = 'image' | 'model' | 'file' | 'slice'
 export interface Asset {
     id: string
     name: string
-    generated: boolean
+    origin: string
     project_uuid: string
     path: string
     mod_time: string
@@ -12,36 +12,5 @@ export interface Asset {
     extension: string
     mime_type: string
     image_id: string
-    model?: Model
-    project_image?: ProjectImage
-    project_file?: ProjectFile
-    slice?: Slice
-}
-
-export interface Model {
-    image_id: string
-}
-
-export interface ProjectImage {
-}
-
-export interface ProjectFile {
-}
-
-export interface Slice {
-    image_id: string
-    slicer: string
-    filament: Filament
-    cost: number
-    layer_count: number
-    duration: string
-}
-
-export interface Image {
-}
-
-export interface Filament {
-    length: number
-    mass: number
-    weight: number
+    properties: any
 }

src/assets/utils/assetMapping.tsx

@@ -1,20 +1,8 @@
-import { AssetCardProps } from "../components/AssetCardProps";
-import { FileCard } from "../components/file-card/FileCard";
-import { ImageCard } from "../components/image-card/ImageCard";
-import { ModelCard } from "../components/model/model-card/ModelCard";
-import { SliceCard } from "../components/slice/slice-card/SliceCard";
 import { IconPhoto, IconFile3d, IconLayersIntersect, IconFile } from "@tabler/icons-react";
 
 export const supportedAssetTypes: { name: string, label: string, icon: JSX.Element }[] = [
     { name: "model", label: "Models", icon: <IconFile3d /> },
     { name: "slice", label: "Slices", icon: <IconLayersIntersect /> },
     { name: "image", label: "Images", icon: <IconPhoto /> },
     { name: "file", label: "Files", icon: <IconFile /> },
-]
-export const assetTypeMap: Map<string, (props: AssetCardProps) => JSX.Element> = new Map([
-    ["image", (props: AssetCardProps) => <ImageCard {...props} key={props.asset.id} />],
-    ["model", (props: AssetCardProps) => <ModelCard {...props} key={props.asset.id} />],
-    ["slice", (props: AssetCardProps) => <SliceCard {...props} key={props.asset.id} />],
-    ["file", (props: AssetCardProps) => <FileCard {...props} key={props.asset.id} />],
-    ["other", (props: AssetCardProps) => <FileCard {...props} key={props.asset.id} />],
-]);
+]