Open Closed

Using progress bar with angular + core #10667


0
wizgod created

Greetings Programs!

RE: AspNetZero - Angular + Core 10.2.

I am uploading an excel file that I loop through the rows and processing them.

I would like to be able to use a progress bar (https://ej2.syncfusion.com/angular/demos/#/bootstrap5/progress-bar/Linear) so that I can display which row is currently being processed.

Here is my controller method for processing the file; within the loop at the end, I would like to pass back the current row value to the angular component.

Any thoughts as to how I can acheive this?

Thanks,

Wg

public async Task BulkPayrollAdjustments(IFormFile file, string notes)
{
        var fileName = Path.GetFileName(file.FileName);
        if (fileName.IsNullOrWhiteSpace()) return L("File_Empty_Error");

        //New instance of ExcelEngine is created 
        //Equivalent to launching Microsoft Excel with no workbooks open
        //Instantiate the spreadsheet creation engine
        var excelEngine = new ExcelEngine();

        //Instantiate the Excel application object
        var application = excelEngine.Excel;

        //var xlFile = new FileStream(tempFilePath, FileMode.Open);
        var xlFile = file.OpenReadStream();
        var workbook = application.Workbooks.Open(xlFile);
        var worksheet = workbook.Worksheets.FirstOrDefault();
        if (worksheet == null) return "No worksheet found";

        var start = worksheet.UsedRange.Row;
        var end = worksheet.UsedRange.LastRow;
        var col = worksheet.UsedRange.Column;

        var bulkUpdates = new List<BulkUpdateDto>();

		// Get the rows.
        for (var row = start + 1; row <= end; row++)
        {
            var bulkUpdateDto = new BulkUpdateDto
            {
				// Create object from row.
                FromBaseId = worksheet.Range[row, col].CalculatedValue;
                // ...
            };

            bulkUpdates.Add(bulkUpdateDto);
        }

        //Close the instance of IWorkbook
        workbook.Close();

        //Dispose the instance of ExcelEngine
        excelEngine.Dispose();

		var currentRow = 1;
		foreach (var bulkUpdate in bulkUpdates)
		{
            //*****************************************************************
            // I would like to send the current row number value here.
            //*****************************************************************
            sendCurrentRowNumberToComponent(currentRow);

			await _appService.ProcessUpdate(bulkUpdate)
			
			currentRow++;
			
			await CurrentUnitOfWork.SaveChangesAsync();
		}
    }

5 Answer(s)
  • 0
    ismcagdas created
    Support Team

    Hi @wizgod

    If you want to update the client side data, you can send a signalR request to client to inform it for the executed row number.

  • 0
    wizgod created

    Hi @ismcagdas,

    Is there any code I can look at to do this?

    Thanks,

    Wg

  • 0
    musa.demir created
    Support Team

    Hi @wizgod

    We don't have any example since it's a specific use case you need, not common requirement. But as @ismcagdas mentioned, you may connect to the server via signalr and send the current progress of the excel file to the client from server. And show a progress bar in client's ui. It is one of the possible solutions.

  • 0
    wizgod created

    Hi @musa.demir, @ismcagdas,

    I have initialized my signalr service along with the chat service:

            if (this.appSession.application) {
                SignalRHelper.initSignalR(() => {
                    this._chatSignalrService.init();
                    this._commonSignalrService.init();
                });
            }
    

    In my service, this is working and I am receiving the messages from the server:

        registerCommonEvents(connection): void {
            connection.on('sendProgress', (progress) => {
                console.log('sendProgress', progress);
                abp.event.trigger('app.progress.received', progress);
            });
        }
    

    However, in my component, this is not working:

        ngOnInit(): void {
            super.ngOnInit();
    
            abp.event.on('abp.progress.received', (progress) => {
                console.log('progressReceived', progress);
                this.progress = progress;
            });
        }
    

    Any thoughts?

    Thanks,

    Wg

  • 0
    wizgod created

    Hi @musa.demir, @ismcagdas,

    I found the issue - it was a typo in the event name in the controller - "abp." instead of "app.".

    Wg