+
+ {label&&
{label}
}
setIsOpen(!isOpen)}
>
{valueState ? (
- {valueState?.value}
+
+ {valueState.icon&&}
+ {valueState?.value}
+
+
) : (
- {placeholder}
+ {placeholder}
)}
-
- {options.map((option) => (
- - {
- console.log('click');
- setValue(e, option);
- }}
- >
- {option.value}
-
- ))}
-
+
+ {isLoading?- Loading...
: options.map((option) => (
+ - {
+ setValue(e, option);
+ }}
+ >
+ {option.icon&&}
+ {option.value}
+
+
+ ))}
+
+
);
};
diff --git a/react/components/fields/file-box.tsx b/react/components/fields/file-box.tsx
index 3ba480a..934dab6 100644
--- a/react/components/fields/file-box.tsx
+++ b/react/components/fields/file-box.tsx
@@ -1,18 +1,19 @@
-'ese client';
import Image from 'next/image';
-import { DetailedHTMLProps, FunctionComponent, InputHTMLAttributes, useState } from 'react';
+import { DetailedHTMLProps, forwardRef, InputHTMLAttributes, useState, useImperativeHandle, useRef } from 'react';
-interface FileBoxProps
- extends DetailedHTMLProps
, HTMLInputElement> {
- label?: string;
- file?: File;
-}
+type FileBoxProps = DetailedHTMLProps, HTMLInputElement>
-const FileBox: FunctionComponent = (props) => {
+const FileBox = forwardRef<{ resetFile: () => void }, FileBoxProps>((props, ref) => {
const [file, setFile] = useState<{ filename: string; url: string }>();
+ const fileRef = useRef(null);
+ useImperativeHandle(ref, () => ({
+ resetFile: () => {
+ setFile(undefined)
+ if (fileRef.current) fileRef.current.value = "";
+ }
+ }))
return (
);
-};
+});
export default FileBox;
diff --git a/react/components/fields/text-box.tsx b/react/components/fields/text-box.tsx
index 19b9ce5..ef49151 100644
--- a/react/components/fields/text-box.tsx
+++ b/react/components/fields/text-box.tsx
@@ -15,8 +15,12 @@ const TextBox: FunctionComponent = (props) => {
)}
{
+ // if(props.type==='number')
+ // console.log('number')
+ // if(props.onChange) props.onChange(e)
+ // }}
+ className={`rounded-lg border-eatly-violet-500 p-3 text-lg bg-white-text-eatly-black focus-visible:outline-eatly-violet ${props.className ? props.className : ''}`}
/>
{props.error && {props.error}
}
diff --git a/react/components/loading.tsx b/react/components/loading.tsx
index e77c61a..5b30907 100644
--- a/react/components/loading.tsx
+++ b/react/components/loading.tsx
@@ -5,7 +5,7 @@ interface LoadingProps {
}
const Loading: FunctionComponent = ({ className }) => {
- return Loading....
;
+ return Loading....
;
};
export default Loading;
diff --git a/react/components/logo/logo.tsx b/react/components/logo/logo.tsx
index 269b688..547035a 100644
--- a/react/components/logo/logo.tsx
+++ b/react/components/logo/logo.tsx
@@ -10,7 +10,7 @@ interface LogoProps {
const Logo: FunctionComponent = ({ className }) => {
return (
-
+
);
};
diff --git a/react/components/search/category-item.tsx b/react/components/search/category-item.tsx
index 5ac7649..9328fa4 100644
--- a/react/components/search/category-item.tsx
+++ b/react/components/search/category-item.tsx
@@ -1,7 +1,10 @@
+'use client'
+import { imageUrl } from '@/config';
+import { checkImageUrl } from '@/functions/checkImageUrl';
import { nexToRGB } from '@/functions/nexToRgb';
import { Category } from '@/types';
import Image from 'next/image';
-import { FunctionComponent } from 'react';
+import { FunctionComponent, useEffect, useState } from 'react';
interface CategoryItemProps {
className?: string;
@@ -16,6 +19,21 @@ const CategoryItem: FunctionComponent = ({
isSelect,
onSelectCategory,
}) => {
+ const [image, setImage] = useState('/img/no-image.svg');
+ useEffect(() => {
+ if (typeof item.image === 'string' && item.image !== "") {
+ if (item.image.startsWith('blob')) {
+ setImage(item.image);
+ }
+ else {
+ checkImageUrl(`${imageUrl}/categories/${item.image}`).then(() => {
+ if (typeof item.image === 'string') setImage(`${imageUrl}/categories/${item.image}`)
+ })
+ }
+ }
+ }, [item]);
+
+
return (
= ({
border: `${isSelect ? '3px solid ' + item.colorBg : 'none'}`,
}}
onClick={() => {
- onSelectCategory && onSelectCategory(item);
+ if (onSelectCategory) onSelectCategory(item);
}}
>
-
+
diff --git a/react/components/search/search-query.tsx b/react/components/search/search-query.tsx
index 60b8035..e953fe8 100644
--- a/react/components/search/search-query.tsx
+++ b/react/components/search/search-query.tsx
@@ -14,7 +14,6 @@ const SearchQuery: FunctionComponent
= () => {
const [isShowResults, setisShowResults] = useState(true);
const [results, setResults] = useState();
function search(text: string) {
- console.log(searchData?.type);
if (searchData?.type === 'Resturent') {
setResults(searchRestaurants(text));
}
diff --git a/react/sections/admin/category-page/category-form.tsx b/react/sections/admin/category-page/category-form.tsx
index e6c3b99..2119f5b 100644
--- a/react/sections/admin/category-page/category-form.tsx
+++ b/react/sections/admin/category-page/category-form.tsx
@@ -3,42 +3,52 @@ import BtnPrimary from '@/react/components/buttons/btn-primary';
import FileBox from '@/react/components/fields/file-box';
import TextBox from '@/react/components/fields/text-box';
import { Category } from '@/types';
-import { FunctionComponent } from 'react';
+import { FunctionComponent, useEffect, useRef, useState } from 'react';
import { useForm } from 'react-hook-form';
import ColorBox from '@/react/components/fields/color-box';
+import CategoryItem from '@/react/components/search/category-item';
interface CategoryFormProps {
className?: string;
- category?: Category;
onChange?: (category: Category) => void;
onChangeFakeImgUrl?: (fakeUrl: string) => void;
imgFakeUrl?: string;
onSave?: (category: Category) => void;
}
-const CategoryForm: FunctionComponent = ({
- className,
- onSave,
- onChange,
- onChangeFakeImgUrl,
-}) => {
+const CategoryForm: FunctionComponent = ({ className, onSave, onChange }) => {
const {
register,
handleSubmit,
setValue,
formState: { errors },
watch,
+ reset,
} = useForm({
defaultValues: {
- colorBg: '#00ff00',
+ colorBg: '#00aaff',
+ colorTitle: '#ffdd00',
},
});
+
+ const fileRef = useRef<{ resetFile: () => void }>(null);
+
+ useEffect(() => {
+ if (onChange) onChange({ ...watch() });
+ }, []);
+
+ const [category, setCategory] = useState(null);
return (
-
+
+ {category && (category?.image || category?.title) && (
+
+ )}
);
};
diff --git a/react/sections/admin/category-page/category-items-admin.tsx b/react/sections/admin/category-page/category-items-admin.tsx
new file mode 100644
index 0000000..def0283
--- /dev/null
+++ b/react/sections/admin/category-page/category-items-admin.tsx
@@ -0,0 +1,32 @@
+import BtnRemove from '@/react/components/buttons/btn-remove';
+import CategoryItem from '@/react/components/search/category-item';
+import { Category } from '@/types';
+import { FunctionComponent } from 'react';
+
+interface CategoryItemsAdminProps {
+ categories: Category[];
+ onRemove?: (category: Category) => void;
+}
+
+const CategoryItemsAdmin: FunctionComponent
= ({
+ categories,
+ onRemove,
+}) => {
+ return (
+
+ {categories.map((category) => (
+
+ {
+ if (onRemove) onRemove(category);
+ }}
+ />
+
+
+ ))}
+
+ );
+};
+
+export default CategoryItemsAdmin;
diff --git a/react/sections/admin/product-page/product-form.tsx b/react/sections/admin/product-page/product-form.tsx
new file mode 100644
index 0000000..c22e30d
--- /dev/null
+++ b/react/sections/admin/product-page/product-form.tsx
@@ -0,0 +1,64 @@
+ 'use client'
+import React, { FunctionComponent, useEffect, useState } from 'react';
+import TextBox from '@/react/components/fields/text-box';
+import BtnPrimary from '@/react/components/buttons/btn-primary';
+import FileBox from '@/react/components/fields/file-box';
+import DropDown, { Option } from '@/react/components/drop-down/drop-down';
+import { getCategoryItems } from '@/functions/shop';
+import { Category, ProductDTO, TypeDTO } from '@/types';
+import { getTypeItems } from '@/functions/shop/getTypeItems';
+import { imageUrl } from '@/config';
+import { useForm } from 'react-hook-form';
+
+
+interface ProductFormProps{
+ onSave?: (Product: ProductDTO) => void;
+ }
+
+const ProductForm: FunctionComponent = ({onSave}) => {
+ const [categories, setCategories] = useState([]);
+ const [types, setTypes] = useState([]);
+ const [isLoadingCategories, setIsLoadingCategories] = useState(false);
+ const [isLoadingTypes, setIsLoadingTypes] = useState(false);
+ useEffect(() => {
+ getCategoryItems(setCategories,setIsLoadingCategories);
+ getTypeItems(setTypes,setIsLoadingTypes)
+ }, []);
+
+ const {register, handleSubmit, setValue, reset}=useForm()
+ return (
+
+
+
+ );
+};
+
+export default ProductForm;
\ No newline at end of file
diff --git a/react/sections/admin/types-page/all-types.tsx b/react/sections/admin/types-page/all-types.tsx
index b4c5601..deeca0c 100644
--- a/react/sections/admin/types-page/all-types.tsx
+++ b/react/sections/admin/types-page/all-types.tsx
@@ -12,33 +12,35 @@ interface AllTypesProps {
}
const AllTypes: FunctionComponent = ({ types, status, removeType, selectType }) => {
- if (!status || !types) {
+ console.log(status);
+ if (!status && !types) {
return ;
}
- if (types.length < 1) {
+ if (types && types.length < 1) {
return Not fount
;
}
- if (status !== 200) return Request error
;
+ if (status !== 200) return Request error
;
return (
- {types.map((item) => (
-
- {
- selectType && selectType(item);
- }}
- />
- {
- removeType && removeType(item);
- }}
- />
-
- ))}
+ {types &&
+ types.map((item) => (
+
+ {
+ selectType && selectType(item);
+ }}
+ />
+ {
+ removeType && removeType(item);
+ }}
+ />
+
+ ))}
);
};
diff --git a/react/sections/admin/types-page/type-form.tsx b/react/sections/admin/types-page/type-form.tsx
index 4531f88..d3ba27c 100644
--- a/react/sections/admin/types-page/type-form.tsx
+++ b/react/sections/admin/types-page/type-form.tsx
@@ -20,7 +20,6 @@ const TypeForm: FunctionComponent = ({ className, type, onSave })
},
});
useEffect(() => {
- console.log(type);
setValue('id', type?.id);
setValue('title', type?.title);
setValue('bgColor', type?.bgColor);
@@ -29,7 +28,7 @@ const TypeForm: FunctionComponent = ({ className, type, onSave })