dlf

visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/Design_lbrary/Design_lbrary.component.html

@@ -42,7 +42,12 @@
         </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
 
+        </ng-container></clr-dg-column>
 
 
       <clr-dg-column [clrDgField]="'Json'"> <ng-container *clrDgHideableColumn="{hidden: false}"> htmljson
@@ -63,9 +68,11 @@
       <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>
 
@@ -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,6 +113,8 @@
 
         <!-- who column -->
         <clr-dg-cell>
+          <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>
@@ -114,6 +127,11 @@
                 <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 -->

visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/Design_lbrary/Design_lbrary.component.ts

@@ -7,6 +7,8 @@ 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';
+import { SiteTreeservice } from '../SiteBuilderGrid/SiteTree.service';
+import { COMMON_CSS } from '../WireframesUi/common-css';
 declare var JsBarcode: any;
 @Component({
   selector: 'app-Design_lbrary',
@@ -14,6 +16,9 @@ declare var JsBarcode: any;
   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[];
@@ -52,6 +57,8 @@ private userInfoService:UserInfoService,
     private alertService: AlertService,
     private toastr: ToastrService,
     private _fb: FormBuilder,
+    private siteTreeService: SiteTreeservice,
+
   ) { }
   // component button 
   ngOnInit(): void {
@@ -72,19 +79,11 @@ active : [false],
       htmljson: [null],
 
       css: [null],
-
+      templatetype:[null],
+      uitype:[null],
       javacode: [null],
-
+      typerender: [null],
-
+      techstack: [null],
- 
-
-
-
-
-
-
-
-
 
 
 
@@ -172,8 +171,7 @@ javacode : [null],
     this.rowSelected = row;
     this.modaldelete = true;
   }
-  delete(id)
+  delete(id) {
-  {
     this.modaldelete = false;
     console.log("in delete  " + id);
     this.mainService.delete(id).subscribe(
@@ -317,23 +315,80 @@ onSubmit() {
 
   rsModaldescription = false;
   goToReplaceStringdescription(row) {
-this.rowSelected = row;     this.rsModaldescription  =true;   }
+    this.rowSelected = row; this.rsModaldescription = true;
+  }
 
 
 
   rsModalhtmljson = false;
   goToReplaceStringhtmljson(row) {
-this.rowSelected = row;     this.rsModalhtmljson  =true;   }
+    this.rowSelected = row; this.rsModalhtmljson = true;
+  }
 
   rsModalcss = false;
   goToReplaceStringcss(row) {
-this.rowSelected = row;     this.rsModalcss  =true;   }
+    this.rowSelected = row; this.rsModalcss = true;
+  }
 
   rsModaljavacode = false;
   goToReplaceStringjavacode(row) {
-this.rowSelected = row;     this.rsModaljavacode  =true;   }
+    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;
+    });
+  }
+
+
 }
 
 

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<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);
   }

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;
+                        const id = res?.id;
-                        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 hash = sha256(enhancedPrompt).toString();
+                        // const jsonBlock = res?.javacode;
+                        // if (!jsonBlock) return resolve('{}');
 
-                        if (this.promptHashCache[hash]) {
+                        // const baseJson = typeof jsonBlock === 'string' ? JSON.parse(jsonBlock) : jsonBlock;
-                            return resolve(this.promptHashCache[hash]);
+                        // 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('{}');