Skip to content

Commit

Permalink
Merge branch 'next' of github.com:uncefact/tests-untp into feat/imple…
Browse files Browse the repository at this point in the history
…ment-processDigitalFacilityRecord

* 'next' of github.com:uncefact/tests-untp:
  docs: import credential components (#115)
  refactor: update vckit latest image in docker compose (#122)
  • Loading branch information
namhoang1604 committed Oct 16, 2024
2 parents 4e93bfd + 9e41262 commit 4c63166
Show file tree
Hide file tree
Showing 5 changed files with 163 additions and 13 deletions.
2 changes: 1 addition & 1 deletion docker-compose.yml
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ services:
- /app/node_modules

vckit-api:
image: ghcr.io/uncefact/project-vckit:sha-a21556a@sha256:f75ef2de34ce587b0d54c9a7cd8d63f9d6c9cacbce191c893537dadd588ee368
image: ghcr.io/uncefact/project-vckit:sha-2adb515@sha256:e109a76f66f6d7763c0addde3a0fb1eee10ade21e2966a67c88348d37eb8db70
env_file:
- local.env
ports:
Expand Down
39 changes: 39 additions & 0 deletions documentation/docs/mock-apps/components/import-button.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
---
sidebar_position: 51
title: Import Button
---

import Disclaimer from '../../\_disclaimer.mdx';

<Disclaimer />
## Description

The ImportButton component is responsible for rendering a button that allows the user to import data. The component will return the data that is imported by the user.

## Example

```json
{
"name": "ImportButton",
"type": "EntryData",
"props": {
"label": "Import JSON",
"style": { "margin": "40px auto", "paddingTop": "40px", "width": "80%" }
}
}
```

## Definitions

| Property | Required | Description | Type |
| -------- | -------- | --------------------------------------------------- | ------------------------------------------------------- |
| name | Yes | The name of the component(should be "ImportButton") | String |
| type | Yes | The type of the component (should be "EntryData") | [ComponentType](/docs/mock-apps/common/component-type) |
| props | Yes | The properties for the ImportButton | [Props](/docs/mock-apps/components/import-button#props) |

### Props

| Property | Required | Description | Type |
| -------- | -------- | ------------------------------- | ------ |
| label | Yes | The label for the import button | String |
| style | No | The style for the component | Object |
27 changes: 15 additions & 12 deletions documentation/docs/mock-apps/components/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ Components are reusable UI elements that make up the visual and interactive part
- [Local Storage Loader](./local-storage-loader)
- [Conformity Credential](./conformity-credential)
- [Conformity Credential Checkbox](./conformity-credential-checkbox)
- [Render Check List](./render-check-list)
- [Import Button](./import-button)
- [QR Code Scanner Dialog Button](./qr-code-scanner-dialog-button)

## Diagram

Expand All @@ -30,23 +33,23 @@ graph TD

## Config

| Property | Required | Description | Type |
|----------|----------|-------------|------|
| name | Yes | The name of the component (depends on component used)| [Component](#available-components) |
| type | Yes | The type of the component (depends on component used) | [ComponentType](/docs/mock-apps/common/component-type) |
| props | Yes | Properties passed to the component (depends on component used)| [Component](#available-components) |
| Property | Required | Description | Type |
| -------- | -------- | -------------------------------------------------------------- | ------------------------------------------------------ |
| name | Yes | The name of the component (depends on component used) | [Component](#available-components) |
| type | Yes | The type of the component (depends on component used) | [ComponentType](/docs/mock-apps/common/component-type) |
| props | Yes | Properties passed to the component (depends on component used) | [Component](#available-components) |

## Example

```json
{
"name": "CustomButton",
"type": "Submit",
"props": {
"label": "Submit",
"description": "Click to submit the form"
}
"name": "CustomButton",
"type": "Submit",
"props": {
"label": "Submit",
"description": "Click to submit the form"
}
}
```

For detailed information about each component, please refer to their respective documentation pages linked above.
For detailed information about each component, please refer to their respective documentation pages linked above.
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
---
sidebar_position: 51
title: QR Code Scanner Dialog Button
---

import Disclaimer from '../../\_disclaimer.mdx';

<Disclaimer />
## Description

The QRCodeScannerDialogButton component is responsible for rendering a button that allows the user to scan a QR code. The component will return the data that is scanned by the user.

## Example

```json
{
"name": "QRCodeScannerDialogButton",
"type": "EntryData",
"props": {
"style": { "margin": "40px auto", "paddingTop": "40px", "width": "80%" }
}
}
```

## Definitions

| Property | Required | Description | Type |
| -------- | -------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------- |
| name | Yes | The name of the component(should be "QRCodeScannerDialogButton") | String |
| type | Yes | The type of the component (should be "EntryData") | [ComponentType](/docs/mock-apps/common/component-type) |
| props | Yes | The properties for the QRCodeScannerDialogButton | [Props](/docs/mock-apps/components/qr-code-scanner-dialog-button#props) |

### Props

| Property | Required | Description | Type |
| -------- | -------- | --------------------------- | ------ |
| style | No | The style for the component | Object |
71 changes: 71 additions & 0 deletions documentation/docs/mock-apps/components/render-check-list.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
---
sidebar_position: 50
title: Render Check List
---

import Disclaimer from '../../\_disclaimer.mdx';

<Disclaimer />
## Description

The RenderCheckList component is responsible for rendering a list of items with checkboxes. It is a composed component that will load data from another component ([Import Button](./import-button) and [QR Code Scanner Dialog Button](./qr-code-scanner-dialog-button)), when the user clicks to import or scan a QR code. The component will render a list of items with checkboxes, the labels of the checkboxes will be the identifiers of the items that are loaded from the data with the path is configured at `requiredFieldPath` field.

## Example

```json
{
"name": "RenderCheckList",
"type": "EntryData",
"props": {
"requiredFieldPath": "/vc/credentialSubject/eventID",
"checkBoxLabel": "Imported valid json:",
"nestedComponents": [
{
"name": "ImportButton",
"type": "EntryData",
"props": {
"label": "Import JSON",
"style": { "margin": "40px auto", "paddingTop": "40px", "width": "80%" }
}
},
{
"name": "QRCodeScannerDialogButton",
"type": "EntryData"
}
],
"style": { "margin": "40px auto", "paddingTop": "40px", "width": "80%" }
}
}
```

## Definitions

| Property | Required | Description | Type |
| -------- | -------- | ------------------------------------------------------ | ----------------------------------------------------------- |
| name | Yes | The name of the component(should be "RenderCheckList") | String |
| type | Yes | The type of the component (should be "EntryData") | [ComponentType](/docs/mock-apps/common/component-type) |
| props | Yes | The properties for the RenderCheckList | [Props](/docs/mock-apps/components/render-check-list#props) |

### Props

| Property | Required | Description | Type |
| ----------------- | -------- | ---------------------------------------------------------- | ------------------------------------------ |
| requiredFieldPath | Yes | The path for the label of the checkbox item | String |
| nestedComponents | Yes | An array of components to be rendered with the loaded data | [Component](/docs/mock-apps/components/)[] |
| checkBoxLabel | Yes | The label for the checkbox list | String |
| style | No | The style for the component | Object |

## Response Data

The component will return an object with data that is selected by the user from the list of checkboxes. The object will have the following structure:

```json
{
"0123456789": {
// Imported data
},
"9876543210": {
// Imported data
}
}
```

0 comments on commit 4c63166

Please sign in to comment.