FO-2772 Tweaking på design av filter

Author: AlexGaard

src/components/filter-etiketter/etikett/filter-etikett.less

@@ -4,4 +4,16 @@
   background-color: transparent;
   border: none;
   cursor: pointer;
+
+  &__icon {
+    width: 12px;
+    height: 12px;
+    margin-left: 0.25rem;
+    margin-bottom: -1px;
+  }
+
+  .etikett {
+    border-radius: 4px;
+    background-color: #cce1f3;
+  }
 }

src/components/filter-etiketter/etikett/filter-etikett.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { EtikettInfo } from 'nav-frontend-etiketter';
-import './filter-etikett.less';
 import { OnRemoveClicked } from '../filter-etiketter';
+import xIcon from './x.svg';
+import './filter-etikett.less';
 
 interface FilterEtikettProps {
     id: string;
@@ -14,7 +15,9 @@ export const FilterEtikett = (props: FilterEtikettProps) => {
 
     return (
         <button className="filter-etikett" onClick={() => onRemoveClicked(id)}>
-            <EtikettInfo>{tekst}</EtikettInfo>
+            <EtikettInfo>
+                {tekst} <img className="filter-etikett__icon" src={xIcon} alt="Fjern etikett" />
+            </EtikettInfo>
         </button>
     );
 };

src/components/filter-etiketter/etikett/x.svg

@@ -2,7 +2,7 @@ import React from 'react';
 import { Bruker } from '../../../rest/data/bruker';
 import { formatDateStr, tidSiden } from '../../../utils/date-utils';
 import { Normaltekst, Element } from 'nav-frontend-typografi';
-import { fjernNavFraEnhetNavn } from '../../../utils';
+import { fjernNavFraEnhetNavn, mapBrukerStatusTilTekst } from '../../../utils';
 
 export const UserRow = (props: {bruker: Bruker}) => {
 	const {
@@ -16,7 +16,7 @@ export const UserRow = (props: {bruker: Bruker}) => {
 		    <Normaltekst>{etternavn + ', ' + fornavn}</Normaltekst>
 		    <Element>{fnr}</Element>
 		    <Normaltekst>{formatDateStr(vedtakStartet)}</Normaltekst>
-		    <Normaltekst>{status}</Normaltekst>
+		    <Normaltekst>{mapBrukerStatusTilTekst(status)}</Normaltekst>
 		    <Element>{beslutterNavn}</Element>
 		    <Normaltekst>{veilederNavn}</Normaltekst>
 		    <Normaltekst>{fjernNavFraEnhetNavn(oppfolgingsenhetNavn)}</Normaltekst>

src/components/user-table/body/user-table-row.tsx

@@ -8,7 +8,8 @@ import './index.less';
 
 dayjs.locale('nb');
 
-if (env.isDevelopment) {
+// Bruk mock i testmiljøet til vi har fått backend på plass
+if (true || env.isDevelopment) {
 	require('./mock');
 }
 

src/index.tsx

@@ -1,5 +1,7 @@
 
 export enum BrukerStatus {
+	KLAR_FOR_BESLUTTER = 'KLAR_FOR_BESLUTTER',
+	HAR_BESLUTTER = 'HAR_BESLUTTER',
 	VENTER_PA_VEILEDER = 'VENTER_PA_VEILEDER',
 	VENTER_PA_BESLUTTER = 'VENTER_PA_BESLUTTER',
 	KLAR_TIL_UTSENDING = 'KLAR_TIL_UTSENDING'

src/rest/data/bruker.ts

@@ -1,5 +1,6 @@
-
 // tslint:disable-next-line:no-empty
+import { BrukerStatus } from '../rest/data/bruker';
+
 export function doNothing() {}
 
 export function isEmpty(str: string): boolean {
@@ -12,4 +13,22 @@ export function randBetween(from: number, to: number): number {
 
 export function fjernNavFraEnhetNavn(enhetNavn: string): string {
 	return enhetNavn.replace('NAV', '').trim();
+}
+
+export function mapBrukerStatusTilTekst(status: BrukerStatus): string {
+	switch (status) {
+		case BrukerStatus.HAR_BESLUTTER:
+			return 'Har beslutter';
+		case BrukerStatus.KLAR_FOR_BESLUTTER:
+			return 'Klar for beslutter';
+		case BrukerStatus.KLAR_TIL_UTSENDING:
+			return 'Klar for utsending';
+		case BrukerStatus.VENTER_PA_BESLUTTER:
+			return 'Trenger tilbakemelding';
+		case BrukerStatus.VENTER_PA_VEILEDER:
+			return 'Venter på veileder';
+		default:
+			return '';
+
+	}
 }