+ save as button | fix image object-fit

src/actions/actionCatsFind.js

@@ -16,7 +16,7 @@ export const actionCatsFind = ({ text = "", limit = 7, skip = 0, promiseName = "
                     }`,
             {
                 query: JSON.stringify([
-                    { name__contains: text, _id__contains: text },
+                    { name__icontains: text, _id__icontains: text },
                     {
                         limit: !!limit ? limit : 5,
                         skip,

src/actions/actionGoodsFind.js

@@ -28,8 +28,8 @@ export function* goodsFindWorker(action) {
                 {
                     query: JSON.stringify([
                         {
-                            name__contains: text,
-                            description__contains: text,
+                            name__icontains: text,
+                            description__icontains: text,
                         },
                         {
                             limit: !!limit ? limit : 5,

src/actions/actionOrdersFind.js

@@ -15,7 +15,7 @@ export const actionOrdersFind = ({ text = "", limit = 7, skip = 0, promiseName =
                     }`,
             {
                 query: JSON.stringify([
-                    { owner__username__contains: text, _id__contains: text, status__contains: text, status },
+                    { owner__username__icontains: text, _id__icontains: text, status__icontains: text, status },
                     {
                         limit: !!limit ? limit : 5,
                         skip,

src/actions/actionUsersFind.js

@@ -16,8 +16,8 @@ export const actionUsersFind = ({ text = "", limit = 0, skip = 0, promiseName =
             {
                 query: JSON.stringify([
                     {
-                        username__contains: text,
-                        _id__contains: text,
+                        username__icontains: text,
+                        _id__icontains: text,
                     },
                     {
                         limit: !!limit ? limit : 100,

src/components/CartPage/CartItem.js

@@ -53,7 +53,7 @@ export const CartItem = ({ order, onDeleteClick, onChange }) => {
                     <IconButton onClick={() => handleChange(countInput - 1)}>
                         <AiOutlineMinus />
                     </IconButton>
-                    <Typography>{countInput}</Typography>
+                    <Typography>{countInput === amount ? `${countInput}(max)` : countInput}</Typography>
                     <IconButton onClick={() => handleChange(countInput + 1)}>
                         <AiOutlinePlus />
                     </IconButton>

src/components/CartPage/index.js

@@ -63,7 +63,7 @@ export const CartPage = ({ onConfirm, promiseStatus, serverErrors, onDeleteClick
     return (
         <Box className="CartPage" component="form" onSubmit={formik.handleSubmit}>
             <Stack spacing={2}>
-                <Typography>Оформлення замовлення</Typography>
+                <Typography variant="h4">Оформлення замовлення</Typography>
                 <Table className="table">
                     <TableBody>
                         {Object.entries(cart).map(([_id, order]) => (

src/components/DashboardPage/ProfileForm/index.js

@@ -32,11 +32,13 @@ export const ProfileForm = ({ profile = {}, promiseStatus, onProfileSave, server
         initialValues: {
             username: "",
             password: "",
-            repeatPassword: "",
+            name: "",
+            nick: "",
         },
         validationSchema: profileSchema,
         validateOnChange: true,
         onSubmit: () => {
+            console.log(formik.values);
             onProfileSave(formik.values);
             setPromiseTimeOut(setTimeout(() => formik.setSubmitting(false), 3000));
         },
@@ -50,7 +52,9 @@ export const ProfileForm = ({ profile = {}, promiseStatus, onProfileSave, server
     }, []);
 
     useEffect(() => {
-        formik.setValues(profile);
+        formik.setFieldValue("username", profile?.username || "");
+        formik.setFieldValue("nick", profile?.nick || "");
+        formik.setFieldValue("name", profile?.name || "");
 
         return () => {
             promiseTimeOut && clearTimeout(promiseTimeOut);
@@ -68,6 +72,7 @@ export const ProfileForm = ({ profile = {}, promiseStatus, onProfileSave, server
                 severity: "success",
                 message: "Готово",
             });
+            setEditMod(false);
         }
         if (promiseStatus === "REJECTED") {
             const errorMessage = (serverErrors ? [].concat(serverErrors) : []).reduce((prev, curr) => prev + "\n" + curr.message, "");

src/components/admin/AdminCategoryPage/CategoryForm.js

@@ -33,6 +33,7 @@ const CategoryForm = ({
     const [subCatList, setSubCatList] = useState([]);
     const [parentList, setParentList] = useState([]);
     const { setAlert } = useContext(UIContext);
+    const [isNew, setIsNew] = useState(false);
     const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
     const [promiseTimeOut, setPromiseTimeOut] = useState(null);
     const navigate = useNavigate();
@@ -45,7 +46,7 @@ const CategoryForm = ({
         validateOnChange: true,
         onSubmit: () => {
             let categoryToSave = {};
-            category?._id && (categoryToSave._id = category?._id);
+            !isNew && category?._id && (categoryToSave._id = category?._id);
             categoryToSave.name = formik.values.name;
             inputGoods && (categoryToSave.goods = inputGoods);
             inputParent && (categoryToSave.parent = inputParent._id ? inputParent : null);
@@ -191,11 +192,21 @@ const CategoryForm = ({
             </Box>
             <Stack direction="row" sx={{ mt: 3 }} justifyContent="flex-end" spacing={1}>
                 {!!category._id && (
-                    <Button variant="contained" onClick={() => setIsDeleteModalOpen(true)} color="error">
-                        Видалити
-                    </Button>
+                    <>
+                        <Button variant="contained" onClick={() => setIsDeleteModalOpen(true)} disabled={formik.isSubmitting} color="error">
+                            Видалити
+                        </Button>
+                        <Button
+                            variant="contained"
+                            onClick={() => setIsNew(true)}
+                            disabled={!formik.isValid || formik.isSubmitting}
+                            type="submit"
+                        >
+                            Зберегти як новий
+                        </Button>
+                    </>
                 )}
-                <Button variant="contained" disabled={!formik.isValid || formik.isSubmitting} type="submit">
+                <Button variant="contained" onClick={() => setIsNew(false)} disabled={!formik.isValid || formik.isSubmitting} type="submit">
                     Зберегти
                 </Button>
             </Stack>

src/components/admin/AdminGoodPage/GoodForm.js

@@ -45,6 +45,7 @@ export const GoodForm = ({
     const [inputCategories, setInputCategories] = useState([]);
     const [inputImages, setInputImages] = useState([]);
     const { setAlert } = useContext(UIContext);
+    const [isNew, setIsNew] = useState(false);
     const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
     const [promiseTimeOut, setPromiseTimeOut] = useState(null);
     const navigate = useNavigate();
@@ -60,7 +61,7 @@ export const GoodForm = ({
         validateOnChange: true,
         onSubmit: () => {
             let goodToSave = {};
-            good?._id && (goodToSave._id = good._id);
+            !isNew && good?._id && (goodToSave._id = good._id);
             goodToSave.name = formik.values.name;
             goodToSave.description = formik.values.description;
             goodToSave.price = +formik.values.price;
@@ -228,11 +229,21 @@ export const GoodForm = ({
 
             <Stack direction="row" sx={{ mt: 3 }} justifyContent="flex-end" spacing={1}>
                 {!!good._id && (
-                    <Button variant="contained" onClick={() => setIsDeleteModalOpen(true)} color="error">
-                        Видалити
-                    </Button>
+                    <>
+                        <Button variant="contained" onClick={() => setIsDeleteModalOpen(true)} disabled={formik.isSubmitting} color="error">
+                            Видалити
+                        </Button>
+                        <Button
+                            variant="contained"
+                            onClick={() => setIsNew(true)}
+                            disabled={!formik.isValid || formik.isSubmitting}
+                            type="submit"
+                        >
+                            Зберегти як новий
+                        </Button>
+                    </>
                 )}
-                <Button variant="contained" disabled={!formik.isValid || formik.isSubmitting} type="submit">
+                <Button variant="contained" onClick={() => setIsNew(false)} disabled={!formik.isValid || formik.isSubmitting} type="submit">
                     Зберегти
                 </Button>
             </Stack>

src/components/admin/AdminOrderPage/OrderForm.js

@@ -28,6 +28,7 @@ export const OrderForm = ({
     const { setAlert } = useContext(UIContext);
     const goodList = useSelector((state) => state.promise?.goodsAll?.payload || []);
     const [inputOrderGoods, setInputOrderGoods] = useState([]);
+    const [isNew, setIsNew] = useState(false);
     const [promiseTimeOut, setPromiseTimeOut] = useState(null);
     const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
     const navigate = useNavigate();
@@ -36,7 +37,7 @@ export const OrderForm = ({
         initialValues: {},
         onSubmit: () => {
             let orderToSave = {};
-            order?._id && (orderToSave._id = order._id);
+            !isNew && order?._id && (orderToSave._id = order._id);
             orderToSave.status = inputStatus;
             inputUser && (orderToSave.owner = inputUser);
             orderToSave.orderGoods = inputOrderGoods;
@@ -139,11 +140,31 @@ export const OrderForm = ({
                     </Box>
                     <Stack direction="row" sx={{ mt: 3 }} justifyContent="flex-end" spacing={1}>
                         {!!order._id && (
-                            <Button variant="contained" onClick={() => setIsDeleteModalOpen(true)} color="error">
-                                Видалити
-                            </Button>
+                            <>
+                                <Button
+                                    variant="contained"
+                                    onClick={() => setIsDeleteModalOpen(true)}
+                                    disabled={formik.isSubmitting}
+                                    color="error"
+                                >
+                                    Видалити
+                                </Button>
+                                <Button
+                                    variant="contained"
+                                    onClick={() => setIsNew(true)}
+                                    disabled={!formik.isValid || formik.isSubmitting}
+                                    type="submit"
+                                >
+                                    Зберегти як новий
+                                </Button>
+                            </>
                         )}
-                        <Button variant="contained" disabled={formik.isSubmitting} type="submit">
+                        <Button
+                            variant="contained"
+                            onClick={() => setIsNew(false)}
+                            disabled={!formik.isValid || formik.isSubmitting}
+                            type="submit"
+                        >
                             Зберегти
                         </Button>
                     </Stack>

src/components/admin/AdminUserPage.js/UserForm.js

@@ -50,14 +50,10 @@ export const UserForm = ({
     const { setAlert } = useContext(UIContext);
     const [promiseTimeOut, setPromiseTimeOut] = useState(null);
     const [showPassword, setShowPassword] = useState(false);
-
+    const [isNew, setIsNew] = useState(false);
     const [acl, setAcl] = useState([]);
     const navigate = useNavigate();
 
-    useEffect(() => {
-        console.log(promiseStatus);
-    }, [promiseStatus]);
-
     const formik = useFormik({
         initialValues: {
             name: "",
@@ -70,12 +66,13 @@ export const UserForm = ({
         onSubmit: () => {
             let userToSave = {};
             userToSave = formik.values;
-            user?._id && (userToSave._id = user._id);
+            !isNew && user?._id && (userToSave._id = user._id);
             userToSave.acl = acl.map(({ value }) => value);
             avatar ? (userToSave.avatar = avatar) : delete userToSave.avatar;
             onSaveClick && onSaveClick();
             onSave(userToSave);
             setPromiseTimeOut(setTimeout(() => formik.setSubmitting(false), 3000));
+            setIsNew(false);
         },
     });
 
@@ -261,7 +258,17 @@ export const UserForm = ({
             </Grid>
 
             <Stack direction="row" sx={{ mt: 3 }} justifyContent="flex-end" spacing={1}>
-                <Button variant="contained" disabled={!formik.isValid || formik.isSubmitting} type="submit">
+                {!!user._id && (
+                    <Button
+                        variant="contained"
+                        onClick={() => setIsNew(true)}
+                        disabled={!formik.isValid || formik.isSubmitting}
+                        type="submit"
+                    >
+                        Зберегти як новий
+                    </Button>
+                )}
+                <Button variant="contained" onClick={() => setIsNew(false)} disabled={!formik.isValid || formik.isSubmitting} type="submit">
                     Зберегти
                 </Button>
             </Stack>

src/components/common/GoodCard/index.js

@@ -6,18 +6,25 @@ import defaultGoodImage from "../../../images/default-good-image.png";
 import { actionCartAdd } from "../../../reducers";
 import { CBuyButton } from "../BuyButton";
 
+const styles = {
+    media: {
+        height: 250,
+        objectFit: "contain",
+    },
+};
+
 const GoodCard = ({ good = {} }) => {
     return (
         <Card className="GoodCard">
             <CardActionArea component={Link} to={`/good/${good._id}`}>
                 <CardMedia
                     component="img"
-                    height="200"
                     image={`${backendURL}${mediaURL}${good.images ? good.images[0]?.url : defaultGoodImage}`}
                     onError={({ currentTarget }) => {
                         currentTarget.onerror = null;
                         currentTarget.src = defaultGoodImage;
                     }}
+                    style={styles.media}
                 />
                 <CardContent>
                     <Typography gutterBottom variant="body1" component="div" color="#1C1B1F" textAlign="left">

src/index.scss

@@ -159,6 +159,7 @@
                                 & img {
                                     width: 100%;
                                     max-height: 100px;
+                                    object-fit: contain;
                                 }
                                 &:hover {
                                     background: #f1f2f4;
@@ -319,6 +320,7 @@
                             & img {
                                 width: 100%;
                                 max-height: 100px;
+                                object-fit: contain;
                             }
                             &:hover {
                                 background: #f1f2f4;
@@ -353,6 +355,10 @@
 
         & .GoodPage {
             padding: 10px;
+            & img {
+                max-height: 500px;
+                object-fit: contain;
+            }
             & .content {
                 text-align: left;
             }

src/reducers/feedReducer.js

@@ -27,7 +27,7 @@ const actionFeedClear = () => ({ type: "FEED_CLEAR" });
 const actionFeedGoods = ({ skip = 0, orderBy = "_id" }) => actionGoodsAll({ skip, limit: 10, promiseName: "feedGoodsAll", orderBy });
 
 const actionFeedCategoryGoods = ({ skip = 0, orderBy = "_id", category }) =>
-    actionCategoryGoods({ skip, limit: 10, promiseName: "feedCategoryGoods", orderBy, category });
+    actionCategoryGoods({ skip, limit: 8, promiseName: "feedCategoryGoods", orderBy, category });
 
 const actionFeedGoodsFind = ({ skip = 0, text = "", orderBy = "_id" }) =>
     actionGoodsFind({ skip, limit: 10, promiseName: "feedGoodsFind", text, orderBy });