Year: 2018

Imagine that you have this kind of texts:

Alpert of Metz – 11th-century – France – Medieval writers
Aimoin of Fleury – c. 960 – c. 1010 – France – Medieval writers
Amulo Lugdunensis (Archbishop of Lyon) – 9th-century – France – Medieval writers
Amulo Lugdunensis (Archbishop of Lyon) – 9th-century – France / Carolingian Empire – Medieval writers
Andrew of Fleury – 11th-century – France – Medieval writers
Angelomus of Luxeuil – 9th-century – Francia / France – Medieval writers

Vitsentzos or Vikentios Kornaros or Vincenzo Cornaro – c. 1553 – c. 1614 – Kingdom of Candia / Crete / Greece – Renaissance

Adrianus of Tyre – c. 113 – c. 193 – Greece / Roman Empire – Ancient & Classical writers

How transform this unstrcutured data to make an application that search like in the picture below ( just the R from CRUD )?

Detailing  the tools:

1.  Transforming data: Excel + VBA – to parse from the text the name, country / countries , years period  movement and generate insert  /stored procedurees call

2. Storing+ retrieving data: Sql Server – creating tables and stored procedures to insert / retrieving data

3. Acessing data: .NET Core – to make WebAPI to export as WebAPI HTTP endpoints t

4. Display data:

• .Angular   – to make the interface to the web
•  https://refreshless.com/nouislider/ 

5. Deploy:

• RedfHat OpenShift to deploy site
• Azure to have sql server on the web

Hours or work ~ 20 . And hey, it works!

TL;DR: Deliver all the table content continuously paginated to the browser with .NET Core and Angular


Long Description:

I was thinking that delivering paginating data is kind of lame. Why should I , for seeing the whole data, should keep pressing next page / or scrolling  down ? I understand that on the server it is necessary to do this – but on the client ?

And I was thinking – what about Observables in Angular  , combined with SignalR ? Those observables could obtain data every time – and SignalR is pushing cotinously, until it arrives at the end of the data.

Done with talking –  let’s show some code:

We have an Employee classs

public class Employee
    {
        public string Name { get; set; }
        public int Id { get; set; }

    }

code

and we are feeding with data in a DALEmployee

public class DalEmployee
    {
        public int FindCountEmployees(string name)
        {
            return ((name ?? "").Length + 1) * 10;
        }

        public async Task<Employee[]> FindEmployee(int pageNumber, int pageSize, string name)
        {
            await Task.Delay((pageNumber + 1) * 1000);
            var ret = new Employee[pageSize];
            int startNumber = (pageNumber - 1) * pageSize;
            for (int i = 0; i < pageSize; i++)
            {
                var e =new Employee();
                e.Id = startNumber + i;
                e.Name = e.Id + "employee ";
                ret[i] = e;
            }

            return ret;
        }
    }

We have SignalR that delivers continously the data via a Hub that is connected to an URL

//do not forget  services.AddSignalR().AddJsonProtocol()  ;
            app.UseSignalR(routes =>
            {
                routes.MapHub<MyHub>("/employees");
            })

and delivers all data continuously

 public class MyHub: Hub
    {
       
        public override async Task OnConnectedAsync()
        {
            Console.WriteLine("!!!!connected");
            await Task.Delay(1000);
        }
        public ChannelReader<Employee[]> GetEmps(string name)
        {
            var channel = Channel.CreateUnbounded<Employee[]>();
            _ = WriteItems(channel.Writer, name); //it not awaits!

            return channel.Reader;
        }

        private async Task WriteItems(ChannelWriter<Employee[]> writer, string name)
        {
            var dal = new DalEmployee();
            var nr = dal.FindCountEmployees(name);
            int nrPages = 10;
            for (int i = 0; i < nr / nrPages; i++)
            {
                var data = await dal.FindEmployee(i+1, nrPages, name);
                await writer.WriteAsync(data);
            }

            writer.TryComplete();            
        }

And this is all that is required on the .NET Core side

For the Angular Part

We have a hubconnectionbuilder that connect to the hub

export class MydataService {

  h:HubConnection;
  constructor(private http: HttpClient) { 
    this.h= new HubConnectionBuilder()
      .withUrl(environment.urlAPI + "/employees")
      .withHubProtocol(new JsonHubProtocol())
      //.withHubProtocol(new MessagePackHubProtocol())
      .build();
      window.alert('start');
    this.h.start()
    .catch((t) => window.alert(1));
  }
  
  
}

and a observable that returns the values

  public getAllEmpsStream(name:string): Observable<Employee[]>{
    
    const subject = new Subject<Employee[]>();
    this.h.stream<Employee[]>("GetEmps",name).subscribe(subject);
    return subject.asObservable();

  }

The code on the component is aggregating the values into an array

findEmployees(){
    this.load=true;
    this.service
      
      .getAllEmpsStream(this.nameEmp)
      //.getEmps(this.nameEmp)
      .pipe(finalize(() => this.load=false))
      .subscribe(it  => {
        
        //window.alert(it.length);
        this.emp.push(...it);

      });

  }

And that is all. All the values are returned page after page without the need of human intervention…