vc-create-dashboard 3.0.6 → 3.0.62

package/src/lib/create-dashboard-container/user-list/user-list.component.html

@@ -0,0 +1,357 @@
+<div class="user-list" [class.animate-slideInRight]="animation">
+  <div
+    class="user-list-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4"
+  >
+    <div class="vx-fs-14 vx-fw-500 vx-label-txt">
+      Who can view this dashboard?
+    </div>
+  </div>
+  <div class="user-list-body">
+    <div
+      class="user-list-tab vx-d-flex vx-align-center vx-mb-2"
+      *ngIf="groupsEnabled"
+    >
+      <button
+        (click)="switchTab('USER')"
+        class="tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-4"
+        [class.active]="currentTab === 'USER'"
+      >
+        USERS
+        <span
+          class="vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4"
+          >{{ totalList }}</span
+        >
+      </button>
+      <button
+        id="switchtab"
+        (click)="switchTab('GROUP')"
+        class="tab-btn vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-m-0 vx-d-flex vx-align-center vx-lh-4"
+        [class.active]="currentTab === 'GROUP'"
+      >
+        USER GROUPS
+        <span
+          id="groupscount"
+          class="vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4"
+          >{{ totalgroups }}</span
+        >
+      </button>
+    </div>
+
+    <div class="user-list-search vx-mb-2">
+      <i class="icons">&#xe90b;</i>
+      <input
+        type="text"
+        [(ngModel)]="searchValue"
+        placeholder="{{
+          currentTab === 'USER' ? 'Search User(s)' : 'Search User Group(s)'
+        }} who can view this dashboard"
+        (keyup.enter)="setSearchValue()"
+        (focusout)="setSearchValue()"
+      />
+    </div>
+
+    <ng-container *ngIf="currentTab === 'USER'">
+      <div
+        class="vx-d-flex vx-align-center vx-justify-end"
+        *ngIf="totalPages > 1"
+      >
+        <div
+          class="pagination-box"
+          *ngIf="totalPages > 1 && searchList.length > 1"
+        >
+          <app-pagination
+            (paginationFilter)="paginationFilter($event)"
+            [limit]="limit"
+            [totalPages]="totalPages"
+            [totalList]="totalList"
+          ></app-pagination>
+        </div>
+      </div>
+      <div class="user-list-body-top" *ngIf="searchList.length !== 0">
+        <app-cs-checkbox
+          *ngIf="!searchValue && searchList.length > 1"
+          [ngValue]="selectedList.length == totalList"
+          (ngValueChange)="selectAllUsers($event)"
+        >
+          <strong>{{
+            selectedList.length == totalList ? "Deselect All" : "Select All"
+          }}</strong>
+        </app-cs-checkbox>
+        <app-cs-checkbox
+          *ngIf="searchValue && searchList.length > 1"
+          [ngValue]="checkSelectAll()"
+          (ngValueChange)="selectAll($event)"
+        >
+          <strong>{{
+            selectedList.length == totalList ? "Deselect All" : "Select All"
+          }}</strong>
+        </app-cs-checkbox>
+      </div>
+      <div class="list-of-user">
+        <div
+          class="selection-list vx-mb-4"
+          [class.with-group]="groupsEnabled"
+          [class.with-noData]="searchList.length == 0"
+          [class.with-pagination]="totalPages > 1 && searchList.length > 1"
+        >
+          <ul *ngIf="searchList.length !== 0">
+            <li *ngFor="let data of searchList; let i = index">
+              <app-cs-checkbox
+                [disabled]="
+                  listDetails.nonRemovableUsersList.includes(
+                    data[listDetails.elementIdKey]
+                  )
+                "
+                [ngValue]="
+                  selectedList.length > 0 &&
+                  selectedIds.includes(data[listDetails.elementIdKey])
+                "
+                (ngValueChange)="selectElement(data)"
+                [arTooltip]="data[listDetails.tooltipKey]"
+                placement="bottom-left"
+                delay="0"
+                [tooltipMandatory]="true"
+                >{{ data[listDetails.displayElementKey] }}</app-cs-checkbox
+              >
+            </li>
+          </ul>
+
+          <app-no-data
+            *ngIf="!vLoader && searchList.length == 0"
+            [noDataImage]="ASSETS.search_data"
+            [noDataText]="'No data to display'"
+          ></app-no-data>
+        </div>
+
+        <app-loader-inline *ngIf="vLoader"></app-loader-inline>
+      </div>
+    </ng-container>
+
+    <ng-container *ngIf="currentTab === 'GROUP' && groupsEnabled">
+      <ng-container *ngIf="groupdata as groups">
+        <div class="vx-d-flex vx-align-center vx-justify-end" *ngIf="true">
+          <div class="pagination-box" *ngIf="total_group_pages > 1">
+            <app-pagination
+              (paginationFilter)="paginationFilter($event)"
+              [limit]="limit"
+              [totalPages]="total_group_pages"
+              [totalList]="totalgroups"
+            ></app-pagination>
+          </div>
+        </div>
+        <ng-container *ngIf="true">
+          <div
+            class="user-list-mid vx-mb-4"
+            [class.with-pagination]="total_group_pages > 1"
+          >
+            <ng-container *ngIf="groups?.length > 0">
+              <div class="user-list-select vx-mb-4">
+                <app-cs-checkbox
+                  [disabled]="false"
+                  *ngIf="!searchValue && groups.length > 1"
+                  [ngValue]="selectedgroupList.length == totalgroups"
+                  (ngValueChange)="selectAllGroups($event)"
+                >
+                  <div
+                    class="user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none"
+                  >
+                    {{
+                      selectedgroupList.length == totalgroups
+                        ? "Deselect All"
+                        : "Select All"
+                    }}
+                  </div>
+                </app-cs-checkbox>
+                <app-cs-checkbox
+                  [disabled]="false"
+                  *ngIf="searchValue && groups.length > 1"
+                  [ngValue]="checkSelectAllGroups()"
+                  (ngValueChange)="selectAllsearchgroups($event)"
+                >
+                  <div
+                    class="user-name vx-fs-12 vx-fw-600 vx-label-txt vx-tt-none"
+                  >
+                    {{
+                      selectedgroupList.length == totalgroups
+                        ? "Deselect All"
+                        : "Select All"
+                    }}
+                  </div>
+                </app-cs-checkbox>
+              </div>
+              <div class="user-list-item">
+                <ul class="vx-m-0 vx-p-0 vx-d-flex">
+                  <li
+                    class="vx-mb-4"
+                    *ngFor="let data of groups; let i = index"
+                  >
+                    <app-cs-checkbox
+                      (ngValueChange)="selectGroupElement(data)"
+                      [disabled]="false"
+                      [ngValue]="
+                        selectedgroupList.length > 0 &&
+                        selectedGroupIds.includes(data[listDetails.groupIdkey])
+                      "
+                    >
+                      <div class="user-name vx-d-flex vx-align-center">
+                        <div
+                          class="group-name"
+                          [arTooltip]="data[listDetails.displayGroupKey]"
+                          placement="bottom-left"
+                          delay="0"
+                          [tooltipMandatory]="true"
+                        >
+                          {{ data[listDetails.displayGroupKey] }}
+                        </div>
+                        <span
+                          id="usersofgroup"
+                          class="counter vx-fs-9 vx-fw-600 vx-pl-1 vx-pr-1 vx-lh-3 vx-tt-uppercase vx-ml-2"
+                          >{{ data["associatedUsers"].length }}
+                          {{
+                            data["associatedUsers"].length > 1
+                              ? "USERS"
+                              : "USER"
+                          }}</span
+                        >
+                      </div>
+                    </app-cs-checkbox>
+                  </li>
+                </ul>
+              </div>
+            </ng-container>
+            <ng-container *ngIf="groups?.length == 0 && !vLoaderGroups">
+              <app-no-data
+                [noDataImage]="ASSETS.search_data"
+                [noDataText]="
+                  searchKey?.length > 0
+                    ? 'No match found.'
+                    : 'No data to display.'
+                "
+              ></app-no-data>
+            </ng-container>
+            <app-loader-inline *ngIf="vLoaderGroups"></app-loader-inline>
+          </div>
+        </ng-container>
+      </ng-container>
+    </ng-container>
+
+    <div class="user-floating-bar" *ngIf="groupsEnabled">
+      <div
+        class="user-floating-bar-container vx-d-flex vx-align-center vx-justify-between"
+      >
+        <div class="left vx-d-flex vx-align-center">
+          <button
+            class="counter vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 vx-m-0 vx-pl-1 vx-pr-1"
+            *ngIf="selectedList?.length"
+            appPopover
+            (click)="userCount.popover()"
+            placement="left"
+          >
+            {{ selectedList?.length }}
+          </button>
+          <div class="name vx-fs-12 vx-paragraph-txt vx-ml-2">
+            <span *ngIf="selectedList?.length === 1"
+              >User
+              {{ selectedgroupList?.length > 0 ? " & " : "selected" }}</span
+            >
+            <span *ngIf="selectedList?.length > 1"
+              >Users
+              {{ selectedgroupList?.length > 0 ? " & " : "are selected" }}</span
+            >
+          </div>
+          <button
+            class="counter group vx-fs-9 vx-fw-500 vx-txt-white vx-d-flex vx-align-center vx-justify-center vx-lh-4 vx-ml-2 vx-pl-1 vx-pr-1"
+            *ngIf="selectedgroupList?.length"
+            appPopover
+            (click)="groupCount.popover()"
+            placement="left"
+          >
+            {{ selectedgroupList?.length }}
+          </button>
+          <div class="name vx-fs-12 vx-paragraph-txt vx-ml-2">
+            <span *ngIf="selectedgroupList?.length === 1"
+              >User Group selected</span
+            >
+            <span *ngIf="selectedgroupList?.length > 1"
+              >User Groups selected</span
+            >
+          </div>
+
+          <app-popover #userCount [dontCloseonClick]="true">
+            <div class="action-list">
+              <ul class="action-item">
+                <li *ngFor="let element of selectedList">
+                  <div class="avatar-card">
+                    <span
+                      class="value"
+                      [arTooltip]="element.member_name"
+                      placement="bottom-left"
+                      delay="0"
+                      type="black"
+                      [tooltipMandatory]="false"
+                    >
+                      <i
+                        class="icons cross-icon"
+                        (click)="selectElement(element)"
+                        *ngIf="
+                          !listDetails.nonRemovableUsersList.includes(
+                            element?.member_id
+                          )
+                        "
+                        >&#xe90d;</i
+                      >
+                      {{ element.member_name }}
+                    </span>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </app-popover>
+
+          <app-popover #groupCount [dontCloseonClick]="true">
+            <div class="action-list">
+              <ul class="action-item">
+                <li *ngFor="let element of selectedgroupList">
+                  <div class="avatar-card">
+                    <span
+                      class="value"
+                      [arTooltip]="element?.group_name"
+                      placement="bottom-left"
+                      delay="0"
+                      type="black"
+                      [tooltipMandatory]="false"
+                    >
+                      <i
+                        class="icons cross-icon"
+                        (click)="selectGroupElement(element)"
+                        >&#xe90d;</i
+                      >
+                      {{ element?.group_name }}
+                    </span>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </app-popover>
+        </div>
+
+        <div class="right vx-d-flex vx-align-center">
+          <button class="cancel" (click)="closeUserList.emit()">Cancel</button>
+          <button [disabled]="false" (click)="onSubmit()">
+            Next <i class="icons">&#xe91e;</i>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div class="user-list-footer" *ngIf="!groupsEnabled">
+      <app-dashboard-footer
+        [footerDetails]="footerDetails"
+        (cancelEvent)="closeUserList.emit(); paginationService.reset()"
+        (deleteEvent)="selectElement($event)"
+        (submitEvent)="onSubmit()"
+        [userButtonColor]="'greenBg'"
+      ></app-dashboard-footer>
+    </div>
+  </div>
+</div>