index.hbs

{{! @glint-nocheck: not typesafe yet }}
<AuContent @skin='tiny'>
  <AuToolbar as |Group|>
    <Group>
      <AuHeading @level='5' @skin='5'>Properties</AuHeading>
    </Group>
    <Group>
      <AuButton
        @icon={{this.PlusIcon}}
        @skin='naked'
        {{on 'click' this.startPropertyCreation}}
      >
        Add property
      </AuButton>
    </Group>
  </AuToolbar>
  {{#if this.hasAttributeProperties}}
    <AuList @divider={{true}} as |Item|>
      {{#each this.properties as |prop index|}}
        {{#if (this.isPlainTriple prop)}}
          <Item
            class='au-u-flex au-u-flex--row au-u-flex--between au-u-flex--vertical-center'
          >
            <div class='au-u-padding-tiny'>
              <p><strong>predicate:</strong> {{prop.predicate}}</p>
              {{#if prop.object.datatype}}
                <p><strong>datatype:</strong> {{prop.object.datatype.value}}</p>
              {{/if}}
              {{#if prop.object.language}}
                <p><strong>language:</strong> {{prop.object.language}}</p>
              {{/if}}
              {{#if (eq prop.object.termType 'ContentLiteral')}}
                <AuPill>content-predicate</AuPill>
              {{else}}
                <p><strong>value:</strong> {{prop.object.value}}</p>
              {{/if}}
            </div>
            <AuDropdown @icon={{this.ThreeDotsIcon}} role='menu' @alignment='left'>
              <AuButton
                @skin='link'
                @icon={{this.PencilIcon}}
                role='menuitem'
                {{on 'click' (fn this.startPropertyUpdate index)}}
              >
                Edit property
              </AuButton>
              <AuButton
                @skin='link'
                @icon={{this.BinIcon}}
                role='menuitem'
                class='au-c-button--alert'
                {{on 'click' (fn this.removeProperty index)}}
              >
                Remove property
              </AuButton>
            </AuDropdown>
          </Item>
        {{/if}}
      {{/each}}
    </AuList>
  {{else}}
    <p>This node doesn't have any properties yet.</p>
  {{/if}}
</AuContent>
{{! Creation modal }}
<this.Modal
  @modalOpen={{this.isCreating}}
  @onSave={{this.addProperty}}
  @onCancel={{this.cancel}}
/>
{{! Update modal }}
<this.Modal
  @modalOpen={{this.isUpdating}}
  @onSave={{this.updateProperty}}
  @onCancel={{this.cancel}}
  @property={{this.status.property}}
/>