override render()

in web/gr-checkers-list.ts [148:215]
68 lines of code
1 McCabe index (conditional complexity)

  override render() {
    return html`
      <div id="container">
        <div id="topContainer">
          <div>
            <label>Filter:</label>
            <input
              .value="${this.filter}"
              @input="${(e: InputEvent) => {
                this.filter = value(e);
                this.startingIndex = 0;
              }}"
            />
          </div>
          ${this.renderCreateNewButton()}
        </div>
        <table id="list" class="genericList">
          <tr class="headerRow">
            <th class="name topHeader">Checker Name</th>
            <th class="name topHeader">Repository</th>
            <th class="name topHeader">Status</th>
            <th class="name topHeader">Required</th>
            <th class="topHeader description">Checker Description</th>
            <th class="name topHeader">Edit</th>
          </tr>
          <tbody id="listBody" class="${this.loading ? 'loading' : ''}">
            ${this.getVisibleCheckers().map(c => this.renderCheckerRow(c))}
          </tbody>
        </table>
        <nav>${this.renderPrevButton()}${this.renderNextButton()}</nav>
      </div>
      <gr-overlay id="createOverlay">
        <gr-dialog
          .confirmLabel="Create"
          @confirm="${() => this.createNewModal?.handleCreateChecker()}"
          @cancel="${this.handleCreateCancel}"
        >
          <div class="header" slot="header">Create Checkers</div>
          <div slot="main">
            <gr-create-checkers-dialog
              id="createNewModal"
              .pluginRestApi="${this.pluginRestApi}"
              @cancel="${this.handleEditCancel}"
            >
            </gr-create-checkers-dialog>
          </div>
        </gr-dialog>
      </gr-overlay>
      <gr-overlay id="editOverlay">
        <gr-dialog
          .confirmLabel="Save"
          @confirm="${() => this.editModal?.handleEditChecker()}"
          @cancel="${this.handleEditCancel}"
        >
          <div class="header" slot="header">Edit Checker</div>
          <div slot="main">
            <gr-create-checkers-dialog
              id="editModal"
              .checker="${this.checker}"
              .pluginRestApi="${this.pluginRestApi}"
              @cancel="${this.handleEditCancel}"
            >
            </gr-create-checkers-dialog>
          </div>
        </gr-dialog>
      </gr-overlay>
    `;
  }