apollo_developers/assets/views/activity.html

<style>
    b.fa {
        display: inline-block;
        border-radius: 60px;
        box-shadow: 0px 0px 2px #007AFF;
        padding: 0.5em 0.6em;


    }
</style>
<section id="page-title">
    <div class="row">
        <div class="col-sm-8">
            <h1 class="mainTitle" translate="Activity"></h1>

                        <span class="mainDescription">Add / Edit Activity list used for call tracking. </span>

        </div>
        <div ncy-breadcrumb></div>
    </div>
</section>
<div class="container-fluid container-fullw bg-white">
    <div ng-controller="activityCtrl">
        <form id="form" name="Form" ng-submit="activityForm.submit(Form, companies, 'zoom-in')" method="post" novalidate>
            <fieldset>
                <legend>Add Activity Details</legend>
                <div class="col-md-3 form-group"
                     ng-class="{'has-error':Form.ActivityName.$dirty && Form.ActivityName.$invalid, 'has-success':Form.ActivityName.$valid}">
                    <label>
                        Activity Name <span class="symbol required"></span>
                    </label>

                    <input type="text" class="form-control" tabindex="1" name="ActivityName" placeholder="Enter Activity Name" ng-model="companies.ActivityName" required/>
                    <span class="error text-small block"
                          ng-if="Form.ActivityName.$dirty && Form.ActivityName.$error.required">Activity name is required</span>
                    <span class="error text-small block"
                          ng-if="Form.ActivityName.$dirty && Form.ActivityName.$error.pattern">Invalid activity name </span>
                </div>



                <div class="col-md-3 form-group" ng-class="{'has-error':Form.Description.$dirty && Form.Description.$invalid, 'has-success':Form.Description.$valid}">
                    <label>Description<span class="symbol required"></span></label>

                    <input type="text" class="form-control" tabindex="2" name="Description" placeholder="Enter Description" ng-model="companies.Description" required
                    />
                    <span class="error text-small block"
                          ng-if="Form.Description.$dirty && Form.Description.$error.required">Description is required</span>
                    <span class="error text-small block"
                          ng-if="Form.Description.$dirty && Form.Description.$error.pattern">Invalid description </span>
                </div>

                <div class="col-md-4">
                    <div class="form-group"
                         ng-class="{'has-error':Form.status.$dirty && Form.status.$invalid && companies.status.length==0, 'has-success':Form.status.$valid}">
                        <label >
                            Status<span
                                class="symbol required"></span>
                        </label>

                        <ui-select multiple ng-model="companies.status" tabindex="3">
                            <ui-select-match placeholder="Select Status">
                                {{$item.name}}
                            </ui-select-match>
                            <ui-select-choices
                                    repeat="d in statusList | filter:$select.search">
                                {{d.name}}
                            </ui-select-choices>
                        </ui-select>

                        <input class="ng-hide" name="status"
                               ng-model="companies.status"
                               required>
                        <span class="error text-small block"
                              ng-if="Form.status.$dirty && Form.status.$error.required && companies.status.length==0">Status is required.</span>
                        <!--<span class="success text-small block"-->
                        <!--ng-if="Form.subjects.$valid && myModel.subjects.length!=0">Thank You</span>-->
                    </div>
                </div>



                <!--<div class="col-md-4 pull-right">

                    <input type="submit" value="Submit" ladda="ldloading1.zoom_in" tabindex="9" class="btn btn-wide btn-success" data-style="zoom-in"/>

            </div>-->
                <div class="col-md-2" style="padding-top: 2.3%;">
                    <div class="pull-right">
                        <!--<button type="submit" ladda="ldloading1.zoom_in" tabindex="4" class="btn btn-wide btn-success" data-style="zoom-in"/>
                        Submit
                    </button>-->
                        <button type="submit" ladda="ldloading.zoom_in" tabindex="4" class="btn btn-wide btn-success" data-style="zoom-in">
                            Add
                        </button>
                    </div>
                </div>
            </fieldset>

        </form>
        <div class="row">

            <div class="col-md-3">
                <script>
                    $(function () {
                        $("#search").focus();

                    });
                </script>
                <input class="form-control" type="text" ng-model="search"
                       id="search" autofocus tabindex="5"
                       placeholder="Search"/><br><br>
            </div>


        </div>
        <table class="table table-hover" ng-init="init();">
            <thead>
                <tr>
                    <th ng-click="sort('ActivityID')">Activity ID
                        <span class="glyphicon sort-icon" ng-show="sortKey=='ActivityID'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"> </span>
                    </th>
                    <th ng-click="sort('ActivityName')">Activity Name
                        <span class="glyphicon sort-icon" ng-show="sortKey=='ActivityName'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"> </span>

                    </th>
                    <th>Description
                    </th>
					<th>Status</th>
                    <th></th>


                </tr>
            </thead>
            <tbody dir-paginate="p in activityInfo|orderBy:sortKey:reverse|filter:search:strict|itemsPerPage:10">
                <tr>
                    <td>{{p.ActivityID}}</td>
                    <td>{{p.ActivityName}}</td>
                    <td>{{p.Description}}</td>
					<td><span ng-if="p.IsActive == 1"> Active </span><span ng-if="p.IsActive == 0">In-Active</span></td>
                    <td>
                        <a class="text-azure" id="editRowBtn{{p.ActivityID}}" ng-click="setEditId(p);"><b class="fa fa-hover fa-pencil " aria-hidden="true"></b>
                            </a>

                        </td>
                </tr>
                <tr ng-show="editId === p.ActivityID" ng-if="editId === p.ActivityID" >
                                            <td colspan="12" ng-include src="'assets/views/editActivityDetails.html'"></td>
                                        </tr>

            </tbody>

        </table>
    </div>
        <dir-pagination-controls max-size="10" direction-links="true" boundary-links="true">
        </dir-pagination-controls>
    </div>
</div>