dlf

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 @@
         </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>
+          <div style="display: flex; align-items: center; gap: 10px;">
-            <span style="cursor: pointer;" clrSignpostTrigger><clr-icon shape="help" class="success"
+
-                style="color: rgb(0, 130, 236);"></clr-icon></span>
+            <clr-signpost>
-            <clr-signpost-content [clrPosition]="'left-middle'" *clrIfOpen>
+              <span style="cursor: pointer;" clrSignpostTrigger><clr-icon shape="help" class="success"
-              <h5 style="margin-top: 0">Who Column</h5>
+                  style="color: rgb(0, 130, 236);"></clr-icon></span>
-              <div>Account ID: <code class="clr-code">{{user.accountId}}</code></div>
+              <clr-signpost-content [clrPosition]="'left-middle'" *clrIfOpen>
-              <div>Created At: <code class="clr-code">{{user.createdAt| date}}</code></div>
+                <h5 style="margin-top: 0">Who Column</h5>
-              <div>Created By: <code class="clr-code">{{user.createdBy}}</code></div>
+                <div>Account ID: <code class="clr-code">{{user.accountId}}</code></div>
-              <div>Updated At: <code class="clr-code">{{user.updatedAt | date}}</code></div>
+                <div>Created At: <code class="clr-code">{{user.createdAt| date}}</code></div>
-              <div>Updated By: <code class="clr-code">{{user.updatedBy}}</code></div>
+                <div>Created By: <code class="clr-code">{{user.createdBy}}</code></div>
-            </clr-signpost-content>
+                <div>Updated At: <code class="clr-code">{{user.updatedAt | date}}</code></div>
-          </clr-signpost>
+                <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

@@ -1,12 +1,14 @@
 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';
+import { SiteTreeservice } from '../SiteBuilderGrid/SiteTree.service';
+import { COMMON_CSS } from '../WireframesUi/common-css';
 declare var JsBarcode: any;
 @Component({
   selector: 'app-Design_lbrary',
@@ -14,14 +16,17 @@ 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[];
   isCardview = Design_lbrarycardvariable.cardButton;
-  cardmodal;  changeView(){
+  cardmodal; changeView() {
-  this.isCardview = !this.isCardview;
+    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;
+  userrole;
-  rowSelected :any= {};
+  rowSelected: any = {};
-  modaldelete=false;
+  modaldelete = false;
-  modalEdit=false;
+  modalEdit = false;
-  modalAdd= false;
+  modalAdd = false;
   public entryForm: FormGroup;
   loading = false;
   product;
   modalOpenedforNewLine = false;
-  newLine:any;
+  newLine: any;
- additionalFieldsFromBackend: 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 userInfoService: UserInfoService,
-    private mainService:Design_lbraryservice,
+    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 !== ''){
+    if (this.cardmodeldata !== '') {
-     this.cardmodal = JSON.parse(this.cardmodeldata);
+      this.cardmodal = JSON.parse(this.cardmodeldata);
-    this.dashboardArray = this.cardmodal.dashboard.slice();
+      this.dashboardArray = this.cardmodal.dashboard.slice();
-    console.log(this.dashboardArray)
+      console.log(this.dashboardArray)
     }
-    this.userrole=this.userInfoService.getRoles();
+    this.userrole = this.userInfoService.getRoles();
     this.getData();
     this.entryForm = this._fb.group({
-name : [null],
+      name: [null],
 
-description : [null],
+      description: [null],
 
-active : [false],
+      active: [false],
 
-htmljson : [null],
+      htmljson: [null],
 
-css : [null],
+      css: [null],
-
+      templatetype:[null],
-javacode : [null],
+      uitype:[null],
+      javacode: [null],
+      typerender: [null],
+      techstack: [null],
 
 
 
-
+    }); // component_button200
-
+    // form code start
-
-
-
-
-
-
-
-
-
-  }); // component_button200
- // form code start
     this.extensionService.getJsonObjectsByFormCodeList(this.formcode).subscribe(data => {
       console.log(data);
       const jsonArray = data.map((str) => JSON.parse(str));
@@ -136,19 +135,19 @@ javacode : [null],
 
 
 
- error; 
+  error;
   getData() {
     this.mainService.getAll().subscribe((data) => {
       console.log(data);
       this.product = data;
- if(this.product.length==0){
+      if (this.product.length == 0) {
-        this.error="No Data Available"
+        this.error = "No Data Available"
-     }   
+      }
-    },(error) => {
+    }, (error) => {
       console.log(error);
-      if(error){
+      if (error) {
-       this.error="Server Error";
+        this.error = "Server Error";
-     }
+      }
     });
   }
   onEdit(row) {
@@ -168,22 +167,21 @@ javacode : [null],
 
     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;
 
 
@@ -207,9 +205,9 @@ javacode : [null],
         if (data || data.status >= 200 && data.status <= 299) {
           this.toastr.success("Update Successfully");
         }
-setTimeout(() => {
+        setTimeout(() => {
-      this.ngOnInit();
+          this.ngOnInit();
-    }, 500);
+        }, 500);
 
 
 
@@ -238,8 +236,8 @@ setTimeout(() => {
       this.ngOnInit();
     }, 500);
   }
-onCreate() {
+  onCreate() {
-     this.modalAdd=false;
+    this.modalAdd = false;
 
 
 
@@ -252,15 +250,15 @@ onCreate() {
 
 
 
-  this.mainService.create(this.entryForm.value).subscribe(
+    this.mainService.create(this.entryForm.value).subscribe(
-    (data) => {
+      (data) => {
-      console.log(data);
+        console.log(data);
-  if (data || data.status >= 200 && data.status <= 299) {
+        if (data || data.status >= 200 && data.status <= 299) {
           this.toastr.success("Added Successfully");
         }
-setTimeout(() => {
+        setTimeout(() => {
-      this.ngOnInit();
+          this.ngOnInit();
-    }, 500);
+        }, 500);
 
 
 
@@ -290,7 +288,7 @@ setTimeout(() => {
     }, 500);
   }
   goToAdd(row) {
-this.modalAdd = true; this.submitted = false;
+    this.modalAdd = true; this.submitted = false;
 
 
 
@@ -304,36 +302,93 @@ this.modalAdd = true; this.submitted = false;
 
 
   }
- submitted = false;
+  submitted = false;
-onSubmit() {
+  onSubmit() {
-  console.log(this.entryForm.value);
+    console.log(this.entryForm.value);
- this.submitted = true;
+    this.submitted = true;
-  if (this.entryForm.invalid) {
+    if (this.entryForm.invalid) {
-    return;
+      return;
-  }this.onCreate();
+    } this.onCreate();
 
-} 
+  }
 
 
-rsModaldescription = false;   
+  rsModaldescription = false;
-goToReplaceStringdescription(row){
+  goToReplaceStringdescription(row) {
-this.rowSelected = row;     this.rsModaldescription  =true;   }
+    this.rowSelected = row; this.rsModaldescription = true;
+  }
 
 
 
-rsModalhtmljson = false;   
+  rsModalhtmljson = false;
-goToReplaceStringhtmljson(row){
+  goToReplaceStringhtmljson(row) {
-this.rowSelected = row;     this.rsModalhtmljson  =true;   }
+    this.rowSelected = row; this.rsModalhtmljson = true;
+  }
 
-rsModalcss = false;   
+  rsModalcss = false;
-goToReplaceStringcss(row){
+  goToReplaceStringcss(row) {
-this.rowSelected = row;     this.rsModalcss  =true;   }
+    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;
+    });
+  }
 
-rsModaljavacode = false;   
-goToReplaceStringjavacode(row){
-this.rowSelected = row;     this.rsModaljavacode  =true;   }
 
-// updateaction
 }
 
 

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