From 79f032ecafdff8b77975e004e3a6f4ab7b3322fc Mon Sep 17 00:00:00 2001
From: Patrick Fic <snaptsoft@gmail.com>
Date: Thu, 19 Jan 2023 13:05:00 -0800
Subject: [PATCH] Profile page improvements.

---
 bodyshop_translations.babel                   |  42 +++++
 .../profile-my/profile-my.component.jsx       | 168 ++++++++++--------
 .../profile-shops/profile-shops.component.jsx |  49 +++--
 client/src/pages/profile/profile.page.jsx     |   7 +-
 client/src/translations/en_us/common.json     |   4 +-
 client/src/translations/es/common.json        |   4 +-
 client/src/translations/fr/common.json        |   4 +-
 7 files changed, 184 insertions(+), 94 deletions(-)

diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel
index 5165341bd..0358a8c7a 100644
--- a/bodyshop_translations.babel
+++ b/bodyshop_translations.babel
@@ -46627,6 +46627,48 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>changepassword</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>profileinfo</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                 </children>
                             </folder_node>
                             <folder_node>
diff --git a/client/src/components/profile-my/profile-my.component.jsx b/client/src/components/profile-my/profile-my.component.jsx
index 552f7bc4c..1d4c8633e 100644
--- a/client/src/components/profile-my/profile-my.component.jsx
+++ b/client/src/components/profile-my/profile-my.component.jsx
@@ -1,4 +1,4 @@
-import { Button, Form, Input, notification } from "antd";
+import { Button, Card, Col, Form, Input, notification } from "antd";
 import { LockOutlined } from "@ant-design/icons";
 import React from "react";
 import { useTranslation } from "react-i18next";
@@ -48,81 +48,99 @@ export default connect(
   };
 
   return (
-    <div>
-      <Form
-        onFinish={handleFinish}
-        autoComplete={"no"}
-        initialValues={currentUser}
-        layout="vertical"
-      >
-        <LayoutFormRow>
-          <Form.Item
-            label={t("user.fields.displayname")}
-            rules={[
-              {
-                required: true,
-                //message: t("general.validation.required"),
-              },
-            ]}
-            name="displayName"
+    <>
+      <Col span={24}>
+        <Form
+          onFinish={handleFinish}
+          autoComplete={"no"}
+          initialValues={currentUser}
+          layout="vertical"
+        >
+          <Card
+            title={t("user.labels.profileinfo")}
+            extra={
+              <Button type="primary" key="submit" htmlType="submit">
+                {t("user.actions.updateprofile")}
+              </Button>
+            }
           >
-            <Input />
-          </Form.Item>
-          <Form.Item label={t("user.fields.photourl")} name="photoURL">
-            <Input />
-          </Form.Item>
-        </LayoutFormRow>
-
-        <Button type="primary" key="submit" htmlType="submit">
-          {t("user.actions.updateprofile")}
-        </Button>
-      </Form>
-      <Form
-        onFinish={handleChangePassword}
-        autoComplete={"no"}
-        initialValues={currentUser}
-        layout="vertical"
-      >
-        <LayoutFormRow>
-          <Form.Item label={t("general.labels.newpassword")} name="password">
-            <Input
-              prefix={<LockOutlined />}
-              type="password"
-              placeholder={t("general.labels.password")}
-            />
-          </Form.Item>
-          <Form.Item
-            label={t("general.labels.confirmpassword")}
-            name="password-confirm"
-            dependencies={["password"]}
-            rules={[
-              {
-                required: true,
-                //message: t("general.validation.required"),
-              },
-              ({ getFieldValue }) => ({
-                validator(rule, value) {
-                  if (!value || getFieldValue("password") === value) {
-                    return Promise.resolve();
-                  }
-                  return Promise.reject(
-                    t("general.labels.passwordsdonotmatch")
-                  );
-                },
-              }),
-            ]}
+            <LayoutFormRow noDivider>
+              <Form.Item
+                label={t("user.fields.displayname")}
+                rules={[
+                  {
+                    required: true,
+                    //message: t("general.validation.required"),
+                  },
+                ]}
+                name="displayName"
+              >
+                <Input />
+              </Form.Item>
+              <Form.Item label={t("user.fields.photourl")} name="photoURL">
+                <Input />
+              </Form.Item>
+            </LayoutFormRow>
+          </Card>
+        </Form>
+      </Col>
+      <Col span={24}>
+        <Form
+          onFinish={handleChangePassword}
+          autoComplete={"no"}
+          initialValues={currentUser}
+          layout="vertical"
+        >
+          <Card
+            title={t("user.labels.changepassword")}
+            extra={
+              <Button type="primary" key="submit" htmlType="submit">
+                {t("user.actions.changepassword")}
+              </Button>
+            }
           >
-            <Input
-              prefix={<LockOutlined />}
-              type="password"
-              placeholder={t("general.labels.password")}
-            />
-          </Form.Item>
-        </LayoutFormRow>
-        <Button type="primary" key="submit" htmlType="submit">
-          {t("user.actions.changepassword")}
-        </Button>
-      </Form>
-    </div>
+            <LayoutFormRow>
+              <Form.Item
+                label={t("general.labels.newpassword")}
+                name="password"
+              >
+                <Input
+                  prefix={<LockOutlined />}
+                  type="password"
+                  placeholder={t("general.labels.password")}
+                />
+              </Form.Item>
+              <Form.Item
+                label={t("general.labels.confirmpassword")}
+                name="password-confirm"
+                dependencies={["password"]}
+                rules={[
+                  {
+                    required: true,
+                    //message: t("general.validation.required"),
+                  },
+                  ({ getFieldValue }) => ({
+                    validator(rule, value) {
+                      if (!value || getFieldValue("password") === value) {
+                        return Promise.resolve();
+                      }
+                      return Promise.reject(
+                        t("general.labels.passwordsdonotmatch")
+                      );
+                    },
+                  }),
+                ]}
+              >
+                <Input
+                  prefix={<LockOutlined />}
+                  type="password"
+                  placeholder={t("general.labels.password")}
+                />
+              </Form.Item>
+            </LayoutFormRow>
+          </Card>
+        </Form>
+      </Col>
+    </>
   );
 });
diff --git a/client/src/components/profile-shops/profile-shops.component.jsx b/client/src/components/profile-shops/profile-shops.component.jsx
index 99acbd032..81764482c 100644
--- a/client/src/components/profile-shops/profile-shops.component.jsx
+++ b/client/src/components/profile-shops/profile-shops.component.jsx
@@ -1,13 +1,13 @@
-import React from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Table, Button, Typography } from "antd";
+import { Table, Button, Typography, Space, Input, Card, Col } from "antd";
 export default function ProfileShopsComponent({
   loading,
   data,
   updateActiveShop,
 }) {
   const { t } = useTranslation();
-
+  const [search, setSearch] = useState("");
   const columns = [
     {
       title: t("associations.fields.shopname"),
@@ -39,18 +39,39 @@ export default function ProfileShopsComponent({
       ),
     },
   ];
+  console.log("🚀 ~ file: profile-shops.component.jsx:45 ~ data", data);
+  const filteredData =
+    search === ""
+      ? data
+      : data.filter((d) =>
+          d.bodyshop.shopname.toLowerCase().includes(search.toLowerCase())
+        );
 
   return (
-    <Table
-      title={() => (
-        <Typography.Title level={4}>
-          {t("profile.labels.activeshop")}
-        </Typography.Title>
-      )}
-      loading={loading}
-      columns={columns}
-      rowKey="id"
-      dataSource={data}
-    />
+    <Col span={24}>
+      <Card
+        title={
+          <Typography.Title level={4}>
+            {t("profile.labels.activeshop")}
+          </Typography.Title>
+        }
+        extra={
+          <Input.Search
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            allowClear
+            placeholder={t("general.labels.search")}
+          />
+        }
+      >
+        <Table
+          pagination={false}
+          loading={loading}
+          columns={columns}
+          rowKey="id"
+          dataSource={filteredData}
+        />
+      </Card>
+    </Col>
   );
 }
diff --git a/client/src/pages/profile/profile.page.jsx b/client/src/pages/profile/profile.page.jsx
index d4525eebb..3d897eda8 100644
--- a/client/src/pages/profile/profile.page.jsx
+++ b/client/src/pages/profile/profile.page.jsx
@@ -1,3 +1,4 @@
+import { Row } from "antd";
 import React from "react";
 import ProfileMyComponent from "../../components/profile-my/profile-my.component";
 import ProfileShopsContainer from "../../components/profile-shops/profile-shops.container";
@@ -5,8 +6,10 @@ import ProfileShopsContainer from "../../components/profile-shops/profile-shops.
 export default function ProfilePage() {
   return (
     <div>
-      <ProfileMyComponent />
-      <ProfileShopsContainer />
+      <Row gutter={[16, 16]}>
+        <ProfileMyComponent />
+        <ProfileShopsContainer />
+      </Row>
     </div>
   );
 }
diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json
index e78667a7c..d346c7ae4 100644
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
@@ -2747,7 +2747,9 @@
 				"photourl": "Avatar URL"
 			},
 			"labels": {
-				"actions": "Actions"
+				"actions": "Actions",
+				"changepassword": "Change Password",
+				"profileinfo": "Profile Info"
 			},
 			"successess": {
 				"passwordchanged": "Password changed successfully. "
diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json
index 9936f3948..7033be5b6 100644
--- a/client/src/translations/es/common.json
+++ b/client/src/translations/es/common.json
@@ -2747,7 +2747,9 @@
 				"photourl": "URL de avatar"
 			},
 			"labels": {
-				"actions": ""
+				"actions": "",
+				"changepassword": "",
+				"profileinfo": ""
 			},
 			"successess": {
 				"passwordchanged": ""
diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json
index 5283b56f6..bc5c28286 100644
--- a/client/src/translations/fr/common.json
+++ b/client/src/translations/fr/common.json
@@ -2747,7 +2747,9 @@
 				"photourl": "URL de l'avatar"
 			},
 			"labels": {
-				"actions": ""
+				"actions": "",
+				"changepassword": "",
+				"profileinfo": ""
 			},
 			"successess": {
 				"passwordchanged": ""