{#
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 = ['content', 'file'] %}
{% block title %}{{ 'admin.content.file_management'|trans }}{% endblock %}
{% block sub_title %}{{ 'admin.content.contents_management'|trans }}{% endblock %}
{% form_theme form '@admin/Form/bootstrap_4_horizontal_layout.html.twig' %}
{% block stylesheet %}
<style>
.copy-file-path {
display: none;
}
</style>
{% endblock stylesheet %}
{% block javascript %}
<script src="{{ asset('assets/js/file_manager.js', 'admin') }}"></script>
<script>
arrTree = {{ tpl_javascript|raw }};
var paths = {{ paths|raw }}; // TODO 仮実装
$(function() {
var bread_crumbs = {{ now_dir_list|raw }};
var file_path = '';
var $delimiter = '<span> / </span>';
var $node = $('#bread');
var total = bread_crumbs.length;
for (var i in bread_crumbs) {
file_path += '/' + bread_crumbs[i];
if (i == total - 1) {
$li = $('<li class="breadcrumb-item active" />').text(bread_crumbs[i]);
} else {
$a = $('<a href="javascript:;" onclick="eccube.fileManager.openFolder(\'' + file_path.replace(/user_data/, '') + '\'); return false;" />')
.text(bread_crumbs[i]);
$li = $('<li class="breadcrumb-item" />').append($a);
}
$li.appendTo($node);
if (i < total - 1) $node.append($delimiter);
}
$('.action-copy').on('click',function(){
var updated = $(this).parents('tr').find('.updated');
var copy_file_path = $(this).parents('tr').find('.copy-file-path');
if ($(updated).is(':visible')) {
$('.updated').each(function() {
$(this).show();
});
$('.copy-file-path').each(function() {
$(this).hide();
});
$('.action-copy').each(function() {
$(this).attr('title', '{{ 'admin.common.copy_path'|trans }}');
$(this).tooltip('_fixTitle');
});
$(updated).hide();
$(copy_file_path).show();
$(copy_file_path).find('input:first').focus();
} else {
$(updated).show();
$(copy_file_path).hide();
}
});
$('.copy-file-path input').focus(function(){
$(this).select();
if (document.execCommand('copy')) {
var action_copy = $(this).parents('tr').find('.action-copy');
setTimeout(function() {
action_copy.attr('title', '{{ 'admin.common.copy_path_complete'|trans }}');
action_copy.tooltip('_fixTitle');
action_copy.tooltip('show');
}, 100);
}
});
});
eccube.fileManager.viewFileTree('directory_userdata', arrTree, '{{ tpl_now_dir }}', 'tree_select_file', 'tree_status', 'move');
</script>
{% endblock javascript %}
{% block main %}
<form name="form1" id="form1" method="post" action="?" enctype="multipart/form-data">
<input type="hidden" name="mode" value=""/>
<input type="hidden" name="now_file" value="{{ tpl_now_dir }}"/>
<input type="hidden" name="now_dir" value="{{ tpl_now_dir }}"/>
<input type="hidden" name="tree_select_file" value="{{ tpl_now_dir }}"/>
<input type="hidden" name="tree_status" value=""/>
<input type="hidden" name="select_file" value=""/>
{{ form_widget(form._token) }}
<div class="c-outsideBlock">
<div class="c-outsideBlock__contents">
<nav aria-label="breadcrumb" role="navigation">
<ol class="breadcrumb mb-2 p-0" id="bread"></ol>
</nav>
<div class="card rounded border-0 mb-4">
<div class="card-header"><span class="card-title">{{ 'admin.content.file.add_file__card_title'|trans }}</span></div>
<div class="card-body">
<div id="upload_box__file" class="row mb-2">
<div class="col-2" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ 'tooltip.content.file.upload_file'|trans }}"><span>{{ 'admin.content.file.add_file'|trans }}</span><i class="fa fa-question-circle fa-lg ms-1"></i></div>
<div class="col mb-3">
<div class="mb-2">
{{ form_widget(form.file) }}{# TODO input type="file" の装飾 #}
</div>
<div class="mb-2">
<a class="btn btn-ec-conversion action-upload" href="javascript:;" onclick="eccube.fileManager.setTreeStatus('tree_status');eccube.setModeAndSubmit('upload','',''); return false;">{{ 'admin.common.upload'|trans }}</a>
</div>
</div>
</div>
<div class="row mb-2">
<div class="col-2"><span>{{ 'admin.content.file.add_directory'|trans }}</span></div>
<div class="col">
<div class="row">
<div class="col-3">
{{ form_widget(form.create_file, {attr: {placeholder: 'admin.content.file.directory_name'}}) }}
</div>
<div class="col-auto">
<a class="btn btn-ec-regular action-create" href="javascript:" onclick="eccube.fileManager.setTreeStatus('tree_status');eccube.setModeAndSubmit('create','',''); return false;">{{ 'admin.common.create__new'|trans }}</a>
</div>
</div>
</div>
</div>
{% for error in errors %}
<p class="text-danger errormsg">{{ error.message|trans }}</p>
{% endfor %}
</div>
</div>
</div>
<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-8"><span class="card-title">{{ 'admin.content.file.file_list__card_title'|trans }}</span></div>
<div class="col-4 text-end"><a data-bs-toggle="collapse" href="#fileList" aria-expanded="false" aria-controls="fileList"><i class="fa fa-angle-up fa-lg"></i></a></div>
</div>
</div>
<div class="collapse show ec-cardCollapse" id="fileList">
<div class="card-body p-0">
<table class="table">
<tbody>
{% if tpl_is_top_dir != false %}
<tr>
<td class="align-middle text-center" style="width: 10%"><i class="fa fa-folder-o fa-2x"></i></td>
<td class="align-middle"><a href="javascript:;" onclick="eccube.fileManager.openFolder('{{ tpl_parent_dir }}')"><i class="fa fa-reply"></i></a></td>
<td class="align-middle"> </td>
<td class="align-middle"> </td>
<td class="align-middle"> </td>
</tr>
{% endif %}
{% for file in arrFileList %}
<tr id="{{ loop.index }}">
<td class="align-middle text-center">
{% if file.is_dir %}
<i class="fa fa-folder-o fa-2x"></i>
{% else %}
{% if file.extension|file_ext_icon({}, true) == 'fa-file-image-o' %}
<div class="d-inline-block p-3 bg-light"
style="background: no-repeat center center;
background-image: url('{{ asset(file.file_path|slice(1)|escape('css'), 'user_data') }}');
background-size: contain; width: 49px; height: 57px;">
</div>
{% else %}
<div class="d-inline-block p-3 bg-light">
{{ file.extension|file_ext_icon({class: "fa-2x"}) }}
</div>
{% endif %}
{% endif %}
</td>
<td class="align-middle">
{% if file.is_dir %}
<a href="javascript:;" onclick="eccube.setValue('tree_select_file', '{{ file.file_path }}', 'form1'); eccube.fileManager.selectFile('{{ loop.index }}', '#808080');eccube.setModeAndSubmit('move','',''); return false;">{{ file.file_name }}</a>
{% else %}
{{ file.file_name }}
{% endif %}
</td>
<td class="align-middle">
{% if not file.is_dir %}
{{ file.file_size }}
{% endif %}
</td>
<td class="align-middle">
<span class="updated">{{ file.file_time|date_sec }} {{ 'admin.content.file.updated'|trans }}</span>
{% if file.is_dir == false %}
<span class="copy-file-path"><input type="text" class="form-control" value="{{asset('', 'user_data')}}{{ file.file_path|slice(1) }}"></span>
{% endif %}
</td>
{% if file.is_dir %}
<td class="align-middle pe-3">
<div class="text-end">
<div class="px-1 d-inline-block">
<div class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ 'admin.common.delete'|trans }}">
<a class="btn btn-ec-actionIcon action-delete {% if file.is_empty == false %}disabled{% endif %}"
data-bs-toggle="modal" data-bs-target="#confirmModal-{{ loop.index }}">
<i class="fa fa-close fa-lg text-secondary" aria-hidden="true"></i></a>
</div>
<div class="modal fade" id="confirmModal-{{ loop.index }}" tabindex="-1" role="dialog" aria-labelledby="confirmModal-{{ loop.index }}" 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">{{ 'admin.common.delete_modal__message'|trans({ '%name%': file.file_name }) }}</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" data-confirm="false"
href="{{ url('admin_content_file_delete', { 'select_file': file.file_path}) }}" {{ csrf_token_for_anchor() }} data-method="delete">
{{ 'admin.common.delete'|trans }}
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
{% else %}
<td class="align-middle pe-3">
<div class="text-end">
<div class="px-1 d-inline-block">
<a class="btn btn-ec-actionIcon action-copy" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ 'admin.common.copy_path'|trans }}">
<i class="fas fa-copy fa-lg text-secondary" aria-hidden="true"></i>
</a>
</div>
<div class="px-1 d-inline-block">
<a href="{{ url('admin_content_file_view') }}?file={{ file.file_path|e('url') }}" target="_blank" class="btn btn-ec-actionIcon action-view" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ 'admin.common.display'|trans }}">
<i class="fa fa-eye fa-lg text-secondary" aria-hidden="true"></i>
</a>
</div>
<div class="px-1 d-inline-block">
<a href="{{ url('admin_content_file_download') }}?select_file={{ file.file_path|e('url') }}" class="btn btn-ec-actionIcon action-download" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ 'admin.common.download'|trans }}">
<i class="fa fa-cloud-download fa-lg text-secondary" aria-hidden="true"></i>
</a>
</div>
<div class="px-1 d-inline-block">
<div class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ 'admin.common.delete'|trans }}">
<a class="btn btn-ec-actionIcon action-delete" data-bs-toggle="modal" data-bs-target="#confirmModal-{{ loop.index }}">
<i class="fa fa-close fa-lg text-secondary" aria-hidden="true"></i>
</a>
</div>
<div class="modal fade" id="confirmModal-{{ loop.index }}" tabindex="-1" role="dialog" aria-labelledby="confirmModal-{{ loop.index }}" 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">{{ 'admin.common.delete_modal__message'|trans({ '%name%': file.file_name }) }}</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" data-confirm="false"
href="{{ url('admin_content_file_delete', { 'select_file': file.file_path}) }}" {{ csrf_token_for_anchor() }} data-method="delete">
{{ 'admin.common.delete'|trans }}
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
{% endif %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="c-contentsArea__secondaryCol">
<div class="c-secondaryCol">
<div class="card rounded border-0 mb-4">
<div class="card-header">
<div class="row">
<div class="col-8"><span class="card-title">{{ 'admin.content.file.directory_tree'|trans }}</span></div>
<div class="col-4 text-end"><a data-bs-toggle="collapse" href="#folderDirectory" aria-expanded="false" aria-controls="folderDirectory"><i class="fa fa-lg fa-angle-down"></i></a></div>
</div>
</div>
<div class="collapse show ec-cardCollapse" id="folderDirectory">
<div class="card-body">
<div class="c-directoryTree--folder mb-3">
<ul id="directory_userdata" class="list-unstyled">
<li>
<label class="collapsed" data-bs-toggle="collapse" href="#directory_userdata" aria-expanded="false" aria-controls="directory_userdata">user_data</label>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
{% endblock %}