verben-authentication-ui 1.0.12 → 1.0.13

package/src/lib/components/user-management/user-management.component.html

@@ -1,455 +0,0 @@
-<div class="flex flex-col gap-4 message-log-container">
-  <verben-data-view
-    #vdv
-    [viewState]="{
-      isSearch: true,
-      isColumn: true,
-      isFilter: true,
-      isSort: true,
-      isExport: true,
-      isSelect: true,
-
-      isToggle: true
-    }"
-    [buttonClass]="'my-custom-button-class'"
-    [iconClass]="'my-icon-class'"
-    [activeIconClass]="'my-active-icon-class'"
-    [selectedColumnCount]="selectedColumnCount"
-    [selectedSortCount]="selectedSortCount"
-    [selectedFilterTableCount]="selectedFilterTableCount"
-    (onSearchChange)="onSearch($event)"
-    [searchValue]="searchTerm"
-    [showFilterChild]="showFilter"
-    (viewChange)="onViewChange($event)"
-    (stateChange)="onStateChange($event)"
-    [isTableView]="false"
-  >
-    <div class="mt-2" table-content>
-      <lib-data-table
-        [data]="users"
-        [columns]="filteredColumns"
-        [formGroupConfig]="formGroupConfig()"
-        [styleConfig]="styles"
-        (selectionChange)="onSelectionChange($event)"
-        (rowSave)="onDataSave($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="user">
-          <ng-template #cellEdit let-formControl="formControl" let-value>
-            <verbena-input
-              name="FirstName"
-              type="text"
-              [formControl]="formControl"
-            />
-          </ng-template>
-        </ng-container>
-        <ng-container libColumn="mail">
-          <ng-template #cellEdit let-formControl="formControl" let-value>
-            <verbena-input
-              name="MailAddress"
-              type="email"
-              [formControl]="formControl"
-            />
-          </ng-template>
-        </ng-container>
-        <ng-container libColumn="phone">
-          <ng-template #cellEdit let-formControl="formControl" let-value>
-            <verbena-input
-              name="PhoneNumber"
-              type="tel"
-              [formControl]="formControl"
-            />
-          </ng-template>
-        </ng-container>
-        <ng-container libColumn="address">
-          <ng-template #cellEdit let-formControl="formControl" let-value>
-            <verbena-input
-              name="Address"
-              type="text"
-              [formControl]="formControl"
-            />
-          </ng-template>
-        </ng-container>
-        <ng-container libColumn="role">
-          <ng-template #cellEdit let-formControl="formControl" let-value>
-            <verben-drop-down
-              name="Role"
-              styleClass="w-full"
-              width="100%"
-              [multiselect]="false"
-              [filter]="true"
-              [showClear]="true"
-              placeholder=""
-              [(options)]="Roles"
-              id="role"
-              optionLabel="Name"
-              optionValue="Code"
-              [formControl]="formControl"
-              class="form-control"
-            >
-            </verben-drop-down>
-          </ng-template>
-        </ng-container>
-
-        <ng-container libColumn="actions">
-          <ng-template
-            #cell
-            let-value
-            let-deleteRow="deleteRow"
-            let-isEditing="isEditing"
-            let-toggleRowEdit="toggleRowEdit"
-            let-row="row"
-            let-rowIndex="rowIndex"
-          >
-            <div class="flex gap-6">
-              <verben-svg
-                (click)="toggleRowEdit()"
-                icon="edit"
-                [width]="15"
-                [height]="15"
-                class="cursor-pointer"
-              ></verben-svg>
-
-              <verben-svg
-                icon="delete"
-                [width]="15"
-                [height]="15"
-                (click)="deleteRow()"
-                class="cursor-pointer"
-              ></verben-svg>
-            </div>
-          </ng-template>
-          <ng-template
-            #cellEdit
-            let-value
-            let-deleteRow="deleteRow"
-            let-isEditing="isEditing"
-            let-toggleRowEdit="toggleRowEdit"
-            let-row="row"
-            let-rowIndex="rowIndex"
-          >
-            <div class="flex gap-6">
-              <verben-svg
-                (click)="toggleRowEdit()"
-                icon="tick"
-                [width]="15"
-                [height]="15"
-                class="cursor-pointer"
-              ></verben-svg>
-
-              <verben-svg
-                icon="delete"
-                [width]="15"
-                [height]="15"
-                (click)="toggleRowEdit()"
-                class="cursor-pointer"
-              ></verben-svg>
-
-              <!-- <verben-svg
-                icon="cardViewAlt"
-                [width]="15"
-                [height]="15"
-                class="cursor-pointer"
-                (click)="goToCardView(value)"
-              ></verben-svg> -->
-            </div>
-          </ng-template>
-          <ng-template #header>
-            <strong>Actions</strong>
-          </ng-template>
-        </ng-container>
-        <ng-container libColumn="status">
-          <ng-template
-            #cell
-            let-isEditing="isEditing"
-            let-toggleRowEdit="toggleRowEdit"
-            let-deleteRow="deleteRow"
-            let-value="value"
-          >
-            <lib-user-status-badge [status]="value"></lib-user-status-badge>
-          </ng-template>
-
-          <ng-template
-            #cellEdit
-            let-rowIndex="rowIndex"
-            let-formControl="formControl"
-          >
-            <verben-drop-down
-              styleClass="w-full"
-              width="100%"
-              [multiselect]="false"
-              placeholder="Set status"
-              [options]="statuses"
-              [formControl]="formControl"
-              class="form-control"
-            >
-            </verben-drop-down>
-          </ng-template>
-        </ng-container>
-      </lib-data-table>
-    </div>
-    <div card-content>
-      <verben-card-data-view
-        borderRadius="12px"
-        (loadMoreClick)="loadMore()"
-        #vdcv
-        dataId="MailAddress"
-        border="5px"
-        [cardDataList]="cardData"
-        rbgColor="#f5f6f9"
-        mg="0px"
-        class="gap-1"
-      >
-        <verben-left-card-data-view class="m-0 gap-2">
-          <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)="currentData = vdcv.onItemClick(item)" class="flex">
-                <verben-svg
-                  [width]="15"
-                  [height]="15"
-                  (click)="vlcd.showChildren(item)"
-                  [ngClass]="vlcd.showToggle(item) ? 'visible' : 'invisible'"
-                  class="items-center flex cursor-pointer"
-                  [icon]="item.isChildrenExpanded ? 'minus' : 'plus'"
-                />
-                <div
-                  (click)="currentData = vdcv.onItemClick(item)"
-                  class="flex cursor-pointer 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="flex-1 flex items-end gap-y-2 gap-x-4 p-4">
-                    <div class="flex-1 space-y-2">
-                      <span
-                        class="font-semibold text-[#404040] flex-1 truncate"
-                        >{{ item.title }}</span
-                      >
-
-                      <p class="flex items-center my-1">
-                        <label for="phone" class="text-[10px] font-light"
-                          >Role:</label
-                        >
-                        <span id="phone" class="text-sm truncate">{{
-                          item.data.Role?.Name
-                        }}</span>
-                      </p>
-                    </div>
-
-                    <div class="grid gap-y-1">
-                      <p class="grid">
-                        <!-- <label
-                          for="role"
-                          class="text-[10px] font-light text-[#404040]"
-                          >Role</label
-                        >
-                        <span id="role" class="text-sm font-medium">{{
-                          item.data?.Role?.Name
-                        }}</span> -->
-                      </p>
-
-                      <lib-user-status-badge
-                        [status]="item.data.Status"
-                      ></lib-user-status-badge>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </ng-template>
-          </verben-left-card-data>
-        </verben-left-card-data-view>
-
-        <verben-right-card-data-view>
-          <ng-template #parent>
-            <div class="bg-secondary-100 py-2 flex flex-col gap-20 px-2">
-              <lib-user-request-form
-                [roles]="Roles"
-                [tags]="Tags()"
-                [currentData]="currentData"
-                (switchView)="vdv.toggleView()"
-              ></lib-user-request-form>
-              <div class="flex justify-end bottom-8 left-0 right-0 p-3">
-                <!-- <verbena-button text="Delete" bgColor="#999999" textColor="white"
-                border="1px solid #999999" (click)="onDelete()"></verbena-button> -->
-                <div class="flex gap-3">
-                  <verbena-button
-                    (click)="vdv.toggleView()"
-                    text="Switch To Table"
-                    styleType="ylw-outline"
-                  ></verbena-button>
-                  <verbena-button
-                    text="Save"
-                    bgColor="#FFE681"
-                    (click)="onSave()"
-                    textColor="#404040"
-                    border="1px solid #FFE681"
-                  >
-                    <!-- (click)="" -->
-                  </verbena-button>
-                </div>
-              </div>
-            </div>
-          </ng-template>
-        </verben-right-card-data-view>
-
-        <verben-card-data-view-footer class="w-full">
-          <div
-            [ngClass]="{
-              'flex gap-2 items-center': true,
-              'justify-end': true,
-            }"
-          >
-            <!-- <verbena-button
-              *ngIf="!vdcv.hasCurrentItem()"
-              [fontWeight]="'bold'"
-              [bgColor]="'#8E8D87'"
-              [borderRadius]="'4px'"
-              [textColor]="'#fff'"
-              [pd]="'9.79px 37.28px'"
-              [text]="'Delete'"
-            >
-            </verbena-button> -->
-            <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 text-[#3479E9] underline"
-              >
-                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
-        [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"
-        (filtersApplied)="onFilterApplied($event)"
-      ></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-xport
-      [columns]="allColumns"
-      [data]="users"
-      >
-      </lib-data-xport>
-    </div>
-  </verben-data-view>
-  <div
-    *ngIf="!vdcv.hasCurrentItem() && this.cardContextHistory.length == 0"
-    class="message-log-button-container flex justify-between"
-  ></div>
-
-  <div *ngIf="vdv.isTableView" class="w-full flex gap-2 justify-end">
-    <!-- <div class="message-log-button-container flex justify-between">
-      <verbena-button
-        [fontWeight]="'bold'"
-        [bgColor]="'#8E8D87'"
-        [borderRadius]="'4px'"
-        [textColor]="'#fff'"
-        [pd]="'9.79px 37.28px'"
-        [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 text-[#3479E9] underline"
-      >
-        Load more
-      </button>
-    </div>
-  </div>
-</div>

package/src/lib/components/user-management/user-management.component.spec.ts

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