Altinet
  • Home
  • Blog
  • Contact





React.js invoicing CRUD application, part 2: Description

On 01 Jun, 2015
Uncategorized
By : Bruno Samardzic
No Comments
Views : 7863

 

What interested me most about React is how I can use it to solve some basic data input problems. So the application needed to consist of these basic features:

1. Easy form creation
2. Simple, cross-field and custom validation
3. Look-up tables and dropdowns
4. After input calculations (between properties and components)
5. Detail input (invoice items)
6. Integration with server-side technologies

Honestly, I’m pretty frustrated with the current crop of Todo apps. They are completely useless. I think that a basic invoicing app does a much better job of presenting maturity and power of a certain framework, but I guess that would make too many frameworks and tools look ridiculous. To set up a basic invoicing app you need 3 tables: Partners, Invoice and InvoiceDetail. You need 2 forms, of which the invoicing form would be the one that holds most of the complexity. Actually, you could completely toss out the Partner form, and have it only as a look-up table. It’s a simple, yet very comprehensive demo app.

The invoice form contains partner dropdown, total fields for calculating netto, tax, and brutto values. Adding or subtracting invoice items should change calculated totals. Invoice items also contain calculations (multiplying quantity and unit price) that then have to trigger totals calculation. The validation should work on partner field, date and totals.

All of these features have to be easy to implement with minimal boilerplate and highly extensible (convention over configuration).

In the next post I’ll explain some libraries I used to achieve this, and some additions I had to do to make it all work. 
You can already check out the source code on github, and a demo app (link in the description)

https://github.com/brunoAltinet/ReactAspNetCrudExample

 



Previous Post Next Post 

About The Author

Bruno Samardzic


Number of Posts : 45
All Posts by : Bruno Samardzic

Leave a Comment

Click here to cancel reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>





Recent Posts

  • Angular vs React: round 2
  • Why programming is hard
  • Orchard Workflows, undocumented gem
  • The React Redux
  • React.js invoicing CRUD application, part 2: Description

Recent Comments

  • Angshuman on Animation for starred grid rows and columns using xaml
  • Advanced Excel Training in Lucknow on Angular vs React: round 2
  • Reginald Sophomore on My example of Angularjs directive
  • Slobodan on Angular and Breeze – story so far.
  • Bruno Samardzic on Reaction to Ember-forged Durandal Angularly Knocking out my Backbone, or my JS MVC framework research conclusion.

Contact

Altinet d.o.o.

OIB: 97429091194

Čulinečka cesta 146, Zagreb

Tel: +385 (1) 2946 819

Mob: +385 (98) 210 756

IBAN: HR4323400091110406470

Latest tweets