Labels

Learn the powerful enterprise adaptable database:

Getting Started With ADABAS & Natural

Sunday, January 22, 2017

305 Create Ionic Sales Book Master-Detail Records


.
305 Create Ionic Sales Book Master-Detail Records
Building On Codepen Platform
Continue from the previous tutorial, http://basic-steps.blogspot.my/2017/01/304-create-ionic-sales-book-master.html

1) Prepare Insert Record Modal.

HTML (add codes to the HTML)
   <script id="insertRecord.html" type="text/ng-template">
       <div class="modal">
           <!-- Modal header bar -->
           <ion-header-bar class="bar-secondary">
               <h1 class="title">Insert Record</h1>
               <button class="button button-clear button-positive" ng-click="closeInsertRecord()">Cancel</button>
           </ion-header-bar>
           <!-- Modal content area -->
           <ion-content>
               <form ng-submit="submitInsertRecord(record)">
                   <div class="list">
                       <label class="item item-input">
           <input type="date" placeholder="Transaction Date" ng-model="record.date">
         </label>
                       <label class="item item-input">
           <input type="text" placeholder="Transaction Value" ng-model="record.value">
         </label>
                   </div>
                   <div class="padding">
                       <button type="submit" class="button button-block button-positive">Insert Record</button>
                   </div>
               </form>
           </ion-content>
       </div>
   </script>  
JS (add codes to the detailsCtrl Controller. This requires $ionicModal and DataTree injection.)
            $scope.details = DataTree.all("salesRecordBookDetails");
            //console.log($scope.details);
           
            //convert string data into date object
            $scope.details.forEach(function(d){
              d.date = new Date(d.date); });
         
            // Create and load the Modal
            $ionicModal.fromTemplateUrl('insertRecord.html', function(modal) {
                $scope.insertRecordModal = modal;
            }, {
                scope: $scope,
                animation: 'slide-in-up'
            });
            // Called when the form is submitted
            $scope.submitInsertRecord = function(record) {
                var d = new Date(record.date);
                var utcDate = new Date(Date.UTC(
                    d.getFullYear(),
                    d.getMonth(),
                    d.getDate(), 0, 0, 0));
                $scope.details.push({
                    date: utcDate,
                    value: record.value
                });
             
              $scope.details.sort(function(a,b) {
                return new Date(a.date).getTime() -
                    new Date(b.date).getTime()
              });
             
                DataTree.save("salesRecordBookDetails", $scope.details);
                record.date = "";
                record.value = "";
                $scope.insertRecordModal.hide();
            };
            // Open our new task modal
            $scope.insertRecord = function() {
                $scope.insertRecordModal.show();
            };
            // Close the new task modal
            $scope.closeInsertRecord = function() {
                $scope.insertRecordModal.hide();
            };    

2) Add Date Search Input .

HTML
<html>
<head>
    <meta charset="utf-8">
    <title>Diary</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <!-- Internal Library
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    -->
    <!-- Cloud Library -->
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
    <!-- Needed for Cordova/PhoneGap (will be a 404 during development) -->
    <script src="cordova.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script>
</head>
<body ng-app="app">
    <div>
        <div>
            <ion-nav-bar class="bar-stable">
                <ion-nav-back-button></ion-nav-back-button>
            </ion-nav-bar>
            <ion-nav-view></ion-nav-view>
        </div>
    </div>
<script id="home.html" type="text/ng-template">
    <ion-view title="Home" id="page1">
        <ion-content padding="true" class="has-header">
            <button class="button button-block button-calm" ui-sref="menu.details">
   View Details
</button>
            <button class="button button-block button-royal" ui-sref="menu.monthly">
   View Summary
</button>
        </ion-content>
    </ion-view>
</script>
<script id="menu.html" type="text/ng-template">
    <ion-side-menus enable-menu-with-back-views="false">
        <ion-side-menu-content>
            <ion-nav-bar class="bar-stable">
                <ion-nav-back-button></ion-nav-back-button>
                <ion-nav-buttons side="left">
                    <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
                </ion-nav-buttons>
            </ion-nav-bar>
            <ion-nav-view name="side-menu21"></ion-nav-view>
        </ion-side-menu-content>
        <ion-side-menu side="left" id="side-menu21">
            <ion-header-bar class="bar-stable">
                <div class="title">Menu</div>
            </ion-header-bar>
            <ion-content padding="false" class="side-menu-left has-header ">
                <ion-list id="menu-list1">
                    <ion-item id="menu-list-item1" ui-sref="menu.home" menu-close="">Home</ion-item>
                    <ion-item id="menu-list-item2" ui-sref="menu.monthly" menu-close="">Summary</ion-item>
                </ion-list>
            </ion-content>
        </ion-side-menu>
    </ion-side-menus>
</script>
<script id="monthly.html" type="text/ng-template">
    <ion-view title="Monthly" id="page2">
        <ion-content padding="true" class="has-header">
            <h2>MONTHLY SUMMARY</h2>
            <div class="row">
                <div class="col"><b>Date</b></div>
                <div class="col"><b>Sales</b></div>
            </div>
            <div ui-sref="menu.daily">test</test>
                <div class="row" ng-class-odd="'odd'" ng-class-even="'even'" ng-repeat="(key, value)  in summaryMonthly">
                    <div class="col">{{key}}</div>
                    <div class="col">{{value}}</div>
                </div>
        </ion-content>
    </ion-view>
</script>
    <script id="daily.html" type="text/ng-template">
        <ion-view title="Daily" id="page3">
            <ion-content padding="true" class="has-header">
                <h2>DAILY SUMMARY</h2>
                <div class="row">
                    <div class="col"><b>Date</b></div>
                    <div class="col"><b>Sales</b></div>
                </div>
                <div  ui-sref="menu.details">test</test>
                <div class="row" ng-class-odd="'odd'" ng-class-even="'even'" ng-repeat="(key, value)  in summaryDaily">
                    <div class="col">{{key}}</div>
                    <div class="col">{{value}}</div>
                </div>
            </ion-content>
        </ion-view>
    </script>
    <script id="details.html" type="text/ng-template">
        <ion-view title="Details" id="page4">
            <ion-nav-buttons side="right" class="has-header">
                <button class="button button-icon" ng-click="insertRecord()">
        <i class="icon ion-compose"></i>
      </button>
            </ion-nav-buttons>
            <ion-content padding="true" class="has-header">
<label class="item item-input">
  <span class="input-label">Date</span>
  <input type="date" ng-model="entry.searchDate" ng-change="searchDate()">
</label>
                <h2>DETAILS</h2>
                <div class="row">
                    <div class="col"><b>Date</b></div>
                    <div class="col"><b>Sales</b></div>
                </div>
                <div class="row" ng-class-odd="'odd'" ng-class-even="'even'" ng-repeat="detail in details |orderBy:'-date'">
                    <div class="col">{{detail.date| date:'MM/dd/yyyy'}}</div>
                    <div class="col">{{detail.value}}</div>
                </div>
            </ion-content>
        </ion-view>
    </script>
   <script id="insertRecord.html" type="text/ng-template">
       <div class="modal">
           <!-- Modal header bar -->
           <ion-header-bar class="bar-secondary">
               <h1 class="title">Insert Record</h1>
               <button class="button button-clear button-positive" ng-click="closeInsertRecord()">Cancel</button>
           </ion-header-bar>
           <!-- Modal content area -->
           <ion-content>
               <form ng-submit="submitInsertRecord(entry)">
                   <div class="list">
                       <label class="item item-input">
           <input type="date" placeholder="Transaction Date" ng-model="entry.date">
         </label>
                       <label class="item item-input">
           <input type="text" placeholder="Transaction Value" ng-model="entry.value">
         </label>
                   </div>
                   <div class="padding">
                       <button type="submit" class="button button-block button-positive">Insert Record</button>
                   </div>
               </form>
           </ion-content>
       </div>
   </script>  
</body>
</html>
JS
To implement date search on the details records, we will use two variables:
1) $scope.details will hold selected data for display. Its content will be filtered according to the $scope.entry.searchDate value.
2) sourceDetails will hold all data for internal control.
angular.module('app', ['ionic'])
    .factory('DataTree', function() {
        return {
            all: function(trunkName) {
                var trunkString = window.localStorage[trunkName];
                if (trunkString) {
                    return angular.fromJson(trunkString);
                }
                return [];
            },
            save: function(trunkName, trunkString) {
                //console.log(trunkString);
                window.localStorage[trunkName] = angular.toJson(trunkString);
            }
        }
    })
    .controller('homeCtrl', ['$scope', '$stateParams', '$ionicModal', 'DataTree',
        function($scope, $stateParams, $ionicModal, DataTree) {}
    ])
    .controller('menuCtrl', ['$scope', '$stateParams',
        function($scope, $stateParams) {}
    ])
    .controller('monthlyCtrl', ['$scope', '$stateParams', 'DataTree',
        function($scope, $stateParams, DataTree) {}
    ])
    .controller('dailyCtrl', ['$scope', '$stateParams', '$ionicModal', 'DataTree',
        function($scope, $stateParams, $ionicModal, DataTree) {}
    ])
    .controller('detailsCtrl', ['$scope', '$stateParams', '$ionicModal', 'DataTree',
        function($scope, $stateParams, $ionicModal, DataTree) {
            $scope.entry={
              searchDate:null,
              date:new Date(),
              value:0};
            var sourceDetails = DataTree.all("salesRecordBookDetails");
            $scope.details = sourceDetails;
            //console.log($scope.details);
            //convert string data into date object
            //so that we can apply sort order filter into ng-repeat
            $scope.details.forEach(function(d) {
                d.date = new Date(d.date);
            });
            // Create and load the Modal
            $ionicModal.fromTemplateUrl('insertRecord.html', function(modal) {
                $scope.insertRecordModal = modal;
            }, {
                scope: $scope,
                animation: 'slide-in-up'
            });
            // Called when the form is submitted
            $scope.submitInsertRecord = function(entry) {
                //convert the date into UTC Date
                //to avoid time zone differences
                var d = new Date(entry.date);
                var utcDate = new Date(Date.UTC(
                    d.getFullYear(),
                    d.getMonth(),
                    d.getDate(), 0, 0, 0));
                // add new item to data source
                sourceDetails.push({
                    date: utcDate,
                    value: entry.value
                });
                //sort data source by date in ascending order
                sourceDetails.sort(function(a, b) {
                    return new Date(a.date).getTime() -
                        new Date(b.date).getTime()
                });
                //save data source into storage
                DataTree.save("salesRecordBookDetails", sourceDetails);
                $scope.Details = sourceDetails;
                //if search date entry exists
                //perform searchDate()
                if($scope.entry.searchDate) {
                  $scope.searchDate();
                }
             
                //reset fields and hide dialog
                //if searchDate is not null get its value
                //else, get current date value
                if($scope.entry.searchDate==null){
                  $scope.entry.date = new Date();
                }else{
                   $scope.entry.date = $scope.entry.searchDate;
                }
                $scope.entry.value = 0;
                $scope.insertRecordModal.hide();
            };
            // Open our new task modal
            $scope.insertRecord = function() {
                //if searchDate is not null get its value
                //else, get current date value
                if($scope.entry.searchDate==null){
                  $scope.entry.date = new Date();
                }else{
                   $scope.entry.date = $scope.entry.searchDate;
                }
                $scope.entry.value = 0;
                $scope.insertRecordModal.show();
            };
            // Close the new task modal
            $scope.closeInsertRecord = function() {
                $scope.insertRecordModal.hide();
            };
            $scope.searchDate = function() {
                //if input is null
                if ($scope.entry.searchDate==null) {
                    $scope.details = sourceDetails;
                } else { //if input is not null
                    var d = new Date($scope.entry.searchDate);
                    var testDate = new Date(Date.UTC(
                        d.getFullYear(),
                        d.getMonth(),
                        d.getDate(), 0, 0, 0));
                    var obj = sourceDetails.filter(function(obj) {
                        var sourceDate = new Date(obj.date);
                        //console.log(sourceDate.getTime()+"="+utcDate.getTime());
                        return (sourceDate.getTime() === testDate.getTime());
                        //return obj.date === $scope.detailsPage.inputDate;
                    });
                    //console.log(obj);
                    $scope.details = obj;
                }
            }
        }
    ])
    .config(function($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('menu.home', {
                url: '/page1',
                views: {
                    'side-menu21': {
                        templateUrl: 'home.html',
                        controller: 'homeCtrl'
                    }
                }
            })
            .state('menu', {
                url: '/side-menu21',
                templateUrl: 'menu.html',
                controller: 'menuCtrl'
            })
            .state('menu.monthly', {
                url: '/page2',
                views: {
                    'side-menu21': {
                        templateUrl: 'monthly.html',
                        controller: 'monthlyCtrl'
                    }
                }
            })
            .state('menu.daily', {
                url: '/page3',
                views: {
                    'side-menu21': {
                        templateUrl: 'daily.html',
                        controller: 'dailyCtrl'
                    }
                }
            })
            .state('menu.details', {
                url: '/page4',
                views: {
                    'side-menu21': {
                        templateUrl: 'details.html',
                        controller: 'detailsCtrl'
                    }
                }
            })
        $urlRouterProvider.otherwise('/side-menu21/page1')
    });

.

No comments:

Post a Comment