build_app
This commit is contained in:
@@ -0,0 +1,322 @@
|
||||
<ol class="breadcrumb breadcrumb-arrow font-trirong">
|
||||
<li><a href="javascript://"> College</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">College</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ug-hero__actions">
|
||||
<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>
|
||||
|
||||
|
||||
<!-- 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>
|
||||
|
||||
|
||||
<!-- 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>
|
||||
<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 College</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="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 College</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="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>
|
||||
|
||||
<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,354 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ToastrService } from 'ngx-toastr';
|
||||
import { AlertService } from 'src/app/services/alert.service';
|
||||
import { Collegeservice} from './College.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 { Collegecardvariable } from './College_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';
|
||||
declare var JsBarcode: any;
|
||||
@Component({
|
||||
selector: 'app-College',
|
||||
templateUrl: './College.component.html',
|
||||
styleUrls: ['./College.component.scss']
|
||||
})
|
||||
export class CollegeComponent implements OnInit {
|
||||
cardButton = Collegecardvariable.cardButton;
|
||||
cardmodeldata = Collegecardvariable.cardmodeldata;
|
||||
public dashboardArray: DashboardContentModel2[];
|
||||
isCardview = Collegecardvariable.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 = 'College_formCode'
|
||||
tableName = 'College'; checkFormCode; selected: any[] = [];
|
||||
filterText: string = '';
|
||||
viewMode: 'table' | 'cards' = 'cards';
|
||||
private themeSubscription: Subscription; constructor(
|
||||
private extensionService: ExtensionService,
|
||||
private userInfoService:UserInfoService,
|
||||
private mainService:Collegeservice,
|
||||
private alertService: AlertService,
|
||||
private toastr: ToastrService,
|
||||
private csvService: CsvService,
|
||||
private translate: TranslateService,
|
||||
private themeService: ThemeService,
|
||||
private excel: ExcelService, private _fb: FormBuilder,
|
||||
) { }
|
||||
|
||||
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],
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}); // 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 === "College_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)
|
||||
|
||||
));
|
||||
}
|
||||
|
||||
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; }
|
||||
|
||||
|
||||
|
||||
|
||||
// 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,39 @@
|
||||
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';
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class Collegeservice{
|
||||
private baseURL = "College/College" ; 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);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// updateaction
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
export const Collegecardvariable = {
|
||||
"cardButton": false,
|
||||
"cardmodeldata": ``
|
||||
}
|
||||
@@ -0,0 +1,795 @@
|
||||
<ol class="breadcrumb breadcrumb-arrow font-trirong">
|
||||
<li><a href="javascript://"> Student info</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">Student info</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ug-hero__actions">
|
||||
<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]="'student_name'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
student Name
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
|
||||
|
||||
|
||||
<clr-dg-column [clrDgField]="'address'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
address
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
|
||||
|
||||
|
||||
<clr-dg-column [clrDgField]="'phone_number'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Phone Number
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
|
||||
|
||||
|
||||
<clr-dg-column [clrDgField]="'email_field'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Email Field
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
|
||||
<clr-dg-column [clrDgField]="'password_field'"> <ng-container *clrDgHideableColumn="{hidden: false}">Password Field
|
||||
</ng-container></clr-dg-column>
|
||||
|
||||
|
||||
|
||||
|
||||
<clr-dg-column [clrDgField]="'percentage_field'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Percentage Field
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
|
||||
|
||||
|
||||
<clr-dg-column [clrDgField]="'is_active'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
is active
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
|
||||
|
||||
|
||||
<clr-dg-column [clrDgField]="'gender'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
gender
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<clr-dg-column [clrDgField]="'distric'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
distric
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
|
||||
|
||||
|
||||
<clr-dg-column [clrDgField]="'qrcode_field'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
QRCode Field
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
|
||||
|
||||
|
||||
<clr-dg-column [clrDgField]="'currency'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Currency
|
||||
</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.student_name }}</clr-dg-cell>
|
||||
|
||||
|
||||
<clr-dg-cell (click)="goToReplaceStringaddress (user.address)" style="cursor: pointer; align-items: center;"><clr-icon shape="details"></clr-icon>
|
||||
</clr-dg-cell>
|
||||
|
||||
|
||||
<clr-dg-cell>{{user.phone_number }}</clr-dg-cell>
|
||||
|
||||
|
||||
<clr-dg-cell>{{user.email_field }}</clr-dg-cell>
|
||||
|
||||
|
||||
<clr-dg-cell>{{user.password_field }}</clr-dg-cell>
|
||||
|
||||
|
||||
<clr-dg-cell>{{user.percentage_field }}</clr-dg-cell>
|
||||
|
||||
|
||||
<clr-dg-cell>{{user.is_active }}</clr-dg-cell>
|
||||
|
||||
|
||||
<clr-dg-cell>{{user.gender }}</clr-dg-cell>
|
||||
|
||||
|
||||
|
||||
|
||||
<clr-dg-cell>{{user.distric }}</clr-dg-cell>
|
||||
|
||||
|
||||
<clr-dg-cell>{{user.qrcode_field }}</clr-dg-cell>
|
||||
|
||||
|
||||
<clr-dg-cell>{{user.currency }}</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>student Name</span><strong>{{user.student_name}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>address</span><strong>{{user.address}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>Phone Number</span><strong>{{user.phone_number}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>Email Field</span><strong>{{user.email_field}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>Password Field</span><strong>{{user.password_field}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>Percentage Field</span><strong>{{user.percentage_field}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>is active</span><strong>{{user.is_active}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>gender</span><strong>{{user.gender}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>Imageupload Field</span><strong>{{user.imageupload_field}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>distric</span><strong>{{user.distric}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>QRCode Field</span><strong>{{user.qrcode_field}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>Currency</span><strong>{{user.currency}}</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)]="rsModaladdress" [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 Student info</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="student_name" class="ug-form-label">student Name<span class="required-field">*</span></label>
|
||||
<input type="text" id="student_name" class="ug-form-input" formControlName="student_name">
|
||||
<div *ngIf="submitted && entryForm.controls.student_name.errors" class="ug-form-error">
|
||||
<div *ngIf="submitted && entryForm.controls.student_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="address" class="ug-form-label">address</label>
|
||||
<textarea
|
||||
id="address"
|
||||
class="ug-form-input"
|
||||
formControlName="address"
|
||||
placeholder="Enter text"
|
||||
rows="3"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="phone_number" class="ug-form-label">Phone Number</label>
|
||||
<input type="text" id="phone_number" class="ug-form-input" formControlName="phone_number" placeholder="+91 Enter 10 digit Mobile Number" pattern="((\+)?([1-9]{2}))?[1-9]{1}[0-9]{9}$">
|
||||
<div *ngIf="submitted && entryForm.controls['phone_number'].errors" class="ug-form-error">
|
||||
<div *ngIf="submitted && entryForm.controls['phone_number'].hasError('pattern')">* Please Follow your pattern,+91 Enter 10 digit Mobile Number.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="email_field" class="ug-form-label">Email Field</label>
|
||||
<input type="email" id="email_field" class="ug-form-input" formControlName="email_field" placeholder="Enter Email Field">
|
||||
<div *ngIf="entryForm.controls['email_field'].errors" class="ug-form-error">
|
||||
<div *ngIf="entryForm.controls['email_field'].hasError('pattern')" class="error_mess">* Email must be a valid email address</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Password Fields -->
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="password_field" class="ug-form-label">Password Field</label>
|
||||
<div class="password-input-container">
|
||||
<input
|
||||
[type]="newaddpHidepassword_field ? 'password' : 'text'"
|
||||
id="password_field"
|
||||
class="ug-form-input password-input"
|
||||
formControlName="password_field"
|
||||
placeholder="Enter Password Field"
|
||||
autocomplete="new-password">
|
||||
<button
|
||||
type="button"
|
||||
class="password-toggle"
|
||||
(click)="newaddChangerpassword_field()"
|
||||
[attr.aria-label]="newaddpHidepassword_field? 'Show password' : 'Hide password'">
|
||||
<clr-icon [attr.shape]="newaddIconpassword_field"></clr-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="confirmpassword_field" class="ug-form-label">Confirm Password Field</label>
|
||||
<input
|
||||
type="password"
|
||||
id="confirmpassword_field"
|
||||
class="ug-form-input"
|
||||
formControlName="confirmpassword_field"
|
||||
placeholder="Confirm password"
|
||||
autocomplete="new-password">
|
||||
<div *ngIf="entryForm.controls.confirmpassword_field.errors" class="ug-form-error">
|
||||
<div *ngIf="entryForm.controls.confirmpassword_field.errors.confirmedpassword_fieldValidator">* Password and Confirm Password must match.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="percentage_field" class="ug-form-label">Percentage Field<span class="required-field">*</span></label>
|
||||
<input type="number" id="percentage_field" class="ug-form-input" formControlName="percentage_field" placeholder="Enter Percentage Field">
|
||||
<div *ngIf="submitted && entryForm.controls.percentage_field.errors" class="ug-form-error">
|
||||
<div *ngIf="submitted && entryForm.controls.percentage_field.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 class="ug-form-label">is active</label>
|
||||
<div class="clr-toggle-wrapper">
|
||||
<input type="checkbox" id="is_active" formControlName="is_active" clrToggle>
|
||||
<label for="is_active">is active</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clr-col-sm-12">
|
||||
<label>gender</label>
|
||||
<clr-radio-container clrInline style="margin-top: 0;">
|
||||
|
||||
|
||||
<clr-radio-wrapper>
|
||||
<input type="radio" clrRadio formControlName="gender" (change)="updategender('other')" [checked]="entryForm.get('gender').value === 'other'" />
|
||||
<label> other </label>
|
||||
</clr-radio-wrapper>
|
||||
|
||||
|
||||
|
||||
<clr-radio-wrapper>
|
||||
<input type="radio" clrRadio formControlName="gender" (change)="updategender('female')" [checked]="entryForm.get('gender').value === 'female'" />
|
||||
<label> female </label>
|
||||
</clr-radio-wrapper>
|
||||
|
||||
|
||||
|
||||
<clr-radio-wrapper>
|
||||
<input type="radio" clrRadio formControlName="gender" (change)="updategender('male')" [checked]="entryForm.get('gender').value === 'male'" />
|
||||
<label> male </label>
|
||||
</clr-radio-wrapper>
|
||||
|
||||
|
||||
|
||||
</clr-radio-container>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="clr-col-sm-12">
|
||||
<label>distric</label>
|
||||
<select formControlName="distric">
|
||||
<option [value]="null">Select distric </option>
|
||||
|
||||
|
||||
<option> buldana </option>
|
||||
|
||||
|
||||
|
||||
<option> pune </option>
|
||||
|
||||
|
||||
</select></div>
|
||||
|
||||
<!-- qrCode field start -->
|
||||
<div class="clr-col-sm-12">
|
||||
<label>QRCode Field</label>
|
||||
<input class="clr-input" type="text" formControlName="qrcode_field" />
|
||||
<qrcode [qrdata]="entryForm.value.qrcode_field ? entryForm.value.qrcode_field : '' " [width]="135" [errorCorrectionLevel]="'M'" ></qrcode> </div>
|
||||
<!-- qrCode field end -->
|
||||
|
||||
<!-- 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="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 Student info</h3>
|
||||
<div class="modal-body" *ngIf="rowSelected.id">
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="student_name" class="ug-form-label">student Name<span class="required-field">*</span></label>
|
||||
<input type="text" id="student_name" class="ug-form-input" [(ngModel)]="rowSelected.student_name" name="student_name"
|
||||
placeholder="Enter student Name">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="address" class="ug-form-label">address</label>
|
||||
<textarea id="address" class="ug-form-input" [(ngModel)]="rowSelected.address"
|
||||
name="address" placeholder="Enter text" rows="3"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Phone Number Fields -->
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="phone_number" class="ug-form-label">Phone Number</label>
|
||||
<input type="text" id="phone_number" class="ug-form-input" [(ngModel)]="rowSelected.phone_number"
|
||||
name="phone_number" placeholder="+91 Enter 10 digit Mobile Number"
|
||||
pattern="((\+)?([1-9]{2}))?[1-9]{1}[0-9]{9}$">
|
||||
<div *ngIf="rowSelected.phone_number && !isValidPhone_number(rowSelected.phone_number)"
|
||||
class="ug-form-error">
|
||||
* Please Follow your pattern,+91 Enter 10 digit Mobile Number.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="email_field" class="ug-form-label">Email Field</label>
|
||||
<input type="email" id="email_field" class="ug-form-input" [(ngModel)]="rowSelected.email_field" name="email_field" placeholder="Enter email address">
|
||||
<div *ngIf="rowSelected.email_field && !isValidemail_field(rowSelected.email_field)" class="ug-form-error">
|
||||
* Email must be a valid email address.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Password Fields -->
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="password_field" class="ug-form-label">Password Field</label>
|
||||
<div class="password-input-container">
|
||||
<input [type]="newpHidepassword_field ? 'password' : 'text'" id="password_field"
|
||||
class="ug-form-input password-input" [(ngModel)]="rowSelected.password_field" name="password_field"
|
||||
placeholder="Enter Password Field">
|
||||
<button type="button" class="password-toggle" (click)="newShapeChangerpassword_field()"
|
||||
[attr.aria-label]="newpHidepassword_field ? 'Show password' : 'Hide password'">
|
||||
<clr-icon [attr.shape]="newIconpassword_field"></clr-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Number Fields -->
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="percentage_field" class="ug-form-label">Percentage Field</label>
|
||||
<input type="number" id="percentage_field" class="ug-form-input" [(ngModel)]="rowSelected.percentage_field"
|
||||
name="percentage_field" placeholder="Enter Percentage Field">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label class="ug-form-label">is active</label>
|
||||
<div class="clr-toggle-wrapper">
|
||||
<input type="checkbox" id="is_active" name="is_active" clrToggle [(ngModel)]="rowSelected.is_active">
|
||||
<label for="is_active">is active</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clr-col-sm-12">
|
||||
<label> gender</label>
|
||||
<clr-radio-container clrInline style="margin-top: 0;">
|
||||
|
||||
|
||||
<clr-radio-wrapper>
|
||||
<input type="radio" clrRadio (change)="updategenderEdit('other')" [checked]="rowSelected.gender === 'other'" />
|
||||
<label>other</label>
|
||||
</clr-radio-wrapper>
|
||||
|
||||
|
||||
|
||||
<clr-radio-wrapper>
|
||||
<input type="radio" clrRadio (change)="updategenderEdit('female')" [checked]="rowSelected.gender === 'female'" />
|
||||
<label>female</label>
|
||||
</clr-radio-wrapper>
|
||||
|
||||
|
||||
|
||||
<clr-radio-wrapper>
|
||||
<input type="radio" clrRadio (change)="updategenderEdit('male')" [checked]="rowSelected.gender === 'male'" />
|
||||
<label>male</label>
|
||||
</clr-radio-wrapper>
|
||||
|
||||
|
||||
</clr-radio-container> </div>
|
||||
|
||||
|
||||
|
||||
<div class="clr-col-sm-12">
|
||||
<label> distric</label>
|
||||
<select name="distric" [(ngModel)]="rowSelected.distric">
|
||||
<option [value]="null">Selectdistric
|
||||
</option>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<option> buldana </option>
|
||||
|
||||
|
||||
|
||||
|
||||
<option> pune </option>
|
||||
|
||||
|
||||
|
||||
</select> </div>
|
||||
|
||||
<!-- qrCode field start -->
|
||||
<div class="clr-col-sm-12">
|
||||
<label> QRCode Field</label>
|
||||
<input class="clr-input" type="text" name="qrcode_field" [(ngModel)]="rowSelected.qrcode_field" />
|
||||
<qrcode [qrdata]="rowSelected.qrcode_field ? rowSelected.qrcode_field : '' " [width]="135" [errorCorrectionLevel]="'M'"></qrcode>
|
||||
</div>
|
||||
<!-- qrCode field end -->
|
||||
|
||||
<!-- 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 -->
|
||||
|
||||
|
||||
<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">student Name:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.student_name}}</span>
|
||||
</div>
|
||||
|
||||
<div class="ug-delete-detail-item">
|
||||
<span class="ug-delete-detail-label">address:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.address}}</span>
|
||||
</div>
|
||||
|
||||
<div class="ug-delete-detail-item">
|
||||
<span class="ug-delete-detail-label">Phone Number:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.phone_number}}</span>
|
||||
</div>
|
||||
|
||||
<div class="ug-delete-detail-item">
|
||||
<span class="ug-delete-detail-label">Email Field:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.email_field}}</span>
|
||||
</div>
|
||||
|
||||
<div class="ug-delete-detail-item">
|
||||
<span class="ug-delete-detail-label">Password Field:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.password_field}}</span>
|
||||
</div>
|
||||
|
||||
<div class="ug-delete-detail-item">
|
||||
<span class="ug-delete-detail-label">Percentage Field:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.percentage_field}}</span>
|
||||
</div>
|
||||
|
||||
<div class="ug-delete-detail-item">
|
||||
<span class="ug-delete-detail-label">is active:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.is_active}}</span>
|
||||
</div>
|
||||
|
||||
<div class="ug-delete-detail-item">
|
||||
<span class="ug-delete-detail-label">gender:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.gender}}</span>
|
||||
</div>
|
||||
|
||||
<div class="ug-delete-detail-item">
|
||||
<span class="ug-delete-detail-label">Imageupload Field:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.imageupload_field}}</span>
|
||||
</div>
|
||||
|
||||
<div class="ug-delete-detail-item">
|
||||
<span class="ug-delete-detail-label">distric:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.distric}}</span>
|
||||
</div>
|
||||
|
||||
<div class="ug-delete-detail-item">
|
||||
<span class="ug-delete-detail-label">QRCode Field:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.qrcode_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>
|
||||
|
||||
<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,686 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ToastrService } from 'ngx-toastr';
|
||||
import { AlertService } from 'src/app/services/alert.service';
|
||||
import { Student_infoservice} from './Student_info.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 { Student_infocardvariable } from './Student_info_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';
|
||||
declare var JsBarcode: any;
|
||||
@Component({
|
||||
selector: 'app-Student_info',
|
||||
templateUrl: './Student_info.component.html',
|
||||
styleUrls: ['./Student_info.component.scss']
|
||||
})
|
||||
export class Student_infoComponent implements OnInit {
|
||||
cardButton = Student_infocardvariable.cardButton;
|
||||
cardmodeldata = Student_infocardvariable.cardmodeldata;
|
||||
public dashboardArray: DashboardContentModel2[];
|
||||
isCardview = Student_infocardvariable.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 = 'Student_info_formCode'
|
||||
tableName = 'Student_info'; checkFormCode; selected: any[] = [];
|
||||
filterText: string = '';
|
||||
viewMode: 'table' | 'cards' = 'cards';
|
||||
private themeSubscription: Subscription; constructor(
|
||||
private extensionService: ExtensionService,
|
||||
private userInfoService:UserInfoService,
|
||||
private mainService:Student_infoservice,
|
||||
private alertService: AlertService,
|
||||
private toastr: ToastrService,
|
||||
private csvService: CsvService,
|
||||
private translate: TranslateService,
|
||||
private themeService: ThemeService,
|
||||
private excel: ExcelService, private _fb: FormBuilder,
|
||||
) { }
|
||||
|
||||
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({
|
||||
student_name : [null],
|
||||
|
||||
address : [null],
|
||||
|
||||
phone_number: ['+91'],
|
||||
|
||||
email_field : [null,[Validators.required]],
|
||||
|
||||
password_field : [null],
|
||||
confirmpassword_field : [null],
|
||||
|
||||
percentage_field : [null,[Validators.required]],
|
||||
|
||||
is_active : [true],
|
||||
|
||||
gender : [null],
|
||||
|
||||
|
||||
|
||||
distric : [null],
|
||||
|
||||
qrcode_field : [null],
|
||||
|
||||
currency : [null, { updateOn: 'blur' }],
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}, {
|
||||
validator: Confirmedpassword_fieldValidator('password_field', 'confirmpassword_field')
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}); // 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 === "Student_info_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?.student_name || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.address || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.phone_number || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.email_field || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.password_field || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.percentage_field || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.is_active || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.gender || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.imageupload_field || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.distric || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.qrcode_field || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.currency || '').toString()).toLowerCase().includes(text)
|
||||
|
||||
));
|
||||
}
|
||||
|
||||
setViewMode(mode: 'table' | 'cards') { this.viewMode = mode; }
|
||||
onExport() {
|
||||
this.excel.exportAsExcelFile(this.product, 'user_',
|
||||
moment().format('YYYYMMDD_HHmmss'))
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
FileDataImageupload_field: any[];
|
||||
selectedImageupload_field: any[];
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
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.selectedimageupload_field = [];
|
||||
this.mainService.uploadImageupload_fieldgetById(row.id,this.tableName).subscribe(uploaddata =>{
|
||||
console.log(uploaddata);
|
||||
this.FileDataimageupload_field = uploaddata;
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
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);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
for (let i = 0; i < this.selectedimageupload_field.length; i++){
|
||||
|
||||
this.mainService.uploadImageupload_field(data.id,this.tableName,this.selectedimageupload_field[i]).subscribe(uploaddata =>{
|
||||
console.log(uploaddata);
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}, (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);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
for (let i = 0; i < this.selectedimageupload_field.length; i++){
|
||||
|
||||
this.mainService.uploadImageupload_field(data.id,this.tableName,this.selectedimageupload_field[i]).subscribe(uploaddata =>{
|
||||
console.log(uploaddata);
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}, (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;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
this.FileDataImageupload_field = [];
|
||||
this.selectedImageupload_field =[];
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
submitted = false;
|
||||
onSubmit() {
|
||||
console.log(this.entryForm.value);
|
||||
this.submitted = true;
|
||||
if (this.entryForm.invalid) {
|
||||
return;
|
||||
}this.onCreate();
|
||||
|
||||
}
|
||||
|
||||
|
||||
rsModaladdress = false;
|
||||
goToReplaceStringaddress(row){
|
||||
this.rowSelected = row; this.rsModaladdress =true; }
|
||||
|
||||
isValidPhone_number(phone: string): boolean {
|
||||
const phonePattern = /^(\+[1-9][0-9]{0,2})?[1-9][0-9]{9}$/;
|
||||
return phonePattern.test(phone);
|
||||
}
|
||||
|
||||
isValidemail_field(email: string): boolean {
|
||||
const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
|
||||
return emailPattern.test(email); }
|
||||
|
||||
newpHidepassword_field: boolean = true;
|
||||
newIconpassword_field: string = "eye";
|
||||
newShapeChangerpassword_field() {
|
||||
this.newpHidepassword_field = !this.newpHidepassword_field;
|
||||
if(this.newpHidepassword_field){
|
||||
this.newIconpassword_field = 'eye' } else { this.newIconpassword_field = 'eye-hide' }
|
||||
}
|
||||
|
||||
newaddpHidepassword_field: boolean = true;
|
||||
newaddIconpassword_field: string = "eye";
|
||||
newaddChangerpassword_field() { this.newaddpHidepassword_field = !this.newaddpHidepassword_field;
|
||||
if(this.newaddpHidepassword_field){ this.newaddIconpassword_field = 'eye' } else {
|
||||
this.newaddIconpassword_field = 'eye-hide' } }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
updategender (gender : string): void {
|
||||
this.entryForm.get('gender').setValue(gender); }
|
||||
|
||||
updategenderEdit(gender : string): void { this.rowSelected.gender = gender }
|
||||
;
|
||||
|
||||
filePreviewimageupload_field: string | ArrayBuffer | null = null;
|
||||
FileDataimageupload_field: {uploadedfile_name?:any, filePreview: string | ArrayBuffer | null }[] = []; // Initialize the array
|
||||
selectedimageupload_field: File[]=[];
|
||||
public onFileChangedimageupload_field(event, index) {
|
||||
const files = event.target.files;
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
const file = files[i];
|
||||
this.FileDataimageupload_field[index].uploadedfile_name = files[i].name;
|
||||
this.selectedimageupload_field.push(files[i]);
|
||||
if (file.type.startsWith('image/')) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
// Set the file preview source
|
||||
const filePreview = e.target?.result as string;
|
||||
this.FileDataimageupload_field[index] = {
|
||||
...this.FileDataimageupload_field[index], // Preserve existing properties
|
||||
filePreview: filePreview // Update only the filePreview property
|
||||
};
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
}
|
||||
}
|
||||
onAddLinesimageupload_field(){
|
||||
this.FileDataimageupload_field.push({
|
||||
uploadedfile_name: "",
|
||||
filePreview: "",
|
||||
// f3: "",
|
||||
});
|
||||
}
|
||||
deleteRowimageupload_field(index,id) {
|
||||
this.FileDataimageupload_field.splice(index, 1);
|
||||
|
||||
if(id){
|
||||
this.mainService.uploadImageupload_fielddelete(id).subscribe(data =>{
|
||||
console.log(data);
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//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
|
||||
|
||||
|
||||
// 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
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
export function Confirmedpassword_fieldValidator(controlName: string, matchingControlName: string){
|
||||
return (formGroup: FormGroup) => {
|
||||
const control = formGroup.controls[controlName];
|
||||
const matchingControl = formGroup.controls[matchingControlName];
|
||||
if (matchingControl.errors && !matchingControl.errors.confirmedpassword_fieldValidator) {
|
||||
return;
|
||||
}
|
||||
if (control.value !== matchingControl.value) {
|
||||
matchingControl.setErrors({ confirmedpassword_fieldValidator: true });
|
||||
} else {
|
||||
matchingControl.setErrors(null);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,70 @@
|
||||
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';
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class Student_infoservice{
|
||||
private baseURL = "Student_info/Student_info" ; 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);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
uploadImageupload_field(ref:any, Student_info:any, file:any): Observable<any>{
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
return this.apiRequest.postFormData(`FileUpload/Uploadeddocs/${ref}/${Student_info}`, formData);
|
||||
}
|
||||
|
||||
uploadImageupload_fieldgetById(ref:any, Student_info:any,): Observable<any> {
|
||||
return this.apiRequest.get(`FileUpload/Uploadeddocs/${ref}/${Student_info}`);
|
||||
}
|
||||
|
||||
|
||||
uploadImageupload_fielddelete(id: number): Observable<any> {
|
||||
return this.apiRequest.delete(`FileUpload/Uploadeddocs/${id}`);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// updateaction
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
export const Student_infocardvariable = {
|
||||
"cardButton": false,
|
||||
"cardmodeldata": ``
|
||||
}
|
||||
@@ -1,3 +1,5 @@
|
||||
import { CollegeComponent } from './BuilderComponents/basicp1/College/College.component';
|
||||
import { Student_infoComponent } from './BuilderComponents/basicp1/Student_info/Student_info.component';
|
||||
|
||||
|
||||
import { SequencegenaratorComponent } from './fnd/sequencegenarator/sequencegenarator.component';
|
||||
@@ -302,6 +304,12 @@ const routes: Routes = [
|
||||
|
||||
|
||||
// buildercomponents
|
||||
{path:'College',component:CollegeComponent},
|
||||
|
||||
|
||||
{path:'Student_info',component:Student_infoComponent},
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import { CollegeComponent } from './BuilderComponents/basicp1/College/College.component';
|
||||
import { Student_infoComponent } from './BuilderComponents/basicp1/Student_info/Student_info.component';
|
||||
|
||||
|
||||
import { CommonModule } from '@angular/common';
|
||||
@@ -224,6 +226,12 @@ import { Reportrunneredit2Component } from './builder/report-runner/reportrunner
|
||||
|
||||
|
||||
// buildercomponents
|
||||
CollegeComponent,
|
||||
|
||||
|
||||
Student_infoComponent,
|
||||
|
||||
|
||||
|
||||
|
||||
ThemeCustomizationComponent,
|
||||
|
||||
Reference in New Issue
Block a user