100 lines
3.1 KiB
JavaScript
100 lines
3.1 KiB
JavaScript
import { PictureFilled } from "@ant-design/icons";
|
|
import { useQuery } from "@apollo/client";
|
|
import { Badge, Popover } from "antd";
|
|
import React, { useEffect, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import { GET_DOCUMENTS_BY_JOB } from "../../graphql/documents.queries";
|
|
import { selectBodyshop } from "../../redux/user/user.selectors";
|
|
import AlertComponent from "../alert/alert.component";
|
|
import JobDocumentsGalleryExternal from "../jobs-documents-gallery/jobs-documents-gallery.external.component";
|
|
import JobDocumentsLocalGalleryExternal from "../jobs-documents-local-gallery/jobs-documents-local-gallery.external.component";
|
|
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
bodyshop: selectBodyshop,
|
|
});
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
//setUserLanguage: language => dispatch(setUserLanguage(language))
|
|
});
|
|
export default connect(mapStateToProps, mapDispatchToProps)(ChatMediaSelector);
|
|
|
|
export function ChatMediaSelector({
|
|
bodyshop,
|
|
selectedMedia,
|
|
setSelectedMedia,
|
|
conversation,
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const [visible, setVisible] = useState(false);
|
|
|
|
const { loading, error, data } = useQuery(GET_DOCUMENTS_BY_JOB, {
|
|
fetchPolicy: "network-only",
|
|
nextFetchPolicy: "network-only",
|
|
variables: {
|
|
jobId:
|
|
conversation.job_conversations[0] &&
|
|
conversation.job_conversations[0].jobid,
|
|
},
|
|
|
|
skip:
|
|
!visible ||
|
|
!conversation.job_conversations ||
|
|
conversation.job_conversations.length === 0,
|
|
});
|
|
|
|
const handleVisibleChange = (visible) => {
|
|
setVisible(visible);
|
|
};
|
|
|
|
useEffect(() => {
|
|
setSelectedMedia([]);
|
|
}, [setSelectedMedia, conversation]);
|
|
|
|
const content = (
|
|
<div>
|
|
{loading && <LoadingSpinner />}
|
|
{error && <AlertComponent message={error.message} type="error" />}
|
|
{selectedMedia.filter((s) => s.isSelected).length >= 10 ? (
|
|
<div style={{ color: "red" }}>{t("messaging.labels.maxtenimages")}</div>
|
|
) : null}
|
|
{!bodyshop.uselocalmediaserver && data && (
|
|
<JobDocumentsGalleryExternal
|
|
data={data ? data.documents : []}
|
|
externalMediaState={[selectedMedia, setSelectedMedia]}
|
|
/>
|
|
)}
|
|
{bodyshop.uselocalmediaserver && visible && (
|
|
<JobDocumentsLocalGalleryExternal
|
|
externalMediaState={[selectedMedia, setSelectedMedia]}
|
|
jobId={
|
|
conversation.job_conversations[0] &&
|
|
conversation.job_conversations[0].jobid
|
|
}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<Popover
|
|
content={
|
|
conversation.job_conversations.length === 0 ? (
|
|
<div>{t("messaging.errors.noattachedjobs")}</div>
|
|
) : (
|
|
content
|
|
)
|
|
}
|
|
title={t("messaging.labels.selectmedia")}
|
|
trigger="click"
|
|
visible={visible}
|
|
onVisibleChange={handleVisibleChange}
|
|
>
|
|
<Badge count={selectedMedia.filter((s) => s.isSelected).length}>
|
|
<PictureFilled style={{ margin: "0 .5rem" }} />
|
|
</Badge>
|
|
</Popover>
|
|
);
|
|
}
|