kreta/KretaWeb/Areas/Orarend/Views/OrarendekTorlese/Csoport_View.cshtml

@using Kreta.Web.Areas.Orarend.Models

@model CsoportOrarendTorleseModel

<style>
    #csoport-select {
        width: 100%;
    }

    #CsoportOrarendTorlesVisszaBtn {
        margin-left: 80px;
    }

    #CsoportOrarendTorlesTorlesBtn {
        margin-right: 80px;
    }

    .selected-torles-btn > button {
        padding: 3px;
    }
</style>

@using (Html.KretaForm("CsoportOrarendTorlesForm"))
{
    @Html.KretaValidationSummary()

    <div class="row">
        <div class="@BootsrapHelper.GetSizeClasses(6)">
            @Html.KretaComboBox("FeladatellatasiHelyCmb", Url.HttpRouteUrl(Constants.RouteKey.ActionApi, new { controller = Constants.ApiControllers.ComboBoxHelperApi, action = "GetFeladatellatasiHelyWithMukodesiHelyList" }), onChangeFunction: "CsoportOrarendTorleseHelper.cmbOnChange()", placeholder: CommonResource.PleaseChoose)
            <select id="csoport-select" class="form-control" multiple="multiple" style="height: 400px;"></select>
        </div>
        <div class="@BootsrapHelper.GetSizeClasses(6)">
            <div class="@BootsrapHelper.GetSizeClasses(12)">
                @Html.Partial("KozosParameterekView")
            </div>
            <div class="@BootsrapHelper.GetSizeClasses(12)" style="margin-top: 40px;">
                <span class="col-sm-4">@OrarendekTorleseResource.KivalasztottCsoportok</span>
                <div id="selected-csoport-container" class="col-sm-12"></div>
            </div>
        </div>
    </div>
    <div class="row" style="margin-top: 40px;">
        <div class="@BootsrapHelper.GetSizeClasses(6)">
            @Html.KretaButton("CsoportOrarendTorlesVisszaBtn", CommonResource.Vissza, clickEventName: "OrarendekTorleseHelper.vissza")
        </div>
        <div class="@BootsrapHelper.GetSizeClasses(6) BtnDelete">
            @Html.KretaButton("CsoportOrarendTorlesTorlesBtn", CommonResource.Torles, clickEventName: "function () { OrarendekTorleseHelper.torles(CsoportOrarendTorleseHelper.torles); }")
        </div>
    </div>
    <div hidden>
        @Html.KretaTextBoxFor(x => x.SelectedCsoportok)
    </div>
}

<script type="text/javascript">
  var CsoportOrarendTorleseHelper = (function () {
    var csoportOrarendTorleseHelper = function () { };

    var csoportSelectId = "#csoport-select";
    var selectedCsoportContainerId = "#selected-csoport-container";
    var formName = "CsoportOrarendTorlesForm";
    var formId = "#" + formName;
    var selectedCsoportokId = "#SelectedCsoportok";
    var feladatellatasiHelyCmbName = "FeladatellatasiHelyCmb";

    var csoportList = @Html.Raw(Json.Encode(Model.CsoportList));

    var url = {
      CsoportOrarendekTorlese: "@Url.HttpRouteUrl(Constants.RouteKey.ActionApi, new { controller = Constants.ApiControllers.OrarendekTorleseApi, action = "CsoportOrarendekTorlese" })"
    }

    csoportOrarendTorleseHelper.cmbOnChange = function () {
      setUpCsoportSelectRows();
    }

    function setUpCsoportSelectRows() {
      var feladatellatasiHelyId = KretaComboBoxHelper.getKendoValue(feladatellatasiHelyCmbName);
      $(csoportSelectId).empty();

      var csoportokByFeladatellatasiHely = csoportList.filter(function (cs) {
        return cs.FeladatellatasiHelyId == feladatellatasiHelyId;
      });
      csoportokByFeladatellatasiHely.forEach(function (item) {
        createOptionRow(item);
      });
    }

    function createOptionRow(csoport) {
      var option = $("<option></option>")
        .attr("value", csoport.Id)
        .append(csoport.Nev);

      if (csoport.IsSelected) {
        option.attr("selected", true);
      }

      $(csoportSelectId).append(option);
    }

    csoportOrarendTorleseHelper.selectOption = function (o) {
      var csoportId = $(o).attr("value");
      if (!CommonUtils.isNullOrUndefined(csoportId)) {
        var csoport = csoportList.filter(function (cs) {
          return cs.Id == csoportId;
        })[0];

        csoport.IsSelected = !csoport.IsSelected;

        if (csoport.IsSelected) {
          createSelection(csoport);
          addSelectedCsoportToInputString(csoport.Id);
        }
        else {
          csoportOrarendTorleseHelper.deleteSelection(csoportId);
        }
      }
    }

    function createSelection(csoport) {
      var nev = $("<div></div>")
        .addClass("col-sm-6")
        .append(csoport.Nev);

      var torlesBtnName = "SelectedTorlesBtn" + csoport.Id;
      var torlesBtn = $("<button></button>")
        .addClass("k-button")
        .attr("id", torlesBtnName)
        .attr("onclick", "CsoportOrarendTorleseHelper.deleteSelection(" + csoport.Id + ");")
        .append("@CommonResource.Eltavolitas");
      var torles = $("<div></div>")
        .addClass("col-sm-6 BtnDelete selected-torles-btn")
        .append(torlesBtn);

      var row = $("<div></div>")
        .addClass("row")
        .attr("data-csoport-id", csoport.Id)
        .append(nev)
        .append(torles);

      $(selectedCsoportContainerId).append(row);
    }

    csoportOrarendTorleseHelper.deleteSelection = function (csoportId) {
      var csoport = csoportList.filter(function (cs) {
        return cs.Id == csoportId;
      })[0];

      csoport.IsSelected = false;

      setUpCsoportSelectRows();

      $(selectedCsoportContainerId + " > div.row[data-csoport-id='" + csoportId + "']").remove();

      removeSelectedCsoportFromInputString(csoportId);
    }

    csoportOrarendTorleseHelper.torles = function () {
      var form = $(formId);
      if (form.valid()) {
        var formData = form.toObject();

        if (formData.hasOwnProperty(feladatellatasiHelyCmbName + "_input")) {
          delete formData.FeladatellatasiHelyCmb_input;
        }

        if (formData.hasOwnProperty(feladatellatasiHelyCmbName)) {
          delete formData.FeladatellatasiHelyCmb;
        }

        AjaxHelper.DoValidationPost(url.CsoportOrarendekTorlese, formName, formData, OrarendekTorleseHelper.torlesSuccessCallBack);
      }
    }

    function addSelectedCsoportToInputString(csoportId) {
      var json = parseSelectedCsoportokJson();

      json.push({
        Id: csoportId
      });

      stringifySelectedCsoportokJson(json);

      $(selectedCsoportokId).valid();
    }

    function removeSelectedCsoportFromInputString(csoportId) {
      var json = parseSelectedCsoportokJson();

      json = json.filter(function (obj) {
        return obj.Id != csoportId;
      });

      stringifySelectedCsoportokJson(json);

      $(selectedCsoportokId).valid();
    }

    function parseSelectedCsoportokJson() {
      var jsonString = $(selectedCsoportokId).val();
      var jsonObj = null;
      if (jsonString.length > 0) {
        jsonObj = CommonUtils.JSONparse(jsonString);
      }
      else {
        jsonObj = [];
      }
      return jsonObj;
    }

    function stringifySelectedCsoportokJson(json) {
      if (json.length == 0) {
        $(selectedCsoportokId).val("");
      }
      else {
        $(selectedCsoportokId).val(JSON.stringify(json));
      }
    }

    return csoportOrarendTorleseHelper;
  })();
</script>

<script type="text/javascript">
  $(document).ready(function () {
    // https://stackoverflow.com/questions/24543862/selecting-multiple-from-an-html-select-element-without-using-ctrl-key
    $("select").mousedown(function (e) {
      e.preventDefault();

      var select = this;
      var scroll = select.scrollTop;

      e.target.selected = !e.target.selected;

      CsoportOrarendTorleseHelper.selectOption(e.target);

      setTimeout(function () { select.scrollTop = scroll; }, 0);

      $(select).focus();
    }).mousemove(function (e) { e.preventDefault() });
  })
</script>