build_app
This commit is contained in:
@@ -0,0 +1,472 @@
|
||||
<ol class="breadcrumb breadcrumb-arrow font-trirong">
|
||||
<li><a href="javascript://"> Dashboard</a></li>
|
||||
</ol>
|
||||
<section class="ug-hero">
|
||||
<div class="ug-hero__content">
|
||||
<div class="ug-hero__icon"><clr-icon shape="users"></clr-icon></div>
|
||||
<div>
|
||||
<h2 class="ug-hero__title">Dashboard</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ug-hero__actions"><!-- upload and download template -->
|
||||
|
||||
<button class="ug-btn ug-btn-secondary" (click)="downloadFiles()">
|
||||
<clr-icon shape="download"></clr-icon>
|
||||
<span class="ug-btn-text">DOWNLOAD TEMPLATE</span>
|
||||
</button>
|
||||
<button class="ug-btn ug-btn-secondary" (click)="csvImport()">
|
||||
<clr-icon shape="import"></clr-icon>
|
||||
<span class="ug-btn-text">IMPORT</span>
|
||||
</button>
|
||||
<button class="ug-btn ug-btn-secondary" (click)="onExport()">
|
||||
<clr-icon shape="export"></clr-icon>
|
||||
<span class="ug-btn-text">EXPORT XLSX</span>
|
||||
</button>
|
||||
<!-- upload and download template end here-->
|
||||
<button id="add" class="ug-btn ug-btn-primary" (click)="goToAdd()">
|
||||
<clr-icon shape="plus"></clr-icon>
|
||||
<span class="ug-btn-text">ADD</span>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<div class="ug-toolbar">
|
||||
<div class="ug-toolbar__left">
|
||||
<div class="ug-search">
|
||||
<clr-icon shape="search"></clr-icon>
|
||||
<input class="ug-search__input" type="text" placeholder="SEARCH" [(ngModel)]="filterText" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="ug-toolbar__right">
|
||||
<div class="ug-view-toggle">
|
||||
<button class="ug-btn ug-btn-sm" [class.ug-btn-primary]="viewMode==='cards'" (click)="setViewMode('cards')">
|
||||
<clr-icon shape="view-cards"></clr-icon>
|
||||
</button>
|
||||
<button class="ug-btn ug-btn-sm" [class.ug-btn-primary]="viewMode==='table'" (click)="setViewMode('table')">
|
||||
<clr-icon shape="table"></clr-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<clr-datagrid class="ug-grid" [clrDgLoading]="loading" *ngIf="viewMode==='table'">
|
||||
<clr-dg-placeholder>
|
||||
<ng-template #loadingSpinner>
|
||||
<clr-spinner>LOADING ... </clr-spinner>
|
||||
</ng-template>
|
||||
<div *ngIf="error;else loadingSpinner">{{error}}</div>
|
||||
</clr-dg-placeholder>
|
||||
|
||||
|
||||
|
||||
<clr-dg-column [clrDgField]="'name'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Name
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
|
||||
|
||||
|
||||
<clr-dg-column [clrDgField]="'description'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Description
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
|
||||
|
||||
|
||||
<clr-dg-column [clrDgField]="'active'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Active
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
|
||||
|
||||
|
||||
<clr-dg-column [clrDgField]="'date_field'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Date Field
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
|
||||
|
||||
|
||||
<clr-dg-column [clrDgField]="'currency'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Currency
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
|
||||
|
||||
|
||||
<clr-dg-column [clrDgField]="'phoneno'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
PhoneNo
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
|
||||
<!-- who column -->
|
||||
<clr-dg-column> <ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
<clr-icon shape="bars"></clr-icon> Action
|
||||
</ng-container></clr-dg-column>
|
||||
<!-- end -->
|
||||
<clr-dg-row *clrDgItems="let user of filteredGroups;let i = index" [clrDgItem]="user">
|
||||
|
||||
<clr-dg-cell>{{user.name }}</clr-dg-cell>
|
||||
|
||||
|
||||
<clr-dg-cell (click)="goToReplaceStringdescription (user.description)" style="cursor: pointer; align-items: center;"><clr-icon shape="details"></clr-icon>
|
||||
</clr-dg-cell>
|
||||
|
||||
|
||||
<clr-dg-cell>{{user.active }}</clr-dg-cell>
|
||||
|
||||
|
||||
<clr-dg-cell>{{user.date_field }}</clr-dg-cell>
|
||||
|
||||
|
||||
<clr-dg-cell>{{user.currency }}</clr-dg-cell>
|
||||
|
||||
|
||||
<clr-dg-cell>{{user.phoneno }}</clr-dg-cell>
|
||||
|
||||
|
||||
<!-- who column -->
|
||||
<clr-dg-cell>
|
||||
<clr-signpost>
|
||||
<span style="cursor: pointer;" clrSignpostTrigger><clr-icon shape="help" class="success" style="color: rgb(0, 130, 236);"></clr-icon></span>
|
||||
<clr-signpost-content [clrPosition]="'left-middle'" *clrIfOpen>
|
||||
<h5 style="margin-top: 0">Who Column</h5>
|
||||
<div>Account ID: <code class="clr-code">{{user.accountId}}</code></div>
|
||||
<div>Created At: <code class="clr-code">{{user.createdAt| date}}</code></div>
|
||||
<div>Created By: <code class="clr-code">{{user.createdBy}}</code></div>
|
||||
<div>Updated At: <code class="clr-code">{{user.updatedAt | date}}</code></div>
|
||||
<div>Updated By: <code class="clr-code">{{user.updatedBy}}</code></div>
|
||||
</clr-signpost-content>
|
||||
</clr-signpost>
|
||||
</clr-dg-cell>
|
||||
|
||||
<!-- who colmn -->
|
||||
|
||||
|
||||
<clr-dg-action-overflow>
|
||||
<!-- <button class="ug-action-item" *ngIf="medit == 'true' || medit == true" (click)="onEdit(user)">
|
||||
<clr-icon shape="edit"></clr-icon>
|
||||
EDIT
|
||||
</button> -->
|
||||
<button class="ug-action-item" (click)="onEdit(user)">
|
||||
<clr-icon shape="edit"></clr-icon>
|
||||
EDIT
|
||||
</button>
|
||||
<button class="ug-action-item ug-btn-error" (click)="onDelete(user)">
|
||||
<clr-icon shape="trash"></clr-icon>
|
||||
DELETE
|
||||
</button>
|
||||
</clr-dg-action-overflow>
|
||||
|
||||
</clr-dg-row>
|
||||
|
||||
<clr-dg-footer class="ug-grid-footer">
|
||||
<clr-dg-pagination #pagination [clrDgPageSize]="10">
|
||||
<clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Record per page</clr-dg-page-size>
|
||||
{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
|
||||
of {{pagination.totalItems}} Records
|
||||
</clr-dg-pagination>
|
||||
</clr-dg-footer>
|
||||
</clr-datagrid>
|
||||
|
||||
<div class="ug-cards" *ngIf="viewMode==='cards'">
|
||||
<div class="ug-card-item" *ngFor="let user of filteredGroups; let i = index">
|
||||
<div class="ug-card-item__body">
|
||||
|
||||
<div class="ug-kv"><span>Name</span><strong>{{user.name}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>Description</span><strong>{{user.description}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>Active</span><strong>{{user.active}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>Date Field</span><strong>{{user.date_field}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>Currency</span><strong>{{user.currency}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>PhoneNo</span><strong>{{user.phoneno}}</strong></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="ug-card-item__footer">
|
||||
|
||||
<button class="ug-btn ug-btn-sm ug-btn-outline" (click)="onEdit(user)">
|
||||
<clr-icon shape="edit"></clr-icon> Edit
|
||||
</button>
|
||||
<button class="ug-btn ug-btn-sm ug-btn-error" (click)="onDelete(user)">
|
||||
<clr-icon shape="trash"></clr-icon> Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<clr-modal [(clrModalOpen)]="rsModaldescription" [clrModalSize]="'xl'" [clrModalStaticBackdrop]="true">
|
||||
<div class="modal-body">
|
||||
<textarea class="form-control" style="width:100%; height: 400px;" readonly>{{rowSelected}}</textarea>
|
||||
</div></clr-modal>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<clr-modal [(clrModalOpen)]="modalAdd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
|
||||
<h3 class="modal-title">Add Dashboard</h3>
|
||||
<div class="modal-body">
|
||||
<form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="name" class="ug-form-label">Name<span class="required-field">*</span></label>
|
||||
<input type="text" id="name" class="ug-form-input" formControlName="name">
|
||||
<div *ngIf="submitted && entryForm.controls.name.errors" class="ug-form-error">
|
||||
<div *ngIf="submitted && entryForm.controls.name.errors.required">*This field is Required</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="description" class="ug-form-label">Description</label>
|
||||
<textarea
|
||||
id="description"
|
||||
class="ug-form-input"
|
||||
formControlName="description"
|
||||
placeholder="Enter text"
|
||||
rows="3"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label class="ug-form-label">Active</label>
|
||||
<div class="clr-toggle-wrapper">
|
||||
<input type="checkbox" id="active" formControlName="active" clrToggle>
|
||||
<label for="active">Active</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="date_field" class="ug-form-label">Date Field</label>
|
||||
<input type="date" id="date_field" class="ug-form-input" formControlName="date_field">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- currency field start -->
|
||||
<div class="clr-col-sm-12">
|
||||
<label> Currency</label>
|
||||
<input type="number" class="clr-input" formControlName="currency" [value]="entryForm.value.currency | number:'1.2-2' | removeCommas">
|
||||
</div>
|
||||
<!-- currency field end -->
|
||||
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="phoneno" class="ug-form-label">PhoneNo</label>
|
||||
<input type="text" id="phoneno" class="ug-form-input" formControlName="phoneno" placeholder="+91 Enter 10 digit Mobile Number" pattern="((\+)?([1-9]{2}))?[1-9]{1}[0-9]{9}$">
|
||||
<div *ngIf="submitted && entryForm.controls['phoneno'].errors" class="ug-form-error">
|
||||
<div *ngIf="submitted && entryForm.controls['phoneno'].hasError('pattern')">* Please Follow your pattern,+91 Enter 10 digit Mobile Number.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="ug-btn ug-btn-outline" (click)="modalAdd = false">Cancel</button>
|
||||
<button type="submit" class="ug-btn ug-btn-primary">ADD</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</clr-modal>
|
||||
|
||||
<clr-modal [(clrModalOpen)]="modalEdit" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
|
||||
<h3 class="modal-title">Update Dashboard</h3>
|
||||
<div class="modal-body" *ngIf="rowSelected.id">
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="name" class="ug-form-label">Name<span class="required-field">*</span></label>
|
||||
<input type="text" id="name" class="ug-form-input" [(ngModel)]="rowSelected.name" name="name"
|
||||
placeholder="Enter Name">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="description" class="ug-form-label">Description</label>
|
||||
<textarea id="description" class="ug-form-input" [(ngModel)]="rowSelected.description"
|
||||
name="description" placeholder="Enter text" rows="3"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label class="ug-form-label">Active</label>
|
||||
<div class="clr-toggle-wrapper">
|
||||
<input type="checkbox" id="active" name="active" clrToggle [(ngModel)]="rowSelected.active">
|
||||
<label for="active">Active</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="date_field" class="ug-form-label">Date Field</label>
|
||||
<input type="date" id="date_field" class="ug-form-input" [(ngModel)]="rowSelected.date_field" name="date_field">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- currency field start -->
|
||||
<div class="clr-col-sm-12">
|
||||
<label> Currency</label>
|
||||
<input type="number" class="clr-input" [(ngModel)]="rowSelected.currency" name="currency" (blur)="formatCurrencycurrency()" [value]="rowSelected.currency | removeCommas">
|
||||
</div>
|
||||
<!-- currency field end -->
|
||||
|
||||
|
||||
<!-- Phone Number Fields -->
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="phoneno" class="ug-form-label">PhoneNo</label>
|
||||
<input type="text" id="phoneno" class="ug-form-input" [(ngModel)]="rowSelected.phoneno"
|
||||
name="phoneno" placeholder="+91 Enter 10 digit Mobile Number"
|
||||
pattern="((\+)?([1-9]{2}))?[1-9]{1}[0-9]{9}$">
|
||||
<div *ngIf="rowSelected.phoneno && !isValidPhoneno(rowSelected.phoneno)"
|
||||
class="ug-form-error">
|
||||
* Please Follow your pattern,+91 Enter 10 digit Mobile Number.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="ug-btn ug-btn-outline" (click)="modalEdit = false">Cancel</button>
|
||||
<button type="submit" (click)="onUpdate(rowSelected.id)" class="ug-btn ug-btn-primary">Update</button>
|
||||
</div>
|
||||
|
||||
<clr-modal [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
|
||||
<div class="modal-body" *ngIf="rowSelected.id">
|
||||
<div class="ug-delete-header">
|
||||
<div class="ug-delete-icon">
|
||||
<clr-icon shape="exclamation-triangle" size="48"></clr-icon>
|
||||
</div>
|
||||
<h1 class="ug-delete-title">Are You Sure Want to Delete?</h1>
|
||||
<p class="ug-delete-subtitle">This action cannot be undone</p>
|
||||
</div>
|
||||
|
||||
<div class="ug-delete-details"><div class="ug-delete-detail-item">
|
||||
<span class="ug-delete-detail-label">Name:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.name}}</span>
|
||||
</div>
|
||||
|
||||
<div class="ug-delete-detail-item">
|
||||
<span class="ug-delete-detail-label">Description:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.description}}</span>
|
||||
</div>
|
||||
|
||||
<div class="ug-delete-detail-item">
|
||||
<span class="ug-delete-detail-label">Active:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.active}}</span>
|
||||
</div>
|
||||
|
||||
<div class="ug-delete-detail-item">
|
||||
<span class="ug-delete-detail-label">Date Field:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.date_field}}</span>
|
||||
</div>
|
||||
|
||||
<div class="ug-delete-detail-item">
|
||||
<span class="ug-delete-detail-label">Currency:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.currency}}</span>
|
||||
</div>
|
||||
|
||||
<div class="ug-delete-detail-item">
|
||||
<span class="ug-delete-detail-label">PhoneNo:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.phoneno}}</span>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="ug-btn ug-btn-outline" (click)="modaldelete = false">Cancel</button>
|
||||
<button type="submit" (click)="delete(rowSelected.id)" class="ug-btn ug-btn-error">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</clr-modal>
|
||||
|
||||
<clr-modal [(clrModalOpen)]="modalCsv" [clrModalSize]="'sm'" [clrModalStaticBackdrop]="false">
|
||||
<h3 class="modal-title">Import File</h3>
|
||||
<div class="modal-body">
|
||||
<div class="ug-form-group">
|
||||
<label class="ug-form-label">Select CSV File</label>
|
||||
<input type="file" name="file" class="ug-file-input" (change)="selectFile($event)"
|
||||
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="ug-btn ug-btn-outline" type="button" (click)="modalCsv = false">Cancel</button>
|
||||
<button class="ug-btn ug-btn-primary" type="button" [disabled]="!selectedFiles" (click)="saveCsv()">Import</button>
|
||||
</div>
|
||||
</clr-modal>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- htmlpopup -->
|
||||
@@ -0,0 +1,870 @@
|
||||
|
||||
@import '../../../../../../styles.scss';
|
||||
|
||||
// Import design tokens
|
||||
@import '../../../../../../styles/design-tokens';
|
||||
// Newbasicp1 Styles
|
||||
.ug-hero {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24px 32px;
|
||||
background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
|
||||
color: white;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
font-family: var(--theme-font-primary);
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 50%;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
clr-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: white;
|
||||
font-family: var(--theme-font-secondary);
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
opacity: 0.9;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.ug-btn-text {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
// Modern Button Styles using ThemeService
|
||||
.ug-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease-out;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-family: var(--theme-font-primary);
|
||||
z-index: 1;
|
||||
|
||||
&:focus {
|
||||
outline: 2px solid var(--theme-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Sizes
|
||||
&.ug-btn-sm {
|
||||
padding: 8px 16px;
|
||||
font-size: 13px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
&.ug-btn-md {
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
&.ug-btn-lg {
|
||||
padding: 16px 24px;
|
||||
font-size: 16px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
// Variants
|
||||
&.ug-btn-primary {
|
||||
background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
|
||||
color: white;
|
||||
border-color: var(--theme-primary);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, var(--theme-primary, #0284c7) 0%, var(--theme-accent, #7c3aed) 100%);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
&.ug-btn-secondary {
|
||||
background: var(--theme-surface);
|
||||
color: var(--theme-text);
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-background);
|
||||
border-color: rgba(0, 0, 0, 0.2);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
&.ug-btn-outline {
|
||||
background: transparent;
|
||||
color: var(--theme-secondary);
|
||||
border-color: var(--theme-secondary);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
|
||||
&:hover {
|
||||
background: rgba(100, 116, 139, 0.1); // var(--theme-secondary) with 10% opacity
|
||||
border-color: var(--theme-secondary);
|
||||
color: var(--theme-secondary);
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
&.ug-btn-error {
|
||||
background: var(--theme-error, #ef4444);
|
||||
color: white;
|
||||
border-color: var(--theme-error, #ef4444);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-error-dark, #dc2626);
|
||||
border-color: var(--theme-error-dark, #dc2626);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.3), 0 4px 6px -2px rgba(239, 68, 68, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&.ug-btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--theme-text-secondary);
|
||||
border-color: transparent;
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-background);
|
||||
color: var(--theme-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ug-toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
padding: 16px;
|
||||
background: var(--theme-surface);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
|
||||
&__left {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__right {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// Form Container Styles
|
||||
.form-container {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 -12px 16px -12px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
margin: 0 0 16px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.form-col {
|
||||
flex: 1;
|
||||
padding: 0 12px;
|
||||
min-width: 250px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 0;
|
||||
min-width: 100%;
|
||||
margin-bottom: 16px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Password Input Container
|
||||
.password-input-container {
|
||||
position: relative;
|
||||
|
||||
.password-input {
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.password-toggle {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--theme-text-secondary);
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
transition: all 200ms ease-out;
|
||||
|
||||
&:hover {
|
||||
color: var(--theme-text);
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
clr-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Textarea Styles
|
||||
textarea.ug-form-input {
|
||||
min-height: 100px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.ug-search {
|
||||
position: relative;
|
||||
max-width: 400px;
|
||||
|
||||
clr-icon {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #9ca3af;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__input {
|
||||
width: 100%;
|
||||
padding: 12px 12px 12px 40px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
transition: all 200ms ease-out;
|
||||
background: var(--theme-surface);
|
||||
color: var(--theme-text);
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--theme-primary);
|
||||
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); // var(--theme-primary) with 10% opacity
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ug-view-toggle {
|
||||
display: flex;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
.ug-btn {
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
background: var(--theme-surface);
|
||||
color: var(--theme-text-secondary);
|
||||
|
||||
&:first-child {
|
||||
border-right: 1px solid #d1d5db;
|
||||
}
|
||||
|
||||
&.ug-btn-primary {
|
||||
background: var(--theme-primary);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Modern Table Styles
|
||||
.ug-grid {
|
||||
background: var(--theme-surface);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
margin-bottom: 24px;
|
||||
|
||||
::ng-deep .datagrid {
|
||||
.datagrid-head {
|
||||
background: var(--theme-background);
|
||||
|
||||
.datagrid-column {
|
||||
padding: 16px 24px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--theme-text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
}
|
||||
|
||||
.datagrid-row {
|
||||
transition: background-color 150ms ease-out;
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-background);
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.datagrid-cell {
|
||||
padding: 16px 24px;
|
||||
font-size: 14px;
|
||||
color: var(--theme-text);
|
||||
}
|
||||
}
|
||||
|
||||
.datagrid-footer {
|
||||
background: var(--theme-background);
|
||||
border-top: 1px solid #e5e7eb;
|
||||
padding: 16px 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ug-grid-footer {
|
||||
background: var(--theme-background);
|
||||
border-top: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
// Modern Card Styles - More beautiful design
|
||||
.ug-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.ug-card-item {
|
||||
background: var(--theme-surface);
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
border-radius: var(--theme-border-radius); // Using theme variable
|
||||
box-shadow: var(--theme-shadow); // Using theme variable
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
border-color: rgba(14, 165, 233, 0.3); // var(--theme-primary) with 30% opacity
|
||||
}
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 16px;
|
||||
background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), transparent); // var(--theme-primary) with 10% opacity
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
clr-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: var(--theme-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-weight: 700;
|
||||
flex: 1 1 auto;
|
||||
font-size: 18px;
|
||||
color: var(--theme-text);
|
||||
max-width: 60%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__badge {
|
||||
margin-left: auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4px 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
border-radius: 9999px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
&__body {
|
||||
padding: 16px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
||||
background: var(--theme-background);
|
||||
}
|
||||
}
|
||||
|
||||
.ug-kv {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
|
||||
span {
|
||||
color: var(--theme-text-secondary);
|
||||
}
|
||||
|
||||
strong {
|
||||
color: var(--theme-text);
|
||||
font-weight: 500;
|
||||
text-align: right;
|
||||
max-width: 60%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
// Theme the card footer buttons
|
||||
.ug-card-item__footer .ug-btn {
|
||||
border-radius: 10px;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ug-card-item__footer .ug-btn.ug-btn-outline {
|
||||
border: 1px solid var(--theme-secondary);
|
||||
color: var(--theme-secondary);
|
||||
background: transparent;
|
||||
|
||||
&:hover {
|
||||
background: rgba(100, 116, 139, 0.1); // var(--theme-secondary) with 10% opacity
|
||||
border-color: var(--theme-secondary);
|
||||
color: var(--theme-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.ug-card-item__footer .ug-btn.ug-btn-error {
|
||||
background: var(--theme-error, #ef4444);
|
||||
color: #fff;
|
||||
border-color: var(--theme-error, #ef4444);
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-error-dark, #dc2626);
|
||||
border-color: var(--theme-error-dark, #dc2626);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
// Table view action buttons
|
||||
.ug-action-item {
|
||||
@extend .ug-btn;
|
||||
@extend .ug-btn-ghost;
|
||||
@extend .ug-btn-sm;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 4px;
|
||||
text-align: left;
|
||||
|
||||
clr-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
&.ug-btn-error {
|
||||
color: var(--theme-error, #ef4444);
|
||||
|
||||
&:hover {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Ensure action overflow is visible
|
||||
::ng-deep .datagrid-action-overflow {
|
||||
button.action-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 8px 12px;
|
||||
|
||||
clr-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Status Badges
|
||||
.ug-status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 6px 16px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
border-radius: 9999px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.ug-status-enabled {
|
||||
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.ug-status-disabled {
|
||||
background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
// Form Styles
|
||||
.ug-form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.ug-form-label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--theme-text);
|
||||
margin-bottom: 8px;
|
||||
font-family: var(--theme-font-primary);
|
||||
}
|
||||
|
||||
.ug-form-input, .ug-form-select {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: var(--theme-text);
|
||||
background: var(--theme-surface);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
transition: all 200ms ease-out;
|
||||
margin-bottom: 0;
|
||||
font-family: var(--theme-font-primary);
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--theme-primary);
|
||||
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); // var(--theme-primary) with 10% opacity
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: var(--theme-background);
|
||||
color: var(--theme-text-secondary);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&.error {
|
||||
border-color: #ef4444;
|
||||
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--theme-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.ug-form-select {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
|
||||
background-position: right 12px center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 16px 12px;
|
||||
padding-right: 40px;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.ug-form-error {
|
||||
color: #ef4444;
|
||||
font-size: 12px;
|
||||
margin-top: 6px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.required-field {
|
||||
color: #ef4444;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.ug-file-input {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
background: var(--theme-surface);
|
||||
color: var(--theme-text);
|
||||
|
||||
&::file-selector-button {
|
||||
@extend .ug-btn;
|
||||
@extend .ug-btn-secondary;
|
||||
margin-right: 12px;
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Delete Modal Styles
|
||||
.ug-delete-header {
|
||||
text-align: center;
|
||||
padding: 24px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.ug-delete-icon {
|
||||
color: #ef4444;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.ug-delete-title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--theme-text);
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.ug-delete-subtitle {
|
||||
font-size: 16px;
|
||||
color: var(--theme-text-secondary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ug-delete-details {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.ug-delete-detail-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.ug-delete-detail-label {
|
||||
font-weight: 500;
|
||||
color: var(--theme-text-secondary);
|
||||
}
|
||||
|
||||
.ug-delete-detail-value {
|
||||
font-weight: 600;
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
.delete {
|
||||
color: #ef4444;
|
||||
text-align: center;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.heading {
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
color: var(--theme-text);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
// Modal Header
|
||||
::ng-deep .modal-header {
|
||||
background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
|
||||
color: white;
|
||||
border-radius: 16px 16px 0 0 !important;
|
||||
padding: 20px 24px !important;
|
||||
|
||||
.modal-title {
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
margin: 0;
|
||||
font-family: var(--theme-font-secondary);
|
||||
}
|
||||
|
||||
.close {
|
||||
color: white;
|
||||
opacity: 0.8;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Modal Body
|
||||
::ng-deep .modal-body {
|
||||
padding: 24px !important;
|
||||
}
|
||||
|
||||
// Modal Footer
|
||||
::ng-deep .modal-footer {
|
||||
padding: 20px 24px !important;
|
||||
background: var(--theme-background);
|
||||
border-radius: 0 0 16px 16px !important;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
// Recaptcha Container Styles
|
||||
.recaptcha-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.recaptcha-code {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
background: var(--theme-background);
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
|
||||
b {
|
||||
font-size: 18px;
|
||||
letter-spacing: 2px;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle Styles
|
||||
.clr-toggle-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
label {
|
||||
margin-bottom: 0;
|
||||
font-weight: 500;
|
||||
color: var(--theme-text);
|
||||
}
|
||||
}
|
||||
|
||||
// URL Field Styles
|
||||
.ug-form-input[type="url"] {
|
||||
font-family: monospace;
|
||||
}
|
||||
// Responsive adjustments
|
||||
@media (max-width: 768px) {
|
||||
.ug-hero {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
text-align: center;
|
||||
|
||||
&__content {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.ug-toolbar {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.ug-search {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.ug-cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.ug-card-item {
|
||||
&__header {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
|
||||
&__icon {
|
||||
margin-right: 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.recaptcha-code {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
.ug-btn {
|
||||
align-self: flex-end;
|
||||
}
|
||||
}}
|
||||
@@ -0,0 +1,459 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ToastrService } from 'ngx-toastr';
|
||||
import { AlertService } from 'src/app/services/alert.service';
|
||||
import { Dashboardservice} from './Dashboard.service';
|
||||
import { AbstractControl, FormArray, FormBuilder, FormGroup, Validators, ValidationErrors } from '@angular/forms';
|
||||
import { ExtensionService } from 'src/app/services/fnd/extension.service';
|
||||
import { DashboardContentModel2 } from 'src/app/models/builder/dashboard';
|
||||
import { Dashboardcardvariable } from './Dashboard_cardvariable';
|
||||
import { UserInfoService } from 'src/app/services/user-info.service';
|
||||
import { CsvService } from 'src/app/services/csv.service';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
import { ThemeService } from 'src/app/services/theme.service';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { ExcelService } from 'src/app/services/excel.service';
|
||||
import * as moment from 'moment';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
declare var JsBarcode: any;
|
||||
@Component({
|
||||
selector: 'app-Dashboard',
|
||||
templateUrl: './Dashboard.component.html',
|
||||
styleUrls: ['./Dashboard.component.scss']
|
||||
})
|
||||
export class DashboardComponent implements OnInit {
|
||||
cardButton = Dashboardcardvariable.cardButton;
|
||||
cardmodeldata = Dashboardcardvariable.cardmodeldata;
|
||||
public dashboardArray: DashboardContentModel2[];
|
||||
isCardview = Dashboardcardvariable.cardButton;
|
||||
cardmodal; changeView(){
|
||||
this.isCardview = !this.isCardview;
|
||||
}
|
||||
beforeText(fieldtext: string): string { // Extract the text before the first '<'
|
||||
const index = fieldtext.indexOf('<');
|
||||
return index !== -1 ? fieldtext.substring(0, index) : fieldtext;
|
||||
}
|
||||
afterText(fieldtext: string): string { // Extract the text after the last '>'
|
||||
const index = fieldtext.lastIndexOf('>');
|
||||
return index !== -1 ? fieldtext.substring(index + 1) : '';
|
||||
}
|
||||
transform(fieldtext: string): string {
|
||||
const match = fieldtext.match(/<([^>]*)>/);
|
||||
return match ? match[1] : ''; // Extract the text between '<' and '>'
|
||||
}
|
||||
userrole;
|
||||
rowSelected :any= {};
|
||||
modaldelete=false;
|
||||
modalEdit=false;
|
||||
modalAdd= false;
|
||||
public entryForm: FormGroup;
|
||||
loading = false;
|
||||
product;
|
||||
modalOpenedforNewLine = false;
|
||||
newLine:any;
|
||||
additionalFieldsFromBackend: any[] = [];
|
||||
formcode = 'Dashboard_formCode'
|
||||
tableName = 'Dashboard'; checkFormCode; selected: any[] = [];
|
||||
filterText: string = '';
|
||||
viewMode: 'table' | 'cards' = 'cards';
|
||||
private themeSubscription: Subscription; constructor(
|
||||
private extensionService: ExtensionService,
|
||||
private userInfoService:UserInfoService,
|
||||
private mainService:Dashboardservice,
|
||||
private alertService: AlertService,
|
||||
private toastr: ToastrService,
|
||||
private csvService: CsvService,
|
||||
private translate: TranslateService,
|
||||
private themeService: ThemeService,
|
||||
private excel: ExcelService, private _fb: FormBuilder,
|
||||
private router: Router,
|
||||
private route: ActivatedRoute ) { }
|
||||
|
||||
switchLanguage(language: string) {
|
||||
this.translate.use(language);
|
||||
}
|
||||
private editInterval: any;
|
||||
// component button
|
||||
ngOnInit(): void {
|
||||
this.themeSubscription = this.themeService.currentTheme$.subscribe(() => {
|
||||
// Theme changes will automatically update CSS variables
|
||||
// This triggers a re-render of themed elements
|
||||
});
|
||||
if(this.cardmodeldata !== ''){
|
||||
this.cardmodal = JSON.parse(this.cardmodeldata);
|
||||
this.dashboardArray = this.cardmodal.dashboard.slice();
|
||||
console.log(this.dashboardArray)
|
||||
}
|
||||
this.userrole=this.userInfoService.getRoles();
|
||||
this.getData();
|
||||
this.entryForm = this._fb.group({
|
||||
name : [null],
|
||||
|
||||
description : [null],
|
||||
|
||||
active : [true],
|
||||
|
||||
date_field : [null],
|
||||
|
||||
currency : [null, { updateOn: 'blur' }],
|
||||
|
||||
phoneno: ['+91'],
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}); // component_button200
|
||||
// form code start
|
||||
this.extensionService.getJsonObjectsByFormCodeList(this.formcode).subscribe(data => {
|
||||
console.log(data);
|
||||
const jsonArray = data.map((str) => JSON.parse(str));
|
||||
this.additionalFieldsFromBackend = jsonArray;
|
||||
this.checkFormCode = this.additionalFieldsFromBackend.some(field => field.formCode === "Dashboard_formCode");
|
||||
console.log(this.checkFormCode);
|
||||
console.log(this.additionalFieldsFromBackend);
|
||||
if (this.additionalFieldsFromBackend && this.additionalFieldsFromBackend.length > 0) {
|
||||
this.additionalFieldsFromBackend.forEach(field => {
|
||||
if (field.formCode === this.formcode) {
|
||||
if (!this.entryForm.contains(field.extValue)) {
|
||||
// Add the control only if it doesn't exist in the form
|
||||
this.entryForm.addControl(field.extValue, this._fb.control(field.fieldValue));
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
console.log(this.entryForm.value);
|
||||
// form code end
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
ngOnDestroy(): void {
|
||||
if (this.themeSubscription) {
|
||||
this.themeSubscription.unsubscribe();
|
||||
}
|
||||
if (this.editInterval) {
|
||||
clearInterval(this.editInterval);
|
||||
}
|
||||
}
|
||||
get filteredGroups(): any[] {
|
||||
const items: any[] = (this.product as unknown as any[]) || [];
|
||||
const text = (this.filterText || '').toLowerCase();
|
||||
if (!text) { return items; }
|
||||
return items.filter(g => (
|
||||
((g?.name || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.description || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.active || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.date_field || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.currency || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.phoneno || '').toString()).toLowerCase().includes(text)
|
||||
|
||||
));
|
||||
}
|
||||
|
||||
setViewMode(mode: 'table' | 'cards') { this.viewMode = mode; }
|
||||
onExport() {
|
||||
this.excel.exportAsExcelFile(this.product, 'user_',
|
||||
moment().format('YYYYMMDD_HHmmss'))
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
error;
|
||||
getData() {
|
||||
this.mainService.getAll().subscribe((data) => {
|
||||
console.log(data);
|
||||
this.product = data;
|
||||
this.product = [...this.product].reverse(); if(this.product.length==0){
|
||||
this.error="No Data Available"
|
||||
}
|
||||
},(error) => {
|
||||
console.log(error);
|
||||
if(error){
|
||||
this.error="Server Error";
|
||||
}
|
||||
});
|
||||
}
|
||||
onEdit(row) {
|
||||
this.rowSelected = row;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
this.modalEdit = true;
|
||||
}
|
||||
onDelete(row) {
|
||||
this.rowSelected = row;
|
||||
this.modaldelete=true;
|
||||
}
|
||||
delete(id)
|
||||
{
|
||||
this.modaldelete = false;
|
||||
console.log("in delete "+id);
|
||||
this.mainService.delete(id).subscribe(
|
||||
(data) => {
|
||||
console.log(data);
|
||||
this.ngOnInit();
|
||||
if (data) { this.toastr.success('Deleted successfully'); }
|
||||
});
|
||||
}
|
||||
onUpdate(id) {
|
||||
this.modalEdit = false;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//console.log("in update");
|
||||
console.log("id " + id);
|
||||
console.log(this.rowSelected);
|
||||
//console.log("out update");
|
||||
this.mainService.update(id, this.rowSelected).subscribe(
|
||||
(data) => {
|
||||
console.log(data);
|
||||
if (data || data.status >= 200 && data.status <= 299) {
|
||||
this.toastr.success("Update Successfully");
|
||||
}
|
||||
setTimeout(() => {
|
||||
this.ngOnInit();
|
||||
}, 500);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}, (error) => {
|
||||
console.log(error);
|
||||
if (error.status >= 200 && error.status <= 299) {
|
||||
// this.toastr.success("update Succesfully");
|
||||
}
|
||||
if (error.status >= 400 && error.status <= 499) {
|
||||
this.toastr.error("Not Updated");
|
||||
}
|
||||
if (error.status >= 500 && error.status <= 599) {
|
||||
this.toastr.error("Not Updated");
|
||||
}
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.ngOnInit();
|
||||
}, 500);
|
||||
}
|
||||
onCreate() {
|
||||
this.modalAdd=false;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
this.mainService.create(this.entryForm.value).subscribe(
|
||||
(data) => {
|
||||
console.log(data);
|
||||
if (data || data.status >= 200 && data.status <= 299) {
|
||||
this.toastr.success("Added Successfully");
|
||||
}
|
||||
setTimeout(() => {
|
||||
this.ngOnInit();
|
||||
}, 500);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}, (error) => {
|
||||
console.log(error);
|
||||
if (error.status >= 200 && error.status <= 299) {
|
||||
// this.toastr.success("Added Succesfully");
|
||||
}
|
||||
if (error.status >= 400 && error.status <= 499) {
|
||||
this.toastr.error("Not Added");
|
||||
}
|
||||
if (error.status >= 500 && error.status <= 599) {
|
||||
this.toastr.error("Not Added");
|
||||
}
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.ngOnInit();
|
||||
}, 500);
|
||||
}
|
||||
goToAdd() {
|
||||
this.modalAdd = true; this.submitted = false;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
submitted = false;
|
||||
onSubmit() {
|
||||
console.log(this.entryForm.value);
|
||||
this.submitted = true;
|
||||
if (this.entryForm.invalid) {
|
||||
return;
|
||||
}this.onCreate();
|
||||
|
||||
}
|
||||
|
||||
|
||||
rsModaldescription = false;
|
||||
goToReplaceStringdescription(row){
|
||||
this.rowSelected = row; this.rsModaldescription =true; }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//currency field start
|
||||
formatCurrencycurrency () {
|
||||
// Format the currency with two decimal places
|
||||
this.rowSelected.currency = Number(this.rowSelected.currency ).toFixed(2);
|
||||
// Remove commas from the formatted currency
|
||||
this.rowSelected.currency = this.rowSelected.currency?.replace(/,/g, ''); }
|
||||
//currency field end
|
||||
|
||||
isValidPhoneno(phone: string): boolean {
|
||||
const phonePattern = /^(\+[1-9][0-9]{0,2})?[1-9][0-9]{9}$/;
|
||||
return phonePattern.test(phone);
|
||||
}
|
||||
|
||||
goToDataM(){
|
||||
this.router.navigate(['/cns-portal/datamanagement'],{ relativeTo: this.route });
|
||||
}
|
||||
|
||||
|
||||
downloadCSV(tableName): void {
|
||||
this.mainService.downloadCSV(tableName).subscribe(response => {
|
||||
const blob = new Blob([response], { type: 'application/octet-stream' });
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `${tableName}.csv`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
});
|
||||
}
|
||||
// csv
|
||||
|
||||
modalCsv = false;
|
||||
selectedFiles: File;
|
||||
fileList;
|
||||
ttype = 'usergroupmaintenance';
|
||||
|
||||
|
||||
// Import CSV
|
||||
public selectFile(event) {
|
||||
this.selectedFiles = event.target.files[0];
|
||||
// this.saveCsv();
|
||||
}
|
||||
|
||||
csvImport() {
|
||||
console.log("import CSV");
|
||||
this.modalCsv = true;
|
||||
}
|
||||
saveCsv() {
|
||||
this.csvService.importCsv(this.selectedFiles, this.ttype).subscribe(data => {
|
||||
console.log(data);
|
||||
this.fileList = data;
|
||||
this.modalCsv = false;
|
||||
},
|
||||
(error) => {
|
||||
console.log(error);
|
||||
if (error.status == 202) {
|
||||
this.toastr.success(error.error.text)
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
downloadFiles() {
|
||||
this.csvService.downloadCsvs(this.ttype);
|
||||
|
||||
}
|
||||
// updateaction
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Observable } from "rxjs";
|
||||
import { HttpClient, HttpHeaders, HttpParams, } from "@angular/common/http";
|
||||
import { ApiRequestService } from "src/app/services/api/api-request.service";
|
||||
import { environment } from 'src/environments/environment';
|
||||
import baseUrl from 'src/app/services/api/helper';
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class Dashboardservice{
|
||||
private baseURL = "Dashboard/Dashboard" ; constructor(
|
||||
private http: HttpClient,
|
||||
private apiRequest: ApiRequestService,
|
||||
) { }
|
||||
getAll(page?: number, size?: number): Observable<any> {
|
||||
return this.apiRequest.get(this.baseURL);
|
||||
}
|
||||
getById(id: number): Observable<any> {
|
||||
const _http = this.baseURL + "/" + id;
|
||||
return this.apiRequest.get(_http);
|
||||
}
|
||||
create(data: any): Observable<any> {
|
||||
return this.apiRequest.post(this.baseURL, data);
|
||||
}
|
||||
update(id: number, data: any): Observable<any> {
|
||||
const _http = this.baseURL + "/" + id;
|
||||
return this.apiRequest.put(_http, data);
|
||||
}
|
||||
delete(id: number): Observable<any> {
|
||||
const _http = this.baseURL + "/" + id;
|
||||
return this.apiRequest.delete(_http);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
downloadCSV(tableName: string): Observable<Blob> {
|
||||
const url = `${baseUrl}/api/template/download-csv?tableName=${tableName}`;
|
||||
return this.http.get(url, { responseType: 'blob' })
|
||||
|
||||
}// updateaction
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
export const Dashboardcardvariable = {
|
||||
"cardButton": false,
|
||||
"cardmodeldata": ``
|
||||
}
|
||||
@@ -1,3 +1,4 @@
|
||||
import { DashboardComponent } from './BuilderComponents/dabs/Dashboard/Dashboard.component';
|
||||
|
||||
|
||||
import { SequencegenaratorComponent } from './fnd/sequencegenarator/sequencegenarator.component';
|
||||
@@ -302,6 +303,9 @@ const routes: Routes = [
|
||||
|
||||
|
||||
// buildercomponents
|
||||
{path:'Dashboard',component:DashboardComponent},
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { DashboardComponent } from './BuilderComponents/dabs/Dashboard/Dashboard.component';
|
||||
|
||||
|
||||
import { CommonModule } from '@angular/common';
|
||||
@@ -224,6 +225,9 @@ import { Reportrunneredit2Component } from './builder/report-runner/reportrunner
|
||||
|
||||
|
||||
// buildercomponents
|
||||
DashboardComponent,
|
||||
|
||||
|
||||
|
||||
|
||||
ThemeCustomizationComponent,
|
||||
|
||||
Reference in New Issue
Block a user