Extension
@@ -503,6 +535,17 @@
+
+ HTML Preview
+
+
+
+
+
\ No newline at end of file
diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/Design_lbrary/Design_lbrary.component.ts b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/Design_lbrary/Design_lbrary.component.ts
index 35f2100..4f6d789 100644
--- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/Design_lbrary/Design_lbrary.component.ts
+++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/Design_lbrary/Design_lbrary.component.ts
@@ -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: "
..
" }
+ // console.log('html code ..', this.htmlContent);
+
+ // this.modalHtmlPreview = true;
+ // }, error => {
+ // this.htmlContent = '
Error loading HTML.
';
+ // this.modalHtmlPreview = true;
+ // });
+ // }
+
+ openHtmlPreview(id: number): void {
+ console.log('preview html start..');
+
+ this.siteTreeService.generateHtmlwithcss(id).subscribe((response: any) => {
+ const bodyContent = response.msg || '
Empty
'; // fallback
+ const fullHtml = `
+
+
+
+
+
+
HTML Preview
+
+
+
+ ${bodyContent}
+
+
+ `;
+
+ this.htmlContent = fullHtml;
+ console.log('html code ..', this.htmlContent);
+ this.modalHtmlPreview = true;
+ }, error => {
+ this.htmlContent = `
+
+
+
Error loading 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
-}
-
-
-
-
-
-
-
-
-
-
-
diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/SiteBuilderGrid/SiteTree.service.ts b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/SiteBuilderGrid/SiteTree.service.ts
index 287877f..89e353e 100644
--- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/SiteBuilderGrid/SiteTree.service.ts
+++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/SiteBuilderGrid/SiteTree.service.ts
@@ -42,6 +42,11 @@ export class SiteTreeservice {
return this.http.get(_http);
}
+ getDesignLibrary(operationType: string, fieldtype: string): Observable
{
+ const _http = "Design_lbrary/Design_lbrary/unique?" + "operationType=" + operationType + "&fieldType=" + fieldtype;
+ return this.apiRequest.get(_http);
+ }
+
callLlm(data: any): Observable {
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 {
+ return this.apiRequest.get(`api/html/generate/html/id/` + id);
+ }
+
createHtmlPages(data: any, projId: number): Observable {
return this.apiRequest.post(`sureops/deploy?projId=` + projId, data);
}
diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.ts b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.ts
index 6ff3f16..3aa48bb 100644
--- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.ts
+++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.ts
@@ -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('{}');