build_app
This commit is contained in:
parent
326e1ddf19
commit
3717e8ddac
@ -0,0 +1,813 @@
|
||||
<ol class="breadcrumb breadcrumb-arrow font-trirong">
|
||||
<li><a href="javascript://"> Basicp1</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">Basicp1</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]="'name2'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
name2
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
|
||||
|
||||
|
||||
<clr-dg-column [clrDgField]="'number1'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
number1
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
|
||||
|
||||
|
||||
<clr-dg-column [clrDgField]="'number2'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
number2
|
||||
</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]="'phone_number2'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Phone Number2
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
|
||||
|
||||
|
||||
<clr-dg-column [clrDgField]="'paragraph_field'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Paragraph Field
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
|
||||
|
||||
|
||||
<clr-dg-column [clrDgField]="'paragraph_field2'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Paragraph Field2
|
||||
</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]="'textarea'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Textarea
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
|
||||
|
||||
|
||||
<clr-dg-column [clrDgField]="'textarea_field'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Textarea Field
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
|
||||
|
||||
|
||||
<clr-dg-column [clrDgField]="'textarea_field2'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Textarea Field2
|
||||
</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>{{user.name2 }}</clr-dg-cell>
|
||||
|
||||
|
||||
<clr-dg-cell>{{user.number1 }}</clr-dg-cell>
|
||||
|
||||
|
||||
<clr-dg-cell>{{user.number2 }}</clr-dg-cell>
|
||||
|
||||
|
||||
<clr-dg-cell>{{user.phone_number }}</clr-dg-cell>
|
||||
|
||||
|
||||
<clr-dg-cell>{{user.phone_number2 }}</clr-dg-cell>
|
||||
|
||||
|
||||
<clr-dg-cell (click)="goToReplaceStringparagraph_field(user.paragraph_field)" style="cursor: pointer; align-items: center;"><clr-icon shape="details"></clr-icon></clr-dg-cell>
|
||||
|
||||
|
||||
<clr-dg-cell (click)="goToReplaceStringparagraph_field2(user.paragraph_field2)" style="cursor: pointer; align-items: center;"><clr-icon shape="details"></clr-icon></clr-dg-cell>
|
||||
|
||||
|
||||
<clr-dg-cell>{{user.password_field }}</clr-dg-cell>
|
||||
|
||||
|
||||
<clr-dg-cell (click)="goToReplaceStringtextarea (user.textarea)" style="cursor: pointer; align-items: center;"><clr-icon shape="details"></clr-icon>
|
||||
</clr-dg-cell>
|
||||
|
||||
|
||||
<clr-dg-cell (click)="goToReplaceStringtextarea_field (user.textarea_field)" style="cursor: pointer; align-items: center;"><clr-icon shape="details"></clr-icon>
|
||||
</clr-dg-cell>
|
||||
|
||||
|
||||
<clr-dg-cell (click)="goToReplaceStringtextarea_field2 (user.textarea_field2)" style="cursor: pointer; align-items: center;"><clr-icon shape="details"></clr-icon>
|
||||
</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>name2</span><strong>{{user.name2}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>number1</span><strong>{{user.number1}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>number2</span><strong>{{user.number2}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>Phone Number</span><strong>{{user.phone_number}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>Phone Number2</span><strong>{{user.phone_number2}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>Paragraph Field</span><strong>{{user.paragraph_field}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>Paragraph Field2</span><strong>{{user.paragraph_field2}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>Password Field</span><strong>{{user.password_field}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>Textarea</span><strong>{{user.textarea}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>Textarea Field</span><strong>{{user.textarea_field}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>Textarea Field2</span><strong>{{user.textarea_field2}}</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)]="rsModalparagraph_field" [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)]="rsModalparagraph_field2" [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)]="rsModaltextarea" [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)]="rsModaltextarea_field" [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)]="rsModaltextarea_field2" [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 Basicp1</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="name2" class="ug-form-label">name2<span class="required-field">*</span></label>
|
||||
<input type="text" id="name2" class="ug-form-input" formControlName="name2">
|
||||
<div *ngIf="submitted && entryForm.controls.name2.errors" class="ug-form-error">
|
||||
<div *ngIf="submitted && entryForm.controls.name2.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="number1" class="ug-form-label">number1<span class="required-field">*</span></label>
|
||||
<input type="number" id="number1" class="ug-form-input" formControlName="number1" placeholder="Enter number1">
|
||||
<div *ngIf="submitted && entryForm.controls.number1.errors" class="ug-form-error">
|
||||
<div *ngIf="submitted && entryForm.controls.number1.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="number2" class="ug-form-label">number2<span class="required-field">*</span></label>
|
||||
<input type="number" id="number2" class="ug-form-input" formControlName="number2" placeholder="Enter number2">
|
||||
<div *ngIf="submitted && entryForm.controls.number2.errors" class="ug-form-error">
|
||||
<div *ngIf="submitted && entryForm.controls.number2.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="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="phone_number2" class="ug-form-label">Phone Number2</label>
|
||||
<input type="text" id="phone_number2" class="ug-form-input" formControlName="phone_number2" placeholder="+91 Enter 10 digit Mobile Number" pattern="((\+)?([1-9]{2}))?[1-9]{1}[0-9]{9}$">
|
||||
<div *ngIf="submitted && entryForm.controls['phone_number2'].errors" class="ug-form-error">
|
||||
<div *ngIf="submitted && entryForm.controls['phone_number2'].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="paragraph_field" class="ug-form-label">Paragraph Field</label>
|
||||
<input type="text" id="paragraph_field" class="ug-form-input" formControlName="paragraph_field" placeholder="Enter paragraph">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="paragraph_field2" class="ug-form-label">Paragraph Field2</label>
|
||||
<input type="text" id="paragraph_field2" class="ug-form-input" formControlName="paragraph_field2" placeholder="Enter paragraph">
|
||||
</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="textarea" class="ug-form-label">Textarea</label>
|
||||
<textarea
|
||||
id="textarea"
|
||||
class="ug-form-input"
|
||||
formControlName="textarea"
|
||||
placeholder="Enter text"
|
||||
rows="3"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="textarea_field" class="ug-form-label">Textarea Field</label>
|
||||
<textarea
|
||||
id="textarea_field"
|
||||
class="ug-form-input"
|
||||
formControlName="textarea_field"
|
||||
placeholder="Enter text"
|
||||
rows="3"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="textarea_field2" class="ug-form-label">Textarea Field2</label>
|
||||
<textarea
|
||||
id="textarea_field2"
|
||||
class="ug-form-input"
|
||||
formControlName="textarea_field2"
|
||||
placeholder="Enter text"
|
||||
rows="3"></textarea>
|
||||
</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 Basicp1</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-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="name2" class="ug-form-label">name2<span class="required-field">*</span></label>
|
||||
<input type="text" id="name2" class="ug-form-input" [(ngModel)]="rowSelected.name2" name="name2"
|
||||
placeholder="Enter name2">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Number Fields -->
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="number1" class="ug-form-label">number1</label>
|
||||
<input type="number" id="number1" class="ug-form-input" [(ngModel)]="rowSelected.number1"
|
||||
name="number1" placeholder="Enter number1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Number Fields -->
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="number2" class="ug-form-label">number2</label>
|
||||
<input type="number" id="number2" class="ug-form-input" [(ngModel)]="rowSelected.number2"
|
||||
name="number2" placeholder="Enter number2">
|
||||
</div>
|
||||
</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>
|
||||
|
||||
|
||||
<!-- Phone Number Fields -->
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="phone_number2" class="ug-form-label">Phone Number2</label>
|
||||
<input type="text" id="phone_number2" class="ug-form-input" [(ngModel)]="rowSelected.phone_number2"
|
||||
name="phone_number2" placeholder="+91 Enter 10 digit Mobile Number"
|
||||
pattern="((\+)?([1-9]{2}))?[1-9]{1}[0-9]{9}$">
|
||||
<div *ngIf="rowSelected.phone_number2 && !isValidPhone_number2(rowSelected.phone_number2)"
|
||||
class="ug-form-error">
|
||||
* Please Follow your pattern,+91 Enter 10 digit Mobile Number.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Paragraph Fields -->
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="paragraph_field" class="ug-form-label">Paragraph Field</label>
|
||||
<input type="text" id="paragraph_field" class="ug-form-input"
|
||||
[(ngModel)]="rowSelected.paragraph_field" name="paragraph_field" placeholder="Enter Paragraph Field">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Paragraph Fields -->
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="paragraph_field2" class="ug-form-label">Paragraph Field2</label>
|
||||
<input type="text" id="paragraph_field2" class="ug-form-input"
|
||||
[(ngModel)]="rowSelected.paragraph_field2" name="paragraph_field2" placeholder="Enter Paragraph Field2">
|
||||
</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>
|
||||
|
||||
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="textarea" class="ug-form-label">Textarea</label>
|
||||
<textarea id="textarea" class="ug-form-input" [(ngModel)]="rowSelected.textarea"
|
||||
name="textarea" placeholder="Enter text" rows="3"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="textarea_field" class="ug-form-label">Textarea Field</label>
|
||||
<textarea id="textarea_field" class="ug-form-input" [(ngModel)]="rowSelected.textarea_field"
|
||||
name="textarea_field" placeholder="Enter text" rows="3"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="textarea_field2" class="ug-form-label">Textarea Field2</label>
|
||||
<textarea id="textarea_field2" class="ug-form-input" [(ngModel)]="rowSelected.textarea_field2"
|
||||
name="textarea_field2" placeholder="Enter text" rows="3"></textarea>
|
||||
</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">name2:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.name2}}</span>
|
||||
</div>
|
||||
|
||||
<div class="ug-delete-detail-item">
|
||||
<span class="ug-delete-detail-label">number1:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.number1}}</span>
|
||||
</div>
|
||||
|
||||
<div class="ug-delete-detail-item">
|
||||
<span class="ug-delete-detail-label">number2:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.number2}}</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">Phone Number2:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.phone_number2}}</span>
|
||||
</div>
|
||||
|
||||
<div class="ug-delete-detail-item">
|
||||
<span class="ug-delete-detail-label">Paragraph Field:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.paragraph_field}}</span>
|
||||
</div>
|
||||
|
||||
<div class="ug-delete-detail-item">
|
||||
<span class="ug-delete-detail-label">Paragraph Field2:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.paragraph_field2}}</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">Textarea:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.textarea}}</span>
|
||||
</div>
|
||||
|
||||
<div class="ug-delete-detail-item">
|
||||
<span class="ug-delete-detail-label">Textarea Field:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.textarea_field}}</span>
|
||||
</div>
|
||||
|
||||
<div class="ug-delete-detail-item">
|
||||
<span class="ug-delete-detail-label">Textarea Field2:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.textarea_field2}}</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,630 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ToastrService } from 'ngx-toastr';
|
||||
import { AlertService } from 'src/app/services/alert.service';
|
||||
import { Basicp1service} from './Basicp1.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 { Basicp1cardvariable } from './Basicp1_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-Basicp1',
|
||||
templateUrl: './Basicp1.component.html',
|
||||
styleUrls: ['./Basicp1.component.scss']
|
||||
})
|
||||
export class Basicp1Component implements OnInit {
|
||||
cardButton = Basicp1cardvariable.cardButton;
|
||||
cardmodeldata = Basicp1cardvariable.cardmodeldata;
|
||||
public dashboardArray: DashboardContentModel2[];
|
||||
isCardview = Basicp1cardvariable.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 = 'Basicp1_formCode'
|
||||
tableName = 'Basicp1'; checkFormCode; selected: any[] = [];
|
||||
filterText: string = '';
|
||||
viewMode: 'table' | 'cards' = 'cards';
|
||||
private themeSubscription: Subscription; constructor(
|
||||
private extensionService: ExtensionService,
|
||||
private userInfoService:UserInfoService,
|
||||
private mainService:Basicp1service,
|
||||
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],
|
||||
|
||||
name2 : [null],
|
||||
|
||||
number1 : [null,[Validators.required]],
|
||||
|
||||
number2 : [null,[Validators.required]],
|
||||
|
||||
phone_number: ['+91'],
|
||||
|
||||
phone_number2: ['+91'],
|
||||
|
||||
paragraph_field : [null],
|
||||
|
||||
paragraph_field2 : [null],
|
||||
|
||||
password_field : [null],
|
||||
confirmpassword_field : [null],
|
||||
|
||||
textarea : [null],
|
||||
|
||||
textarea_field : [null],
|
||||
|
||||
textarea_field2 : [null],
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}, {
|
||||
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 === "Basicp1_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?.name2 || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.number1 || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.number2 || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.phone_number || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.phone_number2 || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.paragraph_field || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.paragraph_field2 || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.password_field || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.textarea || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.textarea_field || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.textarea_field2 || '').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();
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
isValidPhone_number(phone: string): boolean {
|
||||
const phonePattern = /^(\+[1-9][0-9]{0,2})?[1-9][0-9]{9}$/;
|
||||
return phonePattern.test(phone);
|
||||
}
|
||||
|
||||
isValidPhone_number2(phone: string): boolean {
|
||||
const phonePattern = /^(\+[1-9][0-9]{0,2})?[1-9][0-9]{9}$/;
|
||||
return phonePattern.test(phone);
|
||||
}
|
||||
|
||||
rsModalparagraph_field = false;
|
||||
goToReplaceStringparagraph_field (row){
|
||||
this.rowSelected = row; this.rsModalparagraph_field =true; }
|
||||
|
||||
rsModalparagraph_field2 = false;
|
||||
goToReplaceStringparagraph_field2 (row){
|
||||
this.rowSelected = row; this.rsModalparagraph_field2 =true; }
|
||||
|
||||
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' } }
|
||||
|
||||
rsModaltextarea = false;
|
||||
goToReplaceStringtextarea(row){
|
||||
this.rowSelected = row; this.rsModaltextarea =true; }
|
||||
|
||||
rsModaltextarea_field = false;
|
||||
goToReplaceStringtextarea_field(row){
|
||||
this.rowSelected = row; this.rsModaltextarea_field =true; }
|
||||
|
||||
rsModaltextarea_field2 = false;
|
||||
goToReplaceStringtextarea_field2(row){
|
||||
this.rowSelected = row; this.rsModaltextarea_field2 =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
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
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,57 @@
|
||||
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 Basicp1service{
|
||||
private baseURL = "Basicp1/Basicp1" ; 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 Basicp1cardvariable = {
|
||||
"cardButton": false,
|
||||
"cardmodeldata": ``
|
||||
}
|
||||
@ -0,0 +1,552 @@
|
||||
<ol class="breadcrumb breadcrumb-arrow font-trirong">
|
||||
<li><a href="javascript://"> Basicp2</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">Basicp2</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]="'about'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
about
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
|
||||
|
||||
|
||||
<clr-dg-column [clrDgField]="'textarea2'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Textarea2
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
|
||||
|
||||
|
||||
<clr-dg-column [clrDgField]="'date_field'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Date Field
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
|
||||
|
||||
|
||||
<clr-dg-column [clrDgField]="'date_field2'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Date Field2
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
|
||||
|
||||
|
||||
<clr-dg-column [clrDgField]="'datetime_field'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Datetime Field
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
|
||||
|
||||
|
||||
<clr-dg-column [clrDgField]="'datetime_field2'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Datetime Field2
|
||||
</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]="'email_field2'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Email Field2
|
||||
</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 (click)="goToReplaceStringabout (user.about)" style="cursor: pointer; align-items: center;"><clr-icon shape="details"></clr-icon>
|
||||
</clr-dg-cell>
|
||||
|
||||
|
||||
<clr-dg-cell (click)="goToReplaceStringtextarea2 (user.textarea2)" style="cursor: pointer; align-items: center;"><clr-icon shape="details"></clr-icon>
|
||||
</clr-dg-cell>
|
||||
|
||||
|
||||
<clr-dg-cell>{{user.date_field }}</clr-dg-cell>
|
||||
|
||||
|
||||
<clr-dg-cell>{{user.date_field2 }}</clr-dg-cell>
|
||||
|
||||
|
||||
<clr-dg-cell>{{user.datetime_field }}</clr-dg-cell>
|
||||
|
||||
|
||||
<clr-dg-cell>{{user.datetime_field2 }}</clr-dg-cell>
|
||||
|
||||
|
||||
<clr-dg-cell>{{user.email_field }}</clr-dg-cell>
|
||||
|
||||
|
||||
<clr-dg-cell>{{user.email_field2 }}</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>about</span><strong>{{user.about}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>Textarea2</span><strong>{{user.textarea2}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>Date Field</span><strong>{{user.date_field}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>Date Field2</span><strong>{{user.date_field2}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>Datetime Field</span><strong>{{user.datetime_field}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>Datetime Field2</span><strong>{{user.datetime_field2}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>Email Field</span><strong>{{user.email_field}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>Email Field2</span><strong>{{user.email_field2}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>UserId Field</span><strong>{{user.userid_field}}</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)]="rsModalabout" [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)]="rsModaltextarea2" [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 Basicp2</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="about" class="ug-form-label">about</label>
|
||||
<textarea
|
||||
id="about"
|
||||
class="ug-form-input"
|
||||
formControlName="about"
|
||||
placeholder="Enter text"
|
||||
rows="3"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="textarea2" class="ug-form-label">Textarea2</label>
|
||||
<textarea
|
||||
id="textarea2"
|
||||
class="ug-form-input"
|
||||
formControlName="textarea2"
|
||||
placeholder="Enter text"
|
||||
rows="3"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="date_field" class="ug-form-label">Date Field</label>
|
||||
<input type="date" id="date_field" class="ug-form-input" formControlName="date_field">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="date_field2" class="ug-form-label">Date Field2</label>
|
||||
<input type="date" id="date_field2" class="ug-form-input" formControlName="date_field2">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="clr-col-sm-12">
|
||||
<label> Datetime Field</label>
|
||||
<input class="clr-input" type="datetime-local" formControlName="datetime_field" />
|
||||
</div>
|
||||
|
||||
<div class="clr-col-sm-12">
|
||||
<label> Datetime Field2</label>
|
||||
<input class="clr-input" type="datetime-local" formControlName="datetime_field2" />
|
||||
</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>
|
||||
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="email_field2" class="ug-form-label">Email Field2</label>
|
||||
<input type="email" id="email_field2" class="ug-form-input" formControlName="email_field2" placeholder="Enter Email Field2">
|
||||
<div *ngIf="entryForm.controls['email_field2'].errors" class="ug-form-error">
|
||||
<div *ngIf="entryForm.controls['email_field2'].hasError('pattern')" class="error_mess">* Email must be a valid email address</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="ug-btn ug-btn-outline" (click)="modalAdd = false">Cancel</button>
|
||||
<button type="submit" class="ug-btn ug-btn-primary">ADD</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</clr-modal>
|
||||
|
||||
<clr-modal [(clrModalOpen)]="modalEdit" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
|
||||
<h3 class="modal-title">Update Basicp2</h3>
|
||||
<div class="modal-body" *ngIf="rowSelected.id">
|
||||
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="about" class="ug-form-label">about</label>
|
||||
<textarea id="about" class="ug-form-input" [(ngModel)]="rowSelected.about"
|
||||
name="about" placeholder="Enter text" rows="3"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="textarea2" class="ug-form-label">Textarea2</label>
|
||||
<textarea id="textarea2" class="ug-form-input" [(ngModel)]="rowSelected.textarea2"
|
||||
name="textarea2" placeholder="Enter text" rows="3"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="date_field" class="ug-form-label">Date Field</label>
|
||||
<input type="date" id="date_field" class="ug-form-input" [(ngModel)]="rowSelected.date_field" name="date_field">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="date_field2" class="ug-form-label">Date Field2</label>
|
||||
<input type="date" id="date_field2" class="ug-form-input" [(ngModel)]="rowSelected.date_field2" name="date_field2">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clr-col-sm-12">
|
||||
<label>Datetime Field</label>
|
||||
<input class="clr-input" type="datetime-local" [(ngModel)]="rowSelected.datetime_field" name="datetime_field" />
|
||||
</div>
|
||||
|
||||
<div class="clr-col-sm-12">
|
||||
<label>Datetime Field2</label>
|
||||
<input class="clr-input" type="datetime-local" [(ngModel)]="rowSelected.datetime_field2" name="datetime_field2" />
|
||||
</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>
|
||||
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="email_field2" class="ug-form-label">Email Field2</label>
|
||||
<input type="email" id="email_field2" class="ug-form-input" [(ngModel)]="rowSelected.email_field2" name="email_field2" placeholder="Enter email address">
|
||||
<div *ngIf="rowSelected.email_field2 && !isValidemail_field2(rowSelected.email_field2)" class="ug-form-error">
|
||||
* Email must be a valid email address.
|
||||
</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">about:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.about}}</span>
|
||||
</div>
|
||||
|
||||
<div class="ug-delete-detail-item">
|
||||
<span class="ug-delete-detail-label">Textarea2:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.textarea2}}</span>
|
||||
</div>
|
||||
|
||||
<div class="ug-delete-detail-item">
|
||||
<span class="ug-delete-detail-label">Date Field:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.date_field}}</span>
|
||||
</div>
|
||||
|
||||
<div class="ug-delete-detail-item">
|
||||
<span class="ug-delete-detail-label">Date Field2:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.date_field2}}</span>
|
||||
</div>
|
||||
|
||||
<div class="ug-delete-detail-item">
|
||||
<span class="ug-delete-detail-label">Datetime Field:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.datetime_field}}</span>
|
||||
</div>
|
||||
|
||||
<div class="ug-delete-detail-item">
|
||||
<span class="ug-delete-detail-label">Datetime Field2:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.datetime_field2}}</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">Email Field2:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.email_field2}}</span>
|
||||
</div>
|
||||
|
||||
<div class="ug-delete-detail-item">
|
||||
<span class="ug-delete-detail-label">UserId Field:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.userid_field}}</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,516 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ToastrService } from 'ngx-toastr';
|
||||
import { AlertService } from 'src/app/services/alert.service';
|
||||
import { Basicp2service} from './Basicp2.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 { Basicp2cardvariable } from './Basicp2_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-Basicp2',
|
||||
templateUrl: './Basicp2.component.html',
|
||||
styleUrls: ['./Basicp2.component.scss']
|
||||
})
|
||||
export class Basicp2Component implements OnInit {
|
||||
cardButton = Basicp2cardvariable.cardButton;
|
||||
cardmodeldata = Basicp2cardvariable.cardmodeldata;
|
||||
public dashboardArray: DashboardContentModel2[];
|
||||
isCardview = Basicp2cardvariable.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 = 'Basicp2_formCode'
|
||||
tableName = 'Basicp2'; checkFormCode; selected: any[] = [];
|
||||
filterText: string = '';
|
||||
viewMode: 'table' | 'cards' = 'cards';
|
||||
private themeSubscription: Subscription; constructor(
|
||||
private extensionService: ExtensionService,
|
||||
private userInfoService:UserInfoService,
|
||||
private mainService:Basicp2service,
|
||||
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({
|
||||
about : [null],
|
||||
|
||||
textarea2 : [null],
|
||||
|
||||
date_field : [null],
|
||||
|
||||
date_field2 : [null],
|
||||
|
||||
datetime_field : [null],
|
||||
|
||||
datetime_field2 : [null],
|
||||
|
||||
email_field : [null,[Validators.required]],
|
||||
|
||||
email_field2 : [null,[Validators.required]],
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}); // 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 === "Basicp2_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?.about || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.textarea2 || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.date_field || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.date_field2 || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.datetime_field || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.datetime_field2 || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.email_field || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.email_field2 || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.userid_field || '').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();
|
||||
|
||||
}
|
||||
rsModalabout = false;
|
||||
goToReplaceStringabout(row){
|
||||
this.rowSelected = row; this.rsModalabout =true; }
|
||||
|
||||
rsModaltextarea2 = false;
|
||||
goToReplaceStringtextarea2(row){
|
||||
this.rowSelected = row; this.rsModaltextarea2 =true; }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
isValidemail_field(email: string): boolean {
|
||||
const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
|
||||
return emailPattern.test(email); }
|
||||
|
||||
isValidemail_field2(email: string): boolean {
|
||||
const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
|
||||
return emailPattern.test(email); }
|
||||
|
||||
|
||||
|
||||
|
||||
// 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,51 @@
|
||||
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 Basicp2service{
|
||||
private baseURL = "Basicp2/Basicp2" ; 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 Basicp2cardvariable = {
|
||||
"cardButton": false,
|
||||
"cardmodeldata": ``
|
||||
}
|
||||
@ -0,0 +1,702 @@
|
||||
<ol class="breadcrumb breadcrumb-arrow font-trirong">
|
||||
<li><a href="javascript://"> Basicp3</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">Basicp3</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]="'toggle_switch'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Toggle Switch
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
|
||||
|
||||
|
||||
<clr-dg-column [clrDgField]="'toggle_switch2'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Toggle Switch2
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
|
||||
<clr-dg-column [clrDgField]="'url_field'"> <ng-container *clrDgHideableColumn="{hidden: false}"> Url Field
|
||||
</ng-container></clr-dg-column>
|
||||
|
||||
|
||||
<clr-dg-column [clrDgField]="'url_field2'"> <ng-container *clrDgHideableColumn="{hidden: false}"> Url Field2
|
||||
</ng-container></clr-dg-column>
|
||||
|
||||
|
||||
|
||||
|
||||
<clr-dg-column [clrDgField]="'decimal_field'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Decimal Field
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
|
||||
|
||||
|
||||
<clr-dg-column [clrDgField]="'decimal_field2'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Decimal Field2
|
||||
</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]="'percentage_field2'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
Percentage Field2
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
|
||||
|
||||
|
||||
<clr-dg-column [clrDgField]="'documentsequenc'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
documentsequenc
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
|
||||
|
||||
|
||||
<clr-dg-column [clrDgField]="'recaptcha'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
recaptcha
|
||||
</ng-container>
|
||||
</clr-dg-column>
|
||||
|
||||
|
||||
|
||||
|
||||
<clr-dg-column [clrDgField]="'recaptcha2'">
|
||||
<ng-container *clrDgHideableColumn="{hidden: false}">
|
||||
recaptcha2
|
||||
</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.toggle_switch }}</clr-dg-cell>
|
||||
|
||||
|
||||
<clr-dg-cell>{{user.toggle_switch2 }}</clr-dg-cell>
|
||||
|
||||
|
||||
<clr-dg-cell (click)="goTourl_fieldUrl(user.url_field)" style="cursor: pointer; color: rgb(108, 108, 194);">{{user.url_field}}</clr-dg-cell>
|
||||
|
||||
|
||||
<clr-dg-cell (click)="goTourl_field2Url(user.url_field2)" style="cursor: pointer; color: rgb(108, 108, 194);">{{user.url_field2}}</clr-dg-cell>
|
||||
|
||||
|
||||
<clr-dg-cell>{{user.decimal_field }}</clr-dg-cell>
|
||||
|
||||
|
||||
<clr-dg-cell>{{user.decimal_field2 }}</clr-dg-cell>
|
||||
|
||||
|
||||
<clr-dg-cell>{{user.percentage_field }}</clr-dg-cell>
|
||||
|
||||
|
||||
<clr-dg-cell>{{user.percentage_field2 }}</clr-dg-cell>
|
||||
|
||||
|
||||
<clr-dg-cell>{{user.documentsequenc }}</clr-dg-cell>
|
||||
|
||||
|
||||
<clr-dg-cell>{{user.recaptcha }}</clr-dg-cell>
|
||||
|
||||
|
||||
<clr-dg-cell>{{user.recaptcha2 }}</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>Toggle Switch</span><strong>{{user.toggle_switch}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>Toggle Switch2</span><strong>{{user.toggle_switch2}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>Url Field</span><strong>{{user.url_field}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>Url Field2</span><strong>{{user.url_field2}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>Decimal Field</span><strong>{{user.decimal_field}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>Decimal Field2</span><strong>{{user.decimal_field2}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>Percentage Field</span><strong>{{user.percentage_field}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>Percentage Field2</span><strong>{{user.percentage_field2}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>documentsequenc</span><strong>{{user.documentsequenc}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>recaptcha</span><strong>{{user.recaptcha}}</strong></div>
|
||||
|
||||
|
||||
<div class="ug-kv"><span>recaptcha2</span><strong>{{user.recaptcha2}}</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)]="modalAdd" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
|
||||
<h3 class="modal-title">Add Basicp3</h3>
|
||||
<div class="modal-body">
|
||||
<form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label class="ug-form-label">Toggle Switch</label>
|
||||
<div class="clr-toggle-wrapper">
|
||||
<input type="checkbox" id="toggle_switch" formControlName="toggle_switch" clrToggle>
|
||||
<label for="toggle_switch">Toggle Switch</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label class="ug-form-label">Toggle Switch2</label>
|
||||
<div class="clr-toggle-wrapper">
|
||||
<input type="checkbox" id="toggle_switch2" formControlName="toggle_switch2" clrToggle>
|
||||
<label for="toggle_switch2">Toggle Switch2</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="url_field" class="ug-form-label">Url Field</label>
|
||||
<input type="url" id="url_field" class="ug-form-input" formControlName="url_field" placeholder="Enter Url Field">
|
||||
<div *ngIf="entryForm.controls['url_field'].errors" class="ug-form-error">
|
||||
<div *ngIf="entryForm.controls['url_field'].hasError('pattern')" class="error_mess">* Please enter a valid URL.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="url_field2" class="ug-form-label">Url Field2</label>
|
||||
<input type="url" id="url_field2" class="ug-form-input" formControlName="url_field2" placeholder="Enter Url Field2">
|
||||
<div *ngIf="entryForm.controls['url_field2'].errors" class="ug-form-error">
|
||||
<div *ngIf="entryForm.controls['url_field2'].hasError('pattern')" class="error_mess">* Please enter a valid URL.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="decimal_field" class="ug-form-label">Decimal Field<span class="required-field">*</span></label>
|
||||
<input type="number" id="decimal_field" class="ug-form-input" formControlName="decimal_field" placeholder="Enter decimal value" step="0.01">
|
||||
<div *ngIf="submitted && entryForm.controls.decimal_field.errors" class="ug-form-error">
|
||||
<div *ngIf="submitted && entryForm.controls.decimal_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 for="decimal_field2" class="ug-form-label">Decimal Field2<span class="required-field">*</span></label>
|
||||
<input type="number" id="decimal_field2" class="ug-form-input" formControlName="decimal_field2" placeholder="Enter decimal value" step="0.01">
|
||||
<div *ngIf="submitted && entryForm.controls.decimal_field2.errors" class="ug-form-error">
|
||||
<div *ngIf="submitted && entryForm.controls.decimal_field2.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="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 for="percentage_field2" class="ug-form-label">Percentage Field2<span class="required-field">*</span></label>
|
||||
<input type="number" id="percentage_field2" class="ug-form-input" formControlName="percentage_field2" placeholder="Enter Percentage Field2">
|
||||
<div *ngIf="submitted && entryForm.controls.percentage_field2.errors" class="ug-form-error">
|
||||
<div *ngIf="submitted && entryForm.controls.percentage_field2.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">recaptcha<span class="required-field">*</span></label>
|
||||
<div class="recaptcha-container">
|
||||
<div class="recaptcha-code">
|
||||
<b>{{ recaptchaCode }}</b>
|
||||
<button type="button" class="ug-btn ug-btn-sm ug-btn-secondary" (click)="generaterecaptcha()">
|
||||
<clr-icon shape="refresh"></clr-icon>
|
||||
</button>
|
||||
</div>
|
||||
<input type="text" class="ug-form-input" formControlName="recaptcha" placeholder="Enter the code above">
|
||||
<div *ngIf="submitted && entryForm.controls.recaptcha?.errors?.required" class="ug-form-error">*This field is Required</div>
|
||||
<div *ngIf="submitted && entryForm.get('recaptcha')?.errors && entryForm.get('recaptcha')?.dirty" class="ug-form-error">
|
||||
<div *ngIf="submitted && entryForm.controls['recaptcha']?.hasError('recaptchaMismatch')" class="error_mess">recaptcha not valid.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label class="ug-form-label">recaptcha2<span class="required-field">*</span></label>
|
||||
<div class="recaptcha-container">
|
||||
<div class="recaptcha-code">
|
||||
<b>{{ recaptcha2Code }}</b>
|
||||
<button type="button" class="ug-btn ug-btn-sm ug-btn-secondary" (click)="generaterecaptcha2()">
|
||||
<clr-icon shape="refresh"></clr-icon>
|
||||
</button>
|
||||
</div>
|
||||
<input type="text" class="ug-form-input" formControlName="recaptcha2" placeholder="Enter the code above">
|
||||
<div *ngIf="submitted && entryForm.controls.recaptcha2?.errors?.required" class="ug-form-error">*This field is Required</div>
|
||||
<div *ngIf="submitted && entryForm.get('recaptcha2')?.errors && entryForm.get('recaptcha2')?.dirty" class="ug-form-error">
|
||||
<div *ngIf="submitted && entryForm.controls['recaptcha2']?.hasError('recaptcha2Mismatch')" class="error_mess">recaptcha2 not valid.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="ug-btn ug-btn-outline" (click)="modalAdd = false">Cancel</button>
|
||||
<button type="submit" class="ug-btn ug-btn-primary">ADD</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</clr-modal>
|
||||
|
||||
<clr-modal [(clrModalOpen)]="modalEdit" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
|
||||
<h3 class="modal-title">Update Basicp3</h3>
|
||||
<div class="modal-body" *ngIf="rowSelected.id">
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label class="ug-form-label">Toggle Switch</label>
|
||||
<div class="clr-toggle-wrapper">
|
||||
<input type="checkbox" id="toggle_switch" name="toggle_switch" clrToggle [(ngModel)]="rowSelected.toggle_switch">
|
||||
<label for="toggle_switch">Toggle Switch</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label class="ug-form-label">Toggle Switch2</label>
|
||||
<div class="clr-toggle-wrapper">
|
||||
<input type="checkbox" id="toggle_switch2" name="toggle_switch2" clrToggle [(ngModel)]="rowSelected.toggle_switch2">
|
||||
<label for="toggle_switch2">Toggle Switch2</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="url_field" class="ug-form-label">Url Field</label>
|
||||
<input type="url" id="url_field" class="ug-form-input" name="url_field" [(ngModel)]="rowSelected.url_field" placeholder="Enter URL">
|
||||
<div *ngIf="!isValidurl_field(rowSelected.url_field)" class="ug-form-error">* Please enter a valid URL.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="url_field2" class="ug-form-label">Url Field2</label>
|
||||
<input type="url" id="url_field2" class="ug-form-input" name="url_field2" [(ngModel)]="rowSelected.url_field2" placeholder="Enter URL">
|
||||
<div *ngIf="!isValidurl_field2(rowSelected.url_field2)" class="ug-form-error">* Please enter a valid URL.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="decimal_field" class="ug-form-label">Decimal Field</label>
|
||||
<input type="number" id="decimal_field" class="ug-form-input" name="decimal_field" [(ngModel)]="rowSelected.decimal_field" placeholder="Enter decimal value" step="0.01">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="decimal_field2" class="ug-form-label">Decimal Field2</label>
|
||||
<input type="number" id="decimal_field2" class="ug-form-input" name="decimal_field2" [(ngModel)]="rowSelected.decimal_field2" placeholder="Enter decimal value" step="0.01">
|
||||
</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>
|
||||
|
||||
|
||||
<!-- Number Fields -->
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label for="percentage_field2" class="ug-form-label">Percentage Field2</label>
|
||||
<input type="number" id="percentage_field2" class="ug-form-input" [(ngModel)]="rowSelected.percentage_field2"
|
||||
name="percentage_field2" placeholder="Enter Percentage Field2">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label class="ug-form-label">recaptcha<span class="required-field">*</span></label>
|
||||
<div class="recaptcha-container">
|
||||
<div class="recaptcha-code">
|
||||
<b>{{ recaptchaCode }}</b>
|
||||
<button type="button" class="ug-btn ug-btn-sm ug-btn-secondary" (click)="generaterecaptcha()">
|
||||
<clr-icon shape="refresh"></clr-icon>
|
||||
</button>
|
||||
</div>
|
||||
<input type="text" class="ug-form-input" name="recaptcha" [(ngModel)]="rowSelected.recaptcha" (ngModelChange)="checkrecaptchaEdit()" placeholder="Enter the code above">
|
||||
<div *ngIf="recaptchaMismatch" class="ug-form-error">recaptcha not valid.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<div class="ug-form-group">
|
||||
<label class="ug-form-label">recaptcha2<span class="required-field">*</span></label>
|
||||
<div class="recaptcha-container">
|
||||
<div class="recaptcha-code">
|
||||
<b>{{ recaptcha2Code }}</b>
|
||||
<button type="button" class="ug-btn ug-btn-sm ug-btn-secondary" (click)="generaterecaptcha2()">
|
||||
<clr-icon shape="refresh"></clr-icon>
|
||||
</button>
|
||||
</div>
|
||||
<input type="text" class="ug-form-input" name="recaptcha2" [(ngModel)]="rowSelected.recaptcha2" (ngModelChange)="checkrecaptchaEdit()" placeholder="Enter the code above">
|
||||
<div *ngIf="recaptcha2Mismatch" class="ug-form-error">recaptcha2 not valid.</div>
|
||||
</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">Toggle Switch:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.toggle_switch}}</span>
|
||||
</div>
|
||||
|
||||
<div class="ug-delete-detail-item">
|
||||
<span class="ug-delete-detail-label">Toggle Switch2:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.toggle_switch2}}</span>
|
||||
</div>
|
||||
|
||||
<div class="ug-delete-detail-item">
|
||||
<span class="ug-delete-detail-label">Url Field:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.url_field}}</span>
|
||||
</div>
|
||||
|
||||
<div class="ug-delete-detail-item">
|
||||
<span class="ug-delete-detail-label">Url Field2:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.url_field2}}</span>
|
||||
</div>
|
||||
|
||||
<div class="ug-delete-detail-item">
|
||||
<span class="ug-delete-detail-label">Decimal Field:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.decimal_field}}</span>
|
||||
</div>
|
||||
|
||||
<div class="ug-delete-detail-item">
|
||||
<span class="ug-delete-detail-label">Decimal Field2:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.decimal_field2}}</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">Percentage Field2:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.percentage_field2}}</span>
|
||||
</div>
|
||||
|
||||
<div class="ug-delete-detail-item">
|
||||
<span class="ug-delete-detail-label">documentsequenc:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.documentsequenc}}</span>
|
||||
</div>
|
||||
|
||||
<div class="ug-delete-detail-item">
|
||||
<span class="ug-delete-detail-label">recaptcha:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.recaptcha}}</span>
|
||||
</div>
|
||||
|
||||
<div class="ug-delete-detail-item">
|
||||
<span class="ug-delete-detail-label">recaptcha2:</span>
|
||||
<span class="ug-delete-detail-value">{{rowSelected.recaptcha2}}</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,612 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ToastrService } from 'ngx-toastr';
|
||||
import { AlertService } from 'src/app/services/alert.service';
|
||||
import { Basicp3service} from './Basicp3.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 { Basicp3cardvariable } from './Basicp3_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-Basicp3',
|
||||
templateUrl: './Basicp3.component.html',
|
||||
styleUrls: ['./Basicp3.component.scss']
|
||||
})
|
||||
export class Basicp3Component implements OnInit {
|
||||
cardButton = Basicp3cardvariable.cardButton;
|
||||
cardmodeldata = Basicp3cardvariable.cardmodeldata;
|
||||
public dashboardArray: DashboardContentModel2[];
|
||||
isCardview = Basicp3cardvariable.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 = 'Basicp3_formCode'
|
||||
tableName = 'Basicp3'; checkFormCode; selected: any[] = [];
|
||||
filterText: string = '';
|
||||
viewMode: 'table' | 'cards' = 'cards';
|
||||
private themeSubscription: Subscription; constructor(
|
||||
private extensionService: ExtensionService,
|
||||
private userInfoService:UserInfoService,
|
||||
private mainService:Basicp3service,
|
||||
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({
|
||||
toggle_switch : [true],
|
||||
|
||||
toggle_switch2 : [true],
|
||||
|
||||
url_field : [null],
|
||||
|
||||
url_field2 : [null],
|
||||
|
||||
decimal_field : [null,[Validators.required]],
|
||||
|
||||
decimal_field2 : [null,[Validators.required]],
|
||||
|
||||
percentage_field : [null,[Validators.required]],
|
||||
|
||||
percentage_field2 : [null,[Validators.required]],
|
||||
|
||||
documentsequenc : [null],
|
||||
|
||||
recaptcha : ['', [Validators.required,this.checkrecaptcha.bind(this)]],
|
||||
|
||||
recaptcha2 : ['', [Validators.required,this.checkrecaptcha2.bind(this)]],
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}); // 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 === "Basicp3_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
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
this.generaterecaptcha()
|
||||
|
||||
this.generaterecaptcha2()
|
||||
|
||||
|
||||
}
|
||||
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?.toggle_switch || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.toggle_switch2 || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.url_field || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.url_field2 || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.decimal_field || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.decimal_field2 || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.percentage_field || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.percentage_field2 || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.documentsequenc || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.recaptcha || '').toString()).toLowerCase().includes(text) ||
|
||||
|
||||
((g?.recaptcha2 || '').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();
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
isValidurl_field(url: string): boolean {
|
||||
return /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/.test(url); }
|
||||
goTourl_fieldUrl(val){ window.open(val) }
|
||||
|
||||
isValidurl_field2(url: string): boolean {
|
||||
return /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/.test(url); }
|
||||
goTourl_field2Url(val){ window.open(val) }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
recaptchaCode = '';
|
||||
generaterecaptcha (): void {
|
||||
const possibleCharacters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||
const codeLength = 6; // Change to desired length
|
||||
|
||||
let recaptcha= '';
|
||||
for (let i = 0; i < codeLength; i++) {
|
||||
const randomIndex = Math.floor(Math.random() * possibleCharacters.length);
|
||||
recaptcha += possibleCharacters.charAt(randomIndex);
|
||||
}
|
||||
this.recaptchaCode = recaptcha;
|
||||
}
|
||||
|
||||
checkrecaptcha(control: AbstractControl): ValidationErrors | null {
|
||||
if (control.value !== this.recaptchaCode) {
|
||||
return { recaptchaMismatch: true };
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
recaptchaMismatch = false;
|
||||
|
||||
checkrecaptchaEdit(): void {
|
||||
if (this.rowSelected.recaptcha !== this. recaptchaCode) {
|
||||
this. recaptchaMismatch = true; } else { this.recaptchaMismatch = false; } }
|
||||
|
||||
recaptcha2Code = '';
|
||||
generaterecaptcha2 (): void {
|
||||
const possibleCharacters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||
const codeLength = 6; // Change to desired length
|
||||
|
||||
let recaptcha2= '';
|
||||
for (let i = 0; i < codeLength; i++) {
|
||||
const randomIndex = Math.floor(Math.random() * possibleCharacters.length);
|
||||
recaptcha2 += possibleCharacters.charAt(randomIndex);
|
||||
}
|
||||
this.recaptcha2Code = recaptcha2;
|
||||
}
|
||||
|
||||
checkrecaptcha2(control: AbstractControl): ValidationErrors | null {
|
||||
if (control.value !== this.recaptcha2Code) {
|
||||
return { recaptcha2Mismatch: true };
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
recaptcha2Mismatch = false;
|
||||
|
||||
checkrecaptcha2Edit(): void {
|
||||
if (this.rowSelected.recaptcha2 !== this. recaptcha2Code) {
|
||||
this. recaptcha2Mismatch = true; } else { this.recaptcha2Mismatch = false; } }
|
||||
|
||||
|
||||
// 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,55 @@
|
||||
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 Basicp3service{
|
||||
private baseURL = "Basicp3/Basicp3" ; 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 Basicp3cardvariable = {
|
||||
"cardButton": false,
|
||||
"cardmodeldata": ``
|
||||
}
|
||||
@ -1,3 +1,6 @@
|
||||
import { Basicp3Component } from './BuilderComponents/angulardatatype/Basicp3/Basicp3.component';
|
||||
import { Basicp2Component } from './BuilderComponents/angulardatatype/Basicp2/Basicp2.component';
|
||||
import { Basicp1Component } from './BuilderComponents/angulardatatype/Basicp1/Basicp1.component';
|
||||
|
||||
import { SequencegenaratorComponent } from './fnd/sequencegenarator/sequencegenarator.component';
|
||||
import { Component, NgModule } from '@angular/core';
|
||||
@ -261,6 +264,15 @@ const routes: Routes = [
|
||||
|
||||
|
||||
// buildercomponents
|
||||
{path:'Basicp3',component:Basicp3Component},
|
||||
|
||||
|
||||
{path:'Basicp2',component:Basicp2Component},
|
||||
|
||||
|
||||
{path:'Basicp1',component:Basicp1Component},
|
||||
|
||||
|
||||
|
||||
{ path: 'tokenregistery', component: Token_registeryComponent },
|
||||
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
import { Basicp3Component } from './BuilderComponents/angulardatatype/Basicp3/Basicp3.component';
|
||||
import { Basicp2Component } from './BuilderComponents/angulardatatype/Basicp2/Basicp2.component';
|
||||
import { Basicp1Component } from './BuilderComponents/angulardatatype/Basicp1/Basicp1.component';
|
||||
|
||||
|
||||
import { CommonModule } from '@angular/common';
|
||||
@ -136,6 +139,15 @@ import { ThemeCustomizationComponent } from './theme-customization/theme-customi
|
||||
|
||||
|
||||
// buildercomponents
|
||||
Basicp3Component,
|
||||
|
||||
|
||||
Basicp2Component,
|
||||
|
||||
|
||||
Basicp1Component,
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,6 @@
|
||||
CREATE TABLE duplicatedb.Basicp1(id BIGINT NOT NULL AUTO_INCREMENT, textarea_field VARCHAR(400), paragraph_field VARCHAR(400), textarea VARCHAR(400), paragraph_field2 VARCHAR(400), phone_number2 VARCHAR(400), name VARCHAR(400), number1 int, phone_number VARCHAR(400), number2 int, name2 VARCHAR(400), password_field VARCHAR(400), textarea_field2 VARCHAR(400), PRIMARY KEY (id));
|
||||
|
||||
CREATE TABLE duplicatedb.Basicp2(id BIGINT NOT NULL AUTO_INCREMENT, datetime_field2 VARCHAR(400), about VARCHAR(400), datetime_field VARCHAR(400), userid_field VARCHAR(400), email_field2 VARCHAR(400), date_field Date, email_field VARCHAR(400), textarea2 VARCHAR(400), date_field2 Date, PRIMARY KEY (id));
|
||||
|
||||
CREATE TABLE duplicatedb.Basicp3(id BIGINT NOT NULL AUTO_INCREMENT, toggle_switch2 VARCHAR(400), decimal_field2 double, documentsequenc VARCHAR(400), toggle_switch VARCHAR(400), recaptcha VARCHAR(400), percentage_field int, percentage_field2 int, url_field VARCHAR(400), url_field2 VARCHAR(400), decimal_field double, recaptcha2 VARCHAR(400), PRIMARY KEY (id));
|
||||
|
||||
@ -69,6 +69,18 @@ public class BuilderService {
|
||||
executeDump(true);
|
||||
|
||||
// ADD OTHER SERVICE
|
||||
SaveDashboard("tets", "tets", "{\"dashboard\":[{\"cols\":4,\"rows\":5,\"x\":0,\"y\":0,\"name\":\"Radar Chart\",\"component\":\"Radar Chart\"}]}");
|
||||
|
||||
|
||||
addCustomMenu( "Basicp3","Basicp3", "Transcations");
|
||||
|
||||
|
||||
addCustomMenu( "Basicp2","Basicp2", "Transcations");
|
||||
|
||||
|
||||
addCustomMenu( "Basicp1","Basicp1", "Transcations");
|
||||
|
||||
|
||||
|
||||
System.out.println("dashboard and menu inserted...");
|
||||
|
||||
|
||||
@ -0,0 +1,171 @@
|
||||
package com.realnet.angulardatatype.Controllers;
|
||||
import java.util.List;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.web.bind.annotation.*;
|
||||
import org.springframework.web.multipart.MultipartFile;
|
||||
import com.fasterxml.jackson.core.JsonProcessingException;
|
||||
import org.springframework.web.bind.annotation.CrossOrigin;
|
||||
import com.fasterxml.jackson.databind.JsonMappingException;
|
||||
import com.realnet.config.EmailService;
|
||||
import com.realnet.users.entity1.AppUser;
|
||||
import com.realnet.users.service1.AppUserServiceImpl;
|
||||
import com.fasterxml.jackson.databind.ObjectMapper;
|
||||
import org.springframework.data.domain.*;
|
||||
import com.realnet.fnd.response.EntityResponse;
|
||||
import org.springframework.http.*;
|
||||
import org.springframework.beans.factory.annotation.*;
|
||||
import com.realnet.angulardatatype.Entity.Basicp1;
|
||||
import com.realnet.angulardatatype.Services.Basicp1Service ;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@RequestMapping(value = "/Basicp1")
|
||||
@CrossOrigin("*")
|
||||
@RestController
|
||||
public class Basicp1Controller {
|
||||
@Autowired
|
||||
private Basicp1Service Service;
|
||||
|
||||
@Value("${projectPath}")
|
||||
private String projectPath;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@PostMapping("/Basicp1")
|
||||
public Basicp1 Savedata(@RequestBody Basicp1 data) {
|
||||
Basicp1 save = Service.Savedata(data) ;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
System.out.println("data saved..." + save);
|
||||
|
||||
return save;
|
||||
}
|
||||
@PutMapping("/Basicp1/{id}")
|
||||
public Basicp1 update(@RequestBody Basicp1 data,@PathVariable Integer id ) {
|
||||
Basicp1 update = Service.update(data,id);
|
||||
System.out.println("data update..." + update);
|
||||
return update;
|
||||
}
|
||||
// get all with pagination
|
||||
@GetMapping("/Basicp1/getall/page")
|
||||
public Page<Basicp1> getall(@RequestParam(value = "page", required = false) Integer page,
|
||||
@RequestParam(value = "size", required = false) Integer size) {
|
||||
Pageable paging = PageRequest.of(page, size);
|
||||
Page<Basicp1> get = Service.getAllWithPagination(paging);
|
||||
|
||||
return get;
|
||||
|
||||
}
|
||||
@GetMapping("/Basicp1")
|
||||
public List<Basicp1> getdetails() {
|
||||
List<Basicp1> get = Service.getdetails();
|
||||
return get;
|
||||
}
|
||||
// get all without authentication
|
||||
|
||||
@GetMapping("/token/Basicp1")
|
||||
public List<Basicp1> getallwioutsec() {
|
||||
List<Basicp1> get = Service.getdetails();
|
||||
return get;
|
||||
}
|
||||
@GetMapping("/Basicp1/{id}")
|
||||
public Basicp1 getdetailsbyId(@PathVariable Integer id ) {
|
||||
Basicp1 get = Service.getdetailsbyId(id);
|
||||
return get;
|
||||
}
|
||||
@DeleteMapping("/Basicp1/{id}")
|
||||
public ResponseEntity<?> delete_by_id(@PathVariable Integer id ) {
|
||||
Service.delete_by_id(id);
|
||||
return new ResponseEntity<>(new EntityResponse("Deleted"), HttpStatus.OK);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
@ -0,0 +1,147 @@
|
||||
package com.realnet.angulardatatype.Controllers;
|
||||
import java.util.List;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.web.bind.annotation.*;
|
||||
import org.springframework.web.multipart.MultipartFile;
|
||||
import com.fasterxml.jackson.core.JsonProcessingException;
|
||||
import org.springframework.web.bind.annotation.CrossOrigin;
|
||||
import com.fasterxml.jackson.databind.JsonMappingException;
|
||||
import com.realnet.config.EmailService;
|
||||
import com.realnet.users.entity1.AppUser;
|
||||
import com.realnet.users.service1.AppUserServiceImpl;
|
||||
import com.fasterxml.jackson.databind.ObjectMapper;
|
||||
import org.springframework.data.domain.*;
|
||||
import com.realnet.fnd.response.EntityResponse;
|
||||
import org.springframework.http.*;
|
||||
import org.springframework.beans.factory.annotation.*;
|
||||
import com.realnet.angulardatatype.Entity.Basicp2;
|
||||
import com.realnet.angulardatatype.Services.Basicp2Service ;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@RequestMapping(value = "/Basicp2")
|
||||
@CrossOrigin("*")
|
||||
@RestController
|
||||
public class Basicp2Controller {
|
||||
@Autowired
|
||||
private Basicp2Service Service;
|
||||
|
||||
@Value("${projectPath}")
|
||||
private String projectPath;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@PostMapping("/Basicp2")
|
||||
public Basicp2 Savedata(@RequestBody Basicp2 data) {
|
||||
Basicp2 save = Service.Savedata(data) ;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
System.out.println("data saved..." + save);
|
||||
|
||||
return save;
|
||||
}
|
||||
@PutMapping("/Basicp2/{id}")
|
||||
public Basicp2 update(@RequestBody Basicp2 data,@PathVariable Integer id ) {
|
||||
Basicp2 update = Service.update(data,id);
|
||||
System.out.println("data update..." + update);
|
||||
return update;
|
||||
}
|
||||
// get all with pagination
|
||||
@GetMapping("/Basicp2/getall/page")
|
||||
public Page<Basicp2> getall(@RequestParam(value = "page", required = false) Integer page,
|
||||
@RequestParam(value = "size", required = false) Integer size) {
|
||||
Pageable paging = PageRequest.of(page, size);
|
||||
Page<Basicp2> get = Service.getAllWithPagination(paging);
|
||||
|
||||
return get;
|
||||
|
||||
}
|
||||
@GetMapping("/Basicp2")
|
||||
public List<Basicp2> getdetails() {
|
||||
List<Basicp2> get = Service.getdetails();
|
||||
return get;
|
||||
}
|
||||
// get all without authentication
|
||||
|
||||
@GetMapping("/token/Basicp2")
|
||||
public List<Basicp2> getallwioutsec() {
|
||||
List<Basicp2> get = Service.getdetails();
|
||||
return get;
|
||||
}
|
||||
@GetMapping("/Basicp2/{id}")
|
||||
public Basicp2 getdetailsbyId(@PathVariable Integer id ) {
|
||||
Basicp2 get = Service.getdetailsbyId(id);
|
||||
return get;
|
||||
}
|
||||
@DeleteMapping("/Basicp2/{id}")
|
||||
public ResponseEntity<?> delete_by_id(@PathVariable Integer id ) {
|
||||
Service.delete_by_id(id);
|
||||
return new ResponseEntity<>(new EntityResponse("Deleted"), HttpStatus.OK);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
@ -0,0 +1,163 @@
|
||||
package com.realnet.angulardatatype.Controllers;
|
||||
import java.util.List;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.web.bind.annotation.*;
|
||||
import org.springframework.web.multipart.MultipartFile;
|
||||
import com.fasterxml.jackson.core.JsonProcessingException;
|
||||
import org.springframework.web.bind.annotation.CrossOrigin;
|
||||
import com.fasterxml.jackson.databind.JsonMappingException;
|
||||
import com.realnet.config.EmailService;
|
||||
import com.realnet.users.entity1.AppUser;
|
||||
import com.realnet.users.service1.AppUserServiceImpl;
|
||||
import com.fasterxml.jackson.databind.ObjectMapper;
|
||||
import org.springframework.data.domain.*;
|
||||
import com.realnet.fnd.response.EntityResponse;
|
||||
import org.springframework.http.*;
|
||||
import org.springframework.beans.factory.annotation.*;
|
||||
import com.realnet.angulardatatype.Entity.Basicp3;
|
||||
import com.realnet.angulardatatype.Services.Basicp3Service ;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@RequestMapping(value = "/Basicp3")
|
||||
@CrossOrigin("*")
|
||||
@RestController
|
||||
public class Basicp3Controller {
|
||||
@Autowired
|
||||
private Basicp3Service Service;
|
||||
|
||||
@Value("${projectPath}")
|
||||
private String projectPath;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@PostMapping("/Basicp3")
|
||||
public Basicp3 Savedata(@RequestBody Basicp3 data) {
|
||||
Basicp3 save = Service.Savedata(data) ;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
System.out.println("data saved..." + save);
|
||||
|
||||
return save;
|
||||
}
|
||||
@PutMapping("/Basicp3/{id}")
|
||||
public Basicp3 update(@RequestBody Basicp3 data,@PathVariable Integer id ) {
|
||||
Basicp3 update = Service.update(data,id);
|
||||
System.out.println("data update..." + update);
|
||||
return update;
|
||||
}
|
||||
// get all with pagination
|
||||
@GetMapping("/Basicp3/getall/page")
|
||||
public Page<Basicp3> getall(@RequestParam(value = "page", required = false) Integer page,
|
||||
@RequestParam(value = "size", required = false) Integer size) {
|
||||
Pageable paging = PageRequest.of(page, size);
|
||||
Page<Basicp3> get = Service.getAllWithPagination(paging);
|
||||
|
||||
return get;
|
||||
|
||||
}
|
||||
@GetMapping("/Basicp3")
|
||||
public List<Basicp3> getdetails() {
|
||||
List<Basicp3> get = Service.getdetails();
|
||||
return get;
|
||||
}
|
||||
// get all without authentication
|
||||
|
||||
@GetMapping("/token/Basicp3")
|
||||
public List<Basicp3> getallwioutsec() {
|
||||
List<Basicp3> get = Service.getdetails();
|
||||
return get;
|
||||
}
|
||||
@GetMapping("/Basicp3/{id}")
|
||||
public Basicp3 getdetailsbyId(@PathVariable Integer id ) {
|
||||
Basicp3 get = Service.getdetailsbyId(id);
|
||||
return get;
|
||||
}
|
||||
@DeleteMapping("/Basicp3/{id}")
|
||||
public ResponseEntity<?> delete_by_id(@PathVariable Integer id ) {
|
||||
Service.delete_by_id(id);
|
||||
return new ResponseEntity<>(new EntityResponse("Deleted"), HttpStatus.OK);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
@ -0,0 +1,171 @@
|
||||
package com.realnet.angulardatatype.Controllers;
|
||||
import java.util.List;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.web.bind.annotation.*;
|
||||
import org.springframework.web.multipart.MultipartFile;
|
||||
import com.fasterxml.jackson.core.JsonProcessingException;
|
||||
import org.springframework.web.bind.annotation.CrossOrigin;
|
||||
import com.fasterxml.jackson.databind.JsonMappingException;
|
||||
import com.realnet.config.EmailService;
|
||||
import com.realnet.users.entity1.AppUser;
|
||||
import com.realnet.users.service1.AppUserServiceImpl;
|
||||
import com.fasterxml.jackson.databind.ObjectMapper;
|
||||
import org.springframework.data.domain.*;
|
||||
import com.realnet.fnd.response.EntityResponse;
|
||||
import org.springframework.http.*;
|
||||
import org.springframework.beans.factory.annotation.*;
|
||||
import com.realnet.angulardatatype.Entity.Basicp1;
|
||||
import com.realnet.angulardatatype.Services.Basicp1Service ;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@RequestMapping(value = "/token/Basicp1")
|
||||
@CrossOrigin("*")
|
||||
@RestController
|
||||
public class tokenFree_Basicp1Controller {
|
||||
@Autowired
|
||||
private Basicp1Service Service;
|
||||
|
||||
@Value("${projectPath}")
|
||||
private String projectPath;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@PostMapping("/Basicp1")
|
||||
public Basicp1 Savedata(@RequestBody Basicp1 data) {
|
||||
Basicp1 save = Service.Savedata(data) ;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
System.out.println("data saved..." + save);
|
||||
|
||||
return save;
|
||||
}
|
||||
@PutMapping("/Basicp1/{id}")
|
||||
public Basicp1 update(@RequestBody Basicp1 data,@PathVariable Integer id ) {
|
||||
Basicp1 update = Service.update(data,id);
|
||||
System.out.println("data update..." + update);
|
||||
return update;
|
||||
}
|
||||
// get all with pagination
|
||||
@GetMapping("/Basicp1/getall/page")
|
||||
public Page<Basicp1> getall(@RequestParam(value = "page", required = false) Integer page,
|
||||
@RequestParam(value = "size", required = false) Integer size) {
|
||||
Pageable paging = PageRequest.of(page, size);
|
||||
Page<Basicp1> get = Service.getAllWithPagination(paging);
|
||||
|
||||
return get;
|
||||
|
||||
}
|
||||
@GetMapping("/Basicp1")
|
||||
public List<Basicp1> getdetails() {
|
||||
List<Basicp1> get = Service.getdetails();
|
||||
return get;
|
||||
}
|
||||
// get all without authentication
|
||||
|
||||
@GetMapping("/token/Basicp1")
|
||||
public List<Basicp1> getallwioutsec() {
|
||||
List<Basicp1> get = Service.getdetails();
|
||||
return get;
|
||||
}
|
||||
@GetMapping("/Basicp1/{id}")
|
||||
public Basicp1 getdetailsbyId(@PathVariable Integer id ) {
|
||||
Basicp1 get = Service.getdetailsbyId(id);
|
||||
return get;
|
||||
}
|
||||
@DeleteMapping("/Basicp1/{id}")
|
||||
public ResponseEntity<?> delete_by_id(@PathVariable Integer id ) {
|
||||
Service.delete_by_id(id);
|
||||
return new ResponseEntity<>(new EntityResponse("Deleted"), HttpStatus.OK);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
@ -0,0 +1,147 @@
|
||||
package com.realnet.angulardatatype.Controllers;
|
||||
import java.util.List;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.web.bind.annotation.*;
|
||||
import org.springframework.web.multipart.MultipartFile;
|
||||
import com.fasterxml.jackson.core.JsonProcessingException;
|
||||
import org.springframework.web.bind.annotation.CrossOrigin;
|
||||
import com.fasterxml.jackson.databind.JsonMappingException;
|
||||
import com.realnet.config.EmailService;
|
||||
import com.realnet.users.entity1.AppUser;
|
||||
import com.realnet.users.service1.AppUserServiceImpl;
|
||||
import com.fasterxml.jackson.databind.ObjectMapper;
|
||||
import org.springframework.data.domain.*;
|
||||
import com.realnet.fnd.response.EntityResponse;
|
||||
import org.springframework.http.*;
|
||||
import org.springframework.beans.factory.annotation.*;
|
||||
import com.realnet.angulardatatype.Entity.Basicp2;
|
||||
import com.realnet.angulardatatype.Services.Basicp2Service ;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@RequestMapping(value = "/token/Basicp2")
|
||||
@CrossOrigin("*")
|
||||
@RestController
|
||||
public class tokenFree_Basicp2Controller {
|
||||
@Autowired
|
||||
private Basicp2Service Service;
|
||||
|
||||
@Value("${projectPath}")
|
||||
private String projectPath;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@PostMapping("/Basicp2")
|
||||
public Basicp2 Savedata(@RequestBody Basicp2 data) {
|
||||
Basicp2 save = Service.Savedata(data) ;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
System.out.println("data saved..." + save);
|
||||
|
||||
return save;
|
||||
}
|
||||
@PutMapping("/Basicp2/{id}")
|
||||
public Basicp2 update(@RequestBody Basicp2 data,@PathVariable Integer id ) {
|
||||
Basicp2 update = Service.update(data,id);
|
||||
System.out.println("data update..." + update);
|
||||
return update;
|
||||
}
|
||||
// get all with pagination
|
||||
@GetMapping("/Basicp2/getall/page")
|
||||
public Page<Basicp2> getall(@RequestParam(value = "page", required = false) Integer page,
|
||||
@RequestParam(value = "size", required = false) Integer size) {
|
||||
Pageable paging = PageRequest.of(page, size);
|
||||
Page<Basicp2> get = Service.getAllWithPagination(paging);
|
||||
|
||||
return get;
|
||||
|
||||
}
|
||||
@GetMapping("/Basicp2")
|
||||
public List<Basicp2> getdetails() {
|
||||
List<Basicp2> get = Service.getdetails();
|
||||
return get;
|
||||
}
|
||||
// get all without authentication
|
||||
|
||||
@GetMapping("/token/Basicp2")
|
||||
public List<Basicp2> getallwioutsec() {
|
||||
List<Basicp2> get = Service.getdetails();
|
||||
return get;
|
||||
}
|
||||
@GetMapping("/Basicp2/{id}")
|
||||
public Basicp2 getdetailsbyId(@PathVariable Integer id ) {
|
||||
Basicp2 get = Service.getdetailsbyId(id);
|
||||
return get;
|
||||
}
|
||||
@DeleteMapping("/Basicp2/{id}")
|
||||
public ResponseEntity<?> delete_by_id(@PathVariable Integer id ) {
|
||||
Service.delete_by_id(id);
|
||||
return new ResponseEntity<>(new EntityResponse("Deleted"), HttpStatus.OK);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
@ -0,0 +1,163 @@
|
||||
package com.realnet.angulardatatype.Controllers;
|
||||
import java.util.List;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.web.bind.annotation.*;
|
||||
import org.springframework.web.multipart.MultipartFile;
|
||||
import com.fasterxml.jackson.core.JsonProcessingException;
|
||||
import org.springframework.web.bind.annotation.CrossOrigin;
|
||||
import com.fasterxml.jackson.databind.JsonMappingException;
|
||||
import com.realnet.config.EmailService;
|
||||
import com.realnet.users.entity1.AppUser;
|
||||
import com.realnet.users.service1.AppUserServiceImpl;
|
||||
import com.fasterxml.jackson.databind.ObjectMapper;
|
||||
import org.springframework.data.domain.*;
|
||||
import com.realnet.fnd.response.EntityResponse;
|
||||
import org.springframework.http.*;
|
||||
import org.springframework.beans.factory.annotation.*;
|
||||
import com.realnet.angulardatatype.Entity.Basicp3;
|
||||
import com.realnet.angulardatatype.Services.Basicp3Service ;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@RequestMapping(value = "/token/Basicp3")
|
||||
@CrossOrigin("*")
|
||||
@RestController
|
||||
public class tokenFree_Basicp3Controller {
|
||||
@Autowired
|
||||
private Basicp3Service Service;
|
||||
|
||||
@Value("${projectPath}")
|
||||
private String projectPath;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@PostMapping("/Basicp3")
|
||||
public Basicp3 Savedata(@RequestBody Basicp3 data) {
|
||||
Basicp3 save = Service.Savedata(data) ;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
System.out.println("data saved..." + save);
|
||||
|
||||
return save;
|
||||
}
|
||||
@PutMapping("/Basicp3/{id}")
|
||||
public Basicp3 update(@RequestBody Basicp3 data,@PathVariable Integer id ) {
|
||||
Basicp3 update = Service.update(data,id);
|
||||
System.out.println("data update..." + update);
|
||||
return update;
|
||||
}
|
||||
// get all with pagination
|
||||
@GetMapping("/Basicp3/getall/page")
|
||||
public Page<Basicp3> getall(@RequestParam(value = "page", required = false) Integer page,
|
||||
@RequestParam(value = "size", required = false) Integer size) {
|
||||
Pageable paging = PageRequest.of(page, size);
|
||||
Page<Basicp3> get = Service.getAllWithPagination(paging);
|
||||
|
||||
return get;
|
||||
|
||||
}
|
||||
@GetMapping("/Basicp3")
|
||||
public List<Basicp3> getdetails() {
|
||||
List<Basicp3> get = Service.getdetails();
|
||||
return get;
|
||||
}
|
||||
// get all without authentication
|
||||
|
||||
@GetMapping("/token/Basicp3")
|
||||
public List<Basicp3> getallwioutsec() {
|
||||
List<Basicp3> get = Service.getdetails();
|
||||
return get;
|
||||
}
|
||||
@GetMapping("/Basicp3/{id}")
|
||||
public Basicp3 getdetailsbyId(@PathVariable Integer id ) {
|
||||
Basicp3 get = Service.getdetailsbyId(id);
|
||||
return get;
|
||||
}
|
||||
@DeleteMapping("/Basicp3/{id}")
|
||||
public ResponseEntity<?> delete_by_id(@PathVariable Integer id ) {
|
||||
Service.delete_by_id(id);
|
||||
return new ResponseEntity<>(new EntityResponse("Deleted"), HttpStatus.OK);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
@ -0,0 +1,77 @@
|
||||
package com.realnet.angulardatatype.Entity;
|
||||
import lombok.*;
|
||||
import com.realnet.WhoColumn.Entity.Extension;
|
||||
import javax.persistence.*;
|
||||
import java.time.LocalDateTime;
|
||||
import java.util.*;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@Entity
|
||||
@Data
|
||||
public class Basicp1 extends Extension {
|
||||
/**
|
||||
*
|
||||
*/
|
||||
private static final long serialVersionUID = 1L;
|
||||
|
||||
@Id
|
||||
@GeneratedValue(strategy = GenerationType.IDENTITY)
|
||||
private Integer id;
|
||||
|
||||
private String name;
|
||||
|
||||
private String name2;
|
||||
|
||||
private int number1;
|
||||
|
||||
private int number2;
|
||||
|
||||
private String phone_number;
|
||||
|
||||
private String phone_number2;
|
||||
|
||||
|
||||
@Column(length = 2000)
|
||||
private String paragraph_field;
|
||||
|
||||
|
||||
@Column(length = 2000)
|
||||
private String paragraph_field2;
|
||||
|
||||
private String password_field;
|
||||
@Transient
|
||||
private String confirmpassword_field;
|
||||
|
||||
@Column(length = 2000)
|
||||
private String textarea;
|
||||
|
||||
@Column(length = 2000)
|
||||
private String textarea_field;
|
||||
|
||||
@Column(length = 2000)
|
||||
private String textarea_field2;
|
||||
|
||||
|
||||
}
|
||||
@ -0,0 +1,59 @@
|
||||
package com.realnet.angulardatatype.Entity;
|
||||
import lombok.*;
|
||||
import com.realnet.WhoColumn.Entity.Extension;
|
||||
import javax.persistence.*;
|
||||
import java.time.LocalDateTime;
|
||||
import java.util.*;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@Entity
|
||||
@Data
|
||||
public class Basicp2 extends Extension {
|
||||
/**
|
||||
*
|
||||
*/
|
||||
private static final long serialVersionUID = 1L;
|
||||
|
||||
@Id
|
||||
@GeneratedValue(strategy = GenerationType.IDENTITY)
|
||||
private Integer id;
|
||||
|
||||
@Column(length = 2000)
|
||||
private String about;
|
||||
|
||||
@Column(length = 2000)
|
||||
private String textarea2;
|
||||
|
||||
private String date_field;
|
||||
|
||||
private String date_field2;
|
||||
|
||||
private String datetime_field;
|
||||
|
||||
private String datetime_field2;
|
||||
|
||||
private String email_field;
|
||||
|
||||
private String email_field2;
|
||||
|
||||
private Long user_id;
|
||||
private String user_name;
|
||||
|
||||
|
||||
}
|
||||
@ -0,0 +1,64 @@
|
||||
package com.realnet.angulardatatype.Entity;
|
||||
import lombok.*;
|
||||
import com.realnet.WhoColumn.Entity.Extension;
|
||||
import javax.persistence.*;
|
||||
import java.time.LocalDateTime;
|
||||
import java.util.*;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@Entity
|
||||
@Data
|
||||
public class Basicp3 extends Extension {
|
||||
/**
|
||||
*
|
||||
*/
|
||||
private static final long serialVersionUID = 1L;
|
||||
|
||||
@Id
|
||||
@GeneratedValue(strategy = GenerationType.IDENTITY)
|
||||
private Integer id;
|
||||
|
||||
private Boolean toggle_switch;
|
||||
|
||||
private Boolean toggle_switch2;
|
||||
|
||||
private String url_field;
|
||||
|
||||
private String url_field2;
|
||||
|
||||
private double decimal_field;
|
||||
|
||||
private double decimal_field2;
|
||||
|
||||
private int percentage_field;
|
||||
|
||||
private int percentage_field2;
|
||||
|
||||
private String documentsequenc;
|
||||
|
||||
private String recaptcha;
|
||||
|
||||
private String recaptcha2;
|
||||
|
||||
|
||||
}
|
||||
@ -0,0 +1,48 @@
|
||||
package com.realnet.angulardatatype.Repository;
|
||||
|
||||
|
||||
import org.springframework.data.domain.Page;
|
||||
import org.springframework.data.domain.Pageable;
|
||||
import org.springframework.data.jpa.repository.JpaRepository;
|
||||
import org.springframework.data.jpa.repository.Query;
|
||||
|
||||
import org.springframework.stereotype.Repository;
|
||||
import java.util.*;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
import com.realnet.angulardatatype.Entity.Basicp1;
|
||||
|
||||
@Repository
|
||||
public interface Basicp1Repository extends JpaRepository<Basicp1, Integer> {
|
||||
|
||||
@Query(value = "select * from basicp1 where created_by=?1", nativeQuery = true)
|
||||
List<Basicp1> findAll(Long creayedBy);
|
||||
|
||||
@Query(value = "select * from basicp1 where created_by=?1", nativeQuery = true)
|
||||
Page<Basicp1> findAll( Long creayedBy,Pageable page);
|
||||
}
|
||||
@ -0,0 +1,42 @@
|
||||
package com.realnet.angulardatatype.Repository;
|
||||
|
||||
|
||||
import org.springframework.data.domain.Page;
|
||||
import org.springframework.data.domain.Pageable;
|
||||
import org.springframework.data.jpa.repository.JpaRepository;
|
||||
import org.springframework.data.jpa.repository.Query;
|
||||
|
||||
import org.springframework.stereotype.Repository;
|
||||
import java.util.*;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
import com.realnet.angulardatatype.Entity.Basicp2;
|
||||
|
||||
@Repository
|
||||
public interface Basicp2Repository extends JpaRepository<Basicp2, Integer> {
|
||||
|
||||
@Query(value = "select * from basicp2 where created_by=?1", nativeQuery = true)
|
||||
List<Basicp2> findAll(Long creayedBy);
|
||||
|
||||
@Query(value = "select * from basicp2 where created_by=?1", nativeQuery = true)
|
||||
Page<Basicp2> findAll( Long creayedBy,Pageable page);
|
||||
}
|
||||
@ -0,0 +1,46 @@
|
||||
package com.realnet.angulardatatype.Repository;
|
||||
|
||||
|
||||
import org.springframework.data.domain.Page;
|
||||
import org.springframework.data.domain.Pageable;
|
||||
import org.springframework.data.jpa.repository.JpaRepository;
|
||||
import org.springframework.data.jpa.repository.Query;
|
||||
|
||||
import org.springframework.stereotype.Repository;
|
||||
import java.util.*;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
import com.realnet.angulardatatype.Entity.Basicp3;
|
||||
|
||||
@Repository
|
||||
public interface Basicp3Repository extends JpaRepository<Basicp3, Integer> {
|
||||
|
||||
@Query(value = "select * from basicp3 where created_by=?1", nativeQuery = true)
|
||||
List<Basicp3> findAll(Long creayedBy);
|
||||
|
||||
@Query(value = "select * from basicp3 where created_by=?1", nativeQuery = true)
|
||||
Page<Basicp3> findAll( Long creayedBy,Pageable page);
|
||||
}
|
||||
@ -0,0 +1,183 @@
|
||||
package com.realnet.angulardatatype.Services;
|
||||
import com.realnet.angulardatatype.Repository.Basicp1Repository;
|
||||
import com.realnet.angulardatatype.Entity.Basicp1
|
||||
;import java.util.*;
|
||||
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import com.realnet.SequenceGenerator.Service.SequenceService;
|
||||
import org.springframework.data.domain.Page;
|
||||
import com.realnet.realm.Entity.Realm;
|
||||
import com.realnet.realm.Services.RealmService;
|
||||
import org.springframework.data.domain.Pageable;
|
||||
import org.springframework.http.*;
|
||||
import com.realnet.users.service1.AppUserServiceImpl;
|
||||
import com.realnet.users.entity1.AppUser;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
import org.springframework.stereotype.Service;
|
||||
|
||||
@Service
|
||||
public class Basicp1Service {
|
||||
@Autowired
|
||||
private Basicp1Repository Repository;
|
||||
@Autowired
|
||||
private AppUserServiceImpl userService;
|
||||
@Autowired
|
||||
private RealmService realmService;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
public Basicp1 Savedata(Basicp1 data) {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
data.setUpdatedBy(getUser().getUserId());
|
||||
data.setCreatedBy(getUser().getUserId());
|
||||
data.setAccountId(getUser().getAccount().getAccount_id());
|
||||
Basicp1 save = Repository.save(data);
|
||||
return save;
|
||||
}
|
||||
|
||||
|
||||
// get all with pagination
|
||||
public Page<Basicp1> getAllWithPagination(Pageable page) {
|
||||
return Repository.findAll( getUser().getUserId(),page);
|
||||
}
|
||||
public List<Basicp1> getdetails() {
|
||||
List<Realm> realm = realmService.findByUserId(getUser().getUserId());
|
||||
List<Basicp1> all = Repository.findAll(getUser().getUserId());
|
||||
|
||||
return all ; }
|
||||
|
||||
|
||||
public Basicp1 getdetailsbyId(Integer id) {
|
||||
return Repository.findById(id).get();
|
||||
}
|
||||
|
||||
|
||||
public void delete_by_id(Integer id) {
|
||||
Repository.deleteById(id);
|
||||
}
|
||||
|
||||
|
||||
public Basicp1 update(Basicp1 data,Integer id) {
|
||||
Basicp1 old = Repository.findById(id).get();
|
||||
old.setName(data.getName());
|
||||
|
||||
old.setName2(data.getName2());
|
||||
|
||||
old.setNumber1(data.getNumber1());
|
||||
|
||||
old.setNumber2(data.getNumber2());
|
||||
|
||||
old.setPhone_number(data.getPhone_number());
|
||||
|
||||
old.setPhone_number2(data.getPhone_number2());
|
||||
|
||||
old.setParagraph_field(data.getParagraph_field());
|
||||
|
||||
old.setParagraph_field2(data.getParagraph_field2());
|
||||
|
||||
old.setPassword_field(data.getPassword_field());
|
||||
|
||||
old.setTextarea(data.getTextarea());
|
||||
|
||||
old.setTextarea_field(data.getTextarea_field());
|
||||
|
||||
old.setTextarea_field2(data.getTextarea_field2());
|
||||
|
||||
final Basicp1 test = Repository.save(old);
|
||||
data.setUpdatedBy(getUser().getUserId());
|
||||
return test;}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
public AppUser getUser() {
|
||||
AppUser user = userService.getLoggedInUser();
|
||||
return user;
|
||||
|
||||
}}
|
||||
@ -0,0 +1,154 @@
|
||||
package com.realnet.angulardatatype.Services;
|
||||
import com.realnet.angulardatatype.Repository.Basicp2Repository;
|
||||
import com.realnet.angulardatatype.Entity.Basicp2
|
||||
;import java.util.*;
|
||||
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import com.realnet.SequenceGenerator.Service.SequenceService;
|
||||
import org.springframework.data.domain.Page;
|
||||
import com.realnet.realm.Entity.Realm;
|
||||
import com.realnet.realm.Services.RealmService;
|
||||
import org.springframework.data.domain.Pageable;
|
||||
import org.springframework.http.*;
|
||||
import com.realnet.users.service1.AppUserServiceImpl;
|
||||
import com.realnet.users.entity1.AppUser;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
import org.springframework.stereotype.Service;
|
||||
|
||||
@Service
|
||||
public class Basicp2Service {
|
||||
@Autowired
|
||||
private Basicp2Repository Repository;
|
||||
@Autowired
|
||||
private AppUserServiceImpl userService;
|
||||
@Autowired
|
||||
private RealmService realmService;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
public Basicp2 Savedata(Basicp2 data) {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
data.setUser_id(getUser().getUserId());
|
||||
data.setUser_name(getUser().getFullName());
|
||||
|
||||
data.setUpdatedBy(getUser().getUserId());
|
||||
data.setCreatedBy(getUser().getUserId());
|
||||
data.setAccountId(getUser().getAccount().getAccount_id());
|
||||
Basicp2 save = Repository.save(data);
|
||||
return save;
|
||||
}
|
||||
|
||||
|
||||
// get all with pagination
|
||||
public Page<Basicp2> getAllWithPagination(Pageable page) {
|
||||
return Repository.findAll( getUser().getUserId(),page);
|
||||
}
|
||||
public List<Basicp2> getdetails() {
|
||||
List<Realm> realm = realmService.findByUserId(getUser().getUserId());
|
||||
List<Basicp2> all = Repository.findAll(getUser().getUserId());
|
||||
|
||||
return all ; }
|
||||
|
||||
|
||||
public Basicp2 getdetailsbyId(Integer id) {
|
||||
return Repository.findById(id).get();
|
||||
}
|
||||
|
||||
|
||||
public void delete_by_id(Integer id) {
|
||||
Repository.deleteById(id);
|
||||
}
|
||||
|
||||
|
||||
public Basicp2 update(Basicp2 data,Integer id) {
|
||||
Basicp2 old = Repository.findById(id).get();
|
||||
old.setAbout(data.getAbout());
|
||||
|
||||
old.setTextarea2(data.getTextarea2());
|
||||
|
||||
old.setDate_field(data.getDate_field());
|
||||
|
||||
old.setDate_field2(data.getDate_field2());
|
||||
|
||||
old.setDatetime_field(data.getDatetime_field());
|
||||
|
||||
old.setDatetime_field2(data.getDatetime_field2());
|
||||
|
||||
old.setEmail_field(data.getEmail_field());
|
||||
|
||||
old.setEmail_field2(data.getEmail_field2());
|
||||
|
||||
|
||||
|
||||
final Basicp2 test = Repository.save(old);
|
||||
data.setUpdatedBy(getUser().getUserId());
|
||||
return test;}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
public AppUser getUser() {
|
||||
AppUser user = userService.getLoggedInUser();
|
||||
return user;
|
||||
|
||||
}}
|
||||
@ -0,0 +1,174 @@
|
||||
package com.realnet.angulardatatype.Services;
|
||||
import com.realnet.angulardatatype.Repository.Basicp3Repository;
|
||||
import com.realnet.angulardatatype.Entity.Basicp3
|
||||
;import java.util.*;
|
||||
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import com.realnet.SequenceGenerator.Service.SequenceService;
|
||||
import org.springframework.data.domain.Page;
|
||||
import com.realnet.realm.Entity.Realm;
|
||||
import com.realnet.realm.Services.RealmService;
|
||||
import org.springframework.data.domain.Pageable;
|
||||
import org.springframework.http.*;
|
||||
import com.realnet.users.service1.AppUserServiceImpl;
|
||||
import com.realnet.users.entity1.AppUser;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
import org.springframework.stereotype.Service;
|
||||
|
||||
@Service
|
||||
public class Basicp3Service {
|
||||
@Autowired
|
||||
private Basicp3Repository Repository;
|
||||
@Autowired
|
||||
private AppUserServiceImpl userService;
|
||||
@Autowired
|
||||
private RealmService realmService;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@Autowired
|
||||
private SequenceService documentsequencsequenceService;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
public Basicp3 Savedata(Basicp3 data) {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
data.setDocumentsequenc (documentsequencsequenceService.GenerateSequence("ff"));
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
data.setUpdatedBy(getUser().getUserId());
|
||||
data.setCreatedBy(getUser().getUserId());
|
||||
data.setAccountId(getUser().getAccount().getAccount_id());
|
||||
Basicp3 save = Repository.save(data);
|
||||
return save;
|
||||
}
|
||||
|
||||
|
||||
// get all with pagination
|
||||
public Page<Basicp3> getAllWithPagination(Pageable page) {
|
||||
return Repository.findAll( getUser().getUserId(),page);
|
||||
}
|
||||
public List<Basicp3> getdetails() {
|
||||
List<Realm> realm = realmService.findByUserId(getUser().getUserId());
|
||||
List<Basicp3> all = Repository.findAll(getUser().getUserId());
|
||||
|
||||
return all ; }
|
||||
|
||||
|
||||
public Basicp3 getdetailsbyId(Integer id) {
|
||||
return Repository.findById(id).get();
|
||||
}
|
||||
|
||||
|
||||
public void delete_by_id(Integer id) {
|
||||
Repository.deleteById(id);
|
||||
}
|
||||
|
||||
|
||||
public Basicp3 update(Basicp3 data,Integer id) {
|
||||
Basicp3 old = Repository.findById(id).get();
|
||||
old.setToggle_switch (data.getToggle_switch());
|
||||
|
||||
old.setToggle_switch2 (data.getToggle_switch2());
|
||||
|
||||
old.setUrl_field(data.getUrl_field());
|
||||
|
||||
old.setUrl_field2(data.getUrl_field2());
|
||||
|
||||
old.setDecimal_field(data.getDecimal_field());
|
||||
|
||||
old.setDecimal_field2(data.getDecimal_field2());
|
||||
|
||||
old.setPercentage_field(data.getPercentage_field());
|
||||
|
||||
old.setPercentage_field2(data.getPercentage_field2());
|
||||
|
||||
old.setDocumentsequenc(data.getDocumentsequenc());
|
||||
|
||||
old.setRecaptcha(data.getRecaptcha());
|
||||
|
||||
old.setRecaptcha2(data.getRecaptcha2());
|
||||
|
||||
final Basicp3 test = Repository.save(old);
|
||||
data.setUpdatedBy(getUser().getUserId());
|
||||
return test;}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
public AppUser getUser() {
|
||||
AppUser user = userService.getLoggedInUser();
|
||||
return user;
|
||||
|
||||
}}
|
||||
Loading…
x
Reference in New Issue
Block a user