document upload form
This commit is contained in:
@@ -3,13 +3,15 @@ import { Field, reduxForm } from "redux-form";
|
||||
import { useRouter } from "next/router";
|
||||
import DatePicker, { registerLocale, setDefaultLocale } from "react-datepicker";
|
||||
import cy from "date-fns/locale/cy";
|
||||
import React, { useState } from "react";
|
||||
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import "react-datepicker/dist/react-datepicker.css";
|
||||
import moment from "moment";
|
||||
import jsonpath from "jsonpath";
|
||||
import fieldLookup from "../../data/crmfieldlookuptranslations.json";
|
||||
import pickListLookup from "../../data/picklistLookups.json";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import FileUpload from "../newappeal/fileupload";
|
||||
import { useDropzone } from "react-dropzone";
|
||||
|
||||
const RenderTextfield = ({
|
||||
id,
|
||||
@@ -538,3 +540,122 @@ const PickListTranslations = (optionValue) => {
|
||||
//console.log(optionTrans, optionValue);
|
||||
return optionTrans;
|
||||
};
|
||||
|
||||
export function FileUploadField(props) {
|
||||
return (
|
||||
<div className="govuk-grid-row">
|
||||
<Field
|
||||
name={props.name}
|
||||
id={props.name}
|
||||
component={RenderFileUpload}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
//validate={[required]}
|
||||
label={props.label}
|
||||
errorMsg="Is required"
|
||||
/>
|
||||
helllo
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const baseStyle = {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
padding: "20px",
|
||||
borderWidth: 2,
|
||||
borderRadius: 2,
|
||||
borderColor: "#eeeeee",
|
||||
borderStyle: "dashed",
|
||||
backgroundColor: "#fafafa",
|
||||
color: "#bdbdbd",
|
||||
transition: "border .3s ease-in-out",
|
||||
};
|
||||
|
||||
const activeStyle = {
|
||||
borderColor: "#2196f3",
|
||||
};
|
||||
|
||||
const acceptStyle = {
|
||||
borderColor: "#00e676",
|
||||
};
|
||||
|
||||
const rejectStyle = {
|
||||
borderColor: "#ff1744",
|
||||
};
|
||||
|
||||
const RenderFileUpload = ({
|
||||
id,
|
||||
className,
|
||||
rows,
|
||||
datafieldname,
|
||||
name,
|
||||
label,
|
||||
input,
|
||||
errorMsg,
|
||||
meta: { touched, error },
|
||||
...custom
|
||||
}) => {
|
||||
const [files, setFiles] = useState([]);
|
||||
|
||||
const onDrop = useCallback((acceptedFiles) => {
|
||||
setFiles(
|
||||
acceptedFiles.map((file) =>
|
||||
Object.assign(file, {
|
||||
preview: URL.createObjectURL(file),
|
||||
})
|
||||
)
|
||||
);
|
||||
}, []);
|
||||
|
||||
const {
|
||||
getRootProps,
|
||||
getInputProps,
|
||||
isDragActive,
|
||||
isDragAccept,
|
||||
isDragReject,
|
||||
} = useDropzone({
|
||||
onDrop,
|
||||
});
|
||||
|
||||
const style = useMemo(
|
||||
() => ({
|
||||
...baseStyle,
|
||||
...(isDragActive ? activeStyle : {}),
|
||||
...(isDragAccept ? acceptStyle : {}),
|
||||
...(isDragReject ? rejectStyle : {}),
|
||||
}),
|
||||
[isDragActive, isDragReject, isDragAccept]
|
||||
);
|
||||
|
||||
const thumbs = files.map((file) => (
|
||||
<div key={file.name} className="govuk-!-margin-bottom-5 fileThumb">
|
||||
<img src={file.preview} alt={file.name} width="50" /> -{" "}
|
||||
<span className="govuk-body">
|
||||
{file.name} ({file.size / 1024}kb)
|
||||
</span>
|
||||
</div>
|
||||
));
|
||||
|
||||
// clean up
|
||||
useEffect(
|
||||
() => () => {
|
||||
files.forEach((file) => URL.revokeObjectURL(file.preview));
|
||||
},
|
||||
[files]
|
||||
);
|
||||
return (
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-form-group"></div>
|
||||
<section className="container">
|
||||
<div {...getRootProps({ style, className: "dropzone" })}>
|
||||
<input {...getInputProps()} />
|
||||
<p>Drag and drop files here or click to select files</p>
|
||||
</div>
|
||||
</section>{" "}
|
||||
<aside>{thumbs}</aside>
|
||||
{touched && errorStr && <span>{errorStr}</span>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -93,53 +93,65 @@ let BuildCheckRow = (props) => {
|
||||
datafieldname[0].value +
|
||||
"')]"
|
||||
);
|
||||
|
||||
if (isRequiredField[0].RequiredLevel.Value != "None") {
|
||||
return (
|
||||
<div className="govuk-summary-list__row" key={key}>
|
||||
<dt className="govuk-summary-list__key">
|
||||
{FieldsTranslations(rows[0].value)}
|
||||
</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
{fieldtype[0].value ==
|
||||
"{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}"
|
||||
? formatDate(
|
||||
props.props.form["appealForm"]
|
||||
if (typeof isRequiredField[0] != "undefined") {
|
||||
if (isRequiredField[0].RequiredLevel.Value != "None") {
|
||||
return (
|
||||
<div
|
||||
className="govuk-summary-list__row"
|
||||
key={key}
|
||||
>
|
||||
<dt className="govuk-summary-list__key">
|
||||
{FieldsTranslations(rows[0].value)}
|
||||
</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
{fieldtype[0].value ==
|
||||
"{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}"
|
||||
? formatDate(
|
||||
props.props.form["appealForm"]
|
||||
.values[
|
||||
datafieldname[0].value
|
||||
]
|
||||
)
|
||||
: fieldtype[0].value ==
|
||||
"{3EF39988-22BB-4f0b-BBBE-64B5A3748AEE}"
|
||||
? getPickListLabel(
|
||||
props.props.formData
|
||||
.pickListData,
|
||||
datafieldname[0].value,
|
||||
props.props.form["appealForm"]
|
||||
.values[
|
||||
datafieldname[0].value
|
||||
]
|
||||
)
|
||||
: props.props.form["appealForm"]
|
||||
.values[
|
||||
datafieldname[0].value
|
||||
]
|
||||
)
|
||||
: fieldtype[0].value ==
|
||||
"{3EF39988-22BB-4f0b-BBBE-64B5A3748AEE}"
|
||||
? getPickListLabel(
|
||||
props.props.formData.pickListData,
|
||||
datafieldname[0].value,
|
||||
props.props.form["appealForm"]
|
||||
.values[
|
||||
datafieldname[0].value
|
||||
]
|
||||
)
|
||||
: props.props.form["appealForm"].values[
|
||||
datafieldname[0].value
|
||||
]}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__actions">
|
||||
<a
|
||||
className="govuk-link"
|
||||
href="#"
|
||||
onClick={() => {
|
||||
updateCurrentSection(whichSection);
|
||||
}}
|
||||
>
|
||||
{t("newappeal:change-link-label")}
|
||||
<span className="govuk-visually-hidden">
|
||||
{" "}
|
||||
{FieldsTranslations(rows[0].value)}
|
||||
</span>
|
||||
</a>
|
||||
</dd>
|
||||
</div>
|
||||
);
|
||||
]}
|
||||
</dd>
|
||||
<dd className="govuk-summary-list__actions">
|
||||
<a
|
||||
className="govuk-link"
|
||||
href="#"
|
||||
onClick={() => {
|
||||
updateCurrentSection(
|
||||
whichSection
|
||||
);
|
||||
}}
|
||||
>
|
||||
{t("newappeal:change-link-label")}
|
||||
<span className="govuk-visually-hidden">
|
||||
{" "}
|
||||
{FieldsTranslations(
|
||||
rows[0].value
|
||||
)}
|
||||
</span>
|
||||
</a>
|
||||
</dd>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
|
||||
@@ -13,6 +13,7 @@ import {
|
||||
NumericField,
|
||||
ReadOnlyfield,
|
||||
DecimalField,
|
||||
FileUploadField,
|
||||
} from "../elements";
|
||||
|
||||
export default function BuildField(props) {
|
||||
@@ -25,6 +26,8 @@ export default function BuildField(props) {
|
||||
|
||||
const parser = new DOMParser();
|
||||
|
||||
console.log(props);
|
||||
|
||||
const whichFieldType = (classid) => {
|
||||
switch (classid) {
|
||||
case "{270BD3DB-D9AF-4782-9025-509E298DEC0A}":
|
||||
@@ -107,6 +110,14 @@ export default function BuildField(props) {
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case "{16D63FD6-119B-4353-BDCA-18358721C3FE}":
|
||||
return (
|
||||
<FileUploadField
|
||||
name={props.datafieldname}
|
||||
label={props.label}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
default:
|
||||
return (
|
||||
<Textfield name={props.datafieldname} label={props.label} />
|
||||
|
||||
@@ -5,6 +5,7 @@ import useTranslation from "next-translate/useTranslation";
|
||||
import xpath from "xpath";
|
||||
import BuildField from "./buildfield";
|
||||
import jsonpath from "jsonpath";
|
||||
import FileUpload from "./fileupload";
|
||||
|
||||
export default function BuildRow(props) {
|
||||
let { t } = useTranslation();
|
||||
@@ -36,6 +37,8 @@ export default function BuildRow(props) {
|
||||
var fieldtype = xpath.select("//@classid", doc);
|
||||
var datafieldname = xpath.select("//@datafieldname", doc);
|
||||
|
||||
console.log(doc, datafieldname[0].value);
|
||||
|
||||
const isRequiredField = jsonpath.query(
|
||||
mandatoryFieldsData,
|
||||
"$..value[?(@.LogicalName=='" +
|
||||
@@ -43,7 +46,7 @@ export default function BuildRow(props) {
|
||||
"')]"
|
||||
);
|
||||
|
||||
if (isRequiredField[0].RequiredLevel.Value != "None") {
|
||||
if (datafieldname[0].value == "pinswg_fileUpload") {
|
||||
return (
|
||||
<BuildField
|
||||
fieldType={fieldtype[0].value}
|
||||
@@ -58,7 +61,32 @@ export default function BuildRow(props) {
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return null;
|
||||
if (typeof isRequiredField[0] != "undefined") {
|
||||
if (
|
||||
isRequiredField[0].RequiredLevel.Value != "None"
|
||||
) {
|
||||
return (
|
||||
<BuildField
|
||||
fieldType={fieldtype[0].value}
|
||||
label={rows[0].value}
|
||||
datafieldname={datafieldname[0].value}
|
||||
key={key}
|
||||
props={props}
|
||||
picklistData={
|
||||
props.props.props.formData
|
||||
.pickListData
|
||||
}
|
||||
mandatoryFieldsData={
|
||||
mandatoryFieldsData
|
||||
}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
})}
|
||||
|
||||
@@ -38,15 +38,15 @@ let BuildSection = (props) => {
|
||||
const currentSection = props.appealType.currentSection;
|
||||
const parser = new DOMParser();
|
||||
var doc = parser.parseFromString(props.formXML, "text/xml");
|
||||
// var titles = xpath.select(
|
||||
// "//form/tabs/tab[" + currentSection + " ]/labels/label/@description",
|
||||
// doc
|
||||
// );
|
||||
var titles = xpath.select(
|
||||
"//form/tabs/tab[" + currentSection + " ]/labels/label/@description",
|
||||
doc
|
||||
);
|
||||
var rowXML = xpath.select(
|
||||
// "/form/tabs/tab[" +
|
||||
// currentSection +
|
||||
// "]/columns//sections/section/rows/row",
|
||||
"/form/tabs/tab/columns//sections/section/rows/row",
|
||||
"/form/tabs/tab[" +
|
||||
currentSection +
|
||||
"]/columns//sections/section/rows/row",
|
||||
//"/form/tabs/tab/columns//sections/section/rows/row",
|
||||
doc
|
||||
);
|
||||
|
||||
@@ -65,7 +65,7 @@ let BuildSection = (props) => {
|
||||
|
||||
const getErrors = () => {
|
||||
let errorsobj = props.props.form["appealForm"];
|
||||
setHasErrors(errorsobj.hasOwnProperty("syncErrors"));
|
||||
//setHasErrors(errorsobj.hasOwnProperty("syncErrors"));
|
||||
window.scrollTo(0, 0);
|
||||
};
|
||||
|
||||
@@ -152,9 +152,9 @@ let BuildSection = (props) => {
|
||||
mandatoryFieldsData={mandatoryFieldsData}
|
||||
props={props}
|
||||
/>
|
||||
{}
|
||||
|
||||
<div className="govuk-button-group">
|
||||
{/* {props.sectionCount != currentSection ? (
|
||||
{props.sectionCount != currentSection ? (
|
||||
<button
|
||||
type="submit"
|
||||
className="govuk-button"
|
||||
@@ -166,15 +166,15 @@ let BuildSection = (props) => {
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{props.sectionCount == currentSection ? ( */}
|
||||
<button
|
||||
type="submit"
|
||||
className="govuk-button"
|
||||
data-module="govuk-button"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
{/* ) : (
|
||||
{props.sectionCount == currentSection ? (
|
||||
<button
|
||||
type="submit"
|
||||
className="govuk-button"
|
||||
data-module="govuk-button"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{currentSection > 1 ? (
|
||||
@@ -189,11 +189,11 @@ let BuildSection = (props) => {
|
||||
</a>
|
||||
) : (
|
||||
""
|
||||
)} */}
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{/* <div className="govuk-grid-column-one-third">
|
||||
<div className="govuk-grid-column-one-third">
|
||||
<nav
|
||||
role="navigation"
|
||||
aria-labelledby="progress-list"
|
||||
@@ -242,7 +242,7 @@ let BuildSection = (props) => {
|
||||
</ul>
|
||||
</ol>
|
||||
</nav>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -247,7 +247,6 @@ let CreateCase = (props) => {
|
||||
label={t("newappeal:select-appeal-type-label")}
|
||||
errorMsg={t("newappeal:select-appeal-type-label-error-msg")}
|
||||
/>
|
||||
<FileUpload />
|
||||
<button
|
||||
type="submit"
|
||||
className="govuk-button"
|
||||
|
||||
@@ -1,42 +1,137 @@
|
||||
import { useDropzone } from "react-dropzone";
|
||||
import Link from "next/link";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import jsonpath from "jsonpath";
|
||||
import _ from "lodash";
|
||||
// import { useDropzone } from "react-dropzone";
|
||||
// import Link from "next/link";
|
||||
// import { useState, useEffect } from "react";
|
||||
// import { useRouter } from "next/router";
|
||||
// import useTranslation from "next-translate/useTranslation";
|
||||
// import jsonpath from "jsonpath";
|
||||
// import _ from "lodash";
|
||||
|
||||
const FileUpload = () => {
|
||||
const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
|
||||
const files = acceptedFiles.map((file) => (
|
||||
<li key={file.path}>
|
||||
{file.path} - {file.size} bytes
|
||||
</li>
|
||||
// const FileUpload = () => {
|
||||
// const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
|
||||
// const files = acceptedFiles.map((file) => (
|
||||
// <li key={file.path}>
|
||||
// {file.path} - {file.size} bytes
|
||||
// </li>
|
||||
// ));
|
||||
// return (
|
||||
// <div className="govuk-grid-column-full">
|
||||
// <div className="govuk-grid-row">
|
||||
// <div className="govuk-form-group">
|
||||
// <section className="container">
|
||||
// <div
|
||||
// {...getRootProps({
|
||||
// className: "dropzone",
|
||||
// })}
|
||||
// >
|
||||
// <input {...getInputProps()} />
|
||||
// <p>
|
||||
// Drag and drop files here or click to select
|
||||
// files
|
||||
// </p>
|
||||
// </div>
|
||||
// <aside>
|
||||
// <h4>Files</h4>
|
||||
// <ul>{files}</ul>
|
||||
// </aside>
|
||||
// </section>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// );
|
||||
// };
|
||||
// export default FileUpload;
|
||||
|
||||
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { useDropzone } from "react-dropzone";
|
||||
|
||||
const baseStyle = {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
padding: "20px",
|
||||
borderWidth: 2,
|
||||
borderRadius: 2,
|
||||
borderColor: "#eeeeee",
|
||||
borderStyle: "dashed",
|
||||
backgroundColor: "#fafafa",
|
||||
color: "#bdbdbd",
|
||||
transition: "border .3s ease-in-out",
|
||||
};
|
||||
|
||||
const activeStyle = {
|
||||
borderColor: "#2196f3",
|
||||
};
|
||||
|
||||
const acceptStyle = {
|
||||
borderColor: "#00e676",
|
||||
};
|
||||
|
||||
const rejectStyle = {
|
||||
borderColor: "#ff1744",
|
||||
};
|
||||
|
||||
function DropzoneComponent(props) {
|
||||
const [files, setFiles] = useState([]);
|
||||
|
||||
const onDrop = useCallback((acceptedFiles) => {
|
||||
setFiles(
|
||||
acceptedFiles.map((file) =>
|
||||
Object.assign(file, {
|
||||
preview: URL.createObjectURL(file),
|
||||
})
|
||||
)
|
||||
);
|
||||
}, []);
|
||||
|
||||
const {
|
||||
getRootProps,
|
||||
getInputProps,
|
||||
isDragActive,
|
||||
isDragAccept,
|
||||
isDragReject,
|
||||
} = useDropzone({
|
||||
onDrop,
|
||||
});
|
||||
|
||||
const style = useMemo(
|
||||
() => ({
|
||||
...baseStyle,
|
||||
...(isDragActive ? activeStyle : {}),
|
||||
...(isDragAccept ? acceptStyle : {}),
|
||||
...(isDragReject ? rejectStyle : {}),
|
||||
}),
|
||||
[isDragActive, isDragReject, isDragAccept]
|
||||
);
|
||||
|
||||
const thumbs = files.map((file) => (
|
||||
<div key={file.name} className="govuk-!-margin-bottom-5 fileThumb">
|
||||
<img src={file.preview} alt={file.name} width="50" /> -{" "}
|
||||
<span className="govuk-body">
|
||||
{file.name} ({file.size / 1024}kb)
|
||||
</span>
|
||||
</div>
|
||||
));
|
||||
|
||||
// clean up
|
||||
useEffect(
|
||||
() => () => {
|
||||
files.forEach((file) => URL.revokeObjectURL(file.preview));
|
||||
},
|
||||
[files]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="govuk-grid-column-full">
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-form-group">
|
||||
<section className="container">
|
||||
<div
|
||||
{...getRootProps({
|
||||
className: "dropzone",
|
||||
})}
|
||||
>
|
||||
<input {...getInputProps()} />
|
||||
<p>
|
||||
Drag and drop files here or click to select
|
||||
files
|
||||
</p>
|
||||
</div>
|
||||
<aside>
|
||||
<h4>Files</h4>
|
||||
<ul>{files}</ul>
|
||||
</aside>
|
||||
</section>
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-form-group"></div>
|
||||
<section className="container">
|
||||
<div {...getRootProps({ style, className: "dropzone" })}>
|
||||
<input {...getInputProps()} />
|
||||
<p>Drag and drop files here or click to select files</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>{" "}
|
||||
<aside>{thumbs}</aside>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default FileUpload;
|
||||
}
|
||||
|
||||
export default DropzoneComponent;
|
||||
|
||||
@@ -66,8 +66,11 @@ const SearchResults = (props) => {
|
||||
|
||||
var resultsArr = searchResultsObj.value || [];
|
||||
|
||||
const [searchLoaded, setSearchLoaded] = useState(false);
|
||||
const [showSpinnerState, setShowSpinnerState] = useState(false);
|
||||
const [selectedOption, setSelectedOption] = useState(10);
|
||||
const [orderByState, setOrderbyState] = useState("createdon");
|
||||
const [fieldSortState, setfieldSortState] = useState("asc");
|
||||
|
||||
let spinnerState = () => {
|
||||
showSpinnerState == true
|
||||
@@ -75,9 +78,6 @@ const SearchResults = (props) => {
|
||||
: setShowSpinnerState(true);
|
||||
};
|
||||
|
||||
const [orderByState, setOrderbyState] = useState("createdon");
|
||||
const [fieldSortState, setfieldSortState] = useState("asc");
|
||||
|
||||
const cookies = parseCookies();
|
||||
|
||||
const selectWatchedCase = (loggedInUser, incidentID, appealType) => {
|
||||
@@ -586,9 +586,13 @@ const SearchResults = (props) => {
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedOption) {
|
||||
setShowSpinnerState(true);
|
||||
getSearchPageResults(1, orderByState, fieldSortState);
|
||||
if (searchLoaded) {
|
||||
if (selectedOption) {
|
||||
setShowSpinnerState(true);
|
||||
getSearchPageResults(1, orderByState, fieldSortState);
|
||||
}
|
||||
} else {
|
||||
setSearchLoaded(true);
|
||||
}
|
||||
}, [selectedOption]);
|
||||
// console.log(
|
||||
|
||||
Reference in New Issue
Block a user