diff --git a/public/css/main.css b/public/css/main.css
index fea36f9a7aba158ddf657b507ce0876d26b882aa..a92f3a475379bc37c0fa3dd3a01c5c890a02f8b5 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -20,11 +20,10 @@ html {
--main-black3: rgba(0, 0, 0, 0.3);
--main-black1: rgba(0, 0, 0, 0.1);
--main-black87: RGBA(0, 0, 0, 0.87);
- --main-black40: RGBA(0, 0, 0, 0.40);
- --main-black60: rgba(0,0,0,0.60);
+ --main-black40: RGBA(0, 0, 0, 0.4);
+ --main-black60: rgba(0, 0, 0, 0.6);
--black-16: RGBA(0, 0, 0, 0.16);
-
/* ticket window */
--ticket-color: #eceff1;
@@ -200,21 +199,21 @@ html[data-theme="dark"] {
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
- -webkit-user-select: none; /* Safari */
- -khtml-user-select: none; /* Konqueror HTML */
- -moz-user-select: none; /* Old versions of Firefox */
- -ms-user-select: none; /* Internet Explorer/Edge */
- user-select: none; /* Non-prefixed version, currently
+ -webkit-user-select: none; /* Safari */
+ -khtml-user-select: none; /* Konqueror HTML */
+ -moz-user-select: none; /* Old versions of Firefox */
+ -ms-user-select: none; /* Internet Explorer/Edge */
+ user-select: none; /* Non-prefixed version, currently
supported by Chrome, Edge, Opera and Firefox */
}
#root {
min-height: 100vh;
- background-color: var(--app-background)
+ background-color: var(--app-background);
}
.white-bg {
- background-color: #fff;
+ background-color: #fff;
}
.fullHeight {
@@ -537,6 +536,7 @@ hr.topLineHelp {
/* iPhone 5 ----------- */
@media only screen and (min-width: 320px) and (max-width: 380px) {
/* Styles */
+
.customPadding {
margin-left: 0em;
padding-right: 0em;
@@ -872,9 +872,9 @@ hr.topLineHelp {
.login-container {
background-color: #fff;
padding: 4rem 8rem;
- font-family: 'Lato';
+ font-family: "Lato";
box-shadow: 2px 2px 22px -10px rgb(0 0 0 / 30%);
- border-radius: 4px;
+ border-radius: 4px;
}
.login-logo {
@@ -891,7 +891,7 @@ hr.topLineHelp {
}
.form-signin .form-control::placeholder {
- color: var(--main-black40)
+ color: var(--main-black40);
}
.form-signin .form-control {
@@ -918,13 +918,13 @@ hr.topLineHelp {
margin-top: 1rem;
font-size: 0.875rem;
margin-bottom: 16px;
- font-family: 'Lato-Bold';
+ font-family: "Lato-Bold";
font-weight: 500;
color: var(--main-black87);
}
.form-signin .form-text {
- font-size: 0.750em;
+ font-size: 0.75em;
margin-bottom: 8px;
margin-top: 0;
}
@@ -1437,7 +1437,7 @@ body {
display: none !important;
}
- .login-container{
+ .login-container {
padding: 20px 10px;
}
}
@@ -1865,7 +1865,7 @@ textarea,
padding: 0.375rem 2rem !important;
color: #ffffff !important;
margin-top: 16px;
- font-family: 'Lato-Bold';
+ font-family: "Lato-Bold";
font-weight: 700;
}
@@ -2554,7 +2554,7 @@ input[type="checkbox"] {
margin-top: -30px;
}
-.form-check-input[type=checkbox]:focus {
+.form-check-input[type="checkbox"]:focus {
box-shadow: none !important;
}
@@ -2570,7 +2570,7 @@ input[type="checkbox"] {
position: relative;
cursor: pointer;
background: #fff;
- border: none !important
+ border: none !important;
}
input[type="checkbox"]:after {
@@ -2596,7 +2596,6 @@ input[type="checkbox"]:after {
background: var(--input-background);
}
-
.card-body input[type="checkbox"]:after {
border: 1px solid var(--border-1);
}
@@ -3336,3 +3335,23 @@ html[data-theme="dark"] .admin-left-section ul li.active .profileCircle {
}
/* Simulator styles ends here */
+
+/* User dropdown styles starts here */
+
+.username-1 {
+ font-family: "Lato";
+ font-size: 0.875rem;
+}
+
+.email-1 {
+ font-family: "Lato-Bold";
+ font-size: 0.8rem;
+ color: var(--input-text);
+}
+
+.custom-dropdown-1 {
+ width: fit-content;
+ top: 0.5rem !important;
+}
+
+/* User dropdown styles ends here */
diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
index 9901d197b30381b83efb7a5780ef7580d6e4e8b1..e78165ecbe458325905ead9f5958f334139ef5b3 100644
--- a/src/components/common/Header.tsx
+++ b/src/components/common/Header.tsx
@@ -17,18 +17,34 @@ interface LoginProps {
interface LoginState {
userName: any;
+ userInfo: any;
}
class Header extends Component<LoginProps, LoginState> {
constructor(props: any) {
super(props);
this.state = {
userName: Auth.get("username"),
+ userInfo: {},
};
this.logout = this.logout.bind(this);
}
+ componentDidMount() {
+ let userDetails: any = localStorage.getItem("user");
+
+ let userObj = {
+ firstName: JSON.parse(userDetails).firstName,
+ lastName: JSON.parse(userDetails).lastName,
+ };
+
+ this.setState({
+ userInfo: userObj,
+ });
+ }
+
getUserInitials(userName: string) {
// console.log('userName: ', userName)
+
if (userName) {
const userNameArr = userName.split(".").slice(0, 2);
return userNameArr
@@ -59,31 +75,45 @@ class Header extends Component<LoginProps, LoginState> {
/>
</div>
<div className="col-6 pt-3">
- <div className="dropdown">
- <div
- className="float-right user-name-avatar"
- role="button"
- id="dropdownMenuLinkThree"
- data-toggle="dropdown"
- aria-haspopup="true"
- aria-expanded="false"
- >
- <span>
- {this.getUserInitials(
- (this.state.userName && this.state.userName) || "G"
- )}
- </span>
- </div>
- <div
- className="dropdown-menu profileDropdown mr-5 cursorStyleOne"
- aria-labelledby="dropdownMenuLinkThree"
- >
- <p
- className="dropdown-item dateFilterTextColor"
- onClick={this.logout}
+ <div className="">
+ <div className="dropdown">
+ <div
+ className="float-right user-name-avatar"
+ role="button"
+ id="dropdownMenuLinkThree"
+ data-toggle="dropdown"
+ aria-haspopup="true"
+ aria-expanded="false"
>
- Logout
- </p>
+ <span>
+ {this.getUserInitials(
+ (this.state.userName && this.state.userName) || "G"
+ )}
+ </span>
+ </div>
+ <ul
+ className="dropdown-menu cursorStyleOne custom-dropdown-1 dropdown-menu-right"
+ aria-labelledby="dropdownMenuLinkThree"
+ >
+ <label className="username-1 px-4 pb-0 mb-0">
+ {Object.keys(this.state.userInfo)
+ ? this.state.userInfo.firstName +
+ " " +
+ this.state.userInfo.lastName
+ : ""}
+ </label>
+ <br />
+ <label className="email-1 px-4 ">
+ {this.state.userName && this.state.userName}
+ </label>
+ <br />
+ <label
+ className="dropdown-item px-4 cursorStyleOne"
+ onClick={this.logout}
+ >
+ Logout
+ </label>
+ </ul>
</div>
</div>
</div>
diff --git a/src/components/form-elements/BooleanField.tsx b/src/components/form-elements/BooleanField.tsx
index a734d1e086aacd4dd4d041e7ea963a5780af0b8a..e8dc18250e86461818e85fa4d8a3c7ae6bfb4d15 100644
--- a/src/components/form-elements/BooleanField.tsx
+++ b/src/components/form-elements/BooleanField.tsx
@@ -31,8 +31,15 @@ export const BooleanField = ({
<br />
</>
)}
+
<label className="switch">
- <input type="checkbox" id={"field-" + label} name={"field_" + label} disabled={isReadOnly}/>
+ <input
+ type="checkbox"
+ id={"field-" + label}
+ name={"field_" + label}
+ disabled={isReadOnly}
+ checked={value === "booleanTrue" ? true : false}
+ />
<span className="slider round"></span>
</label>
</div>
diff --git a/src/components/form-elements/FileUploadView.module.css b/src/components/form-elements/FileUploadView.module.css
index 73d427ef07f90a1d5a8af407dd6716b415f16b48..4bbffa6f11a313569e2672365fce0b58d431adfe 100644
--- a/src/components/form-elements/FileUploadView.module.css
+++ b/src/components/form-elements/FileUploadView.module.css
@@ -16,6 +16,10 @@
font-size: 0.875rem;
letter-spacing: 0.25px;
line-height: 1.429;
+ width: 100%;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
.file_upload_list a {
diff --git a/src/components/form-elements/FileUploadView.tsx b/src/components/form-elements/FileUploadView.tsx
index 51e639e151335cdd867d1580b5c3753274ed210a..96e234cd29d62e20b838341c771c23d4342e736c 100644
--- a/src/components/form-elements/FileUploadView.tsx
+++ b/src/components/form-elements/FileUploadView.tsx
@@ -40,10 +40,10 @@ export const FileUploadView = ({
<div
className={`${styles.file_upload_list} row p-0 m-0 p-1 m-2`}
>
- <div className="col-6">
+ <div className="col-sm-12 col-md-12 col-lg-6">
<p className="float-start p-0 m-0">{i.split("/")[5]}</p>
</div>
- <div className="col-6">
+ <div className="col-sm-12 col-md-12 col-lg-6">
<a className="float-end p-0 m-0" target="_blank" href={i} rel="noreferrer">
Preview on new tab
</a>
diff --git a/src/components/form-elements/InspectCheckOne.module.css b/src/components/form-elements/InspectCheckOne.module.css
index f6001b9201659cebd7d8d971b5bacf4912cd2f4d..d56bc8159bdbf35408e81f15f6c5e312b7b416cb 100644
--- a/src/components/form-elements/InspectCheckOne.module.css
+++ b/src/components/form-elements/InspectCheckOne.module.css
@@ -2,40 +2,63 @@
@import url("../../assets/fonts/fonts.css");
.inspect_check_one {
- background-color: var(--black-04);
- border: 1px solid var(--black-08);
- border-radius: 4px;
- min-height: 8.25rem;
+ background-color: var(--black-04);
+ border: 1px solid var(--black-08);
+ border-radius: 4px;
+ min-height: 8.25rem;
}
.inspect_check_one label {
- color: var(--black-60);
- font-family: "Lato-Bold";
- font-size: 0.875rem;
- letter-spacing: 0.25px;
- line-height: 1.429;
- cursor: pointer;
+ color: var(--black-60);
+ font-family: "Lato-Bold";
+ font-size: 0.875rem;
+ letter-spacing: 0.25px;
+ line-height: 1.429;
+ cursor: pointer;
}
.inspect_check_one_custom_label_one {
- color: var(--black-60);
- font-family: "Lato-Bold";
- font-size: 0.875rem;
- letter-spacing: 0.5px;
- line-height: 1.429;
+ color: var(--black-60);
+ font-family: "Lato-Bold";
+ font-size: 0.875rem;
+ letter-spacing: 0.5px;
+ line-height: 1.429;
}
.inspect_check_one_comments {
- background-color: var(--white-100);
- color: var(--black-60);
- font-family: "Lato-Regular";
- font-size: 0.875rem;
- letter-spacing: 0.25px;
- line-height: 1.5;
- padding: 1.25rem 1.15rem 0.25rem 1.15rem;
+ background-color: var(--white-100);
+ color: var(--black-60);
+ font-family: "Lato-Regular";
+ font-size: 0.875rem;
+ letter-spacing: 0.25px;
+ line-height: 1.5;
+ padding: 1.25rem 1.15rem 0.25rem 1.15rem;
}
.custom_material_icons {
- color: var(--black-60);
- vertical-align: middle;
-}
\ No newline at end of file
+ color: var(--black-60);
+ vertical-align: middle;
+}
+
+.custom_material_icons_two {
+ color: var(--black-60);
+ vertical-align: sub;
+}
+
+.preview_image {
+ position: relative;
+ cursor: pointer;
+}
+
+.custom_close_btn {
+ color: var(--status-red);
+ position: absolute;
+ text-align: center;
+ margin-left: -8%;
+ opacity: 0;
+ transition: 0 0.35s ease;
+}
+
+.preview_image:hover .custom_close_btn {
+ opacity: 1;
+}
diff --git a/src/components/form-elements/InspectCheckOne.tsx b/src/components/form-elements/InspectCheckOne.tsx
index a7d49005acf9eea8cb09ebc6b94975a2df3220b2..8d17106abfd0aa8953ff07c8bfacbece354870d6 100644
--- a/src/components/form-elements/InspectCheckOne.tsx
+++ b/src/components/form-elements/InspectCheckOne.tsx
@@ -1,6 +1,13 @@
-import { useState, useEffect } from "react";
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { useState, useEffect, useRef } from "react";
import styles from "./InspectCheckOne.module.css";
import { TextField } from "./TextField";
+import { HeadingFour } from "../headings";
+import { useRecoilState } from "recoil";
+import { dataObjectFileUpload as dataObjectFileUploadAtom } from "../../states/atoms";
+import { FormService } from "../../services";
+import { APP } from "../../constants";
+import Notify from "../../helpers/notify";
/**
* InspectCheckOne component renders
@@ -15,8 +22,13 @@ interface InspectCheckOneProps {
modalId?: string;
modalTriggerLabel?: string;
clickHandler?: (event: any) => void;
+ attachmentRemoveHandler?: (event: any) => void;
inspectionValue?: any;
disableEdit: boolean;
+ showAttachment?: boolean;
+ attachments?: any;
+ id?: string;
+ showAttachmentRemover?: boolean;
}
export const InspectCheckOne = ({
@@ -27,17 +39,58 @@ export const InspectCheckOne = ({
modalId,
modalTriggerLabel,
clickHandler,
+ attachmentRemoveHandler,
inspectionValue,
disableEdit,
+ showAttachment,
+ attachments,
+ id,
+ showAttachmentRemover,
}: InspectCheckOneProps) => {
const [insValue, setInsValue] = useState("");
+ const [dataObjectFileUploadValue, setDataObjectFileUploadValue] =
+ useRecoilState(dataObjectFileUploadAtom);
+
useEffect(() => {
if (inspectionValue !== "") {
setInsValue(inspectionValue);
}
}, [inspectionValue]);
+ useEffect(() => {
+ document
+ .getElementById(`${id}`)
+ ?.addEventListener("change", (event: any) => {
+ let label = event.target.id.split("attachment")[1];
+ let file = event.target!.files[0];
+
+ let data = new FormData();
+ data.append("files", file);
+
+ FormService.uploadfile(data).then(
+ (response) => {
+ if (response.statusInfo.statusCode === APP.CODE.SUCCESS) {
+ let derviedObject = {
+ field: label,
+ value: response.responseData[0],
+ };
+
+ setDataObjectFileUploadValue(derviedObject);
+ } else {
+ Notify.error(response.statusInfo.errorMessage);
+ }
+ },
+ (error) => {
+ error.statusInfo
+ ? Notify.error(error.statusInfo.errorMessage)
+ : Notify.error(error.message);
+ }
+ );
+ });
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
return (
<div className={`${styles.inspect_check_one} p-4`} onClick={clickHandler}>
<label>{label}</label>
@@ -79,6 +132,30 @@ export const InspectCheckOne = ({
) : (
""
)}
+
+ {showAttachment && (
+ <>
+ <div className="float-end pt-4">
+ <input
+ type={"file"}
+ id={id}
+ style={{ display: "none" }}
+ accept="image/png, image/gif, image/jpeg"
+ />
+ <label
+ htmlFor={id}
+ className={`${styles.inspect_check_one_custom_label_one} me-4 me-sm-0 me-md-0 me-lg-4 me-xl-4`}
+ >
+ {"Attach photo"}
+ <span
+ className={`${styles.custom_material_icons_two} material-icons ps-2`}
+ >
+ add_a_photo
+ </span>
+ </label>
+ </div>
+ </>
+ )}
</div>
</div>
@@ -101,6 +178,38 @@ export const InspectCheckOne = ({
</div>
</div>
)}
+
+ {attachments && attachments.length > 0 && (
+ <div className="mt-4">
+ <HeadingFour heading="Captured/Attached photos" />
+ <div className="row">
+ {attachments.map((i: any, j: number) => {
+ return (
+ <div
+ className={`${styles.preview_image} mt-3 col-sm-12 col-md-3 col-lg-3`}
+ key={j}
+ >
+ <img
+ src={i}
+ alt={`Attachment ${j}`}
+ title={`Attachment ${j}`}
+ height="100"
+ width="177"
+ />
+ {showAttachmentRemover && (
+ <i
+ className={`${styles.custom_close_btn} material-icons `}
+ onClick={attachmentRemoveHandler}
+ >
+ close
+ </i>
+ )}
+ </div>
+ );
+ })}
+ </div>
+ </div>
+ )}
</div>
);
};
diff --git a/src/components/form/FormViewer.js b/src/components/form/FormViewer.js
index c8b1a2ce805944381e2d744ab30248eacdc04be3..7fed8183aff5f04b2b77f791a7fe28f1487e151f 100644
--- a/src/components/form/FormViewer.js
+++ b/src/components/form/FormViewer.js
@@ -259,7 +259,19 @@ class FormViewer extends Component {
// console.log(this.state.formFields);
for (var key of Object.keys(fields)) {
var element = document.getElementsByName(key);
+
if (element.length > 0) {
+ if (element[0].type === "boolean" || element[0].type === "text") {
+ var len = element.length;
+ let values = fields[key].split(",");
+ for (var j = 0; j < len; j++) {
+ // console.log(values.includes("booleanTrue"));
+ if (values.includes("booleanTrue")) {
+ element[j].parentNode.classList.add("selected");
+ element[j].checked = true;
+ }
+ }
+ }
if (element[0].type === "checkbox" || element[0].type === "radio") {
var len = element.length;
let values = fields[key].split(",");
@@ -423,6 +435,7 @@ class FormViewer extends Component {
order = "";
var form = document.getElementById("application-form");
const formData = new FormData(form);
+
const data = Array.from(formData.entries()).reduce(
(memo, pair) => ({
...memo,
@@ -435,6 +448,24 @@ class FormViewer extends Component {
order = this.state.formFieldGroups[index][i]["order"];
obj["field_" + order] =
data["field_" + order] !== undefined ? data["field_" + order] : "";
+
+ var booleans = document.getElementsByClassName(
+ "field_" + order + "_boolean"
+ );
+
+ if (booleans.length) {
+ if (booleans[0].type === "checkbox") {
+ var len = booleans.length;
+ let temp = [];
+ for (var j = 0; j < len; j++) {
+ if (booleans[j].parentElement.classList.contains("selected")) {
+ temp.push((booleans[j].value = "booleanTrue"));
+ }
+ }
+ obj["field_" + order] = temp.join();
+ }
+ }
+
var checkboxes = document.getElementsByClassName(
"field_" + order + "_checkbox"
);
@@ -469,6 +500,7 @@ class FormViewer extends Component {
obj["field_" + order] = files[0].getAttribute("path");
}
}
+
this.setState({
formFields: obj,
});
@@ -499,9 +531,11 @@ class FormViewer extends Component {
fieldGroups[this.state.formHeadings[i]] = {};
for (let j = 0; j < this.state.formFieldGroups[i].length; j++) {
// console.log(this.state.formFieldGroups[i][j].name);
- fieldGroups[this.state.formHeadings[i]][
- this.state.formFieldGroups[i][j].name
- ] = fieldsData[this.state.formFieldGroups[i][j].name];
+ if (fieldsData[this.state.formFieldGroups[i][j].name] !== "") {
+ fieldGroups[this.state.formHeadings[i]][
+ this.state.formFieldGroups[i][j].name
+ ] = fieldsData[this.state.formFieldGroups[i][j].name];
+ }
}
}
// console.log(fieldGroups);
@@ -515,8 +549,10 @@ class FormViewer extends Component {
applicationId: this.props.match.params.applicationId,
}),
};
+
// formDetails = JSON.stringify(formDetails);
- // console.log(formDetails);
+ // console.log(JSON.parse(formDetails));
+
FormService.submit(formDetails).then(
(response) => {
// console.log(response);
diff --git a/src/components/form/fields/Checkbox.js b/src/components/form/fields/Checkbox.js
index e663d0cc4bdad2ee1296abfd99895c5f3d25687a..2de562d7afb1488591c02bc65fdb1146e329cc2b 100644
--- a/src/components/form/fields/Checkbox.js
+++ b/src/components/form/fields/Checkbox.js
@@ -42,6 +42,7 @@ class Checkbox extends Component {
</span>
)}
</label>
+
{this.props.field.values.map((option, key) => (
<div className="custom-form-check form-check" key={key}>
<label
diff --git a/src/components/form/fields/Toggle.js b/src/components/form/fields/Toggle.js
index 768109f4a264d20a9ec8de508d2839a32dfddfad..0af35dcbc17e1be98a2f42c8e278699e1120dd50 100644
--- a/src/components/form/fields/Toggle.js
+++ b/src/components/form/fields/Toggle.js
@@ -16,6 +16,30 @@ class Toggle extends Component {
handleChange = (event) => {};
+ componentDidMount() {
+ if (this.props.field.fieldType === LANG.FIELD_TYPES.boolean.toLowerCase()) {
+ setTimeout(() => {
+ let booleanField = document.getElementById(
+ `field-${this.props.field.order}`
+ );
+
+ booleanField.type = "checkbox";
+ }, 250);
+ }
+ }
+
+ componentDidUpdate() {
+ if (this.props.field.fieldType === LANG.FIELD_TYPES.boolean.toLowerCase()) {
+ setTimeout(() => {
+ let booleanField = document.getElementById(
+ `field-${this.props.field.order}`
+ );
+
+ booleanField.type = "checkbox";
+ }, 250);
+ }
+ }
+
render() {
// strings.setLanguage(
// localStorage.getItem("language") || this.state.language
@@ -36,11 +60,17 @@ class Toggle extends Component {
)}
</label>
<br />
+
<label className="switch">
<input
type="checkbox"
id={"field-" + this.props.field.order}
name={"field_" + this.props.field.order}
+ className={
+ "mr-2 field_" +
+ this.props.field.order +
+ "_boolean"
+ }
/>
<span className="slider round"></span>
</label>
diff --git a/src/layouts/Inspector/ConsentFormView.tsx b/src/layouts/Inspector/ConsentFormView.tsx
index 05c09397d5976cbdfb51a99ddd80a687b65ccaf4..136b347c8e7995e989e7ae28fbb9b23b98a41ac2 100644
--- a/src/layouts/Inspector/ConsentFormView.tsx
+++ b/src/layouts/Inspector/ConsentFormView.tsx
@@ -141,6 +141,7 @@ export const ConsentFormView = ({
isCorrect: "",
inspectionValue: "",
comments: "",
+ attachments: [],
});
}
return null;
@@ -187,6 +188,7 @@ export const ConsentFormView = ({
isCorrect: "",
inspectionValue: "",
comments: "",
+ attachments: k.attachments,
});
} else {
return tempFormArray.push({
@@ -204,6 +206,7 @@ export const ConsentFormView = ({
inspectionValue:
tempArrayTwo[n].fields[k.label]["inspectionValue"],
comments: tempArrayTwo[n].fields[k.label]["comments"],
+ attachments: tempArrayTwo[n].fields[k.label]["attachments"],
});
}
});
@@ -226,6 +229,7 @@ export const ConsentFormView = ({
isCorrect: "",
inspectionValue: "",
comments: "",
+ attachments: m.attachments,
});
});
return null;
@@ -852,10 +856,14 @@ export const ConsentFormView = ({
</div>
<div className="mt-3">
+
<InspectCheckOne
label="Is the given information found correct?"
inspectionValue={k.inspectionValue}
disableEdit={true}
+ showAttachment={false}
+
+ attachments={k.attachments}
children={
<div className="d-flex flex-row">
{k.isCorrect === "" ? (
@@ -941,6 +949,8 @@ export const ConsentFormView = ({
label="Is the given information found correct?"
inspectionValue={k.inspectionValue}
disableEdit={true}
+ showAttachment={false}
+ attachments={k.attachments}
children={
<div className="d-flex flex-row">
{k.isCorrect === "" ? (
@@ -1026,6 +1036,8 @@ export const ConsentFormView = ({
label="Is the given information found correct?"
inspectionValue={k.inspectionValue}
disableEdit={true}
+ showAttachment={false}
+ attachments={k.attachments}
children={
<div className="d-flex flex-row">
{k.isCorrect === "" ? (
@@ -1113,6 +1125,8 @@ export const ConsentFormView = ({
label="Is the given information found correct?"
inspectionValue={k.inspectionValue}
disableEdit={true}
+ showAttachment={false}
+ attachments={k.attachments}
children={
<div className="d-flex flex-row">
{k.isCorrect === "" ? (
@@ -1216,6 +1230,8 @@ export const ConsentFormView = ({
label="Is the given information found correct?"
inspectionValue={k.inspectionValue}
disableEdit={true}
+ showAttachment={false}
+ attachments={k.attachments}
children={
<div className="d-flex flex-row">
{k.isCorrect === "" ? (
@@ -1300,6 +1316,8 @@ export const ConsentFormView = ({
label="Is the given information found correct?"
inspectionValue={k.inspectionValue}
disableEdit={true}
+ showAttachment={false}
+ attachments={k.attachments}
children={
<div className="d-flex flex-row">
{k.isCorrect === "" ? (
@@ -1385,6 +1403,8 @@ export const ConsentFormView = ({
label="Is the given information found correct?"
inspectionValue={k.inspectionValue}
disableEdit={true}
+ showAttachment={false}
+ attachments={k.attachments}
children={
<div className="d-flex flex-row">
{k.isCorrect === "" ? (
@@ -1463,7 +1483,7 @@ export const ConsentFormView = ({
isReadOnly={true}
label={k.label || ""}
option={k.defaultValues}
- value={k.value.split(",") || ""}
+ value={k.value ? k.value.split(",") : ""}
isMultiple={true}
/>
</div>
@@ -1473,6 +1493,8 @@ export const ConsentFormView = ({
label="Is the given information found correct?"
inspectionValue={k.inspectionValue}
disableEdit={true}
+ showAttachment={false}
+ attachments={k.attachments}
children={
<div className="d-flex flex-row">
{k.isCorrect === "" ? (
@@ -1548,7 +1570,7 @@ export const ConsentFormView = ({
<CheckBoxField
label={k.label || ""}
showLabel={false}
- value={k.value.split(",") || ""}
+ value={k.value ? k.value.split(",") : ""}
defaultValues={k.defaultValues}
/>
</div>
@@ -1558,6 +1580,8 @@ export const ConsentFormView = ({
label="Is the given information found correct?"
inspectionValue={k.inspectionValue}
disableEdit={true}
+ showAttachment={false}
+ attachments={k.attachments}
children={
<div className="d-flex flex-row">
{k.isCorrect === "" ? (
@@ -1632,7 +1656,7 @@ export const ConsentFormView = ({
<FileUploadView
showLabel={k.label ? true : false}
label={k.label || ""}
- value={k.value.split(",") || ""}
+ value={k.value ? k.value.split(",") : ""}
/>
</div>
@@ -1641,6 +1665,8 @@ export const ConsentFormView = ({
label="Is the given information found correct?"
inspectionValue={k.inspectionValue}
disableEdit={true}
+ showAttachment={false}
+ attachments={k.attachments}
children={
<div className="d-flex flex-row">
{k.isCorrect === "" ? (
@@ -1715,6 +1741,7 @@ export const ConsentFormView = ({
<BooleanField
showLabel={k.label ? true : false}
label={k.label || ""}
+ value={k.value}
isReadOnly={true}
/>
</div>
@@ -1723,6 +1750,8 @@ export const ConsentFormView = ({
label="Is the given information found correct?"
inspectionValue={k.inspectionValue}
disableEdit={true}
+ showAttachment={false}
+ attachments={k.attachments}
children={
<div className="d-flex flex-row">
{k.isCorrect === "" ? (
diff --git a/src/layouts/Inspector/FormView.tsx b/src/layouts/Inspector/FormView.tsx
index 6afd451a602ffff63555806be2bdebd7bde776ff..0b176f534e3919e8756333d3167dd41f0998af9a 100644
--- a/src/layouts/Inspector/FormView.tsx
+++ b/src/layouts/Inspector/FormView.tsx
@@ -23,6 +23,7 @@ import {
modalTwoTextArea as modalTwoTextAreaAtom,
modalTwoInspectionValue as modalTwoInspectionValueAtom,
dataObjectInspectionForm as dataObjectInspectionFormAtom,
+ dataObjectFileUpload as dataObjectFileUploadAtom,
} from "../../states/atoms";
import { useHistory } from "react-router-dom";
@@ -53,8 +54,12 @@ export const FormView = ({ applicationData, formData }: FormViewProps) => {
dataObjectInspectionFormAtom
);
+ const dataObjectAttachment = useRecoilState(dataObjectFileUploadAtom);
+
let history = useHistory();
+ const [file, setFile] = useState({});
+
const [processedData, setProcessedData] = useState<any[]>([]);
const updateMenuSelection = (e: any, value: string) => {
@@ -128,6 +133,7 @@ export const FormView = ({ applicationData, formData }: FormViewProps) => {
isCorrect: "",
inspectionValue: "",
comments: "",
+ attachments: [],
});
}
return null;
@@ -174,6 +180,7 @@ export const FormView = ({ applicationData, formData }: FormViewProps) => {
isCorrect: "",
inspectionValue: "",
comments: "",
+ attachments: [],
});
} else {
return tempFormArray.push({
@@ -191,6 +198,7 @@ export const FormView = ({ applicationData, formData }: FormViewProps) => {
inspectionValue:
tempArrayTwo[n].fields[k.label]["inspectionValue"],
comments: tempArrayTwo[n].fields[k.label]["comments"],
+ attachments: [],
});
}
});
@@ -213,6 +221,7 @@ export const FormView = ({ applicationData, formData }: FormViewProps) => {
isCorrect: "",
inspectionValue: "",
comments: "",
+ attachments: [],
});
});
return null;
@@ -251,7 +260,6 @@ export const FormView = ({ applicationData, formData }: FormViewProps) => {
setProcessedData(tempArray);
}
}
-
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [applicationData]);
@@ -379,6 +387,28 @@ export const FormView = ({ applicationData, formData }: FormViewProps) => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedMenuLabel, processedData]);
+ useEffect(() => {
+ if (Object.keys(dataObjectAttachment[0]).length > 0) {
+ let label = Object.values(dataObjectAttachment[0])[0];
+ let file = Object.values(dataObjectAttachment[0])[1];
+
+ let tempArray = [...processedData];
+ tempArray.map((i, j) => {
+ i.fields &&
+ i.fields.map((m: any, n: number) => {
+ if (m.label === label) {
+ return m.attachments.push(file);
+ }
+ return null;
+ });
+ return null;
+ });
+ setProcessedData(tempArray);
+ }
+
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [dataObjectAttachment[0]]);
+
const processFormData = (e: any) => {
e.preventDefault();
@@ -392,6 +422,7 @@ export const FormView = ({ applicationData, formData }: FormViewProps) => {
[m.label]: {
value: m.isCorrect ? "correct" : "incorrect",
comments: m.comments,
+ attachments: m.attachments,
inspectionValue: m.inspectionValue,
},
...dataObject[i.sideMenu],
@@ -409,6 +440,27 @@ export const FormView = ({ applicationData, formData }: FormViewProps) => {
setDataObjectFormValue(dataObject);
};
+ const removeAttachment = (e: any, id: any) => {
+ e.preventDefault();
+
+ let fileName = e.target.parentElement.children[0].currentSrc;
+
+ let tempArray = [...processedData];
+ tempArray.map((i, j) => {
+ i.fields &&
+ i.fields.map((m: any, n: number) => {
+ if (m.label === id) {
+ let index = m.attachments.indexOf(fileName);
+ if (index > -1) {
+ m.attachments.splice(index, 1);
+ }
+ }
+ return null;
+ });
+ return null;
+ });
+ setProcessedData(tempArray);
+ };
return (
<div className="">
{applicationData && (
@@ -478,6 +530,13 @@ export const FormView = ({ applicationData, formData }: FormViewProps) => {
k.inspectionValue
);
}}
+ showAttachmentRemover={true}
+ attachmentRemoveHandler={(e) =>
+ removeAttachment(e, k.label)
+ }
+ showAttachment={true}
+ id={`attachment${k.label}`}
+ attachments={k.attachments}
inspectionValue={k.inspectionValue}
children={
<div className="d-flex flex-row">
@@ -632,12 +691,19 @@ export const FormView = ({ applicationData, formData }: FormViewProps) => {
label="Is the given information found correct?"
modalTriggerLabel={"Edit"}
disableEdit={false}
+ showAttachment={true}
+ attachments={k.attachments}
clickHandler={(e) => {
setModalTextArea(k.comments);
setModalInspectionValue(
k.inspectionValue
);
}}
+ showAttachmentRemover={true}
+ attachmentRemoveHandler={(e) =>
+ removeAttachment(e, k.label)
+ }
+ id={`attachment${k.label}`}
inspectionValue={k.inspectionValue}
children={
<div className="d-flex flex-row">
@@ -792,12 +858,19 @@ export const FormView = ({ applicationData, formData }: FormViewProps) => {
label="Is the given information found correct?"
modalTriggerLabel={"Edit"}
disableEdit={false}
+ showAttachment={true}
+ attachments={k.attachments}
clickHandler={(e) => {
setModalTextArea(k.comments);
setModalInspectionValue(
k.inspectionValue
);
}}
+ showAttachmentRemover={true}
+ attachmentRemoveHandler={(e) =>
+ removeAttachment(e, k.label)
+ }
+ id={`attachment${k.label}`}
inspectionValue={k.inspectionValue}
children={
<div className="d-flex flex-row">
@@ -954,12 +1027,19 @@ export const FormView = ({ applicationData, formData }: FormViewProps) => {
label="Is the given information found correct?"
modalTriggerLabel={"Edit"}
disableEdit={false}
+ showAttachment={true}
+ attachments={k.attachments}
clickHandler={(e) => {
setModalTextArea(k.comments);
setModalInspectionValue(
k.inspectionValue
);
}}
+ showAttachmentRemover={true}
+ attachmentRemoveHandler={(e) =>
+ removeAttachment(e, k.label)
+ }
+ id={`attachment${k.label}`}
inspectionValue={k.inspectionValue}
children={
<div className="d-flex flex-row">
@@ -1132,12 +1212,19 @@ export const FormView = ({ applicationData, formData }: FormViewProps) => {
label="Is the given information found correct?"
modalTriggerLabel={"Edit"}
disableEdit={false}
+ showAttachment={true}
+ attachments={k.attachments}
clickHandler={(e) => {
setModalTextArea(k.comments);
setModalInspectionValue(
k.inspectionValue
);
}}
+ showAttachmentRemover={true}
+ attachmentRemoveHandler={(e) =>
+ removeAttachment(e, k.label)
+ }
+ id={`attachment${k.label}`}
inspectionValue={k.inspectionValue}
children={
<div className="d-flex flex-row">
@@ -1291,12 +1378,19 @@ export const FormView = ({ applicationData, formData }: FormViewProps) => {
label="Is the given information found correct?"
modalTriggerLabel={"Edit"}
disableEdit={false}
+ showAttachment={true}
+ attachments={k.attachments}
clickHandler={(e) => {
setModalTextArea(k.comments);
setModalInspectionValue(
k.inspectionValue
);
}}
+ showAttachmentRemover={true}
+ attachmentRemoveHandler={(e) =>
+ removeAttachment(e, k.label)
+ }
+ id={`attachment${k.label}`}
inspectionValue={k.inspectionValue}
children={
<div className="d-flex flex-row">
@@ -1451,12 +1545,19 @@ export const FormView = ({ applicationData, formData }: FormViewProps) => {
label="Is the given information found correct?"
modalTriggerLabel={"Edit"}
disableEdit={false}
+ showAttachment={true}
+ attachments={k.attachments}
clickHandler={(e) => {
setModalTextArea(k.comments);
setModalInspectionValue(
k.inspectionValue
);
}}
+ showAttachmentRemover={true}
+ attachmentRemoveHandler={(e) =>
+ removeAttachment(e, k.label)
+ }
+ id={`attachment${k.label}`}
inspectionValue={k.inspectionValue}
children={
<div className="d-flex flex-row">
@@ -1605,7 +1706,7 @@ export const FormView = ({ applicationData, formData }: FormViewProps) => {
isReadOnly={true}
label={k.label || ""}
option={k.defaultValues}
- value={k.value.split(",") || ""}
+ value={k.value ? k.value.split(",") : ""}
isMultiple={true}
/>
</div>
@@ -1614,12 +1715,19 @@ export const FormView = ({ applicationData, formData }: FormViewProps) => {
label="Is the given information found correct?"
modalTriggerLabel={"Edit"}
disableEdit={false}
+ showAttachment={true}
+ attachments={k.attachments}
clickHandler={(e) => {
setModalTextArea(k.comments);
setModalInspectionValue(
k.inspectionValue
);
}}
+ showAttachmentRemover={true}
+ attachmentRemoveHandler={(e) =>
+ removeAttachment(e, k.label)
+ }
+ id={`attachment${k.label}`}
inspectionValue={k.inspectionValue}
children={
<div className="d-flex flex-row">
@@ -1761,7 +1869,7 @@ export const FormView = ({ applicationData, formData }: FormViewProps) => {
<CheckBoxField
label={k.label || ""}
showLabel={false}
- value={k.value.split(",") || ""}
+ value={k.value ? k.value.split(",") : ""}
defaultValues={k.defaultValues}
/>
</div>
@@ -1770,12 +1878,19 @@ export const FormView = ({ applicationData, formData }: FormViewProps) => {
label="Is the given information found correct?"
modalTriggerLabel={"Edit"}
disableEdit={false}
+ showAttachment={true}
+ attachments={k.attachments}
clickHandler={(e) => {
setModalTextArea(k.comments);
setModalInspectionValue(
k.inspectionValue
);
}}
+ showAttachmentRemover={true}
+ attachmentRemoveHandler={(e) =>
+ removeAttachment(e, k.label)
+ }
+ id={`attachment${k.label}`}
inspectionValue={k.inspectionValue}
children={
<div className="d-flex flex-row">
@@ -1916,13 +2031,11 @@ export const FormView = ({ applicationData, formData }: FormViewProps) => {
<CardThree
children={
<>
- <div className="ps-4 pe-4 pt-3 mb-4 col-7">
+ <div className="ps-4 pe-4 pt-3 mb-4 col-sm-12 col-md-7 col-lg-7">
<FileUploadView
showLabel={k.label ? true : false}
label={k.label || ""}
- value={
- (k.value && k.value.split(",")) || ""
- }
+ value={k.value ? k.value.split(",") : ""}
/>
</div>
<div className="">
@@ -1930,12 +2043,19 @@ export const FormView = ({ applicationData, formData }: FormViewProps) => {
label="Is the given information found correct?"
modalTriggerLabel={"Edit"}
disableEdit={false}
+ showAttachment={true}
+ attachments={k.attachments}
clickHandler={(e) => {
setModalTextArea(k.comments);
setModalInspectionValue(
k.inspectionValue
);
}}
+ showAttachmentRemover={true}
+ attachmentRemoveHandler={(e) =>
+ removeAttachment(e, k.label)
+ }
+ id={`attachment${k.label}`}
inspectionValue={k.inspectionValue}
children={
<div className="d-flex flex-row">
@@ -2080,6 +2200,7 @@ export const FormView = ({ applicationData, formData }: FormViewProps) => {
<BooleanField
showLabel={k.label ? true : false}
label={k.label || ""}
+ value={k.value}
isReadOnly={true}
/>
</div>
@@ -2088,12 +2209,19 @@ export const FormView = ({ applicationData, formData }: FormViewProps) => {
label="Is the given information found correct?"
modalTriggerLabel={"Edit"}
disableEdit={false}
+ showAttachment={true}
+ attachments={k.attachments}
clickHandler={(e) => {
setModalTextArea(k.comments);
setModalInspectionValue(
k.inspectionValue
);
}}
+ showAttachmentRemover={true}
+ attachmentRemoveHandler={(e) =>
+ removeAttachment(e, k.label)
+ }
+ id={`attachment${k.label}`}
inspectionValue={k.inspectionValue}
children={
<div className="d-flex flex-row">
diff --git a/src/layouts/Inspector/InspectionSummaryLayout.tsx b/src/layouts/Inspector/InspectionSummaryLayout.tsx
index 2252995969d6a7e8b3f6645104dd307819521df8..a304222c23d6eaa83074113adad2e313a16e9072 100644
--- a/src/layouts/Inspector/InspectionSummaryLayout.tsx
+++ b/src/layouts/Inspector/InspectionSummaryLayout.tsx
@@ -183,7 +183,9 @@ export const InspectionSummaryLayout = ({
>
{k.firstName[0] + k.lastName[0]}
</div>
- <p className="ps-2 pt-2">{k.firstName + " " + k.lastName}</p>
+ <p className="ps-2 pt-2">
+ {k.firstName + " " + k.lastName}
+ </p>
</div>
</div>
</div>
@@ -217,7 +219,9 @@ export const InspectionSummaryLayout = ({
>
{k.firstName[0] + k.lastName[0]}
</div>
- <p className="ps-2 pt-2">{k.firstName + " " + k.lastName}</p>
+ <p className="ps-2 pt-2">
+ {k.firstName + " " + k.lastName}
+ </p>
</div>
</div>
</div>
diff --git a/src/layouts/Regulator/ReviewApplicationLayout.tsx b/src/layouts/Regulator/ReviewApplicationLayout.tsx
index 55cc734b5d96db856fc5cbbbd876316577d9b660..19132c869c4794c7a9ccfa87238979cc9bd0d7c5 100644
--- a/src/layouts/Regulator/ReviewApplicationLayout.tsx
+++ b/src/layouts/Regulator/ReviewApplicationLayout.tsx
@@ -130,6 +130,7 @@ export const ReviewApplicationLayout = ({
isCorrect: "",
inspectionValue: "",
comments: "",
+ attachments: [],
});
}
return null;
@@ -176,6 +177,7 @@ export const ReviewApplicationLayout = ({
isCorrect: "",
inspectionValue: "",
comments: "",
+ attachments: [],
});
} else {
return tempFormArray.push({
@@ -193,6 +195,7 @@ export const ReviewApplicationLayout = ({
inspectionValue:
tempArrayTwo[n].fields[k.label]["inspectionValue"],
comments: tempArrayTwo[n].fields[k.label]["comments"],
+ attachments: tempArrayTwo[n].fields[k.label]["attachments"],
});
}
});
@@ -215,6 +218,7 @@ export const ReviewApplicationLayout = ({
isCorrect: "",
inspectionValue: "",
comments: "",
+ attachments: [],
});
});
return null;
@@ -788,6 +792,8 @@ export const ReviewApplicationLayout = ({
label="Is the given information found correct?"
inspectionValue={k.inspectionValue}
disableEdit={true}
+ showAttachment={false}
+ attachments={k.attachments}
children={
<div className="d-flex flex-row">
{k.isCorrect === "" ? (
@@ -879,6 +885,8 @@ export const ReviewApplicationLayout = ({
label="Is the given information found correct?"
inspectionValue={k.inspectionValue}
disableEdit={true}
+ showAttachment={false}
+ attachments={k.attachments}
children={
<div className="d-flex flex-row">
{k.isCorrect === "" ? (
@@ -970,6 +978,8 @@ export const ReviewApplicationLayout = ({
label="Is the given information found correct?"
inspectionValue={k.inspectionValue}
disableEdit={true}
+ showAttachment={false}
+ attachments={k.attachments}
children={
<div className="d-flex flex-row">
{k.isCorrect === "" ? (
@@ -1063,6 +1073,8 @@ export const ReviewApplicationLayout = ({
label="Is the given information found correct?"
inspectionValue={k.inspectionValue}
disableEdit={true}
+ showAttachment={false}
+ attachments={k.attachments}
children={
<div className="d-flex flex-row">
{k.isCorrect === "" ? (
@@ -1172,6 +1184,8 @@ export const ReviewApplicationLayout = ({
label="Is the given information found correct?"
inspectionValue={k.inspectionValue}
disableEdit={true}
+ showAttachment={false}
+ attachments={k.attachments}
children={
<div className="d-flex flex-row">
{k.isCorrect === "" ? (
@@ -1262,6 +1276,8 @@ export const ReviewApplicationLayout = ({
label="Is the given information found correct?"
inspectionValue={k.inspectionValue}
disableEdit={true}
+ showAttachment={false}
+ attachments={k.attachments}
children={
<div className="d-flex flex-row">
{k.isCorrect === "" ? (
@@ -1353,6 +1369,8 @@ export const ReviewApplicationLayout = ({
label="Is the given information found correct?"
inspectionValue={k.inspectionValue}
disableEdit={true}
+ showAttachment={false}
+ attachments={k.attachments}
children={
<div className="d-flex flex-row">
{k.isCorrect === "" ? (
@@ -1432,7 +1450,7 @@ export const ReviewApplicationLayout = ({
isReadOnly={true}
label={k.label || ""}
option={k.defaultValues}
- value={k.value.split(",") || ""}
+ value={k.value ? k.value.split(",") : ""}
isMultiple={true}
/>
</div>
@@ -1447,6 +1465,8 @@ export const ReviewApplicationLayout = ({
label="Is the given information found correct?"
inspectionValue={k.inspectionValue}
disableEdit={true}
+ showAttachment={false}
+ attachments={k.attachments}
children={
<div className="d-flex flex-row">
{k.isCorrect === "" ? (
@@ -1523,7 +1543,7 @@ export const ReviewApplicationLayout = ({
<CheckBoxField
label={k.label || ""}
showLabel={false}
- value={k.value.split(",") || ""}
+ value={k.value ? k.value.split(",") : ""}
defaultValues={k.defaultValues}
/>
</div>
@@ -1538,6 +1558,8 @@ export const ReviewApplicationLayout = ({
label="Is the given information found correct?"
inspectionValue={k.inspectionValue}
disableEdit={true}
+ showAttachment={false}
+ attachments={k.attachments}
children={
<div className="d-flex flex-row">
{k.isCorrect === "" ? (
@@ -1613,7 +1635,7 @@ export const ReviewApplicationLayout = ({
<FileUploadView
showLabel={k.label ? true : false}
label={k.label || ""}
- value={k.value.split(",") || ""}
+ value={k.value ? k.value.split(",") : ""}
/>
</div>
{(applicationData.status ===
@@ -1627,6 +1649,8 @@ export const ReviewApplicationLayout = ({
label="Is the given information found correct?"
inspectionValue={k.inspectionValue}
disableEdit={true}
+ showAttachment={false}
+ attachments={k.attachments}
children={
<div className="d-flex flex-row">
{k.isCorrect === "" ? (
@@ -1702,6 +1726,7 @@ export const ReviewApplicationLayout = ({
<BooleanField
showLabel={k.label ? true : false}
label={k.label || ""}
+ value={k.value}
isReadOnly={true}
/>
</div>
@@ -1716,6 +1741,8 @@ export const ReviewApplicationLayout = ({
label="Is the given information found correct?"
inspectionValue={k.inspectionValue}
disableEdit={true}
+ showAttachment={false}
+ attachments={k.attachments}
children={
<div className="d-flex flex-row">
{k.isCorrect === "" ? (
diff --git a/src/states/atoms.tsx b/src/states/atoms.tsx
index 2c691e611ee4fe8dd60f2743928a757f23593cdd..623c12224fdf68a8fd7e3c10e3f3a30b32f41cc5 100644
--- a/src/states/atoms.tsx
+++ b/src/states/atoms.tsx
@@ -38,3 +38,9 @@ export const dataObjectInspectionForm = atom({
key: "dataObjectInspectionForm",
default: "",
});
+
+export const dataObjectFileUpload = atom({
+ key: "dataObjectFileUpload",
+ default: {},
+});
+