Skip to content

Commit

Permalink
Merge pull request #271 from avored/improvements
Browse files Browse the repository at this point in the history 
Improvements
  • Loading branch information
@indpurvesh
indpurvesh authored Jan 27, 2025
2 parents 3d81686 + 295ca98 commit 0789ab0
Show file tree
Hide file tree
Showing 19 changed files with 573 additions and 69 deletions.
18 changes: 8 additions & 10 deletions react-admin/src/pages/collection/CollectionCreate.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,8 @@ export const CollectionCreate = () => {
});

const submitHandler = ((data: SavableCollectionType) => {
// console.log(data)
mutate(data)
console.log(data)
// mutate(data)
})

const onNameChange = (e: React.KeyboardEvent<HTMLInputElement>) => {
Expand Down Expand Up @@ -195,14 +195,12 @@ export const CollectionCreate = () => {
);
})}


{/* todo uncomment below to enabled the add field button */}
{/*<div className="mb-4">*/}
{/* <AvoRedButton*/}
{/* label="Add"*/}
{/* onClick={(e: React.MouseEvent<HTMLButtonElement>) => addFieldButtonOnClick(e, fields.length)}*/}
{/* type={ButtonType.button}/>*/}
{/*</div>*/}
<div className="mb-4">
<AvoRedButton
label="Add"
onClick={(e: React.MouseEvent<HTMLButtonElement>) => addFieldButtonOnClick(e, fields.length)}
type={ButtonType.button}/>
</div>

<div className="flex items-center">
<button
Expand Down
152 changes: 146 additions & 6 deletions react-admin/src/pages/collection/CollectionEdit.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,39 @@
import InputField from "../../components/InputField";
import {Link, useParams} from "react-router-dom";
import {useTranslation} from "react-i18next";
import {useState} from "react";
import {useForm} from "react-hook-form";
import React, {useState} from "react";
import {Controller, useFieldArray, useForm} from "react-hook-form";
import {PutCollectionIdentifierType} from "../../types/collection/PutCollectionIdentifierType";
import {joiResolver} from "@hookform/resolvers/joi";
import EditableCollectionType from "../../types/collection/EditableCollectionType";
import {useGetCollection} from "./hooks/useGetCollection";
import {useCollectionPutSchema} from "./schemas/CollectionPutSchema";
import {useCollectionEditSchema} from "./schemas/CollectionEditSchema";
import {usePutCollectionIdentifier} from "./hooks/usePutCollectionIdentifier";
import {useUpdateCollection} from "./hooks/useUpdateCollection";
import {
CollectionFieldDataType,
CollectionFieldFieldType,
SavableCollectionType
} from "../../types/collection/CreatableCollectionType";
import _ from "lodash";
import {CollectionFieldModal} from "./CollectionFieldModal";
import {Cog8ToothIcon, TrashIcon} from "@heroicons/react/24/solid";
import AvoRedButton, {ButtonType} from "../../components/AvoRedButton";

export const CollectionEdit = (() => {
const params = useParams();
const [t] = useTranslation("global")
const collection_id = params.collection_id ?? ''
const [isCollectionFieldModalOpen, setIsCollectionFieldModalOpen] = useState<boolean>(false);
const [currentIndex, setCurrentIndex] = useState<number>(0);

const {mutate} = useUpdateCollection(collection_id);
const [t] = useTranslation("global")



const {data} = useGetCollection(collection_id)


const [isEditableIdentifier, setIsEditableIdentifier] = useState<boolean>(true)
const values = data?.data.data

Expand All @@ -32,15 +48,26 @@ export const CollectionEdit = (() => {
}
});



const {
register,
handleSubmit,
formState: {errors},
} = useForm<EditableCollectionType>({
setValue,
getValues,
control,
trigger
} = useForm<SavableCollectionType>({
resolver: joiResolver(useCollectionEditSchema(), {allowUnknown: true}),
values
})

const { fields, append, remove } = useFieldArray({
control,
name: "collection_fields", //rename fields
});

const {mutate: putCollectionIdentifierMutate} = usePutCollectionIdentifier(collection_id)


Expand All @@ -57,7 +84,27 @@ export const CollectionEdit = (() => {
setIsEditableIdentifier(true)
})

const submitHandler = ((data: EditableCollectionType) => {
const addFieldButtonOnClick = (async (e: React.MouseEvent<HTMLButtonElement>, max_index: number) => {
e.preventDefault()
append({
name: '',
identifier: '',
data_type: CollectionFieldDataType.TEXT,
field_type: CollectionFieldFieldType.TEXT,
})
await trigger("collection_fields");
setCurrentIndex(max_index);
setIsCollectionFieldModalOpen(true)
})

const deleteCollectionFieldOnClick = (e: any, index: number) => {
e.preventDefault();
remove(index);
setCurrentIndex(0);
};


const submitHandler = ((data: SavableCollectionType) => {
mutate(data)
})
return (
Expand All @@ -70,6 +117,19 @@ export const CollectionEdit = (() => {
</h1>

<form onSubmit={handleSubmit(submitHandler)}>

{_.size(fields) > 0 ? (
<CollectionFieldModal
register={register}
currentIndex={currentIndex}
getValues={getValues}
setValue={setValue}
trigger={trigger}
setIsOpen={setIsCollectionFieldModalOpen}
isOpen={isCollectionFieldModalOpen} />
) : (
<></>
)}
<div className="mb-4">
<InputField
label={t("name")}
Expand Down Expand Up @@ -112,6 +172,86 @@ export const CollectionEdit = (() => {
</div>
</div>

{fields.map((field, index) => {
return (
<div
key={field.id}
className="hover:ring-1 ring-primary-300 rounded mb-5 flex mt-5 py-3 w-full"
>
<Controller
name={`collection_fields.${index}`}
render={({field: collection_field}) => {
return (
<>
<div className="flex mt-3 w-full justify-center">
<div className="flex-1 p-3">
<div className="p-3 bg-gray-200 rounded">
<div
className="flex text-sm w-full border-gray-300 border-b py-2">
<div className="flex-1">
<span>
{collection_field.value.name}
</span>
<span
className="ml-1 text-xs text-gray-500">
({collection_field.value.identifier})
</span>
</div>
<div className="ml-auto flex items-center">
<div>
<button
type="button"
className="outline-none"
onClick={() => setIsCollectionFieldModalOpen(true)}
>
<Cog8ToothIcon className="w-5 h-5"/>
</button>
</div>
<div
onClick={(e) =>
deleteCollectionFieldOnClick(e, index)
}
className="ml-3"
>
<TrashIcon className="w-4 h-4"/>
</div>
</div>
</div>

<InputField
type="hidden"
placeholder={t("data_type")}
register={register(
`collection_fields.${index}.data_type`,
)}
/>
<InputField
type="hidden"
placeholder={t("field_type")}
register={register(
`collection_fields.${index}.field_type`,
)}
/>

</div>
</div>
</div>
</>
);
}}
control={control}
/>
</div>
);
})}

<div className="mb-4">
<AvoRedButton
label="Add"
onClick={(e: React.MouseEvent<HTMLButtonElement>) => addFieldButtonOnClick(e, fields.length)}
type={ButtonType.button}/>
</div>

<div className="flex items-center">
<button
type="submit"
Expand Down
5 changes: 3 additions & 2 deletions react-admin/src/pages/collection/hooks/useUpdateCollection.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,19 @@ import { useAxios } from '../../../hooks/useAxios'
import _ from 'lodash'
import {useNavigate} from 'react-router-dom'
import IEditableModel from "../../../types/model/IEditableModel";
import {SavableCollectionType} from "../../../types/collection/CreatableCollectionType";

export const useUpdateCollection = (role_id: string) => {
const client = useAxios();
const redirect = useNavigate();
return useMutation({
mutationFn: async (data: IEditableModel) => {
mutationFn: async (data: SavableCollectionType) => {
const url = '/collection/' + role_id;
return await client.put(url , JSON.stringify(data));
},
onSuccess: (res) => {
if (_.get(res, 'data.status') === true) {
redirect("/admin/collection")
redirect("/admin/collections")
}
}
})
Expand Down
66 changes: 62 additions & 4 deletions react-admin/src/pages/content/ContentCreate.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {ContentSidebar} from "./ContentSidebar";
import {Link, useSearchParams} from "react-router-dom";
import InputField from "../../components/InputField";
import ErrorMessage from "../../components/ErrorMessage";
import React, { useState } from "react";
import React, {useState} from "react";
import {
AvoRedContentDataType,
AvoRedContentFieldType,
Expand All @@ -15,10 +15,16 @@ import {Controller, useFieldArray, useForm} from "react-hook-form";
import {joiResolver} from "@hookform/resolvers/joi";
import {useContentCreateSchema} from "./schemas/useContentCreateSchema";
import {useStoreContent} from "./hooks/useStoreContent";
import AvoRedButton, { ButtonType } from "../../components/AvoRedButton";
import AvoRedButton, {ButtonType} from "../../components/AvoRedButton";
import _ from 'lodash';
import { ContentFieldModal } from "./ContentFieldModal";
import {ContentFieldModal} from "./ContentFieldModal";
import {Cog8ToothIcon, TrashIcon} from "@heroicons/react/24/solid";
import {useGetCollectionByIdentifier} from "./hooks/useGetCollectionByIdentifier";
import {
CollectionFieldDataType,
CollectionFieldFieldType,
SaveCollectionFieldType
} from "../../types/collection/CreatableCollectionType";

export const ContentCreate = (() => {
const [t] = useTranslation("global")
Expand All @@ -28,6 +34,57 @@ export const ContentCreate = (() => {
const collectionType: string = searchParams.get("type") as string
const {mutate, error} = useStoreContent()


const api_response_get_collection_by_identifier = useGetCollectionByIdentifier(collectionType)

const convertToContentModal = (() => {
var contentModal: SaveContentType = {
name : '',
identifier: '',
content_type: collectionType,
content_fields: []
}

_.get(api_response_get_collection_by_identifier, 'data.data.data.collection_fields', []).forEach((collection_field: SaveCollectionFieldType) => {

var data_type: AvoRedContentDataType
switch (collection_field.data_type) {
case CollectionFieldDataType.TEXT:
data_type = AvoRedContentDataType.TEXT
break;
default:
data_type = AvoRedContentDataType.TEXT
}

var field_type: AvoRedContentFieldType = AvoRedContentFieldType.TEXT;
switch (collection_field.field_type) {
case CollectionFieldFieldType.TEXT:
field_type = AvoRedContentFieldType.TEXT
break;
default:
field_type = AvoRedContentFieldType.TEXT
}


let content_field: SaveContentFieldType = {
name: collection_field.name,
identifier: collection_field.identifier,
data_type,
field_type,
field_content: {
text_value: {
text_value: ""
}
}
}
contentModal.content_fields.push(content_field)
})

return contentModal
})

const values = convertToContentModal()

const submitHandler = (async (data: SaveContentType) => {
mutate(data)
})
Expand All @@ -41,7 +98,8 @@ export const ContentCreate = (() => {
control,
trigger
} = useForm<SaveContentType>({
resolver: joiResolver(useContentCreateSchema(), {allowUnknown: true})
resolver: joiResolver(useContentCreateSchema(), {allowUnknown: true}),
values
})

const { fields, append, remove } = useFieldArray({
Expand Down
23 changes: 23 additions & 0 deletions react-admin/src/pages/content/hooks/useGetCollectionByIdentifier.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import {useQuery} from '@tanstack/react-query'
import { useAxios } from '../../../hooks/useAxios'
import _ from 'lodash'
import {useNavigate} from 'react-router-dom'

export const useGetCollectionByIdentifier = (collection_identifier: string) => {
const client = useAxios()
const redirect = useNavigate()

return useQuery({
queryKey: ['collection-identifier', collection_identifier],
queryFn: (async () => {
try {
return await client.get(`/collection-identifier/${collection_identifier}`)
} catch (error) {
if (_.get(error, 'response.status') === 401) {
localStorage.removeItem('AUTH_TOKEN')
redirect("/admin/login")
}
}
})
})
}
2 changes: 1 addition & 1 deletion react-admin/src/types/collection/CreatableCollectionType.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export type SaveCollectionFieldType = {
}

export enum CollectionFieldDataType {
TEXT = "TEXT",
TEXT = "Text",
}

export enum CollectionFieldFieldType {
Expand Down
Loading

0 comments on commit 0789ab0

Please sign in to comment.