Sarah Piras

by Adlene Denni

HTML

<select data-bind="options:availableTeamFuits, selectedOptions:availableSelectedFuits, optionsText:&#39;FullName&#39;" id="AvailableSelectedFuits" multiple="multiple" name="AvailableSelectedFuits" style="width: 200px; height: 200px">
    <option value="2">Courgette</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:availableSelectedFuits().length > 0" /><br />
        </td>
        <td>     
            <input type="button" name="remove" value="Supprimer" data-bind="click: removeRequested, enable:requestedTeamFuits().length > 0" />
        </td>
    </tr>
</table>
<select data-bind="options:requestedTeamFuits, selectedOptions:requestedSelectedFuits, optionsText:&#39;FullName&#39;" id="RequestedSelectedFuits" multiple="multiple" name="RequestedSelectedFuits" style="width: 200px; height: 200px"></select>

<table id="TableProjectTeam">
    

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


<script id="requestedTemplate" type="text/html">
   
</script>

JavaScript

var viewModel = {
    availableTeamFuits: ko.observableArray([{
        "UserProfileId": 2,
        "TenantId": 1,
        "FullName": "Courgette",
        "Title": "Légume"},
    {
        "UserProfileId": 3,
        "TenantId": 1,
        "FullName": "Asperge",
        "Title": "Légume"},
    {
        "UserProfileId": 1,
        "TenantId": 1,
        "FullName": "Citron",
        "Title": "Fruit"},
    {
        "UserProfileId": 4,
        "TenantId": 1,
        "FullName": "Aubergine",
        "Title": "Légume"}]),
    ListePanier: ko.observableArray([{
        "RoleId": 2,
        "Name": "Sam  Spade",
        "FirstName": "Sam",
        "LastName": "Spade",
        "FullName": "Lentille"}]),
    availableSelectedFuits: ko.observableArray([]),
    requestedTeamFuits: ko.observableArray([]),
    requestedSelectedFuits: 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.ListePanier(), function(n, item) {
            viewModel.requestedTeamFuits.push(item);
            viewModel.availableTeamFuits.remove(ko.utils.arrayFirst(viewModel.availableTeamFuits(), function(member) {
                return member.FullName === item.FullName;
            }));
        });

    },


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

        this.availableTeamFuits.removeAll(viewModel.availableSelectedFuits());
        this.availableSelectedFuits.splice(0, viewModel.availableSelectedFuits().length);
    },
   ...