properties back end

kakhi1 · Mar 9, 2023 · f15e79b · f15e79b
1 parent 162dc87
commit f15e79b
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 11 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -5,7 +5,7 @@
   "dependencies": {
     "@mui/icons-material": "^5.8.3",
     "@pankod/refine-cli": "^1.2.0",
-    "@pankod/refine-core": "^3.18.0",
+    "@pankod/refine-core": "^3.101.0",
     "@pankod/refine-inferencer": "^2.0.2",
     "@pankod/refine-mui": "^3.30.0",
     "@pankod/refine-react-hook-form": "^3.27.1",

diff --git a/client/src/components/common/Form.tsx b/client/src/components/common/Form.tsx
@@ -1,5 +1,4 @@
-import { getTypographyUtilityClass } from "@mui/material";
-import React from "react";
+
 import {
   Box,
   Typography,
@@ -11,6 +10,9 @@ import {
   Select,
   MenuItem,
   Button,
+  fontSize,
+  fontWeight,
+  Input,
 } from "@pankod/refine-mui";
 import { FormProps } from "interfaces/common";
 import CustomButton from "./CustomButton";
@@ -39,11 +41,111 @@ const Form = ({
           }}
           onSubmit={handleSubmit(onFinishHandler)}
         >
-          <FormControl></FormControl>
+          <FormControl>
+            <FormHelperText sx={{fontWeight:500, margin:'10px 0', fontSize:16, color:'#11142d' }}> 
+             Enter property name</FormHelperText>
+            <TextField fullWidth required id="outlined-basic" color='info' variant='outlined'
+               {...register('title',{required:true})}/>
+          </FormControl>
+          <FormControl>
+            <FormHelperText sx={{fontWeight:500, margin:'10px 0', fontSize:16, color:'#11142d' }}> 
+             Enter Description</FormHelperText>
+            <TextareaAutosize 
+                minRows={5}
+                required
+                placeholder="Write Description"
+                color="info"
+                style={{width:'100%', background:'transparent', fontSize:'16px',
+                  borderColor:'rgba(0,0,0,0.23)', borderRadius:6, padding:10, color:'#919191'}}
+                  {...register('title',{required:true})}
+                />
+          </FormControl>
+          <Stack direction='row' gap={4}>
+            <FormControl sx={{flex:1}}>
+              <FormHelperText sx={{
+                fontWeight:500,
+                margin:'10px 0',
+                fontsize:16,
+                color:'#11142d'
+              }}>
+                Select Property Type
+              </FormHelperText>
+              <Select
+                variant="outlined"
+                color="info"
+                displayEmpty
+                required
+                inputProps={{'area-label':'without label'}}
+                defaultValue='aparment'
+                {...register('title',{required:true})}
+                 >
+                  <MenuItem value='apartment'>Apartment
+                  </MenuItem>
+                  <MenuItem value='villa'>Villa
+                  </MenuItem>
+                  <MenuItem value='farmhouse'>farmhouse
+                  </MenuItem>
+                  <MenuItem value='condos'>Condos
+                  </MenuItem>
+                  <MenuItem value='townhouse'>Townhouse
+                  </MenuItem>
+                  <MenuItem value='apartment'>Apartment
+                  </MenuItem>
+                  <MenuItem value='duplex'>Duplex
+                  </MenuItem>
+                  <MenuItem value='studio'>Studio
+                  </MenuItem>
+                  <MenuItem value='chalet'>Chalet
+                  </MenuItem>
+              </Select>
+            </FormControl>
+            <FormControl>
+            <FormHelperText sx={{fontWeight:500, margin:'10px 0', fontSize:16, color:'#11142d' }}> 
+             Enter property Price</FormHelperText>
+            <TextField fullWidth required id="outlined-basic" color='info' variant='outlined'
+             type="number" 
+               {...register('price',{required:true})}/>
+          </FormControl>
+          </Stack>
+          <FormControl>
+            <FormHelperText sx={{fontWeight:500, margin:'10px 0', fontSize:16, color:'#11142d' }}> 
+             Enter Location</FormHelperText>
+            <TextField fullWidth required id="outlined-basic" color='info' variant='outlined'
+               {...register('location',{required:true})}/>
+          </FormControl>
+          <Stack direction='column' gap={1} justifyContent="center" mb={2}>
+             <Stack direction="row" gap={2}>
+              <Typography color="#11142d" fontSize={16} fontWeight={500}
+              my='10px'>
+                Property Photo
+              </Typography>
+              <Button component='label' sx={{width:'fit-content',color:
+            '#2ed480', textTransForm:'capitalize', fontSize:16}}>
+                Upload *
+                <input 
+                  hidden
+                  accept="image/*"
+                  type="file"
+                  onChange={(e) =>{
+                    //@ts-ignore
+                    handleImageChange(e.target.files[0])
+                  }} 
+                />
+              </Button>
+             </Stack>
+             <Typography fontSize={14} color="#808191" 
+               sx={{wordBreak:'break-all'}}>{propertyImage?.name}</Typography>
+          </Stack>
+          <CustomButton 
+            type="submit"
+            title={formLoading ?'Submitting...':'Submit'}
+            backgroundColor="#475BE8"
+            color="#fcfcfc"
+            />
         </form>
       </Box>
     </Box>
-  );
+  )
 };
 
 export default Form;
diff --git a/client/src/pages/all-properties.tsx b/client/src/pages/all-properties.tsx
@@ -15,7 +15,7 @@ const AllProperties = () => {
         </Typography>
         <CustomButton
           title="Add Property"
-          handleClick={() => navigate("/properties/create")}
+          handleClick={() => navigate('/properties/create')}
           backgroundColor="#475be8"
           color="#fcfcfc"
           icon={<Add />}

diff --git a/client/src/pages/create-property.tsx b/client/src/pages/create-property.tsx
@@ -12,7 +12,16 @@ const CreateProperty = () => {
     register,
     handleSubmit,
   } = useForm();
-  const handleImageChange = () => {};
+        new Promise<string>((resolve, reject) => {
+            const fileReader = new FileReader();
+            fileReader.onload = () => resolve(fileReader.result as string);
+            fileReader.readAsDataURL(readFile);
+        });
+
+    reader(file).then((result: string) =>
+        setPropertyImage({ name: file?.name, url: result }),
+    );
+  };
   const onFinishHandler = () => {};
 
   return (