done

TWstartups · Aug 20, 2020 · aeb9cc6 · aeb9cc6
1 parent ed523ae
commit aeb9cc6
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 12 deletions.
diff --git a/client/src/components/company/companyDetail/TopProfile.js b/client/src/components/company/companyDetail/TopProfile.js
@@ -41,7 +41,7 @@ class TopProfile extends React.Component {
         <div className="ui grid">
           <div className="two wide column"></div>
           <div className="four wide column" style={{ textAlign: 'center' }}>
-            <ImageZone className="company-img" src={logo} type='logo' editable={this.props.checkOwnership()} companyId={_id} />
+            <ImageZone className="company-img" src={logo} editable={this.props.checkOwnership()} query={{ companyId: _id, type: 'logo' }} />
           </div>
           <div className="six wide column">
             <div className="company-info">

diff --git a/client/src/components/company/companyDetail/index.js b/client/src/components/company/companyDetail/index.js
@@ -49,7 +49,7 @@ class Company extends React.Component {
 
   checkOwnership = () => {
     const { user, company } = this.props
-    return user.type === 'super' || (user._id && (company.owners.indexOf(user._id) > -1))
+    return user.type === 'super' || (company.owners && (company.owners.indexOf(user._id) > -1))
   }
 
   render () {

diff --git a/client/src/components/company/imageZone/index.js b/client/src/components/company/imageZone/index.js
@@ -6,12 +6,15 @@ import './index.scss'
 
 import { useDropzone } from 'react-dropzone'
 
-const ImageZone = ({ type, src, className, identifier = 'company_image_update', editable = false, companyId }) => {
+const ImageZone = ({ src, className, identifier = 'company_image_update', editable = false, query = {} }) => {
+  const { type, companyId, exeId } = query
   const [imgSrc, setImgSrc] = useState('')
+  const [uploading, setUploading] = useState(false)
   const onDrop = useCallback((files, editable, companyId) => {
     if (!editable) return
+    setUploading(true)
     const f = files[0]
-    const apiEndPoint = `${process.env.REACT_APP_API_URL}/api/company/image?${qs.stringify({ type, companyId })}`
+    const apiEndPoint = `${process.env.REACT_APP_API_URL}/api/company/image?${qs.stringify({ type, companyId, exeId })}`
     const token = localStorage.getItem('tw_token')
     // upload to api
     superagent
@@ -20,6 +23,7 @@ const ImageZone = ({ type, src, className, identifier = 'company_image_update',
       .attach(identifier, f)
       .end((err, res) => {
         if (err) return console.error(err)
+        setUploading(false)
         setImgSrc(res.body.result)
       })
   // eslint-disable-next-line
@@ -28,11 +32,21 @@ const ImageZone = ({ type, src, className, identifier = 'company_image_update',
   return (
     <div>
       <div className={`image-zone-component ${className} editable-${editable}`}>
-        {editable && <div className={`dropzone-layer ${isDragActive}`} {...getRootProps()}>
+        {editable && <div className={`dropzone-layer ${isDragActive} isUploading-${uploading}`} {...getRootProps()}>
           <input {...getInputProps()} />
-          <div className={'dropzone'}>
-            <i className="cloud upload icon"></i>
-            <div className='upload-text'>upload</div>
+          <div className='dropzone'>
+            {!uploading && <i className="cloud upload icon"></i>}
+            {!uploading && <div className='upload-text'>upload</div>}
+            {uploading && <div className='uploadingzone'>
+              <div className="sk-chase">
+                <div className="sk-chase-dot"></div>
+                <div className="sk-chase-dot"></div>
+                <div className="sk-chase-dot"></div>
+                <div className="sk-chase-dot"></div>
+                <div className="sk-chase-dot"></div>
+                <div className="sk-chase-dot"></div>
+              </div>
+            </div>}
           </div>
         </div>}
         <img alt={identifier} src={imgSrc || src}></img>

diff --git a/client/src/components/company/imageZone/index.scss b/client/src/components/company/imageZone/index.scss
@@ -1,3 +1,5 @@
+@import "./loader.scss";
+
 .image-zone-component {
   height: 200px;
   width: 200px;
@@ -23,13 +25,13 @@
       background: rgba(black, 0);
       outline: none;
 
-      &.true,&:hover{
-        background: rgba(black, 0.1);
+      &.true,&:hover,&.isUploading-true{
+        background: rgba(black, 0.3);
         backdrop-filter: blur(2px);
         .dropzone {
           user-select: none;
           margin-top: 40%;
-          color: rgba(black, 0.6);
+          color: rgba(white, 1);
           text-transform: uppercase;
           letter-spacing: 1px;
           border-radius: 50px;
@@ -41,6 +43,7 @@
           opacity: 0.8;
           &:hover{
             opacity: 1;
+            transform: scale(1.04);
           }
           &:active{
             transform: scale(0.95);
@@ -53,12 +56,15 @@
       &.true{
         opacity: 1;
         .dropzone {
-          color: white;
+          color: rgba(white, 0.8);
         }
       }
       .dropzone {
         display: none
       }
+      .uploadingzone {
+
+      }
     }
   }
 }

diff --git a/client/src/components/company/imageZone/loader.scss b/client/src/components/company/imageZone/loader.scss
@@ -0,0 +1,55 @@
+$main-color: #54d1db;
+.sk-chase {
+  width: 40px;
+  height: 40px;
+  position: relative;
+  animation: sk-chase 2.5s infinite linear both;
+}
+
+.sk-chase-dot {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  animation: sk-chase-dot 2.0s infinite ease-in-out both;
+}
+
+.sk-chase-dot:before {
+  content: '';
+  display: block;
+  width: 25%;
+  height: 25%;
+  background-color: white;
+  border-radius: 100%;
+  animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
+}
+
+.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
+.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
+.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
+.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
+.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
+.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
+.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
+.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
+.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
+.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
+.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
+.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }
+
+@keyframes sk-chase {
+  100% { transform: rotate(360deg); }
+}
+
+@keyframes sk-chase-dot {
+  80%, 100% { transform: rotate(360deg); }
+}
+
+@keyframes sk-chase-dot-before {
+  50% {
+    transform: scale(0.4);
+  } 100%, 0% {
+      transform: scale(1.0);
+    }
+}
diff --git a/package-lock.json b/package-lock.json