From 0acbf9b008eb14e3ea33eaaad47435f61b0462c7 Mon Sep 17 00:00:00 2001 From: Gaurav Kumar Date: Fri, 2 May 2025 09:19:32 +0530 Subject: [PATCH] dlf --- .../Design_lbrary.component.html | 95 +++- .../Design_lbrary/Design_lbrary.component.ts | 491 ++++++++++-------- .../SiteBuilderGrid/SiteTree.service.ts | 9 + .../wireframe-renderer.component.ts | 87 ++-- 4 files changed, 396 insertions(+), 286 deletions(-) diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/Design_lbrary/Design_lbrary.component.html b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/Design_lbrary/Design_lbrary.component.html index b5fd255..1e3c430 100644 --- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/Design_lbrary/Design_lbrary.component.html +++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/Design_lbrary/Design_lbrary.component.html @@ -42,32 +42,39 @@ + + Technolgy Stack + + Type Render - - - htmljson - css + htmljson - javacode + css - Active + + javacode + + + Active Action + + - + - {{user. name }} + {{user.name }} {{user.uitype }} + {{user.techstack }} + {{user.typerender }} + + @@ -102,18 +113,25 @@ - - - -
Who Column
-
Account ID: {{user.accountId}}
-
Created At: {{user.createdAt| date}}
-
Created By: {{user.createdBy}}
-
Updated At: {{user.updatedAt | date}}
-
Updated By: {{user.updatedBy}}
- - +
+ + + + +
Who Column
+
Account ID: {{user.accountId}}
+
Created At: {{user.createdAt| date}}
+
Created By: {{user.createdBy}}
+
Updated At: {{user.updatedAt | date}}
+
Updated By: {{user.updatedBy}}
+ + + + +
@@ -331,6 +349,15 @@ +
+ + +
+
+ + +
+
@@ -400,7 +427,7 @@ -

Add DesignLbrary +

Add Design Library @@ -440,6 +467,16 @@

+
+ + +
+ +
+ + +
+
@@ -464,11 +501,6 @@
- - - - -

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('{}');