asset manager improvements

react-admin/src/App.tsx

@@ -44,7 +44,7 @@ function App() {
                 <Route element={<AppLayout />}>
                     <Route path="/admin"   element={<Dashboard />} />
                     <Route path="/admin/logout"   element={<Logout />} />
-                    <Route path="/admin/asset"   element={<AssetTable />} />
+                    <Route path="/admin/asset/:asset_id?"   element={<AssetTable />} />
                     <Route path="/admin/component"   element={<ComponentTablePage />} />
                     <Route path="/admin/component-create"   element={<ComponentCreatePage />} />
                     <Route path="/admin/component-edit/:component_id"   element={<ComponentEditPage />} />

react-admin/src/locales/en.json

@@ -83,6 +83,7 @@
   "asset_table": "Asset table",
   "create_folder": "Create folder",
   "rename_folder": "Rename folder",
+  "asset_file": "Asset File",
   "rename": "Rename",
   "remove": "Remove",
   "folder_name": "Folder name",

react-admin/src/pages/asset/AssetTable.tsx

@@ -1,29 +1,34 @@
-import React, { useState } from "react"
-import { useAssetTable } from "./hooks/useAssetTable"
-import _ from "lodash"
-import { useStoreAsset } from "./hooks/useStoreAsset"
-import { useTranslation } from "react-i18next"
-import { AssetSaveSchema } from "./schemas/asset.save.schema"
-import { SubmitHandler, useForm } from "react-hook-form"
-import { joiResolver } from "@hookform/resolvers/joi"
-import IAssetSave from "../../types/asset/IAssetSave"
-import IAssetModel from "../../types/asset/IAssetModel"
-import { AssetUploadModal } from "./AssetUploadModal"
+import React, { useState } from "react";
+import { useAssetTable } from "./hooks/useAssetTable";
+import _ from "lodash";
+import { useStoreAsset } from "./hooks/useStoreAsset";
+import { useTranslation } from "react-i18next";
+import { AssetSaveSchema } from "./schemas/asset.save.schema";
+import { SubmitHandler, useForm } from "react-hook-form";
+import { joiResolver } from "@hookform/resolvers/joi";
+import IAssetSave from "../../types/asset/IAssetSave";
+import IAssetModel from "../../types/asset/IAssetModel";
+import { AssetUploadModal } from "./AssetUploadModal";
 import { DisplayAsset } from "./DisplayAsset";
 import { CreateFolderModal } from "./CreateFolderModal";
+import {useParams} from "react-router-dom";
 
 function AssetTable() {
-  const [isUploadAssetModalOpen, setIsUploadAssetModalOpen] = useState(false)
-  const [isCreateFolderModalOpen, setIsCreateFolderModalOpen] = useState(false)
-  const asset_api_table_response = useAssetTable()
+  const [isUploadAssetModalOpen, setIsUploadAssetModalOpen] = useState(false);
+  const [isCreateFolderModalOpen, setIsCreateFolderModalOpen] = useState(false);
+
+  const params = useParams()
+  const asset_id: string = params.asset_id ?? ''
+
+  const asset_api_table_response = useAssetTable(asset_id);
   const assets: Array<IAssetModel> = _.get(
     asset_api_table_response,
     "data.data.data",
     [],
-  )
-  const { mutate } = useStoreAsset()
-  const [t] = useTranslation("global")
+  );
 
+  const { mutate } = useStoreAsset(asset_id);
+  const [t] = useTranslation("global");
 
   const {
     register,
@@ -33,6 +38,11 @@ function AssetTable() {
     resolver: joiResolver(AssetSaveSchema, { allowUnknown: true }),
   });
 
+  const openFolder = (e: React.MouseEvent<HTMLElement>, asset_id: string) => {
+    e.preventDefault();
+    console.log(asset_id);
+  };
+
   const onCloseCreateFolderModal = () => {
     setIsCreateFolderModalOpen(false);
   };
@@ -41,7 +51,6 @@ function AssetTable() {
     setIsCreateFolderModalOpen(true);
   };
 
-
   const onCloseUploadModal = () => {
     setIsUploadAssetModalOpen(false);
   };
@@ -50,14 +59,12 @@ function AssetTable() {
     setIsUploadAssetModalOpen(true);
   };
 
-
   const submitHandler: SubmitHandler<IAssetSave> = (data: IAssetSave) => {
     data.file = data.file_list ? data.file_list[0] : undefined;
     onCloseUploadModal();
     mutate(data);
   };
 
-
   return (
     <div className="flex-1 bg-white">
       <div className="pl-64">
@@ -91,10 +98,9 @@ function AssetTable() {
               register={register}
             />
             <CreateFolderModal
-                onCloseModal={onCloseCreateFolderModal}
-                isOpen={isCreateFolderModalOpen}
+              onCloseModal={onCloseCreateFolderModal}
+              isOpen={isCreateFolderModalOpen}
             />
-
           </div>
         </div>
 
@@ -106,10 +112,11 @@ function AssetTable() {
                   <div className="grid grid-cols-6  gap-4 mx-5">
                     {assets.map((asset: IAssetModel) => {
                       return (
-                          <>
-                            <DisplayAsset key={asset.id} asset={asset} />
-                          </>
-
+                        <DisplayAsset
+                          openFolder={openFolder}
+                          key={asset.id}
+                          asset={asset}
+                        />
                       );
                     })}
                   </div>

react-admin/src/pages/asset/AssetUploadModal.tsx

@@ -35,7 +35,7 @@ export const AssetUploadModal = (({
                                             <div className="mt-3">
                                                 <div className="mt-1">
                                                     <InputField
-                                                        label={t("asset.asset_file")}
+                                                        label={t("asset_file")}
                                                         type="file"
                                                         name="file_list"
                                                         register={register('file_list')}
@@ -49,7 +49,7 @@ export const AssetUploadModal = (({
                                                 type="submit"
                                                 className="px-4 py-2 text-sm font-medium text-center text-white transition
                                                     duration-150 ease-linear bg-primary-600 border border-primary-600 rounded-lg
-                                                    hover:bg-red-500"
+                                                    hover:bg-primary-500"
                                             >
                                                 {t("upload")}
                                             </button>

react-admin/src/pages/asset/CreateFolderModal.tsx

@@ -64,7 +64,7 @@ export const CreateFolderModal = (({
                                                 type="submit"
                                                 className="px-4 py-2 text-sm font-medium text-center text-white transition
                                                     duration-150 ease-linear bg-primary-600 border border-primary-600 rounded-lg
-                                                    hover:bg-red-500"
+                                                    hover:bg-primary-500"
                                             >
                                                 {t("create")}
                                             </button>

react-admin/src/pages/asset/DisplayAsset.tsx

@@ -7,11 +7,13 @@ import {
 import { useDeleteFolder } from "./hooks/useDeleteFolder";
 import { RenameFolderModal } from "./RenameFolderModal";
 import { useTranslation } from "react-i18next";
+import {Link} from "react-router-dom";
 
 type DisplayAssetProp = {
   asset: IAssetModel;
+  openFolder: any
 };
-export const DisplayAsset = ({ asset }: DisplayAssetProp) => {
+export const DisplayAsset = ({ asset, openFolder }: DisplayAssetProp) => {
   const [isRenameFolderModalOpen, setIsRenameFolderModalOpen] = useState(false);
   const [t] = useTranslation("global");
 
@@ -98,11 +100,27 @@ export const DisplayAsset = ({ asset }: DisplayAssetProp) => {
             </>
           )}
         </div>
-        <div className="flex justify-center bg-gray-100 text-xs text-slate-900 py-2 px-1 rounded">
-          <div className="">
-            {asset.name}
+        <div className="flex justify-center  text-xs text-slate-900">
+          <div className="w-full items-center">
+            {asset.asset_type === "FOLDER" ? (
+              <>
+                <button
+                    onClick={e => openFolder(e, asset.id)}
+                    className="bg-gray-100 py-2 px-1 rounded w-full hover:bg-gray-200" type="button">
+                  <Link to={`/admin/asset/${asset.id}`}>
+                    {asset.name}
+                  </Link>
+                </button>
+              </>
+            ) : (
+              <>
+                <div className="text-ellipsis w-full overflow-hidden bg-gray-100 py-2 px-1 rounded">
 
-            {/** ADD COPY ICON AND Allow them to copy the file name **/}
+                {/** ADD COPY ICON AND Allow them to copy the file name **/}
+                {asset.name}
+                </div>
+              </>
+            )}
           </div>
         </div>
       </div>

react-admin/src/pages/asset/hooks/useAssetTable.ts

@@ -3,14 +3,15 @@ import { useAxios } from '../../../hooks/useAxios'
 import _ from 'lodash'
 import {useNavigate} from 'react-router-dom'
 
-export const useAssetTable = () => {
+export const useAssetTable = (asset_id: string) => {
     const client = useAxios();
     const redirect = useNavigate();
     return useQuery({
-        queryKey: ['asset-table'],
+        queryKey: ['asset-table', {asset_id}],
         queryFn: (async () => {
             try {
-                return await client.get("/asset")
+                const assetUrl: string = _.isEmpty(asset_id) ? '/asset' : '/asset?parent_id=' + asset_id;
+                return await client.get(assetUrl)
             } catch (error) {
                 if (_.get(error, 'response.status') === 401) {
                     localStorage.removeItem('AUTH_TOKEN')

react-admin/src/pages/asset/hooks/useStoreAsset.ts

@@ -1,14 +1,16 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useAxios } from "../../../hooks/useAxios";
 import IAssetSave from "../../../types/asset/IAssetSave";
+import _ from "lodash";
 
-export const useStoreAsset = () => {
+export const useStoreAsset = (parent_id: string) => {
     const client = useAxios();
     const queryClient = useQueryClient();
 
     return useMutation({
         mutationFn: async (data: IAssetSave) => {
-            return await client.post("/asset", data, {
+            const assetUrl: string = _.isEmpty(parent_id) ? '/asset' : '/asset?parent_id=' + parent_id;
+            return await client.post(assetUrl, data, {
                 headers: {
                     "Content-Type": "multipart/form-data; boundary=----",
                     Authorization: "Bearer " + localStorage.getItem("AUTH_TOKEN"),

src/api/handlers/asset/store_asset_api_handler.rs

@@ -75,6 +75,7 @@ pub async fn store_asset_api_handler(
                             .find_by_id(&state.db, &query_parent_id)
                             .await?;
 
+                        creatable_asset_model.parent_id = query_parent_id;
                         asset_file = format!("{}/{}", parent_asset.path, new_file_name.clone());
                     } else {
                         asset_file = format!("public/upload/{}", new_file_name.clone());