verben-authentication-ui 1.0.1 → 1.0.3

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

@@ -0,0 +1,55 @@
+.view-links {
+  font-size: 14px !important;
+  color: #0000FF;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.view-links:hover {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.context-banner {
+  background-color: rgba(212, 160, 7, 0.45)
+}
+
+.card-min-height {
+  gap: 10px;
+}
+
+::ng-deep .childrenPadding {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+/* ::ng-deep .toolbar {
+  margin-bottom: 15px;
+} */
+
+/* ::ng-deep .master-only-container {
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+::ng-deep .master-detail-container {
+  margin: 0 !important;
+  padding: 0 !important;
+} */
+.pop-up-content {
+  border-radius: 4px;
+  background-color: white;
+  border: 1px solid rgba(212, 161, 7, 0.5);
+}
+
+.pop-up-value {
+  padding: 10px 20px;
+}
+
+.pop-up-content>div:nth-child(1) {
+  border-bottom: 4px solid #FFE681;
+}
+
+.width-max {
+  min-width: max-content;
+}

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

@@ -0,0 +1,571 @@
+<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

@@ -0,0 +1,23 @@
+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();
+  });
+});