kreta/KretaWeb/Areas/Tanulo/Views/AmiTanulo/Edit_Tantargyak_Tab.cshtml

@using Kreta.Resources
@using Kreta.Web.Areas.Tanulo.Models
@using Kreta.Web.Helpers
@using Kreta.Web.Helpers.Grid;
@model TanuloModel

@{
    const string TanuloApiController = Constants.ApiControllers.AmiTanuloApi;
    const string TanuloController = Constants.Controllers.AmiTanulo;
    const string csoportosGrid = "CsoportosFoglalkozasGrid";
    const string egyeniGrid = "EgyeniFoglalkozasGrid";
    const string sablonDropdown = "SablonDropDown";
}
<style>
  .k-grid tbody .k-button {
    min-width: 12px;
  }

  .k-alt.editedRow, .editedRow {
    background: moccasin;
  }

  .k-widget .k-dropdown {
    margin-bottom: auto;
  }
</style>

<div class="container-fluid details">
    @Html.KretaDropdownList(sablonDropdown, (IEnumerable<SelectListItem>)ViewData["Sablonok"], new Dictionary<string, object> { { "style", "width:auto;" } }).Filter(FilterType.Contains)
    @Html.KretaButton("LoadSablon", TanuloResource.SablonBetoltese, clickEventName: "function() {AmiTantargyHelper.loadSablon()}")
    @Html.KretaButton("ValidateTantargyfelosztas", TanuloResource.TantargyakMentese, clickEventName: "function() {AmiTantargyHelper.validateTantargyfelosztas()}", htmlAttributes: new Dictionary<string, object> { { "style", "background-color:#54a5d1" } })
    <h5>@TantargyResource.KerjukAzAdatokSzerkesztesehezKattintsonAMezobe</h5>
    <h3>@TanuloResource.Csoportos</h3>
    @(
        Html.KretaGrid<TanuloTantargyaiModel>(
            name: csoportosGrid,
            getUrl: new GridApiUrl(TanuloApiController, "GetTanuloCsoportosFoglalkozasai", new Dictionary<string, string> { { "tanuloId", Model.TanuloId.ToString() }, { "osztalyId", (Model.TanuloTanugyModel.OsztalyId ?? 0).ToString() } }),
            allowPaging: false,
            pageSizes: null,
            allowSorting: false,
            showSorszam: false,
            batchEdit: true,
            dataBoundAdditionalFunction: "AmiTantargyHelper.changeCsoportosGridView();"
            )
        .Columns(columns =>
        {
            columns.ForeignKey(c => c.OsztalyId, (System.Collections.IEnumerable)ViewData["Osztalyok"], "Value", "Text").EditorTemplateName("GridNullableForeignKey").HtmlAttributes(new { data_ifIDHasValueNotEditable = ""  }).Width("15%");
            columns.Bound(c => c.TantargyID).ClientTemplate("#=AmiTantargyHelper.TantargyTemplate(TantargyID,AmiTantargyID)#").EditorTemplateName("SablonTantargyTemplate")
                .EditorViewData(new { gridId = csoportosGrid, dataSourceFunction = "AmiTantargyHelper.TantargyakForDDl", tantargyPropName = "TantargyID", semaPropName = "AmiTantargyID" }).HtmlAttributes(new { data_ifIDHasValueNotEditable = ""  }).Width("15%");
            columns.ForeignKey(c => c.TanarID, (System.Collections.IEnumerable)ViewData["Tanarok"], "Value", "Text").EditorTemplateName("GridNullableForeignKey").HtmlAttributes(new { data_ifIDHasValueNotEditable = ""  }).Width("15%");
            columns.Bound(c => c.Oraszam).EditorTemplateName("OraszamEditor").HtmlAttributes(new { data_ifIDHasValueNotEditable = ""  }).Width("5%");
            columns.Bound(c => c.OsszevontOra_BOOL).ClientTemplate("<span>#=OsszevontOra_BOOL ? 'Igen' : 'Nem' # </span>").HtmlAttributes(new { data_ifIDHasValueNotEditable = ""  }).Width("5%");
            columns.ForeignKey(c => c.AmiFotargy, (System.Collections.IEnumerable)ViewData["AmiFotargyak"], "Value", "Text").EditorTemplateName("GridNullableForeignKey").HtmlAttributes(new { data_resetable = ""  }).Width("10%");
            columns.ForeignKey(c => c.AmiTagozat, (System.Collections.IEnumerable)ViewData["AmiTagozatok"], "Value", "Text").EditorTemplateName("GridNullableForeignKey").HtmlAttributes(new { data_resetable = ""  }).Width("10%");
            columns.ForeignKey(c => c.AmiTantargyKotelezoseg, (System.Collections.IEnumerable)ViewData["AmiTantargyKotelezosegek"], "Value", "Text").EditorTemplateName("GridNullableForeignKey").HtmlAttributes(new { data_resetable = ""  }).Width("10%");
            columns.ForeignKey(c => c.EvfolyamTipus, (System.Collections.IEnumerable)ViewData["EvfolyamTipusok"], "Value", "Text").EditorTemplateName("GridNullableForeignKey").HtmlAttributes(new { data_resetable = ""  }).Width("10%");
            columns.Command(command => command.Custom("Delete").Text(" ").Click("function(e) {AmiTantargyHelper.csoportosDelete(e)}")).Width("5%");
        })
        .Editable(editable => editable.Mode(GridEditMode.InCell).DisplayDeleteConfirmation(false))
        .Events(e => e.Edit("function(e) {AmiTantargyHelper.csoportosEdit(e)}").Save("function(e) {AmiTantargyHelper.OnCsoportosRowSave(e)}"))
        .FunctionCommand(Html, new List<FunctionCommand>
        {
            new FunctionCommand { Name = TantargyResource.Uj, ClientAction = "AmiTantargyHelper.addNewCsoportos"}
        })
    )
    <h3>@TanuloResource.Egyeni</h3>
    @(
        Html.KretaGrid<TanuloTantargyaiEgyeniModel>(
            name: egyeniGrid,
            getUrl: new GridApiUrl(TanuloApiController, "GetTanuloEgyeniFoglalkozasai", new Dictionary<string, string> { { "tanuloId", Model.TanuloId.ToString() }, { "osztalyId", (Model.TanuloTanugyModel.OsztalyId ?? 0).ToString() } }),
            allowPaging: false,
            pageSizes: null,
            allowSorting: false,
            showSorszam: false,
            batchEdit: true,
            dataBoundAdditionalFunction: "AmiTantargyHelper.changeEgyeniGridView();"
            )
        .Columns(columns =>
        {
            columns.ForeignKey(c => c.EgyeniOsztalyId, (System.Collections.IEnumerable)ViewData["EgyeniCsoportok"], "Value", "Text").EditorTemplateName("GridNullableForeignKey").Width("15%");
            columns.Bound(c => c.EgyeniTantargyID).ClientTemplate("#=AmiTantargyHelper.TantargyTemplate(EgyeniTantargyID,EgyeniAmiTantargyID)#").EditorTemplateName("SablonTantargyTemplate")
                .EditorViewData(new { gridId = egyeniGrid, dataSourceFunction = "AmiTantargyHelper.TantargyakForDDl", tantargyPropName = "EgyeniTantargyID", semaPropName = "EgyeniAmiTantargyID" }).Width("15%");
            columns.ForeignKey(c => c.EgyeniTanarID, (System.Collections.IEnumerable)ViewData["Tanarok"], "Value", "Text").EditorTemplateName("GridNullableForeignKey").Width("15%");
            columns.Bound(c => c.EgyeniOraszam).EditorTemplateName("OraszamEditor").Width("5%");
            columns.Bound(c => c.EgyeniOsszevontOra_BOOL).ClientTemplate("<span> #=EgyeniOsszevontOra_BOOL ? 'Igen' : 'Nem' #</span>").Width("5%");
            columns.ForeignKey(c => c.EgyeniAmiFotargy, (System.Collections.IEnumerable)ViewData["AmiFotargyak"], "Value", "Text").EditorTemplateName("GridNullableForeignKey").Width("10%");
            columns.ForeignKey(c => c.EgyeniAmiTagozat, (System.Collections.IEnumerable)ViewData["AmiTagozatok"], "Value", "Text").EditorTemplateName("GridNullableForeignKey").Width("10%");
            columns.ForeignKey(c => c.EgyeniAmiTantargyKotelezoseg, (System.Collections.IEnumerable)ViewData["AmiTantargyKotelezosegek"], "Value", "Text").EditorTemplateName("GridNullableForeignKey").Width("10%");
            columns.ForeignKey(c => c.EgyeniEvfolyamTipus, (System.Collections.IEnumerable)ViewData["EvfolyamTipusok"], "Value", "Text").EditorTemplateName("GridNullableForeignKey").Width("10%");
            columns.Command(command => command.Custom("Delete").Text(" ").Click("function(e) {AmiTantargyHelper.egyeniDelete(e)}")).Width("5%");
        })
        .Editable(editable => editable.Mode(GridEditMode.InCell).DisplayDeleteConfirmation(false))
        .Events(e => e.Edit("function(e) {AmiTantargyHelper.egyeniEdit(e)}").Save("function(e) {AmiTantargyHelper.OnEgyeniRowSave(e)}"))
        .FunctionCommand(Html, new List<FunctionCommand>
        {
            new FunctionCommand { Name = TantargyResource.Uj, ClientAction = "AmiTantargyHelper.addNewEgyeni"}
        })
    )

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

    var csoportosGrid = "@csoportosGrid";
    var egyeniGrid = "@egyeniGrid";
    var sablonDropdown = "@sablonDropdown";

    var url = {
      SaveTantargyfelosztas: "@Url.HttpRouteUrl(Constants.RouteKey.ActionApi, new { controller = TanuloApiController, action = "SaveTantargyfelosztas" })",
      ValidateTantargyfelosztas: "@Url.HttpRouteUrl(Constants.RouteKey.ActionApi, new { controller = TanuloApiController, action = "ValidateTantargyfelosztas" })",
      LoadSablon: "@Url.Action("LoadSablon", TanuloController, new { area = Constants.Areas.Tanulo })",
      GetFrissTantargyakSablonokkal: "@Url.Action("GetFrissTantargyakSablonokkal", TanuloController, new { area = Constants.Areas.Tanulo })",
    };

    var tantargyak = @Html.Raw(ViewData["TantargyakSablonokkal"]);

    amiTantargyHelper.TantargyakForDDl = function () {
      return tantargyak;
    };

    amiTantargyHelper.TantargyakIndexForDDl = function (tantargyId, semaTantargyId) {
      var wrongID = -1;

      if (CommonUtils.isNullOrUndefined(tantargyId) && CommonUtils.isNullOrUndefined(semaTantargyId)) {
        return wrongID;
      }

      try {
        var tantargy;

        if (tantargyId) {
          tantargy = tantargyak.find(function (row) {
            return row.TantargyId == tantargyId;
          });
        } else {
          tantargy = tantargyak.find(function (row) {
            return row.SemaId == semaTantargyId;
          });
        }

        if (!tantargy) {
          return wrongID;
        }

        return tantargy.ID;
      } catch {
        return wrongID;
      }
    };

    amiTantargyHelper.OnCsoportosRowSave = function (e) {
      var tantargyElement = e.container.find("input[name=TantargyID]");

      if (tantargyElement.length) {
        var tantargyCustomId = tantargyElement.data("kendoDropDownList").value();

        var tantargyElem = tantargyak.find(function (row) {
          return row.ID == tantargyCustomId;
        });

        if (!tantargyElem) {
          return;
        }

        e.model.TantargyID = tantargyElem.TantargyId;
        e.model.AmiTantargyID = tantargyElem.SemaId;

        e.preventDefault();
      }
    };

    amiTantargyHelper.OnEgyeniRowSave = function (e) {
      var tantargyElement = e.container.find("input[name=EgyeniTantargyID]");

      if (tantargyElement.length) {
        var tantargyCustomId = tantargyElement.data("kendoDropDownList").value();

        var tantargyElem = tantargyak.find(function (row) {
          return row.ID == tantargyCustomId;
        });

        if (!tantargyElem) {
          return;
        }

        e.model.EgyeniTantargyID = tantargyElem.TantargyId;
        e.model.EgyeniAmiTantargyID = tantargyElem.SemaId;

        e.preventDefault();
      }
    };

    amiTantargyHelper.TantargyTemplate = function (tantargyId, semaTantargyId) {
      if (CommonUtils.isNullOrUndefined(tantargyId) && CommonUtils.isNullOrUndefined(semaTantargyId)) {
        return "";
      }

      var ismeretlen = "@TantargyResource.Ismeretlen";

      try {
        var targy;

        if (tantargyId) {
          targy = tantargyak.find(function (row) {
            return row.TantargyId == tantargyId;
          });
        } else {
          targy = tantargyak.find(function (row) {
            return row.SemaId == semaTantargyId;
          });
        }

        if (!targy) {
          return ismeretlen;
        }

        return targy.Text;
      } catch {
        return ismeretlen;
      }
    };

    amiTantargyHelper.csoportosEdit = function (e) {
      var tantargyElement = e.container.find("input[name=TantargyID]");

      if (tantargyElement.length) {
        var tantargyCombo = tantargyElement.data("kendoDropDownList");

        tantargyCombo.value(AmiTantargyHelper.TantargyakIndexForDDl(tantargyElement.attr("data-Tid"), tantargyElement.attr("data-Sid")));

        // Ha TTF-ből van
        if (e.model.ID) {
          tantargyCombo.enable(false);

          KretaGridHelper.getKendoGridData(csoportosGrid).closeCell(e.container);
        }

        return;
      }

      // Ha TTF-ből van
      if (e.model.ID) {
        var osztalyElement = e.container.find("input[name=OsztalyId]");

        if (osztalyElement.length) {
          var osztalyCombo = osztalyElement.data("kendoDropDownList");

          osztalyCombo.enable(false);

          KretaGridHelper.getKendoGridData(csoportosGrid).closeCell(e.container);

          return;
        }

        var tanarElement = e.container.find("input[name=TanarID]");

        if (tanarElement.length) {
          var tanarCombo = tanarElement.data("kendoDropDownList");

          tanarCombo.enable(false);

          KretaGridHelper.getKendoGridData(csoportosGrid).closeCell(e.container);

          return;
        }

        var oraszamElement = e.container.find("input[name=Oraszam]");

        if (oraszamElement.length) {
          var oraszamNumeric = oraszamElement.data("kendoNumericTextBox");

          oraszamNumeric.enable(false);

          KretaGridHelper.getKendoGridData(csoportosGrid).closeCell(e.container);

          return;
        }

        var osszevontOraElement = e.container.find("input[name=OsszevontOra_BOOL]");

        if (osszevontOraElement.length) {
          // A legelső elem a checkbox
          osszevontOraElement[0].disabled = true;

          KretaGridHelper.getKendoGridData(csoportosGrid).closeCell(e.container);
        }
      }
    };

    amiTantargyHelper.egyeniEdit = function (e) {
      var tantargyElement = e.container.find("input[name=EgyeniTantargyID]");

      if (tantargyElement.length) {
        var tantargycombo = tantargyElement.data("kendoDropDownList");

        tantargycombo.value(AmiTantargyHelper.TantargyakIndexForDDl(tantargyElement.attr("data-Tid"), tantargyElement.attr("data-Sid")));
      }
    };

    function addDataToGrid(newData, isCsoportos) {
      // Ugyanazt nem adjuk hozzá mégegyszer
      if (isCsoportos) {
        newData.forEach(val => {
          var gridData = KretaGridHelper.getAllRows(csoportosGrid);

          if (!gridData.some(g => g.OsztalyId == val.OsztalyId && g.TanarID == val.TanarID && g.AmiTantargyID == val.AmiTantargyID)) {
            var grid = KretaGridHelper.getKendoGridData(csoportosGrid);

            grid.dataSource.add(val);
          }
        });
      } else {
        newData.forEach(val => {
          var gridData = KretaGridHelper.getAllRows(egyeniGrid);

          if (!gridData.some(g => g.EgyeniOsztalyId == val.EgyeniOsztalyId && g.EgyeniTanarID == val.EgyeniTanarID && g.EgyeniAmiTantargyID == val.EgyeniAmiTantargyID)) {
            var grid = KretaGridHelper.getKendoGridData(egyeniGrid);

            grid.dataSource.add(val);
          }
        });
      }
    }

    function addSablonToGrid(data) {
      var csoportosData = data.filter(x => x.hasOwnProperty("OsztalyId"));
      var egyeniData = data.filter(x => x.hasOwnProperty("EgyeniOsztalyId"));

      addDataToGrid(csoportosData, true);
      addDataToGrid(egyeniData, false);
    }

    amiTantargyHelper.loadSablon = function () {
      var sablonId = KretaDropDownListHelper.getKendoDropDownListData(sablonDropdown).value();

      if (sablonId) {
        AjaxHelper.DoPost(url.LoadSablon, { tanuloId: "@Model.TanuloId", osztalyId: "@(Model.TanuloTanugyModel.OsztalyId ?? 0)", sablonId }, addSablonToGrid);
      }
    };

    amiTantargyHelper.changeEgyeniGridView = function () {
      $(".k-grid-Delete").find("span")
        .addClass("k-icon k-delete");

      KretaGridHelper.getAllRows(egyeniGrid).forEach(val => {
        if (!val.ID) {
          document.querySelector(`tr[data-uid="${val.uid}"]`).classList.add('editedRow');
        }
      });
    };

    amiTantargyHelper.changeCsoportosGridView = function () {
      $(".k-grid-Delete").find("span")
        .addClass("k-icon k-delete");

      KretaGridHelper.getAllRows(csoportosGrid).forEach(val => {
        if (val.ID) {
          var nodeList = document.querySelectorAll(`tr[data-uid="${val.uid}"] td[data-ifidhasvaluenoteditable]`);
          nodeList.forEach((item) => item.classList.add('disabledCell'));
        } else {
          document.querySelector(`tr[data-uid="${val.uid}"]`).classList.add('editedRow');
        }
      });
    };

    function refreshEverything(data) {
      tantargyak = CommonUtils.JSONparse(data);

      KretaGridHelper.refreshGrid(csoportosGrid);
      KretaGridHelper.refreshGrid(egyeniGrid);

      KretaWindowHelper.successFeedBackWindow();

      TanuloHelper.setDeletedItemOnTantargyakTab(false);
    }

    function success() {
      AjaxHelper.DoPost(url.GetFrissTantargyakSablonokkal, {}, refreshEverything);
    }

    function saveTantargyfelosztas(postData) {
      AjaxHelper.DoPost(url.SaveTantargyfelosztas, { TanuloTantargyak: postData, OsztalyId: "@(Model.TanuloTanugyModel.OsztalyId ?? 0)", TanuloId: "@Model.TanuloId" }, success);
    }

    amiTantargyHelper.validateTantargyfelosztas = function () {
      var gridDataEgyeni = KretaGridHelper.getAllRows(egyeniGrid);

      var egyeniData = gridDataEgyeni.reduce((tempArr, val) => {
        var tempObj = {};

        for (var key in val) {
          tempObj[key.replace(/egyeni/i, "")] = val[key];
        }

        tempObj.IsCsoportos = false;

        tempArr.push(tempObj);

        return tempArr;
      }, []);

      if (egyeniData.length && !'@ViewData["EgyeniCsoportId"]') {
        KretaWindowHelper.feedbackWindow(Globalization.Hiba, '@ErrorResource.ANovendeknekNincsEgyeniCsoportjaKerjukVegyenFelOsztalybontottegyeniCsoportotAzAMICsoportokFeluleten', true);
      } else {
        var gridDataCsoportos = KretaGridHelper.getAllRows(csoportosGrid);

        var csoportosData = gridDataCsoportos.map(val => ({ ...val, IsCsoportos: true }));

        var postData = [...csoportosData, ...egyeniData];

        AjaxHelper.DoPost(url.ValidateTantargyfelosztas, postData, saveTantargyfelosztas);
      }
    };

    var defaultOraSzam = 1;

    amiTantargyHelper.addNewCsoportos = function () {
      var newRow = {
        AmiFoglalkozasID: null,
        AmiFotargy: null,
        AmiTagozat: null,
        AmiTantargyID: null,
        AmiTantargyKotelezoseg: null,
        EvfolyamTipus: null,
        Oraszam: defaultOraSzam,
        OsszevontOra_BOOL: false,
        OsztalyId: '@ViewData["OsztalyCsoportId"]',
        TanarID: '@ViewData["OsztalyCsoportVezetoId"]',
        TantargyID: null,
        ID: null,
        TanuloId: '@Model.TanuloId',
        FoglalkozasTipusa: null,
        NemzetisegiOra_BOOL: false,
        TuloraSzam: 0,
        MegbizasiOraszam: 0
      };

      var grid = KretaGridHelper.getKendoGridData(csoportosGrid);

      grid.dataSource.add(newRow);
    };

    amiTantargyHelper.addNewEgyeni = function () {
      var newRow = {
        EgyeniAmiFoglalkozasID: null,
        EgyeniAmiFotargy: null,
        EgyeniAmiTagozat: null,
        EgyeniAmiTantargyID: null,
        EgyeniAmiTantargyKotelezoseg: null,
        EgyeniEvfolyamTipus: null,
        EgyeniOraszam: defaultOraSzam,
        EgyeniOsszevontOra_BOOL: false,
        EgyeniOsztalyId: '@ViewData["EgyeniCsoportId"]',
        EgyeniTanarID: '@ViewData["EgyeniCsoportVezetoId"]',
        EgyeniTantargyID: null,
        ID: null,
        TanuloId: '@Model.TanuloId',
        FoglalkozasTipusa: null,
        NemzetisegiOra_BOOL: false,
        TuloraSzam: 0,
        MegbizasiOraszam: 0
      };

      var grid = KretaGridHelper.getKendoGridData(egyeniGrid);

      grid.dataSource.add(newRow);
    };

    function deleteCsoportos(e) {
      var row = $(e.currentTarget).closest("tr");

      // Ha van disabledCell, akkor már létezik a Db-ben, ilyenkor csak az AMI-s részt töröljük
      if (row.find($("td.disabledCell")).length) {
        var uid = row.data("uid");

        var rows = KretaGridHelper.getAllRows(csoportosGrid);

        for (var i = 0; i < rows.length; i++) {
          var currentRow = rows[i];

          if (currentRow.uid == uid) {
            // Törlés modelből
            currentRow.AmiFoglalkozasID = null;
            currentRow.AmiFotargy = null;
            currentRow.AmiFotargy_DNAME = null;
            currentRow.AmiTagozat = null;
            currentRow.AmiTagozat_DNAME = null;
            currentRow.AmiTantargyKotelezoseg = null;
            currentRow.AmiTantargyKotelezoseg_DNAME = null;
            currentRow.EvfolyamTipus = null;
            currentRow.EvfolyamTipus_DNAME = null;

            // Törlés DOMból
            row.find($("td[data-resetable]")).empty();

            // Jelzés, hogy változás történt
            TanuloHelper.setDeletedItemOnTantargyakTab(true);

            break;
          }
        }
      } else {
        KretaGridHelper.getKendoGridData(csoportosGrid).removeRow(row);
      }
    }

    function deleteEgyeni(e) {
      var row = $(e.currentTarget).closest("tr");
      var uid = row.data("uid");

      var rows = KretaGridHelper.getAllRows(egyeniGrid);

      for (var i = 0; i < rows.length; i++) {
        var currentRow = rows[i];

        if (currentRow.uid == uid) {
          if (currentRow.ID) {
            // Jelzés, hogy változás történt
            TanuloHelper.setDeletedItemOnTantargyakTab(true);
          }

          KretaGridHelper.getKendoGridData(egyeniGrid).removeRow(row);

          break;
        }
      }
    }

    amiTantargyHelper.csoportosDelete = function (e) {
      KretaWindowHelper.confirmWindow("@CommonResource.Kerdes", "@CommonResource.BiztosanTorli", deleteCsoportos, e);
    };

    amiTantargyHelper.egyeniDelete = function (e) {
      KretaWindowHelper.confirmWindow("@CommonResource.Kerdes", "@CommonResource.BiztosanTorli", deleteEgyeni, e);
    };

    return amiTantargyHelper;
  })();
</script>
</div>