What is the correct way to either select an existing object or create a new one in a webpage?

Question

I've been trying to create a web application where I'm trying to create appointments with clients. The way I picture it, when the user of the app wants to create an appointment with a client, they will first select a link like "Create Appointment", and then they will be presented with a screen where they either select an existing client, or enter the information for the new one.

The primary issue I've been struggling with is the general flow of the application: when a POST should occur, and how much should stay in memory. Obviously, if the user needs to create a client, I could forward the browser to another screen, save the user, and send them back, but I really think that saving a client mid-flow (the flow being creating an appointment) is bad; I want to save everything at the end.

I've spent a lot of time investigating frameworks like AngularJS to see if they solve this problem, and I don't think they do. I'm pretty sure I want to do all of this in the DOM with Javascript (because it's all in memory) and then send one POST with everything in it.

Assuming that keeping everything in memory and sending one large POST for the entire workflow, how would you suggest the JSON look? What would be a reasonable way to decipher between an existing client and new client in the JSON? Are there any frameworks that exist that would make it easier to solve this particular problem.

Man, all I wanted to do was make a screen to choose a client or create a new one without having to direct the user away from the flow. Why is this so hard?

Thanks for everything!

Answer 1

A simple solution in Angular will be keep storing data in a $rootScope JSON object. No matter in what page you go, the data will persist. So, when you are done, just send across the data to webservice that take JSON POST. (for example - JERSEY RestFul webservices implementation). Then you can save the data in one shot.

If the submit is not done, just nullify the object or empty the JSON objects as needed.

Answer 2

In a JS MVC framework - as any JS app - you define your objects/classes/models and work with them. If you retrieve a list of clients from a Web Service (an AJAX call) angularJS automatically converts it to a JS Object, either using $http or $resource (both are well documented in the framework's website). But you can always create your own, and add it to your DB via POST immediately, or later on, and have no need to change "views" in order to add an new instance of the model.

Here is an example of a controller I have for an application of mine. Most of the logic has been stripped out for clarity, and replaced with comments. It represents an entry, being that the list of entries is stored in the parent controller, and the controller is produced via a ng-repeat directive (seen in the html code below).

Controller:

/**
 * Entry Controller
 * @class entryCtrl
 */
ucpaTpaApp.controller(
    'entryCtrl', 
    ['$scope', 'httpService',
    function($scope, httpService) {


        /**
         * initiate the entry model, with all the required logic
         * Called upon the controller's construction 
         */
        $scope.initEntry = function initEntry(){
            if(!$scope.entry){
                $scope.newEntry();
            }
        }


        /**
         * Set the fields of the entry, stored on the indicator's metadata
         * for new entries.
         */
        $scope.newEntry = function newEntry(){

            $scope.entry = {
                status: {
                    state: 'new',
                    connection: 'idle'
                },
                field_values: {},
                saved_field_values: {},
                title: ""
            };

            for(var field in $scope.fields){
                $scope.entry.field_values[String($scope.fields[field].id)] = '';
            }
        };


        $scope.resetFields = function resetFields(){
         // Resets fields to original status (blank if it is new)
        };


        /**
         * Save a new entry, adding it to the list of entries, and attempting
         * to save to the server
         */
        $scope.addEntry = function addEntry(){
         // Add a copy to array, with status 'new',
             // and call saveEntry on it
             // After that, reset fields
        };

        $scope.deleteEntry = function deleteEntry(){
         // Delete on WS, remove from array on confirmation
        };

        $scope.saveEntry = function saveEntry(){
         // Save to WS, update status on confirmation
        };


        $scope.initEntry();

    }]
);

Template:

<div class="indicator">
    <h3>{{indicator.title}} - {{indicator.score}}</h3>
    <div 
    ng-repeat="entry in indicator.entries" 
    ng-form="{{entry.id}}" 
    ng-controller="entryCtrl">
        <tr-entry>
        </tr-entry>
    </div>
</div>
<div ng-controller="entryCtrl">
    <tr-entry>
    </tr-entry>     
</div>

As you can see, the list of entries is presented with the ng-repeat directive (the actual entry DOM is created with it's own directive, tr-entry). Then, an extra entry, the "new" entry, is created at the end of this list. If that entry is saved (added), it's entry model is copied to the array, and angularJS attempts to save it. The outcome being: the "new entry" sets its field to blank, and a new entry appears on the ng-repeat list. Of course, only when confirmation of it having been saved to the DB is received does it's status change from "new" to "saved" (as the backend performs data validation, it may reject an entry).

Answer 3

Why don't you use AJAX ??? First choose/create a client that will be one ajax call to server and user will stay on same view. After that when server respond, make an appointment for that client then you can submit that page or again if you want to do something else keeping same view, you can have another Ajax call. Don't wait for all data to pile up then you post simply use AJAX. :)