101 lines
3.6 KiB
JavaScript
101 lines
3.6 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 [open, setOpen] = 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:
|
|
!open ||
|
|
!conversation.job_conversations ||
|
|
conversation.job_conversations.length === 0,
|
|
});
|
|
|
|
const handleVisibleChange = (change) => {
|
|
setOpen(change);
|
|
};
|
|
|
|
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 && open && (
|
|
<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"
|
|
open={open}
|
|
onOpenChange={handleVisibleChange}
|
|
>
|
|
<Badge count={selectedMedia.filter((s) => s.isSelected).length}>
|
|
<PictureFilled style={{margin: "0 .5rem"}}/>
|
|
</Badge>
|
|
</Popover>
|
|
);
|
|
}
|