BeWoPlaner/BeWoPlanerMobil/Views/DevExpressScheduler/AptFltEmployeesPartial.cshtml

@using BeWoPlanerMobil.Util
@using BS.Shared.Extensions
@model BeWoPlanerMobil.Models.DevExpressSchedulerModel
    
<script type="text/javascript">
	function selectAllEmployeesOnChange() {
		const isChecked = $("#all-employees-checkbox").prop("checked");

		$("#employee-input-container").load("@Url.Action("SelectAllEmployeesForFiltering")", { isChecked: isChecked }, () => { scheduler.Refresh(); });
	}

	function employeeListSearchOnChange() {
		var text = $("#employee-search-input").val().toLowerCase();

		const entries = $(".employee-text");

		if(text.length === 0) {
			entries.show();
		}

		$.each(entries, function (index, item) {
			const employee = $(item);

			if(employee.find(".employee-name-label").text().toLowerCase().includes(text)) {
				employee.show();
			} else {
				employee.hide();
			}
		});
	}

	function resetEmployeeSearch() {
		$("#employee-search-input").val("");
		$(".employee-text").show();
    }

    function selectTeamForAppointment(teamOid) {
        $("#employee-input-container").load("@Url.Action("SelectTeamForAppointment")", { teamOid: teamOid }, () => {
		    scheduler.Refresh();
	    });
	}

	function removeSelectedEmployee(employeeOid) {
		const checkbox = $(`#employee-${employeeOid}-checkbox`);

		if(checkbox.length) {
			checkbox.prop("checked", false);
		}

		changeEmployeeListSelection();
	}

	function changeEmployeeListSelection() {
		const selectedEmployeeOids = $("#employee-input-container input:checked").map(function() { return $(this).attr("id").split("-")[1]; }).get();
		const allEmployeesCount = $("#employee-input-container input[type=checkbox]").map(function () { return $(this).attr("id").split("-")[1]; }).get().length;
		const selectedEmployeesCount = selectedEmployeeOids.length;
        
		$("#all-employees-checkbox").prop("checked", (allEmployeesCount === selectedEmployeesCount));

		showSpinner();

        $("#employee-input-container").load(
			"@Url.Action("UpdateEmployeeSelection", "DevExpressScheduler")",
			{
				selectedEmployeeOids: selectedEmployeeOids
            },
            () => {
                scheduler.Refresh();
                hideSpinner();
            });
	}
</script>

<div class="modal" tabindex="-1" role="dialog" id="employees-popup-apt-flt">
    <div class="modal-dialog modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title text-center w-100 font-weight-bold">
                    <span class="fas fa-user text-bewo-employee"></span>
                    Mitarbeiter
                </h6>
                <button type="button" class="close" data-dismiss="modal" onclick="resetEmployeeSearch()">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <div class="input-group-text">
                                <div class="custom-control custom-checkbox custom-control-inline mx-auto">
                                    @{
                                        var allEmployeesCheckedVal = Model.PossibleEmployees.AreListEqual(Model.SelectedEmployees) ? "checked" : string.Empty;
                                    }

                                    <input type="checkbox" class="custom-control-input" id="all-employees-checkbox" @allEmployeesCheckedVal onchange="selectAllEmployeesOnChange()" />
                                    <label class="custom-control-label" for="all-employees-checkbox">Alle</label>
                                </div>
                            </div>
                        </div>
                        <input class="form-control w-100" type="text" placeholder="Suchen..." oninput="employeeListSearchOnChange()" id="employee-search-input" />
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary" type="button" onclick="resetEmployeeSearch()">
                                <span class="fas fa-times-circle"></span>
                            </button>
                        </div>
                    </div>

                    @if(Model.HasRightToViewTeams)
                    {
                        <div class="card w-100 mb-3">
                            <div class="card-header" data-toggle="collapse" data-target="#collapsable-teams-selection">
                                <div class="d-flex align-items-center">
                                    <h5 class="mr-auto">Meine Teams</h5>
                                    <div class="btn-group" role="group">
                                        <span class="fas fa-chevron-down text-primary"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="collapse @Html.GetCollapsibleClass(Model.Collapsibles2IsShown, "collapsable-teams-selection")" id="collapsable-teams-selection">
                                <div class="card-body">
                                    @foreach(var team in Model.MyTeams)
                                    {
                                        <button type="button" class="btn btn-bewo-teams w-100 my-2" onclick="selectTeamForAppointment(@team.TeamOid)">@team.Name</button>
                                    }
                                </div>
                            </div>
                        </div>

                        <hr />
                    }

                    <div id="employee-input-container">
                        @Html.Partial("AptFltEmployeePopupListPartial")
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Übernehmen</button>
            </div>
        </div>
    </div>
</div>