add base project

frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/io8.ref/product/Product.component.html

@@ -0,0 +1,108 @@
+<ol class="breadcrumb breadcrumb-arrow font-trirong">
+  <li><a href="javascript://"><clr-icon shape="home"></clr-icon></a></li>
+  <li><a href="javascript://"> Product</a></li>
+</ol>
+
+<div class="dg-wrapper">
+  <div class="clr-row">
+    <div class="clr-col-8">
+      <h3>Product Management</h3>
+    </div>
+    <div class="clr-col-4" style="text-align: right;">
+      <button id="add" class="btn btn-primary" (click)="goToAdd()">
+        <clr-icon shape="plus"></clr-icon> ADD
+      </button>
+    </div>
+  </div>
+
+  <!-- CLARITY DATAGRID -->
+  <clr-datagrid [clrDgLoading]="loading" [(clrDgSelected)]="selected">
+    <clr-dg-placeholder>
+      <ng-template #loadingSpinner>
+        <clr-spinner>Loading ...</clr-spinner>
+      </ng-template>
+      <div *ngIf="error; else loadingSpinner">{{error}}</div>
+    </clr-dg-placeholder>
+
+    <!-- COLUMN HEADERS -->
+{{LIST_ITEMS}}
+
+    <clr-dg-column>
+      <ng-container *clrDgHideableColumn="{hidden: false}">
+        <clr-icon shape="bars"></clr-icon> Action
+      </ng-container>
+    </clr-dg-column>
+
+    <!-- DATA ROWS -->
+    <clr-dg-row *clrDgItems="let item of items" [clrDgItem]="item">
+      <clr-dg-cell>{{item.name}}</clr-dg-cell>
+      <clr-dg-cell>{{item.description}}</clr-dg-cell>
+      <clr-dg-cell>{{item.active}}</clr-dg-cell>
+
+      <clr-dg-cell>
+        <span style="cursor: pointer; margin-right: 10px;" (click)="onEdit(item)" title="Edit">
+          <clr-icon shape="pencil"></clr-icon>
+        </span>
+        <span style="cursor: pointer; color: red;" (click)="onDelete(item)" title="Delete">
+          <clr-icon shape="trash" class="is-error"></clr-icon>
+        </span>
+      </clr-dg-cell>
+
+      <clr-dg-action-overflow>
+        <button class="action-item" (click)="onEdit(item)">Edit</button>
+        <button class="action-item" (click)="onDelete(item)">Delete</button>
+      </clr-dg-action-overflow>
+    </clr-dg-row>
+
+    <clr-dg-footer>
+      <clr-dg-pagination #pagination [clrDgPageSize]="10">
+        <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Items per page</clr-dg-page-size>
+        {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{pagination.totalItems}} items
+      </clr-dg-pagination>
+    </clr-dg-footer>
+  </clr-datagrid>
+</div>
+
+<!-- ADD MODAL -->
+<clr-modal [(clrModalOpen)]="modalAdd" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+  <h3 class="modal-title">Add Product</h3>
+  <div class="modal-body">
+    <form [formGroup]="entryForm">
+      <div class="clr-row">
+{{FORM_FIELDS}}
+      </div>
+    </form>
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-outline" (click)="modalAdd = false">Cancel</button>
+    <button type="button" class="btn btn-primary" (click)="onCreate()">Submit</button>
+  </div>
+</clr-modal>
+
+<!-- EDIT MODAL -->
+<clr-modal [(clrModalOpen)]="modalEdit" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+  <h3 class="modal-title">Edit Product (ID: {{rowSelected.id}})</h3>
+  <div class="modal-body" *ngIf="rowSelected">
+    <form>
+      <div class="clr-row">
+{{FORM_FIELDS}}
+      </div>
+    </form>
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-outline" (click)="modalEdit = false">Cancel</button>
+    <button type="button" class="btn btn-primary" (click)="onUpdate(rowSelected.id)">Update</button>
+  </div>
+</clr-modal>
+
+<!-- DELETE MODAL -->
+<clr-modal [(clrModalOpen)]="modaldelete" [clrModalSize]="'md'" [clrModalStaticBackdrop]="true">
+  <h3 class="modal-title">Confirm Delete</h3>
+  <div class="modal-body">
+    <p>Are you sure you want to delete this record (ID: <b>{{rowSelected.id}}</b>)?</p>
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-outline" (click)="modaldelete = false">Cancel</button>
+    <button type="button" class="btn btn-danger" (click)="delete(rowSelected.id)">Delete</button>
+  </div>
+</clr-modal>

frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/io8.ref/product/Product.component.scss

@@ -0,0 +1,7 @@
+.dg-wrapper {
+  margin-top: 15px;
+}
+.heading {
+  font-weight: 500;
+  margin-bottom: 12px;
+}

frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/io8.ref/product/Product.component.ts

@@ -0,0 +1,98 @@
+import { Component, OnInit } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ProductService } from './Product.service';
+
+@Component({
+  selector: 'app-Product',
+  templateUrl: './Product.component.html',
+  styleUrls: ['./Product.component.scss']
+})
+export class ProductComponent implements OnInit {
+  rowSelected: any = {};
+  modaldelete = false;
+  modalEdit = false;
+  modalAdd = false;
+  public entryForm: FormGroup;
+  loading = false;
+  items: any[] = [];
+  selected: any[] = [];
+  error: string;
+
+  constructor(
+    private mainService: ProductService,
+    private toastr: ToastrService,
+    private _fb: FormBuilder,
+    private router: Router,
+    private route: ActivatedRoute
+  ) { }
+
+  ngOnInit(): void {
+    this.getData();
+    this.entryForm = this._fb.group({
+      name: [null],
+      description: [null],
+      active: [true]
+    });
+  }
+
+  getData() {
+    this.loading = true;
+    this.mainService.getAll().subscribe((data) => {
+      this.loading = false;
+      this.items = data || [];
+      if (this.items.length === 0) {
+        this.error = 'No Data Available';
+      }
+    }, (error) => {
+      this.loading = false;
+      this.error = 'Server Error';
+    });
+  }
+
+  goToAdd() {
+    this.entryForm.reset({ active: true });
+    this.modalAdd = true;
+  }
+
+  onEdit(row: any) {
+    this.rowSelected = Object.assign({}, row);
+    this.modalEdit = true;
+  }
+
+  onDelete(row: any) {
+    this.rowSelected = row;
+    this.modaldelete = true;
+  }
+
+  delete(id: number) {
+    this.modaldelete = false;
+    this.mainService.delete(id).subscribe(() => {
+      this.toastr.success('Deleted successfully');
+      this.getData();
+    }, (error) => {
+      this.toastr.error('Failed to delete');
+    });
+  }
+
+  onCreate() {
+    this.modalAdd = false;
+    this.mainService.create(this.entryForm.value).subscribe(() => {
+      this.toastr.success('Added successfully');
+      this.getData();
+    }, (error) => {
+      this.toastr.error('Failed to add');
+    });
+  }
+
+  onUpdate(id: number) {
+    this.modalEdit = false;
+    this.mainService.update(id, this.rowSelected).subscribe(() => {
+      this.toastr.success('Updated successfully');
+      this.getData();
+    }, (error) => {
+      this.toastr.error('Failed to update');
+    });
+  }
+}

frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/io8.ref/product/Product.service.ts

@@ -0,0 +1,39 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
+import { ApiRequestService } from 'src/app/services/api/api-request.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ProductService {
+  private baseURL = 'Product/Product';
+
+  constructor(
+    private http: HttpClient,
+    private apiRequest: ApiRequestService
+  ) { }
+
+  getAll(page?: number, size?: number): Observable<any> {
+    return this.apiRequest.get(this.baseURL);
+  }
+
+  getById(id: number): Observable<any> {
+    const _http = this.baseURL + '/' + id;
+    return this.apiRequest.get(_http);
+  }
+
+  create(data: any): Observable<any> {
+    return this.apiRequest.post(this.baseURL, data);
+  }
+
+  update(id: number, data: any): Observable<any> {
+    const _http = this.baseURL + '/' + id;
+    return this.apiRequest.put(_http, data);
+  }
+
+  delete(id: number): Observable<any> {
+    const _http = this.baseURL + '/' + id;
+    return this.apiRequest.delete(_http);
+  }
+}

frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/stepperworkflow/Stepper_workflow/Stepper_workflow.component.html

@@ -0,0 +1,405 @@
+<ol class="breadcrumb breadcrumb-arrow font-trirong">
+  <li><a href="javascript://"> Stepper Workflow</a></li>
+</ol>
+<div class="dg-wrapper">
+  <div class="clr-row">
+    <div class="clr-col-8">
+      <h3>Stepper Workflow </h3>
+    </div>
+    <div class="clr-col-4" style="text-align: right;">
+      <button *ngIf="cardButton" id="add" class="btn btn-primary btn-icon" (click)="changeView()">
+        <clr-icon *ngIf="!isCardview" shape="grid-view"></clr-icon> <clr-icon *ngIf="isCardview"
+          shape="bars"></clr-icon>
+      </button>
+      <!-- button -->
+      <button id="add" class="btn btn-primary" (click)="goToAdd(product)">
+        <clr-icon shape="plus"></clr-icon>ADD
+      </button>
+    </div>
+  </div>
+  <ng-container *ngIf="!isCardview"> <!-- GET ALL --> <clr-datagrid [clrDgLoading]="loading"
+      [(clrDgSelected)]="selected">
+      <clr-dg-placeholder>
+        <ng-template #loadingSpinner>
+          <clr-spinner>Loading ... </clr-spinner>
+        </ng-template>
+        <div *ngIf="error;else loadingSpinner">{{error}}</div>
+      </clr-dg-placeholder>
+
+      <clr-dg-column [clrDgField]="' name'"> <ng-container *clrDgHideableColumn="{hidden: false}"> Name
+        </ng-container></clr-dg-column>
+
+
+      <clr-dg-column [clrDgField]="' description'"> <ng-container *clrDgHideableColumn="{hidden: false}"> Description
+        </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?.slice()?.reverse()" [clrDgItem]="user">
+
+        <clr-dg-cell>{{user. name }}</clr-dg-cell>
+
+
+        <clr-dg-cell (click)="goToReplaceStringdescription (user.description)"
+          style="cursor: pointer; align-items: center;"><clr-icon shape="details"></clr-icon>
+        </clr-dg-cell>
+
+
+        <clr-dg-cell>{{user. active }}</clr-dg-cell>
+
+
+        <!-- who column -->
+        <clr-dg-cell>
+          <clr-signpost>
+            <span style="cursor: pointer;" clrSignpostTrigger><clr-icon shape="help" class="success"
+                style="color: rgb(0, 130, 236);"></clr-icon></span>
+            <clr-signpost-content [clrPosition]="'left-middle'" *clrIfOpen>
+              <h5 style="margin-top: 0">Who Column</h5>
+              <div>Account ID: <code class="clr-code">{{user.accountId}}</code></div>
+              <div>Created At: <code class="clr-code">{{user.createdAt| date}}</code></div>
+              <div>Created By: <code class="clr-code">{{user.createdBy}}</code></div>
+              <div>Updated At: <code class="clr-code">{{user.updatedAt | date}}</code></div>
+              <div>Updated By: <code class="clr-code">{{user.updatedBy}}</code></div>
+            </clr-signpost-content>
+          </clr-signpost>
+
+          <!-- Doosra icon (plus) with left margin for spacing -->
+          <clr-icon shape="list" style="color: #1976d2; cursor: pointer; margin-left: 12px;"
+            title="Open Stepper Workflow" (click)="gotoStepper(user.id)">
+          </clr-icon>
+
+        </clr-dg-cell>
+
+        <!-- who colmn -->
+
+        <clr-dg-action-overflow>
+          <button class="action-item" (click)="onEdit(user)">Edit</button>
+          <button class="action-item" (click)="onDelete(user)">Delete</button>
+        </clr-dg-action-overflow>
+      </clr-dg-row>
+      <clr-dg-footer>
+        <clr-dg-pagination #pagination [clrDgPageSize]="10">
+          <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Users per page</clr-dg-page-size>
+          {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
+          of {{pagination.totalItems}} users
+        </clr-dg-pagination>
+      </clr-dg-footer>
+    </clr-datagrid> </ng-container>
+  <ng-template #showInfo>
+    <div class="alert alert-info" role="alert">
+      <div class="alert-items">
+        <div class="alert-item static">
+          <span class="alert-text">
+            <clr-icon class="alert-icon" shape="info-circle"></clr-icon>
+            Data could be found. Loading..
+            <clr-spinner [clrMedium]="true">Loading ...</clr-spinner>
+          </span>
+        </div>
+      </div>
+    </div>
+  </ng-template><ng-container *ngIf="isCardview">
+    <div *ngIf="product; else showInfo" class="clr-row clr-align-items-start clr-justify-content-start">
+      <div *ngFor="let app of product| filter:search; let index = i" class="clr-col-auto">
+        <div class="clr-row">
+          <div class="clr-col-lg-12 clr-col-md-4 clr-col-sm-4 clr-col-12" style="width: 410px;">
+            <div class="card" style="padding: 10px; "
+              [style.background-color]="cardmodal.cardColor !== '' ? cardmodal.cardColor : 'white'">
+              <div class="card-body"
+                style="display: grid; grid-template-columns: repeat(13, 1fr); grid-template-rows: repeat(7, 1fr); gap: 5px;">
+                <ng-container *ngFor="let item of dashboardArray">
+                  <div [style.gridColumn]="item.x + 1" [style.gridRow]="item.y + 1"
+                    [style.gridColumnEnd]="item.x + item.cols + 1" [style.gridRowEnd]="item.y + item.rows + 1">
+                    <div *ngIf="item.name === 'textField'" class="title-card card-title"
+                      [style.text-align]="item.alignment !== '' ? item.alignment : 'left'"
+                      [style.line-height]="item.textlineheight !== '' ? item.textlineheight : '1'"
+                      [style.font-family]="item.fontName !== '' ? item.fontName : 'Metropolis'"
+                      [style.font-size]="item.fontSize !== '' ? item.fontSize : '100%'"
+                      [style.font-style]="item.italic == true ? 'Italic' : 'normal'"
+                      [style.font-weight]="item.bold == true ? 'bold' : 'normal'" [style.text-decoration]="(item.underline && item.strikethough) ? 'underline line-through' : 
+          (item.underline ? 'underline' : (item.strikethough ? 'line-through' : 'none'))"
+                      [style.background-color]="item.backgroundcolor !== '' ? item.backgroundcolor : 'white'"
+                      [style.color]="item.textcolor !== '' ? item.textcolor : 'black'"
+                      [style.background-color]="item.conditionValue ==  app[transform(item.fieldtext) ] ? item.conditionbackgroundcolor : item.backgroundcolor"
+                      [style.color]="item.conditionValue ==  app[transform(item.fieldtext) ] ? item.conditiontextcolor : item.textcolor">
+                      {{beforeText(item.fieldtext)}}
+                      {{ app[transform(item.fieldtext) ] }}
+                      {{afterText(item.fieldtext)}}
+                    </div>
+
+                    <div *ngIf="item.name === 'dateField'" class="title-card card-title"
+                      [style.text-align]="item.alignment !== '' ? item.alignment : 'left'"
+                      [style.line-height]="item.textlineheight !== '' ? item.textlineheight : '1'"
+                      [style.font-family]="item.fontName !== '' ? item.fontName : 'Metropolis'"
+                      [style.font-size]="item.fontSize !== '' ? item.fontSize : '100%'"
+                      [style.font-style]="item.italic == true ? 'Italic' : 'normal'"
+                      [style.font-weight]="item.bold == true ? 'bold' : 'normal'" [style.text-decoration]="(item.underline && item.strikethough) ? 'underline line-through' : 
+          (item.underline ? 'underline' : (item.strikethough ? 'line-through' : 'none'))"
+                      [style.background-color]="item.backgroundcolor !== '' ? item.backgroundcolor : 'white'"
+                      [style.color]="item.textcolor !== '' ? item.textcolor : 'black'"
+                      [style.background-color]="item.conditionValue ==  app[transform(item.fieldtext) ] ? item.conditionbackgroundcolor : item.backgroundcolor"
+                      [style.color]="item.conditionValue ==  app[transform(item.fieldtext) ] ? item.conditiontextcolor : item.textcolor">
+                      {{beforeText(item.fieldtext)}}
+                      {{ app[transform(item.fieldtext) ] | date}}
+                      {{afterText(item.fieldtext)}}
+                    </div>
+                    <div *ngIf="item.name === 'numberField'" class="title-card card-title"
+                      [style.text-align]="item.alignment !== '' ? item.alignment : 'left'"
+                      [style.line-height]="item.textlineheight !== '' ? item.textlineheight : '1'"
+                      [style.font-family]="item.fontName !== '' ? item.fontName : 'Metropolis'"
+                      [style.font-size]="item.fontSize !== '' ? item.fontSize : '100%'"
+                      [style.font-style]="item.italic == true ? 'Italic' : 'normal'"
+                      [style.font-weight]="item.bold == true ? 'bold' : 'normal'" [style.text-decoration]="(item.underline && item.strikethough) ? 'underline line-through' : 
+          (item.underline ? 'underline' : (item.strikethough ? 'line-through' : 'none'))"
+                      [style.background-color]="item.backgroundcolor !== '' ? item.backgroundcolor : 'white'"
+                      [style.color]="item.textcolor !== '' ? item.textcolor : 'black'"
+                      [style.background-color]="item.conditionValue ==  app[transform(item.fieldtext) ] ? item.conditionbackgroundcolor : item.backgroundcolor"
+                      [style.color]="item.conditionValue ==  app[transform(item.fieldtext) ] ? item.conditiontextcolor : item.textcolor">
+                      {{beforeText(item.fieldtext)}}
+                      {{ app[transform(item.fieldtext) ]}}
+                      {{afterText(item.fieldtext)}}
+                    </div>
+
+                    <div *ngIf="item.name === 'Line'" class="title-card card-title"
+                      [style.text-align]="item.alignment !== '' ? item.alignment : 'left'"
+                      [style.line-height]="item.textlineheight !== '' ? item.textlineheight : '1'"
+                      [style.font-family]="item.fontName !== '' ? item.fontName : 'Metropolis'"
+                      [style.font-size]="item.fontSize !== '' ? item.fontSize : '100%'"
+                      [style.font-style]="item.italic == true ? 'Italic' : 'normal'"
+                      [style.font-weight]="item.bold == true ? 'bold' : 'normal'" [style.text-decoration]="(item.underline && item.strikethough) ? 'underline line-through' : 
+          (item.underline ? 'underline' : (item.strikethough ? 'line-through' : 'none'))"
+                      [style.background-color]="item.backgroundcolor !== '' ? item.backgroundcolor : 'white'"
+                      [style.color]="item.textcolor !== '' ? item.textcolor : 'black'">
+                      <hr>
+                    </div>
+
+
+                    <div *ngIf="item.name === 'Icon'" class="icon-card"
+                      [style.text-align]="item.alignment !== '' ? item.alignment : 'left'"
+                      [style.line-height]="item.textlineheight !== '' ? item.textlineheight : '1'"
+                      [style.font-family]="item.fontName !== '' ? item.fontName : 'Metropolis'"
+                      [style.font-size]="item.fontSize !== '' ? item.fontSize : '100%'"
+                      [style.font-style]="item.italic == true ? 'Italic' : 'normal'"
+                      [style.font-weight]="item.bold == true ? 'bold' : 'normal'" [style.text-decoration]="(item.underline && item.strikethough) ? 'underline line-through' : 
+          (item.underline ? 'underline' : (item.strikethough ? 'line-through' : 'none'))"
+                      [style.background-color]="item.backgroundcolor !== '' ? item.backgroundcolor : 'white'"
+                      [style.color]="item.textcolor !== '' ? item.textcolor : 'black'">
+                      <clr-icon [attr.shape]="item.iconName"></clr-icon>
+                    </div>
+
+                    <div *ngIf="item.name == 'Image'"
+                      [style.text-align]="item.alignment !== '' ? item.alignment : 'left'"
+                      [style.line-height]="item.textlineheight !== '' ? item.textlineheight : '1'"
+                      [style.font-family]="item.fontName !== '' ? item.fontName : 'Metropolis'"
+                      [style.font-size]="item.fontSize !== '' ? item.fontSize : '100%'"
+                      [style.font-style]="item.italic == true ? 'Italic' : 'normal'"
+                      [style.font-weight]="item.bold == true ? 'bold' : 'normal'" [style.text-decoration]="(item.underline && item.strikethough) ? 'underline line-through' : 
+          (item.underline ? 'underline' : (item.strikethough ? 'line-through' : 'none'))"
+                      [style.background-color]="item.backgroundcolor !== '' ? item.backgroundcolor : 'white'"
+                      [style.color]="item.textcolor !== '' ? item.textcolor : 'black'"
+                      [style.background-color]="item.conditionValue ==  app[transform(item.fieldtext) ] ? item.conditionbackgroundcolor : item.backgroundcolor"
+                      [style.color]="item.conditionValue ==  app[transform(item.fieldtext) ] ? item.conditiontextcolor : item.textcolor">
+                      <img id="filePreview" [src]="item.imageURL" alt="File Preview"
+                        [style.width]="item.imagewidth !== '' ? item.imagewidth + 'px' : '100px'"
+                        [style.height]="item.imagewidth !== '' ? item.imagewidth + 'px' : '100px'">
+                    </div>
+                  </div>
+                </ng-container>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </ng-container>
+</div>
+
+
+
+<clr-modal [(clrModalOpen)]="rsModaldescription" [clrModalSize]="'xl'" [clrModalStaticBackdrop]="true">
+  <div class="modal-body">
+    <textarea class="form-control" style="width:100%; height: 400px;" readonly>{{rowSelected}}</textarea>
+  </div>
+</clr-modal>
+
+
+
+<!-- //		EDIT DATA......... -->
+<clr-modal [(clrModalOpen)]="modalEdit" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+  <h3 class="modal-title">Update Stepper Workflow
+    <!--update button -->
+
+
+
+
+
+  </h3>
+  <div class="modal-body" *ngIf="rowSelected.id">
+    <h2 class="heading">{{rowSelected.id}}</h2>
+    <!-- button -->
+    <form>
+      <div class="clr-row">
+        <div class="clr-col-sm-12">
+          <label>Name</label>
+          <input class="clr-input" type="text" [(ngModel)]="rowSelected.name" name="name" />
+        </div>
+
+        <div class="clr-col-sm-12">
+          <label> Description</label>
+          <textarea cols="10" rows="2" [(ngModel)]="rowSelected.description" name="description "
+            placeholder="Textarea">  </textarea>
+        </div>
+
+        <div class="clr-col-sm-12">
+          <label> Active</label>
+          <input type="checkbox" name="active" clrToggle [(ngModel)]="rowSelected.active" />
+        </div>
+
+      </div>
+
+
+
+
+
+
+      <!-- form code start -->
+      <div *ngIf="checkFormCode">
+        <h4 style="font-weight: 300;display: inline;">Extension</h4>
+        <br>
+        <hr>
+        <div class="clr-row">
+          <div class="clr-col-4" *ngFor="let field of additionalFieldsFromBackend">
+            <ng-container *ngIf="field.formCode === formcode" [ngSwitch]="field.fieldType">
+              <!-- Text Input --> <label *ngSwitchCase="'text'">{{ field.fieldName }}</label>
+              <input *ngSwitchCase="'text'" [type]="field.fieldType" name="{{ field.extValue }}"
+                [(ngModel)]="rowSelected[field.extValue]" class="clr-input" />
+
+              <!-- Date Input --> <label *ngSwitchCase="'date'">{{ field.fieldName }}</label>
+              <input *ngSwitchCase="'date'" [type]="field.fieldType" name="{{ field.extValue }}"
+                [(ngModel)]="rowSelected[field.extValue]" class="clr-input" />
+
+              <!-- Textarea --> <label *ngSwitchCase="'textarea'">{{ field.fieldName }}</label>
+              <textarea *ngSwitchCase="'textarea'" name="{{ field.extValue }}" [(ngModel)]="rowSelected[field.extValue]"
+                col="10" row="2"></textarea>
+
+              <!-- Checkbox --> <label *ngSwitchCase="'checkbox'">{{ field.fieldName }}</label><br>
+              <input *ngSwitchCase="'checkbox'" [type]="field.fieldType" name="{{ field.extValue }}"
+                [(ngModel)]="rowSelected[field.extValue]" class="clr-checkbox" />
+            </ng-container>
+          </div>
+        </div>
+      </div>
+
+      <!-- form code end -->
+      <div class="modal-footer">
+        <button type="button" class="btn btn-outline" (click)="modalEdit = false">Cancel</button>
+        <button type="submit" class="btn btn-primary" (click)="onUpdate(rowSelected.id)">Update</button>
+      </div>
+    </form>
+  </div>
+</clr-modal>
+<clr-modal [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+  <div class="modal-body" *ngIf="rowSelected.id">
+    <h1 class="delete">Are You Sure Want to delete?</h1>
+    <h2 class="heading">{{rowSelected.id}}</h2>
+    <div class="modal-footer">
+      <button type="button" class="btn btn-outline" (click)="modaldelete = false">Cancel</button>
+      <button type="button" (click)="delete(rowSelected.id)" class="btn btn-primary">Delete</button>
+    </div>
+  </div>
+</clr-modal>
+<!-- ADD FORM ..... -->
+<clr-modal [(clrModalOpen)]="modalAdd" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+  <h3 class="modal-title">Add Stepper Workflow
+
+
+
+
+
+
+    <!-- aeroplane icon -->
+    &nbsp; &nbsp; &nbsp; &nbsp;
+    <a *ngIf="userrole.includes('ADMIN')" style="float: right;" href="javascript:void(0)" role="tooltip"
+      aria-haspopup="true" class="tooltip tooltip-sm tooltip-bottom-left">
+      <a id="build_extension" [routerLink]="['../extension/all']"
+        [queryParams]="{ formCode: 'Stepper_workflow_formCode' }">
+        <clr-icon shape="airplane" size="32"></clr-icon>
+      </a>
+      <span class="tooltip-content">Form Extension</span>
+    </a>
+  </h3>
+  <div class="modal-body">
+    <form [formGroup]="entryForm">
+      <div class="clr-row" style="height: fit-content;">
+
+        <div class="clr-col-sm-12">
+          <label> Name</label>
+          <input class="clr-input" type="text" formControlName="name" />
+        </div>
+
+        <div class="clr-col-sm-12">
+          <label> Description</label>
+          <textarea cols="10" rows="2" formControlName="description" placeholder="Textarea">  </textarea>
+        </div>
+
+        <div class="clr-col-sm-12">
+          <label> Active</label>
+          <input type="checkbox" formControlName="active" clrToggle />
+        </div>
+
+
+      </div>
+
+
+
+
+
+
+
+
+      <!-- form code start -->
+      <div *ngIf="checkFormCode">
+        <h4 style="font-weight: 300;display: inline;">Extension</h4>
+        <br>
+        <hr>
+        <div class="clr-row">
+          <div class="clr-col-4" *ngFor="let field of additionalFieldsFromBackend">
+            <ng-container *ngIf="field.formCode === formcode" [ngSwitch]="field.fieldType">
+              <!-- Text Input --> <label *ngSwitchCase="'text'">{{ field.fieldName }}</label>
+              <input *ngSwitchCase="'text'" [type]="field.fieldType" [formControlName]="field.extValue"
+                class="clr-input" />
+              <!-- Date Input --> <label *ngSwitchCase="'date'">{{ field.fieldName }}</label>
+              <input *ngSwitchCase="'date'" [type]="field.fieldType" [formControlName]="field.extValue"
+                class="clr-input" />
+              <!-- Textarea --> <label *ngSwitchCase="'textarea'">{{ field.fieldName }}</label>
+              <textarea *ngSwitchCase="'textarea'" [formControlName]="field.extValue" col="10" row="2"></textarea>
+              <!-- Checkbox --> <label *ngSwitchCase="'checkbox'">{{ field.fieldName }}</label><br>
+              <input *ngSwitchCase="'checkbox'" [type]="field.fieldType" [formControlName]="field.extValue"
+                class="clr-checkbox" />
+            </ng-container>
+          </div>
+        </div>
+      </div>
+      <!-- form code end -->
+      <div class="modal-footer">
+        <button type="button" class="btn btn-outline" (click)="modalAdd = false">Cancel</button>
+        <button type="submit" class="btn btn-primary" (click)="onSubmit()">ADD</button>
+      </div>
+    </form>
+  </div>
+</clr-modal>
+
+
+
+
+
+
+<!-- htmlpopup -->

frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/stepperworkflow/Stepper_workflow/Stepper_workflow.component.scss

@@ -0,0 +1,78 @@
+//@import "../../../../assets/scss/var";
+.s-info-bar {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  button {
+    outline: none;
+  }
+}
+.delete,.heading{
+  text-align: center;
+  color: red;
+}
+.entry-pg {
+  width: 750px;
+}
+
+.button1::after {
+  content: none;
+}
+.button1:hover::after {
+  content: "ADD ROWS";
+}
+
+.section {
+  background-color: #dddddd;
+  height: 40px;
+}
+
+.section p {
+  //color: white;
+  padding: 10px;
+  font-size: 18px;
+}
+
+.clr-input {
+  color: #212529;
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+  padding: 0.75rem 0.75rem;
+  margin-top: 3px;
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+.clr-file {
+  color: #212529;
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+  //padding: 0.6rem 0.75rem;
+  margin-top: 3px;
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+.center {
+  text-align: center;
+}
+select{
+  width: 100%;
+  margin-top: 3px;
+  padding: 5px 5px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+input[type=text],[type=date],[type=number],textarea {
+  width: 100%;
+  padding: 15px 15px;
+  background-color:rgb(255, 255, 255);
+ // margin: 8px 0;
+  display: inline-block;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+.error_mess {
+  color: red;
+}

frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/stepperworkflow/Stepper_workflow/Stepper_workflow.component.ts

@@ -0,0 +1,259 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+import { Component, OnInit } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
+import { AlertService } from 'src/app/services/alert.service';
+import { Stepper_workflowservice } from './Stepper_workflow.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 { Stepper_workflowcardvariable } from './Stepper_workflow_cardvariable';
+import { UserInfoService } from 'src/app/services/user-info.service';
+import { ActivatedRoute, Router } from '@angular/router';
+
+declare var JsBarcode: any;
+@Component({
+  selector: 'app-Stepper_workflow',
+  templateUrl: './Stepper_workflow.component.html',
+  styleUrls: ['./Stepper_workflow.component.scss']
+})
+export class Stepper_workflowComponent implements OnInit {
+  cardButton = Stepper_workflowcardvariable.cardButton;
+  cardmodeldata = Stepper_workflowcardvariable.cardmodeldata;
+  public dashboardArray: DashboardContentModel2[];
+  isCardview = Stepper_workflowcardvariable.cardButton;
+  cardmodal; changeView() {
+    this.isCardview = !this.isCardview;
+  }
+  beforeText(fieldtext: string): string { // Extract the text before the first '<'
+    const index = fieldtext.indexOf('<');
+    return index !== -1 ? fieldtext.substring(0, index) : fieldtext;
+  }
+  afterText(fieldtext: string): string { // Extract the text after the last '>'
+    const index = fieldtext.lastIndexOf('>');
+    return index !== -1 ? fieldtext.substring(index + 1) : '';
+  }
+  transform(fieldtext: string): string {
+    const match = fieldtext.match(/<([^>]*)>/);
+    return match ? match[1] : ''; // Extract the text between '<' and '>'
+  }
+  userrole;
+  rowSelected: any = {};
+  modaldelete = false;
+  modalEdit = false;
+  modalAdd = false;
+  public entryForm: FormGroup;
+  loading = false;
+  product;
+  modalOpenedforNewLine = false;
+  newLine: any;
+  additionalFieldsFromBackend: any[] = [];
+  formcode = 'Stepper_workflow_formCode'
+  tableName = 'Stepper_workflow'; checkFormCode; selected: any[] = []; constructor(
+    private extensionService: ExtensionService,
+    private userInfoService: UserInfoService,
+    private mainService: Stepper_workflowservice,
+    private alertService: AlertService,
+    private toastr: ToastrService,
+    private _fb: FormBuilder,
+    private router: Router,
+    private route: ActivatedRoute,
+  ) { }
+  // component button 
+  ngOnInit(): void {
+    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.getData();
+    this.entryForm = this._fb.group({
+      name: [null],
+
+      description: [null],
+
+      active: [true],
+
+
+
+    }); // component_button200
+    // form code start
+    this.extensionService.getJsonObjectsByFormCodeList(this.formcode).subscribe(data => {
+      console.log(data);
+      const jsonArray = data.map((str) => JSON.parse(str));
+      this.additionalFieldsFromBackend = jsonArray;
+      this.checkFormCode = this.additionalFieldsFromBackend.some(field => field.formCode === "Stepper_workflow_formCode");
+      console.log(this.checkFormCode);
+      console.log(this.additionalFieldsFromBackend);
+      if (this.additionalFieldsFromBackend && this.additionalFieldsFromBackend.length > 0) {
+        this.additionalFieldsFromBackend.forEach(field => {
+          if (field.formCode === this.formcode) {
+            if (!this.entryForm.contains(field.extValue)) {
+              // Add the control only if it doesn't exist in the form
+              this.entryForm.addControl(field.extValue, this._fb.control(field.fieldValue));
+            }
+          }
+        });
+      }
+    });
+    console.log(this.entryForm.value);
+    // form code end 
+
+
+  }
+
+
+  error;
+  getData() {
+    this.mainService.getAll().subscribe((data) => {
+      console.log(data);
+      this.product = data;
+      if (this.product.length == 0) {
+        this.error = "No Data Available"
+      }
+    }, (error) => {
+      console.log(error);
+      if (error) {
+        this.error = "Server Error";
+      }
+    });
+  }
+  onEdit(row) {
+    this.rowSelected = row;
+
+    this.modalEdit = true;
+  }
+  onDelete(row) {
+    this.rowSelected = row;
+    this.modaldelete = true;
+  }
+  delete(id) {
+    this.modaldelete = false;
+    console.log("in delete  " + id);
+    this.mainService.delete(id).subscribe(
+      (data) => {
+        console.log(data);
+        this.ngOnInit();
+        if (data) { this.toastr.success('Deleted successfully'); }
+      });
+  }
+  onUpdate(id) {
+    this.modalEdit = false;
+
+
+    //console.log("in update");
+    console.log("id  " + id);
+    console.log(this.rowSelected);
+    //console.log("out update");
+    this.mainService.update(id, this.rowSelected).subscribe(
+      (data) => {
+        console.log(data);
+        if (data || data.status >= 200 && data.status <= 299) {
+          this.toastr.success("Update Successfully");
+        }
+        setTimeout(() => {
+          this.ngOnInit();
+        }, 500);
+
+      }, (error) => {
+        console.log(error);
+        if (error.status >= 200 && error.status <= 299) {
+          // this.toastr.success("update Succesfully");
+        }
+        if (error.status >= 400 && error.status <= 499) {
+          this.toastr.error("Not Updated");
+        }
+        if (error.status >= 500 && error.status <= 599) {
+          this.toastr.error("Not Updated");
+        }
+      });
+    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) {
+          this.toastr.success("Added Successfully");
+        }
+        setTimeout(() => {
+          this.ngOnInit();
+        }, 500);
+
+      }, (error) => {
+        console.log(error);
+        if (error.status >= 200 && error.status <= 299) {
+          // this.toastr.success("Added Succesfully");
+        }
+        if (error.status >= 400 && error.status <= 499) {
+          this.toastr.error("Not Added");
+        }
+        if (error.status >= 500 && error.status <= 599) {
+          this.toastr.error("Not Added");
+        }
+      });
+    setTimeout(() => {
+      this.ngOnInit();
+    }, 500);
+  }
+  goToAdd(row) {
+    this.modalAdd = true;
+    this.submitted = false;
+
+  }
+  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;
+  }
+
+
+  gotoStepper(id) {
+
+    console.log('id is ', id)
+
+    // stepper route
+
+
+
+
+  }
+
+  // updateaction
+}

frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/stepperworkflow/Stepper_workflow/Stepper_workflow.service.ts

@@ -0,0 +1,39 @@
+import { Injectable } from '@angular/core';
+import { Observable } from "rxjs";
+import { HttpClient, HttpHeaders, HttpParams, } from "@angular/common/http";
+import { ApiRequestService } from "src/app/services/api/api-request.service";
+import { environment } from 'src/environments/environment';
+@Injectable({
+  providedIn: 'root'
+})
+export class Stepper_workflowservice{
+  private baseURL = "Stepper_workflow/Stepper_workflow" ;  constructor(
+    private http: HttpClient,
+    private apiRequest: ApiRequestService,
+  ) { }
+  getAll(page?: number, size?: number): Observable<any> {
+    return this.apiRequest.get(this.baseURL);
+  }
+  getById(id: number): Observable<any> {
+    const _http = this.baseURL + "/" + id;
+    return this.apiRequest.get(_http);
+  }
+  create(data: any): Observable<any> {
+    return this.apiRequest.post(this.baseURL, data);
+  }
+  update(id: number, data: any): Observable<any> {
+    const _http = this.baseURL + "/" + id;
+    return this.apiRequest.put(_http, data);
+  }
+  delete(id: number): Observable<any> {
+    const _http = this.baseURL + "/" + id;
+    return this.apiRequest.delete(_http);
+  }
+
+
+
+
+
+
+// updateaction
+}

frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/stepperworkflow/Stepper_workflow/Stepper_workflow_cardvariable.ts

@@ -0,0 +1,4 @@
+export const Stepper_workflowcardvariable = {
+    "cardButton": false,
+    "cardmodeldata": ``
+}

frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/test.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+<title>gaurav</title>
+
+</head>
+
+<body>
+    <h1>this is h1</h1>
+    <h2>this is h1</h2>
+    <h3>this is h1</h3>
+    <h4>this is h1</h4>
+    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsa fuga, asperiores mollitia iste vitae repellendus adipisci atque eum corrupti ad placeat unde voluptatum quia perferendis neque expedita, sequi iure quo. Ut error adipisci ex cum sint, suscipit, voluptatem repellat nemo dolorum unde dolores quasi aut. A earum quo mollitia voluptatibus!</p>
+   
+
+</body>
+
+</html>
+