542 lines
20 KiB
Plaintext
542 lines
20 KiB
Plaintext
@model CompanyManagment.App.Contracts.InsuranceJob.EditInsuranceJob
|
||
|
||
|
||
|
||
@*MASHAGHEL MAGHTUE*@
|
||
|
||
<link href="@Href("~/admintheme/css/create-insurance-jobs.css")" rel="stylesheet"/>
|
||
|
||
|
||
<div class="container">
|
||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||
<div class="main-title">ویرایش مشاغل قیمت مقطوع سازمان تامین اجتماعی </div>
|
||
<div class="box">
|
||
<form asp-page="./Index" asp-page-handler="Edit" method="post" autocomplete="off" id="editForm"
|
||
data-ajax="true"
|
||
data-callback=""
|
||
data-action="ContractRefresh">
|
||
<div id="divData">
|
||
|
||
</div>
|
||
@* <button type="submit" id="send" style="display: none"></button>*@
|
||
</form>
|
||
<div class="row form" id="form1">
|
||
<div class="col-md-12 inputs" style="display:flex;">
|
||
<label>عنوان صنف و درجه</label>
|
||
|
||
<input type="text" placeholder="" class="input" id="insuranceJobTitle" asp-for="InsuranceJobTitle" tabindex="1">
|
||
</div>
|
||
<div class="col-md-12 inputs" style="display:flex;">
|
||
<label> کد اقتصادی </label>
|
||
<input type="text" placeholder="" class="input" style="direction: rtl;" id="economicCode" asp-for="EconomicCode" tabindex="2">
|
||
</div>
|
||
<div class="row" style="text-align: center">
|
||
|
||
<div class="col-xs-12">
|
||
<span>از تاریخ</span>
|
||
<span> </span>
|
||
<span>@Model.StartDateFa</span>
|
||
<span> </span>
|
||
<span>الی</span>
|
||
<span> </span>
|
||
<span>@Model.EndDateFa</span>
|
||
</div>
|
||
</div>
|
||
<input type="hidden" id="yearHidden" asp-for="Year"/>
|
||
<input type="hidden" id="monthHidden" asp-for="Month"/>
|
||
<div class="col-md-12 inputs" id="table-container">
|
||
<table id="worksTable" class="table table-bordered table-striped">
|
||
<thead style="background-color:#a9fcff">
|
||
<tr>
|
||
<th class="centerized moreThan"> بیشتر از 500000 نفر</th>
|
||
<th class="centerized lessThan"> کمتر از 500000 نفر</th>
|
||
<th class="centerized worksTitle" rowspan="2">مشاغل</th>
|
||
<th class="centerized" rowspan="2" style="border-right: none;">#</th>
|
||
</tr>
|
||
<tr>
|
||
<th class="centerized row2-font">ضریب</th>
|
||
<th class="centerized row2-font">ضریب</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
|
||
@{
|
||
var index = 1;
|
||
var tabIndex = 3;
|
||
}
|
||
@foreach (var item in Model.InsuranceJobItems)
|
||
{
|
||
<tr data-id="@item.Id">
|
||
<td>
|
||
<div class="col-md-9" style="position: relative;right: 10px;">
|
||
<input class="items ratioMore" tabindex="@(tabIndex + 2)" type="text" placeholder="" value="@item.PercentageMoreThan">
|
||
</div>
|
||
<div class="col-md-2">
|
||
@if (index == 1)
|
||
{
|
||
<a >
|
||
<i class="fa fa-trash trash" aria-hidden="true" style="color: grey"></i>
|
||
</a>
|
||
}
|
||
else
|
||
{
|
||
<a class="delete">
|
||
<i class="fa fa-trash trash trash-icon" aria-hidden="true"></i>
|
||
</a>
|
||
}
|
||
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<div class="col-md-12">
|
||
<input class="items ratioLess" tabindex="@(tabIndex + 1)" type="text" placeholder="" value="@item.PercentageLessThan">
|
||
</div>
|
||
</td>
|
||
<td class="td-select-search" onclick="inputFocus(this)">
|
||
<div class="custom-select text-right">
|
||
<ul class="ul-search text-right">
|
||
@foreach (var jobItem in item.JobList)
|
||
{
|
||
<li>
|
||
<span data-value="@jobItem.Id" class="items-selected">
|
||
@jobItem.JobName
|
||
<span data-code="@jobItem.JobCode" data-name="@jobItem.JobName" onclick="deleteSelect(this, @jobItem.Id)" class="del-selected">
|
||
<i class="fa fa-times"></i>
|
||
</span>
|
||
</span>
|
||
</li>
|
||
}
|
||
<li>
|
||
<input onkeyup="handleClick(event), searchText(this)" onkeypress="searchTextResize(this)" onclick="handleClick(event)" class="text-right input-text" tabindex="@(tabIndex)"/>
|
||
</li>
|
||
</ul>
|
||
<ul class="result options text-right">
|
||
</ul>
|
||
</div>
|
||
<span class="span-input"></span>
|
||
</td>
|
||
<td class="centerized">@index</td>
|
||
</tr>
|
||
|
||
index = index + 1;
|
||
tabIndex = tabIndex + 3;
|
||
}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<a class="add" onclick="addbtn()"><i class="fa fa-plus" aria-hidden="true" style="margin: 0px 5px;"></i>افزودن </a>
|
||
</div>
|
||
<div class="btns">
|
||
<div class="col-md-5">
|
||
<a href="#" class=" btn btn-modal" id="save" onclick="sendData();">ذخیره</a>
|
||
<button class="btn btn-modal" id="close" data-dismiss="modal">بستن</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@{
|
||
<script src="~/lib/jquery-ajax-unobtrusive/jquery.unobtrusive-ajax.min.js"></script>
|
||
<script src="~/adminTheme/assets/datatables/jquery.dataTables.min.js"></script>
|
||
<script src="~/adminTheme/assets/datatables/dataTables.bootstrap.js"></script>
|
||
<script src="~/lib/select2/js/select2.js"></script>
|
||
<script src="~/lib/select2/js/i18n/fa.js"></script>
|
||
<link href="~/AdminTheme/assets/datatables/jquery.dataTables.min.css" rel="stylesheet" type="text/css"/>
|
||
<link href="~/lib/select2/css/select2.css" rel="stylesheet"/>
|
||
//<script src="~/AdminTheme/js/numeral.min.js"></script>
|
||
}
|
||
<script>
|
||
|
||
$(document).ready(function() {
|
||
|
||
$("#economicCode").on("keydown",
|
||
function(event) {
|
||
const keyCode = event.which || event.keyCode;
|
||
const isDigit = (keyCode >= 48 && keyCode <= 57) || (keyCode >= 96 && keyCode <= 105);
|
||
const isControlKey = (keyCode === 189) || (keyCode === 8) || (keyCode === 9) || (keyCode === 13) || (keyCode === 35) || (keyCode === 36) || (keyCode === 37) || (keyCode === 39) || (keyCode === 46);
|
||
if (!isDigit && !isControlKey) {
|
||
event.preventDefault();
|
||
}
|
||
});
|
||
|
||
$(".td-select-search").on("keyup",
|
||
function() {
|
||
handleClick(event);
|
||
});
|
||
// Show/hide dropdown options when toggle button is clicked
|
||
$('.toggle-button').click(function() {
|
||
$(this).siblings('.options').toggleClass('visible');
|
||
});
|
||
// Add selected option to the container when an option is clicked
|
||
$('.options li').click(function() {
|
||
const value = $(this).data('value');
|
||
const optionChip = $(`<span class="option-chip">${value}<span class="remove-option">x</span></span>`);
|
||
optionChip.appendTo($('.selected-options'));
|
||
});
|
||
// Remove option from the container when "x" button is clicked
|
||
$('.selected-options').on('click',
|
||
'.remove-option',
|
||
function() {
|
||
$(this).parent('.option-chip').remove();
|
||
});
|
||
$('#table-container').addClass('hide-scrollbar');
|
||
|
||
|
||
$('.ratioMore').on('input',
|
||
function() {
|
||
this.value = this.value.replace(/[^\d.,]/g, '');
|
||
});
|
||
|
||
$('.ratioLess').on('input',
|
||
function() {
|
||
this.value = this.value.replace(/[^\d.,]/g, '');
|
||
});
|
||
|
||
});
|
||
|
||
function sendData() {
|
||
if (!$('#save').is('[disabled=disabled]')) {
|
||
|
||
var allInputsFilled = true;
|
||
$('.ratioLess, .ratioMore , #EconomicCode , #InsuranceJobTitle').each(function() {
|
||
if ($(this).val() === '' || $(this).val() === 0) {
|
||
allInputsFilled = false;
|
||
$(this).addClass('errored');
|
||
} else {
|
||
$(this).removeClass('errored');
|
||
}
|
||
});
|
||
|
||
$('.custom-select').each(function() {
|
||
const count = $(this).find('.items-selected').length;
|
||
if (count === 0) {
|
||
allInputsFilled = false;
|
||
$(this).addClass('errored');
|
||
} else {
|
||
$(this).removeClass('errored');
|
||
}
|
||
});
|
||
if (!allInputsFilled) {
|
||
$.Notification.autoHideNotify('error', 'top right', 'پیام سیستم ', "لطفا تمام فیلد ها را تکمیل کنید");
|
||
} else {
|
||
$('#divData').html('');
|
||
$("#save").prop("disabled", true);
|
||
$('#divData').append(`<input type="hidden" name="EconomicCode" id="EconomicCode" value="${$("#economicCode").val()}" />`);
|
||
$('#divData').append(`<input type="hidden" name="Id" id="Id" value="${@Model.Id}" />`);
|
||
$('#divData').append(`<input type="hidden" name="InsuranceJobTitle" id="InsuranceJobTitle" value="${$("#insuranceJobTitle").val()}" />`);
|
||
$('#divData').append(`<input type="hidden" name="Year" id="Year" value="${$("#yearHidden").val()}" />`);
|
||
$('#divData').append(`<input type="hidden" name="Month" id="Month" value="${$("#monthHidden").val()}" />`);
|
||
|
||
$("#worksTable tbody").find('tr').each(function(i) {
|
||
const ratioLess = $(this).find("input.ratioLess").val();
|
||
const ratioMore = $(this).find("input.ratioMore").val();
|
||
const id = $(this).attr("data-id");
|
||
|
||
$('#divData').append(`<input type="hidden" name="InsuranceJobItems[${i}].Id" id="ItemsInsuranceJobItems_${i}__Id" value="${id}" />`);
|
||
$('#divData').append(`<input type="hidden" name="InsuranceJobItems[${i}].PercentageLessThan" id="ItemsInsuranceJobItems_${i
|
||
}__PercentageLessThan" value="${ratioLess}" />`);
|
||
$('#divData').append(`<input type="hidden" name="InsuranceJobItems[${i}].PercentageMoreThan" id="ItemsInsuranceJobItems_${i
|
||
}__PercentageMoreThan" value="${ratioMore}" />`);
|
||
var span_ = $(this).find('td.td-select-search').find('span.span-input');
|
||
$(this).find('.custom-select').find('span.items-selected').each(function(x) {
|
||
// console.log($(this).attr("class"));
|
||
const value = $(this).attr("data-value");
|
||
span_.append(`<input type="hidden" name="InsuranceJobItems[${i}].JobIds[${x}]" value="${value}" />`);
|
||
$('#divData').append(`<input type="hidden" name="InsuranceJobItems[${i}].JobIds[${x}]" id="ItemsInsuranceJobItems_${i}__JobIds_${x
|
||
}_" value="${value}" />`);
|
||
});
|
||
});
|
||
// $('#send').click();
|
||
$('#editForm').submit();
|
||
}
|
||
}
|
||
}
|
||
|
||
$('#editForm').submit(function(e) {
|
||
e.preventDefault();
|
||
e.stopImmediatePropagation();
|
||
$.ajax({
|
||
type: "POST",
|
||
url: $(this).attr('action'),
|
||
data: $(this).serialize(),
|
||
success: function(response) {
|
||
if (response.isSuccedded == true) {
|
||
$.Notification.autoHideNotify('success', 'top right', response.message);
|
||
$('.btn-search1').click();
|
||
$("#MainModal").modal('hide');
|
||
} else {
|
||
$("#save").prop("disabled", false);
|
||
$.Notification.autoHideNotify('error', 'top right', response.message);
|
||
}
|
||
}
|
||
});
|
||
return false;
|
||
});
|
||
|
||
|
||
let tbody = $("#worksTable tbody");
|
||
let updateRowNumbers = () => {
|
||
const rows = tbody.find("tr");
|
||
rows.each(function(index) {
|
||
$(this).find("td:last-child").text(index + 1);
|
||
const selectIndex = index + 1;
|
||
});
|
||
};
|
||
let addRow = () => {
|
||
const rowCount = tbody.find("tr").length;
|
||
var inputCount = $('#worksTable input').length;
|
||
const newRow = `<tr><td><div class="col-md-9" style="position: relative;right: 10px;"><input class="items ratioMore" type="text" placeholder="" tabindex="${
|
||
inputCount + 5}" /></div><div class="col-md-2"><a class="delete"><i class="fa fa-trash trash trash-icon" aria-hidden="true" "></i></a></div></td><td><div class="col-md-12"><input class="items ratioLess" type="text" placeholder="" tabindex="${
|
||
inputCount + 4}" /></div></td><td onclick="inputFocus(this)" class="td-select-search"> <div class="custom-select text-right"> <ul class="ul-search text-right"> <li> <input onkeyup="handleClick(event) , searchText(this) " onkeypress="searchTextResize(this)" onclick="handleClick(event)" class="text-right input-text" tabindex="${
|
||
inputCount + 3}" /></li> </ul> <ul class="result options text-right"> </ul> </div> <span class="span-input"></span> </td><td class="centerized">${
|
||
rowCount + 1}</td></tr>`;
|
||
tbody.append(newRow);
|
||
$(".td-select-search").on("keyup",
|
||
function() {
|
||
handleClick(event);
|
||
});
|
||
$('.ratioLess').on('input',
|
||
function() {
|
||
this.value = this.value.replace(/[^\d.,]/g, '');
|
||
});
|
||
};
|
||
var textlength = 0;
|
||
|
||
function searchTextResize(element) {
|
||
textlength = (textlength == 0 ? 1 : textlength);
|
||
const width_ = (Number(textlength) + 3);
|
||
$(element).css('width', width_ + 'rem');
|
||
}
|
||
|
||
function handleClick(event) {
|
||
const customSelect = $(event.target).closest(".custom-select input");
|
||
const divOffset = customSelect.offset();
|
||
$(".options").css("top", divOffset.top - 5);
|
||
if ($(window).width() < 1550) {
|
||
$(".options").css("top", divOffset.top + 10);
|
||
console.log(1);
|
||
}
|
||
}
|
||
|
||
$(".td-select-search").on("keyup",
|
||
function() {
|
||
handleClick(event);
|
||
});
|
||
|
||
function searchText(element) {
|
||
const text = $(element).val();
|
||
textlength = text.length;
|
||
$(element).parent().parent().parent('.custom-select').children('.result').html('');
|
||
if (text != "") {
|
||
$(element).parent().parent().parent('.custom-select').children('.result').html('');
|
||
$(element).parent().parent().parent('.custom-select').children('ul.result').show();
|
||
$.ajax({
|
||
/* contentType: 'charset=utf-8',*/
|
||
dataType: 'json',
|
||
type: 'POST',
|
||
url: '@Url.Page("/Company/InsuranceJob/Index", "JobListByText")',
|
||
headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
|
||
data: { "textSearch": text },
|
||
success: function(response) {
|
||
$(element).parent().parent().parent('.custom-select').children('.result').html('');
|
||
if (response.jobList.length > 0) {
|
||
var jobSelectIds = [];
|
||
// $(element).parent('.custom-select').children().children('span.items-selected').each(function(x)
|
||
$('.custom-select').children('ul.ul-search').find('span.items-selected').each(function(x) {
|
||
jobSelectIds.push(Number($(this).attr('data-value')));
|
||
});
|
||
$.each(response.jobList,
|
||
function(i, item) {
|
||
if (jQuery.inArray(item.id, jobSelectIds) == -1) {
|
||
$(element).parent().parent().parent('.custom-select').children('.result').append(`<li class="job-item" onclick="selectItemSearch(this)" data-code="${item.jobCode}" data-name="${item.jobName}" data-value="${item.id
|
||
}"><span class="name-right">${item.jobName}</span><span class="line">|</span><span class="code-left">${item.jobCode}</span></li>`);
|
||
$('.code-left').each(function() {
|
||
const spanContent = $(this).text();
|
||
if (/\D/.test(spanContent)) { // Check if the content of the span contains non-digits
|
||
$(this).css('color', 'red');
|
||
}
|
||
});
|
||
}
|
||
});
|
||
} else {
|
||
$(element).parent().parent().parent('.custom-select').children('.result').html('');
|
||
$(element).parent().parent().parent('.custom-select').children('.result').append('<li class="job-item"><span>هیچ نتیجه ای یافت نشد</span></li>');
|
||
}
|
||
},
|
||
failure: function(response) {
|
||
console.log(5, response);
|
||
}
|
||
|
||
|
||
});
|
||
|
||
|
||
//$(".job-item").click(function(){ console.log(22);
|
||
// $(this).unbind().bind('click', trainClick);
|
||
// // alert('train is clicked');
|
||
//});
|
||
|
||
// $(".job-item").on("click",function(){
|
||
// trainClick(this);
|
||
// $(this).unbind().bind('click', trainClick);
|
||
// alert('train is clicked');
|
||
// });
|
||
|
||
}
|
||
}
|
||
|
||
function selectItemSearch(element) {
|
||
const code = $(element).attr("data-code");
|
||
const name = $(element).attr("data-name");
|
||
const value = $(element).attr("data-value");
|
||
const inputCount = $('#worksTable input').length;
|
||
$(element).parent().parent().children('ul.ul-search').find('input').val('');
|
||
|
||
//var inputText_= $(element).parent().parent().children('ul.ul-search').find('input').clone();
|
||
$(element).parent().parent().children('ul.ul-search').find('input').parent('li').remove();
|
||
|
||
// var inputText_= $(element).parent().parent('.custom-select').children('input').clone();
|
||
//$(element).parent().parent('.custom-select').children('input').remove();
|
||
|
||
$(element).parent().parent().children('ul.ul-search').append(`<li><span data-value="${value}" class="items-selected">${name}<span data-code="${code}" data-name="${name
|
||
}" onclick="deleteSelect(this,${value})" class="del-selected"><i class="fa fa-times"></></span></span></li>`);
|
||
$(element).parent().parent().children('ul.ul-search').append(`<li> <input onkeyup="searchText(this)" onkeypress="searchTextResize(this)" class="text-right input-text" tabindex="${inputCount
|
||
}"/></li>`);
|
||
// $(element).parent().parent('.custom-select').append(inputText_);
|
||
// $(element).parent().hide();
|
||
}
|
||
|
||
|
||
function deleteSelect(element, id) {
|
||
|
||
const text = $(element).parent().parent('.custom-select').find('input.input-text').val();
|
||
const code = $(element).attr("data-code");
|
||
const name = $(element).attr("data-name");
|
||
const value = id;
|
||
|
||
if (text != '' && name.indexOf(text) != -1) {
|
||
$(element).parent().parent('.custom-select').children('.result').prepend(`<li class="job-item" onclick="selectItemSearch(this)" data-code="${code}" data-name="${name}" data-value="${id
|
||
}"><span class="name-right">${name}</span><span class="line">|</span> <span class="code-left">${code}</span></li>`);
|
||
$('.code-left').each(function() {
|
||
const spanContent = $(this).text();
|
||
if (/\D/.test(spanContent)) { // Check if the content of the span contains non-digits
|
||
$(this).css('color', 'red');
|
||
}
|
||
});
|
||
}
|
||
|
||
$(element).parent().remove();
|
||
}
|
||
|
||
//$("#table tr").find(".td-select-search").click(function(){
|
||
// console.log( $(this).find('ul.ul-search').attr('class'));
|
||
// $(this).find('ul.ul-search').find('.input-text').focus();
|
||
//});
|
||
|
||
|
||
$(document).click(
|
||
function(e) {
|
||
// console.log($(e.target).attr('class'));
|
||
const classElement = $(e.target).parent().attr('class');
|
||
if (classElement != "del-selected") {
|
||
$("#worksTable").find('.result').hide();
|
||
}
|
||
});
|
||
|
||
function inputFocus(element) {
|
||
$(element).find('ul.ul-search').find('.input-text').focus();
|
||
}
|
||
|
||
function addbtn() {
|
||
var allInputsFilled = true;
|
||
$('.ratioLess, .ratioMore').each(function() {
|
||
if ($(this).val() === '' || $(this).val() === 0) {
|
||
allInputsFilled = false;
|
||
$(this).addClass('errored');
|
||
} else {
|
||
$(this).removeClass('errored');
|
||
}
|
||
});
|
||
$('.custom-select').each(function() {
|
||
const count = $(this).find('.items-selected').length;
|
||
if (count === 0) {
|
||
allInputsFilled = false;
|
||
$(this).addClass('errored');
|
||
} else {
|
||
$(this).removeClass('errored');
|
||
}
|
||
});
|
||
if (allInputsFilled) {
|
||
addRow();
|
||
updateRowNumbers();
|
||
const rowCount = tbody.find("tr").length;
|
||
if (rowCount > 4) {
|
||
$('#table-container').removeClass('hide-scrollbar');
|
||
} else {
|
||
$('#table-container').addClass('hide-scrollbar');
|
||
}
|
||
}
|
||
$(".trash-icon").on("mouseenter",
|
||
function() {
|
||
$(this).animate({ left: "-14px" }, 50)
|
||
.animate({ left: "-10px" }, 50)
|
||
.animate({ left: "-12px" }, 50);
|
||
});
|
||
|
||
$(".trash-icon").on("mouseleave",
|
||
function() {
|
||
$(this).stop(true).animate({ left: "-12px" }, 50);
|
||
});
|
||
const rowCount = tbody.find("tr").length;
|
||
$('.delete').click(function() {
|
||
$(this).closest('tr').fadeOut(200,
|
||
function() {
|
||
$(this).remove();
|
||
updateRowNumbers();
|
||
|
||
});
|
||
if (rowCount < 4) {
|
||
$('#table-container').addClass('hide-scrollbar');
|
||
}
|
||
});
|
||
|
||
// var rowCount = tbody.find("tr").length;
|
||
if (rowCount > 4) {
|
||
$('#table-container').removeClass('hide-scrollbar');
|
||
} else {
|
||
$('#table-container').addClass('hide-scrollbar');
|
||
}
|
||
}
|
||
|
||
$(".trash-icon").on("mouseenter",
|
||
function() {
|
||
$(this).animate({ left: "-14px" }, 50)
|
||
.animate({ left: "-10px" }, 50)
|
||
.animate({ left: "-12px" }, 50);
|
||
});
|
||
|
||
$(".trash-icon").on("mouseleave",
|
||
function() {
|
||
$(this).stop(true).animate({ left: "-12px" }, 50);
|
||
});
|
||
|
||
let rowCount = tbody.find("tr").length;
|
||
$('.delete').click(function() {
|
||
$(this).closest('tr').fadeOut(200,
|
||
function() {
|
||
$(this).remove();
|
||
updateRowNumbers();
|
||
|
||
});
|
||
if (rowCount < 4) {
|
||
$('#table-container').addClass('hide-scrollbar');
|
||
}
|
||
});
|
||
|
||
// var rowCount = tbody.find("tr").length;
|
||
if (rowCount > 4) {
|
||
$('#table-container').removeClass('hide-scrollbar');
|
||
} else {
|
||
$('#table-container').addClass('hide-scrollbar');
|
||
}
|
||
|
||
</script> |