Fulcrum Api Classification

by epinapala

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="http://vitalets.github.io/angular-xeditable/dist/js/xeditable.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://vitalets.github.io/angular-xeditable/dist/css/xeditable.css">
<script src="http://code.angularjs.org/1.0.8/angular-mocks.js"></script>
<h4>Classifications</h4>

<div ng-app="classifications" ng-controller="Ctrl">
    <form editable-form name="tableform" onaftersave="saveTable()" oncancel="cancel()">
        <!-- table -->
        <table class="table table-bordered table-hover table-condensed">
            <tr style="font-weight: bold">
                <td style="width:40%">Context</td>
                <td style="width:30%">API Name</td>
                <td style="width:30%">Is Legacy?</td>
                <td style="width:30%"><span ng-show="tableform.$visible">Action</span>

                </td>
            </tr>
            <tr ng-repeat="api in apis | filter:filterApi">
                <td> <span editable-text="api.context" e-form="tableform" onbeforesave="checkValid($data, 'context')">
            {{ api.context || 'empty' }}
          </span>

                </td>
                <td> <span editable-text="api.name" e-form="tableform" onbeforesave="checkValid($data,'name')">
            {{ api.name || 'empty' }}
          </span>

                </td>
                <td> <span editable-select="api.islegacy" e-form="tableform" e-ng-options="s.text as s.text for s in islegacyopts">
            {{ showIsLegacy(api) }}
          </span>

                </td>
                <td>
                    <button type="button" ng-show="tableform.$visible" ng-click="deleteApi(api.id)" class="btn btn-danger pull-right">delete</button>
                </td>
            </tr>
        </table>
        <!-- buttons -->
        <div class="btn-edit">
           ...

CSS

div[ng-app] {
    margin: 10px;
}

JavaScript

var app = angular.module("classifications", ["xeditable"]);

app.run(function (editableOptions) {
    editableOptions.theme = 'bs3';
});

app.controller('Ctrl', function ($scope, $filter, $q, $http) {
    $scope.apis = [{
        id: 1,
        context: 'c1',
        name: 'name1',
        islegacy: 'Yes'
    }, {
        id: 2,
        context: 'c2',
        name: 'name2',
        islegacy: 'No'
    }, {
        id: 3,
        context: 'c3',
        name: 'name2',
        islegacy: 'Yes'
    }];

    $scope.islegacyopts = [{
        value: 1,
        text: 'Yes'
    }, {
        value: 2,
        text: 'No'
    }];

    $scope.showIsLegacy = function (api) {
        var selected = [];
        if (api.islegacy) {
            selected = $filter('filter')($scope.islegacyopts, {
                text: api.islegacy
            });
        }
        return selected.length ? selected[0].text : 'Not set';
    };


    $scope.checkValid = function (data, id) {
        if (data === null || data === '') {
            return "Invalid data entered for field" + id;
        }
    };

    // filter apis to show
    $scope.filterApi = function (api) {
        return api.isDeleted !== true;
    };

    // mark api as deleted
    $scope.deleteApi = function (id) {
        var filtered = $filter('filter')($scope.apis, {
            id: id
        });
        if (filtered.length) {
            filtered[0].isDeleted = true;
        }
    };

    // add api
    $scope.addApi = function () {
        $scope.apis.push({
            id: $scope.apis.length + 1,
            context: '',
            name: '',
            isLegacy: null,
            isNew: true
        });
    };

    // cancel all changes
    $scope.cancel = function () {
        for (var i = $scope.apis.length; i--;) {
            var api = $scope.apis[i];
            // undelete
            if (api.isDeleted) {
                delete api.isDeleted;
            }
            // remove new 
            if (api.isNew) {
      ...