npm package: @oslokommune/origo-feedback
Description: feedback er en tjeneste som kan benyttes av alle Origos frontend applikasjoner for å ta i mot tilbakemeldinger fra Tim og sende disse inn til et sett Google regneark. Det kan konfigureres opp hvilket regneark tilbakemeldingene skal havne i slik at f.eks k
Latest version: 2.0.6

# feedback
feedback er en tjeneste som kan benyttes av alle Origos frontend applikasjoner for å ta i mot tilbakemeldinger fra Tim og sende disse inn til et sett Google regneark.
Det kan konfigureres opp hvilket regneark tilbakemeldingene skal havne i slik at f.eks kan ha ulike regneark til ulike applikasjoner og miljøer.

Dette spesifikke repoet er frontend tjenesten til feedback komponenten. Det er mulig å kjøre denne standalone, men det er ment som et bibliotek som kan linkes inn i en annen applikasjon.

Hvis du ønsker å se på backend ligger det her:
https://github.oslo.kommune.no/digiskjema/feedback-api

## Bruke biblioteket fra en frontend applikasjon

Se mer informasjon her om hvordan tilbakemeldingsløsningen ser ut og hvordan man tar den i bruk:
https://confluence.oslo.kommune.no/display/ORIGO/feedback

## Importere det i din applikasjon (Endringer fra Angular til Vue)

*BREAKING CHANGE:*
Fra versjon 2.0 så er html-tagen endret fra `<custom-feedback>` til `<ok-feedback>`

Etter omskriving av komponenten fra Angular til Vue, så er det planlagt at det skal fungere som før. Det er bare en endring som må gjøres i prosjektet ditt hvor du importerer komponentent. Css-filen er nå bundlet sammen med .js fila så du trenger ikke å importere den lenger.

## Props

| Navn                 | Type    | Default                                                                                                                                                    | Required | Eksempel                                                        | Beskrivelse                                                                                                                                                                       |
|----------------------|---------|------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|-----------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| origin               | String  |                                                                                                                                                            | true     | dvd-runtime                                                     | Backend sender ikke noe til regneark hvis ikke denne har en verdi.                                                                                                                |
| env                  | String  | `prod`                                                                                                                                                     | false    | test,systest,prod                                               | Dersom ikke env spesifiseres så velges prod som default. Verdien her styrer hvilken backend komponenten skal gå mot. Backend for feedback ligger i kubernetes i alle tre miljøer. |
| label                | String  | `Tilbakemelding`                                                                                                                                           | false    | Feedback                                                        | Dersom ikke label spesifiseres så vil Tilbakemelding være default verdi. Denne teksten settes på knappen som vises nederst til høyre.                                             |
| metadata             | String  |                                                                                                                                                            | true     | {"id":2, "title":"Test"}                                        | Json med flat struktur (dvs liste med name/value). *NB: Denne MÅ være en Streng og ikke Object*                                                                                                                                |
| gid                  | String  |                                                                                                                                                            | true     | 1ULsDGYIidw0PH5WZQ84bCwq5EXh-fkMmO78-BhwMGiA                    | google sheet id til regneark som tilbakemeldingen skal havne i                                                                                                                    |
| url                  | String  | ``                                                                                                                                                         | false    | https://feedback-backend-test.api-test.oslo.kommune.no/feedback | I stedet for å spesifisere miljø, så kan du bare sende ned hele urlen                                                                                                             |
| showSubmit           | Boolean | `false`                                                                                                                                                    | false    |                                                                 | Hvis du vil overskrive håndteringen av submit-knappen. By default så vises den ikke hvis du ikke skriver inn feedback, men hvis du sender med true så blir den vist uansett       |
| titleLabel           | String  | `Hei`                                                                                                                                                      | false    |                                                                 | Overskriften på modalen                                                                                                                                                           |
| subtitleLabel        | String  | `Hvor fornøyd er du med denne tjenesten`                                                                                                                   | false    |                                                                 | Undertittelen på modalen                                                                                                                                                          |
| firstSmileyLabel     | String  | `Veldig fornøyd`                                                                                                                                           | false    |                                                                 | Tekst på smilefjes som er positivt                                                                                                                                                |
| secondSmileyLabel    | String  | `Passe fornøyd`                                                                                                                                            | false    |                                                                 | Tekst på smilefjes som er nøytral                                                                                                                                                 |
| thirdSmileyLabel     | String  | `Lite fornøyd`                                                                                                                                             | false    |                                                                 | Tekst på smilefjes som er negativ                                                                                                                                                 |
| goodPlaceholderLabel | String  | `Har du forslag til forbedringer? Ikke skriv inn informasjon som kan identifisere deg eller andre. Din tilbakemelding er anonym, vi vil ikke besvare den.` | false    |                                                                 | Placeholdertekst hvis du velger positiv/nøytral smilefjes                                                                                                                         |
| badPlaceholderLabel  | String  | `Hvorfor er du misfornøyd? Ikke skriv inn informasjon som kan identifisere deg eller andre. Din tilbakemelding er anonym, vi vil ikke besvare den.`        | false    |                                                                 | Placeholdertekst hvis du velger negativ smilefjes                                                                                                                                 |
| submitLabel          | String  | `Send inn`                                                                                                                                                 | false    |                                                                 | Tekst på submit-knappen                                                                                                                                                           |

## Styles

Feedback-komponenten har default styles på form og farge, men det er mulig å endre designet fra hovedapplikasjonen som importerer feedback-komponenten. Under har du css-styles som treffer de viktigste delene av applikasjonen:

| navn                                | beskrivelse                                     |
|-------------------------------------|-------------------------------------------------|
| `ok-feedback__header--h2`           | Overskrift                                      |
| `ok-feedback__header--h3`           | Underskrift                                     |
| `ok-feedback__feedback--textarea`   | Input-feltet for å skrive inn tilbakemeldingen  |
| `ok-feedback__feedback--submit-btn` | Submit-knappen for å sende inn tilbakemeldingen |
| `ok-feedback__btn`                  | Tilbakemeldings-knappen for å åpne modalen      |

## Installere prosjektet
Denne tjenesten er utviklet i Vue2 og har krav om:
* \>= Node 12

~~~
git clone git@github.oslo.kommune.no:digiskjema/feedback.git
cd feedback
npm install
npm run build:lib
~~~

### Kjør prosjektet lokalt

Starte frontend

~~~
npm run serve
~~~

Frontend tjenesten er da tilgjengelig på http://localhost:8080 (hvis 8080 er brukt, så går den videre til 8081 osv)

### Rutiner ved koding

#### Linter og fikser filer

~~~
npm run lint
~~~

#### Kjør enhetstester

~~~
npm run test:unit
~~~

## Bygge release til repo

Foreløpig er det ikke lagt inn støtte for Jenkins i dette prosjektet som trigger på merging av branch til master.
Du må derfor selv sørge for at ny versjon i master havner i artifact repo.

* Opprett PR på det du har gjort i branchen din og få denne godkjent
* Merge branch inn i master (gjerne via github)
* Sørg for at du ikke har noen utestående endringer og at lokal master branch er i sync med origin/master før du går videre.

For å bygge og deploye ny versjon av feedback til repo gjør du dette:

~~~
# Merk at du MÅ ha med slash på slutten av URLen for at login skal virke
# PS. Dersom du ikke får autentisert deg så kan du også prøve å slette inneholdet av ~/.npmrc
# Brukernavn/passord finner du i kryptert dok (under nexus: # artifacts.oslo.kommune.no)
npm login --scope=oslokommune --registry https://registry.npmjs.org/

npm run deploy
~~~

Deploy utfører følgende oppgaver:

* Kjører linting
* Bygger tjenesten
* Obfuskerer koden 
* Minimaliserer css/less og javascript filer
* Samler alle filer i to filer som kan benyttes av applikasjon som vil dra inn feedback
* Patcher versjonsnummer i package.json
* Publiserer npm release i artifact repo
* Pusher ny tag i git