perf(clientportal): add avatar upload

erxes · Jun 12, 2023 · 751dccd · 751dccd
1 parent 56d9344
commit 751dccd
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 43 deletions.
diff --git a/client-portal/modules/common/Uploader.tsx b/client-portal/modules/common/Uploader.tsx
@@ -1,12 +1,12 @@
-import React from 'react';
-import styled from 'styled-components';
-import colors from '../styles/colors';
-import { rgba } from '../styles/ecolor';
-import { IAttachment } from './types';
-import Alert from '../utils/Alert';
-import uploadHandler from './uploadHandler';
-import Spinner from './Spinner';
-import AttachmentsGallery from './AttachmentGallery';
+import Alert from "../utils/Alert";
+import AttachmentsGallery from "./AttachmentGallery";
+import { IAttachment } from "./types";
+import React from "react";
+import Spinner from "./Spinner";
+import colors from "../styles/colors";
+import { rgba } from "../styles/ecolor";
+import styled from "styled-components";
+import uploadHandler from "./uploadHandler";
 
 const LoadingContainer = styled.div`
   margin: 10px 0;
@@ -40,7 +40,7 @@ const UploadBtn = styled.div`
     }
   }
 
-  input[type='file'] {
+  input[type="file"] {
     display: none;
   }
 `;
@@ -51,6 +51,7 @@ type Props = {
   single?: boolean;
   limit?: number;
   multiple?: boolean;
+  showUploader?: boolean;
 };
 
 type State = {
@@ -61,15 +62,15 @@ type State = {
 class Uploader extends React.Component<Props, State> {
   static defaultProps = {
     multiple: true,
-    limit: 4
+    limit: 4,
   };
 
   constructor(props: Props) {
     super(props);
 
     this.state = {
       attachments: props.defaultFileList || [],
-      loading: false
+      loading: false,
     };
   }
 
@@ -81,17 +82,17 @@ class Uploader extends React.Component<Props, State> {
 
       beforeUpload: () => {
         this.setState({
-          loading: true
+          loading: true,
         });
       },
 
       afterUpload: ({ status, response, fileInfo }) => {
-        if (status !== 'ok') {
+        if (status !== "ok") {
           Alert.error(response);
           return this.setState({ loading: false });
         }
 
-        Alert.info('Success');
+        Alert.info("Success");
 
         // set attachments
         const attachment = { url: response, ...fileInfo };
@@ -102,12 +103,12 @@ class Uploader extends React.Component<Props, State> {
 
         this.setState({
           loading: false,
-          attachments
+          attachments,
         });
-      }
+      },
     });
 
-    target.value = '';
+    target.value = "";
   };
 
   removeAttachment = (index: number) => {
@@ -121,9 +122,9 @@ class Uploader extends React.Component<Props, State> {
   };
 
   renderUploadButton() {
-    const { multiple, single } = this.props;
+    const { multiple, single, showUploader } = this.props;
 
-    if (single && this.state.attachments.length > 0) {
+    if (!showUploader || (single && this.state.attachments.length > 0)) {
       return null;
     }
 
@@ -142,7 +143,7 @@ class Uploader extends React.Component<Props, State> {
   }
 
   render() {
-    const { limit = 4, onChange } = this.props;
+    const { limit = 4, onChange, showUploader } = this.props;
     const { attachments, loading } = this.state;
 
     return (
@@ -153,12 +154,14 @@ class Uploader extends React.Component<Props, State> {
             Uploading...
           </LoadingContainer>
         )}
-        <AttachmentsGallery
-          attachments={attachments}
-          limit={limit}
-          onChange={onChange}
-          removeAttachment={this.removeAttachment}
-        />
+        {!showUploader && (
+          <AttachmentsGallery
+            attachments={attachments}
+            limit={limit}
+            onChange={onChange}
+            removeAttachment={this.removeAttachment}
+          />
+        )}
         {this.renderUploadButton()}
       </>
     );

diff --git a/client-portal/modules/common/nameCard/Avatar.tsx b/client-portal/modules/common/nameCard/Avatar.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { colors } from "../../styles";
 import { readFile } from "../utils";
+import { renderUserFullName } from "../../utils";
 import { rgba } from "../../styles/ecolor";
 import styled from "styled-components";
 import styledTS from "styled-components-ts";
@@ -136,9 +137,8 @@ class Avatar extends React.Component<Props> {
     let fullName;
 
     if (user) {
-      const { details } = user;
-      avatar = details && details.avatar;
-      fullName = details && details.fullName;
+      avatar = user && user.avatar;
+      fullName = renderUserFullName(user);
     }
 
     if (customer) {

diff --git a/client-portal/modules/types.ts b/client-portal/modules/types.ts
@@ -232,6 +232,7 @@ export interface IUser {
   companyName: string;
   username?: string;
   erxesCustomerId?: string;
+  avatar?: string;
   notificationSettings?: INotifcationSettings;
 }
 

diff --git a/client-portal/modules/user/components/Profile.tsx b/client-portal/modules/user/components/Profile.tsx
@@ -1,17 +1,30 @@
 import { ControlLabel, Form, FormControl, FormGroup } from "../../common/form";
+import { IAttachment, IFormProps } from "../../common/types";
+import React, { useState } from "react";
 import { SettingsContent, SettingsTitle } from "../../styles/profile";
 
-import { IFormProps } from "../../common/types";
 import { IUser } from "../../types";
 import { ModalFooter } from "../../common/form/styles";
-import React from "react";
+import Uploader from "../../common/Uploader";
 
 type Props = {
   currentUser: IUser;
   renderButton: ({}: any) => void;
 };
 
 function Profile({ currentUser, renderButton }: Props) {
+  const dbImage = currentUser ? currentUser.avatar : null;
+
+  const [image, setImage] = useState(
+    dbImage
+      ? ({
+          name: "avatar",
+          type: "img",
+          url: dbImage,
+        } as IAttachment)
+      : null
+  );
+
   const generateDoc = (values) => {
     const { object } = {} as any;
 
@@ -23,9 +36,18 @@ function Profile({ currentUser, renderButton }: Props) {
 
     return {
       ...finalValues,
+      avatar: image ? image.url : null,
     };
   };
 
+  const onChangeImage = (images) => {
+    if (images && images.length > 0) {
+      setImage(images[0]);
+    } else {
+      setImage(null);
+    }
+  };
+
   const renderContent = (formProps: IFormProps) => {
     const { values, isSubmitted } = formProps;
 
@@ -91,17 +113,23 @@ function Profile({ currentUser, renderButton }: Props) {
               />
             </div>
 
-            {object.companyName && (
-              <div>
-                <ControlLabel>Company name</ControlLabel>
-                <FormControl
-                  {...formProps}
-                  name="companyName"
-                  type="number"
-                  defaultValue={object.companyName}
-                />
-              </div>
-            )}
+            <div>
+              <ControlLabel>Company name</ControlLabel>
+              <FormControl
+                {...formProps}
+                name="companyName"
+                defaultValue={object.companyName}
+              />
+            </div>
+          </FormGroup>
+
+          <FormGroup>
+            <ControlLabel>Avatar</ControlLabel>
+            <Uploader
+              defaultFileList={image ? [image] : []}
+              onChange={onChangeImage}
+              showUploader={true}
+            />
           </FormGroup>
 
           <ModalFooter>

diff --git a/client-portal/modules/user/graphql/mutations.ts b/client-portal/modules/user/graphql/mutations.ts
@@ -45,6 +45,8 @@ const userEdit = `
     $lastName: String,
     $phone: String,
     $username: String,
+    $avatar: String,
+    $companyName: String
   ) {
     clientPortalUsersEdit(
       _id: $_id,
@@ -54,6 +56,8 @@ const userEdit = `
       lastName: $lastName,
       phone: $phone,
       username: $username,
+      avatar: $avatar,
+      companyName: $companyName,
     ) {
       _id
       email

diff --git a/client-portal/styles/globals.css b/client-portal/styles/globals.css
@@ -4,6 +4,7 @@ body {
   margin: 0;
   font-family: 'Open Sans', sans-serif;
   line-height: 1.5;
+  font-size: 14px;
   color: #444;
   position: relative;
 }