Skip to content

GitLab

Commit c630f820 authored by Øyvind Julsrud's avatar Øyvind Julsrud Committed by Torstein
Browse files

DEICH-5925: deichman.no: skeleton for new patron search flow

parent 24993284
Hide whitespace changes
Inline Side-by-side
deichman.no/components/NewPatronFormAdmin/ChildPatronAdminSearch.js 0 → 100644
View file @ c630f820
import { Block, Button, Input, Table } from "@digibib/deichman-ui";
import { useFormik } from "formik";
import { useRouter } from "next/router";
import React, { Fragment, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { fetchChildPatrons } from "../../store/adminSearch";
import "./styles.css";
const initialValues = date => {
return { dateOfBirth: date || "" };
};
const validateForm = values => {
let errors = {};
if (values.dateOfBirth.length !== 8) {
errors.dateOfBirth = "Må være på formen DDMMÅÅÅÅ.";
}
if (!values.dateOfBirth) {
errors.dateOfBirth = "Påkrevd felt.";
}
return errors;
};
const formateDate = date => {
const [d1, d2, m1, m2, y1, y2, y3, y4] = date.split("");
return `${d1}${d2}.${m1}${m2}.${y1}${y2}${y3}${y4}`;
};
const ChildPatronAdminSearch = () => {
const router = useRouter();
const { date } = router.query;
const dispatch = useDispatch();
const { childPatrons } = useSelector(state => state.adminSearch);
const formik = useFormik({
initialValues: initialValues(date),
validate: values => validateForm(values)
});
useEffect(
() => {
if (date) {
dispatch(fetchChildPatrons(date));
}
},
[date]
);
const handleSubmit = e => {
e.preventDefault();
router.replace(
{
pathname: "/ansatt/ny-bruker/sok",
query: { date: formik.values.dateOfBirth }
},
null,
{ shallow: true }
);
};
const handleChange = e => {
const { id, value } = e.target;
formik.setFieldValue(id, value);
};
const handleLinkBackToPage = () => {
router.push("/ansatt/ny-bruker");
};
return (
<div className="child-patron-admin-search">
<form onSubmit={handleSubmit} disabled={false}>
<p className="caption-text">Søk på fødselsdato (DDMMÅÅÅÅ)</p>
<div className="child-patron-admin-search__form">
<div>
<Input
id="dateOfBirth"
value={formik.values.dateOfBirth}
name="date"
type="tel"
placeholder="24012010"
error={formik.errors.dateOfBirth}
onChange={handleChange}
autoComplete="off"
/>
</div>
<div>
<Button
type="submit"
disabled={
Boolean(formik.errors.dateOfBirth) || !formik.values.dateOfBirth
}
primary
>
Legg til låner
</Button>
</div>
</div>
</form>
<Block top={6} bottom={8}>
<span className="link" onClick={handleLinkBackToPage}>
Tilbake til hovedsøk
</span>
</Block>
<Block bottom={4}>
<h2>
Resultat for <b>{formateDate(date)}</b>
</h2>
</Block>
{childPatrons?.length > 0 && (
<Block top={4}>
<Table full responsive>
<Table.Head>
<Table.Row>
<Table.Cell isHeadCell>Navn</Table.Cell>
<Table.Cell isHeadCell>Kategori</Table.Cell>
<Table.Cell isHeadCell>Fødselsdato</Table.Cell>
</Table.Row>
</Table.Head>
<Table.Body>
{childPatrons.map((obj, idx) => (
<Fragment key={idx}>
<Table.Row>
<Table.Cell label="Navn">
<b>{obj?.name}</b>
</Table.Cell>
<Table.Cell label="Kategori">
<b>{obj?.category}</b>
</Table.Cell>
<Table.Cell label="Fødselsdato">
<b>{obj?.dateOfBirth}</b>
</Table.Cell>
<Table.Cell label="">
<span className="child-patron-admin-search__register-text">
<b>Fullfør registrering</b>
</span>
</Table.Cell>
</Table.Row>
</Fragment>
))}
</Table.Body>
</Table>
</Block>
)}
</div>
);
};
export default ChildPatronAdminSearch;
deichman.no/components/NewPatronFormAdmin/NewChildPatronFormAdmin.js 0 → 100644
View file @ c630f820
import React from "react";
import PropTypes from "prop-types";
import { Formik } from "formik";
import { isEmpty } from "../../utilities/object";
import {
isValidEmail,
isValidPhoneNumber,
isValidCardNumber
} from "../../utilities/validation";
import CTABox from "../CTABox";
import Datepicker from "../Datepicker";
import {
Accordion,
Block,
Grid,
GridItem,
Checkbox,
Input,
Text,
Button,
List,
Radio,
Flex,
Table
} from "@digibib/deichman-ui";
const NewChildPatronFormAdmin = ({
onSubmitForm,
isError,
userData,
cardnumber,
userDataFromFront
}) => {
return (
<Formik
initialValues={{
ssn: userData.ssn,
firstName: userData.firstName || "",
lastName: userData.lastName || "",
dateOfBirth: userData.dateOfBirth,
personConfirmed: false,
mobile: userData.mobile || "",
email: userData.email || "",
krrMobile: userData.krrMobile || "",
krrEmail: userData.krrEmail || "",
guarantorname: "",
guarantoremail: "",
guarantormobile: "",
noDetailsInKrr: !userData.mobile || !userData.email,
useKrrDetails: !userData.mobile || !userData.email ? "false" : null,
cardnumber: cardnumber || ""
}}
// Validate input fields
validate={values => {
const errors = {};
if (!values.firstName) {
errors.firstName = "Påkrevd felt";
}
if (!values.lastName) {
errors.lastName = "Påkrevd felt";
}
if (!values.dateOfBirth) {
errors.dateOfBirth = "Påkrevd felt";
}
if (!values.personConfirmed) {
errors.personConfirmed = "Påkrevd felt";
}
if (values.mobile && !isValidPhoneNumber(values.mobile)) {
errors.mobile = "Ikke gyldig format på telefonnummer";
}
if (!values.guarantorname) {
errors.guarantorname = "Påkrevd felt";
}
if (!values.guarantoremail) {
errors.guarantoremail = "Påkrevd felt";
}
if (values.guarantoremail && !isValidEmail(values.guarantoremail)) {
errors.guarantoremail = "Ikke gyldig format på e-post";
}
if (
values.guarantormobile &&
!isValidPhoneNumber(values.guarantormobile)
) {
errors.guarantormobile = "Ikke gyldig format på telefonnummer";
}
if (!values.cardnumber) {
errors.cardnumber = "Påkrevd felt";
}
if (!isValidCardNumber(values.cardnumber)) {
errors.cardnumber = "Ugyldig bibliotekkortnummer";
}
return errors;
}}
onSubmit={values => {
const dataToSubmit = {
ssn: values.ssn,
firstName: values.firstName,
lastName: values.lastName,
dateOfBirth: values.dateOfBirth,
cardnumber: values.cardnumber,
userHasNoEmail: values.userHasNoEmail,
guarantorname: values.guarantorname,
guarantoremail: values.guarantoremail,
guarantormobile: values.guarantormobile
};
onSubmitForm(dataToSubmit);
}}
// Reset form
onReset={() => {
window.location.href = "/ansatt/ny-bruker";
}}
render={({
values,
errors,
touched,
setFieldValue,
handleChange,
handleBlur,
handleSubmit,
isSubmitting,
handleReset
}) => (
<form onSubmit={handleSubmit} disabled={false}>
<Block bottom={8}>
<Grid>
<GridItem large="two-fifths">
<Block bottom={4}>
<h2 className="h2">Registrer ny låner barn</h2>
</Block>
</GridItem>
<GridItem large="three-fifths">
<Block bottom={6}>
<CTABox full>
<h4>1. Spør hva barnet heter</h4>
</CTABox>
<Block top={4}>
<Table transparent condensed responsive>
<Table.Head>
<Table.Row>
<Table.Cell>Fornavn</Table.Cell>
<Table.Cell>Etternavn</Table.Cell>
<Table.Cell>Fødselsdato</Table.Cell>
</Table.Row>
</Table.Head>
<Table.Body>
<Table.Row>
<Table.Cell label="Fornavn">
<b>{values.firstName}</b>
</Table.Cell>
<Table.Cell label="Etternavn">
<b>{values.lastName}</b>
</Table.Cell>
<Table.Cell label="Fødselsdato">
<b>{values.dateOfBirth}</b>
</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
</Block>
</Block>
{cardnumber && (
<Block bottom={6}>
<h2 className="h2">Allerede registrert i NL</h2>
<Block top={2}>
<p>
<strong>Bibliotekkortnummer:</strong> {cardnumber}
</p>
</Block>
</Block>
)}
<Block bottom={6}>
<CTABox full>
<h4>2. Sjekk foresattes navn og legitimasjon</h4>
</CTABox>
<Block top={4}>
<>
<Block>
<Input
value={values.guarantorname}
name="guarantorname"
label="Navn på foresatt (for- og etternavn)"
error={touched.guarantorname && errors.guarantorname}
onBlur={handleBlur}
onChange={handleChange}
/>
</Block>
<Block top={4}>
<Input
value={values.guarantoremail}
name="guarantoremail"
label="E-post til foresatt"
error={
touched.guarantoremail && errors.guarantoremail
}
onBlur={handleBlur}
onChange={handleChange}
/>
</Block>
<Block top={4}>
<Input
value={values.guarantormobile}
name="guarantormobile"
label="Mobilnummer til foresatt"
error={
touched.guarantormobile && errors.guarantormobile
}
onBlur={handleBlur}
onChange={handleChange}
/>
</Block>
<Block top={6}>
<Checkbox
label="Legitimasjon sjekket"
checked={values.personConfirmed}
name="personConfirmed"
onChange={handleChange}
/>
{errors.personConfirmed && (
<Block top={2}>
<Text error>Påkrevd felt</Text>
</Block>
)}
</Block>
</>
</Block>
</Block>
<Block bottom={4}>
<CTABox full>
<h4>3. Skann nytt lånekort</h4>
</CTABox>
</Block>
<Block top={4}>
<Input
value={values.cardnumber}
name="cardnumber"
label="Bibliotekkortnummer:"
placeholder="N0021266666"
error={touched.cardnumber && errors.cardnumber}
onBlur={handleBlur}
onChange={handleChange}
/>
</Block>
<Block top={4} bottom={8}>
<p>
PIN blir automatisk satt til fødselsnummer ved registrering,
PIN kan sees i Koha
</p>
</Block>
<Block top={2}>
<Flex>
<Block right={4}>
<Button type="reset" onClick={handleReset}>
Avbryt
</Button>
</Block>
<Button
type="submit"
loading={isSubmitting}
primary
onClick={handleSubmit}
>
Fullfør registreringen
</Button>
</Flex>
</Block>
{/* Form invalid */}
{!isEmpty(errors) && !isEmpty(touched) && (
<Block top={4}>
<p className="input__error">
Skjemaet inneholder feil eller mangler, vennligst se over
verdiene.
</p>
</Block>
)}
{/* Error from api */}
{isError && (
<Block top={6}>
<Text error>
Beklager, noe gikk galt. Prøv igjen eller besøk en av våre
biblioteker for videre hjelp.
</Text>
</Block>
)}
</GridItem>
</Grid>
</Block>
</form>
)}
/>
);
};
NewChildPatronFormAdmin.defaultProps = {
isError: false,
cardnumber: null
};
NewChildPatronFormAdmin.propTypes = {
userData: PropTypes.object.isRequired,
userDataFromFront: PropTypes.bool.isRequired,
onSubmitForm: PropTypes.func.isRequired,
isError: PropTypes.bool,
cardnumber: PropTypes.string
};
export default NewChildPatronFormAdmin;
deichman.no/components/NewPatronFormAdmin/NewChildPatronFormAdminSearch.js 0 → 100644
View file @ c630f820
import { Block, Button, Grid, GridItem, Input } from "@digibib/deichman-ui";
import { useFormik } from "formik";
import { useRouter } from "next/router";
import React from "react";
import "./styles.css";
const initialValues = {
dateOfBirth: ""
};
const validateForm = values => {
const errors = {};
if (values.dateOfBirth.length !== 8) {
errors.dateOfBirth = "Må være på formen DDMMÅÅÅÅ.";
}
if (!values.dateOfBirth) {
errors.dateOfBirth = "Påkrevd felt.";
}
return errors;
};
const NewChildPatronFormAdminSearch = () => {
const router = useRouter();
const formik = useFormik({
initialValues: initialValues,
validate: values => validateForm(values)
});
const handleSubmit = e => {
e.preventDefault();
router.push({
pathname: "/ansatt/ny-bruker/sok",
query: { date: formik.values.dateOfBirth }
});
};
const handleChange = e => {
const { id, value } = e.target;
formik.setFieldValue(id, value);
};
return (
<Block bottom={8}>
<Grid>
<GridItem large="two-fifths">
<Block bottom={8}>
<h2 className="h2">Søk på fødselsdato</h2>
</Block>
</GridItem>
<GridItem large="three-fifths">
<form onSubmit={handleSubmit} disabled={false}>
<Block>
<Input
id="dateOfBirth"
value={formik.values.dateOfBirth}
name="dateOfBirth"
label="Søk på fødselsdato (DDMMÅÅÅÅ)"
type="tel"
placeholder="DDMMÅÅÅÅ"
error={formik.errors.dateOfBirth}
onChange={handleChange}
autoComplete="off"
/>
</Block>
<Block top={4}>
<Button
type="submit"
disabled={
Boolean(formik.errors.dateOfBirth) ||
!formik.values.dateOfBirth
}
primary
>
Legg til låner
</Button>
</Block>
</form>
</GridItem>
</Grid>
</Block>
);
};
export default NewChildPatronFormAdminSearch;
deichman.no/components/NewPatronFormAdmin/NewPatronFormAdmin.js
View file @ c630f820
......@@ -31,7 +31,6 @@ const FormIdCheck = ({
isError,
userData,
cardnumber,
isAdultUser,
userDataFromFront