Sarah Piras - JS Project

by Adlene Denni

HTML

<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<select data-bind="options:availableTeamMembers, selectedOptions:availableSelectedMembers, optionsText:&#39;FullName&#39;" id="AvailableSelectedMembers" multiple="multiple" name="AvailableSelectedMembers" style="width: 200px; height: 200px">
    <option value="2">Jane Adams</option>
    <option value="3">Sam Spade</option>
    <option value="1">Jack Frost</option>
</select>
<table>
  <tr>
    <td>
      <input type="button" name="add" value="Ajouter" data-bind="click: addRequested, enable:availableSelectedMembers().length > 0" /><br />
    </td>
    <td>
      <input type="button" name="remove" value="Supprimer" data-bind="click: removeRequested, enable:requestedTeamMembers().length > 0" />
    </td>
  </tr>
</table>
<select data-bind="options:requestedTeamMembers, selectedOptions:requestedSelectedMembers, optionsText:&#39;FullName&#39;" id="RequestedSelectedMembers" multiple="multiple" name="RequestedSelectedMembers" style="width: 200px; height: 200px"></select>

<table id="TableProjectTeam">

  <thead>
    <tr>
      <th>FirstName</th>
      <th>LastName</th>
      <th>FullName</th>
      <th>Role</th>
    </tr>

  </thead>
  <tbody data-bind='template: { name: "requestedTemplate", foreach: requestedTeamMembers, templateOptions: { roles: userRoles } }'>

  </tbody>
</table>


<script id="requestedTemplate" type="text/html">
  <tr>
    <td data-bind="text: FirstName"></td>
    <td data-bind="text: LastName"></td>
    <td data-bind="text: FullName"></td>
    <td><select data-bind="options: $item.roles,optionsCaption: 'Choose...', optionsText: 'Text', optionsValue: 'Value', value: RoleId"></select></td>
  </tr>
</script>

JavaScript

var viewModel = {
  availableTeamMembers: ko.observableArray([{
      "UserProfileId": 2,
      "TenantId": 1,
      "FirstName": "JANE",
      "LastName": "Adams",
      "FullName": "Courgette",
      "Title": "Secretary"
    },
    {
      "UserProfileId": 3,
      "TenantId": 1,
      "FirstName": "Sam",
      "LastName": "Spade",
      "FullName": "Asperge",
      "Title": "VP"
    },
    {
      "UserProfileId": 1,
      "TenantId": 1,
      "FirstName": "Jack",
      "LastName": "Frost",
      "FullName": "Citron",
      "Title": "President"
    },
    {
      "UserProfileId": 4,
      "TenantId": 1,
      "FirstName": "Jane",
      "LastName": "Lewis",
      "FullName": "Aubergine",
      "Title": "student"
    }
  ]),
  EditableProjectTeamMembers: ko.observableArray([{
    "RoleId": 2,
    "Name": "Sam  Spade",
    "FirstName": "Sam",
    "LastName": "Spade",
    "FullName": "Lentille"
  }]),
  availableSelectedMembers: ko.observableArray([]),
  requestedTeamMembers: ko.observableArray([]),
  requestedSelectedMembers: ko.observableArray([]),
  userRoles: ko.observableArray([{
      "Selected": false,
      "Text": "Administrator",
      "Value": "1"
    },
    {
      "Selected": false,
      "Text": "Manager",
      "Value": "2"
    },
    {
      "Selected": false,
      "Text": "Staff",
      "Value": "3"
    }
  ]),

  loadProjectTeam: function() {

    $.each(viewModel.EditableProjectTeamMembers(), function(n, item) {
      viewModel.requestedTeamMembers.push(item);
      viewModel.availableTeamMembers.remove(ko.utils.arrayFirst(viewModel.availableTeamMembers(), function(member) {
        return member.FullName === item.FullName;
      }));
    });

  },


  addRequested: function() {
    var requested = this.requestedTeamMembers;
    $.each(viewModel.availableSelectedMembers(), function(n, item) {
      if (!item.RoleId) {
        item.RoleId = ko.observable();
      }
      requested.push(item);
    });

   ...