1- import { Component } from '@angular/core' ;
1+ import { Component , computed , effect , OnInit } from '@angular/core' ;
22import { MessageService } from 'primeng/api' ;
3+ import { WorkflowsListStore } from '../../../stores/workflows-list/workflows-list-store.service' ;
4+ import { WorkflowService } from './service/workflow.service' ;
35
46interface FlowsColumn {
57 header : string ;
@@ -11,116 +13,51 @@ interface FlowsColumn {
1113 templateUrl : './manage-workflows.component.html' ,
1214 styleUrl : './manage-workflows.component.scss'
1315} )
14- export class ManageWorkflowsComponent {
15- files : any [ ] = [ ] ; // List of all uploaded files
16- selectedFileContent : { headers : string [ ] , data : any [ ] } | null = null ;
17- uploadedFileColumns : FlowsColumn [ ] = [ ] ;
18-
19- // Available database types for column mapping
20- dbTypes = [
21- { label : 'Text' , value : 'TEXT' } ,
22- { label : 'Integer' , value : 'INTEGER' } ,
23- { label : 'Decimal' , value : 'DECIMAL' } ,
24- { label : 'Date' , value : 'DATE' } ,
25- { label : 'Boolean' , value : 'BOOLEAN' }
26- ] ;
27-
28- constructor ( private messageService : MessageService ) { }
29-
30- ngOnInit ( ) {
31- // Mock initial file list (in a real app, you'd fetch this from a server)
32- this . files = [
33- { name : 'flow1' , lastModified : '2025-08-15' } ,
34- { name : 'flow2' , lastModified : '2025-08-20' } ,
35- ] ;
16+ export class ManageWorkflowsComponent implements OnInit {
17+ public readonly workflows = computed ( ( ) => this . workflowListStore . vm ( ) . workflows ) ;
18+ public readonly isLoading = computed ( ( ) => this . workflowListStore . vm ( ) . isLoadingWorkflows ) ;
19+
20+ constructor (
21+ private readonly workflowListStore : WorkflowsListStore ,
22+ private readonly workflowService : WorkflowService ,
23+ private readonly messageService : MessageService ,
24+ ) {
25+ effect ( ( ) => {
26+ console . log ( this . workflowListStore . vm ( ) )
27+ } ) ;
3628 }
3729
38- // --- FILE LIST ACTIONS ---
30+ public onDeleteWorkflow ( workflowId : string , workflowStatus : string ) {
31+ if ( workflowStatus === 'Running' ) {
32+ this . messageService . add ( {
33+ severity : 'error' ,
34+ summary : 'Workflow is Running. first you need to close it.' ,
35+ } )
3936
40- /**
41- * Deletes a file from the list.
42- * @param fileName The name of the file to delete.
43- */
44- deleteFile ( fileName : string ) {
45- this . files = this . files . filter ( f => f . name !== fileName ) ;
46- this . messageService . add ( { severity : 'warn' , summary : 'Deleted' , detail : `File '${ fileName } ' removed.` } ) ;
47- // If the deleted file was being viewed, clear the view
48- if ( this . selectedFileContent && fileName === 'currently_viewed_file.csv' ) { // Mock logic
49- this . selectedFileContent = null ;
37+ return ;
5038 }
51- }
52-
53- /**
54- * Displays the content of a selected CSV file as a table.
55- * @param file The file object to view.
56- */
57- viewFile ( file : any ) {
58- // In a real app, you would fetch and parse the file content from your server.
59- // Here we'll just mock the data for demonstration.
60- this . selectedFileContent = {
61- headers : [ 'ID' , 'ProductName' , 'Price' , 'Stock' ] ,
62- data : [
63- { ID : 1 , ProductName : 'Laptop' , Price : 1200 , Stock : 50 } ,
64- { ID : 2 , ProductName : 'Mouse' , Price : 25 , Stock : 300 } ,
65- { ID : 3 , ProductName : 'Keyboard' , Price : 75 , Stock : 150 }
66- ]
67- } ;
68- this . uploadedFileColumns = [ ] ; // Hide the upload view
69- }
70-
71- // --- FILE UPLOAD AND PROCESSING ---
72-
73- /**
74- * Handles the file upload event. Reads the CSV and prepares it for type mapping.
75- * @param event The upload event containing the file.
76- */
77- onFileUpload ( event : any ) {
78- const file = event . files [ 0 ] ;
79- const reader = new FileReader ( ) ;
8039
81- reader . onload = ( e ) => {
82- const text = reader . result as string ;
83- const lines = text . split ( / \r \n | \n / ) . filter ( line => line . trim ( ) !== '' ) ; // Split lines and remove empty ones
84-
85- if ( lines . length > 0 ) {
86- const headers = lines [ 0 ] . split ( ',' ) ;
87- this . uploadedFileColumns = headers . map ( header => ( {
88- header : header . trim ( ) ,
89- selectedType : 'TEXT' // Default to TEXT
90- } ) ) ;
91-
92- // Add the new file to our list
93- this . files . push ( {
94- name : file . name ,
95- size : `${ ( file . size / 1024 ) . toFixed ( 2 ) } KB` ,
96- lastModified : new Date ( ) . toISOString ( ) . split ( 'T' ) [ 0 ]
97- } ) ;
98-
99- this . selectedFileContent = null ; // Hide file view
100- this . messageService . add ( { severity : 'success' , summary : 'Success' , detail : 'File uploaded and parsed.' } ) ;
101- } else {
102- this . messageService . add ( { severity : 'error' , summary : 'Error' , detail : 'The uploaded file is empty.' } ) ;
40+ this . workflowService . deleteWorkflowById ( workflowId ) . subscribe ( {
41+ next : ( ) => {
42+ this . messageService . add ( {
43+ severity : 'success' ,
44+ summary : 'Workflow deleted successfully.' ,
45+ } )
46+ this . workflowListStore . loadWorkflows ( ) ;
47+ } ,
48+ error : ( ) => {
49+ this . messageService . add ( {
50+ severity : 'error' ,
51+ summary : 'Workflow deleted failed' ,
52+ } )
10353 }
104- } ;
105-
106- reader . onerror = ( ) => {
107- this . messageService . add ( { severity : 'error' , summary : 'Error' , detail : 'Failed to read file.' } ) ;
108- } ;
109-
110- reader . readAsText ( file ) ;
54+ } )
11155 }
11256
113- /**
114- * Finalizes the column type selection.
115- */
116- confirmColumnTypes ( ) {
117- // In a real app, you would send `this.uploadedFileColumns` to your backend
118- // to save the mapping and process the data.
119- console . log ( 'Final column mapping:' , this . uploadedFileColumns ) ;
120- this . messageService . add ( { severity : 'info' , summary : 'Confirmed' , detail : 'Column types have been set.' } ) ;
57+ public onEditWorkflow ( workflowId : string ) { }
12158
122- // Clear the view after confirming
123- this . uploadedFileColumns = [ ] ;
59+ ngOnInit ( ) {
60+ this . workflowListStore . loadWorkflows ( ) ;
12461 }
125-
12662}
63+
0 commit comments