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

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 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>
</>
);
});

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 { 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>
);
}