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

Further UI Updates

Browse Source
This commit is contained in:
Patrick Fic
2021-03-29 17:08:52 -07:00
parent 17264ff7d6
commit 6c34b8839c
78 changed files with 1250 additions and 1024 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx
View File

@@ -1,5 +1,5 @@
import { FileExcelFilled } from "@ant-design/icons";
import { Card } from "antd";
import { Card, Col, Row, Space } from "antd";
import React, { useEffect, useState } from "react";
import Gallery from "react-grid-gallery";
import { useTranslation } from "react-i18next";
@@ -104,78 +104,87 @@ function JobsDocumentsComponent({
}, [data, setgalleryImages, t]);
return (
<div className="clearfix">
<div className="imex-flex-row">
<JobsDocumentsGallerySelectAllComponent
galleryImages={galleryImages}
setGalleryImages={setgalleryImages}
/>
<JobsDocumentsDownloadButton galleryImages={galleryImages} />
<JobsDocumentsDeleteButton
galleryImages={galleryImages}
deletionCallback={billsCallback || refetch}
/>
<JobsDocumentsGalleryReassign galleryImages={galleryImages} />
</div>
<DocumentsUploadComponent
jobId={jobId}
billId={billId}
callbackAfterUpload={billsCallback || refetch}
tagsArray={["test"]}
></DocumentsUploadComponent>
<div style={{ marginTop: "2rem" }}>
<Card title={t("jobs.labels.documents-images")}>
<Gallery
images={galleryImages.images}
backdropClosesModal={true}
onClickImage={(props) => {
window.open(
props.target.src,
"_blank",
"toolbar=0,location=0,menubar=0"
);
}}
onSelectImage={(index, image) => {
setgalleryImages({
...galleryImages,
images: galleryImages.images.map((g, idx) =>
index === idx ? { ...g, isSelected: !g.isSelected } : g
),
});
}}
/>
</Card>
<div className="clea rfix">
<Row gutter={[16, 16]}>
<Col span={24}>
<Space wrap>
<JobsDocumentsGallerySelectAllComponent
galleryImages={galleryImages}
setGalleryImages={setgalleryImages}
/>
<JobsDocumentsDownloadButton galleryImages={galleryImages} />
<JobsDocumentsDeleteButton
galleryImages={galleryImages}
deletionCallback={billsCallback || refetch}
/>
<JobsDocumentsGalleryReassign galleryImages={galleryImages} />
</Space>
</Col>
<Col span={24}>
<Card>
<DocumentsUploadComponent
jobId={jobId}
billId={billId}
callbackAfterUpload={billsCallback || refetch}
/>
</Card>
</Col>
<Card title={t("jobs.labels.documents-other")}>
<Gallery
images={galleryImages.other}
backdropClosesModal={true}
enableLightbox={false}
thumbnailStyle={() => {
return {
backgroundImage: <FileExcelFilled />,
height: "100%",
width: "100%",
};
}}
onClickThumbnail={(index) => {
window.open(
galleryImages.other[index].src,
"_blank",
"toolbar=0,location=0,menubar=0"
);
}}
onSelectImage={(index) => {
setgalleryImages({
...galleryImages,
other: galleryImages.other.map((g, idx) =>
index === idx ? { ...g, isSelected: !g.isSelected } : g
),
});
}}
/>
</Card>
</div>
<Col span={24}>
<Card title={t("jobs.labels.documents-images")}>
<Gallery
images={galleryImages.images}
backdropClosesModal={true}
onClickImage={(props) => {
window.open(
props.target.src,
"_blank",
"toolbar=0,location=0,menubar=0"
);
}}
onSelectImage={(index, image) => {
setgalleryImages({
...galleryImages,
images: galleryImages.images.map((g, idx) =>
index === idx ? { ...g, isSelected: !g.isSelected } : g
),
});
}}
/>
</Card>
</Col>
<Col span={24}>
<Card title={t("jobs.labels.documents-other")}>
<Gallery
images={galleryImages.other}
backdropClosesModal={true}
enableLightbox={false}
thumbnailStyle={() => {
return {
backgroundImage: <FileExcelFilled />,
height: "100%",
width: "100%",
};
}}
onClickThumbnail={(index) => {
window.open(
galleryImages.other[index].src,
"_blank",
"toolbar=0,location=0,menubar=0"
);
}}
onSelectImage={(index) => {
setgalleryImages({
...galleryImages,
other: galleryImages.other.map((g, idx) =>
index === idx ? { ...g, isSelected: !g.isSelected } : g
),
});
}}
/>
</Card>
</Col>
</Row>
</div>
);
}

6
client/src/components/jobs-documents-gallery/jobs-documents-gallery.selectall.component.jsx
View File

@@ -1,4 +1,4 @@
import { Button } from "antd";
import { Button, Space } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
@@ -49,7 +49,7 @@ export default function JobsDocumentsGallerySelectAllComponent({
};
return (
<>
<Space wrap>
<Button onClick={handleSelectAll}>
{t("general.actions.selectall")}
</Button>
@@ -62,6 +62,6 @@ export default function JobsDocumentsGallerySelectAllComponent({
<Button onClick={handleDeselectAll}>
{t("general.actions.deselectall")}
</Button>
</>
</Space>
);
}