verben-authentication-ui 0.3.1 → 0.3.3

package/src/lib/components/sso/sso-form/sso-form.component.html

@@ -0,0 +1,109 @@
+<form
+  [formGroup]="form"
+  class="flex flex-col px-3 pb-3 rounded-xl h-full w-full relative"
+>
+  <verbena-input
+    name="Name"
+    label="Name:"
+    formControlName="Name"
+    [(ngModel)]="currentData?.data.Name"
+  />
+  <verbena-input
+    label="Description:"
+    name="Description"
+    formControlName="Description"
+    [(ngModel)]="currentData?.data.Description"
+  />
+  <verbena-input
+  label="Link:"
+  name="Link"
+  formControlName="Link"
+  [(ngModel)]="currentData?.data.Link"
+/>
+<span class="block my-2 ">Logo</span>
+<label [style.background-color]="'#f9f9f9'" class="border cursor-pointer border-secondary-200 rounded-md w-full px-4 py-2 flex justify-between">
+  <span *ngIf="!uploadedFileName">{{isUploading?"uploading...":"Upload a photo"}}</span>
+  <span *ngIf="fileUploadError" class="error">{{ fileUploadError }}</span>
+  <div *ngIf="uploadedFileName" class="flex items-center text-sm gap-2 border border-primary rounded-lg px-3 ">
+    <span>{{ uploadedFileName }}</span>
+    <button
+      [style.color]="'black'"
+      type="button"
+      (click)="removeFile()"
+    >
+      &#x2715;
+    </button>
+  </div>
+  <input
+  id="logo"
+[type]="'file'"
+  label="Logo:"
+  name="Logo"
+  accept="image/png"
+  formControlName="Logo"
+  (change)="onFileSelected($event)"
+  formControlName="Logo"
+/>
+<span class="flex gap-2">
+<span class="bg-primary flex icon-container rounded-md justify-center items-center">
+  <img src="./assets/icons/cam.png" class="icon-width"/>
+</span>
+<span  class="bg-primary flex icon-container rounded-md justify-center items-center">
+  <img src="./assets/icons/file.png" class="icon-width2"/>
+</span>
+</span>
+</label>
+
+  <!-- buttons -->
+  <div
+    class="flex justify-between bottom-8 left-0 right-0 px-3 pb-2 absolute"
+    style="
+      display: flex;
+      justify-content: space-between;
+      position: absolute;
+      padding: 8px 12px;
+      right: 0;
+      left: 0;
+      bottom: 32;
+    "
+  >
+    <!-- <verbena-button
+      text="Delete"
+      class="bg-secondary-200 text-[black]"
+      (click)="onDelete()"
+    />
+    <verbena-button
+      text="Save"
+      class="bg-primary text-[black]"
+      (click)="onSave()"
+    />
+
+    <verbena-button
+      text="Secondary Button"
+      styleType="secondary"
+    ></verbena-button> -->
+    <verbena-button
+      width="114px"
+      height="39px"
+      text="Delete"
+      [bgColor]="'#999999'"
+      [textColor]="'#404040'"
+      borderRadius="10px"
+    ></verbena-button>
+    <verbena-button
+      (click)="switchView.emit()"
+      text="Switch To Table"
+      styleType="ylw-outline"
+    ></verbena-button>
+    <verbena-button
+      text="Save"
+      bgColor="#28a745"
+      textColor="#404040"
+      borderRadius="10px"
+      pd="10px 20px"
+      [bgColor]="'#FFE681'"
+      width="114px"
+      height="39px"
+    ></verbena-button>
+  </div>
+</form>

package/src/lib/components/sso/sso-form/sso-form.component.spec.ts

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

package/src/lib/components/sso/sso-form/sso-form.component.ts

@@ -0,0 +1,70 @@
+import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { CardData } from 'verben-ng-ui';
+
+
+@Component({
+  selector: 'lib-sso-form',
+  templateUrl: './sso-form.component.html',
+  styleUrl: './sso-form.component.css',
+})
+export class SsoFormComponent {
+  isUploading: boolean = false;
+  uploadedFileName: string | null = null;
+  fileUploadError: string | null = null;
+  @Input() currentData:CardData|null=null
+  @Output() switchView = new EventEmitter<undefined>();
+
+  form: FormGroup;
+
+  constructor(private fb: FormBuilder) {
+    this.form = this.fb.group({
+      Description: [''],
+      Name: [''],
+      Link: [''],
+      Logo: [''],
+    });
+  }
+
+  ngOnInit(): void {}
+
+  onSave(): void {
+    if (this.form.valid) {
+      // Emit save event with form value
+      console.log('Form saved:', this.form.value);
+    }
+  }
+  onDelete(): void {
+    // Emit delete event
+    console.log('Delete requested');
+  }
+  onFileSelected(event: Event) {
+    const input = event.target as HTMLInputElement;
+    if (input.files && input.files.length > 0) {
+      const file = input.files[0];
+      this.fileUploadError = null;
+      if (!file) {
+        this.isUploading = true;
+      }
+      if (file.size > 5000000) {
+        this.fileUploadError = 'File size exceeds 5MB limit.';
+        this.uploadedFileName = null;
+        this.isUploading = false; // Reset isUploading state
+      } else {
+        this.uploadedFileName = file.name;
+      }
+    } else {
+      this.isUploading = false;
+    }
+  }
+
+  removeFile() {
+    this.uploadedFileName = null;
+    this.fileUploadError = null;
+    const fileInput = document.getElementById('attachment') as HTMLInputElement;
+    if (fileInput) {
+      fileInput.value = '';
+    }
+  }
+
+}

package/src/lib/components/sso/sso.columns.ts

@@ -0,0 +1,32 @@
+
+import { ColumnDefinition } from 'verben-ng-ui';
+import { SingleSignOn } from '../../models/single-sign-on';
+
+export const columns: ColumnDefinition<SingleSignOn>[] = [
+  {
+    id: 'createdAt',
+    header: 'Created',
+    accessorKey: 'CreatedAt',
+  },
+  {
+    id: 'name',
+    header: 'Name',
+    accessorKey: 'Name',
+  },
+  {
+    id: 'description',
+    header: 'Description',
+    accessorKey: 'Description',
+  },
+  {
+    id: 'link',
+    header: 'Link',
+    accessorKey: 'Link',
+  },
+  {
+    id: 'logo',
+    header: 'Logo',
+    accessorKey: 'Logo',
+  },
+  { id: 'actions', header: 'Actions', accessorKey: 'Name' },
+];

package/src/lib/components/sso/sso.component.css

@@ -0,0 +1,47 @@
+.flex {
+  display: flex;
+}
+.w-full {
+  width: 100%;
+}
+.bg-secondary-200 {
+  background-color: #e8eaf1;
+}
+.flex-col {
+  flex-direction: column;
+}
+.items-center{
+    align-items: center;
+}
+.bg-primary {
+  background-color: #d4a007;
+}
+.border-primary{
+    border:1px solid #d4a007;
+}
+.rounded-lg{
+    border-radius: 20px;
+}
+.w-3 {
+  width: 6px;
+}
+.rounded-tr-none {
+  border-top-right-radius: 0;
+}
+
+.rounded-br-none {
+  border-bottom-right-radius: 0;
+}
+.bg-secondary-100 {
+    background-color: rgba(128, 128, 128, 0.055);
+
+}
+.bg-secondary{
+    background-color: #E8EAF1;
+}
+.p-2{
+    padding: 6px;
+}
+.logo-width{
+  width: 70px;
+}

package/src/lib/components/sso/sso.component.html

@@ -0,0 +1,208 @@
+<div class="space-y-8">
+  <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'"
+    [selectedSortCount]="selectedSortCount"
+    [selectedColumnCount]="selectedColumnCount"
+    [selectedFilterTableCount]="selectedFilterTableCount"
+    [showColumnChild]="showColumn"
+    [showSortChild]="showSort"
+    [showFilterChild]="showFilter"
+    [isTableView]="false"
+    [selectedFilterTableCount]="0"
+    [cardIcon]="'list-view'"
+    [tableIcon]="'table-view'"
+    (viewChange)="onViewChange($event)"
+    (stateChange)="onStateChange($event)"
+  >
+    <div table-content>
+      <lib-data-table
+        [data]="data"
+        [columns]="filteredColumns"
+        [styleConfig]="styles"
+        (selectionChange)="onSelectionChange($event)"
+      >
+        <ng-container libColumn="createdAt">
+          <ng-template #cell let-value>
+            {{ value | date }}
+          </ng-template>
+        </ng-container>
+        <ng-container libColumn="logo">
+          <ng-template #cell let-value>
+            <img class="logo-width" [src]="value"/>
+          </ng-template>
+        </ng-container>
+        <ng-container libColumn="actions">
+          <ng-template #cell let-value let-deleteRow let-rowIndex>
+            <div class="flex space-x-8" style="display: flex; gap: 24px">
+              <verben-svg
+                (click)="openDetailView(value)"
+                icon="edit"
+                [width]="15"
+                [height]="15"
+                stroke="#3479E9"
+                fill="white"
+                class="cursor-pointer"
+              ></verben-svg>
+              <verben-svg
+                icon="delete"
+                [width]="15"
+                [height]="15"
+                stroke="#E20000"
+                (click)="deleteRow()"
+                class="cursor-pointer"
+              ></verben-svg>
+            </div>
+          </ng-template>
+          <ng-template #header>
+            <strong>Actions</strong>
+          </ng-template>
+        </ng-container>
+      </lib-data-table>
+    </div>
+    <div card-content>
+      <verben-card-data-view
+        borderRadius="12px"
+        (loadMoreClick)="loadMore()"
+        #vdcv
+        dataId="Link"
+        border="5px"
+        [cardDataList]="cardData"
+        rbgColor="#f5f6f9"
+      >
+        <verben-left-card-data-view class="">
+          <verben-left-card-data
+            #vlcd
+            [parent]="vdcv"
+            dataId="Link"
+            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 pr-1 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 flex-col py-2 px-4 w-full">
+                    <div class="flex">
+                      <span class="font-bold text-sm">{{ item.data.Name }}</span>
+                    </div>
+                    @for (ciItem of item.body; track ciItem.value) {
+                    <div class="flex items-center justify-between gap-2">
+                      <div>
+                        <span class="text-muted font-light text-xs"
+                          >{{ ciItem.title }}:</span
+                        >
+                        <span class="text-black text-xs font-semibold">{{ item.data.Description }}</span>
+                      </div>
+                      <img class="logo-width" [alt]="ciItem.title" [src]="item.data.Logo"/>
+                    </div>
+                    }
+                  </div>
+                </div>
+              </div>
+            </ng-template>
+          </verben-left-card-data>
+        </verben-left-card-data-view>
+
+        <verben-right-card-data-view>
+          <ng-template #parent>
+            <lib-sso-form
+              [currentData]="currentData"
+              (switchView)="vdv.toggleView()"
+            ></lib-sso-form>
+          </ng-template>
+        </verben-right-card-data-view>
+
+        <verben-card-data-view-footer class="float-right">
+          <div class="flex gap-2 mt-1">
+            <span class="paginator-text"
+              >{{ cardData.length }} records loaded</span
+            >
+            <button (click)="loadMore()" class="load-more">Load more</button>
+          </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)="onFilterApplied($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>

package/src/lib/components/sso/sso.component.spec.ts

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