dc/client/src/app/group/group.component.html

<app-sidebar class="sidebar-height">
  <clr-tree>
    @if (groups) {
      <clr-tree-node class="search-node">
        <div class="tree-search-wrapper">
          <input
            appStealFocus
            clrInput
            #searchLibTreeInput
            placeholder="Filter by Groups"
            name="input"
            [(ngModel)]="groupSearch"
            (keyup)="groupListOnFilter()"
            autocomplete="off"
          />
          @if (searchLibTreeInput.value.length < 1) {
            <clr-icon shape="search"></clr-icon>
          }
          @if (searchLibTreeInput.value.length > 0) {
            <clr-icon
              (click)="groupSearch = ''; groupListOnFilter()"
              shape="times"
            ></clr-icon>
          }
        </div>
      </clr-tree-node>
    }

    @for (group of groups; track group) {
      @if (!group['hidden']) {
        <clr-tree-node
          (click)="groupOnClick(group)"
          [class.active]="group.GROUPURI === groupUri"
        >
          <p class="m-0 cursor-pointer list-padding">
            <clr-icon shape="users"></clr-icon>
            {{ group.GROUPNAME }}
          </p>
        </clr-tree-node>
      }
    }
  </clr-tree>
</app-sidebar>

<div class="content-area">
  @if (loading) {
    <div class="loadingSpinner">
      <span class="spinner"> Loading... </span>
    </div>
  }
  @if (groupMembers && !loading) {
    <div>
      @if (serverType !== ServerType.SasViya) {
        <div class="clr-row">
          <div class="clr-col-8">
            <table class="table group-info">
              <tbody>
                <tr>
                  <td class="left">
                    <p class="group-info-text">
                      <b>{{ groupName }}</b>
                    </p>
                  </td>
                </tr>
                <tr>
                  <td class="left">
                    <i>{{ groupDesc || 'no description' }}</i>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      }
      <div class="clr-row">
        <div class="clr-col-8">
          <div class="card group-data">
            @if (serverType !== ServerType.SasViya) {
              <div>
                <h3>MEMBERS ({{ groupMemberCount }})</h3>
                @if (groupMemberCount == 0) {
                  <h5>No Members Present</h5>
                }
                <div class="table-container">
                  @if (groupMemberCount != 0) {
                    <table class="table member-table">
                      <thead>
                        <tr>
                          @if (serverType === ServerType.Sas9) {
                            <td class="width-25"><b>NAME</b></td>
                            <td class="width-25"><b>EMAIL</b></td>
                            <td class="width-25"><b>CREATED</b></td>
                            <td class=""><b>UPDATED</b></td>
                          }
                          @if (serverType === ServerType.Sasjs) {
                            <td class="width-25"><b>ID</b></td>
                            <td class="width-25"><b>DISPLAY NAME</b></td>
                            <td class="width-25"><b>USER NAME</b></td>
                          }
                        </tr>
                      </thead>
                      <tbody>
                        @for (member of groupMembers; track member) {
                          <tr
                            [routerLink]="
                              '/view/usernav/users/' +
                              (member.URIMEM || member.ID)
                            "
                          >
                            @if (serverType === ServerType.Sas9) {
                              <td class="">{{ member.MEMBERNAME }}</td>
                              <td class="">{{ member.EMAIL }}</td>
                              <td class="">{{ member.MEMBERCREATED }}</td>
                              <td class="">{{ member.MEMBERUPDATED }}</td>
                            }
                            @if (serverType === ServerType.Sasjs) {
                              <td class="">{{ member.ID }}</td>
                              <td class="">{{ member.DISPLAYNAME }}</td>
                              <td class="">{{ member.USERNAME }}</td>
                            }
                          </tr>
                        }
                      </tbody>
                    </table>
                  }
                </div>
              </div>
            }
            @if (serverType === ServerType.SasViya) {
              <div>
                <h3>{{ groupName }}</h3>
                @if (groupMemberCount == 0) {
                  <h5>No Members Present</h5>
                }
                <div class="table-container">
                  @if (groupMemberCount != 0) {
                    <table class="table member-table">
                      <thead>
                        <tr>
                          <td>
                            <b>MEMBERS ({{ groupMemberCount }})</b>
                          </td>
                        </tr>
                      </thead>
                      <tbody>
                        @for (member of groupMembers; track member) {
                          <tr
                            [routerLink]="
                              '/view/usernav/users/' + member.MEMBERID
                            "
                          >
                            <td class="">{{ member.MEMBERNAME }}</td>
                          </tr>
                        }
                      </tbody>
                    </table>
                  }
                </div>
              </div>
            }
            <br />
          </div>
        </div>
      </div>
    </div>
  }
</div>