Skip to content

Commit d43325d

Browse files
ronangr1ronangr1
committed
add drag and drop mass import
1 parent d416993 commit d43325d

File tree

7 files changed

+214
-76
lines changed

7 files changed

+214
-76
lines changed

‎view/adminhtml/layout/cmsimportexport_block_import.xml‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,11 @@
55
<referenceContainer name="content">
66
<block name="cmsimportexport.import.form"
77
class="Ronangr1\CmsImportExport\Block\Adminhtml\Import"
8-
template="Ronangr1_CmsImportExport::block/import.phtml"/>
8+
template="Ronangr1_CmsImportExport::html/form.phtml">
9+
<arguments>
10+
<argument name="entity_type" xsi:type="string">cms_block</argument>
11+
</arguments>
12+
</block>
913
</referenceContainer>
1014
</body>
1115
</page>

‎view/adminhtml/layout/cmsimportexport_page_import.xml‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,11 @@
1111
<referenceContainer name="content">
1212
<block name="cmsimportexport.import.form"
1313
class="Ronangr1\CmsImportExport\Block\Adminhtml\Import"
14-
template="Ronangr1_CmsImportExport::page/import.phtml"/>
14+
template="Ronangr1_CmsImportExport::html/form.phtml">
15+
<arguments>
16+
<argument name="entity_type" xsi:type="string">cms_page</argument>
17+
</arguments>
18+
</block>
1519
</referenceContainer>
1620
</body>
1721
</page>

‎view/adminhtml/templates/block/import.phtml‎ renamed to ‎view/adminhtml/templates/html/form.phtml‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ declare(strict_types=1);
1010
* @var \Magento\Framework\Escaper $escaper
1111
*/
1212

13-
$entityType = "cms_block";
13+
$entityType = $block->getData('entity_type');
1414
?>
1515

1616
<div class="admin__page-section">
@@ -21,9 +21,20 @@ $entityType = "cms_block";
2121
<input type="file" id="import_file" name="import_file" accept=".zip"/>
2222
</div>
2323
</div>
24+
<div class="admin__field">
25+
OR
26+
</div>
27+
<div
28+
id="drop_zone"
29+
ondrop="dropHandler(event);"
30+
ondragover="dragOverHandler(event);">
31+
<p>
32+
<?= $escaper->escapeHtml(__('Drag one or more files to this <i>drop zone</i>'), ['i']) ?>
33+
</p>
34+
</div>
2435
<div class="admin__actions">
2536
<button type="button" id="cms-import-submit" class="action-primary">
26-
<span><?= __('Import') ?></span>
37+
<span><?= $escaper->escapeHtml(__('Import')) ?></span>
2738
</button>
2839
</div>
2940
<input type="hidden" name="entity_type" value="<?= $escaper->escapeHtmlAttr($entityType) ?>"

‎view/adminhtml/templates/page/import.phtml‎

Lines changed: 0 additions & 44 deletions
This file was deleted.

‎view/adminhtml/ui_component/cms_page_listing.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<button name="import">
1313
<url path="cmsimportexport/page/import"/>
1414
<class>secondary</class>
15-
<label translate="true">Import Blocks</label>
15+
<label translate="true">Import Pages</label>
1616
<aclResource>Ronangr1_CmsImportExport::import</aclResource>
1717
</button>
1818
</buttons>

‎view/adminhtml/web/css/source/_module.less‎

Lines changed: 121 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,125 @@
1-
.cmsimportexport-page-import, .cmsimportexport-block-import {
2-
.admin__field {
3-
margin-bottom: 16px;
1+
.cmsimportexport-page-import,
2+
.cmsimportexport-block-import {
3+
#cms-import-form {
4+
max-width: 800px;
5+
margin: 40px auto;
6+
padding: 0 20px;
7+
8+
.admin__field {
9+
margin-bottom: 24px;
10+
11+
&:nth-of-type(1) {
12+
.admin__field-label {
13+
display: block;
14+
margin-bottom: 12px;
15+
font-size: 16px;
16+
font-weight: 600;
17+
color: #34495e;
18+
}
19+
20+
.admin__field-control {
21+
input[type="file"] {
22+
display: block;
23+
width: 100%;
24+
padding: 12px 16px;
25+
font-size: 15px;
26+
border: 2px solid #bbb;
27+
border-radius: 4px;
28+
background-color: #fff;
29+
cursor: pointer;
30+
transition: border-color .2s, box-shadow .2s;
31+
32+
&:hover {
33+
border-color: #1890ff;
34+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
35+
}
36+
37+
&::-webkit-file-result-button, &::-ms-browse {
38+
padding: 8px 16px;
39+
background-color: #1890ff;
40+
color: #fff;
41+
border: none;
42+
border-radius: 4px;
43+
font-size: 14px;
44+
cursor: pointer;
45+
transition: background-color .2s;
46+
47+
&:hover {
48+
background-color: darken(#1890ff, 10%);
49+
}
50+
}
51+
}
52+
}
53+
}
54+
55+
&:nth-of-type(2) {
56+
margin: 40px 0;
57+
font-size: 18px;
58+
font-weight: 700;
59+
color: #555;
60+
text-align: center;
61+
}
62+
}
63+
64+
#drop_zone {
65+
border: 4px dashed #bbb;
66+
background-color: #f5f5f5;
67+
padding: 50px;
68+
text-align: center;
69+
color: #444;
70+
font-size: 16px;
71+
font-weight: 600;
72+
border-radius: 8px;
73+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
74+
transition: background-color 0.2s,
75+
border-color 0.2s,
76+
box-shadow 0.2s;
77+
78+
&:hover,
79+
&.drag-over {
80+
background-color: #e0f0ff;
81+
border-color: #1890ff;
82+
color: #222;
83+
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
84+
cursor: pointer;
85+
}
86+
}
87+
88+
.admin__actions {
89+
margin-top: 32px;
90+
margin-bottom: 24px;
91+
text-align: right;
92+
93+
#cms-import-submit {
94+
.action-primary();
95+
padding: 12px 32px;
96+
font-size: 16px;
97+
font-weight: 600;
98+
border-radius: 4px;
99+
}
100+
}
4101
}
5102

6-
.admin__actions {
7-
margin-top: 24px;
8-
margin-bottom: 16px;
103+
#cms-import-result {
104+
margin-top: 32px;
105+
106+
.result-message {
107+
padding: 16px;
108+
font-size: 15px;
109+
border-radius: 4px;
110+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
111+
112+
&.result-message-success {
113+
background-color: #e6fffa;
114+
border: 2px solid #0bc5ea;
115+
color: #065f46;
116+
}
117+
118+
&.result-message-error {
119+
background-color: #fff5f5;
120+
border: 2px solid #f56565;
121+
color: #742a2a;
122+
}
123+
}
9124
}
10125
}

‎view/adminhtml/web/js/ajax/import.js‎

Lines changed: 69 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -8,43 +8,91 @@ define([
88
const $form = $(element),
99
actionUrl = config.actionUrl,
1010
$submit = $('#cms-import-submit'),
11-
$result = $('#cms-import-result');
11+
$result = $('#cms-import-result'),
12+
$dropZone = $(element);
1213

13-
$submit.on('click', function () {
14-
const fileInput = $form.find('input[type=file]')[0];
15-
if (!fileInput.files.length) {
14+
function handleFile(file) {
15+
if (!file) {
1616
alert({content: $t('Please select a file.')});
1717
return;
1818
}
1919

20-
const entityType = $form.find('input[name="entity_type"]').val();
20+
const entityType = $form.find('input[name="entity_type"]').val(),
21+
formData = new FormData();
2122

22-
const formData = new FormData();
23-
formData.append('import_file', fileInput.files[0]);
23+
formData.append('import_file', file);
2424
formData.append('entity_type', entityType);
2525
formData.append('form_key', window.FORM_KEY);
2626

27-
$submit.prop('disabled', true);
28-
$submit.text($t('Uploading…'));
27+
$submit.prop('disabled', true).text($t('Uploading…'));
28+
$result.empty();
2929

3030
$.ajax({
3131
url: actionUrl,
3232
type: 'POST',
3333
data: formData,
3434
processData: false,
3535
contentType: false
36-
}).done(function (response) {
37-
if (response.success) {
38-
$result.html('<div class="message message-success success">' + response.message + '</div>');
39-
} else {
40-
$result.html('<div class="message message-error error">' + response.message + '</div>');
41-
}
42-
}).fail(function () {
43-
$result.html('<div class="message message-error error">' + $t('An error occurred while importing the data.') + '</div>');
44-
}).always(function () {
45-
$submit.prop('disabled', false);
46-
$submit.text($t('Import'));
47-
});
36+
})
37+
.done(function (response) {
38+
if (response.success) {
39+
$result.html(
40+
'<div class="result-message result-message-success success">' +
41+
response.message +
42+
'</div>'
43+
);
44+
} else {
45+
$result.html(
46+
'<div class="result-message result-message-error error">' +
47+
response.message +
48+
'</div>'
49+
);
50+
}
51+
})
52+
.fail(function () {
53+
$result.html(
54+
'<div class="result-message result-message-error error">' +
55+
$t('An error occurred while importing the data.') +
56+
'</div>'
57+
);
58+
})
59+
.always(function () {
60+
$submit.prop('disabled', false).text($t('Import'));
61+
$result.delay(1000).fadeOut(500)
62+
});
63+
}
64+
65+
$submit.on('click', function () {
66+
const fileInput = $form.find('input[type=file]')[0];
67+
if (!fileInput.files.length) {
68+
alert({content: $t('Please select a file.')});
69+
return;
70+
}
71+
handleFile(fileInput.files[0]);
72+
});
73+
74+
$dropZone.on('dragover', function (e) {
75+
e.preventDefault();
76+
$dropZone.addClass('drag-over');
77+
});
78+
79+
$dropZone.on('drop', function (e) {
80+
e.preventDefault();
81+
$dropZone.removeClass('drag-over');
82+
83+
const dt = e.originalEvent.dataTransfer;
84+
85+
if (dt.items) {
86+
Array.from(dt.items).forEach(function (item) {
87+
if (item.kind === 'file') {
88+
handleFile(item.getAsFile());
89+
}
90+
});
91+
} else if (dt.files) {
92+
Array.from(dt.files).forEach(function (file) {
93+
handleFile(file);
94+
});
95+
}
4896
});
4997
};
5098
});

0 commit comments

Comments
 (0)