verben-authentication-ui 1.0.2 → 1.0.3

package/src/lib/components/user-management/states/user-management.state.ts

@@ -0,0 +1,65 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { QueryParams } from '../../../models/query-params';
+import { User } from '../../../models/user';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class UserManagementState {
+  private updating$ = new BehaviorSubject<boolean>(false);
+  private users$ = new BehaviorSubject<User[]>([]);
+  private queryParams$ = new BehaviorSubject<QueryParams<User>>({
+    skip: 0,
+    limit: 10,
+    sortParam: 'CreatedAt',
+    sortOrder: 'asc',
+  });
+
+  isUpdating$(): Observable<boolean> {
+    return this.updating$.asObservable();
+  }
+
+  setUpdating(isUpdating: boolean): void {
+    this.updating$.next(isUpdating);
+  }
+
+  getUsers$(): Observable<User[]> {
+    return this.users$.asObservable();
+  }
+
+  setUsers(users: User[]): void {
+    this.users$.next(users);
+  }
+
+  getQueryParams$(): Observable<QueryParams<User>> {
+    return this.queryParams$.asObservable();
+  }
+
+  getQueryParamsValue(): QueryParams<User> {
+    return this.queryParams$.getValue();
+  }
+
+  updateQueryParams(params: Partial<QueryParams<User>>): void {
+    this.queryParams$.next({ ...this.queryParams$.getValue(), ...params });
+  }
+
+  addUser(user: User): void {
+    const currentUsers = this.users$.getValue();
+    this.users$.next([...currentUsers, user]);
+  }
+
+  updateUser(updatedUser: User): void {
+    const users = this.users$.getValue();
+    const index = users.findIndex((u) => u.id === updatedUser.id);
+    if (index !== -1) {
+      users[index] = updatedUser;
+      this.users$.next([...users]);
+    }
+  }
+
+  removeUser(userId: string): void {
+    const currentUsers = this.users$.getValue();
+    this.users$.next(currentUsers.filter((u) => u.id !== userId));
+  }
+}

package/src/lib/components/user-management/user-management-form/use-management-form.component.ts

@@ -0,0 +1,73 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { CardData } from 'verben-ng-ui';
+import { Role } from '../../../models/Role';
+import { Tag } from '../../../models/Tag';
+import { Status } from '../../../models/status';
+import { User } from '../../../models/user';
+
+interface UserFormData {
+  MailAddress: string;
+  FirstName: string;
+  PhoneNumber: string;
+}
+
+@Component({
+  selector: 'lib-user-request-form',
+  templateUrl: './user-management-form.component.html',
+  styleUrl: './user-management-form.component.css',
+})
+export class UserManagementFormComponent {
+  // @Input() roles: Role[] = [];
+  // @Input() status: Status[] = [];
+
+  @Input() set currentData(value: CardData | null) {
+    if (value?.data) {
+      this.form.patchValue({
+        MailAddress: value.data.MailAddress || '',
+        FirstName: value.data.FirstName || '',
+        PhoneNumber: value.data.PhoneNumber || '',
+        Address: value.data.Address || '',
+        RoleID: value.data.RoleID || '',
+        Tags: value.data.Tags || [],
+        Status: value.data.Status || '',
+      });
+    } else {
+      this.form.reset();
+    }
+  }
+  @Input() roles: Role[] = [];
+  @Input() tags: Tag[] = [];
+
+  @Output() switchView = new EventEmitter<undefined>();
+  @Output() onFormSave = new EventEmitter<Partial<User>>();
+
+  form: FormGroup;
+
+  constructor(private fb: FormBuilder) {
+    this.form = this.fb.group({
+      MailAddress: ['', { readonly: true }],
+      FirstName: ['', { readonly: true }],
+      PhoneNumber: ['', { readonly: true }],
+      Address: ['', { readonly: true }],
+      Status: ['', { readonly: true }],
+      RoleID: [''],
+      Tags: [[]],
+    });
+  }
+
+  ngOnInit(): void {}
+
+  onSave(): void {
+    if (this.form.valid) {
+      // Emit save event with form value
+      console.log('Form saved:', this.form.value);
+      this.onFormSave.emit(this.form.value);
+    }
+  }
+
+  onDelete(): void {
+    // Emit delete event
+    console.log('Delete requested');
+  }
+}

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

@@ -0,0 +1,80 @@
+<form
+  [formGroup]="form"
+  class="flex flex-col px-3 pb-3 rounded-xl h-full w-full relative space-y-4 "
+>
+
+    <verbena-input
+  label="Name:"
+  name="FirstName"
+  type="text"
+  
+  formControlName="FirstName"
+
+
+  />
+  <verbena-input
+  label="Phone Number:"
+  name="PhoneNumber"
+  type="tel"
+  formControlName="PhoneNumber"
+ 
+  />
+  <verbena-input
+    name="MailAddress"
+    label="E-Mail Address:"
+    [type]="'email'"
+    formControlName="MailAddress"
+ 
+  />
+
+
+  <verbena-input
+    label="Address"
+    name="Address"
+    type="text"
+    formControlName="Address"
+  
+  />
+  
+  <div class="space-y-1">
+    <label for="role">Role</label>
+
+    <verben-drop-down
+      label="Role"
+      styleClass="w-full"
+      width="100%"
+      [multiselect]="false"
+      [filter]="true"
+      [showClear]="true"
+      placeholder=""
+      [(options)]="roles"
+      id="role"
+      optionLabel="Name"
+      optionValue="Code"
+      formControlName="RoleID"
+      class="form-control"
+    >
+    </verben-drop-down>
+  </div>
+
+  <div class="space-y-1">
+    <label for="tags">Tags</label>
+
+    <verben-drop-down
+      label="Tags"
+      styleClass="w-full"
+      width="100%"
+      [multiselect]="true"
+      [filter]="true"
+      [showClear]="true"
+      placeholder=""
+      [(options)]="tags"
+      id="tags"
+      optionLabel="Name"
+      optionValue="Code"
+      formControlName="Tags"
+      class="form-control"
+    >
+    </verben-drop-down>
+  </div>
+</form>

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

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

package/src/lib/components/user-management/user-management.columns.ts

@@ -0,0 +1,51 @@
+import { ColumnDefinition } from 'verben-ng-ui';
+import { User } from '../../models/user';
+
+
+export const columns: ColumnDefinition<User>[] = [
+  {
+    id: 'select',
+    header: '',
+  },
+  {
+    id: 'createdAt',
+    header: 'CREATED',
+    accessorKey: 'CreatedAt',
+  },
+  {
+    id: 'user',
+    header: 'NAME',
+    accessorFn: (row) => `${row.FirstName} ${row.LastName}`,
+  },
+  {
+    id: 'mail',
+    header: 'E-MAIL',
+    accessorKey: 'MailAddress',
+  },
+
+  {
+    id: 'address',
+    header: 'ADDRESS',
+    accessorKey: 'Address',
+  },
+  {
+    id: 'phone',
+    header: 'PHONE NUMBER',
+    accessorKey: 'PhoneNumber',
+  },
+  {
+    id: 'role',
+    header: 'ROLE',
+    accessorKey: 'Role',
+  },
+  {
+    id: 'status',
+    header: 'STATUS',
+    accessorKey: 'Status',
+  },
+  {
+    id: 'actions',
+    header: 'ACTIONS',
+    accessorKey: 'MailAddress',
+  },
+];

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

@@ -0,0 +1,31 @@
+@import "../../../theme/tailwind.css";
+
+.master-only-contanier{
+  margin-top: 0 !important;
+}
+
+.scroll-no::-webkit-scrollbar{
+  width: 4px;
+}
+
+.scroll-no::-webkit-scrollbar-thumb{
+  background: grey;
+}
+.justify-pp{
+  justify-content: start !important;
+  margin-top: 0 !important;
+}
+.toolbar{
+  margin: 0 !important;
+}
+
+@media screen and (max-width: 1024px) {
+  .scroll-no{
+    padding: 5px ;
+  }
+}
+
+.view-links {
+  color: #3479e9;
+  cursor: pointer;
+}

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

@@ -0,0 +1,319 @@
+<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]="0"
+    (onSearchChange)="onSearch($event)"
+    [searchValue]="searchTerm"
+  
+    [searchValue]="searchTerm"
+    [selectedSortCount]="0"
+    [showFilterChild]="showFilter"
+    [selectedFilterTableCount]="0"
+    (viewChange)="onViewChange($event)"
+    (stateChange)="onStateChange($event)"
+    [isTableView]="false"
+  >
+    <div class="mt-2" table-content>
+      <lib-data-table
+        [data]="users"
+        [columns]="filteredColumns"
+        [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="actions">
+          <ng-template #cell let-value let-deleteRow >
+            <div class="flex gap-6">
+              <verben-svg
+                (click)="openDetailView(value)"
+                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 #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-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"
+                          >Phone Number:</label
+                        >
+                        <span id="phone" class="text-sm truncate">{{
+                          item.data.PhoneNumber
+                        }}</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-export  (exportDataEvent)="handleExport($event)">
+      </lib-data-export>
+    </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

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