add category and sub category

nullsploit01 · Jan 9, 2024 · 06168e0 · 06168e0
1 parent 30b152a
commit 06168e0
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 24 deletions.
diff --git a/ui/src/components/organisms/edit-product-modal/index.tsx b/ui/src/components/organisms/edit-product-modal/index.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, TextareaAutosize, TextField, Typography } from '@mui/material'
+import { Box, Button, TextField, Typography } from '@mui/material'
 import Grid from '@mui/material/Unstable_Grid2'
 import { Form, Formik } from 'formik'
 import { Fragment } from 'react'
@@ -20,80 +20,108 @@ const EditProductModal = () => {
       {productToEdit && (
         <CustomModal open={Boolean(productToEdit)} handleClose={closeEditProductModal}>
           <Box flexGrow={1}>
-            <Typography variant="h5">Edit {productToEdit?.name}</Typography>
+            <Typography mb={2} variant="h5">
+              Edit {productToEdit?.name}
+            </Typography>
             <Grid container spacing={2}>
               <Formik initialValues={productToEdit} onSubmit={onSubmit}>
-                {({ values, touched, handleChange }) => (
+                {({ values, dirty, handleChange }) => (
                   <Form>
                     <Grid xs={12}>
                       <TextField
-                        sx={{ p: 2 }}
+                        color="secondary"
+                        sx={{ mx: 1, mb: 1 }}
                         name="name"
                         onChange={handleChange}
                         value={values.name}
-                        placeholder="Name"
+                        label="Name"
                       />
                       <TextField
-                        sx={{ p: 2 }}
+                        color="secondary"
+                        sx={{ mx: 1, mb: 1 }}
                         type="number"
                         InputProps={{ inputProps: { min: 0 } }}
                         name="price"
                         onChange={handleChange}
                         value={values.price}
-                        placeholder="Price"
+                        label="Price"
                       />
                     </Grid>
                     <Grid xs={12}>
-                      <Box sx={{ maxWidth: 'inherit', p: 2 }}>
+                      <Box sx={{ maxWidth: 'inherit', mx: 1, mb: 1 }}>
                         <TextField
+                          color="secondary"
                           fullWidth
                           multiline
                           name="description"
-                          placeholder="Description"
+                          label="Description"
                           onChange={handleChange}
                           value={values.description}
                         />
                       </Box>
                     </Grid>
                     <Grid xs={12}>
                       <TextField
-                        sx={{ p: 2 }}
-                        name="color"
-                        placeholder="Color"
+                        color="secondary"
+                        sx={{ mx: 1, mb: 1 }}
+                        name="brand"
+                        label="Brand"
                         onChange={handleChange}
-                        value={values.color}
+                        value={values.brand}
                       />
                       <TextField
-                        sx={{ p: 2 }}
-                        name="brand"
-                        placeholder="Brand"
+                        color="secondary"
+                        sx={{ mx: 1, mb: 1 }}
+                        name="model"
+                        label="Model"
                         onChange={handleChange}
-                        value={values.brand}
+                        value={values.model}
                       />
                     </Grid>
                     <Grid xs={12}>
                       <TextField
-                        sx={{ p: 2 }}
-                        name="model"
-                        placeholder="Model"
+                        color="secondary"
+                        sx={{ mx: 1, mb: 1 }}
+                        name="category"
+                        label="Category"
                         onChange={handleChange}
-                        value={values.model}
+                        value={values.category}
                       />
                       <TextField
-                        sx={{ p: 2 }}
+                        color="secondary"
+                        sx={{ mx: 1, mb: 1 }}
+                        name="subCategory"
+                        label="Sub Category"
+                        onChange={handleChange}
+                        value={values.subCategory}
+                      />
+                    </Grid>
+                    <Grid xs={12}>
+                      <TextField
+                        color="secondary"
+                        sx={{ mx: 1, mb: 1 }}
+                        name="color"
+                        label="Color"
+                        onChange={handleChange}
+                        value={values.color}
+                      />
+
+                      <TextField
+                        color="secondary"
+                        sx={{ mx: 1, mb: 1 }}
                         type="number"
                         InputProps={{ inputProps: { min: 0 } }}
                         name="inventory"
                         onChange={handleChange}
                         value={values.inventory}
-                        placeholder="Inventory"
+                        label="Inventory"
                       />
                     </Grid>
                     <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
                       <Button onClick={closeEditProductModal} sx={{ mx: 3 }} color="secondary">
                         Cancel
                       </Button>
-                      <Button type="submit" color="secondary" variant="contained">
+                      <Button disabled={!dirty} type="submit" color="secondary" variant="contained">
                         Save
                       </Button>
                     </Box>

diff --git a/ui/src/models/product/index.ts b/ui/src/models/product/index.ts
@@ -7,5 +7,7 @@ export interface IProduct {
   color?: string
   brand?: string
   model?: string
+  category?: string
+  subCategory?: string
   inventory?: number
 }