directory-connector/src/app/tabs/dashboard.component.html

<div class="card mb-3">
  <h3 class="card-header">{{ "sync" | i18n }}</h3>
  <div class="card-body">
    <p>
      {{ "lastGroupSync" | i18n }}:
      @if (!lastGroupSync) {
        <span>-</span>
      }
      {{ lastGroupSync | date: "medium" }}
      <br />
      {{ "lastUserSync" | i18n }}:
      @if (!lastUserSync) {
        <span>-</span>
      }
      {{ lastUserSync | date: "medium" }}
    </p>
    <p>
      {{ "syncStatus" | i18n }}:
      @if (syncRunning) {
        <strong class="text-success">{{ "running" | i18n }}</strong>
      }
      @if (!syncRunning) {
        <strong class="text-danger">{{ "stopped" | i18n }}</strong>
      }
    </p>
    <form #startForm [appApiAction]="startPromise" class="d-inline">
      <button
        type="button"
        (click)="start()"
        class="btn btn-primary"
        [disabled]="startForm.loading"
      >
        <i class="bwi bwi-spinner bwi-fw bwi-spin" [hidden]="!startForm.loading"></i>
        {{ "startSync" | i18n }}
      </button>
    </form>
    <button type="button" (click)="stop()" class="btn btn-danger text-white">
      {{ "stopSync" | i18n }}
    </button>
    <form #syncForm [appApiAction]="syncPromise" class="d-inline">
      <button type="button" (click)="sync()" class="btn btn-primary" [disabled]="syncForm.loading">
        {{ "syncNow" | i18n }}
      </button>
    </form>
  </div>
</div>
<div class="card">
  <h3 class="card-header">{{ "testing" | i18n }}</h3>
  <div class="card-body">
    <p>{{ "testingDesc" | i18n }}</p>
    <form #simForm [appApiAction]="simPromise" class="d-inline">
      <button
        type="button"
        (click)="simulate()"
        class="btn btn-primary"
        [disabled]="simForm.loading"
      >
        <i class="bwi bwi-spinner bwi-fw bwi-spin" [hidden]="!simForm.loading"></i>
        {{ "testNow" | i18n }}
      </button>
    </form>
    <div class="form-check mt-2">
      <input
        class="form-check-input"
        type="checkbox"
        id="simSinceLast"
        [(ngModel)]="simSinceLast"
      />
      <label class="form-check-label" for="simSinceLast">{{ "testLastSync" | i18n }}</label>
    </div>
    @if (!simForm.loading && (simUsers || simGroups)) {
      <hr />
      <div class="row">
        <div class="col-lg">
          <h4>{{ "users" | i18n }}</h4>
          @if (simEnabledUsers && simEnabledUsers.length) {
            <ul class="bwi-ul testing-list">
              @for (u of simEnabledUsers; track u) {
                <li title="{{ u.referenceId }}">
                  <i class="bwi bwi-li bwi-user"></i>
                  {{ u.displayName }}
                </li>
              }
            </ul>
          }
          @if (!simEnabledUsers || !simEnabledUsers.length) {
            <p>
              {{ "noUsers" | i18n }}
            </p>
          }
          <h4>{{ "disabledUsers" | i18n }}</h4>
          @if (simDisabledUsers && simDisabledUsers.length) {
            <ul class="bwi-ul testing-list">
              @for (u of simDisabledUsers; track u) {
                <li title="{{ u.referenceId }}">
                  <i class="bwi bwi-li bwi-user"></i>
                  {{ u.displayName }}
                </li>
              }
            </ul>
          }
          @if (!simDisabledUsers || !simDisabledUsers.length) {
            <p>
              {{ "noUsers" | i18n }}
            </p>
          }
          <h4>{{ "deletedUsers" | i18n }}</h4>
          @if (simDeletedUsers && simDeletedUsers.length) {
            <ul class="bwi-ul testing-list">
              @for (u of simDeletedUsers; track u) {
                <li title="{{ u.referenceId }}">
                  <i class="bwi bwi-li bwi-user"></i>
                  {{ u.displayName }}
                </li>
              }
            </ul>
          }
          @if (!simDeletedUsers || !simDeletedUsers.length) {
            <p>
              {{ "noUsers" | i18n }}
            </p>
          }
        </div>
        <div class="col-lg">
          <h4>{{ "groups" | i18n }}</h4>
          @if (simGroups && simGroups.length) {
            <ul class="bwi-ul testing-list">
              @for (g of simGroups; track g) {
                <li title="{{ g.referenceId }}">
                  <i class="bwi bwi-li bwi-sitemap"></i>
                  {{ g.displayName }}
                  @if (g.users && g.users.length) {
                    <ul class="small">
                      @for (u of g.users; track u) {
                        <li title="{{ u.referenceId }}">
                          {{ u.displayName }}
                        </li>
                      }
                    </ul>
                  }
                </li>
              }
            </ul>
          }
          @if (!simGroups || !simGroups.length) {
            <p>{{ "noGroups" | i18n }}</p>
          }
        </div>
      </div>
    }
  </div>
</div>