Search This Blog

Sunday, January 27, 2019

SharePoint - AngularJS using ng-Grid


<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="/sites/me/SiteAssets/sMS/jquery-1.11.1.min.js"></script>
    <script src="/sites/me/SiteAssets/sMS/bootstrap.min.js"></script>
    <link href="/sites/me/SiteAssets/sMS/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> 
    <script src="/sites/me/SiteAssets/sMS/jquery-ui.js"></script>
  
    <script src="/sites/me/SiteAssets/sMS/angular.min.js"></script>
    <script src="/sites/me/SiteAssets/sMS/angular-messages.min.js"></script>

    <link href="/sites/me/SiteAssets/sMS/ng-grid.min.css" rel="stylesheet" id="ng-grid-min-css"> 
    <script src="/sites/me/SiteAssets/sMS/ng-grid.min.js"></script>
 
    <script>
        var app = angular.module('smsApp', ["ngMessages","ngGrid"]);    
        app.constant('SharePointList', {
            smsApproval: 'smsApproval'
        });
        app.factory("baseSvc", ["$http", "$q", function ($http, $q) {
            var baseUrl = _spPageContextInfo.webAbsoluteUrl;
            var getRequest = function (query) {
                var deferred = $q.defer();
                $http({
                    url: baseUrl + query,
                    method: "GET",
                    headers: {
                        "accept": "application/json;odata=verbose",
                        "content-Type": "application/json;odata=verbose"
                    }
                }).then(function (result){
                    deferred.resolve(result);
                },function (error){
                    deferred.reject(status);
                });
                return deferred.promise;
            };
            var postRequest = function (data, url) {
                var deferred = $q.defer();
                $http({
                    url: baseUrl + url,
                    method: "POST",
                    headers: {
                        "accept": "application/json;odata=verbose",
                        "X-RequestDigest": document.getElementById("__REQUESTDIGEST").value,
                        "content-Type": "application/json;odata=verbose"
                    },
                    data: JSON.stringify(data)
                }).then(function (result) {
                    deferred.resolve(result);
                }, function (error) {
                    deferred.reject(status);
                });
                return deferred.promise;
            };
            var updateRequest = function (data, url) {
                var deferred = $q.defer();
                $http({
                    url: baseUrl + url,
                    method: "PATCH",
                    headers: {
                        "accept": "application/json;odata=verbose",
                        "X-RequestDigest": document.getElementById("__REQUESTDIGEST").value,
                        "content-Type": "application/json;odata=verbose",
                        "X-Http-Method": "PATCH",
                        "If-Match": "*"
                    },
                    data: JSON.stringify(data)
                }).then(function (result) {
                    deferred.resolve(result);
                }, function (error) {
                    deferred.reject(status);
                });
                return deferred.promise;
            };
            var deleteRequest = function (url) {
                var deferred = $q.defer();
                $http({
                    url: baseUrl + url,
                    method: "DELETE",
                    headers: {
                        "accept": "application/json;odata=verbose",
                        "X-RequestDigest": document.getElementById("__REQUESTDIGEST").value,
                        "IF-MATCH": "*"
                    }
                }).then(function (result) {
                    deferred.resolve(result);
                }, function (error) {
                    deferred.reject(status);
                });
                return deferred.promise;
            };
            return {
                getRequest: getRequest,
                postRequest: postRequest,
                updateRequest: updateRequest,
                deleteRequest: deleteRequest
            };
        }]);
        app.factory("emsService", ["baseSvc", "SharePointList", function (baseService, SharePointList) {
            var listEndPoint = '/_api/web/lists';
            var getAll = function () {
                var query = listEndPoint + "/GetByTitle('" + SharePointList.smsApproval+ "')/Items?$top=1000&$orderby=Modified desc";
                return baseService.getRequest(query);
            };
            var addNew = function (person) {
                var data = {
                    __metadata: { 'type': 'SP.Data.PeopleListItem' },
                    FirstName: person.firstName,
                    LastName: person.lastName,
                    Address: person.address
                };
                var url = listEndPoint + "/GetByTitle('People')/Items";
                return baseService.postRequest(data, url);
            };
            var update = function (person) {
                var data = {
                    __metadata: { 'type': 'SP.Data.PeopleListItem' },
                    FirstName: person.firstName,
                    LastName: person.lastName,
                    Address: person.address
                };
                var url = listEndPoint + "/GetByTitle('People')/GetItemById(" + person.personId + ")";
                return baseService.updateRequest(data, url);
            };
            var remove = function (personId) {
                var url = listEndPoint + "/GetByTitle('People')/GetItemById(" + personId + ")";
                return baseService.deleteRequest(url);
            };
            var getUser = function (id) {
                var url = "/_api/Web/GetUserById(" + id + ")";
                return baseService.getRequest(url);
            }
            var getUserGroup = function (id) {
                var url = "/_api/Web/sitegroups/getById(" + id + ")";
                return baseService.getRequest(url);
            }
            var getAllUsersFromGroup = function (groupName) {
                var url = "/_api/Web/sitegroups/getbyname('" + groupName + "')/users";
                return baseService.getRequest(url);
            };
            return {
                getAll: getAll,
                addNew: addNew,          
                update: update,
                remove: remove,
                getUser: getUser,
                getUserGroup: getUserGroup,
                getAllUsersFromGroup: getAllUsersFromGroup
            };
        }]);
        app.controller('emsController', ["$scope", "$http", "emsService", "SharePointList", function ($scope, $http, emsService, SharePointList) {
            //sharepoint context
            var ctx = new SP.ClientContext.get_current();
            var web = ctx.get_web();
            //init variable
       
            $scope.init = function () {              
                //loading ems data
                loadeMSApprovalData();
               
            };

            //Load data using querstring
            function loadeMSApprovalData(listItemId) {
                emsService.getAll().then(function (response) {
                    $scope.emsData = response.data.d.results;                
                });
            };
            $scope.filterOptions = {
                filterText: ''
            };
            $scope.gridOptions = {
                data: 'emsData',
                enableColumnResize: false,
                multiSelect: false,              
                enableSorting: true,
                enablePaging: true,
                rowHeight: 36,
                filterOptions: $scope.filterOptions,
                columnDefs: [
                {
                   field: 'Title', displayName: 'JobNo',
                   cellTemplate:'<div>' +
                  '<span style="padding:5px;"><a href="/sites/me/Lists/eMSApproval/Item/displayifs.aspx?ID={{row.getProperty(\'ID\')}}">{{row.getProperty(col.field)}}</a></span>' +
                  '</div>',
                   width: '150px'
                },
                { field: 'ApproverME', displayName: 'Approver ME', width: '200px' },
                {
                    field: 'ApprovedName', displayName: 'Approved Name',
                    cellTemplate: '<div><span style="padding:5px;">{{row.entity.ApprovedName}}</span></div>',
                    width: '250px'
                },
                { field: 'ApprovedDate', displayName: 'Approved Date', width: '150px' },
                { field: 'MSID', displayName: 'MSID', width: '200px' },
                { field: 'ClosureBy', displayName: 'Closur By', width: '200px' },
                {
                    field: 'ClosureDate', displayName: 'Closur Date',
                    cellTemplate: '<div><span style="padding:5px;">{{row.entity.ClosureDate | date:"dd-MM-yyyy"}}</span></div>',
                    width: '100px'
                },             
                { field: 'Status', displayName: 'Status', width: '300px' }
                ]
            };
        }]);
    </script>
<style type="text/css">
        .gridStyle {
    border: 1px solid rgb(212,212,212);
    width: 100%;
    height: 800px;
}
        .register {
            margin-top: 0%;
            padding: 1%;
        }

        .palel-primary {
            border-color: #bce8f1;
        }

        .panel-primary > .panel-heading {
            /*background:#bce8f1;
            background: -webkit-linear-gradient(left, #3931af, #00c6ff);*/
        }

        .panel-primary > .panel-body {
            background-color: #EDEDED;
        }

        .container {
            width: 100% !important;
        }
    </style>

</head>
<body>
    <div ng-app="smsApp">
        <div ng-controller="emsController" ng-init="init()">
            <div class="container register">
                <div class="row">
                    <div class="col-md-12 col-sm-12">                     
                        <div class="panel panel-primary">                           
                            <div class="panel-heading">
                               Simple Sequence System
                            </div>
                            <div class="panel-body">
                                <div class="form-group">
                                    <label for="filterText" class="col-xs-1 control-label">Search :</label>
                                    <div class="col-xs-9">
                                        <input type="text" class="form-control" id="filterText" ng-model="filterOptions.filterText" placeholder="Filter Options" />
                                    </div>
                                </div>
                            </div>                     
                            <div class="panel-body">                           
                                <div class="gridStyle" ng-grid="gridOptions"></div>
                            </div>                        
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>