vc-create-dashboard 3.0.67 → 3.0.68

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

@@ -1,358 +0,0 @@
-<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]="
-                  (searchValue?.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>