Brain Teaser - Inheritance

In this post, I will be showing how we can optimise the code given in the previous post using Inheritance.

• Find the duplicate code and move all of them to a new class (Vehicle). Now check if there are common methods with different implementations, then make those methods as abstract and move them to this new class (Vehicle) and make the class an abstract class as below:       

             

• Make classes Benz and Audi inherit from the abstract class created above.

       

   

• Now make use of the above classes and see the output

            

Brain Teaser - Introduction

This is the Introductory post of the Brain Teaser Series, where I will be optimising the same code using different C# features. 

Problem Statement: Optimise below code

    class Program

    {

        static void Main(string[] args)

        {

            Audi a = new Audi();

            a.Drive();  

            Benz b = new Benz();

            b.Drive();

            Console.Read();

        }

    }

    public class Audi

    {

        // Same functionality in Benz car too

        protected void Start()

        {

            Console.WriteLine("Car Started");

        }

        //Audi specific functionality

        protected void Move()

        {

            Console.WriteLine("Moving with the power of a 2000 CC Petrol engine");

        }

        //Audi specific functionality

        protected void ApplyBreak()

        {

            Console.WriteLine("Applied Power break with sensors");

        }

        public void Drive()

        {

            Start();

            Move();

            ApplyBreak();

        }

    }

    public class Benz

    {

        // Same functionality in Audi car too

        protected void Start()

        {

            Console.WriteLine("Car Started");

        }

        //Benz specific functionality

        protected void Move()

        {

            Console.WriteLine("Moving with the power of a 3000 CC Diesel engine");

        }

        //Benz specific functionality

        protected void ApplyBreak()

        {

            Console.WriteLine("Applied Power break with ABS");

        }

        public void Drive()

        {

            Start();

            Move();

            ApplyBreak();

        }

    }

The next post is gonna cover how the above code can be optimised using Inheritance.

ngTable - Example: Employee Portal App

In previous two posts we have seen the Employee portal with employee skill view page and edit page. In this post I will be providing the full source code for the same as a Single Page Application using AngularJS.

To summarise, the application has following Part:

• Main Page which shows all the employees. From main page we can go either view or edit page.
• Employee Skills View Page.
• Employee Skills Edit Page.

Source code for the above application is available here : Employee Skill Portal App

ngTable - CRUD operation in Table/Grid

To demonstrate CRUD operations in ngTable I will be using an example of the Employee portal in all my posts. This Employee portal has capabilities of adding, viewing, editing and deleting employee skill details. 

In this section we will be looking into the editable view of the employee page. This page has following functionalities:

- Option to add the new skill row(s) in the employee skill grid. (Add New Skill button below the grid)

- Option to remove exiting skill row. (Delete button in each row)

- Option to save employee skill data. (Save button below the grid)

- Filter skill name list based on skill type selected.

- When skill type is Technical, the Skill name cell gets filtered with data of type 'Technical'

- When skill type is 'Domain', skill name cell gets filtered with data of type 'Domain'.

- When skill type is 'Personal', skill name cell gets filtered with the data of type 'Personal'.

- Rating column has the option to select ratings from 1 to 5.

- Is Primary is the check-box column to say if the skill is primary or secondary. 







I will be dividing employee edit page in two parts. 

• The first part talks bout the basic requirements of the editable view of the employee page and will cover the UI part of it along with basic functionalities like drop-down box data filtering and dependency between the controls. 
• The second part is going to cover the core functionalities (add, remove, save) of the employee edit page.

In the previous post we had seen the employee and skill models. In this section I am providing the skeleton of  the web APIs and service to get the required data from the database. (As stated in the previous post the full source code of this application will be provided at the end of the series).

 [Route("api/[controller]")]
    public class EmployeeController : BaseController
    {
        private readonly JsonSerializerSettings _serializerSettings;

        IEmployeeServices _service;

        public EmployeeController(IEmployeeServices service)
        {
            _service = service;
            _serializerSettings = new JsonSerializerSettings
            {
                Formatting = Formatting.Indented
            };
        }

        // GET api/values
        [HttpGet]      
        public IEnumerable<Employee> Get()
        {
            return _service.GetAll();
        }

        // GET api/values/1
        [HttpGet("{id}")]
        public Employee Get(int id)
        {
            return _service.Get(id);
        }

        // POST api/values
        [HttpPost]
        public void Post([FromBody]Employee Employee)
        {
            _service.Add(Employee);
        }

        [HttpPut]
        public void Put([FromBody]Employee Employee)
        {
            _service.Update(Employee);
        }

        // DELETE api/values/1
        [HttpDelete("{id}")]
        public void Delete(int id)
        {
            _service.Delete(id);
        }

    }

  [Route("api/[controller]")]
    public class SkillController : BaseController
    {
        private readonly JsonSerializerSettings _serializerSettings;

        ISkillServices _service;

        public SkillController(ISkillServices service)
        {
            _service = service;
            _serializerSettings = new JsonSerializerSettings
            {
                Formatting = Formatting.Indented
            };
        }

        // GET api/values
        [HttpGet]
        //[Authorize(Policy = "Admin")]
        public IEnumerable<Skill> Get()
        {
            return _service.GetAll();
        }

        // GET api/values/1
        [HttpGet("{id}")]
        public Skill Get(int id)
        {
            return _service.Get(id);
        }

        // POST api/values
        [HttpPost]
        public void Post([FromBody]Skill skill)
        {
            _service.Add(skill);
        }

        [HttpPut]
        public void Put([FromBody]Skill skill)
        {
            _service.Update(skill);
        }

        // DELETE api/values/5
        [HttpDelete("{id}")]
        public void Delete(int id)
        {
            _service.Delete(id);
        }
    }

Now lets build a view to display the employee details in AngularJS application. Below are the steps you need to follow:

• Add ngTable module to where the app module is being declared.

                 var myApp = angular.module("myApp", ["ngTable"])

• In the HTML file (partial view) add the following code where you want your employee skill table to appear. We have used Text boxes, drop-down boxes and the checkbox controls in the view to make the screen editable.  

            <div>

               <table ng-table="employeeSkills">

                  <tr ng-repeat="skill in $data">

                    <td data-title="'#'">{{$index + 1}}</td>

                    <td data-title="'Skill Type'" >

         <select name="skillType_{{$index +1}}" id="skillType_{{$index +1}}" ng-model="skill.skill.type" 
                                    ng-options="type.name for type in skillTypes track by type.id" 
                                    required ng-change="skillTypeChanged(skill.skill, $index)"></select>

                     </td>

                     <td data-title="'Skill Name'" >

<select name="skillName_{{$index +1}}" id="skillName_{{$index +1}}" ng-model="skill.skill"                                                                
                                ng-options="skillName.skillName for skillName in (availableSkills | filter:{type: {id: skill.skill.type.id}})
                                 track by skillName.id"   ></select>

                     </td>

                     <td data-title="'Rating '" >

                         <span>{{skill.rating }}</span>

                     </td>

                    <td data-title="'Is Primary'" >

                   <input type="checkbox" ng-model="skill.isPrimary" value="{{skill.isPrimary}}" />

                   </td>

                  <td>
                        <button  ng-click="removeSkill(skill)">   Delete  </button>

                    </td>

                </tr>

             </table>

        <table class="table">            
            <tr>
                <td>
                   <button  ng-click="addNewSkill()">Add New Skill</button>                   
                </td>
                <td>
                    <button  ng-click="save()" >Save</button>
                </td>              
            </tr>

        </table>

          </div

• In the controller JavaScript file add the below code: (The employeeSkills are being hard coded here but in actual scenario a service call need to be made to get the details from database, I will be uploading the full source code at the end of the series so till then please bear with the hard coded values) .The object count of the object ngTableParams is set to empty array to make sure that pagination is disabled. The object dataset of the object ngTableParams is set with the employee skill data.  

       myApp.controller('editEmployeeSkillController', ['ngTableParams', '$scope', 
              function (ngTableParams, $scope) {
                 $scope.skillTypes =  [{id: 1, name: 'Technical'},
                                                    {id: 2, name: 'Domain'},
                                                    {id: 3, name: 'Personal'}];
                                               
                var skills = [{type: {id: 1, name: 'Technical'}, name: 'Java', id: 1},
                   {type: {id: 1, name: 'Technical'}, name: '.NET', id: 2},
                   {type: {id: 1, name: 'Technical'}, name: 'AngularJS', id: 3},
                   {type: {id: 1, name: 'Domain'}, name: 'LifeScience', id: 4},
                   {type: {id: 2, name: 'Domain'}, name: 'Media', id: 5},
                   {type: {id: 3, name: 'Personal'}, name: 'Communication', id: 6}];
      

//These two lines are needed to create the dependency between skilltype and skill drop-down boxes          
$scope.availableSkills = angular.copy(skills);
$scope.originalSkills = angular.copy(skills);


                    var employee = {id: 1, firstName: 'Pratibha', lastName: 'Hyanki', employeeId:'xxx',
                          skills: [{skill: {type: {id: 1, name: 'Technical'}, name: '.Net', id: 2} isPrimary: true rating:5 id:1},
                               { skill: {type: {id: 2, name: 'Domain'}, name: Media, id: 5} isPrimary:false, rating:3 id:2},          
                 { skill: {type: {id: 3, name: 'Personal'}, name: 'Communication', id: 6} isPrimary:true rating:1 id:3},
                               { skill: {type: {id: 1, name: 'Technical'}, name: 'AngularJS', id: 3}, isPrimary: trye rating:2  id:4}
                              ]}; 


                   $scope.employeeSkills= new ngTableParams({}, {
                       dataset: employee.skills,
                       counts: []

               });


    $scope.skillTypeChanged = function (skill, index) {
        $scope.availableSkills = angular.copy($scope.originalSkills );
        for (var i = 0; i < $scope.availableSkills.length; i++) {
               if (skill.type.id == $scope.availableSkills[i].type.id) {
                   $scope.employeeSkills[index].skill = angular.copy($scope.availableSkills[i]);
                        break;
               }
         }              
         $scope.availableSkills = angular.copy($scope.originalSkills );
    };  


 $scope.removeSkill = function (row) {
        var test = row;
        for (var i = 0; i < $scope.employeeSkills.length; i++) {
            if (row === $scope.employeeSkills[i]) {
                  $scope.employeeSkills.splice(i, 1);
                     return;
             }
         }
    };

$scope.addNewSkill = function () {
     var row = { skill: "" id: "" isPrimary: false, rating: "" };
     $scope.employeeSkills.push(row);
};


$scope.save = function () {
     // code to save employee skill data
 };
     }]);

ngTable - Readonly Table

To demonstrate ngTable capabilities I will be using an example of the Employee portal in all my posts. This Employee portal has capabilities of adding, viewing, editing and deleting employee skill data. 

Employee Skill View screen looks as below:

We have the employee data models in following manner:

    public class Employee
    {
        public Employee()
        {
        }
        public int ID { get; set; }
        public string FirstName { get; set; }
        public string LastName {get; set;}
        public IList<Skill> Skills { get; set; }                
    } 

  public class Skill
    {
        public Skill()
        {
        }
        public int ID { get; set; }
        public string Bame{ get; set; }
        public SkillType Type{get; set;}
        public int Rating { get; set; }   
        public int IsPrimary{ get; set; }              
    } 


  public class SkillType
    {
        public SkillType()
        {
        }
        public int ID { get; set; }
        public string Name{ get; set; } 

    } 

Lets assume that the services to get the employee data is already available, now lets build a view to display the employee details in angularJS application. Below are the steps you need to follow:

• Add ngTable module to where the app module is being declared.

                 var myApp = angular.module("myApp", ["ngTable"])

• In the HTML file (partial view) add the following code where you want your employee skill table to appear. We have used Span in place of text-boxes and drop-down boxes and disabled the checkbox as this is just the view screen of employee skills. 

            <div>

               <table ng-table="employeeSkills">

                  <tr ng-repeat="skill in $data">

                    <td data-title="'#'">{{$index + 1}}</td>

                    <td data-title="'Skill Type'" >

                         <span>{{skill.type.name }}</span>

                     </td>

                     <td data-title="'Skill Name'" >

                           <span>{{skill.name }}</span>

                     </td>

                     <td data-title="'Rating '" >

                         <span>{{skill.rating }}</span>

                     </td>

                    <td data-title="'Is Primary'" >

                   <input type="checkbox" ng-model="skill.isPrimary" value="{{skill.isPrimary}}" disabled />

                   </td>

                </tr>

             </table>

          </div

• In the controller javascript file add the below code: (The employeeSkills are being hard coded here but in actual scenario a service call need to be made to get the details from database, I will be uploading the full source code at the end of the series so till then please bear with the hard coded values) .The object count of the object ngTableParams is set to empty array to make sure that pagination is disabled. The object dataset of the object ngTableParams is set with the employee skill data. 

          myApp.controller('viewEmployeeSkillController', ['ngTableParams', '$scope', 
                 function (ngTableParams, $scope) {

                 var skills = [

                            {name: "Java", type: {id: 1, name: 'Technical'}, rating: 2, IsPrimary: 'false'},

                            {name: "Life Science", type: {id: 2, name: 'Technical'}, rating: 4, IsPrimary: 'false'},

                            {name: "Communication", type: {id: 3, name: 'Technical'}, rating: 5, IsPrimary: 'false'}

                            ] ;     

                $scope.employeeSkills= new ngTableParams({}, {

                  dataset: skills,

                  counts: []

              });

          }]);