55 lines
1.6 KiB
JavaScript
55 lines
1.6 KiB
JavaScript
import { Button, Card, Col, Input, Table, Typography } from "antd";
|
|
import { 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>
|
|
);
|
|
}
|