verben-authentication-ui 1.0.3 → 1.0.4

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

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

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

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

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

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

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

@@ -1,319 +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]="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

@@ -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();
-  });
-});