fixBugs modal

src/components/Fields/ImageField.tsx

@@ -1,64 +1,61 @@
-import React, { Component, CSSProperties } from 'react'
-import PropTypes from 'prop-types'
-import config from '../../config';
-import ModalComponent from '../Modal';
-import { ButtonToolbar, Button } from 'reactstrap'
-import defaultImage from '@/assets/img/default-img.png'
+import React, { Component, CSSProperties } from "react";
+import PropTypes from "prop-types";
+import config from "../../config";
+import ModalComponent from "../Modal";
+import { ButtonToolbar, Button } from "reactstrap";
+import defaultImage from "@/assets/img/default-img.png";
 
 interface IProps {
-  defaultImg: any
-  validModal: any
-  image: any
-  onChange: any
-  label: string
-  alt: string
-  alt2: string
+  defaultImg: any;
+  validModal: any;
+  image: any;
+  onChange: any;
+  label: string;
+  alt: string;
+  alt2: string;
 }
 
 interface IState {
-  tmp_file?: any
-  tmp_imagePreviewUrl?: any
-  imagePreviewUrl: any
-  file: any
-  error: string
-  showModal: boolean
+  tmp_file?: any;
+  tmp_imagePreviewUrl?: any;
+  imagePreviewUrl: any;
+  file: any;
+  error: string;
+  showModal: boolean;
 }
 
 class ImageField extends Component<IProps, IState> {
   constructor(props) {
-    super(props)
+    super(props);
     this.state = {
       imagePreviewUrl: this.props.defaultImg || defaultImage,
       file: null,
-      error: '',
+      error: "",
       tmp_file: null,
-      showModal: false
-    }
+      showModal: false,
+    };
   }
 
-  componentWillMount() {
-
-  }
+  componentWillMount() {}
 
   componentDidMount() {
     if (this.props.image) {
       this.setState({
         imagePreviewUrl: config.apiUrl + this.props.image,
-      })
+      });
     }
   }
 
   componentWillReceiveProps(nextProps) {
     if (nextProps.image !== this.props.image) {
-
       if (nextProps.image) {
         this.setState({
           imagePreviewUrl: config.apiUrl + nextProps.image,
-        })
+        });
       } else {
         this.setState({
           imagePreviewUrl: this.props.defaultImg || defaultImage,
-        })
+        });
       }
     }
   }
@@ -67,49 +64,43 @@ class ImageField extends Component<IProps, IState> {
     this.setState({
       imagePreviewUrl: this.props.defaultImg || defaultImage,
       file: null,
-      error: ''
-    })
-  }
-
-
+      error: "",
+    });
+  };
 
   onChange = (e) => {
     const { validModal } = this.props;
     e.preventDefault();
     this.setState({
-      error: ''
-    })
+      error: "",
+    });
     let reader = new FileReader();
     let file = e.target.files[0];
 
-
-
     var allowedExtensions = /(\.jpg|\.jpeg|\.png|\.svg|\.webp)$/i;
     if (!allowedExtensions.exec(file.name)) {
       this.setState({
-        error: 'Зображення можна завантажувати з наступними розширеннями .jpeg/.jpg/.png/.svg/.webp'
-      })
+        error:
+          "Зображення можна завантажувати з наступними розширеннями .jpeg/.jpg/.png/.svg/.webp",
+      });
       return false;
     }
 
-
     if (file.size / 1024 >= 500) {
       this.setState({
-        error: 'Зображення не повинно перевищувати 500kB'
-      })
+        error: "Зображення не повинно перевищувати 500kB",
+      });
       return false;
     }
 
     reader.onloadend = () => {
-
-
       var img = new Image();
       img.onload = () => {
         // alert(img.width + 'x' + img.height);
         if (img.width <= 200 && img.height <= 200) {
           this.setState({
             file: file,
-            imagePreviewUrl: reader.result
+            imagePreviewUrl: reader.result,
           });
           if (this.props.onChange) {
             this.props.onChange(file);
@@ -117,26 +108,23 @@ class ImageField extends Component<IProps, IState> {
         } else {
           if (validModal) {
             this.setState({
-              error: 'Розмір зображення не більший 200px/200px',
+              error: "Розмір зображення не більший 200px/200px",
               tmp_file: file,
               tmp_imagePreviewUrl: reader.result,
               showModal: true,
-            })
+            });
           } else {
             this.setState({
-              error: 'Розмір зображення не більший 200px/200px',
-            })
+              error: "Розмір зображення не більший 200px/200px",
+            });
           }
-
         }
-
-      }
+      };
       img.src = reader.result as string;
+    };
 
-    }
-
-    reader.readAsDataURL(file)
-  }
+    reader.readAsDataURL(file);
+  };
 
   clickBtn = () => {
     const { tmp_file, tmp_imagePreviewUrl } = this.state;
@@ -144,49 +132,80 @@ class ImageField extends Component<IProps, IState> {
       file: tmp_file,
       imagePreviewUrl: tmp_imagePreviewUrl,
       showModal: false,
-      error: ''
+      error: "",
     });
     if (this.props.onChange) {
       this.props.onChange(tmp_file);
     }
-  }
+  };
 
   render() {
     let { label, alt, alt2, defaultImg } = this.props;
     const { showModal } = this.state;
-    const styles = { width: '80px', height: '', objectFit: 'cover' };
+    const styles = { width: "80px", height: "", objectFit: "cover" };
 
     if (defaultImg) {
-      styles.width = '50px';
-      styles.height = '50px';
+      styles.width = "100px";
+      styles.height = "100px";
     }
 
     return (
       <div className="form__form-group">
-        <ModalComponent show={showModal} toggle={() => this.setState({ showModal: false })}>
+        <ModalComponent
+          show={showModal}
+          toggle={() =>
+            this.setState({
+              showModal: false,
+            })
+          }
+        >
           <p>{this.state.error}</p>
           <p>Ви бажаєте автоматично зменшити та завантажити фото?</p>
           <ButtonToolbar className="form__button-toolbar">
-            <Button color="primary" type="button" onClick={this.clickBtn}>Так</Button>
-            <Button onClick={() => this.setState({ showModal: false })}>Ні</Button>
+            <Button color="primary" type="button" onClick={this.clickBtn}>
+              Так
+            </Button>
+            <Button onClick={() => this.setState({ showModal: false })}>
+              Ні
+            </Button>
           </ButtonToolbar>
         </ModalComponent>
-        {label ? <span className="form__form-group-label">{label}</span> : null}
+        {label ? (
+          <span
+            className="form__form-group-label"
+            style={{ marginBottom: 10, color: "#7F7F7F" }}
+          >
+            {label}
+          </span>
+        ) : null}
         <div className="form__form-group-field">
           <div className="form__form-group-input-wrap">
-            <label style={{ cursor: 'pointer' }}>
-              <img style={styles as CSSProperties} src={this.state.imagePreviewUrl} alt='' />
-              <input style={{ display: 'none' }} type='file' onChange={this.onChange} />
+            <label style={{ cursor: "pointer" }}>
+              <img
+                style={styles as CSSProperties}
+                src={this.state.imagePreviewUrl}
+                alt=""
+              />
+              <input
+                style={{ display: "none" }}
+                type="file"
+                onChange={this.onChange}
+              />
             </label>
-            {alt ? <p style={{ padding: 0, margin: 0, fontSize: '10px' }}>{alt}</p> : null}
-            {alt2 ? <p style={{ padding: 0, margin: 0, fontSize: '10px' }}>{alt2}</p> : null}
-            {this.state.error ? <span className="form__form-group-error">{this.state.error}</span> : null}
+            {alt ? (
+              <p style={{ padding: 0, margin: 0, fontSize: "10px" }}>{alt}</p>
+            ) : null}
+            {alt2 ? (
+              <p style={{ padding: 0, margin: 0, fontSize: "10px" }}>{alt2}</p>
+            ) : null}
+            {this.state.error ? (
+              <span className="form__form-group-error">{this.state.error}</span>
+            ) : null}
           </div>
         </div>
       </div>
-    )
+    );
   }
 }
 
-
-export default ImageField
+export default ImageField;

src/components/Fields/InputField.tsx

@@ -1,48 +1,63 @@
-import React, { useState } from 'react'
-import EyeIcon from 'mdi-react/EyeIcon';
+import React, { useState } from "react";
+import EyeIcon from "mdi-react/EyeIcon";
 import { UseFormRegisterReturn } from "react-hook-form";
 
 interface IProps {
-  register: UseFormRegisterReturn | any
-  type?: 'password' | 'text'
-  label: string
-  placeholder?: string
-  error?: string
-  warning?: string
+  register: UseFormRegisterReturn | any;
+  type?: "password" | "text";
+  label: string;
+  placeholder?: string;
+  error?: string;
+  warning?: string;
 }
 
-export const InputField = ({ type = 'text', ...props }: IProps) => {
-  const [showPassword, setShowPassword] = useState<boolean>(true)
+export const InputField = ({ type = "text", ...props }: IProps) => {
+  const [showPassword, setShowPassword] = useState<boolean>(true);
 
-  if (type === 'password') {
+  if (type === "password") {
     return (
       <div className="form__form-group">
-        {props.label && <span className="form__form-group-label">{props.label}</span>}
-        <div className="form__form-group-field" style={{ borderRadius: '4px' }}>
+        {props.label && (
+          <span className="form__form-group-label">{props.label}</span>
+        )}
+        <div className="form__form-group-field">
           <input
             {...props.register}
             placeholder={props.placeholder}
-            type={showPassword ? 'text' : 'password'}
-            style={{ borderBottomRightRadius: 0, borderTopRightRadius: 0 }}
+            type={showPassword ? "text" : "password"} // style={{ borderBottomRightRadius: 0, borderTopRightRadius: 0 }}
             maxLength={253}
           />
           <button
-            className={`form__form-group-button${showPassword ? ' active' : ''}`}
+            className={`form__form-group-button${
+              showPassword ? " active" : ""
+            }`}
             onClick={() => setShowPassword((prevState) => !prevState)}
             type="button"
-            style={{ border: '1px solid rgba(162,162,162,.65)', borderLeft: 'none', borderBottomRightRadius: 4, borderTopRightRadius: 4 }}
-          ><EyeIcon />
+            style={{
+              border: "1px solid rgba(162,162,162,.65)",
+              borderLeft: "none",
+              borderBottomRightRadius: 4,
+              borderTopRightRadius: 4,
+            }}
+          >
+            <EyeIcon />
           </button>
         </div>
-        {props.error && <span className="form__form-group-error">{props.error}</span>}
-        {props.warning && <span className="form__form-group-warning">{props.warning}</span>}
+        {props.error && (
+          <span className="form__form-group-error">{props.error}</span>
+        )}
+        {props.warning && (
+          <span className="form__form-group-warning">{props.warning}</span>
+        )}
       </div>
-    )
+    );
   }
 
   return (
     <div className="form__form-group">
-      {props.label ? <span className="form__form-group-label">{props.label}</span> : null}
+      {props.label ? (
+        <span className="form__form-group-label">{props.label}</span>
+      ) : null}
       <div className="form__form-group-field">
         <div className="form__form-group-input-wrap">
           <input
@@ -51,12 +66,16 @@ export const InputField = ({ type = 'text', ...props }: IProps) => {
             type={type}
             maxLength={253}
           />
-          {props.error && <span className="form__form-group-error">{props.error}</span>}
-          {props.warning && <span className="form__form-group-warning">{props.warning}</span>}
+          {props.error && (
+            <span className="form__form-group-error">{props.error}</span>
+          )}
+          {props.warning && (
+            <span className="form__form-group-warning">{props.warning}</span>
+          )}
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default InputField
+export default InputField;

src/containers/Taxonomy/components/Form/index.tsx

@@ -44,11 +44,12 @@ export const Form = (props: IProps) => {
       taxonomiesService.createTaxonomy({ ...data, type: props.targetTaxonomy?.type, icon: file })
     }
   }
+  console.log('iconUrl', props.targetTaxonomy.iconUrl)
   let av = props.targetTaxonomy.iconUrl
   return (
-    <form className="form" onSubmit={handleSubmit(onSubmit)}>
+    <form className="form" onSubmit={handleSubmit(onSubmit)} style={{ paddingTop: 20 }}>
       {props.type === ETaxonomyType.taskCategory &&
-        <div style={{ position: 'relative' }}>
+        <div style={{ position: 'relative', marginBottom: 20 }}>
           <ImageField
             defaultImg={groupIcon}
             validModal
@@ -73,26 +74,28 @@ export const Form = (props: IProps) => {
           }
         </div>
       }
+      
+        <Controller
+          control={control}
+          name="name"
+          rules={!props?.targetTaxonomy?.id && { required: 'Заповнити обовязково' }}
+          defaultValue={props?.targetTaxonomy?.name}
+          render={({
+            field: { onChange, onBlur, value, name, ref },
+            fieldState: { invalid, isTouched, isDirty, error },
+            formState,
+          }) => (
+            <InputField
 
-      <Controller
-        control={control}
-        name="name"
-        rules={!props?.targetTaxonomy?.id && { required: 'Заповнити обовязково' }}
-        defaultValue={props?.targetTaxonomy?.name}
-        render={({
-          field: { onChange, onBlur, value, name, ref },
-          fieldState: { invalid, isTouched, isDirty, error },
-          formState,
-        }) => (
-          <InputField
-            register={{ onChange, onBlur, value }}
-            error={error?.message}
-            label={"Назва"}
-          />
-        )}
-      />
+              register={{ onChange, onBlur, value }}
+              error={error?.message}
+              label={"Назва"}
+            />
+          )}
+        />
 
-      <Controller
+    <div style={{marginTop: 20, width: '100%', marginBottom: 20}}>
+<Controller
         control={control}
         name="parentId"
         defaultValue={props.targetTaxonomy.parentId}
@@ -111,8 +114,11 @@ export const Form = (props: IProps) => {
           />
         )}
       />
-
-      {props.type === ETaxonomyType.taskCategory &&
+    </div>
+      
+<div style={{marginBottom: 10}}>
+  <div style={{marginBottom: 20}}>
+{props.type === ETaxonomyType.taskCategory &&
         <div className="form__form-group" style={{ display: 'flex', alignItems: 'center' }}>
           <div className="form__form-group-field">
             <Controller
@@ -124,9 +130,16 @@ export const Form = (props: IProps) => {
           </div>
         </div>
       }
-      <ButtonToolbar className="form__button-toolbar">
-        <Button color="primary" type="submit">Зберегти</Button>
+  </div>
+
+       <ButtonToolbar className="form__button-toolbar">
+        <Button color="primary" type="submit"  style={{width: 150}}>Зберегти</Button>
       </ButtonToolbar>
+    
+       
+</div>
+     
+     
     </form>
   )
 }

src/containers/Taxonomy/index.tsx

@@ -24,6 +24,7 @@ export const Taxonomy = (props: IProps) => {
   const isLoading = useSelector(taxonomySelectors.isLoadingTaxonomies);
   const taxonomiesList = useSelector(taxonomySelectors.getTaxonomiesList);
   const targetTaxonomy = useSelector(taxonomySelectors.getTargetTaxonomy);
+  console.log("targetTaxonomy", targetTaxonomy);
   const [showModal, setShowModal] = useState<boolean>(false);
   const [isOpenModal, setOpenModal] = useState<boolean>(false);
   const [selectedFactory, setFactory] = useState<IFactory>();

src/scss/component/form.scss

@@ -202,6 +202,7 @@
   width: 100%;
   display: flex;
   margin: auto;
+  // margin-top: 10px;
 }
 
 .form__form-group-field-signIn {
@@ -213,7 +214,6 @@
 }
 
 .form__form-group-label {
-  // margin-bottom: 10px;
   font-size: 12px;
   line-height: 12px;
   display: inline-block;

src/scss/main.scss

@@ -5,12 +5,12 @@
   font-size: 12px;
 }
 
-.modal .form input,
-.modal .form textarea,
-.modal .form__form-group-button {
-  border: 1px solid #f2f4f7;
-  color: #646777;
-}
+// .modal .form input,
+// .modal .form textarea,
+// .modal .form__form-group-button {
+//   border: 1px solid #f2f4f7;
+//   color: #646777;
+// }
 
 .ant-table-body {
   overflow: hidden;
@@ -286,8 +286,10 @@ span {
 
 .modal .form input,
 .modal .form textarea {
-  border: 1px solid rgba(162, 162, 162, 0.65);
-  border-radius: 4px;
+  border: none;
+  border-radius: 10px;
+  padding: 10px 15px 10px 15px;
+  margin-top: 10px;
 }
 
 .ant-select-arrow,