tags

visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/SiteBuilderGrid/SiteTree.service.ts

@@ -48,6 +48,12 @@ export class SiteTreeservice {
     return this.apiRequest.get(_http);
   }
 
+
+  getDesignLibraryByTag(operationType: string, tagType: string): Observable<any> {
+    const _http = "Design_lbrary/Design_lbrary/tag?" + "operationType=" + operationType + "&fieldType=" + tagType;
+    return this.apiRequest.get(_http);
+  }
+
   getDesignLibraryByheader(headerId: number, operationType: string, fieldtype: string): Observable<any> {
     const _http = "Design_lbrary/Design_lbrary/line/unique?headerId=" + headerId + "&operationType=" + operationType + "&fieldType=" + fieldtype;
     return this.apiRequest.get(_http);
@@ -128,5 +134,12 @@ export class SiteTreeservice {
   uploadLogouploaddelete(id: number): Observable<any> {
     return this.apiRequest.delete(`FileUpload/Uploadeddocs/${id}`);
   }
+
+  // photo search option
+
+  searchPhoto(keywords: string, pageNumber: number): Observable<any> {
+    const _http = "api/photos/search?keyword=" + keywords + "&pageNumber=" + pageNumber;
+    return this.apiRequest.get(_http);
+  }
   // updateactionƒ
 }

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

@@ -486,6 +486,24 @@
 
         <!-- CSS Editor Modal -->
         <div *ngIf="showCssEditorModal" class="css-editor-modal">
+
+          <!-- 🌄 Image Slider on Top -->
+          <div *ngIf="imageSearchResults.length > 0" style="margin-bottom: 20px;">
+            <h4>Suggested Images for "{{ imageSearchQuery }}"</h4>
+
+            <!-- Horizontal scroll container -->
+            <div class="image-slider">
+              <img *ngFor="let url of imageSearchResults" [src]="url" (click)="replaceImageInSection(url)"
+                class="slider-image" />
+            </div>
+
+            <div class="pagination-buttons">
+              <button (click)="prevImagePage()" [disabled]="imageSearchPage === 1">⏮️ Prev</button>
+              <span>Page {{ imageSearchPage }}</span>
+              <button (click)="nextImagePage()">Next ⏭️</button>
+            </div>
+          </div>
+
           <h3>Edit CSS for Section: {{ selectedSection?.section }}</h3>
 
           <div *ngFor="let className of objectKeys(classCssMap)">
@@ -498,6 +516,9 @@
             <button (click)="addCssProp(className)">➕ Add Property</button>
           </div>
 
+
+
+
           <button (click)="saveClassCss()">💾 Save</button>
           <button (click)="closeCssEditor()">Cancel</button>
         </div>
@@ -505,6 +526,8 @@
 
 
 
+
+
         <!-- Empty State for No Pages -->
         <div *ngIf="pageRenderOrder.length === 0" class="empty-pages-modern">
           <div class="empty-state-modern">
@@ -660,6 +683,8 @@
       </div>
     </div>
 
+
+
     <!-- Add Custom Section Modal -->
     <div class="modal-overlay" *ngIf="showAddCustomModal" [@fadeIn] (click)="closeAddCustomModal()">
       <div class="modal-content" (click)="$event.stopPropagation()" [@slideIn]>

visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.scss

@@ -1988,5 +1988,89 @@ $shadow-heavy: 0 8px 25px rgba(0, 0, 0, 0.15);
 
 
 
-  //  chow code css end
+  //  show code css end
+
+
+  // show image slider
+
+  .image-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: 100vw;
+  background: rgba(0,0,0,0.5);
+  z-index: 2000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.image-modal {
+  background: white;
+  padding: 20px;
+  width: 80%;
+  max-height: 90vh;
+  overflow: auto;
+  border-radius: 10px;
+  position: relative;
+}
+
+.image-slider {
+  display: flex;
+  gap: 10px;
+  overflow-x: auto;
+  margin: 16px 0;
+}
+
+.slider-image {
+  height: 120px;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: transform 0.2s;
+}
+
+.slider-image:hover {
+  transform: scale(1.05);
+}
+
+.pagination-buttons {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+.image-slider {
+  display: flex;
+  flex-direction: row;
+  overflow-x: auto;
+  gap: 12px;
+  padding: 10px 0;
+}
+
+.slider-image {
+  height: 100px;
+  flex: 0 0 auto;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: transform 0.2s, border 0.2s;
+  border: 2px solid transparent;
+}
+
+.slider-image:hover {
+  transform: scale(1.05);
+  border-color: #007bff;
+}
+
+.pagination-buttons {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 10px;
+}
+
+
+
+
+
 }

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

@@ -71,7 +71,9 @@
 
       <!-- Tab Buttons -->
       <div style="display: flex; border-bottom: 2px solid #ccc;">
-        <button [ngClass]="{'active-tab': activeTab === 'sitemap'}" (click)="activeTab = 'sitemap'"
+        <button [ngClass]="{'active-tab': activeTab === 'sitemap'}"
+       
+         (click)="onTabChange('sitemap')"
           class="tab-button">Sitemap</button>
       </div>
     </div>

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

@@ -5,6 +5,7 @@ import { ActivatedRoute } from '@angular/router';
 
 import { ViewChild } from '@angular/core';
 import { trigger, transition, style, animate, state } from '@angular/animations';
+import { Tagservice } from './Tag/Tag.service';
 // Make sure path is correct
 
 @Component({
@@ -130,6 +131,7 @@ export class TreeVisualizerComponent {
 
   constructor(private treeService: treeVisualizerService,
     private siteTreeService: SiteTreeservice,
+    private tagService: Tagservice,
     private route: ActivatedRoute,
 
 
@@ -141,9 +143,50 @@ export class TreeVisualizerComponent {
 
     console.log(' id is :  ', this.id)
 
+    this.getTagData();
     this.fetchTreeById(this.id);
+
   }
 
+  onTabChange(tab: 'sitemap' | 'wireframe') {
+    this.activeTab = tab;
+
+    if (tab === 'sitemap') {
+      console.log('🔁 Reloading sitemap tree...');
+      this.fetchTreeById(this.id); // or convertJson(), based on your rendering logic
+    }
+  }
+
+
+  tagData;
+  tagNames: string[] = [];
+  getTagData() {
+    this.tagService.getAll().subscribe((data) => {
+      console.log('tag data', data);
+
+      if (Array.isArray(data)) {
+        this.tagData = data;
+
+        // Null checks for data and name
+        this.tagNames = data
+          .filter(tag => tag && tag.name) // tag object aur name dono honi chahiye
+          .map(tag => tag.name);
+
+        console.log('Extracted tag names:', this.tagNames);
+
+      } else {
+        this.tagData = [];
+        this.tagNames = [];
+        console.warn('Tag data is not an array.');
+      }
+    }, (error) => {
+      console.log('Error fetching tag data', error);
+      this.tagData = [];
+      this.tagNames = [];
+    });
+  }
+
+
 
   // Add these properties to your component class
   isLoading = false;
@@ -169,7 +212,18 @@ export class TreeVisualizerComponent {
     - Each page MUST contain at least 6 meaningful UI sections (including "Navbar" and "Footer"). These sections should be clearly named and described (e.g., "Header Section", "Hero Section", "Testimonial Section", etc.). You are NOT allowed to include fewer than 6 sections on any page.
     - A "Navbar" and a "Footer" section (always included on every page)
     - A short, clear description for each section (to support frontend development)
-
+ - Each section MUST also include a \`"tag"\` key. This tag should be selected from the following allowed tag list:
++
++     [${this.tagNames.join(", ")}]
++
++     Example:
++     "Hero Section": {
++       "description": "A bold landing area with a headline, subtext, and call-to-action button.",
++       "tag": "header"
++     }
++
++     You MUST select the most relevant tag from the above list for every section.
++     If a suitable tag is not found, choose the closest logical match.
       
     📘 Website Context:
     ${this.rawInputText}
@@ -289,6 +343,9 @@ export class TreeVisualizerComponent {
         this.handleGenerationError('Failed to generate site structure');
       }
     });
+
+    this.fetchTreeById(this.id);
+
   }
 
   // Helper method to check if all calls are complete