This commit is contained in:
string 2025-05-02 09:19:32 +05:30
parent 7bb707f359
commit 0acbf9b008
4 changed files with 396 additions and 286 deletions

View File

@ -42,32 +42,39 @@
</ng-container></clr-dg-column>
<clr-dg-column [clrDgField]="'Technology'"> <ng-container *clrDgHideableColumn="{hidden: false}">
Technolgy Stack
</ng-container></clr-dg-column>
<clr-dg-column [clrDgField]="'Type Render'"> <ng-container *clrDgHideableColumn="{hidden: false}"> Type Render
<clr-dg-column [clrDgField]="' Json'"> <ng-container *clrDgHideableColumn="{hidden: false}"> htmljson
</ng-container></clr-dg-column>
<clr-dg-column [clrDgField]="' Css'"> <ng-container *clrDgHideableColumn="{hidden: false}"> css
<clr-dg-column [clrDgField]="'Json'"> <ng-container *clrDgHideableColumn="{hidden: false}"> htmljson
</ng-container></clr-dg-column>
<clr-dg-column [clrDgField]="' Java Code'"> <ng-container *clrDgHideableColumn="{hidden: false}"> javacode
<clr-dg-column [clrDgField]="'Css'"> <ng-container *clrDgHideableColumn="{hidden: false}"> css
</ng-container></clr-dg-column>
<clr-dg-column [clrDgField]="' Active'"> <ng-container *clrDgHideableColumn="{hidden: false}"> Active
<clr-dg-column [clrDgField]="'Java Code'"> <ng-container *clrDgHideableColumn="{hidden: false}"> javacode
</ng-container></clr-dg-column>
<clr-dg-column [clrDgField]="'Active'"> <ng-container *clrDgHideableColumn="{hidden: false}"> Active
</ng-container></clr-dg-column>
<!-- who column -->
<clr-dg-column> <ng-container *clrDgHideableColumn="{hidden: false}">
<clr-icon shape="bars"></clr-icon> Action
</ng-container></clr-dg-column>
<!-- end -->
<clr-dg-row *clrDgItems="let user of product" [clrDgItem]="user">
<clr-dg-row *clrDgItems="let user of product?.slice()?.reverse()" [clrDgItem]="user">
<clr-dg-cell>{{user. name }}</clr-dg-cell>
<clr-dg-cell>{{user.name }}</clr-dg-cell>
<clr-dg-cell (click)="goToReplaceStringdescription (user.description)"
@ -78,6 +85,10 @@
<clr-dg-cell>{{user.uitype }}</clr-dg-cell>
<clr-dg-cell>{{user.techstack }}</clr-dg-cell>
<clr-dg-cell>{{user.typerender }}</clr-dg-cell>
@ -102,18 +113,25 @@
<!-- 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>
<div style="display: flex; align-items: center; gap: 10px;">
<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>
<!-- View HTML Button -->
<button class="btn btn-sm btn-outline" (click)="openHtmlPreview(user.id)">
<clr-icon shape="eye"></clr-icon>
</button>
</div>
</clr-dg-cell>
<!-- who colmn -->
@ -331,6 +349,15 @@
<input class="clr-input" type="text" [(ngModel)]="rowSelected.uitype" name="uitype" />
</div>
<div class="clr-col-sm-12">
<label>Type Render</label>
<input class="clr-input" type="text" [(ngModel)]="rowSelected.typerender" name="typerender" />
</div>
<div class="clr-col-sm-12">
<label>Technolgy Stack</label>
<input class="clr-input" type="text" [(ngModel)]="rowSelected.techstack" name="techstack" />
</div>
<div class="clr-col-sm-12">
<label> Json</label>
@ -400,7 +427,7 @@
</clr-modal>
<!-- ADD FORM ..... -->
<clr-modal [(clrModalOpen)]="modalAdd" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
<h3 class="modal-title">Add DesignLbrary
<h3 class="modal-title">Add Design Library
@ -440,6 +467,16 @@
<input class="clr-input" type="text" formControlName="uitype" />
</div>
<div class="clr-col-sm-12">
<label> Type Render</label>
<input class="clr-input" type="text" formControlName="typerender" />
</div>
<div class="clr-col-sm-12">
<label> Technolgy Stack</label>
<input class="clr-input" type="text" formControlName="techstack" />
</div>
<div class="clr-col-sm-12">
<label> Active</label>
<input type="checkbox" formControlName="active" clrToggle />
@ -464,11 +501,6 @@
</div>
<!-- form code start -->
<div *ngIf="checkFormCode">
<h4 style="font-weight: 300;display: inline;">Extension</h4>
@ -503,6 +535,17 @@
<clr-modal [(clrModalOpen)]="modalHtmlPreview" [clrModalSize]="'xl'" [clrModalStaticBackdrop]="true">
<h3 class="modal-title">HTML Preview</h3>
<div class="modal-body">
<div [innerHTML]="htmlContent" class="html-preview-container"></div>
</div>
<div class="modal-footer">
<button class="btn btn-outline" (click)="modalHtmlPreview = false">Close</button>
</div>
</clr-modal>
<!-- htmlpopup -->

View File

@ -1,27 +1,32 @@
import { Component, OnInit } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { AlertService } from 'src/app/services/alert.service';
import { Design_lbraryservice} from './Design_lbrary.service';
import { Design_lbraryservice } from './Design_lbrary.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 { Design_lbrarycardvariable } from './Design_lbrary_cardvariable';
import { UserInfoService } from 'src/app/services/user-info.service';
declare var JsBarcode: any;
import { DashboardContentModel2 } from 'src/app/models/builder/dashboard';
import { Design_lbrarycardvariable } from './Design_lbrary_cardvariable';
import { UserInfoService } from 'src/app/services/user-info.service';
import { SiteTreeservice } from '../SiteBuilderGrid/SiteTree.service';
import { COMMON_CSS } from '../WireframesUi/common-css';
declare var JsBarcode: any;
@Component({
selector: 'app-Design_lbrary',
templateUrl: './Design_lbrary.component.html',
styleUrls: ['./Design_lbrary.component.scss']
})
export class Design_lbraryComponent implements OnInit {
commonCss: string = COMMON_CSS;
cardButton = Design_lbrarycardvariable.cardButton;
cardmodeldata = Design_lbrarycardvariable.cardmodeldata;
public dashboardArray: DashboardContentModel2[];
isCardview = Design_lbrarycardvariable.cardButton;
cardmodal; changeView(){
this.isCardview = !this.isCardview;
cardmodal; changeView() {
this.isCardview = !this.isCardview;
}
beforeText(fieldtext: string): string { // Extract the text before the first '<'
beforeText(fieldtext: string): string { // Extract the text before the first '<'
const index = fieldtext.indexOf('<');
return index !== -1 ? fieldtext.substring(0, index) : fieldtext;
}
@ -33,63 +38,57 @@ export class Design_lbraryComponent implements OnInit {
const match = fieldtext.match(/<([^>]*)>/);
return match ? match[1] : ''; // Extract the text between '<' and '>'
}
userrole;
rowSelected :any= {};
modaldelete=false;
modalEdit=false;
modalAdd= false;
userrole;
rowSelected: any = {};
modaldelete = false;
modalEdit = false;
modalAdd = false;
public entryForm: FormGroup;
loading = false;
product;
modalOpenedforNewLine = false;
newLine:any;
additionalFieldsFromBackend: any[] = [];
newLine: any;
additionalFieldsFromBackend: any[] = [];
formcode = 'Design_lbrary_formCode'
tableName = 'Design_lbrary'; checkFormCode; selected: any[] = []; constructor(
tableName = 'Design_lbrary'; checkFormCode; selected: any[] = []; constructor(
private extensionService: ExtensionService,
private userInfoService:UserInfoService,
private mainService:Design_lbraryservice,
private userInfoService: UserInfoService,
private mainService: Design_lbraryservice,
private alertService: AlertService,
private toastr: ToastrService,
private _fb: FormBuilder,
private siteTreeService: SiteTreeservice,
) { }
// component button
// component button
ngOnInit(): void {
if(this.cardmodeldata !== ''){
this.cardmodal = JSON.parse(this.cardmodeldata);
this.dashboardArray = this.cardmodal.dashboard.slice();
console.log(this.dashboardArray)
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.userrole = this.userInfoService.getRoles();
this.getData();
this.entryForm = this._fb.group({
name : [null],
description : [null],
active : [false],
htmljson : [null],
css : [null],
javacode : [null],
}); // component_button200
// form code start
name: [null],
description: [null],
active: [false],
htmljson: [null],
css: [null],
templatetype:[null],
uitype:[null],
javacode: [null],
typerender: [null],
techstack: [null],
}); // component_button200
// form code start
this.extensionService.getJsonObjectsByFormCodeList(this.formcode).subscribe(data => {
console.log(data);
const jsonArray = data.map((str) => JSON.parse(str));
@ -109,94 +108,93 @@ javacode : [null],
}
});
console.log(this.entryForm.value);
// form code end
// form code end
}
error;
error;
getData() {
this.mainService.getAll().subscribe((data) => {
console.log(data);
this.product = data;
if(this.product.length==0){
this.error="No Data Available"
}
},(error) => {
if (this.product.length == 0) {
this.error = "No Data Available"
}
}, (error) => {
console.log(error);
if(error){
this.error="Server Error";
}
if (error) {
this.error = "Server Error";
}
});
}
onEdit(row) {
this.rowSelected = row;
this.rowSelected = row;
this.modalEdit = true;
}
onDelete(row) {
onDelete(row) {
this.rowSelected = row;
this.modaldelete=true;
this.modaldelete = true;
}
delete(id)
{
delete(id) {
this.modaldelete = false;
console.log("in delete "+id);
console.log("in delete " + id);
this.mainService.delete(id).subscribe(
(data) => {
console.log(data);
this.ngOnInit();
if (data) { this.toastr.success('Deleted successfully'); }
});
if (data) { this.toastr.success('Deleted successfully'); }
});
}
onUpdate(id) {
onUpdate(id) {
this.modalEdit = false;
//console.log("in update");
console.log("id " + id);
console.log(this.rowSelected);
@ -207,21 +205,21 @@ javacode : [null],
if (data || data.status >= 200 && data.status <= 299) {
this.toastr.success("Update Successfully");
}
setTimeout(() => {
this.ngOnInit();
}, 500);
setTimeout(() => {
this.ngOnInit();
}, 500);
}, (error) => {
console.log(error);
if (error.status >= 200 && error.status <= 299) {
@ -237,41 +235,41 @@ setTimeout(() => {
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) {
}
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);
setTimeout(() => {
this.ngOnInit();
}, 500);
}, (error) => {
console.log(error);
@ -290,59 +288,116 @@ setTimeout(() => {
}, 500);
}
goToAdd(row) {
this.modalAdd = true; this.submitted = false;
this.modalAdd = true; this.submitted = false;
}
submitted = false;
onSubmit() {
console.log(this.entryForm.value);
this.submitted = true;
if (this.entryForm.invalid) {
return;
}this.onCreate();
submitted = false;
onSubmit() {
console.log(this.entryForm.value);
this.submitted = true;
if (this.entryForm.invalid) {
return;
} this.onCreate();
}
rsModaldescription = false;
goToReplaceStringdescription(row) {
this.rowSelected = row; this.rsModaldescription = true;
}
rsModalhtmljson = false;
goToReplaceStringhtmljson(row) {
this.rowSelected = row; this.rsModalhtmljson = true;
}
rsModalcss = false;
goToReplaceStringcss(row) {
this.rowSelected = row; this.rsModalcss = true;
}
rsModaljavacode = false;
goToReplaceStringjavacode(row) {
this.rowSelected = row; this.rsModaljavacode = true;
}
// updateaction
public htmlContent: string = '';
public modalHtmlPreview: boolean = false;
// openHtmlPreview(id: number): void {
// console.log('preview html start..');
// this.siteTreeService.generateHtmlwithcss(id).subscribe((response: any) => {
// this.htmlContent = response.msg; // assuming { html: "<div>..</div>" }
// console.log('html code ..', this.htmlContent);
// this.modalHtmlPreview = true;
// }, error => {
// this.htmlContent = '<p style="color:red;">Error loading HTML.</p>';
// this.modalHtmlPreview = true;
// });
// }
openHtmlPreview(id: number): void {
console.log('preview html start..');
this.siteTreeService.generateHtmlwithcss(id).subscribe((response: any) => {
const bodyContent = response.msg || '<div>Empty</div>'; // fallback
const fullHtml = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Preview</title>
<style>
${COMMON_CSS}
</style>
</head>
<body>
${bodyContent}
</body>
</html>
`;
this.htmlContent = fullHtml;
console.log('html code ..', this.htmlContent);
this.modalHtmlPreview = true;
}, error => {
this.htmlContent = `
<!DOCTYPE html>
<html><head><style>${COMMON_CSS}</style></head>
<body><p style="color:red;">Error loading HTML.</p></body></html>
`;
this.modalHtmlPreview = true;
});
}
}
}
rsModaldescription = false;
goToReplaceStringdescription(row){
this.rowSelected = row; this.rsModaldescription =true; }
rsModalhtmljson = false;
goToReplaceStringhtmljson(row){
this.rowSelected = row; this.rsModalhtmljson =true; }
rsModalcss = false;
goToReplaceStringcss(row){
this.rowSelected = row; this.rsModalcss =true; }
rsModaljavacode = false;
goToReplaceStringjavacode(row){
this.rowSelected = row; this.rsModaljavacode =true; }
// updateaction
}

View File

@ -42,6 +42,11 @@ export class SiteTreeservice {
return this.http.get(_http);
}
getDesignLibrary(operationType: string, fieldtype: string): Observable<any> {
const _http = "Design_lbrary/Design_lbrary/unique?" + "operationType=" + operationType + "&fieldType=" + fieldtype;
return this.apiRequest.get(_http);
}
callLlm(data: any): Observable<any> {
return this.http.post(`${this.nodeURL}/chatMemory`, data);
}
@ -51,6 +56,10 @@ export class SiteTreeservice {
return this.apiRequest.post(`api/html/generate`, data);
}
generateHtmlwithcss(id: any): Observable<any> {
return this.apiRequest.get(`api/html/generate/html/id/` + id);
}
createHtmlPages(data: any, projId: number): Observable<any> {
return this.apiRequest.post(`sureops/deploy?projId=` + projId, data);
}

View File

@ -179,57 +179,60 @@ HTML Only. No CSS.
return new Promise((resolve) => {
const fieldType = sectionName.toLowerCase().replace(/section$/i, '').trim();
this.siteTreeService.getDlf(headerId, operationType, fieldType).subscribe({
this.siteTreeService.getDesignLibrary(operationType, fieldType).subscribe({
next: async (res) => {
try {
const jsonBlock = res?.javacode;
if (!jsonBlock) return resolve('{}');
const baseJson = typeof jsonBlock === 'string' ? JSON.parse(jsonBlock) : jsonBlock;
const baseJsonString = JSON.stringify(baseJson, null, 2);
const enhancedPrompt = `
🎯 Enhance the content of this section using the following context.
🧠 Instructions:
- You are given an existing JSON structure for a UI section.
- Your job is to update ONLY the content-related fields like "text", "title", "label", "description", and "placeholder".
- You must NOT change the structure, hierarchy, tags, keys, class names, or styling values.
- You must NOT add or remove any keys or elements.
- You must return ONLY the updated JSON structure in valid format.
📄 Page Prompt:
"${this.initialPrompt}"
📦 Section Name:
"${sectionName}"
📘 Section Description:
"${sectionDescription}"
📌 Existing JSON (modify this only):
${baseJsonString}
🚫 Do NOT include:
- Any explanation, commentary, or markdown
- Any prefix like "Here is the updated JSON"
- Any new elements that were not already present
Output Requirement:
Only return the updated JSON structure nothing else.
`;
const id = res?.id;
const hash = sha256(enhancedPrompt).toString();
// const jsonBlock = res?.javacode;
// if (!jsonBlock) return resolve('{}');
if (this.promptHashCache[hash]) {
return resolve(this.promptHashCache[hash]);
}
// const baseJson = typeof jsonBlock === 'string' ? JSON.parse(jsonBlock) : jsonBlock;
// const baseJsonString = JSON.stringify(baseJson, null, 2);
// const enhancedPrompt = `
// 🎯 Enhance the content of this section using the following context.
// 🧠 Instructions:
// - You are given an existing JSON structure for a UI section.
// - Your job is to update ONLY the content-related fields like "text", "title", "label", "description", and "placeholder".
// - You must NOT change the structure, hierarchy, tags, keys, class names, or styling values.
// - You must NOT add or remove any keys or elements.
// - You must return ONLY the updated JSON structure in valid format.
// 📄 Page Prompt:
// "${this.initialPrompt}"
// 📦 Section Name:
// "${sectionName}"
// 📘 Section Description:
// "${sectionDescription}"
// 📌 Existing JSON (modify this only):
// ${baseJsonString}
// 🚫 Do NOT include:
// - Any explanation, commentary, or markdown
// - Any prefix like "Here is the updated JSON"
// - Any new elements that were not already present
// ✅ Output Requirement:
// Only return the updated JSON structure — nothing else.
// `;
// const hash = sha256(enhancedPrompt).toString();
// if (this.promptHashCache[hash]) {
// return resolve(this.promptHashCache[hash]);
// }
// const enhanced = await this.callLlm(enhancedPrompt);
// this.promptHashCache[hash] = enhanced;
resolve(baseJsonString);
resolve(id);
} catch (err) {
console.error('❌ JSON parse error:', err);
resolve('{}');