first upload all files

Modules/Option/Resources/assets/admin/js/BaseOption.js

@@ -0,0 +1,114 @@
+export default class {
+    addOptionsErrors(errors) {
+        for (let key in errors) {
+            let inputField = this.getInputFieldForErrorKey(key);
+
+            inputField.closest('.option').addClass('option-has-errors');
+
+            let parent = inputField.parent();
+
+            parent.append(`<span class="help-block">${errors[key][0]}</span>`);
+        }
+    }
+
+    getRowTemplate(data) {
+        let template = _.template($('#option-select-values-template').html());
+
+        return $(template(data));
+    }
+
+    changeOptionType({ optionId, type, values = [] }) {
+        let optionValuesElement = this.getOptionValuesElement(optionId);
+        let templateType = this.getTemplateType(type, optionValuesElement);
+        let optionValuesData = { optionId, value: { id: '', label: '', price: '', price_type: 'fixed' } };
+
+        if (this.shouldNotChangeTemplate(templateType, optionValuesElement)) {
+            return;
+        }
+
+        if (values.length !== 0 && templateType === 'text') {
+            optionValuesData.value = values[0];
+        }
+
+        let template = _.template($(`#option-${templateType}-template`).html());
+
+        optionValuesElement.html(template(optionValuesData));
+
+        if (templateType === 'select') {
+            this.addOptionRowEventListener(optionId);
+
+            this.addOptionRows({ optionId, values });
+
+            if (values.length === 0) {
+                this.getAddNewRowButton(optionId).trigger('click');
+            }
+        }
+    }
+
+    addOptionRows({ optionId, values }) {
+        for (let [index, value] of values.entries()) {
+            this.addOptionRow({
+                optionId,
+                valueId: index,
+                value,
+            });
+        }
+    }
+
+    getTemplateType(type) {
+        if (this.templateTypeIsText(type)) {
+            return 'text';
+        }
+
+        if (this.templateTypeIsSelect(type)) {
+            return 'select';
+        }
+    }
+
+    templateTypeIsText(type) {
+        return ['field', 'textarea', 'date', 'date_time', 'time'].includes(type);
+    }
+
+    templateTypeIsSelect(type) {
+        return ['dropdown', 'checkbox', 'checkbox_custom', 'radio', 'radio_custom', 'multiple_select'].includes(type);
+    }
+
+    shouldNotChangeTemplate(templateType, optionValuesElement) {
+        return templateType === undefined || this.alreadyHasCurrentTemplate(templateType, optionValuesElement);
+    }
+
+    alreadyHasCurrentTemplate(templateType, optionValuesElement) {
+        if (templateType === 'text') {
+            return optionValuesElement.children().hasClass('option-text');
+        }
+
+        if (templateType === 'select') {
+            return optionValuesElement.children().hasClass('option-select');
+        }
+    }
+
+    initOptionRow(template, selectValues) {
+        if (selectValues.length !== 0 && ! selectValues.is('.sortable')) {
+            this.makeSortable(selectValues[0]);
+
+            selectValues.addClass('sortable');
+        }
+
+        this.deleteOptionRowEventListener(template);
+
+        window.admin.tooltip();
+    }
+
+    deleteOptionRowEventListener(row) {
+        row.find('.delete-row').on('click', (e) => {
+            $(e.currentTarget).closest('.option-row').remove();
+        });
+    }
+
+    makeSortable(el) {
+        Sortable.create(el, {
+            handle: '.drag-icon',
+            animation: 150,
+        });
+    }
+}