Adds conditional display on pages

[grafitto]

fixes #4231

PR checklist:

• Update READ.me ?
• Update API documentation ?

QA checklist:

• Smoke test the functionality described in the issue
• Test for side effects
• UI responsiveness
• Cross browser testing
• Code review

[konzz]

EntitySection component

Sometimes you want to display a section of the entity based on whether a given condition is met.

Examples:

You want to display the name of a person if they are older than 18 years old.
A simple implementation would look like this:

<EntitySection show-if='{"metadata.age": { "$gt": 18 }}'>
  <EntityData label-of="name" />: <EntityData value-of="name" />
</Entitysection>

you want to only show the name of a person if the name exists in the entity metadata

<EntitySection show-if='{"metadata.name": { "$exists": true }}'>
  <EntityData label-of="name" />: <EntityData value-of="name" />
</Entitysection>

You want to show the name of a person if it matches value John in the entity metadata

<EntitySection show-if='{"metadata.name": "John"}'>
  <EntityData label-of="name" />: <EntityData value-of="name" />
</Entitysection>

Inherited properties:

<EntitySection show-if='{"metadata.inherited_text": { "$in": ["something"] }}'>
  <EntityData label-of="name" />: <EntityData value-of="name" />
</Entitysection>

Note: show-if value is a JSON string and the query should follow query string specified by sift

The metadata is unwrapped into a JSON object with keys as the property names and values as the property values.

metadata: {
  name: "John",
  age: 18
}

// Note that if the metadata property name has spaces, they are replaced with underscores and uppercase letters are converted to lowercase letters
// Eg: a metadata property name of "First Name" will be converted to "first_name" therefore:
metadata: {
  "first_name": "John",
  age: 18
}

Some values takes the following format, this includes inherited values and values like multiselect:

metadata: {
    inherited_text: ['text value'], //Can contain more than one values depending on entities inherited from
    inherited_multiselect: ['option 1', 'option 2'],  
    inherited_geolocation: [{ lat: 23, lon: 12}]
}

Note that some values like Date added and Date modified are replaced with creationDate and editDate respectively and also are presented as timestamps. So, to use them, you can do this:

<EntitySection show-if='{"editDate": 12434564323 }'>
  <EntityData label-of="name" />: <EntityData value-of="name" /> // This only shows if the entity
</Entitysection>

[txau]

@konzz the documentation looks neat. I would only add as a reference more complex example, ie. based on the value of an inheritance with multiple inherited values.

[konzz]

Thanks, it was @grafitto driving, he has the merit here 🥇