HLM - 1104 | schema attributes

tenant-portal/public/locales/en/translation.json

@@ -50,6 +50,17 @@
         "fields": "Fields",
         "backButton": "Back to Manage Schema"
     },
+    "schemaAttributesPage": {
+        "label": "Label",
+        "fieldType": "Field Type",
+        "mandatory": "Mandatory",
+        "indexed": "Indexed",
+        "unique": "Unique",
+        "description": "Description",
+        "action": "Action",
+        "fields": "Fields",
+        "backButton": "Back to Manage Schema"
+    },
     "schemaDetails": {
         "title": "Add Schema Details",
         "label1": "Name of the Schema",

tenant-portal/public/locales/hi/translation.json

@@ -50,6 +50,17 @@
         "fields": "खेत",
         "backButton": "मैनेज स्कीमा पर वापस"
     },
+    "schemaAttributesPage": {
+        "label": "लेबल",
+        "fieldType": "क्षेत्र के जैसा",
+        "mandatory": "अनिवार्य",
+        "indexed": "इंडेक्स किए गए",
+        "unique": "अद्वितीय",
+        "description": "विवरण",
+        "action": "गतिविधि",
+        "fields": "खेत",
+        "backButton": "मैनेज स्कीमा पर वापस"
+    },
     "schemaDetails": {
         "title": "स्कीमा विवरण जोड़ें",
         "label1": "स्कीम का नाम",

tenant-portal/src/components/SchemaAttribute/SchemaAttribute.js → tenant-portal/src/components/Attribute/Attribute.js

@@ -1,6 +1,6 @@
 import {useTranslation} from "react-i18next";
 
-function SchemaAttribute(props) {
+function Attribute(props) {
 
     const { t } = useTranslation();
     const attributeTypes = [
@@ -12,39 +12,39 @@ function SchemaAttribute(props) {
         <tr>
             <td>
                 {
-                    props.schemaAttribute.readOnly ? props.schemaAttribute.label :
-                        <input type="text" defaultValue={props.schemaAttribute.label} readOnly={props.schemaAttribute.readOnly}/>
+                    props.schemaAttribute.editMode ? 
+                        <input type="text" defaultValue={props.schemaAttribute.label} /> : props.schemaAttribute.label 
                 }
             </td>
             <td>
                 {
-                    props.schemaAttribute.readOnly ? props.schemaAttribute.type :
+                    props.schemaAttribute.editMode ? 
                         <select defaultValue={props.schemaAttribute.type}>
                             {
                                 attributeTypes.map(function(attributeType) {
                                     return <option value={attributeType.value}>{attributeType.label}</option>
                                 })
                             }
-                        </select>
+                        </select> : props.schemaAttribute.type 
                 }
             </td>
             <td className="text-center">
-                <input type="checkbox" id="mandatoryAttribute" name="mandatoryAttribute" readOnly={props.schemaAttribute.readOnly} checked={props.schemaAttribute.isMandatory}/>
+                <input type="checkbox" id="mandatoryAttribute" name="mandatoryAttribute" checked={props.schemaAttribute.isMandatory}/>
             </td>
             <td className="text-center">
-                <input type="checkbox" id="indexedAttribute" name="indexedAttribute" readOnly={props.schemaAttribute.readOnly} checked={props.schemaAttribute.indexed}/>
+                <input type="checkbox" id="indexedAttribute" name="indexedAttribute" checked={props.schemaAttribute.isIndexField}/>
             </td>
             <td className="text-center">
-                <input type="checkbox" id="uniqueAttribute" name="uniqueAttribute" readOnly={props.schemaAttribute.readOnly} checked={props.schemaAttribute.unique}/>
+                <input type="checkbox" id="uniqueAttribute" name="uniqueAttribute" checked={props.schemaAttribute.isUniqueIndex}/>
             </td>
             <td>
                 {
-                    props.schemaAttribute.readOnly ? props.schemaAttribute.description :
-                        <input type="text" defaultValue={props.schemaAttribute.description} readOnly={props.schemaAttribute.readOnly}/>
+                    props.schemaAttribute.editMode ? 
+                        <input type="text" defaultValue={props.schemaAttribute.description} /> : props.schemaAttribute.description 
                 }
             </td>
         </tr>
     );
 }
 
-export default SchemaAttribute;
+export default Attribute;

tenant-portal/src/components/InbuiltAttributesComponent/InbuiltAttributesComponent.js

@@ -1,5 +1,5 @@
 import {useTranslation} from "react-i18next";
-import SchemaAttribute from "../SchemaAttribute/SchemaAttribute";
+import Attribute from "../Attribute/Attribute";
 import {INBUILT_ATTRIBUTES} from "../../constants"
 import config from "../../config.json";
 import GenericButton from "../GenericButton/GenericButton";
@@ -29,7 +29,7 @@ function InbuiltAttributesComponent() {
                         <tbody>
                         {
                             INBUILT_ATTRIBUTES.map((attribute) => {
-                                return <SchemaAttribute schemaAttribute={attribute}></SchemaAttribute>
+                                return <Attribute schemaAttribute={attribute}></Attribute>
                             })
                         }
                         </tbody>

tenant-portal/src/components/SchemaAttributes/SchemaAttributes.js

@@ -0,0 +1,59 @@
+import React  from "react";
+import 'react-bootstrap';
+import {  Stack, Row, Table, Container } from "react-bootstrap";
+import styles from "./SchemaAttributes.module.css";
+import GenericButton from "../GenericButton/GenericButton";
+import {useTranslation} from "react-i18next";
+import {transformSchemaToAttributes} from "../../utils/schema.js"
+import Attribute  from "../Attribute/Attribute";
+
+function SchemaAttributes(props){
+    const { t } = useTranslation();
+
+    const Attributes = transformSchemaToAttributes(JSON.parse(props.schema));
+    return (
+        <div>
+            <Container>
+                <Stack gap={3}>
+                    <Row className="title">{props.name}</Row>
+                    <Row >{props.description}</Row>
+                    <Row className="p-3 border overflow-auto d-xxl-inline-block">
+                            <Row className="table-heading py-2">{t('schemaAttributesPage.fields')}</Row>
+                            <Table className={styles["SchemaAttributesTable"]}>
+                                <thead className="table-col-header">
+                                    <th>{t('schemaAttributesPage.label')}</th>
+                                    <th>{t('schemaAttributesPage.fieldType')}</th>
+                                    <th className="text-center">{t('schemaAttributesPage.mandatory')}</th>
+                                    <th className="text-center">{t('schemaAttributesPage.indexed')}</th>
+                                    <th className="text-center">{t('schemaAttributesPage.unique')}</th>
+                                    <th>{t('schemaAttributesPage.description')}</th>
+                                </thead>
+                                <tbody>
+                                {
+                                    Attributes.map((attribute) => {
+                                        return <Attribute schemaAttribute={attribute}></Attribute>
+                                    })
+                                }
+                                </tbody>
+                            </Table>
+                    </Row>
+                </Stack>
+            </Container>
+
+
+            <Row className={`${styles['custom-footer']} justify-content-end w-100 gx-1 p-4`} >
+                { props.status === "DRAFT" && 
+                    <>
+                        <GenericButton img={''} text='Save as Draft' type='button' form="schema-attributes" variant='outline-primary' styles={{ width: "15%",marginLeft: "1rem" }} />
+                        <GenericButton img={''} text='Save & Next' type='button' form="schema-attributes" variant='primary' styles={{ width: "15%" ,marginLeft: "1rem"}} />
+                    </>
+                }
+                { props.status === "PUBLISHED" && 
+                    <GenericButton img={''} text='Back to Manage Schema' type='button' variant='primary' styles={{width:"18%"}}/>
+                }
+            </Row>
+
+        </div>
+    ); 
+}
+export default SchemaAttributes;

tenant-portal/src/components/SchemaAttributes/SchemaAttributes.module.css

@@ -0,0 +1,17 @@
+.custom-footer{
+    background: #FFFFFF;
+    box-shadow: 0px -0.5px 5px rgba(0, 0, 0, 0.15);
+    margin-bottom: 2rem; 
+    position: fixed; 
+    bottom: 0;
+}
+.title{
+    font-style: normal;
+    font-weight: 700;
+    font-size: 26px;
+    line-height: 38px;
+    color: #484646;
+}
+.SchemaAttributesTable {
+    width: 1000px;
+}

tenant-portal/src/constants.js

@@ -1,56 +1,62 @@
-export const INBUILT_ATTRIBUTES =  [
+const INBUILT_ATTRIBUTES =  [
     {
-        "label": "Name",
+        "label": "issuanceDate",
         "type": "string",
         "isMandatory": true,
-        "indexed": false,
-        "unique": false,
-        "description": "Name of the holder",
-        "readOnly": true
-    },
-    {
-        "label": "Issued on",
-        "type": "string",
-        "isMandatory": true,
-        "indexed": false,
-        "unique": false,
+        "isIndexField": false,
+        "isUniqueIndex": false,
         "description": "Date certificate issued on",
-        "readOnly": true
+        "readOnly": true,
+        "editMode": false
     },
     {
         "label": "Issuer",
         "type": "string",
         "isMandatory": true,
-        "indexed": false,
-        "unique": false,
+        "isIndexField": false,
+        "isUniqueIndex": false,
         "description": "Name of the issuing authority",
-        "readOnly": true
+        "readOnly": true,
+        "editMode": false
     },
     {
         "label": "Certificate ID",
         "type": "string",
         "isMandatory": true,
-        "indexed": true,
-        "unique": true,
+        "isIndexField": true,
+        "isUniqueIndex": true,
         "description": "The unique Certificate ID",
-        "readOnly": true
+        "readOnly": true,
+        "editMode": false
     },
     {
         "label": "Valid From",
         "type": "string",
         "isMandatory": false,
-        "indexed": false,
-        "unique": false,
+        "isIndexField": false,
+        "isUniqueIndex": false,
         "description": "The date from which the credential is valid from",
-        "readOnly": true
+        "readOnly": true,
+        "editMode": false
     },
     {
         "label": "Valid To",
         "type": "string",
         "isMandatory": false,
-        "indexed": false,
-        "unique": false,
+        "isIndexField": false,
+        "isUniqueIndex": false,
         "description": "The date until which the credential is valid to",
-        "readOnly": true
+        "readOnly": true,
+        "editMode": false
     }
-]
+]
+
+const STANDARD_ATTRIBUTES = [
+    "certificateId",
+    "validFrom",
+    "validTill",
+    "issuer",
+    "issuanceDate"
+]
+
+export {INBUILT_ATTRIBUTES,STANDARD_ATTRIBUTES} 

tenant-portal/src/utils/schema.js

@@ -0,0 +1,28 @@
+import {STANDARD_ATTRIBUTES} from "../constants.js"
+
+function transformSchemaToAttributes (schema) {
+    const name = schema.title;
+    const properties = schema?.definitions[name]?.properties || {};
+    const labels = Object.keys(properties);
+    const requiredFields = schema?.definitions[name]?.required || [];
+    const indexFields = schema?._osConfig?.indexFields || [];
+    const uniqueIndex = schema?._osConfig?.uniqueIndexFields || [];
+
+    var Attributes = [];
+    labels.map((label) => {
+        const attribute = {
+            "label": label,
+            "type" : properties[label].type,
+            "isMandatory": requiredFields.includes(label),
+            "isIndexField": indexFields.includes(label),
+            "isUniqueIndex": uniqueIndex.includes(label),
+            "description" : properties[label]?.description || "NA",
+            "readOnly": STANDARD_ATTRIBUTES.includes(label),
+            "editMode": false
+        }
+        Attributes.push(attribute)
+    })
+    return Attributes;
+}
+
+export {transformSchemaToAttributes}