Skip to content

Commit

Permalink
Merge pull request #223 from avored/211-improvement-with-asset-manager
Browse files Browse the repository at this point in the history 
211 improvement with asset manager
  • Loading branch information
@indpurvesh
indpurvesh authored Aug 21, 2024
2 parents 9343771 + a74e4e1 commit f37f954
Show file tree
Hide file tree
Showing 39 changed files with 1,214 additions and 283 deletions.
7 changes: 7 additions & 0 deletions react-admin/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions react-admin/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@
"@headlessui/react": "^2.0.4",
"@heroicons/react": "^2.1.1",
"@hookform/resolvers": "^3.3.4",
"@popperjs/core": "^2.11.8",
"@preline/dropdown": "^2.4.1",
"@tanstack/react-query": "^5.29.0",
"@tanstack/react-table": "^8.17.3",
"@testing-library/jest-dom": "^5.17.0",
Expand Down
6 changes: 4 additions & 2 deletions react-admin/src/components/AvoredModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,14 @@ type AvoRedModalProps = {
modal_body: ReactNode;
isOpen: boolean;
closeModal: any;
widthClass?: string
}
const AvoredModal = ({
modal_header,
modal_body,
isOpen = false,
closeModal
closeModal,
widthClass
}: AvoRedModalProps) => {

return (
Expand All @@ -30,7 +32,7 @@ const AvoredModal = ({
<div className="fixed inset-0 bg-black/25" />
</Transition.Child>

<div className="fixed inset-0 overflow-y-auto">
<div className={`fixed ${widthClass ?? 'max-w-3xl'} mx-auto inset-0 overflow-y-auto`}>
<div className="flex min-h-full items-center justify-center p-4 text-center">
<Transition.Child
as={Fragment}
Expand Down
12 changes: 7 additions & 5 deletions react-admin/src/locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,15 +79,17 @@
"model_information": "Model Information",
"components": "Components",
"field_type": "Field type",
"upload_asset": "Upload asset",
"asset_table": "Asset table",
"create_folder": "Create folder",
"rename_folder": "Rename folder",
"rename": "Rename",
"remove": "Remove",
"folder_name": "Folder name",
"locales": {
"en_label": "English",
"fr_label": "French"
},
"asset": {
"asset_table": "Asset table",
"upload_asset": "Upload Asset",
"asset_file": "Asset File"
},
"sidebar": {
"dashboard": "Dashboard",
"content_manager": "Content Manager",
Expand Down
168 changes: 77 additions & 91 deletions react-admin/src/pages/asset/AssetTable.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,129 +1,115 @@
import AvoredModal from "../../components/AvoredModal";
import React, { useState } from "react";
import InputField from "../../components/InputField";
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 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";

function AssetTable() {
const [isOpen, setIsOpen] = useState(false);
const asset_api_table_response = useAssetTable();
const assets: Array<IAssetModel> = _.get(asset_api_table_response, "data.data.data", []);
const { mutate } = useStoreAsset();
const [t] = useTranslation("global");
const [isUploadAssetModalOpen, setIsUploadAssetModalOpen] = useState(false)
const [isCreateFolderModalOpen, setIsCreateFolderModalOpen] = useState(false)
const asset_api_table_response = useAssetTable()
const assets: Array<IAssetModel> = _.get(
asset_api_table_response,
"data.data.data",
[],
)
const { mutate } = useStoreAsset()
const [t] = useTranslation("global")


const {
register,
handleSubmit,
formState: { errors }
formState: { errors },
} = useForm({
resolver: joiResolver(AssetSaveSchema, { allowUnknown: true }),
});

const onCloseModal = () => {
setIsOpen(false);
const onCloseCreateFolderModal = () => {
setIsCreateFolderModalOpen(false);
};

const openCreateFolderModal = () => {
setIsCreateFolderModalOpen(true);
};

const openModal = () => {
setIsOpen(true);

const onCloseUploadModal = () => {
setIsUploadAssetModalOpen(false);
};

const openUploadAssetModal = () => {
setIsUploadAssetModalOpen(true);
};


const submitHandler: SubmitHandler<IAssetSave> = (data: IAssetSave) => {
data.file = data.file_list ? data.file_list[0] : undefined;
onCloseModal();
onCloseUploadModal();
mutate(data);
};


return (
<div className="flex-1 bg-white">
<div className="pl-64">
<div className="p-5 flex w-full items-center">
<div className="text-primary-500 text-2xl font-semibold">
{t("asset.asset_table")}
{t("asset_table")}
</div>
<div className="ml-auto">
<button
type="button"
onClick={openUploadAssetModal}
className="bg-primary-500 rounded-md bg-black/20 px-4 py-2 text-sm font-medium text-white hover:bg-black/30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75"
>
{t("upload_asset")}
</button>
<button
type="button"
onClick={openCreateFolderModal}
className="ml-3 bg-gray-400 rounded-md bg-black/20 px-4 py-2 text-sm font-medium text-white hover:bg-black/30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75"
>
{t("create_folder")}
</button>
</div>

<button
type="button"
onClick={openModal}
className="ml-auto bg-primary-500 rounded-md bg-black/20 px-4 py-2 text-sm font-medium text-white hover:bg-black/30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75"
>
{t("create")}
</button>
<AvoredModal
isOpen={isOpen}
closeModal={onCloseModal}
modal_header={t("asset.upload_asset")}
modal_body={
<div className="text-sm text-gray-500">
<div className="text-sm text-gray-500 rounded">
<form onSubmit={handleSubmit(submitHandler)}>
<div className="py-5">
<div className="flex">
<div className="mt-3">
{t("file")}
<div className="mt-1">
<InputField
label={t("asset.asset_file")}
type="file"
name="file_list"
register={register('file_list')}
/>
</div>
</div>
</div>

<div className="flex flex-row mt-6 space-x-2 justify-evenly">
<button
type="submit"
className="w-full py-3 text-sm font-medium text-center text-white transition
duration-150 ease-linear bg-red-600 border border-red-600 rounded-lg
hover:bg-red-500"
>
{t("upload")}
</button>
<button
type="button"
onClick={onCloseModal}
className="w-full py-3 text-sm text-center text-gray-500 transition duration-150
ease-linear bg-white border border-gray-200 rounded-lg hover:bg-gray-100"
>
{t("cancel")}
</button>
</div>
</div>
</form>
</div>
</div>
}
/>
<div className="">
<AssetUploadModal
onCloseModal={onCloseUploadModal}
isOpen={isUploadAssetModalOpen}
submitHandler={submitHandler}
handleSubmit={handleSubmit}
register={register}
/>
<CreateFolderModal
onCloseModal={onCloseCreateFolderModal}
isOpen={isCreateFolderModalOpen}
/>

</div>
</div>

<div className="mt-5">
<div className="px-4 mx-auto">
<div className="flex flex-col mt-6">
<div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div className="inline-block min-w-full p-2">
<div className="grid grid-cols-6 gap-4 mx-5">
<div className="grid grid-cols-6 gap-4 mx-5">
{assets.map((asset: IAssetModel) => {
return (
<div key={asset.id} className="border rounded p-3">
<div className="h-32 mb-3">
<img
src={`http://localhost:8080/${asset.file_path}`}
className="h-32"
alt={asset.file_name}
/>
</div>
<h6 className="text-sm font-semibold">
{asset.file_name} {/* Added file name to h6 */}
</h6>
</div>
<>
<DisplayAsset key={asset.id} asset={asset} />
</>

);
})}
</div>
Expand Down
75 changes: 75 additions & 0 deletions react-admin/src/pages/asset/AssetUploadModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
import InputField from "../../components/InputField";
import AvoredModal from "../../components/AvoredModal";
import React from "react";
import {useTranslation} from "react-i18next";

type AssetUploadModalProps = {
isOpen: any,
onCloseModal: any,
handleSubmit: any,
submitHandler: any,
register: any
}

export const AssetUploadModal = (({
isOpen,
onCloseModal,
handleSubmit,
submitHandler,
register
}: AssetUploadModalProps) => {
const [t] = useTranslation("global");
return (
<>
<div className="max-w-7xl">
<AvoredModal
isOpen={isOpen}
closeModal={onCloseModal}
modal_header={t("upload_asset")}
modal_body={
<div className="text-sm text-gray-500">
<div className="text-sm text-gray-500 rounded">
<form onSubmit={handleSubmit(submitHandler)}>
<div className="">
<div className="flex">
<div className="mt-3">
<div className="mt-1">
<InputField
label={t("asset.asset_file")}
type="file"
name="file_list"
register={register('file_list')}
/>
</div>
</div>
</div>

<div className="flex pt-5 mt-6 space-x-2">
<button
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"
>
{t("upload")}
</button>
<button
type="button"
onClick={onCloseModal}
className="py-2 px-4 text-sm text-center text-gray-600 transition duration-150
ease-linear bg-white border border-gray-400 rounded-lg hover:bg-gray-200"
>
{t("cancel")}
</button>
</div>
</div>
</form>
</div>
</div>
}
/>
</div>

</>
)
})
Loading

0 comments on commit f37f954

Please sign in to comment.