Merge pull request #267 from avored/228-asset-manager-support-of-folder

228 asset manager support of folder

.github/workflows/rust-clippy.yml

@@ -7,16 +7,9 @@
 # More details at https://github.com/rust-lang/rust-clippy
 # and https://rust-lang.github.io/rust-clippy/
 
-name: rust-clippy analyze
-
-on:
-  push:
-    branches: [ "main" ]
-  pull_request:
-    # The branches below must be a subset of the branches above
-    branches: [ "main" ]
-  schedule:
-    - cron: '15 3 * * 6'
+name: Rust Clippy analyze
+
+on: [push, pull_request]
 
 jobs:
   rust-clippy-analyze:

.github/workflows/rust-fmt.yml

@@ -1,4 +1,4 @@
-name: Rust check
+name: Rust fmt check
 
 on: [push, pull_request]
 

react-admin/src/locales/en.json

@@ -55,6 +55,7 @@
   "text_editor_field": "Text editor field",
   "radio_field": "Radio field",
   "checkbox_field": "Checkbox field",
+  "single_image_field": "Single image field",
   "field_content": "Field content",
   "identifier": "Identifier",
   "created_at": "Created at",
@@ -107,6 +108,7 @@
   "get_setting": "Get Settings",
   "cms_frontend_auth_token": "CMS Api bearer auth token",
   "save_setting": "Save Setting",
+  "select_asset": "Select asset",
   "generate_token": "Generate token",
   "site_name": "Site Name",
   "settings": "Settings",

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>

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

@@ -12,18 +12,21 @@ 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()
 
 
     const submitHandler: SubmitHandler<CreateFolderType>  = ((data: CreateFolderType) => {
         onCloseModal()
+        data.parent_id = parent_id
         mutate(data)
     })
 

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>
               </>
             )}

react-admin/src/pages/asset/RenameFolderModal.tsx → 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"

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

@@ -2,13 +2,17 @@ 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();
     const queryClient = useQueryClient();
 
     return useMutation({
         mutationFn: async (data: CreateFolderType) => {
+            if (isEmpty(data.parent_id)) {
+                delete data.parent_id
+            }
             return await client.post("/create-folder", data);
         },
         onSuccess: (res) => {

react-admin/src/pages/page/PageCreate.tsx

@@ -23,11 +23,16 @@ import {
 import _ from "lodash";
 import SimpleMdeReact from "react-simplemde-editor";
 import { PageFieldModal } from "./PageFieldModal";
+import {SingleImageModal} from "./SingleImageModal";
+import IAssetModel from "../../types/asset/IAssetModel";
+import AvoRedButton, {ButtonType} from "../../components/AvoRedButton";
 
 function PageCreate() {
     const [t] = useTranslation("global");
     const [isOpen, setIsOpen] = useState<boolean>(false);
     const [currentIndex, setCurrentIndex] = useState<number>(0);
+    const backend_url = import.meta.env.VITE_AVORED_BACKEND_BASE_URL;
+    const [isSingleAssetModalOpen, setisSingleAssetModalOpen] = useState(false);
 
     const {
         control,
@@ -222,6 +227,43 @@ function PageCreate() {
                         />
                     </div>
                 );
+            case AvoRedPageFieldType.SingleImage:
+                return (
+                    <div className="mb-4">
+                        <label className="text-sm text-gray-600">
+                            {t!("field_content")}
+                        </label>
+                        <div className="mt-2">
+                            <div className="flex items-center">
+                                <input
+                                    type="hidden"
+                                    {...register(
+                                        `page_fields.${index}.field_content.text_value.text_value`,
+                                    )}
+                                />
+                                <img
+                                    src={`${backend_url}${getValues(`page_fields.${index}.field_content.text_value.text_value`)}`}
+                                    className="rounded w-48 h-48"
+                                    alt={`${getValues(`page_fields.${index}.name`)}`}
+                                />
+                                <div>
+                                    <SingleImageModal
+                                        isOpen={isSingleAssetModalOpen}
+                                        onCloseModal={closeSingleAssetModal}
+                                        selectedAsset={(asset: IAssetModel) => selectedAsset(index ,asset)}
+                                    />
+                                    <AvoRedButton
+                                        onClick={singleImageButtonOnClick}
+                                        type={ButtonType.button}
+                                        label={t!("select_asset")}
+                                        className="ml-3 bg-primary-600 hover:bg-primary-500  focus:ring-primary-500"
+                                    ></AvoRedButton>
+                                </div>
+
+                            </div>
+                        </div>
+                    </div>
+                );
             default:
                 return (
                     <div className="mb-4">
@@ -235,6 +277,23 @@ function PageCreate() {
         }
     };
 
+    const selectedAsset = (index: number, selectedAsset: IAssetModel) => {
+        setValue(`page_fields.${index}.field_content.text_value.text_value`, selectedAsset.path);
+        closeSingleAssetModal();
+    }
+    const singleImageButtonOnClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        openSingleAssetModal()
+        console.log("test")
+    }
+    const openSingleAssetModal = () => {
+        setisSingleAssetModalOpen(true);
+    };
+
+    const closeSingleAssetModal = () => {
+        setisSingleAssetModalOpen(false);
+    };
     const saveAsPublishedOnClick = ((e: React.MouseEvent) => {
         e.preventDefault()
         e.stopPropagation()