Merge pull request #34 from skorphil/static-recordform

Added data-flow concept

docs/data-flow.md

@@ -0,0 +1,192 @@
+## Data Flow
+
+- [App Architecture](app-architecture.md)
+- Data Flow
+![Data Flow](img/data-flow.png)
+
+
+## AssetContainer
+### Props
+- isCompact (bool)
+- Asset (array)
+- onDeleteAsset (function)
+
+### Listeners
+- deleteButton onClick
+- inputs onChange
+
+### States
+```mermaid
+---
+title: AssetContainer
+---
+stateDiagram-v2
+    direction LR
+
+[*] --> expanded
+[*] --> compact
+expanded --> compact : prop iscompact changed
+compact --> expanded : prop iscompact changed
+```
+
+
+## InstitutionsList
+### Props
+- isCompact (bool)
+- isOpenedInstitution (bool)
+- institutions (array)
+
+### States
+- selectedInstitutionId (number)
+
+```mermaid
+---
+title: InstitutionsList
+---
+stateDiagram-v2
+    direction LR
+
+[*] --> compact
+[*] --> expanded
+compact --> openedInstitution : BUTTON_PRESS do / setIsOpenInstitution
+compact --> expanded : window.visualViewport.height > 650px
+
+expanded --> compact : window.visualViewport.height < 650px
+openedInstitution --> compact : BUTTON_PRESS do / setIsOpenInstitution
+```
+
+
+## FormHeader
+### Props
+- text
+- buttons
+
+### States
+```mermaid
+---
+title: FormHeader
+---
+stateDiagram-v2
+direction LR
+[*] --> textOnly
+[*] --> textWithButtons : prop rightButtons provided
+```
+
+
+## InstitutionTab
+### Props
+- isNew
+- isDeleted
+- isUpdated
+- text
+- onRestore
+
+### Listeners
+- restoreButton click
+
+### States
+```mermaid
+---
+title: InstitutionTab
+---
+stateDiagram-v2
+    direction LR
+
+[*] --> existing
+existing --> updated : prop changed
+updated --> existing : prop changed
+updated --> deleted : prop changed
+existing --> deleted : prop changed
+deleted --> updated : BUTTON_PRESS <br/> Do / setState
+deleted --> existing : BUTTON_PRESS <br/> Do / setState
+[*] --> new
+```
+
+## InstitutionsTabsList
+### Props
+- isCompact (bool)
+- Institutions (array)
+- onCreate (function)
+- selectedInstitutionId (number)
+
+### Listeners
+- restoreButton click
+
+### States
+```mermaid
+---
+title: InstitutionsTabsList
+---
+stateDiagram-v2
+direction LR
+
+[*] --> expanded
+[*] --> compact
+expanded --> compact : prop iscompact changed
+compact --> compact : prop iscompact changed
+```
+
+
+## InstitutionContainer
+### Props
+- isFullScreen (bool)
+- Institution (object)
+---
+- onEdit (function)
+- onCollapse (function)
+- onDelete (function)
+- onReset (function)
+- onAddAsset (function)
+
+### Listeners
+- editButton onClick
+- collapseButton onClick
+- addAssetButton onClick
+- deleteButton onClick
+- resetButton onClick
+---
+- nameInput onChange
+- countryInput onChange
+
+### States
+```mermaid
+---
+title: InstitutionContainer
+---
+stateDiagram-v2
+    direction LR
+
+[*] --> fullScreen
+[*] --> compact
+fullScreen --> compact : BUTTON_PRESS do / onEdit
+compact --> fullScreen : BUTTON_PRESS do / onCollapse
+```
+
+
+## RecordForm
+### Server actions
+- fetch previousRecord
+
+### Listeners
+- saveButton onClick
+- cancelButton onClick
+
+### States
+- InstitutionsState (array)
+- isOpenedInstitution (bool)
+- useForm
+```mermaid
+---
+title: RecordForm
+---
+stateDiagram-v2
+    direction LR
+
+[*] --> loadingState
+loadingState --> preFilled : fetched previousRecord
+loadingState --> empty : fetched previousRecord == null
+preFilled --> openedInstitution : BUTTON_PRESS
+empty --> openedInstitution : BUTTON_PRESS
+openedInstitution --> empty : BUTTON_PRESS
+openedInstitution --> preFilled : BUTTON_PRESS
+```

docs/data-flow.plantuml

@@ -0,0 +1,137 @@
+@startuml
+
+class RecordForm {
+.. Props ..
+Fetched data
+.. States ..
+- InstitutionsState (array)
+- isOpenedInstitution (bool)
+.. Listeners ..
+null
+.. Methods ..
+- handleSave
+- handleCancel
+
+- handleAssetCreate (maybe native for useForm)
+- handleAssetDelete
+
+- handleInstitutionCollapse
+- handleInstitutionExpand
+- handleInstitutionCreate
+- handleInstitutionDelete
+- handleInstitutionRestore
+- handleInstitutionReset
+}
+
+class FormHeader {
+.. Props ..
+- text
+- buttons
+.. States ..
+null
+.. Listener ..
+- saveButton onClick
+- cancelButton onClick
+---
+- collapseButton onClick
+}
+
+class InstitutionsList {
+.. Props ..
+- isOpenedInstitution (bool)
+- institutions (array)
+- isOpenedInstitution (bool)
+.. States ..
+- isCompact (bool)
+- selectedInstitutionId (number)
+.. Listener ..
+- viewport onChange (setIsCompact)
+}
+
+class InstitutionsTabsList {
+.. Props ..
+- isCompact (bool)
+- Institutions (array)
+- onCreate (function)
+.. States ..
+null
+.. Listener ..
+- createInstitutionButton onClick
+
+}
+
+class InstitutionContainer {
+.. Props ..
+- isFullScreen (bool)
+- Institution (object)
+---
+- onEdit (function)
+- onCollapse (function)
+- onDelete (function)
+- onReset (function)
+- onAddAsset (function)
+.. States ..
+null
+.. Listener ..
+- editButton onClick
+- collapseButton onClick
+- addAssetButton onClick
+- deleteButton onClick
+- resetButton onClick
+---
+- nameInput onChange
+- countryInput onChange
+}
+
+class InstitutionTab {
+.. Props ..
+- isNew
+- isDeleted
+- isUpdated
+- text
+- onRestore
+.. States ..
+null
+.. Listener ..
+- restoreButton click
+- tab onClick
+}
+
+class AssetContainer {
+.. Props ..
+- isCompact (bool)
+- Asset (array)
+- onDeleteAsset (function)
+.. States ..
+null
+.. Listener ..
+- deleteButton onClick
+- inputs onChange
+}
+
+RecordForm --> FormHeader
+RecordForm .[#green].> FormHeader::text
+RecordForm .[#green].> FormHeader::buttons
+
+RecordForm --> InstitutionsList
+RecordForm .[#green].> InstitutionsList::isOpened
+RecordForm .[#green].> InstitutionsList::institutions
+
+RecordForm::handleInstitutionCreate .[#green].> InstitutionsTabsList::onCreate
+RecordForm::handleInstitutionExpand .[#green].> InstitutionContainer::onEdit
+RecordForm::handleInstitutionCollapse .[#green].> InstitutionContainer::onCollapse
+RecordForm::handleInstitutionDelete .[#green].> InstitutionContainer::onDelete
+RecordForm::handleInstitutionReset .[#green].> InstitutionContainer::onReset
+RecordForm::handleAssetCreate .[#green].> InstitutionContainer::onAddAsset
+RecordForm::handleInstitutionRestore .[#green].> InstitutionTab::onRestore
+RecordForm::handleAssetDelete .[#green].> AssetContainer::onDeleteAsset
+
+
+InstitutionsList --> InstitutionsTabsList
+InstitutionsList --> InstitutionContainer
+InstitutionsTabsList --> InstitutionTab
+InstitutionContainer --> AssetContainer
+
+
+
+@enduml