From 3cc8be9c22c4a2ab83475e0b26e5b10141fb360c Mon Sep 17 00:00:00 2001
From: Purvesh <ind.purvesh@gmail.com>
Date: Sun, 17 Nov 2024 10:41:11 +1300
Subject: [PATCH] minor asset improvements

---
 react-admin/src/pages/asset/AssetTable.tsx    | 15 ++--
 .../src/pages/asset/CreateFolderModal.tsx     |  7 +-
 react-admin/src/pages/asset/DisplayAsset.tsx  | 84 +++++++++----------
 ...meFolderModal.tsx => RenameAssetModal.tsx} |  8 +-
 .../src/pages/asset/hooks/useCreateFolder.ts  |  4 +
 .../src/types/asset/CreateFolderType.ts       |  3 +-
 .../asset/rename_asset_api_handler.rs         |  5 +-
 .../handlers/asset/store_asset_api_handler.rs |  4 +-
 src/providers/avored_template_provider.rs     |  2 -
 9 files changed, 65 insertions(+), 67 deletions(-)
 rename react-admin/src/pages/asset/{RenameFolderModal.tsx => RenameAssetModal.tsx} (95%)

diff --git a/react-admin/src/pages/asset/AssetTable.tsx b/react-admin/src/pages/asset/AssetTable.tsx
index a6b5da8..1123679 100644
--- a/react-admin/src/pages/asset/AssetTable.tsx
+++ b/react-admin/src/pages/asset/AssetTable.tsx
@@ -91,15 +91,16 @@ function AssetTable() {
 
           <div className="">
             <AssetUploadModal
-              onCloseModal={onCloseUploadModal}
-              isOpen={isUploadAssetModalOpen}
-              submitHandler={submitHandler}
-              handleSubmit={handleSubmit}
-              register={register}
+                onCloseModal={onCloseUploadModal}
+                isOpen={isUploadAssetModalOpen}
+                submitHandler={submitHandler}
+                handleSubmit={handleSubmit}
+                register={register}
             />
             <CreateFolderModal
-              onCloseModal={onCloseCreateFolderModal}
-              isOpen={isCreateFolderModalOpen}
+                parent_id={asset_id}
+                onCloseModal={onCloseCreateFolderModal}
+                isOpen={isCreateFolderModalOpen}
             />
           </div>
         </div>
diff --git a/react-admin/src/pages/asset/CreateFolderModal.tsx b/react-admin/src/pages/asset/CreateFolderModal.tsx
index c2d54c8..38a9b30 100644
--- a/react-admin/src/pages/asset/CreateFolderModal.tsx
+++ b/react-admin/src/pages/asset/CreateFolderModal.tsx
@@ -12,11 +12,13 @@ import {useCreateFolder} from "./hooks/useCreateFolder";
 type CreateFolderModalProps = {
     isOpen: any,
     onCloseModal: any,
+    parent_id?: string,
 }
 
 export const CreateFolderModal = (({
-                                      isOpen,
-                                      onCloseModal,
+                                       isOpen,
+                                       onCloseModal,
+                                       parent_id
                                   }: CreateFolderModalProps) => {
     const [t] = useTranslation("global");
     const { mutate } = useCreateFolder()
@@ -24,6 +26,7 @@ export const CreateFolderModal = (({
 
     const submitHandler: SubmitHandler<CreateFolderType>  = ((data: CreateFolderType) => {
         onCloseModal()
+        data.parent_id = parent_id
         mutate(data)
     })
 
diff --git a/react-admin/src/pages/asset/DisplayAsset.tsx b/react-admin/src/pages/asset/DisplayAsset.tsx
index 53a9d76..37870ad 100644
--- a/react-admin/src/pages/asset/DisplayAsset.tsx
+++ b/react-admin/src/pages/asset/DisplayAsset.tsx
@@ -5,9 +5,10 @@ import {
   FolderPlusIcon,
 } from "@heroicons/react/24/outline";
 import { useDeleteFolder } from "./hooks/useDeleteFolder";
-import { RenameFolderModal } from "./RenameFolderModal";
+import { RenameAssetModal } from "./RenameAssetModal";
 import { useTranslation } from "react-i18next";
 import {Link} from "react-router-dom";
+import {Menu, MenuButton, MenuItem, MenuItems} from "@headlessui/react";
 
 type DisplayAssetProp = {
   asset: IAssetModel;
@@ -42,48 +43,42 @@ export const DisplayAsset = ({ asset, openFolder }: DisplayAssetProp) => {
     <>
       <div key={asset.id} className="border rounded p-3">
         <div className="mb-2 flex">
-          <RenameFolderModal
+          <RenameAssetModal
             key={asset.id}
             asset={asset}
             onCloseModal={onCloseRenameFolderModal}
             isOpen={isRenameFolderModalOpen}
           />
-          <div className="hs-dropdown relative ml-auto inline-flex">
-            <button
-              id={`hs-dropdown-folder-options-${asset.id}`}
-              type="button"
-              className="hs-dropdown-toggle hover:bg-gray-50"
-              aria-haspopup="menu"
-              aria-expanded="false"
-              aria-label="Dropdown"
-            >
+          <Menu as="div" className="relative ml-auto inline-block">
+            <MenuButton className="flex">
               <EllipsisHorizontalCircleIcon className="text-gray-400 w-6 h-6" />
-            </button>
-
-            <div
-              className="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-[38px] bg-white shadow-md rounded-lg p-1 space-y-0.5 mt-2  after:h-4 after:absolute after:-bottom-4 after:start-0 after:w-full before:h-4 before:absolute before:-top-4 before:start-0 before:w-full"
-              role="menu"
-              aria-orientation="vertical"
-              aria-labelledby="hs-dropdown-default"
+            </MenuButton>
+            <MenuItems
+              as="div"
+              className="absolute shadow-md z-30 py-1.5 rounded-md bg-white border border-gray-100 w-fit"
             >
-              <a
-                className="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100"
-                onClick={(e) =>
-                  onRemoveAssetOnClick(e, asset.asset_type, asset.id)
-                }
-                href="#"
-              >
-                {t("remove")}
-              </a>
-              <a
-                onClick={openRenameFolderModal}
-                className="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100"
-                href="#"
-              >
-                {t("rename")}
-              </a>
-            </div>
-          </div>
+              <MenuItem as="div" className="cursor-pointer">
+                <a
+                  className="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100"
+                  onClick={(e) =>
+                    onRemoveAssetOnClick(e, asset.asset_type, asset.id)
+                  }
+                  href="#"
+                >
+                  {t("remove")}
+                </a>
+              </MenuItem>
+              <MenuItem as="div" className="cursor-pointer">
+                <a
+                  onClick={openRenameFolderModal}
+                  className="flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100"
+                  href="#"
+                >
+                  {t("rename")}
+                </a>
+              </MenuItem>
+            </MenuItems>
+          </Menu>
         </div>
         <div className="flex justify-center h-40 mb-3">
           {asset.asset_type === "FOLDER" ? (
@@ -93,7 +88,7 @@ export const DisplayAsset = ({ asset, openFolder }: DisplayAssetProp) => {
           ) : (
             <>
               <img
-                src={`${backend_url}/${asset.path}`}
+                src={`${backend_url}${asset.path}`}
                 className="h-40"
                 alt={asset.name}
               />
@@ -105,19 +100,18 @@ export const DisplayAsset = ({ asset, openFolder }: DisplayAssetProp) => {
             {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>
+                  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 **/}
-                {asset.name}
+                  {/** ADD COPY ICON AND Allow them to copy the file name **/}
+                  {asset.name}
                 </div>
               </>
             )}
diff --git a/react-admin/src/pages/asset/RenameFolderModal.tsx b/react-admin/src/pages/asset/RenameAssetModal.tsx
similarity index 95%
rename from react-admin/src/pages/asset/RenameFolderModal.tsx
rename to react-admin/src/pages/asset/RenameAssetModal.tsx
index efd2072..6e447dc 100644
--- a/react-admin/src/pages/asset/RenameFolderModal.tsx
+++ b/react-admin/src/pages/asset/RenameAssetModal.tsx
@@ -10,17 +10,17 @@ import IAssetModel from "../../types/asset/IAssetModel";
 import {RenameFolderType} from "../../types/asset/RenameFolderType";
 import {useRenameFolder} from "./hooks/useRenameFolder";
 
-type RenameFolderModalProps = {
+type RenameAssetModalProps = {
     isOpen: any,
     onCloseModal: any,
     asset: IAssetModel
 }
 
-export const RenameFolderModal = (({
+export const RenameAssetModal = (({
                                        isOpen,
                                        onCloseModal,
                                        asset
-                                  }: RenameFolderModalProps) => {
+                                  }: RenameAssetModalProps) => {
     const [t] = useTranslation("global");
     const { mutate } = useRenameFolder()
 
@@ -70,7 +70,7 @@ export const RenameFolderModal = (({
                                                     duration-150 ease-linear bg-primary-600 border border-primary-600 rounded-lg
                                                     hover:bg-red-500"
                                             >
-                                                {t("create")}
+                                                {t("rename")}
                                             </button>
                                             <button
                                                 type="button"
diff --git a/react-admin/src/pages/asset/hooks/useCreateFolder.ts b/react-admin/src/pages/asset/hooks/useCreateFolder.ts
index dbecf69..7bd77c1 100644
--- a/react-admin/src/pages/asset/hooks/useCreateFolder.ts
+++ b/react-admin/src/pages/asset/hooks/useCreateFolder.ts
@@ -2,6 +2,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useAxios } from "../../../hooks/useAxios";
 import IAssetSave from "../../../types/asset/IAssetSave";
 import {CreateFolderType} from "../../../types/asset/CreateFolderType";
+import {isEmpty} from "lodash";
 
 export const useCreateFolder = () => {
     const client = useAxios();
@@ -9,6 +10,9 @@ export const useCreateFolder = () => {
 
     return useMutation({
         mutationFn: async (data: CreateFolderType) => {
+            if (isEmpty(data.parent_id)) {
+                delete data.parent_id
+            }
             return await client.post("/create-folder", data);
         },
         onSuccess: (res) => {
diff --git a/react-admin/src/types/asset/CreateFolderType.ts b/react-admin/src/types/asset/CreateFolderType.ts
index 553fa08..d02fad2 100644
--- a/react-admin/src/types/asset/CreateFolderType.ts
+++ b/react-admin/src/types/asset/CreateFolderType.ts
@@ -1,4 +1,5 @@
 export type CreateFolderType = {
-    name: String;
+    name: string;
+    parent_id?: string;
 }
 
diff --git a/src/api/handlers/asset/rename_asset_api_handler.rs b/src/api/handlers/asset/rename_asset_api_handler.rs
index fc03764..d279a04 100644
--- a/src/api/handlers/asset/rename_asset_api_handler.rs
+++ b/src/api/handlers/asset/rename_asset_api_handler.rs
@@ -36,16 +36,13 @@ pub async fn rename_asset_api_handler(
 
         return Err(Error::BadRequest(error_response));
     }
-
-
+    
     let asset_model = state.asset_service
         .find_by_id(&state.db, &asset_id)
         .await?;
     let old_asset_path = format!(".{}",asset_model.path);
     let new_asset_path = format!("/public/upload/{}", &payload.name);
 
-    println!("OLD: {old_asset_path}, new_asset: {new_asset_path}");
-
     if fs::try_exists(&old_asset_path).await? {
         fs::rename(&old_asset_path, &format!(".{}", new_asset_path)).await?;
     }
diff --git a/src/api/handlers/asset/store_asset_api_handler.rs b/src/api/handlers/asset/store_asset_api_handler.rs
index 3355394..e409589 100644
--- a/src/api/handlers/asset/store_asset_api_handler.rs
+++ b/src/api/handlers/asset/store_asset_api_handler.rs
@@ -78,9 +78,9 @@ pub async fn store_asset_api_handler(
                             .await?;
 
                         creatable_asset_model.parent_id = query_parent_id;
-                        asset_file = format!("{}/{}", parent_asset.path, new_file_name.clone());
+                        asset_file = format!("/{}/{}", parent_asset.path, new_file_name.clone());
                     } else {
-                        asset_file = format!("public/upload/{}", new_file_name.clone());
+                        asset_file = format!("/public/upload/{}", new_file_name.clone());
                     }
 
                     creatable_asset_model.name = new_file_name.clone();
diff --git a/src/providers/avored_template_provider.rs b/src/providers/avored_template_provider.rs
index 1370987..57f60c2 100644
--- a/src/providers/avored_template_provider.rs
+++ b/src/providers/avored_template_provider.rs
@@ -16,8 +16,6 @@ impl AvoRedTemplateProvider {
         reg.register_template_file("forgot-password", "./resources/mail/forgot-password.hbs")?;
         reg.register_template_file("contact-us-email", "./resources/mail/contact-us-email.hbs")?;
 
-
-        println!("config {:?}", config);
         let creds = Credentials::new(config.smtp_username, config.smtp_password);
 
         let mailer: AsyncSmtpTransport<Tokio1Executor> =