override render()

in web/gr-create-checkers-dialog.ts [139:248]

• 103 lines of code
• 1 McCabe index (conditional complexity)

  override render() {
    return html`
      <div class="gr-form-styles">
        <section ?hidden="${this.errorMsg !== ''}">
          <span class="error">${this.errorMsg}</span>
        </section>
        <section>
          <span class="title">Name*</span>
          <input
            .value="${this.name}"
            @input="${(e: InputEvent) => (this.name = value(e))}"
            autocomplete="on"
          />
        </section>
        <section>
          <span class="title">Description</span>
          <input
            .value="${this.description}"
            @input="${(e: InputEvent) => (this.description = value(e))}"
            autocomplete="on"
          />
        </section>
        <section>
          <span class="title">Repository*</span>
          <div ?hidden="${this.repo === ''}">
            <gr-repo-chip
              .repo="${this.repo}"
              @remove="${() => (this.repo = '')}"
              tabindex="-1"
            ></gr-repo-chip>
          </div>
          <div ?hidden="${this.repo !== ''}">
            <gr-autocomplete
              .query="${(input: string) => this.repoSuggestions(input)}"
              @commit="${(e: CustomEvent<{value: string}>) => {
                this.repo = e.detail.value;
              }}"
              clearOnCommit
              warnUncommitted
            >
            </gr-autocomplete>
          </div>
        </section>

        <section>
          <span class="title">Scheme*</span>
          <input
            .value="${this.scheme}"
            @input="${(e: InputEvent) => (this.scheme = value(e))}"
            ?disabled="${this.editing}"
            autocomplete="on"
          />
        </section>

        <section>
          <span class="title">ID*</span>
          <input
            .value="${this.checkerId}"
            @input="${(e: InputEvent) => (this.checkerId = value(e))}"
            ?disabled="${this.editing}"
            autocomplete="on"
          />
        </section>

        <section>
          <span class="title">Url</span>
          <input
            .value="${this.url}"
            @input="${(e: InputEvent) => (this.url = value(e))}"
            autocomplete="on"
          />
        </section>

        <section>
          <span class="title">UUID</span>
          <span class="title uuid">${this.getUuid()}</span>
        </section>

        <section>
          <span class="title">Status</span>
          <gr-dropdown-list
            text="Status"
            .items="${statuses}"
            .value="${this.status}"
            @value-change="${(e: CustomEvent<{value: Status}>) =>
              (this.status = e.detail.value)}"
          >
          </gr-dropdown-list>
        </section>

        <section>
          <span class="title">Required</span>
          <input
            type="checkbox"
            ?checked="${this.required}"
            @input="${(e: InputEvent) => (this.required = checked(e))}"
          />
        </section>

        <section>
          <span class="title">Query</span>
          <input
            .value="${this.query}"
            @input="${(e: InputEvent) => (this.query = value(e))}"
            autocomplete="on"
          />
        </section>
      </div>
    `;
  }