{#
This file is part of EC-CUBE
Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
http://www.ec-cube.co.jp/
For the full copyright and license information, please view the LICENSE
file that was distributed with this source code.
#}
{% extends '@admin/default_frame.twig' %}
{% set menus = ['product', 'class_name'] %}
{% block title %}{{ 'admin.product.class_category_management'|trans }}{% endblock %}
{% block sub_title %}{{ 'admin.product.product_management'|trans }}{% endblock %}
{% form_theme form '@admin/Form/bootstrap_4_horizontal_layout.html.twig' %}
{% block stylesheet %}
<style type="text/css">
.list-group-item:hover {
z-index: inherit;
}
</style>
{% endblock stylesheet %}
{% block javascript %}
<script type="text/javascript">
$(function() {
// 初期表示時のsort noを保持.
var oldSortNos = [];
var sortable = $('.sortable-item');
sortable.each(function() {
oldSortNos.push(this.dataset.sortNo);
});
oldSortNos.sort(function(a, b) {
return a - b;
}).reverse();
// 並び替え後にsort noを更新
var updateSortNo = function() {
var newSortNos = {};
var i = 0;
$('.sortable-item').each(function() {
newSortNos[this.dataset.id] = oldSortNos[i];
i++;
});
$.ajax({
url: '{{ url('admin_product_class_category_sort_no_move') }}',
type: 'POST',
data: newSortNos
}).always(function() {
$(".modal-backdrop").remove();
});
};
// 最初と最後の↑↓を再描画
var redrawDisableAllows = function() {
var items = $('.sortable-item');
items.find('a').removeClass('disabled');
items.first().find('a.action-up').addClass('disabled');
items.last().find('a.action-down').addClass('disabled');
};
// オーバレイ後, 表示順の更新を行う
var moveSortNo = function() {
$('body').append($('<div class="modal-backdrop show"></div>'));
updateSortNo();
redrawDisableAllows();
};
// Drag and Drop
$('.sortable-container').sortable({
items: '> .sortable-item',
cursor: 'move',
update: function(e, ui) {
moveSortNo();
}
});
// Up
sortable.on('click', 'a.action-up', function(e) {
e.preventDefault();
var current = $(this).parents('li');
if (current.prev().hasClass('sortable-item')) {
current.prev().before(current);
moveSortNo();
}
});
// Down
sortable.on('click', 'a.action-down', function(e) {
e.preventDefault();
var current = $(this).parents('li');
if (current.next().hasClass('sortable-item')) {
current.next().after(current);
moveSortNo();
}
});
sortable.on('click', 'a.action-edit', function(e) {
e.preventDefault();
var current = $(this).parents('li');
current.find('.mode-view').addClass('d-none');
current.find('.mode-edit').removeClass('d-none');
});
sortable.on('click', 'button.action-edit-cancel', function(e) {
location.href = "{{ url('admin_product_class_category', {'class_name_id': ClassName.id}) }}";
});
sortable.find('.is-invalid').each(function(e) {
var current = $(this).parents('li');
current.find('.mode-view').addClass('d-none');
current.find('.mode-edit').removeClass('d-none');
});
// 削除モーダルのhrefとmessageの変更
$('#DeleteModal').on('shown.bs.modal', function(event) {
var target = $(event.relatedTarget);
// hrefの変更
$(this).find('[data-method="delete"]').attr('href', target.data('url'));
// messageの変更
$(this).find('p.modal-message').text(target.data('message'));
});
});
</script>
{% endblock %}
{% block main %}
<div class="c-contentsArea__cols">
<div class="c-contentsArea__primaryCol">
<div class="c-primaryCol">
<div class="card rounded border-0 mb-4">
<div class="card-header">
<div class="row">
<div class="col"><span class="card-title">{{ 'admin.product.class_name'|trans }}</span></div>
</div>
</div>
<div id="ex-class_category" class="card-body">
<div class="row mb-2">
<div class="col-auto"><span>{{ 'admin.product.class_name'|trans }}</span></div>
<div class="col-auto"><span>{{ ClassName.name }}</span></div>
</div>
<div class="row mb-2">
<div class="col-auto"><span>{{ 'admin.product.class_name__backend_name'|trans }}</span></div>
<div class="col-auto"><span>{{ ClassName.backend_name }}</span></div>
</div>
</div>
</div>
<div class="card rounded border-0 mb-4">
<div class="card-header"><span class="card-title">{{ 'admin.product.class_category'|trans }}</span></div>
<div id="ex-class_category-edit" class="card-body p-0">
<div class="card rounded border-0">
<ul class="list-group list-group-flush sortable-container">
<li class="list-group-item">
<form role="form" class="row" name="form1" id="form1" method="post" action="{{ url('admin_product_class_category', {'class_name_id': ClassName.id}) }}">
<div class="col-auto align-self-center"><span>{{ 'admin.product.class_category_name__short'|trans }}</span></div>
<div class="col-3 me-2">
{{ form_widget(form._token) }}
{{ form_widget(form.name) }}
{{ form_errors(form.name) }}
</div>
<div class="col-auto align-self-center"><span>{{ 'admin.product.class_category__backend_name'|trans }}</span></div>
<div class="col-3">
{{ form_widget(form.backend_name) }}
{{ form_errors(form.backend_name) }}
</div>
<div class="col-auto">
<button class="btn btn-ec-regular" type="submit">{{ 'admin.common.create__new'|trans }}</button>
</div>
</form>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-auto"><strong> </strong></div>
<div class="col-auto"><strong>{{ 'admin.common.id'|trans }}</strong></div>
<div class="col-1"><strong>{{ 'admin.product.class_category'|trans }}</strong></div>
</div>
</li>
{% for ClassCategory in ClassCategories %}
<li id="ex-class_category-{{ ClassCategory.id }}" class="list-group-item sortable-item" data-classname-id="{{ ClassCategory.ClassName.id }}" data-id="{{ ClassCategory.id }}" data-sort-no="{{ ClassCategory.sortNo }}">
<div class="row justify-content-around mode-view">
<div class="col-auto d-flex align-items-center"><i class="fa fa-bars text-ec-gray"></i></div>
<div class="col-auto d-flex align-items-center">{{ ClassCategory.id }}</div>
<div class="col d-flex align-items-center">{{ ClassCategory.name }} [{{ 'admin.product.class_category__backend_name'|trans }}{{ 'admin.common.separator__colon'|trans }}{{ ClassCategory.backend_name }}]</div>
<div class="col-auto text-end">
<a class="btn btn-ec-actionIcon me-2 action-up {% if loop.first %}disabled{% endif %}" href="" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ 'admin.common.up'|trans }}">
<i class="fa fa-arrow-up fa-lg text-secondary"></i>
</a>
<a class="btn btn-ec-actionIcon me-2 action-down {% if loop.last %}disabled{% endif %}" href="" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ 'admin.common.down'|trans }}">
<i class="fa fa-arrow-down fa-lg text-secondary"></i>
</a>
<a class="btn btn-ec-actionIcon me-2 action-edit" href="" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ 'admin.common.edit'|trans }}">
<i class="fa fa-pencil fa-lg text-secondary"></i>
</a>
<a class="btn btn-ec-actionIcon me-2 action-visible" href="{{ url('admin_product_class_category_visibility', {'class_name_id': ClassCategory.ClassName.id, 'id': ClassCategory.id}) }}"
data-bs-toggle="tooltip" data-bs-placement="top" title="{{ ClassCategory.visible ? 'admin.common.to_hide'|trans : 'admin.common.to_show'|trans }}"
data-confirm="false" data-method="put" {{ csrf_token_for_anchor() }} >
<i class="fa fa-toggle-{{ ClassCategory.visible ? 'on' : 'off' }} fa-lg text-secondary" aria-hidden="true"></i>
</a>
<div class="d-inline-block me-2" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ 'admin.common.delete'|trans }}">
<a class="btn btn-ec-actionIcon" data-bs-toggle="modal" data-bs-target="#DeleteModal"
data-url="{{ url('admin_product_class_category_delete', {'class_name_id' : ClassName.id, 'id': ClassCategory.id}) }}"
data-message="{{ 'admin.common.delete_modal__message'|trans({ "%name%" : ClassCategory.name }) }}">
<i class="fa fa-close fa-lg text-secondary"></i>
</a>
</div>
</div>
</div>
<form class="row d-none mode-edit" method="post" action="{{ url('admin_product_class_category_edit', {'class_name_id': ClassName.id, 'id': ClassCategory.id}) }}">
{{ form_widget(forms[ClassCategory.id]._token) }}
<div class="col-3 me-2">
{{ form_widget(forms[ClassCategory.id].name, {'attr': {'data-origin-value': forms[ClassCategory.id].name.vars.value}}) }}
{{ form_errors(forms[ClassCategory.id].name) }}
</div>
<div class="col-auto align-self-center"><span>{{ 'admin.product.class_category__backend_name'|trans }}</span></div>
<div class="col-auto align-items-center">
{{ form_widget(forms[ClassCategory.id].backend_name, {'attr': {'data-origin-value': forms[ClassCategory.id].backend_name.vars.value}}) }}
{{ form_errors(forms[ClassCategory.id].backend_name) }}
</div>
{{ form_widget(forms[ClassCategory.id].visible, {'attr': {'class': 'd-none'}}) }}
<div class="col-auto align-items-center">
<button class="btn btn-ec-conversion" type="submit">{{ 'admin.common.decision'|trans }}</button>
</div>
<div class="col-auto align-items-center">
<button class="btn btn-ec-sub action-edit-cancel" type="button">{{ 'admin.common.cancel'|trans }}</button>
</div>
</form>
</li>
{% endfor %}
</ul>
<!-- 削除モーダル -->
<div class="modal fade" id="DeleteModal" tabindex="-1" role="dialog"
aria-labelledby="DeleteModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title fw-bold">
{{ 'admin.common.delete_modal__title'|trans }}
</h5>
<button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body text-start">
<p class="text-start modal-message"><!-- jsでメッセージを挿入 --></p>
</div>
<div class="modal-footer">
<button class="btn btn-ec-sub" type="button" data-bs-dismiss="modal">
{{ 'admin.common.cancel'|trans }}
</button>
<a class="btn btn-ec-delete" href="#" {{ csrf_token_for_anchor() }}
data-method="delete" data-confirm="false">
{{ 'admin.common.delete'|trans }}
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<p>{{ 'admin.common.drag_and_drop_description'|trans }}</p>
</div>
</div>
<div class="c-conversionArea">
<div class="c-conversionArea__container">
<div class="row justify-content-between align-items-center">
<div class="col-6">
<div class="c-conversionArea__leftBlockItem">
<a class="c-baseLink" href="{{ url('admin_product_class_name') }}">
<i class="fa fa-backward" aria-hidden="true"></i><span>{{ 'admin.product.class_management'|trans }}</span>
</a>
</div>
</div>
<div class="col-6"></div>
</div>
</div>
</div>
</div>
{% endblock %}