admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Profile page improvements.

Browse Source
This commit is contained in:
Patrick Fic
2023-01-19 13:05:00 -08:00
parent 42b4534d21
commit 79f032ecaf
7 changed files with 184 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
bodyshop_translations.babel
View File

@@ -46627,6 +46627,48 @@
</translation> </translation>
</translations> </translations>
</concept_node> </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> </children>
</folder_node> </folder_node>
<folder_node> <folder_node>

168
client/src/components/profile-my/profile-my.component.jsx
View File

@@ -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 { LockOutlined } from "@ant-design/icons";
import React from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
@@ -48,81 +48,99 @@ export default connect(
}; };
return ( return (
<div> <>
<Form <Col span={24}>
onFinish={handleFinish} <Form
autoComplete={"no"} onFinish={handleFinish}
initialValues={currentUser} autoComplete={"no"}
layout="vertical" initialValues={currentUser}
> layout="vertical"
<LayoutFormRow> >
<Form.Item <Card
label={t("user.fields.displayname")} title={t("user.labels.profileinfo")}
rules={[ extra={
{ <Button type="primary" key="submit" htmlType="submit">
required: true, {t("user.actions.updateprofile")}
//message: t("general.validation.required"), </Button>
}, }
]}
name="displayName"
> >
<Input /> <LayoutFormRow noDivider>
</Form.Item> <Form.Item
<Form.Item label={t("user.fields.photourl")} name="photoURL"> label={t("user.fields.displayname")}
<Input /> rules={[
</Form.Item> {
</LayoutFormRow> required: true,
//message: t("general.validation.required"),
<Button type="primary" key="submit" htmlType="submit"> },
{t("user.actions.updateprofile")} ]}
</Button> name="displayName"
</Form> >
<Form <Input />
onFinish={handleChangePassword} </Form.Item>
autoComplete={"no"} <Form.Item label={t("user.fields.photourl")} name="photoURL">
initialValues={currentUser} <Input />
layout="vertical" </Form.Item>
> </LayoutFormRow>
<LayoutFormRow> </Card>
<Form.Item label={t("general.labels.newpassword")} name="password"> </Form>
<Input </Col>
prefix={<LockOutlined />} <Col span={24}>
type="password" <Form
placeholder={t("general.labels.password")} onFinish={handleChangePassword}
/> autoComplete={"no"}
</Form.Item> initialValues={currentUser}
<Form.Item layout="vertical"
label={t("general.labels.confirmpassword")} >
name="password-confirm" <Card
dependencies={["password"]} title={t("user.labels.changepassword")}
rules={[ extra={
{ <Button type="primary" key="submit" htmlType="submit">
required: true, {t("user.actions.changepassword")}
//message: t("general.validation.required"), </Button>
}, }
({ getFieldValue }) => ({
validator(rule, value) {
if (!value || getFieldValue("password") === value) {
return Promise.resolve();
}
return Promise.reject(
t("general.labels.passwordsdonotmatch")
);
},
}),
]}
> >
<Input <LayoutFormRow>
prefix={<LockOutlined />} <Form.Item
type="password" label={t("general.labels.newpassword")}
placeholder={t("general.labels.password")} name="password"
/> >
</Form.Item> <Input
</LayoutFormRow> prefix={<LockOutlined />}
<Button type="primary" key="submit" htmlType="submit"> type="password"
{t("user.actions.changepassword")} placeholder={t("general.labels.password")}
</Button> />
</Form> </Form.Item>
</div> <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>
</>
); );
}); });

49
client/src/components/profile-shops/profile-shops.component.jsx
View File

@@ -1,13 +1,13 @@
import React from "react"; import React, { useState } from "react";
import { useTranslation } from "react-i18next"; 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({ export default function ProfileShopsComponent({
loading, loading,
data, data,
updateActiveShop, updateActiveShop,
}) { }) {
const { t } = useTranslation(); const { t } = useTranslation();
const [search, setSearch] = useState("");
const columns = [ const columns = [
{ {
title: t("associations.fields.shopname"), 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 ( return (
<Table <Col span={24}>
title={() => ( <Card
<Typography.Title level={4}> title={
{t("profile.labels.activeshop")} <Typography.Title level={4}>
</Typography.Title> {t("profile.labels.activeshop")}
)} </Typography.Title>
loading={loading} }
columns={columns} extra={
rowKey="id" <Input.Search
dataSource={data} 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>
); );
} }

7
client/src/pages/profile/profile.page.jsx
View File

@@ -1,3 +1,4 @@
import { Row } from "antd";
import React from "react"; import React from "react";
import ProfileMyComponent from "../../components/profile-my/profile-my.component"; import ProfileMyComponent from "../../components/profile-my/profile-my.component";
import ProfileShopsContainer from "../../components/profile-shops/profile-shops.container"; 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() { export default function ProfilePage() {
return ( return (
<div> <div>
<ProfileMyComponent /> <Row gutter={[16, 16]}>
<ProfileShopsContainer /> <ProfileMyComponent />
<ProfileShopsContainer />
</Row>
</div> </div>
); );
} }

4
client/src/translations/en_us/common.json
View File

@@ -2747,7 +2747,9 @@
"photourl": "Avatar URL" "photourl": "Avatar URL"
}, },
"labels": { "labels": {
"actions": "Actions" "actions": "Actions",
"changepassword": "Change Password",
"profileinfo": "Profile Info"
}, },
"successess": { "successess": {
"passwordchanged": "Password changed successfully. " "passwordchanged": "Password changed successfully. "

4
client/src/translations/es/common.json
View File

@@ -2747,7 +2747,9 @@
"photourl": "URL de avatar" "photourl": "URL de avatar"
}, },
"labels": { "labels": {
"actions": "" "actions": "",
"changepassword": "",
"profileinfo": ""
}, },
"successess": { "successess": {
"passwordchanged": "" "passwordchanged": ""

4
client/src/translations/fr/common.json
View File

@@ -2747,7 +2747,9 @@
"photourl": "URL de l'avatar" "photourl": "URL de l'avatar"
}, },
"labels": { "labels": {
"actions": "" "actions": "",
"changepassword": "",
"profileinfo": ""
}, },
"successess": { "successess": {
"passwordchanged": "" "passwordchanged": ""