verben-authentication-ui 1.0.3 → 1.0.4

package/src/lib/components/role-control/role-control.component.html

@@ -1,571 +0,0 @@
-<div #messageLog class="flex flex-col gap-4 message-log-container">
-  <div
-    *ngIf="this.cardContextHistory.length > 0"
-    class="context-banner py-3 px-4 rounded-xl flex item-center justify-space-between gap-3"
-  >
-    <div class="flex gap-2 flex-1 context-banner-content">
-      <div
-        class="context-content items-center flex gap-2"
-        *ngFor="let context of this.cardContextHistory; index as i"
-      >
-        <div class="context-main-content-container flex gap-4">
-          <span class="context-caption font-bold text-[#404040]">{{
-            context.data.ChildrenType &&
-            context.data.ChildrenType == childPermissionRef
-              ? context.data.Name
-              : context.title
-          }}</span>
-          <span
-            *ngIf="i == this.cardContextHistory.length - 1"
-            class="context-subcaption"
-            >{{ this.getCardSubCaption(context) }}</span
-          >
-        </div>
-        <div *ngIf="i < this.cardContextHistory.length - 1">/</div>
-      </div>
-    </div>
-    <div class="flex justify-end">
-      <verben-svg
-        (click)="closeDetails()"
-        class="cursor-pointer"
-        icon="close-circle-full"
-        [width]="20"
-        [height]="20"
-      ></verben-svg>
-    </div>
-  </div>
-  <div
-    *ngIf="this.cardContextHistory.length > 0 && this.cardData.length > 0"
-    class="flex items-center gap-2 px-2"
-  >
-    <input
-      [disabled]="this.isCheckboxDisabled(this.cardData[0])"
-      type="checkbox"
-      class="mt-1 cursor-pointer"
-      [ngModel]="isAllSelected(this.cardData[0])"
-      (click)="
-        $event.preventDefault(); this.saveAllRoleDynamic(this.cardData[0])
-      "
-    />
-
-    <span class="font-semibold">Select All</span>
-  </div>
-  <verben-data-view
-    #vdv
-    [viewState]="{
-      isSearch: this.cardContextHistory.length == 0,
-      isColumn: this.cardContextHistory.length == 0,
-      isFilter: this.cardContextHistory.length == 0,
-      isSort: this.cardContextHistory.length == 0,
-      isExport: this.cardContextHistory.length == 0 && (!permissionConfig || permissionConfig.Actions['Export']),
-      isSelect: this.cardContextHistory.length == 0,
-      isCreate: this.cardContextHistory.length == 0 && (!permissionConfig || permissionConfig.Actions['Create']),
-      isToggle:this.cardContextHistory.length == 0,
-    }"
-    [buttonClass]="'my-custom-button-class'"
-    [iconClass]="'my-icon-class'"
-    [activeIconClass]="'my-active-icon-class'"
-    [isTableView]="false"
-    [selectedColumnCount]="0"
-    [selectedSortCount]="0"
-    [selectedFilterTableCount]="0"
-    (viewChange)="onViewChange($event)"
-    (stateChange)="onStateChange($event)"
-    (onSearchChange)="handleSearch($event)"
-  >
-    <div class="mt-2" table-content>
-      <lib-data-table
-        [dataKey]="'Id'"
-        #dt
-        [data]="data"
-        [columns]="visibleColumnDef"
-        [styleConfig]="styles"
-        (selectionChange)="onSelectionChange($event)"
-      >
-        <ng-container libColumn="select">
-          <ng-template
-            #cell
-            let-isSelected="isSelected"
-            let-toggleRowSelection="toggleRowSelection"
-          >
-            <input
-              type="checkbox"
-              [checked]="isSelected"
-              (change)="toggleRowSelection()"
-            />
-          </ng-template>
-          <ng-template
-            #header
-            let-allRowsSelected="allRowsSelected"
-            let-someRowsSelected="someRowsSelected"
-            let-toggleAllRows="toggleAllRows"
-          >
-            <input
-              type="checkbox"
-              [checked]="allRowsSelected()"
-              [indeterminate]="someRowsSelected()"
-              (change)="toggleAllRows()"
-            />
-          </ng-template>
-        </ng-container>
-        <ng-container libColumn="createdAt">
-          <ng-template #cell let-value>
-            {{ value | date }}
-          </ng-template>
-        </ng-container>
-        <ng-container libColumn="updatedAt">
-          <ng-template #cell let-value>
-            {{ value | date }}
-          </ng-template>
-        </ng-container>
-        <ng-container libColumn="name">
-          <ng-template #cell let-row="row" let-value>
-            {{ value.Name }}
-          </ng-template>
-          <ng-template
-            #cellEdit
-            let-row="row"
-            let-updateValue="updateValue"
-            let-updateData="updateData"
-            let-value
-          >
-            <div class="width-max">
-              <verbena-input [(ngModel)]="value.Name"></verbena-input>
-            </div>
-          </ng-template>
-        </ng-container>
-
-        <ng-container libColumn="actions">
-          <ng-template
-            #cell
-            let-isEditing="isEditing"
-            let-toggleRowEdit="toggleRowEdit"
-            let-row="row"
-            let-value
-          >
-            <verben-pop-Up
-              #popup
-              [customStyles]="{ 'z-index': '99' }"
-              [enableMouseLeave]="false"
-            >
-              <verben-svg
-                class="cursor-pointer actions-icon"
-                dropdown-trigger
-                icon="list"
-              ></verben-svg>
-              <div class="pop-up-content flex flex-col" dropdown-content>
-                <div
-                  *ngIf="
-                    !permissionConfig || permissionConfig.Actions['Create']
-                  "
-                  (click)="toggleRowEdit(); cacheItem(value); closePopUp()"
-                  class="pop-up-value cursor-pointer"
-                >
-                  Edit
-                </div>
-                <div
-                  (click)="viewDetailsFromTable(value)"
-                  class="pop-up-value cursor-pointer"
-                >
-                  View Details
-                </div>
-                <div class="pop-up-value cursor-pointer">View Users</div>
-              </div>
-            </verben-pop-Up>
-            <!-- <div class="flex gap-4 items-center">
-              <verben-svg (click)="editValue(value)" icon="edit" [width]="15" [height]="15"
-                class="cursor-pointer"></verben-svg>
-              <span (click)="viewDetailsFromTable(value)" class="view-links view-details">view details</span>
-              <span class="view-links view-users">view users</span>
-            </div> -->
-          </ng-template>
-          <ng-template
-            #cellEdit
-            let-isEditing="isEditing"
-            let-toggleRowEdit="toggleRowEdit"
-            let-row="row"
-            let-value
-          >
-            <div class="flex gap-2 items-center">
-              <verben-svg
-                icon="tick"
-                [width]="15"
-                [height]="15"
-                (click)="tableSaveRole(value, toggleRowEdit)"
-              ></verben-svg>
-              <verben-svg
-                (click)="restoreCache(value); toggleRowEdit()"
-                icon="close-no-circle"
-                [width]="15"
-                [height]="15"
-              ></verben-svg>
-              <!-- <verben-svg icon="delete" [width]="15" [height]="15"></verben-svg> -->
-              <verben-svg
-                icon="cardViewAlt"
-                [width]="15"
-                [height]="15"
-                (click)="editValue(value)"
-              ></verben-svg>
-            </div>
-          </ng-template>
-        </ng-container>
-      </lib-data-table>
-    </div>
-    <div card-content>
-      <verben-card-data-view
-        borderRadius="12px"
-        #vdcv
-        dataId="Id"
-        border="5px"
-        [cardDataList]="cardData"
-        rbgColor="#f5f6f9"
-        mg="0px"
-      >
-        <verben-left-card-data-view class="space-y-7">
-          <verben-left-card-data
-            #vlcd
-            [parent]="vdcv"
-            dataId="MailAddress"
-            class="bg-secondary-100 rounded-xl border-primary border-[1px]"
-            [cardDataList]="cardData"
-          >
-            <ng-template #card let-item>
-              <div
-                (click)="roleCardClicked(item)"
-                *ngIf="
-                  item.data.ChildrenType &&
-                  item.data.ChildrenType == childPermissionRef
-                "
-                class="flex cursor-pointer h-[max-content]"
-              >
-                <verben-svg
-                  [width]="15"
-                  [height]="15"
-                  (click)="toggleChildren(item); $event.stopPropagation()"
-                  [ngClass]="
-                    item.children && item.children.length
-                      ? 'visible'
-                      : 'invisible'
-                  "
-                  class="items-center flex pr-1 cursor-pointer"
-                  [icon]="item.isChildrenExpanded ? 'minus' : 'plus'"
-                />
-                <div class="flex w-full bg-secondary rounded-xl">
-                  <div
-                    class="w-3 rounded-xl rounded-tr-none rounded-br-none"
-                    [ngClass]="
-                      item.selected ? 'bg-primary' : 'bg-secondary-200'
-                    "
-                  ></div>
-                  <div class="py-3 px-4 flex-1 h-[100%]">
-                    <div
-                      class="flex items-start flex-1 gap-1 justify-between h-[100%]"
-                    >
-                      <div
-                        class="flex flex-col flex-1 card-min-height justify-between h-[100%]"
-                      >
-                        <h3
-                          class="my-0 font-bold text-[#404040] leading-[19.5px]"
-                        >
-                          {{ item.data.Name }}
-                        </h3>
-                        <span
-                          class="!text-[10px] font-light text-[#404040] leading-[12.1px]"
-                          *ngIf="item.children && item.children.length > 0"
-                        >
-                          {{ getCardSubCaption(item) }}
-                        </span>
-                      </div>
-
-                      <div
-                        *ngIf="item.children && item.children.length > 0"
-                        class="flex items-end h-[100%]"
-                      >
-                        <p
-                          (click)="viewDetails(item); $event.stopPropagation()"
-                          class="my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium"
-                        >
-                          view details
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                *ngIf="
-                  !item.data.ChildrenType ||
-                  item.data.ChildrenType !== childPermissionRef
-                "
-                class="flex h-[max-content]"
-              >
-                <verben-svg
-                  [ngClass]="
-                    item.children && item.children.length
-                      ? 'visible'
-                      : 'invisible'
-                  "
-                  [width]="15"
-                  [height]="15"
-                  (click)="toggleChildren(item)"
-                  class="items-center flex pr-1 cursor-pointer"
-                  [icon]="item.isChildrenExpanded ? 'minus' : 'plus'"
-                />
-                <div class="flex w-full bg-secondary rounded-xl">
-                  <div
-                    class="w-3 rounded-xl rounded-tr-none rounded-br-none"
-                    [ngClass]="
-                      item.selected ? 'bg-primary' : 'bg-secondary-200'
-                    "
-                  ></div>
-                  <div class="py-3 px-4 flex-1 flex gap-2 h-[100%] items-start">
-                    <input
-                      *ngIf="item.data?.Selected != undefined"
-                      [disabled]="this.isCheckboxDisabled(item)"
-                      type="checkbox"
-                      class="mt-1 cursor-pointer"
-                      [(ngModel)]="item.data.Selected"
-                      (click)="
-                        $event.preventDefault(); this.saveRoleDynamic(item)
-                      "
-                    />
-                    <div
-                      class="flex items-start flex-1 gap-1 justify-between h-[100%]"
-                    >
-                      <div
-                        class="flex flex-col flex-1 card-min-height justify-between h-[100%]"
-                      >
-                        <h3
-                          class="my-0 font-bold text-[#404040] leading-[19.5px]"
-                        >
-                          {{ item.title }}
-                        </h3>
-                        <span
-                          class="!text-[10px] font-light text-[#404040] leading-[12.1px]"
-                          *ngIf="item.children && item.children.length > 0"
-                        >
-                          {{ getCardSubCaption(item) }}
-                        </span>
-                      </div>
-
-                      <div
-                        *ngIf="item.children && item.children.length > 0"
-                        class="flex items-end h-[100%]"
-                      >
-                        <p
-                          (click)="viewDetails(item)"
-                          class="my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium"
-                        >
-                          view details
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </ng-template>
-            <ng-template #cardChild let-index="index" let-item>
-              <div class="flex gap-2 items-start h-[max-content]">
-                <input
-                  [ngClass]="index == 0 ? 'visible' : 'invisible'"
-                  [disabled]="this.isCheckboxDisabled(item)"
-                  type="checkbox"
-                  class="mt-1 cursor-pointer"
-                  [ngModel]="isAllSelected(item)"
-                  (click)="
-                    $event.preventDefault(); this.saveAllRoleDynamic(item)
-                  "
-                />
-                <div class="flex w-full bg-secondary rounded-xl">
-                  <div
-                    class="w-3 rounded-xl rounded-tr-none rounded-br-none"
-                    [ngClass]="
-                      item.selected ? 'bg-primary' : 'bg-secondary-200'
-                    "
-                  ></div>
-                  <div class="py-3 px-4 flex-1 flex gap-2 h-[100%] items-start">
-                    <input
-                      *ngIf="item.data?.Selected != undefined"
-                      [disabled]="this.isCheckboxDisabled(item)"
-                      type="checkbox"
-                      class="mt-1 cursor-pointer"
-                      [(ngModel)]="item.data.Selected"
-                      (click)="
-                        $event.preventDefault(); this.saveRoleDynamic(item)
-                      "
-                    />
-                    <div
-                      class="flex items-start flex-1 gap-1 justify-between h-[100%]"
-                    >
-                      <div
-                        class="flex flex-col flex-1 card-min-height justify-between h-[100%]"
-                      >
-                        <h3
-                          class="my-0 font-bold text-[#404040] leading-[19.5px]"
-                        >
-                          {{ item.title }}
-                        </h3>
-                        <span
-                          class="!text-[10px] font-light text-[#404040] leading-[12.1px]"
-                          *ngIf="item.children && item.children.length > 0"
-                        >
-                          {{ getCardSubCaption(item) }}
-                        </span>
-                      </div>
-
-                      <div
-                        *ngIf="item.children && item.children.length > 0"
-                        class="flex items-end h-[100%]"
-                      >
-                        <p
-                          (click)="viewDetailsChild(item)"
-                          class="my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium"
-                        >
-                          view details
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </ng-template>
-          </verben-left-card-data>
-        </verben-left-card-data-view>
-        <verben-right-card-data-view
-          *ngIf="this.cardContextHistory.length == 0"
-        >
-          <ng-template #parent>
-            <div
-              *ngIf="this.currentData"
-              class="flex flex-col rounded-xl h-full w-full justify-between relative space-y-4"
-            >
-              <verbena-input
-                name="Name"
-                label="Name"
-                (ngModelChange)="updateTable()"
-                [(ngModel)]="this.currentData.data.Name"
-              />
-
-              <!-- buttons -->
-              <div class="flex justify-between bottom-8 left-0 right-0">
-                <div></div>
-                <!-- <verbena-button class="verben-delete-button" text="Delete"></verbena-button> -->
-                <div class="flex gap-3">
-                  <verbena-button
-                    class="verben-switch-button"
-                    (click)="goToTableView()"
-                    text="Switch To Table"
-                  ></verbena-button>
-                  <verbena-button
-                    class="verben-primary-button"
-                    (click)="this.saveRole()"
-                    text="Save"
-                  ></verbena-button>
-                </div>
-              </div>
-            </div>
-          </ng-template>
-        </verben-right-card-data-view>
-        <!-- <verben-right-card-data-view>
-          yeshhhhhh
-        </verben-right-card-data-view> -->
-
-        <verben-card-data-view-footer
-          *ngIf="this.cardContextHistory.length == 0"
-        >
-          <div class="flex gap-2 justify-between">
-            <div
-              *ngIf="
-                !vdcv.hasCurrentItem() && this.cardContextHistory.length == 0
-              "
-              class="message-log-button-container flex justify-between"
-            >
-              <!-- <verbena-button [fontWeight]="'bold'" [bgColor]="'#8E8D87'" [borderRadius]="'4px'" [textColor]="'#fff'"
-                [text]="'Delete'">
-              </verbena-button> -->
-            </div>
-            <div
-              class="flex {{
-                vdcv.hasCurrentItem() ? 'flex-1' : ''
-              }} justify-end items-center gap-5"
-            >
-              <span class="paginator-text"
-                >{{ cardData.length }} records loaded</span
-              >
-              <button (click)="loadMore()" class="load-more view-links">
-                Load more
-              </button>
-            </div>
-          </div>
-        </verben-card-data-view-footer>
-      </verben-card-data-view>
-    </div>
-    <div column-content>
-      <verben-visible-column
-        (columnsUpdated)="onColumnsUpdated($event)"
-        [border]="'1px solid rgba(212, 160, 7, 1)'"
-        borderRadius="10px"
-        boxShadow="2px 2px 2px 0px silver"
-        bgColor="white"
-        width="400px"
-        textColor="black"
-        pd="1rem"
-        primaryColor="#FFE681"
-        secondaryColor="#3479E9"
-        [columns]="visibleColumns"
-        [displayedColumns]="5"
-      ></verben-visible-column>
-    </div>
-    <div filter-content>
-      <verben-table-filter
-        (filtersApplied)="onFilterUpdated($event)"
-        [border]="'1px solid rgba(212, 160, 7, 1)'"
-        borderRadius="10px"
-        boxShadow="2px 2px 2px 0px silver"
-        bgColor="white"
-        width="420px"
-        textColor="black"
-        pd="1rem"
-        primaryColor="#FFE681"
-        secondaryColor="#3479E9"
-        tertiaryColor="#404040"
-        [filterOptions]="filterArray"
-        [maxFilterLength]="3"
-      ></verben-table-filter>
-    </div>
-    <div sort-content>
-      <verben-sort-table
-        (selectedOptions)="onSortUpdated($event)"
-        [border]="'1px solid rgba(212, 160, 7, 1)'"
-        borderRadius="10px"
-        boxShadow="2px 2px 2px 0px silver"
-        bgColor="white"
-        width="400px"
-        textColor="black"
-        pd="1rem"
-        primaryColor="#FFE681"
-        secondaryColor="#3479E9"
-        tertiaryColor="#404040"
-        [enableDragAndDrop]="true"
-        [sortOptions]="sortOptions"
-      ></verben-sort-table>
-    </div>
-    <div export-content>
-      <lib-data-export [data]="data" (exportDataEvent)="handleExport($event)">
-      </lib-data-export>
-    </div>
-  </verben-data-view>
-  <div *ngIf="vdv.isTableView" class="flex gap-2 justify-between">
-    <div class="message-log-button-container flex justify-between">
-      <!-- <verbena-button [fontWeight]="'bold'" [bgColor]="'#8E8D87'" [borderRadius]="'4px'" [textColor]="'#fff'"
-        [text]="'Delete'">
-      </verbena-button> -->
-    </div>
-    <div class="flex justify-end items-center gap-5">
-      <span class="paginator-text">{{ cardData.length }} records loaded</span>
-      <button (click)="loadMore()" class="load-more view-links">
-        Load more
-      </button>
-    </div>
-  </div>
-</div>

package/src/lib/components/role-control/role-control.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { RoleControlComponent } from './role-control.component';
-
-describe('RoleControlComponent', () => {
-  let component: RoleControlComponent;
-  let fixture: ComponentFixture<RoleControlComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [RoleControlComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(RoleControlComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});