Merge pull request #213 from navikt/vise-ferieperioder

Viser ferieperiodene i stedet for antall feriedager

Author: marthejs

__mock-data__/behandlinger_mapped.json

@@ -87,7 +87,7 @@
             "antallKalenderdager": 31,
             "arbeidsgiverperiodeKalenderdager": 16,
             "antallVirkedager": 23,
-            "antallFeriedager": 0,
+            "ferieperioder": [],
             "antallUtbetalingsdager": 23,
             "sykmeldingsgrad": 100
         },

src/components/pages/Periode/Periode.jsx

@@ -7,17 +7,21 @@ import { Panel } from 'nav-frontend-paneler';
 import { Element, Undertittel } from 'nav-frontend-typografi';
 import { withBehandlingContext } from '../../../context/BehandlingerContext';
 import { periodetekster, tekster } from '../../../tekster';
+import { toDate } from '../../../utils/date';
+import FormRowWithListValues from '../../widgets/rows/FormRowWithListValues';
 
 const Periode = withBehandlingContext(({ behandling }) => {
     const {
         antallKalenderdager,
         arbeidsgiverperiodeKalenderdager,
         antallVirkedager,
-        antallFeriedager,
+        ferieperioder,
         antallUtbetalingsdager,
         sykmeldingsgrad
     } = behandling.periode;
-
+    const ferieperioderAsString = ferieperioder.map(
+        periode => `${toDate(periode.fom)} - ${toDate(periode.tom)}`
+    );
     return (
         <Panel className="Periode" border>
             <Undertittel className="panel-tittel">
@@ -35,7 +39,10 @@ const Periode = withBehandlingContext(({ behandling }) => {
                 label={periodetekster('virkedager')}
                 value={antallVirkedager}
             />
-            <FormRow label={periodetekster('ferie')} value={antallFeriedager} />
+            <FormRowWithListValues
+                label={periodetekster('ferie')}
+                items={ferieperioderAsString}
+            />
             <FormRow
                 label={periodetekster('antall_utbetalingsdager')}
                 value={antallUtbetalingsdager}

src/components/widgets/rows/FormRowWithListValues.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Uenigboks from '../Uenigboks';
+import { Normaltekst } from 'nav-frontend-typografi';
+import './FormRowWithListValues.less';
+
+const FormRowWithListValues = ({ label, items, bold, showRightSide }) => {
+    const className = bold ? 'bold' : '';
+    const itemsForFeedback =
+        items.length !== 0 ? [{ label, items: items.join(', ') }] : [];
+    return (
+        <span className="FormRowWithListValues">
+            <span>
+                <Normaltekst className={className}>{label}</Normaltekst>
+                {items.length > 0 ? (
+                    <span className="FormRow__List">
+                        {items.map(item => (
+                            <Normaltekst>{item}</Normaltekst>
+                        ))}
+                    </span>
+                ) : (
+                    <Normaltekst>-</Normaltekst>
+                )}
+            </span>
+            {showRightSide ? (
+                <Uenigboks label={label} itemsForFeedback={itemsForFeedback} />
+            ) : (
+                <div className="FormRow__padder" />
+            )}
+        </span>
+    );
+};
+
+FormRowWithListValues.propTypes = {
+    label: PropTypes.string.isRequired,
+    items: PropTypes.arrayOf(PropTypes.string).isRequired,
+    bold: PropTypes.bool,
+    showRightSide: PropTypes.bool
+};
+
+FormRowWithListValues.defaultProps = {
+    bold: false,
+    showRightSide: true
+};
+
+export default FormRowWithListValues;

src/components/widgets/rows/FormRowWithListValues.less

@@ -0,0 +1,17 @@
+@import './FormRow.less';
+
+.FormRowWithListValues {
+  &:extend(.FormRow all);
+  > span {
+
+    .typo-normal:last-child {
+      padding: unset;
+    }
+  }
+  .FormRow__List {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    padding: 0 1rem;
+  }
+}

src/server/behandlinger/mapping.js

@@ -173,7 +173,7 @@ const periode = behandling => ({
     antallKalenderdager: selectors.antallKalenderdager(behandling),
     arbeidsgiverperiodeKalenderdager: 16,
     antallVirkedager: selectors.antallVirkedager(behandling),
-    antallFeriedager: selectors.antallFeriedager(behandling),
+    ferieperioder: selectors.ferieperioder(behandling),
     antallUtbetalingsdager: selectors.antallUtbetalingsdager(behandling),
     sykmeldingsgrad: selectors.sykmeldingsgrad(behandling)
 });

src/server/behandlinger/selectors.js

@@ -22,15 +22,10 @@ const utbetalingsbeløp = behandling =>
         0
     );
 
-const antallFeriedager = behandling => {
-    const fravarAccumulator = (acc, fravar) => {
-        return fravar.type.toLowerCase() === 'ferie'
-            ? acc + calendarDaysBetween(toDate(fravar.fom), toDate(fravar.tom))
-            : acc + 0;
-    };
-    return behandling.originalSøknad.fravar.length === 0
-        ? 0
-        : behandling.originalSøknad.fravar.reduce(fravarAccumulator, 0);
+const ferieperioder = behandling => {
+    return behandling.originalSøknad.fravar.filter(
+        periode => periode.type.toLowerCase() === 'ferie'
+    );
 };
 
 const antallKalenderdager = behandling => {
@@ -120,7 +115,7 @@ const maxAntallSykepengedager = behandling => {
 module.exports = {
     antallVirkedager,
     antallUtbetalingsdager,
-    antallFeriedager,
+    ferieperioder,
     antallKalenderdager,
     dagsats,
     utbetalingsbeløp,