From 7ecba598e1bfecbc13d83340e43857002c2eeea9 Mon Sep 17 00:00:00 2001 From: Azmat-7860 Date: Sun, 8 Nov 2026 18:02:04 +0530 Subject: [PATCH] feat: add barcode directive and register it in main module --- .../main/directives/barcode.directive.ts | 30 +++ .../src/app/modules/main/main.module.ts | 2 + pack-angular-v1.0.json | 229 ++++++++++++++++++ 3 files changed, 261 insertions(+) create mode 100644 frontend/angular-clarity-master/src/app/modules/main/directives/barcode.directive.ts create mode 100644 pack-angular-v1.0.json diff --git a/frontend/angular-clarity-master/src/app/modules/main/directives/barcode.directive.ts b/frontend/angular-clarity-master/src/app/modules/main/directives/barcode.directive.ts new file mode 100644 index 0000000..6203b05 --- /dev/null +++ b/frontend/angular-clarity-master/src/app/modules/main/directives/barcode.directive.ts @@ -0,0 +1,30 @@ +import { Directive, ElementRef, Input, OnChanges, SimpleChanges } from '@angular/core'; + +declare var JsBarcode: any; + +@Directive({ + selector: '[appBarcode]' +}) +export class BarcodeDirective implements OnChanges { + @Input('appBarcode') value: string; + + constructor(private el: ElementRef) {} + + ngOnChanges(changes: SimpleChanges): void { + if (this.value && typeof JsBarcode !== 'undefined') { + try { + JsBarcode(this.el.nativeElement, String(this.value), { + format: 'CODE128', + height: 45, + width: 1.5, + displayValue: true + }); + } catch (err) { + this.el.nativeElement.innerHTML = ''; + } + } else { + this.el.nativeElement.innerHTML = ''; + } + } +} + diff --git a/frontend/angular-clarity-master/src/app/modules/main/main.module.ts b/frontend/angular-clarity-master/src/app/modules/main/main.module.ts index cdd3bd2..34c8213 100644 --- a/frontend/angular-clarity-master/src/app/modules/main/main.module.ts +++ b/frontend/angular-clarity-master/src/app/modules/main/main.module.ts @@ -40,6 +40,7 @@ import { CKEditorModule } from 'ng2-ckeditor'; import { UserRegistrationComponent } from '../main/admin/user-registration/user-registration.component'; import { QRCodeModule } from 'angularx-qrcode'; +import { BarcodeDirective } from './directives/barcode.directive'; import { TagInputModule } from 'ngx-chips'; import { CookieService } from 'ngx-cookie-service'; import { ImageCropperModule } from 'ngx-image-cropper'; @@ -121,6 +122,7 @@ import { DynamicFormViewerComponent } from './superadmin/dynamicform/dynamic-for @NgModule({ declarations: [ + BarcodeDirective, MainPageComponent, PageNotFoundComponent, UserComponent, PasswordResetComponent, MyworkspaceComponent, ReportRunnerComponent, ReportrunnereditComponent, Reportrunneredit2Component, MenuGroupComponent, AllMenuGroupComponent, EditMenuGroupComponent, ReadOnlyMenuGroupComponent, UserRegistrationComponent, diff --git a/pack-angular-v1.0.json b/pack-angular-v1.0.json new file mode 100644 index 0000000..9cdb1cd --- /dev/null +++ b/pack-angular-v1.0.json @@ -0,0 +1,229 @@ +{ + "tech": "angularnew", + "object_type": "form", + "sub_object_type": "only header", + "example_entity": "Product", + "git_repo": "http://157.66.191.31:3000/risadmin_prod/authsec_testangular.git", + "git_branch": "main", + "ref_folder": "frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/io8.ref", + "targets": [ + { + "profile": "route", + "file": "frontend/angular-clarity-master/src/app/modules/main/main-routing.module.ts", + "anchor": "// buildercomponents", + "dedup": "{{Table}}Component", + "import_tpl": "import { {{Table}}Component } from './BuilderComponents/{{repo}}/{{Table}}/{{Table}}.component';", + "body_tpl": " { path: '{{table_lower}}', component: {{Table}}Component },", + "add": "{ path: '{{table_lower}}', component: {{Table}}Component }," + }, + { + "profile": "plain", + "file": "frontend/angular-clarity-master/src/app/modules/main/main.module.ts", + "anchor": "// buildercomponents", + "dedup": "{{Table}}Component", + "import_tpl": "import { {{Table}}Component } from './BuilderComponents/{{repo}}/{{Table}}/{{Table}}.component';", + "body_tpl": " {{Table}}Component,", + "add": " {{Table}}Component," + } + ], + "files": [ + { + "source_ref": "frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/io8.ref/product/Product.component.ts", + "path_tpl": "frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/{{REPO}}/{{TABLE}}/{{TABLE}}.component.ts", + "description": "Component TypeScript file", + "content_tpl": "import { Component, OnInit } from '@angular/core';\nimport { ToastrService } from 'ngx-toastr';\nimport { ActivatedRoute, Router } from '@angular/router';\nimport { {{TABLE}}Service } from './{{TABLE}}.service';\nimport { ApiRequestService } from 'src/app/services/api/api-request.service';\n\n@Component({\n selector: 'app-{{TABLE_LOWER}}',\n templateUrl: './{{TABLE}}.component.html',\n styleUrls: ['./{{TABLE}}.component.scss']\n})\nexport class {{TABLE}}Component implements OnInit {\n rowSelected: any = {};\n modaldelete = false;\n modalEdit = false;\n modalAdd = false;\n loading = false;\n items: any[] = [];\n selected: any[] = [];\n error: string;\n/* {{RELATION_DECLARATIONS}} */\n\n constructor(\n private mainService: {{TABLE}}Service,\n private apiRequest: ApiRequestService,\n private toastr: ToastrService,\n private router: Router,\n private route: ActivatedRoute\n ) { }\n\n ngOnInit(): void {\n this.getData();\n/* {{RELATION_LOADERS}} */\n }\n\n getColumns(): string[] {\n if (!this.items || this.items.length === 0) {\n return [];\n }\n return Object.keys(this.items[0]).filter(k => k !== 'id');\n }\n\n getData() {\n this.loading = true;\n this.mainService.getAll().subscribe((data) => {\n this.loading = false;\n this.items = data || [];\n if (this.items.length === 0) {\n this.error = 'No Data Available';\n }\n }, (error) => {\n this.loading = false;\n this.error = 'Server Error';\n });\n }\n\n goToAdd() {\n this.rowSelected = {};\n this.modalAdd = true;\n }\n\n onEdit(row: any) {\n this.rowSelected = Object.assign({}, row);\n this.modalEdit = true;\n }\n\n onDelete(row: any) {\n this.rowSelected = row;\n this.modaldelete = true;\n }\n\n delete(id: number) {\n this.modaldelete = false;\n this.mainService.delete(id).subscribe(() => {\n this.toastr.success('Deleted successfully');\n this.getData();\n }, (error) => {\n this.toastr.error('Failed to delete');\n });\n }\n\n onCreate() {\n this.modalAdd = false;\n this.mainService.create(this.rowSelected).subscribe(() => {\n this.toastr.success('Added successfully');\n this.getData();\n }, (error) => {\n this.toastr.error('Failed to add');\n });\n }\n\n onUpdate(id: number) {\n this.modalEdit = false;\n this.mainService.update(id, this.rowSelected).subscribe(() => {\n this.toastr.success('Updated successfully');\n this.getData();\n }, (error) => {\n this.toastr.error('Failed to update');\n });\n }\n}\n" + }, + { + "source_ref": "frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/io8.ref/product/Product.component.html", + "path_tpl": "frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/{{REPO}}/{{TABLE}}/{{TABLE}}.component.html", + "description": "Component HTML template", + "content_tpl": "
    \n
    2. \n
  2. {{TABLE}}
    3. \n
\n\n
\n
\n
\n

{{TABLE}} Management

\n
\n
\n \n
\n
\n\n \n \n \n \n Loading ...\n \n
{{error}}
\n \n\n \n \n {{ col | titlecase }}\n \n\n \n \n Action\n \n \n\n \n \n{{LIST_ITEMS}}\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n\n \n \n Items per page\n {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{pagination.totalItems}} items\n \n \n \n
\n\n\n\n

Add {{TABLE}}

\n
\n
\n
\n{{FORM_FIELDS}}\n
\n
\n
\n
\n \n \n
\n\n\n\n\n

Edit {{TABLE}} (ID: {{rowSelected.id}})

\n
\n
\n
\n{{FORM_FIELDS}}\n
\n
\n
\n
\n \n \n
\n\n\n\n\n

Confirm Delete

\n
\n

Are you sure you want to delete this record (ID: {{rowSelected.id}})?

\n
\n
\n \n \n
\n\n" + }, + { + "source_ref": "frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/io8.ref/product/Product.component.scss", + "path_tpl": "frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/{{REPO}}/{{TABLE}}/{{TABLE}}.component.scss", + "description": "Component stylesheet", + "content_tpl": ".dg-wrapper {\n margin-top: 15px;\n}\n.heading {\n font-weight: 500;\n margin-bottom: 12px;\n}\n" + }, + { + "source_ref": "frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/io8.ref/product/Product.service.ts", + "path_tpl": "frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/{{REPO}}/{{TABLE}}/{{TABLE}}.service.ts", + "description": "Component Service file", + "content_tpl": "import { Injectable } from '@angular/core';\nimport { Observable } from 'rxjs';\nimport { HttpClient } from '@angular/common/http';\nimport { ApiRequestService } from 'src/app/services/api/api-request.service';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class {{TABLE}}Service {\n private baseURL = '{{REPO}}/{{TABLE}}';\n\n constructor(\n private http: HttpClient,\n private apiRequest: ApiRequestService\n ) { }\n\n getAll(page?: number, size?: number): Observable {\n return this.apiRequest.get(this.baseURL);\n }\n\n getById(id: number): Observable {\n const _http = this.baseURL + '/' + id;\n return this.apiRequest.get(_http);\n }\n\n create(data: any): Observable {\n return this.apiRequest.post(this.baseURL, data);\n }\n\n update(id: number, data: any): Observable {\n const _http = this.baseURL + '/' + id;\n return this.apiRequest.put(_http, data);\n }\n\n delete(id: number): Observable {\n const _http = this.baseURL + '/' + id;\n return this.apiRequest.delete(_http);\n }\n}\n" + } + ], + "datatypes": [ + { + "key": "textfield", + "your_code": "
\n \n \n \n \n
" + }, + { + "key": "number", + "your_code": "
\n \n \n \n \n
" + }, + { + "key": "phone", + "your_code": "
\n \n \n \n \n
" + }, + { + "key": "paragraph", + "your_code": "
\n \n \n \n \n
" + }, + { + "key": "password", + "your_code": "
\n \n \n \n \n
" + }, + { + "key": "textarea", + "your_code": "
\n \n \n \n \n
" + }, + { + "key": "date", + "your_code": "
\n \n \n \n \n
" + }, + { + "key": "datetime", + "your_code": "
\n \n \n \n \n
" + }, + { + "key": "email", + "your_code": "
\n \n \n \n \n
" + }, + { + "key": "toggle_switch", + "your_code": "
\n \n \n \n \n
" + }, + { + "key": "url_field", + "your_code": "
\n \n \n \n \n
" + }, + { + "key": "decimal", + "your_code": "
\n \n \n \n \n
" + }, + { + "key": "percentage", + "your_code": "
\n \n \n \n \n
" + }, + { + "key": "recaptcha", + "your_code": "
\n
\n [reCAPTCHA Verification: {{label}}]\n
\n
" + }, + { + "key": "document_seq", + "your_code": "
\n \n \n \n \n
" + }, + { + "key": "userid", + "your_code": "
\n \n \n \n \n
" + }, + { + "key": "header_field", + "your_code": "
\n

{{label}}

\n
" + }, + { + "key": "select_field", + "your_code": "
\n \n \n \n \n
" + }, + { + "key": "radio_field", + "your_code": "
\n \n \n \n \n \n \n \n
" + }, + { + "key": "checkbox", + "your_code": "
\n \n \n \n \n
" + }, + { + "key": "fileupload", + "your_code": "
\n \n
" + }, + { + "key": "imageupload", + "your_code": "
\n \n
" + }, + { + "key": "audio_field", + "your_code": "
\n \n
" + }, + { + "key": "video_field", + "your_code": "
\n \n
" + }, + { + "key": "button_field", + "your_code": "
\n \n
" + }, + { + "key": "survey_field", + "your_code": "
\n \n \n \n \n
" + }, + { + "key": "field_group", + "your_code": "
\n
\n
{{label}}
\n
\n
" + }, + { + "key": "relationship", + "your_code": "
\n \n \n \n \n
" + }, + { + "key": "currency", + "your_code": "
\n \n \n \n \n
" + }, + { + "key": "value_list", + "your_code": "
\n \n \n \n \n
" + }, + { + "key": "qr_code", + "your_code": "
\n \n \n \n \n
\n \n
\n
" + }, + { + "key": "bar_code", + "your_code": "
\n \n \n \n \n
\n \n
\n
" + }, + { + "key": "calculated_field", + "your_code": "
\n \n \n \n \n
" + }, + { + "key": "data_grid", + "your_code": "
\n \n \n Name\n No {{label}} records added\n \n
" + }, + { + "key": "dependent_dropdown", + "your_code": "
\n \n \n \n \n
" + }, + { + "key": "relation", + "your_code": "
\n \n \n \n \n
" + } + ], + "list_item_tpl": " {{item.{{fieldName}}}}\n", + "ref_files": [ + { + "name": "Product.component.scss", + "path": "frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/io8.ref/product/Product.component.scss", + "default_target": "frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/{{REPO}}/{{TABLE}}/{{TABLE}}.component.scss", + "content": ".dg-wrapper {\n margin-top: 15px;\n}\n.heading {\n font-weight: 500;\n margin-bottom: 12px;\n}\n" + }, + { + "name": "Product.component.html", + "path": "frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/io8.ref/product/Product.component.html", + "default_target": "frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/{{REPO}}/{{TABLE}}/{{TABLE}}.component.html", + "content": "
    \n
    2. \n
  2. {{TABLE}}
    3. \n
\n\n
\n
\n
\n

{{TABLE}} Management

\n
\n
\n \n
\n
\n\n \n \n \n \n Loading ...\n \n
{{error}}
\n \n\n \n \n {{ col | titlecase }}\n \n\n \n \n Action\n \n \n\n \n \n{{LIST_ITEMS}}\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n\n \n \n Items per page\n {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{pagination.totalItems}} items\n \n \n \n
\n\n\n\n

Add {{TABLE}}

\n
\n
\n
\n{{FORM_FIELDS}}\n
\n
\n
\n
\n \n \n
\n\n\n\n\n

Edit {{TABLE}} (ID: {{rowSelected.id}})

\n
\n
\n
\n{{FORM_FIELDS}}\n
\n
\n
\n
\n \n \n
\n\n\n\n\n

Confirm Delete

\n
\n

Are you sure you want to delete this record (ID: {{rowSelected.id}})?

\n
\n
\n \n \n
\n\n" + }, + { + "name": "Product.service.ts", + "path": "frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/io8.ref/product/Product.service.ts", + "default_target": "frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/{{REPO}}/{{TABLE}}/{{TABLE}}.service.ts", + "content": "import { Injectable } from '@angular/core';\nimport { Observable } from 'rxjs';\nimport { HttpClient } from '@angular/common/http';\nimport { ApiRequestService } from 'src/app/services/api/api-request.service';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class {{TABLE}}Service {\n private baseURL = '{{REPO}}/{{TABLE}}';\n\n constructor(\n private http: HttpClient,\n private apiRequest: ApiRequestService\n ) { }\n\n getAll(page?: number, size?: number): Observable {\n return this.apiRequest.get(this.baseURL);\n }\n\n getById(id: number): Observable {\n const _http = this.baseURL + '/' + id;\n return this.apiRequest.get(_http);\n }\n\n create(data: any): Observable {\n return this.apiRequest.post(this.baseURL, data);\n }\n\n update(id: number, data: any): Observable {\n const _http = this.baseURL + '/' + id;\n return this.apiRequest.put(_http, data);\n }\n\n delete(id: number): Observable {\n const _http = this.baseURL + '/' + id;\n return this.apiRequest.delete(_http);\n }\n}\n" + }, + { + "name": "Product.component.ts", + "path": "frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/io8.ref/product/Product.component.ts", + "default_target": "frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/{{REPO}}/{{TABLE}}/{{TABLE}}.component.ts", + "content": "import { Component, OnInit } from '@angular/core';\nimport { ToastrService } from 'ngx-toastr';\nimport { ActivatedRoute, Router } from '@angular/router';\nimport { {{TABLE}}Service } from './{{TABLE}}.service';\nimport { ApiRequestService } from 'src/app/services/api/api-request.service';\n\n@Component({\n selector: 'app-{{TABLE_LOWER}}',\n templateUrl: './{{TABLE}}.component.html',\n styleUrls: ['./{{TABLE}}.component.scss']\n})\nexport class {{TABLE}}Component implements OnInit {\n rowSelected: any = {};\n modaldelete = false;\n modalEdit = false;\n modalAdd = false;\n loading = false;\n items: any[] = [];\n selected: any[] = [];\n error: string;\n/* {{RELATION_DECLARATIONS}} */\n\n constructor(\n private mainService: {{TABLE}}Service,\n private apiRequest: ApiRequestService,\n private toastr: ToastrService,\n private router: Router,\n private route: ActivatedRoute\n ) { }\n\n ngOnInit(): void {\n this.getData();\n/* {{RELATION_LOADERS}} */\n }\n\n getColumns(): string[] {\n if (!this.items || this.items.length === 0) {\n return [];\n }\n return Object.keys(this.items[0]).filter(k => k !== 'id');\n }\n\n getData() {\n this.loading = true;\n this.mainService.getAll().subscribe((data) => {\n this.loading = false;\n this.items = data || [];\n if (this.items.length === 0) {\n this.error = 'No Data Available';\n }\n }, (error) => {\n this.loading = false;\n this.error = 'Server Error';\n });\n }\n\n goToAdd() {\n this.rowSelected = {};\n this.modalAdd = true;\n }\n\n onEdit(row: any) {\n this.rowSelected = Object.assign({}, row);\n this.modalEdit = true;\n }\n\n onDelete(row: any) {\n this.rowSelected = row;\n this.modaldelete = true;\n }\n\n delete(id: number) {\n this.modaldelete = false;\n this.mainService.delete(id).subscribe(() => {\n this.toastr.success('Deleted successfully');\n this.getData();\n }, (error) => {\n this.toastr.error('Failed to delete');\n });\n }\n\n onCreate() {\n this.modalAdd = false;\n this.mainService.create(this.rowSelected).subscribe(() => {\n this.toastr.success('Added successfully');\n this.getData();\n }, (error) => {\n this.toastr.error('Failed to add');\n });\n }\n\n onUpdate(id: number) {\n this.modalEdit = false;\n this.mainService.update(id, this.rowSelected).subscribe(() => {\n this.toastr.success('Updated successfully');\n this.getData();\n }, (error) => {\n this.toastr.error('Failed to update');\n });\n }\n}\n" + } + ], + "check_command": "" +} \ No newline at end of file