<?
if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
$clearCache = in_array($_REQUEST['mode'], $arResult["MODES"]) ? true : false;
?>
<?if(!$clearCache):?>
<div class="container" id="task_list">
<?endif;?>
<a href="#" class="btn btn-primary" data-toggle="modal" data-target="#form"><?=GetMessage("ADD")?></a>
<?foreach($arResult["ITEMS"] as $arItem):?>
<div class="card my-4" data-id="<?=$arItem["ID"]?>">
<div class="card-header">
<?=$arItem["UF_DATETIME"]?>
<?if(!empty($arItem["UF_DATETIME_COMPLETION"])):?> - <?=$arItem["UF_DATETIME_COMPLETION"]?><?endif;?>
</div>
<div class="card-body">
<h5 class="card-title"><?=$arItem["UF_NAME"]?></h5>
<p class="card-text"><?=$arItem["UF_COMMENT"]?></p>
<a href="#" class="card-link" data-toggle="modal" data-target="#form"
data-name="<?=$arItem["UF_NAME"]?>" data-datetime="<?=$arItem["UF_DATETIME"]?>"
data-datetimeCompletion="<?=$arItem["UF_DATETIME_COMPLETION"]?>" data-comment="<?=$arItem["UF_COMMENT"]?>"
data-completed="<?=$arItem["UF_COMPLETED"]?>">
<?=GetMessage("EDIT")?>
</a>
<a href="#" class="card-link delete" data-mode="delete"><?=GetMessage("DELETE")?></a>
</div>
<div class="card-footer">
<?if(!$arItem["UF_COMPLETED"]):?>
<a href="#" class="btn btn btn-secondary complete" data-mode="complete"><?=GetMessage("COMPLETE")?></a>
<?else:?>
<a href="#" class="btn btn btn-secondary return-to-work" data-mode="returnToWork"><?=GetMessage("RETURN_TO_WORK")?></a>
<?endif;?>
</div>
</div>
<?endforeach;?>
<?
if($arParams['ROWS_PER_PAGE'] > 0)
{
$APPLICATION->IncludeComponent(
'bitrix:main.pagenavigation',
'',
array(
'NAV_OBJECT' => $arResult['nav_object'],
'SEF_MODE' => 'Y',
),
$component,
);
}
?>
<div class="modal fade" id="form" tabindex="-1" role="dialog" aria-labelledby="form" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="formTitle"><?=GetMessage("FORM_NAME")?></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<fo rm>
<input id="formId" type="hidden" value="">
<div class="modal-body">
<div class="form-group">
<div class="form-check form-check-inline">
<label class="form-check-label mr-2" for="formCompleted"><?=GetMessage("FORM_COMPLETED")?></label>
<input class="form-check-input" type="checkbox" id="formCompleted" value="">
</div>
</div>
<div class="form-group">
<label for="formName"><?=GetMessage("FORM_FIELD_NAME")?></label>
<input type="text" class="form-control" id="formName" placeholder="Введите название задачи">
</div>
<div class="form-group">
<label for="formDatetime"><?=GetMessage("FORM_FIELD_DATETIME")?></label>
<input type='text' class="form-control" id='formDatetime' placeholder="<?=date("d.m.Y H:i:s")?>" />
</div>
<div class="form-group">
<label for="formDatetimeCompletion"><?=GetMessage("FORM_FIELD_DATETIME_COMPLETION")?></label>
<input type='text' class="form-control" id='formDatetimeCompletion' placeholder="<?=date("d.m.Y H:i:s")?>" />
</div>
<div class="form-group">
<label for="formComment"><?=GetMessage("FORM_FIELD_COMMENT")?></label>
<textarea class="form-control" id="formComment" rows="3" placeholder="Введите комментарий к задаче"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" id="formCancel"><?=GetMessage("FORM_BTN_CANCEL")?></button>
<button type="button" class="btn btn-primary" id="formSave"><?=GetMessage("FORM_BTN_SAVE")?></button>
</div>
</form>
</div>
</div>
</div>
<?if(!$clearCache):?>
</div>
<sc ript type="text/javascript">
window.onl oad=function()
{
function showModal()
{
$('#formSave').on('click', function () {
console.log('formSave');
var data = {
id : $('#formId').val(),
name: $('#formName').val(),
datetime : $('#formDatetime').val(),
datetimeCompletion : $('#formDatetimeCompletion').val(),
comment : $('#formComment').val(),
completed : $('#formCompleted').prop("checked") ? true : "",
mode : $('#formId').val() ? 'edit' : 'add',
};
var request = $.ajax({
url: "<?=$APPLICATION->GetCurPage(true);?>",
method: "POST",
data: data ,
});
request.done(function( html ) {
$('#form').modal('hide');
$('#form').on('hidden.bs.modal', function (e) {
$( "#task_list" ).html( html );
console.log("ajax");
showModal();
});
});
request.fail(function( jqXHR, textStatus ) {
console.log( "Request failed: " + textStatus );
});
});
$('#form').on('show.bs.modal', function (event)
{
var button = $(event.relatedTarget);
var name = button.data('name');
var datetime = button.data('datetime');
var datetimeCompletion = button.data('datetimeCompletion');
var comment = button.data('comment');
var completed = button.data('completed');
var modal = $(this);
var modalTitle = modal.find('#formTitle');
var formFieldCompleted = modal.find('#formCompleted');
var card = button.closest('.card');
var id = card.data('id');
var form = modal.find('form');
var formFieldId = modal.find('#formId');
var formFieldName = modal.find('#formName');
var formFieldDatetime = modal.find('#formDatetime');
var formFieldDatetimeCompletion = modal.find('#formDatetimeCompletion');
var formFieldComment = modal.find('#formComment');
var modalBtnSave = modal.find('#formSave');
var modalBtnCancel = modal.find('#formCancel');
if(button.attr("class") == "card-link")
{
modalTitle.html('<?=getMessage("FORM_TITLE_EDIT");?>');
if(completed)
formFieldCompleted.attr('checked', true);
else
formFieldCompleted.attr('checked', false);
formFieldName.val(name);
formFieldDatetime.val(datetime);
formFieldDatetimeCompletion.val(datetimeCompletion);
formFieldComment.val(comment);
formFieldId.val(id);
}
else
{
modalTitle.html('<?=getMessage("FORM_TITLE_ADD");?>');
form[0].reset();
formFieldCompleted.attr('checked', false);
}
});
$('.delete, .return-to-work, .complete').on("click", function()
{
var card = $(this).closest('.card');
var id = card.data('id');
var mode = $(this).data("mode");
var data = {
id : id,
mode : mode,
};
var request = $.ajax({
url: "<?=$APPLICATION->GetCurPage(true);?>",
method: "POST",
data: data ,
});
request.done(function( html ) {
$( "#task_list" ).html( html );
showModal();
});
request.fail(function( jqXHR, textStatus ) {
console.log( "Request failed: " + textStatus );
});
});
}
showModal();
}
</sc ript>
<?endif;?> |