✨ Update asset create view

moderate_ui/src/api/assets.ts

@@ -0,0 +1,39 @@
+import axios from "axios";
+import { buildApiUrl } from "./utils";
+
+export async function fetchPygwalkerHtml({ objectId }: { objectId: string }) {
+  return axios.get(buildApiUrl("visualization", "object", objectId));
+}
+
+export async function uploadObject({
+  assetId,
+  file,
+  onProgress,
+}: {
+  assetId: string | number;
+  file: File;
+  onProgress?: (progress: number) => void;
+}): Promise<{ [k: string]: any }> {
+  const data = new FormData();
+  data.append("obj", file);
+
+  const config = {
+    onUploadProgress: function (progressEvent: { [k: string]: any }) {
+      const percentCompleted = Math.round(
+        (progressEvent.loaded * 100) / progressEvent.total
+      );
+
+      console.debug("Upload progress:", percentCompleted, "%");
+
+      if (onProgress) {
+        onProgress(percentCompleted);
+      }
+    },
+  };
+
+  return await axios.post(
+    buildApiUrl("asset", assetId.toString(), "object"),
+    data,
+    config
+  );
+}

moderate_ui/src/api/types.ts

@@ -0,0 +1,5 @@
+export enum AssetAccessLevel {
+  PRIVATE = "private",
+  PUBLIC = "public",
+  VISIBLE = "visible",
+}

moderate_ui/src/pages/asset-objects/ExploratoryDashboard.tsx

@@ -14,7 +14,7 @@ import {
 } from "@refinedev/core";
 import { IconFlask } from "@tabler/icons-react";
 import { useEffect, useMemo, useState } from "react";
-import { fetchPygwalkerHtml } from "../../api/visualization";
+import { fetchPygwalkerHtml } from "../../api/assets";
 
 export const AssetObjectExploratoryDashboard: React.FC = () => {
   const { params } = useParsed();

moderate_ui/src/pages/assets/create.tsx

@@ -1,6 +1,133 @@
-import { IResourceComponentsProps } from "@refinedev/core";
-import { MantineCreateInferencer } from "@refinedev/inferencer/mantine";
+import {
+  FileInput,
+  Loader,
+  LoadingOverlay,
+  Select,
+  Stack,
+  Text,
+  TextInput,
+  Textarea,
+} from "@mantine/core";
+import { isNotEmpty } from "@mantine/form";
+import { useGo, useTranslate } from "@refinedev/core";
+import { Create, useForm } from "@refinedev/mantine";
+import { IconUpload } from "@tabler/icons-react";
+import _ from "lodash";
+import { useState } from "react";
+import { uploadObject } from "../../api/assets";
+import { AssetAccessLevel } from "../../api/types";
 
-export const AssetCreate: React.FC<IResourceComponentsProps> = () => {
-  return <MantineCreateInferencer />;
+export const AssetCreate = () => {
+  const t = useTranslate();
+
+  const [uploadingFile, setUploadingFile] = useState<
+    { name: string; progress: number } | undefined
+  >(undefined);
+
+  const go = useGo();
+
+  const {
+    getInputProps,
+    saveButtonProps,
+    refineCore: { formLoading },
+  } = useForm({
+    initialValues: {
+      name: "",
+      description: "",
+      access_level: AssetAccessLevel.PRIVATE,
+      files: [],
+    },
+    validate: {
+      name: isNotEmpty(),
+      description: isNotEmpty(),
+      access_level: isNotEmpty(),
+      files: isNotEmpty(),
+    },
+    transformValues: (values) => {
+      console.debug("transformValues", values);
+      return values;
+    },
+    refineCoreProps: {
+      redirect: false,
+      onMutationSuccess: async (data, variables) => {
+        const assetId = data.data.id;
+
+        if (!assetId) {
+          return;
+        }
+
+        for (const file of variables.files as File[]) {
+          setUploadingFile({ name: file.name, progress: 0 });
+
+          await uploadObject({
+            assetId,
+            file,
+            onProgress: (progress) => {
+              setUploadingFile({ name: file.name, progress });
+            },
+          });
+
+          setUploadingFile(undefined);
+        }
+
+        go({
+          to: {
+            resource: "asset",
+            action: "show",
+            id: assetId,
+          },
+        });
+      },
+    },
+  });
+
+  return (
+    <>
+      <LoadingOverlay
+        visible={uploadingFile !== undefined}
+        loader={
+          <Stack justify="center" align="center">
+            <Loader size="xl" />
+            <Text color="dimmed">
+              {t("asset.form.uploading", "Uploading")}{" "}
+              <code>{uploadingFile?.name}</code>
+            </Text>
+            <Text fz="xl" fw={700}>
+              {uploadingFile?.progress}%
+            </Text>
+          </Stack>
+        }
+      />
+      <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
+        <TextInput
+          mt="sm"
+          label={t("asset.fields.name")}
+          {...getInputProps("name")}
+        />
+        <Select
+          mt="sm"
+          label={t("asset.fields.access_level")}
+          {...getInputProps("access_level")}
+          data={Object.values(AssetAccessLevel).map((val) => ({
+            value: val,
+            label: _.capitalize(val),
+          }))}
+        />
+        <Textarea
+          mt="sm"
+          label={t("asset.fields.description")}
+          {...getInputProps("description")}
+          autosize
+          minRows={3}
+        />
+        <FileInput
+          mt="sm"
+          label={t("asset.fields.files")}
+          {...getInputProps("files")}
+          icon={<IconUpload size={14} />}
+          multiple
+        />
+      </Create>
+    </>
+  );
 };

moderate_ui/src/pages/assets/list.tsx

@@ -1,16 +1,7 @@
-import {
-  Alert,
-  Box,
-  Group,
-  Pagination,
-  ScrollArea,
-  Space,
-  Table,
-} from "@mantine/core";
+import { Group, Pagination, ScrollArea, Space, Table } from "@mantine/core";
 import { IResourceComponentsProps, useTranslate } from "@refinedev/core";
 import { DeleteButton, EditButton, List, ShowButton } from "@refinedev/mantine";
 import { useTable } from "@refinedev/react-table";
-import { IconBulb } from "@tabler/icons-react";
 import { ColumnDef, flexRender } from "@tanstack/react-table";
 import React from "react";
 import { ColumnFilter } from "../../components/table/ColumnFilter";