perf(clientportal): update cards

erxes · Jun 12, 2023 · 1c7c541 · 1c7c541
1 parent 0ab2b19
commit 1c7c541
Show file tree

Hide file tree

Showing 13 changed files with 285 additions and 104 deletions.
diff --git a/client-portal/modules/appContext.tsx b/client-portal/modules/appContext.tsx
@@ -27,7 +27,11 @@ function AppProvider({ children }: Props) {
   const [currentUser, setCurrentUser] = React.useState(null);
   const [notificationsCount, setNotificationsCount] = React.useState(0);
 
-  const userQuery = useQuery<UserQueryResponse>(gql(queries.currentUser));
+  const { data: userData, loading: userLoading } = useQuery<UserQueryResponse>(
+    gql(queries.currentUser)
+  );
+
+  const response: any = useQuery(gql(clientPortalGetConfig), {});
 
   const notificationsCountQry = useQuery<NotificationsCountQueryResponse>(
     gql(queries.notificationsCountQuery),
@@ -37,8 +41,8 @@ function AppProvider({ children }: Props) {
   );
 
   useEffect(() => {
-    if (userQuery.data && userQuery.data.clientPortalCurrentUser) {
-      setCurrentUser(userQuery.data.clientPortalCurrentUser);
+    if (userData && userData.clientPortalCurrentUser) {
+      setCurrentUser(userData.clientPortalCurrentUser);
     }
 
     if (
@@ -87,15 +91,13 @@ function AppProvider({ children }: Props) {
       unsubscribe2();
     };
   }, [
-    userQuery,
+    userData,
     currentUser,
     notificationsCountQry,
     notificationsCount,
     setNotificationsCount,
   ]);
 
-  const response: any = useQuery(gql(clientPortalGetConfig), {});
-
   const config: Config = response.data
     ? response.data.clientPortalGetConfigByDomain
     : {};
@@ -107,12 +109,16 @@ function AppProvider({ children }: Props) {
     skip: !config.knowledgeBaseTopicId,
   });
 
+  if (userLoading || response.loading || topicResponse.loading) {
+    return null;
+  }
+
   const topic =
     (topicResponse.data
       ? topicResponse.data.clientPortalKnowledgeBaseTopicDetail
       : {}) || {};
 
-  if (userQuery.loading || response.loading) {
+  if (response.loading) {
     return null;
   }
 

diff --git a/client-portal/modules/card/components/ListHeader.tsx b/client-portal/modules/card/components/ListHeader.tsx
@@ -1,7 +1,7 @@
+import { CardTab, FilterGroup } from "../../styles/cards";
 import { typeFilters, viewModes } from "../../main/constants";
 
 import Button from "../../common/Button";
-import { CardTab } from "../../styles/cards";
 import { Dropdown } from "react-bootstrap";
 import DropdownToggle from "../../common/DropdownToggle";
 import { HeaderWrapper } from "../../styles/main";
@@ -23,50 +23,30 @@ type Props = {
 
 export default class ListHeader extends React.Component<Props> {
   renderFilters() {
-    const {
-      mode,
-      setMode,
-      baseColor,
-      setShowForm,
-      setViewType,
-      viewType,
-      type,
-      hideHeader,
-    } = this.props;
+    const { mode, setMode, setViewType, viewType, hideHeader } = this.props;
 
     if (hideHeader) {
       return null;
     }
 
     return (
       <>
-        <CardTab baseColor={baseColor} className="d-flex align-items-center">
-          {viewModes.map((item) => (
-            <span
-              className={`d-flex align-items-center justify-content-center ${
-                item.type === viewType ? "active" : ""
-              }`}
-              key={item.type}
-              onClick={() => setViewType(item.type)}
-            >
-              <Icon icon={item.icon} size={15} /> &nbsp; {item.label}
-            </span>
-          ))}
-        </CardTab>
-
         {viewType !== "board" && (
           <Dropdown>
             <Dropdown.Toggle
               as={DropdownToggle}
-              id="dropdown-custom-components"
+              id="dropdown-filter-components"
             >
-              <CardTab>
-                <span
-                  className={`d-flex align-items-center justify-content-center`}
-                >
-                  <Icon icon="filter" size={15} /> &nbsp; {mode}
-                </span>
-              </CardTab>
+              <FilterGroup className="d-flex align-items-center">
+                <label>Filter by</label> &nbsp;
+                <CardTab>
+                  <span
+                    className={`d-flex align-items-center justify-content-center`}
+                  >
+                    <Icon icon="filter" size={15} /> &nbsp; {mode}
+                  </span>
+                </CardTab>
+              </FilterGroup>
             </Dropdown.Toggle>
 
             <Dropdown.Menu>
@@ -85,6 +65,36 @@ export default class ListHeader extends React.Component<Props> {
             </Dropdown.Menu>
           </Dropdown>
         )}
+
+        <Dropdown>
+          <Dropdown.Toggle as={DropdownToggle} id="dropdown-view-components">
+            <FilterGroup className="d-flex align-items-center">
+              <label>View by</label> &nbsp;
+              <CardTab>
+                <span
+                  className={`d-flex align-items-center justify-content-center`}
+                >
+                  <Icon icon="layers-1" size={15} /> &nbsp; {viewType}
+                </span>
+              </CardTab>
+            </FilterGroup>
+          </Dropdown.Toggle>
+
+          <Dropdown.Menu>
+            {viewModes.map((item) => (
+              <Dropdown.Item
+                key={item.type}
+                className="d-flex align-items-center justify-content-between"
+                eventKey="1"
+                onClick={() => {
+                  setViewType(item.type);
+                }}
+              >
+                {item.label}
+              </Dropdown.Item>
+            ))}
+          </Dropdown.Menu>
+        </Dropdown>
       </>
     );
   }

diff --git a/client-portal/modules/common/Button.tsx b/client-portal/modules/common/Button.tsx
@@ -60,7 +60,7 @@ const ButtonStyled = styledTS<{
   block?: boolean;
   uppercase?: boolean;
 }>(styled.button)`
-  border-radius: 30px;
+  border-radius: 8px;
   position: relative;
   transition: all 0.3s ease;
   outline: 0;

diff --git a/client-portal/modules/main/components/SettingsLayout.tsx b/client-portal/modules/main/components/SettingsLayout.tsx
@@ -1,11 +1,10 @@
 import { Config, IUser } from "../../types";
 import { LeftContent, LeftSidebar } from "../../styles/profile";
-import React, { useState } from "react";
 
 import Dropdown from "react-bootstrap/Dropdown";
 import Icon from "../../common/Icon";
-import Link from "next/link";
 import NameCard from "../../common/nameCard/NameCard";
+import React from "react";
 import { getConfigColor } from "../../common/utils";
 import { renderUserFullName } from "../../utils";
 import { useRouter } from "next/router";

diff --git a/client-portal/modules/styles/cards.ts b/client-portal/modules/styles/cards.ts
@@ -308,7 +308,7 @@ const CardTab = styledTS<{baseColor?: string}>(styled.div)`
   font-size: 13px;
   background: #f4f4f4;
   border: 1px solid ${colors.borderPrimary};
-  border-radius: ${dimensions.unitSpacing}px;
+  border-radius: ${dimensions.unitSpacing - 2}px;
   color: ${colors.colorCoreGray};
   overflow: hidden;
 
@@ -345,13 +345,21 @@ const FlexRow = styled.div`
   }
 `;
 
+const FilterGroup = styled.div`
+  label {
+    font-size: 14px;
+    margin: 0 5px 0 0;
+  }
+`;
+
 export {
   TicketRow,
   TicketLabel,
   CommentContainer,
   Table,
   Label,
   DetailHeader,
+  FilterGroup,
   ListHead,
   ListBody,
   ListRow,

diff --git a/client-portal/modules/styles/main.ts b/client-portal/modules/styles/main.ts
@@ -100,8 +100,10 @@ const SupportMenus = styledTS<{ color?: string, baseColor?: string }>(styled.div
 
   .dropdown-menu {
     width: 210px;
-    right: 0px;
+    right: -50px;
     left: auto !important;
+    top: 35px !important;
+    transform: none !important;
   }
 
   > button {
@@ -537,6 +539,8 @@ const NotificationList = styled.ul`
   margin: 0;
   padding: 0;
   list-style: none;
+  max-height: 450px;
+  overflow: auto;
 
   li {
     padding: ${dimensions.unitSpacing}px ${dimensions.coreSpacing}px;

diff --git a/client-portal/modules/styles/notifications.ts b/client-portal/modules/styles/notifications.ts
@@ -86,9 +86,25 @@ const TabCaption = styled.span`
   }
 `;
 
+const NotificationSettingsRow = styled.div`
+  font-size: 13px;
+  color: #666;
+  margin-bottom: ${dimensions.coreSpacing}px;
+
+  p {
+    margin-bottom: ${dimensions.unitSpacing - 2}px;
+  }
+
+  .react-toggle {
+    margin-right: ${dimensions.unitSpacing}px;
+  }
+`;
+
+
 export {
   NotificationWrapper,
   NotificationFooter,
+  NotificationSettingsRow,
   CreatedUser,
   AvatarSection,
   TabCaption,

diff --git a/client-portal/modules/user/components/Profile.tsx b/client-portal/modules/user/components/Profile.tsx
@@ -5,7 +5,6 @@ import { IFormProps } from "../../common/types";
 import { IUser } from "../../types";
 import { ModalFooter } from "../../common/form/styles";
 import React from "react";
-import { useRouter } from "next/router";
 
 type Props = {
   currentUser: IUser;
@@ -99,7 +98,7 @@ function Profile({ currentUser, renderButton }: Props) {
                   {...formProps}
                   name="companyName"
                   type="number"
-                  defaultValue={object.phone}
+                  defaultValue={object.companyName}
                 />
               </div>
             )}