outgoing-triple-form.hbs

{{! @glint-nocheck: not typesafe yet }}
<form
  ...attributes
  {{on "submit" this.handleSubmit}}
  {{on "input" this.handleInput}}
  {{did-insert this.afterInsert}}
>
  <AuFormRow>
    {{#let (unique-id) "predicate" as |id name|}}
      {{#let (this.findError name) as |error|}}
        <AuLabel
          for={{id}}
          @required={{true}}
          @requiredLabel="Required"
        >Predicate</AuLabel>
        <AuInput
          id={{id}}
          name={{name}}
          value={{this.triple.predicate}}
          required={{true}}
          @width="block"
        />
        {{#if error}}
          <AuPill>{{error}}</AuPill>
        {{/if}}
      {{/let}}
    {{/let}}
  </AuFormRow>
  <AuFormRow>
    {{#let (unique-id) "object.termType" as |id name|}}
      {{#let (this.findError name) as |error|}}
        <AuLabel
          for={{id}}
          @required={{true}}
          @requiredLabel="Required"
        >TermType</AuLabel>
        <PowerSelect
          id={{id}}
          {{! For some reason need to manually set width }}
          class="au-u-1-1"
          @searchEnabled={{false}}
          @options={{this.termTypes}}
          @selected={{this.termType}}
          @onChange={{this.setTermType}}
          @allowClear={{true}}
          as |obj|
        >
          {{obj}}
        </PowerSelect>
        {{#if error}}
          <AuPill>{{error}}</AuPill>
        {{/if}}
      {{/let}}
    {{/let}}
  </AuFormRow>
  {{! I tried deduplicating these, but they all need slightly different validation so there's no point}}
  {{#if (eq this.termType "NamedNode")}}
    <AuFormRow>
      {{#let (unique-id) "object.value" as |id name|}}
        {{#let (this.findError name) as |error|}}
          <AuLabel
            for={{id}}
            @required={{true}}
            @requiredLabel="Required"
          >URI</AuLabel>
          <AuInput
            id={{id}}
            name={{name}}
            value={{this.triple.object.value}}
            required={{true}}
            @width="block"
          />
          {{#if error}}
            <AuPill>{{error}}</AuPill>
          {{/if}}
        {{/let}}
      {{/let}}
    </AuFormRow>
  {{else if (eq this.termType "Literal")}}
    <AuFormRow>
      {{#let (unique-id) "object.value" as |id name|}}
        {{#let (this.findError name) as |error|}}
          <AuLabel
            for={{id}}
            @required={{true}}
            @requiredLabel="Required"
          >Value</AuLabel>
          <AuInput
            id={{id}}
            name={{name}}
            value={{this.triple.object.value}}
            required={{true}}
            @width="block"
          />
          {{#if error}}
            <AuPill>{{error}}</AuPill>
          {{/if}}
        {{/let}}
      {{/let}}
    </AuFormRow>
    <AuFormRow>
      {{#let (unique-id) "object.datatype.value" as |id name|}}
        {{#let (this.findError name) as |error|}}
          <AuLabel
            for={{id}}
            @required={{false}}
            @requiredLabel="Required"
          >Datatype</AuLabel>
          <AuInput
            id={{id}}
            name={{name}}
            value={{this.initialDatatypeValue}}
            required={{false}}
            @width="block"
            @disabled={{this.hasLanguage}}
          />
          {{#if error}}
            <AuPill>{{error}}</AuPill>
          {{/if}}
        {{/let}}
      {{/let}}
    </AuFormRow>
    <AuFormRow>
      {{#let (unique-id) "object.language" as |id name|}}
        {{#let (this.findError name) as |error|}}
          <AuLabel
            for={{id}}
            @required={{false}}
            @requiredLabel="Required"
          >Language</AuLabel>
          <AuInput
            id={{id}}
            name={{name}}
            value={{this.triple.object.language}}
            required={{false}}
            @width="block"
            @disabled={{this.hasDatatype}}
          />
          {{#if error}}
            <AuPill>{{error}}</AuPill>
          {{/if}}
        {{/let}}
      {{/let}}
    </AuFormRow>
  {{else if (eq this.termType "LiteralNode")}}

    <AuFormRow @alignment="default">
      {{#let (unique-id) "object.value" as |id name|}}
        {{#let (this.findError name) as |error|}}
          <AuLabel for={{id}} @required={{true}} @requiredLabel="Required">
            Object
          </AuLabel>
          <PowerSelect
            id={{id}}
            {{! For some reason need to manually set width }}
            class="au-u-1-1"
            @searchEnabled={{false}}
            @options={{this.literals}}
            @selected={{this.selectedLiteralNode}}
            @onChange={{this.setLiteralNodeLink}}
            @allowClear={{true}}
            @placeholder="Select a literal"
            as |obj|
          >
            {{this.literalNodeLabel obj}}
          </PowerSelect>
          {{#if error}}
            <AuPill>{{error}}</AuPill>
          {{/if}}
        {{/let}}
      {{/let}}
    </AuFormRow>
    <AuFormRow>
      {{#let (unique-id) "object.datatype.value" as |id name|}}
        {{#let (this.findError name) as |error|}}
          <AuLabel
            for={{id}}
            @required={{false}}
            @requiredLabel="Required"
          >Datatype</AuLabel>
          <AuInput
            id={{id}}
            name={{name}}
            value={{this.initialDatatypeValue}}
            required={{false}}
            @width="block"
            @disabled={{this.hasLanguage}}
          />
          {{#if error}}
            <AuPill>{{error}}</AuPill>
          {{/if}}
        {{/let}}
      {{/let}}
    </AuFormRow>
    <AuFormRow>
      {{#let (unique-id) "object.language" as |id name|}}
        {{#let (this.findError name) as |error|}}
          <AuLabel
            for={{id}}
            @required={{false}}
            @requiredLabel="Required"
          >Language</AuLabel>
          <AuInput
            id={{id}}
            name={{name}}
            value={{this.triple.object.language}}
            required={{false}}
            @width="block"
            @disabled={{this.hasDatatype}}
          />
          {{#if error}}
            <AuPill>{{error}}</AuPill>
          {{/if}}
        {{/let}}
      {{/let}}
    </AuFormRow>
  {{else if (eq this.termType "ResourceNode")}}
    <AuFormRow @alignment="default">
      {{#let (unique-id) "object.value" as |id name|}}
        {{#let (this.findError name) as |error|}}
          <AuLabel for={{id}} @required={{true}} @requiredLabel="Required">
            Object
          </AuLabel>
          <PowerSelect
            id={{id}}
            {{! For some reason need to manually set width }}
            class="au-u-1-1"
            @searchEnabled={{false}}
            @options={{this.resources}}
            @selected={{this.selectedResourceNode}}
            @onChange={{this.setResourceNodeLink}}
            @allowClear={{true}}
            @placeholder="Select a resource"
            as |obj|
          >
            {{this.resourceNodeLabel obj}}
          </PowerSelect>
          {{#if error}}
            <AuPill>{{error}}</AuPill>
          {{/if}}
        {{/let}}
      {{/let}}
    </AuFormRow>
  {{else if (eq this.termType "ContentLiteral")}}
    <AuFormRow>
      {{#let (unique-id) "object.datatype.value" as |id name|}}
        {{#let (this.findError name) as |error|}}
          <AuLabel
            for={{id}}
            @required={{false}}
            @requiredLabel="Required"
          >Datatype</AuLabel>
          <AuInput
            id={{id}}
            name={{name}}
            value={{this.initialDatatypeValue}}
            required={{false}}
            @width="block"
            @disabled={{this.hasLanguage}}
          />
          {{#if error}}
            <AuPill>{{error}}</AuPill>
          {{/if}}
        {{/let}}
      {{/let}}
    </AuFormRow>
    <AuFormRow>
      {{#let (unique-id) "object.language" as |id name|}}
        {{#let (this.findError name) as |error|}}
          <AuLabel
            for={{id}}
            @required={{false}}
            @requiredLabel="Required"
          >Language</AuLabel>
          <AuInput
            id={{id}}
            name={{name}}
            value={{this.triple.object.language}}
            required={{false}}
            @width="block"
            @disabled={{this.hasDatatype}}
          />
          {{#if error}}
            <AuPill>{{error}}</AuPill>
          {{/if}}
        {{/let}}
      {{/let}}
    </AuFormRow>
  {{/if}}

</form>