# Naldo hackathon workshop
Der skal kodes en masse Svelte!
## MOnaldo mangler
* Tider til details (fortid, nutid, fremtid)
* Skal måske løses i backenden, hvis ikke er der er [working PoC allerede](https://git.magenta.dk/rammearkitektur/os2mo-naldo/-/blob/master/web/src/routes/organisation/%5Buuid%5D/data.ts) til org
* Nok en god øvelse i refakturering/god GraphQL
* [CRUD på en fed måde](https://git.magenta.dk/rammearkitektur/os2mo-naldo/-/merge_requests/142)
* Næsten alle tabs (medarbejder og org) skal have create, update og terminate
* Nok størstedelen af arbejdet
* Refaktureret GraphQL brug til "den fede måde"
* Udskiftet et par REST service API implementationer med "den fede måde"
* Up MO's GraphQL til version 7 (vi er på version 3)
* Det er nok cirka det hele der skal rettes :D
* Organisationssammenkobling (men nu i GraphQL)
* Mangler nok backend mutation delen
* Alt frontend mangler
* Har heller ikke et mockup... Så kun funktionaliteten indtil Laura redder os
* Fiks svelte-check warnings
* Mest a11y-fejl
## MOnaldo-adjacent ideer
* Finde et fedt codegen-værktøj til Python
* [graphql-codegen(det som bliver brugt i Naldo) plugin](https://the-guild.dev/graphql/codegen/docs/custom-codegen/plugin-structure)
* Nyt værktøj
* Smide Svelte ind i den gamle brugerflade
* Audit modulet
## Links
* [Lightning talk om Svelte](https://git.magenta.dk/apb/svelte-lightning-talk/-/blob/master/README.md)
* [Figma mockups](https://www.figma.com/file/1Pvp1abEqiyIWDJ7oEWZtS/OS2mo---Nyt-design?type=design&node-id=0-1&t=wS0xqHhk222B3Rvz-0) - I skal måske have et invite
---
## Er Naldo færdig?
Nope!
---
## Mere funktionalitet
Flere create, update og terminate undersider
---
## Fundet en masse MO bugs
gammel frontend: felterne af påkrævet
mo graphql: felterne er valfrie
miklas:
---
## Kommunikeret blockers med flere fra MO-teamet
Fungerede godt at have tæt kommunikation om problemer
---
## Svelte componenter i den gamle frontend
Vi fandt ud at kunne kompilere Svelte componenter til ren Javascript.
En vilkår Svelte komponent kan laves til Javascript, ved at tilføje:
```html
<svelte:options tag="audit-log" />
```
I toppen af filen, og derefter compilere filen med en specialiseret rollup konfiguration.
Resultatet er et ES modul (her `AuditLog.js`), med indhold ala følgende:
```javascript
import{n as t ... } ... customElements.define("audit-log",A); export{A as default};
//# sourceMappingURL=AuditLog.js.map
```
Altså et modul der tilføjer et nyt custom element (her `audit-log`) til DOM'en.
Man kan herefter bruge komponenten i sin almindlige HTML som følgende:
```html
<html>
<head>
<script src="./build/AuditLog.js" type="module"></script>
</head>
<body>
<audit-log uuid="0004b952-a513-430b-b696-8d393d7eb2bb"/>
</body>
</html>
```
Der i dette tilfælde vil give følgende resultat:
<table>
<tr>
<th>Registration ID</th>
<th>Start Time</th>
<th>End Time</th>
<th>Actor</th>
</tr>
<tr>
<td>699</td>
<td>Wed Dec 18 2019 13:58:27 GMT+0100 (Central European Standard Time)</td>
<td>-</td>
<td>42c432e8-9c4a-11e6-9f62-873cf34a735f</td>
</tr>
</table>
Her ses komponenten integreret i VueJS i OS2mo's gamle brugerflade:
Med koden for at opnå dette værende en ny `MoAuditLogButton` VueJS component, med indholdet:
```html
<template>
<div>
<button class="btn btn-outline-primary" v-b-modal="nameId">
<icon name="book"/>
</button>
<b-modal :id="nameId" size="lg" hide-footer :title="AuditLog" :ref="nameId" lazy>
<audit-log :uuid="uuid" />
</b-modal>
</div>
</template>
<script>
import ModalBase from "@/mixins/ModalBase"
import bModalDirective from "bootstrap-vue/es/directives/modal/modal"
export default {
mixins: [ModalBase],
directives: {"b-modal": bModalDirective},
props: {uuid: {type: String, required: true}},
computed: {nameId() {return "moAudit" + this._uid}}
}
</script>
```
---
## Naldo inspireret codegen til Python
- Mindre boilerplate :tada:
---
## Fancy SHA256 farver
Jeg (Andreas) fandt ud af at folk bruger UUIDer på virkelig sjove måder og at min dårlige hashing derfor ikke var god nok.
Takket være team Bezos har vi nu en top checket UUID til SHA256 til RGB funktion!
Det var måske lidt en overspringshandling...
---
{"metaMigratedAt":"2023-06-18T06:08:08.024Z","metaMigratedFrom":"Content","title":"Naldo hackathon workshop","breaks":true,"contributors":"[{\"id\":\"c9376bfa-2e47-4ba2-a6f5-79b5fb03d8b1\",\"add\":3666,\"del\":1327},{\"id\":null,\"add\":2107,\"del\":96}]"}