Skip to content

Commit 5da1c11

Browse files
TomasLudvikTomasLudvik
authored
Add blog article authors and unify the admin single-value picker (#4682)
2 parents 27ffc37 + 22ca170 commit 5da1c11

45 files changed

Lines changed: 1302 additions & 212 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎assets/js/admin/components/FilePicker.js‎

Lines changed: 15 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,45 @@
1-
import ModalWindow from '@shopsys/administration/src/js/utils/modalWindow';
21
import Translator from 'bazinga-translator';
32
import Register from '../../common/utils/Register';
43
import FormChangeInfo from './FormChangeInfo';
4+
import MultiplePicker from './MultiplePicker';
55

6-
window.FilePickerInstances = {};
7-
8-
export default class FilePicker {
6+
export default class FilePicker extends MultiplePicker {
97
constructor($picker) {
10-
this.instanceId = Object.keys(window.FilePickerInstances).length;
11-
window.FilePickerInstances[this.instanceId] = this;
8+
super($picker);
129

13-
this.$picker = $picker;
1410
this.$addButton = $(`[data-picker-target="${$picker.attr('id')}"]`);
15-
this.$itemsContainer = $picker.find('.js-picker-items');
16-
17-
this.$addButton.click(event => this.openPicker(event));
18-
this.initExistingItem();
11+
this.$addButton.click(() => this.openPickerWindow());
1912
}
2013

21-
initExistingItem() {
22-
const $existingItem = this.$itemsContainer.find('.js-picker-item');
23-
24-
if ($existingItem.length > 0) {
25-
$existingItem.find('.js-picker-item-button-delete').click(() => {
26-
this.removeItem($existingItem);
27-
});
28-
}
14+
getPickerWindowTitle() {
15+
return Translator.trans('Select file');
2916
}
3017

31-
openPicker(event) {
32-
event.preventDefault();
33-
34-
const url = this.$picker.data('picker-url').replace('__js_instance_id__', this.instanceId);
35-
const iframeContent = `<iframe src="${url}" style="width: 100%; height: 800px; border: none;"></iframe>`;
36-
37-
this.modal = new ModalWindow({
38-
content: iframeContent,
39-
title: Translator.trans('Select file'),
40-
size: 'xl',
41-
buttons: [{ text: Translator.trans('Cancel') }],
42-
});
43-
44-
return false;
18+
getPickerWindowButtons() {
19+
return [{ text: Translator.trans('Cancel') }];
4520
}
4621

4722
addItem($selectedElement) {
48-
this.$itemsContainer.find('.js-picker-item').remove();
23+
const $existingItem = this.$itemsContainer.find('.js-picker-item');
24+
25+
if ($existingItem.length > 0) {
26+
this.removeItem($existingItem);
27+
}
4928

5029
const itemHtml = this.$picker.data('picker-prototype').replace(/__name__/g, 0);
5130
const $item = $($.parseHTML(itemHtml));
5231

5332
FilePicker.populateItemFromSelection($item, $selectedElement);
5433

5534
this.$itemsContainer.append($item);
56-
57-
$item.find('.js-picker-item-button-delete').click(() => {
58-
this.removeItem($item);
59-
});
60-
35+
this.initItem($item);
6136
FormChangeInfo.showInfo();
6237

6338
if (this.modal?.element && typeof this.modal.element.modal === 'function') {
6439
this.modal.element.modal('hide');
6540
}
6641
}
6742

68-
removeItem($item) {
69-
$item.remove();
70-
FormChangeInfo.showInfo();
71-
}
72-
7343
static populateItemFromSelection($item, $selectedElement) {
7444
$item.find('.js-picker-item-input').val($selectedElement.data('picker-id'));
7545
$item.find('.js-picker-item-thumbnail').html($selectedElement.data('picker-thumbnail'));
@@ -85,7 +55,7 @@ export default class FilePicker {
8555
}
8656

8757
static onClickSelectFile(instanceId, $btnElement) {
88-
const pickerInstance = window.parent.FilePickerInstances[instanceId];
58+
const pickerInstance = window.parent.PickerInstances[instanceId];
8959

9060
if (!pickerInstance) {
9161
console.error(`FilePicker instance ${instanceId} not found.`);

‎assets/js/admin/components/MultiplePicker.js‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,17 +37,24 @@ export default class MultiplePicker {
3737

3838
const iframeContent = `<iframe src="${url}" style="width: 100%; height: 800px; border: none;"></iframe>`;
3939

40-
// eslint-disable-next-line no-new
41-
new ModalWindow({
40+
this.modal = new ModalWindow({
4241
content: iframeContent,
43-
title: Translator.trans('Select items'),
42+
title: this.getPickerWindowTitle(),
4443
size: 'xl',
45-
buttons: [{ text: Translator.trans('Finish assigning') }],
44+
buttons: this.getPickerWindowButtons(),
4645
});
4746

4847
return false;
4948
}
5049

50+
getPickerWindowTitle() {
51+
return Translator.trans('Select items');
52+
}
53+
54+
getPickerWindowButtons() {
55+
return [{ text: Translator.trans('Finish assigning') }];
56+
}
57+
5158
initItem($item) {
5259
this.items.push($item);
5360
new Register().registerNewContent($item);

‎assets/js/admin/components/OrderItems.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import Translator from 'bazinga-translator';
55
import { escapeHtml } from '../../common/utils/escapeHtml';
66
import Register from '../../common/utils/Register';
77
import FormChangeInfo from './FormChangeInfo';
8-
import ProductPicker from './ProductPicker';
8+
import SinglePicker from './SinglePicker';
99

1010
export default class OrderItems {
1111
static savedEventBound = false;
@@ -68,7 +68,7 @@ export default class OrderItems {
6868

6969
element.dataset.orderItemsProductPickerInitialized = '1';
7070
// eslint-disable-next-line no-new
71-
new ProductPicker($(element), async productId => {
71+
new SinglePicker($(element), async productId => {
7272
if (await this.runLiveAction('addProduct', { productId: Number(productId) })) {
7373
FormChangeInfo.showInfo();
7474
}

‎assets/js/admin/components/ProductPicker.js‎

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

‎assets/js/admin/components/SinglePicker.js‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import ModalWindow from '@shopsys/administration/src/js/utils/modalWindow';
2+
import Translator from 'bazinga-translator';
3+
import Register from '../../common/utils/Register';
4+
import FormChangeInfo from './FormChangeInfo';
5+
6+
window.SinglePickerInstances = {};
7+
8+
export default class SinglePicker {
9+
constructor($picker, onSelectCallback) {
10+
this.instanceId = Object.keys(window.SinglePickerInstances).length;
11+
window.SinglePickerInstances[this.instanceId] = this;
12+
this.$picker = $picker;
13+
this.onSelectCallback = onSelectCallback;
14+
15+
if (onSelectCallback === undefined) {
16+
this.$input = $picker.find('[data-js-single-picker-input]');
17+
this.$label = $picker.find('[data-js-single-picker-label]');
18+
this.$addButton = $picker.find('[data-js-single-picker-button-add]');
19+
this.$removeButton = $picker.find('[data-js-single-picker-button-remove]');
20+
21+
this.$removeButton.prop('disabled', this.$input.val() === '');
22+
this.$removeButton.click(() => {
23+
this.select('', $picker.data('placeholder'));
24+
25+
return false;
26+
});
27+
28+
this.$label.click(event => this.openPickerWindow(event));
29+
} else {
30+
this.$addButton = $picker;
31+
}
32+
33+
this.$addButton.click(event => this.openPickerWindow(event));
34+
}
35+
36+
openPickerWindow(event) {
37+
const url = this.$picker.data('picker-url').replace('__js_instance_id__', this.instanceId);
38+
39+
const iframeContent = `<iframe src="${url}" style="width: 100%; height: 800px; border: none;"></iframe>`;
40+
41+
this.modal = new ModalWindow({
42+
content: iframeContent,
43+
title: this.$picker.data('picker-title') || Translator.trans('Select'),
44+
size: 'xl',
45+
buttons: [{ text: Translator.trans('Close') }],
46+
});
47+
48+
event.preventDefault();
49+
}
50+
51+
select(id, name) {
52+
if (this.onSelectCallback !== undefined) {
53+
this.onSelectCallback(id, name);
54+
} else {
55+
this.$input.val(id);
56+
this.$label.val(name);
57+
this.$removeButton.prop('disabled', id === '');
58+
FormChangeInfo.showInfo();
59+
}
60+
}
61+
62+
static onClickSelect(instanceId, id, name) {
63+
const pickerInstance = window.parent.SinglePickerInstances[instanceId];
64+
65+
if (!pickerInstance) {
66+
console.error(`SinglePicker instance ${instanceId} not found.`);
67+
68+
return;
69+
}
70+
71+
pickerInstance.select(id, name);
72+
73+
if (pickerInstance.modal?.element && typeof pickerInstance.modal.element.modal === 'function') {
74+
pickerInstance.modal.element.modal('hide');
75+
}
76+
}
77+
78+
static init($container) {
79+
$container.filterAllNodes('[data-js-single-picker]').each(function () {
80+
// eslint-disable-next-line no-new
81+
new SinglePicker($(this));
82+
});
83+
84+
$('[data-js-single-picker-window-select]').click(event => {
85+
const $btnElement = $(event.currentTarget);
86+
SinglePicker.onClickSelect(
87+
$btnElement.data('picker-instance-id'),
88+
$btnElement.data('picker-id'),
89+
$btnElement.data('picker-name'),
90+
);
91+
});
92+
}
93+
}
94+
95+
new Register().registerCallback(SinglePicker.init, 'SinglePicker.init');

‎assets/js/admin/components/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,12 @@ import './Parameters';
3838
import './Payment';
3939
import './Product';
4040
import './PriceListProductPicker';
41-
import './ProductPicker';
4241
import './PriceListProductPickerWindow';
4342
import './productsPicker';
4443
import './ProductsPickerWindow';
4544
import './MultiplePicker';
4645
import './PickerWindow';
46+
import './SinglePicker';
4747
import './PromoCode';
4848
import './PromoCodeFlags';
4949
import './PromoCodeGroup';

0 commit comments

Comments
 (0)