Interfața ar trebui să genereze automat meniuri, formulare și tabele în funcție de drepturile și rolul utilizatorului curent.
Datele marcate pentru cache vor fi păstrate local și actualizate la primirea evenimentului de invalidare.
Ecranul principal poate include o fereastră de tip consolă cu starea cererilor, erori și alte informații utile. Utilizatorul o poate configura, afișa sau ascunde.
1.1. Aplicații
Aplicațiile ar trebui să poată fi instalate independent, ca module ale interfeței principale. Ele trebuie să includă descrierea și intrarea de meniu necesare integrării.
1.1.1. Catalogul componentelor UI
Pentru testare și evitarea componentelor duplicate, este necesară o interfață care prezintă componentele UI cu exemple și date de test.
1.1.2. Tema
Transmisă ca variabilă globală
1.2. Validări
Datele introduse trebuie validate înainte de trimiterea formularului. Validarea se efectuează și în backend, care returnează erori sau mesaje. Toate erorile și avertizările trebuie afișate utilizatorului.
1.3. Dependențe
Unele câmpuri depind de comportamentul altora. Componentele ar trebui conectate prin callbackuri. De exemplu, anumite câmpuri pot fi ascunse în funcție de opțiunile selectate, iar completarea unui câmp poate declanșa o cerere API.
1.4. Traduceri
Câmpurile traductibile ar trebui să ofere acces ușor la traducere, printr-un buton alăturat sau prin meniul contextual.
Interfața de traducere trebuie să permită navigarea în arborele entităților. La editarea unui câmp dintr-o entitate copil, ar trebui să poată fi văzut și părintele.
1.5. Indicii și etichete
Indiciile ar trebui generate din comentariile codului și afișate în limba aleasă. Toate câmpurile și componentele ar trebui să poată afișa indicii sau ajutor.
Opțiunile listelor de selecție ar trebui să ofere indicii și ajutor.
Acestea pot depinde de rolul utilizatorului.
Meniul contextual include acces la traducere, în funcție de rol.
1.6. Note pe ecran
Utilizatorul ar trebui să poată salva note și instrucțiuni personale pentru elementele ecranului. La activarea setărilor corespunzătoare, notele sunt afișate ca indicii la trecerea cursorului.
1.7. Liste de selecție
Funcționalități:
- getId pe baza numelui
- cache
- primește setările din backend, de exemplu valoarea implicită
- completare prin API sau din cod
- API-ul returnează doar opțiunile permise rolului
- permite selectarea opțiunii null
- permite căutarea
- afișează opțiunile în funcție de rol
1.8. Ajutor pentru căutare
Criteriile de filtrare trebuie să fie flexibile acolo unde este necesară căutarea.
Filtrele pot fi adăugate, configurate și salvate.
Tabel de filtrare
acțiuni de anulare și refacere
pașii tranzacției
1.8.1. Unde este utilizată
Această funcție arată unde este sau poate fi utilizată o entitate în sistem, ca date ori ca entitate copil.
1.8.2. Tabel de administrare
Traducerile enumerărilor vor fi administrate în tabelele de configurare ale sistemului.
1.9. Rapoarte și liste
1.9.1. Vizualizarea datelor
Utilizatorul ar trebui să poată crea și exporta rapoarte simple din tabelele bazei de date sau din informațiile API. Accesul la definițiile datelor permite navigarea în detaliu și între informații asociate, prin drill-down și drill-across.
Rapoartele pot fi generate din ecranele sistemului. Listele folosesc informațiile din ferestre, iar rapoartele folosesc de regulă informații agregate din vizualizări dedicate.
1.9.2. Grafuri și grafice
Datele pot fi afișate în mai multe moduri. Un graf al relațiilor este util în producție pentru legăturile dintre componente și vederea descompusă a produsului (OLAP).
https://xieziyu.github.io/ngx-echarts/#/series/graph
https://mdbootstrap.com/docs/angular/advanced/charts/
https://apexcharts.com/angular-chart-demos/
1.9.3. Exportul datelor
Rapoartele pot fi previzualizate înainte de tipărire sau export în formate standard, precum Excel, HTML, XML, Word și PDF.
1.10. Tabele
Utilizatorul ar trebui să poată filtra datele prin ajutoare de căutare și filtre pe coloane: where, between, order by, comparatori, liste de opțiuni, proprietăți sau SQL personalizat.
Coloanele ar trebui personalizabile: ordine, afișare și interogări proprii.
Datele ar trebui încărcate integral sau la cerere. Tabelele mari ar trebui paginate.
Filtrarea se poate face prin selectarea opțiunilor din liste.
Datele ar trebui agregate prin comenzi SQL, precum SUM și MAX, sau prin API. Agregarea presupune executarea interogării fără paginarea skip/take.
Tabelele ar trebui să afișeze numărul total de înregistrări, numărul afișat și, configurabil, totaluri și statistici pe coloane.
Tabelele ar trebui să aibă o bară de instrumente pentru configurare, filtrare și reîmprospătare.
1.11. Vizualizare arborescentă
Entitățile ar trebui afișate în tabele sau într-un arbore logic.
Arborele trebuie să permită încărcarea la cerere.
https://www.cssscript.com/demo/sortable-toggleable-tree-pickle/
https://www.cssscript.com/demo/json-data-tree/
https://www.cssscript.com/demo/json-data-tree-view/
https://codepen.io/ross-angus/pen/jwxMjL
https://www.cssscript.com/demo/folder-tree-json/
https://www.cssscript.com/demo/collapsible-folder-tree-pure-javascript-jslists/
https://onaircode.com/html-css-tree-view-examples/
1.12. Vedere descompusă
Aceasta este o reprezentare grafică a entităților, utilă în special în producție.
https://codepen.io/ross-angus/pen/jwxMjL
https://www.cssscript.com/demo/visualize-hierarchical-tree-d3-mitch/
1.13. Navigare
Apăsarea pictogramei unui câmp sau folosirea meniului contextual ar trebui să permită navigarea la entitatea respectivă, cu tabelul și atributele sale.
1.14. Meniu contextual
Meniul este completat în funcție de rol și afișat la clic dreapta sau printr-un buton dedicat.
Poate conține:
- elemente de navigare către definiția entității, traducere, tabel sau configurare
- configurarea afișării
- informații și ajutor despre câmp sau element
1.15. Salvarea preferințelor
Utilizatorul ar trebui să poată salva preferințe, interogări, filtre, pagini implicite, favorite, note pe ecran și entități favorite.
Favoritele ar trebui organizate în categorii.