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

CLEANUP Refactored parts order to use redux modals.

Browse Source
This commit is contained in:
Patrick Fic
2020-04-02 17:59:42 -07:00
parent 7254622f52
commit fe002b0dff
11 changed files with 306 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
bodyshop_translations.babel
View File

@@ -10393,6 +10393,48 @@
<folder_node> <folder_node>
<name>fields</name> <name>fields</name>
<children> <children>
<concept_node>
<name>act_price</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>db_price</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> <concept_node>
<name>deliver_by</name> <name>deliver_by</name>
<definition_loaded>false</definition_loaded> <definition_loaded>false</definition_loaded>
@@ -10414,6 +10456,69 @@
</translation> </translation>
</translations> </translations>
</concept_node> </concept_node>
<concept_node>
<name>job_line_id</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>line_desc</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>line_remarks</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> <concept_node>
<name>lineremarks</name> <name>lineremarks</name>
<definition_loaded>false</definition_loaded> <definition_loaded>false</definition_loaded>

32
client/src/components/job-detail-lines/job-lines.component.jsx
View File

@@ -1,7 +1,9 @@
import { Button, Input, Table } from "antd"; import { Button, Input, Table } from "antd";
import React, { useState } from "react"; import React, { useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { setModalContext } from "../../redux/modals/modals.actions";
import CurrencyFormatter from "../../utils/CurrencyFormatter"; import CurrencyFormatter from "../../utils/CurrencyFormatter";
import { alphaSort } from "../../utils/sorters"; import { alphaSort } from "../../utils/sorters";
import AllocationsAssignmentContainer from "../allocations-assignment/allocations-assignment.container"; import AllocationsAssignmentContainer from "../allocations-assignment/allocations-assignment.container";
@@ -9,14 +11,19 @@ import AllocationsBulkAssignmentContainer from "../allocations-bulk-assignment/a
import AllocationsEmployeeLabelContainer from "../allocations-employee-label/allocations-employee-label.container"; import AllocationsEmployeeLabelContainer from "../allocations-employee-label/allocations-employee-label.container";
import PartsOrderModalContainer from "../parts-order-modal/parts-order-modal.container"; import PartsOrderModalContainer from "../parts-order-modal/parts-order-modal.container";
export default function JobLinesComponent({ const mapDispatchToProps = dispatch => ({
setPartsOrderContext: context =>
dispatch(setModalContext({ context: context, modal: "partsOrder" }))
});
export function JobLinesComponent({
setPartsOrderContext,
loading, loading,
refetch, refetch,
jobLines, jobLines,
setSearchText, setSearchText,
selectedLines, selectedLines,
setSelectedLines, setSelectedLines,
partsOrderModalVisible,
jobId, jobId,
setJobLineEditContext setJobLineEditContext
}) { }) {
@@ -24,7 +31,7 @@ export default function JobLinesComponent({
sortedInfo: {} sortedInfo: {}
}); });
const { t } = useTranslation(); const { t } = useTranslation();
const setPartsModalVisible = partsOrderModalVisible[1];
const columns = [ const columns = [
{ {
title: t("joblines.fields.unq_seq"), title: t("joblines.fields.unq_seq"),
@@ -205,13 +212,7 @@ export default function JobLinesComponent({
return ( return (
<div> <div>
<PartsOrderModalContainer <PartsOrderModalContainer />
partsOrderModalVisible={partsOrderModalVisible}
linesToOrder={selectedLines}
refetch={refetch}
jobId={jobId}
/>
<Table <Table
title={() => { title={() => {
return ( return (
@@ -225,7 +226,15 @@ export default function JobLinesComponent({
/> />
<Button <Button
disabled={selectedLines.length > 0 ? false : true} disabled={selectedLines.length > 0 ? false : true}
onClick={() => setPartsModalVisible(true)} onClick={() => {
setPartsOrderContext({
actions: { refetch: refetch },
context: {
jobId: jobId,
linesToOrder: selectedLines
}
});
}}
> >
{t("parts.actions.order")} {t("parts.actions.order")}
</Button> </Button>
@@ -280,3 +289,4 @@ export default function JobLinesComponent({
</div> </div>
); );
} }
export default connect(null, mapDispatchToProps)(JobLinesComponent);

12
client/src/components/job-detail-lines/job-lines.container.jsx
View File

@@ -11,10 +11,8 @@ const mapDispatchToProps = dispatch => ({
setJobLineEditContext: context => setJobLineEditContext: context =>
dispatch(setModalContext({ context: context, modal: "jobLineEdit" })) dispatch(setModalContext({ context: context, modal: "jobLineEdit" }))
}); });
export default connect(
null, export function JobLinesContainer({ jobId, setJobLineEditContext }) {
mapDispatchToProps
)(function JobLinesContainer({ jobId, setJobLineEditContext }) {
const { loading, error, data, refetch } = useQuery(GET_JOB_LINES_BY_PK, { const { loading, error, data, refetch } = useQuery(GET_JOB_LINES_BY_PK, {
variables: { id: jobId }, variables: { id: jobId },
fetchPolicy: "network-only" fetchPolicy: "network-only"
@@ -22,7 +20,6 @@ export default connect(
const [searchText, setSearchText] = useState(""); const [searchText, setSearchText] = useState("");
const [selectedLines, setSelectedLines] = useState([]); const [selectedLines, setSelectedLines] = useState([]);
const partsOrderModalVisible = useState(false);
if (error) return <AlertComponent message={error.message} type="error" />; if (error) return <AlertComponent message={error.message} type="error" />;
@@ -64,9 +61,10 @@ export default connect(
setSearchText={setSearchText} setSearchText={setSearchText}
selectedLines={selectedLines} selectedLines={selectedLines}
setSelectedLines={setSelectedLines} setSelectedLines={setSelectedLines}
partsOrderModalVisible={partsOrderModalVisible}
jobId={jobId} jobId={jobId}
setJobLineEditContext={setJobLineEditContext} setJobLineEditContext={setJobLineEditContext}
/> />
); );
}); }
export default connect(null, mapDispatchToProps)(JobLinesContainer);

170
client/src/components/parts-order-modal/parts-order-modal.component.jsx
View File

@@ -1,94 +1,106 @@
import { AutoComplete, DatePicker, Input, List, Radio } from "antd"; import { DeleteFilled } from "@ant-design/icons";
import { HeartFilled } from "@ant-design/icons"; import { DatePicker, Form, Input } from "antd";
import React, { useState } from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
export default function PartsOrderModalComponent({ export default function PartsOrderModalComponent({
vendorList, vendorList,
state, sendTypeState
sendTypeState,
orderLinesState
}) { }) {
const [partsOrder, setPartsOrder] = state;
const [sendType, setSendType] = sendTypeState; const [sendType, setSendType] = sendTypeState;
const orderLines = orderLinesState[0];
const [vendorComplete, setVendorComplete] = useState(vendorList);
const { t } = useTranslation(); const { t } = useTranslation();
const handleSearch = value => {
if (value === "") setVendorComplete(vendorList);
else
setVendorComplete(
vendorList.filter(v =>
v.name.toLowerCase().includes(value.toLowerCase())
)
);
};
const handleSelect = (value, option) => {
setPartsOrder({ ...partsOrder, vendorid: option.key });
};
return ( return (
<div> <div>
<AutoComplete <Form.Item
onSearch={handleSearch} name="vendorid"
onSelect={handleSelect} label={t("vendors.fields.name")}
defaultOpen rules={[
backfill {
optionLabelProp="value" required: true,
dataSource={vendorComplete} message: t("general.validation.required")
placeholder={t("vendors.labels.search")} }
]}
> >
{vendorComplete.map(v => ( <VendorSearchSelect options={vendorList} />
<AutoComplete.Option value={v.name} key={v.id}> </Form.Item>
<div>{v.name}</div> <Form.Item
<div> {v.favorite ? <HeartFilled /> : null}</div> name="deliver_by"
</AutoComplete.Option> rules={[
))} {
</AutoComplete> required: true,
{t("parts_orders.fields.deliver_by")} message: t("general.validation.required")
<DatePicker }
defaultValue={partsOrder.deliver_by} ]}
onChange={e => { label={t("parts_orders.fields.deliver_by")}
setPartsOrder({ ...partsOrder, deliver_by: e }); >
}} <DatePicker />
/> </Form.Item>
{t("parts_orders.labels.inthisorder")} {t("parts_orders.labels.inthisorder")}
<List <Form.List name={["parts_order_lines", "data"]}>
itemLayout="horizontal" {(fields, { add, remove }) => {
dataSource={orderLines} return (
renderItem={item => ( <div>
<List.Item {fields.map((field, index) => (
actions={[ <Form.Item required={false} key={field.key}>
<Input placeholder={t("parts_orders.fields.lineremarks")} /> <div style={{ display: "flex" }}>
//TODO Editable table/adding line remarks to the order. <Form.Item
]} label={t("parts_orders.fields.line_desc")}
> key={`${index}line_desc`}
{ name={[field.name, "line_desc"]}
// <List.Item.Meta rules={[
// avatar={ {
// <Avatar src='https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png' /> required: true,
// } message: t("general.validation.required")
// title={<a href='https://ant.design'>{item.name.last}</a>} }
// description='Ant Design, a design language for background applications, is refined by Ant UED Team' ]}
// /> >
} <Input />
<div>{`${item.line_desc}${ </Form.Item>
item.oem_partno ? " | " + item.oem_partno : "" <Form.Item
}`}</div> label={t("parts_orders.fields.line_remarks")}
</List.Item> key={`${index}line_remarks`}
)} name={[field.name, "line_remarks"]}
/> >
<Input />
<Radio.Group </Form.Item>
defaultValue={sendType} <Form.Item
onChange={e => setSendType(e.target.value)} label={t("parts_orders.fields.db_price")}
> key={`${index}db_price`}
<Radio value={"e"}>{t("parts_orders.labels.email")}</Radio> name={[field.name, "db_price"]}
<Radio value={"p"}>{t("parts_orders.labels.print")}</Radio> >
</Radio.Group> <CurrencyInput />
</Form.Item>
<Form.Item
label={t("parts_orders.fields.act_price")}
key={`${index}act_price`}
name={[field.name, "act_price"]}
>
<CurrencyInput />
</Form.Item>
<DeleteFilled
onClick={() => {
remove(field.name);
}}
/>
</div>
</Form.Item>
))}
</div>
);
}}
</Form.List>
</div> </div>
); );
} }
// <Radio.Group
// defaultValue={sendType}
// onChange={e => setSendType(e.target.value)}
// >
// <Radio value={"e"}>{t("parts_orders.labels.email")}</Radio>
// <Radio value={"p"}>{t("parts_orders.labels.print")}</Radio>
// </Radio.Group>

140
client/src/components/parts-order-modal/parts-order-modal.container.jsx
View File

@@ -1,12 +1,20 @@
import { Modal, notification } from "antd";
import React, { useState, useEffect } from "react";
import { useMutation, useQuery } from "@apollo/react-hooks"; import { useMutation, useQuery } from "@apollo/react-hooks";
import { Form, Modal, notification } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";
import { INSERT_NEW_PARTS_ORDERS } from "../../graphql/parts-orders.queries"; import PartsOrderEmailTemplate from "../../emails/templates/parts-order/parts-order.email";
import { REPORT_QUERY_PARTS_ORDER_BY_PK } from "../../emails/templates/parts-order/parts-order.query";
import { UPDATE_JOB_LINE_STATUS } from "../../graphql/jobs-lines.queries"; import { UPDATE_JOB_LINE_STATUS } from "../../graphql/jobs-lines.queries";
import { INSERT_NEW_PARTS_ORDERS } from "../../graphql/parts-orders.queries";
import { QUERY_ALL_VENDORS_FOR_ORDER } from "../../graphql/vendors.queries"; import { QUERY_ALL_VENDORS_FOR_ORDER } from "../../graphql/vendors.queries";
import {
setEmailOptions,
toggleEmailOverlayVisible
} from "../../redux/email/email.actions";
import { toggleModalVisible } from "../../redux/modals/modals.actions";
import { selectPartsOrder } from "../../redux/modals/modals.selectors";
import { import {
selectBodyshop, selectBodyshop,
selectCurrentUser selectCurrentUser
@@ -14,102 +22,53 @@ import {
import AlertComponent from "../alert/alert.component"; import AlertComponent from "../alert/alert.component";
import LoadingSpinner from "../loading-spinner/loading-spinner.component"; import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import PartsOrderModalComponent from "./parts-order-modal.component"; import PartsOrderModalComponent from "./parts-order-modal.component";
import {
setEmailOptions,
toggleEmailOverlayVisible
} from "../../redux/email/email.actions";
import PartsOrderEmailTemplate from "../../emails/templates/parts-order/parts-order.email";
import { REPORT_QUERY_PARTS_ORDER_BY_PK } from "../../emails/templates/parts-order/parts-order.query";
const mapStateToProps = createStructuredSelector({ const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser, currentUser: selectCurrentUser,
bodyshop: selectBodyshop bodyshop: selectBodyshop,
partsOrderModal: selectPartsOrder
}); });
const mapDispatchToProps = dispatch => ({ const mapDispatchToProps = dispatch => ({
setEmailOptions: e => dispatch(setEmailOptions(e)), setEmailOptions: e => dispatch(setEmailOptions(e)),
toggleEmailOverlayVisible: () => dispatch(toggleEmailOverlayVisible()) toggleEmailOverlayVisible: () => dispatch(toggleEmailOverlayVisible()),
toggleModalVisible: () => dispatch(toggleModalVisible("partsOrder"))
}); });
export default connect( export default connect(
mapStateToProps, mapStateToProps,
mapDispatchToProps mapDispatchToProps
)(function PartsOrderModalContainer({ )(function PartsOrderModalContainer({
partsOrderModalVisible, partsOrderModal,
linesToOrder, toggleModalVisible,
jobId,
currentUser, currentUser,
bodyshop, bodyshop,
refetch,
setEmailOptions, setEmailOptions,
toggleEmailOverlayVisible toggleEmailOverlayVisible
}) { }) {
const { t } = useTranslation(); const { t } = useTranslation();
const [modalVisible, setModalVisible] = partsOrderModalVisible;
//set order lines to be a version of the incoming lines. const { visible, context, actions } = partsOrderModal;
const orderLinesState = useState( const { jobId, linesToOrder } = context;
linesToOrder.reduce((acc, value) => { const { refetch } = actions;
acc.push({ const [form] = Form.useForm();
line_desc: value.line_desc,
oem_partno: value.oem_partno,
db_price: value.db_price,
act_price: value.act_price,
line_remarks: "Alalala",
job_line_id: value.id,
status: bodyshop.md_order_statuses.default_ordered || "Ordered*"
});
return acc;
}, [])
);
const [orderLines, setOrderLinesState] = orderLinesState;
useEffect(() => {
if (modalVisible)
setOrderLinesState(
linesToOrder.reduce((acc, value) => {
acc.push({
line_desc: value.line_desc,
oem_partno: value.oem_partno,
db_price: value.db_price,
act_price: value.act_price,
line_remarks: "Alalala",
job_line_id: value.id,
status: bodyshop.md_order_statuses.default_ordered || "Ordered*"
});
return acc;
}, [])
);
}, [
modalVisible,
setOrderLinesState,
linesToOrder,
bodyshop.md_order_statuses.default_ordered
]);
const sendTypeState = useState("e"); const sendTypeState = useState("e");
const sendType = sendTypeState[0]; const sendType = sendTypeState[0];
const partsOrderState = useState({
vendorid: null,
jobid: jobId,
user_email: currentUser.email
});
const partsOrder = partsOrderState[0];
const { loading, error, data } = useQuery(QUERY_ALL_VENDORS_FOR_ORDER, { const { loading, error, data } = useQuery(QUERY_ALL_VENDORS_FOR_ORDER, {
fetchPolicy: "network-only", fetchPolicy: "network-only",
skip: !modalVisible skip: !visible
}); });
const [insertPartOrder] = useMutation(INSERT_NEW_PARTS_ORDERS); const [insertPartOrder] = useMutation(INSERT_NEW_PARTS_ORDERS);
const [updateJobLines] = useMutation(UPDATE_JOB_LINE_STATUS); const [updateJobLines] = useMutation(UPDATE_JOB_LINE_STATUS);
const handleOk = () => { const handleFinish = values => {
insertPartOrder({ insertPartOrder({
variables: { variables: {
po: [ po: [
{ {
...partsOrder, ...values,
status: bodyshop.md_order_statuses.default_ordered || "Ordered*", jobid: jobId,
parts_order_lines: { user_email: currentUser.email,
data: orderLines status: bodyshop.md_order_statuses.default_ordered || "Ordered*"
}
} }
] ]
} }
@@ -117,7 +76,7 @@ export default connect(
.then(r => { .then(r => {
updateJobLines({ updateJobLines({
variables: { variables: {
ids: linesToOrder.map(item => item.id), ids: values.parts_order_lines.data.map(item => item.job_line_id),
status: bodyshop.md_order_statuses.default_ordered || "Ordered*" status: bodyshop.md_order_statuses.default_ordered || "Ordered*"
} }
}) })
@@ -126,7 +85,7 @@ export default connect(
message: t("parts_orders.successes.created") message: t("parts_orders.successes.created")
}); });
if (refetch) refetch(); if (refetch) refetch();
setModalVisible(false); toggleModalVisible();
if (sendType === "e") { if (sendType === "e") {
//Show the email modal and set the data. //Show the email modal and set the data.
@@ -160,6 +119,8 @@ export default connect(
description: error.message description: error.message
}); });
}); });
//end no good
}) })
.catch(error => { .catch(error => {
notification["error"]({ notification["error"]({
@@ -169,20 +130,41 @@ export default connect(
}); });
}; };
const initialValues =
linesToOrder &&
linesToOrder.reduce((acc, value) => {
acc.push({
line_desc: value.line_desc,
oem_partno: value.oem_partno,
db_price: value.db_price,
act_price: value.act_price,
job_line_id: value.id,
status: bodyshop.md_order_statuses.default_ordered || "Ordered*"
});
return acc;
}, []);
return ( return (
<Modal <Modal
visible={modalVisible} visible={visible}
onCancel={() => setModalVisible(false)} onCancel={() => toggleModalVisible()}
onOk={handleOk} width="90%"
onOk={() => form.submit()}
destroyOnClose
> >
{error ? <AlertComponent message={error.message} type="error" /> : null} {error ? <AlertComponent message={error.message} type="error" /> : null}
<LoadingSpinner loading={loading}> <LoadingSpinner loading={loading}>
<PartsOrderModalComponent <Form
vendorList={(data && data.vendors) || []} form={form}
state={partsOrderState} autoComplete="no"
sendTypeState={sendTypeState} onFinish={handleFinish}
orderLinesState={orderLinesState} initialValues={{ parts_order_lines: { data: initialValues } }}
/> >
<PartsOrderModalComponent
vendorList={(data && data.vendors) || []}
sendTypeState={sendTypeState}
/>
</Form>
</LoadingSpinner> </LoadingSpinner>
</Modal> </Modal>
); );

1
client/src/graphql/vendors.queries.js
View File

@@ -73,6 +73,7 @@ export const QUERY_ALL_VENDORS_FOR_ORDER = gql`
cost_center cost_center
id id
favorite favorite
discount
} }
} }
`; `;

3
client/src/redux/modals/modals.reducer.js
View File

@@ -13,7 +13,8 @@ const INITIAL_STATE = {
invoiceEnter: { ...baseModal }, invoiceEnter: { ...baseModal },
courtesyCarReturn: { ...baseModal }, courtesyCarReturn: { ...baseModal },
noteUpsert: { ...baseModal }, noteUpsert: { ...baseModal },
schedule: { ...baseModal } schedule: { ...baseModal },
partsOrder: { ...baseModal }
}; };
const modalsReducer = (state = INITIAL_STATE, action) => { const modalsReducer = (state = INITIAL_STATE, action) => {

5
client/src/redux/modals/modals.selectors.js
View File

@@ -26,3 +26,8 @@ export const selectSchedule = createSelector(
[selectModals], [selectModals],
modals => modals.schedule modals => modals.schedule
); );
export const selectPartsOrder = createSelector(
[selectModals],
modals => modals.partsOrder
);

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

@@ -679,7 +679,12 @@
"creating": "Error encountered when creating parts order. " "creating": "Error encountered when creating parts order. "
}, },
"fields": { "fields": {
"act_price": "Price",
"db_price": "DB Price",
"deliver_by": "Deliver By", "deliver_by": "Deliver By",
"job_line_id": "Job Line Id",
"line_desc": "Line Description",
"line_remarks": "Remarks",
"lineremarks": "Line Remarks" "lineremarks": "Line Remarks"
}, },
"labels": { "labels": {

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

@@ -679,7 +679,12 @@
"creating": "Se encontró un error al crear el pedido de piezas." "creating": "Se encontró un error al crear el pedido de piezas."
}, },
"fields": { "fields": {
"act_price": "",
"db_price": "",
"deliver_by": "Entregado por", "deliver_by": "Entregado por",
"job_line_id": "",
"line_desc": "",
"line_remarks": "",
"lineremarks": "Comentarios de línea" "lineremarks": "Comentarios de línea"
}, },
"labels": { "labels": {

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

@@ -679,7 +679,12 @@
"creating": "Erreur rencontrée lors de la création de la commande de pièces." "creating": "Erreur rencontrée lors de la création de la commande de pièces."
}, },
"fields": { "fields": {
"act_price": "",
"db_price": "",
"deliver_by": "Livrer par", "deliver_by": "Livrer par",
"job_line_id": "",
"line_desc": "",
"line_remarks": "",
"lineremarks": "Remarques sur la ligne" "lineremarks": "Remarques sur la ligne"
}, },
"labels": { "labels": {