Files
bodyshop/client/src/components/profile-shops/profile-shops.component.jsx

78 lines
1.9 KiB
JavaScript

import { Button, Card, Col, Input, Table, Typography } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
export default function ProfileShopsComponent({
loading,
data,
updateActiveShop,
}) {
const { t } = useTranslation();
const [search, setSearch] = useState("");
const columns = [
{
title: t("associations.fields.shopname"),
dataIndex: "shopname",
key: "shopname",
width: "25%",
render: (text, record) => <span>{record.bodyshop.shopname}</span>,
},
{
title: t("associations.fields.active"),
dataIndex: "active",
key: "active",
width: "25%",
render: (text, record) => <span>{record.active ? "Yes" : "No"}</span>,
},
{
title: t("associations.labels.actions"),
dataIndex: "actions",
key: "actions",
width: "25%",
render: (text, record) => (
<span>
{record.active ? null : (
<Button onClick={() => updateActiveShop(record.id)}>
Activate
</Button>
)}
</span>
),
},
];
const filteredData =
search === ""
? data
: data.filter((d) =>
d.bodyshop.shopname.toLowerCase().includes(search.toLowerCase())
);
return (
<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>
);
}