first upload all files

Modules/Attribute/Resources/assets/admin/js/AttributeValues.js

@@ -0,0 +1,47 @@
+export default class {
+    constructor() {
+        this.attributeId = 0;
+        this.valuesCount = 0;
+
+        this.addOldValues(FleetCart.data['attribute.values']);
+
+        if (this.valuesCount === 0) {
+            this.addAttributeValue();
+        }
+
+        this.eventListeners();
+        this.sortable();
+
+        window.admin.removeSubmitButtonOffsetOn('#values');
+    }
+
+    addOldValues(values = {}) {
+        for (let value of values) {
+            this.addAttributeValue(value);
+        }
+    }
+
+    addAttributeValue(value = { id: '', value: '' }) {
+        let template = _.template($('#attribute-value-template').html());
+        let html = template({ valueId: this.valuesCount++, value });
+
+        $('#attribute-values').append(html);
+
+        window.admin.tooltip();
+    }
+
+    eventListeners() {
+        $('#add-new-value').on('click', () => this.addAttributeValue());
+
+        $('#attribute-values').on('click', '.delete-row', (e) => {
+            $(e.currentTarget).closest('tr').remove();
+        });
+    }
+
+    sortable() {
+        Sortable.create(document.getElementById('attribute-values'), {
+            handle: '.drag-icon',
+            animation: 150,
+        });
+    }
+}

Modules/Attribute/Resources/assets/admin/js/ProductAttributes.js

@@ -0,0 +1,92 @@
+export default class {
+    constructor() {
+        this.attributeCount = 0;
+
+        this.addProductAttributes(FleetCart.data['product.attributes']);
+
+        if (this.attributeCount === 0) {
+            this.addProductAttribute();
+        }
+
+        this.addProductAttributesErrors(FleetCart.errors['product.attributes']);
+
+        this.eventListeners();
+        this.triggerSelected();
+        this.sortable();
+    }
+
+    addProductAttributes(attributes) {
+        for (let attribute of attributes) {
+            this.addProductAttribute(attribute);
+        }
+    }
+
+    addProductAttribute(attribute = {}) {
+        let template = _.template($('#product-attribute-template').html());
+
+        let html = template({ attributeId: this.attributeCount++, attribute });
+
+        $('#product-attributes').append(html);
+
+        window.admin.tooltip();
+        window.admin.selectize();
+    }
+
+    addProductAttributesErrors(errors) {
+        for (let key in errors) {
+            let id = $.escapeSelector(key);
+            let parent = $(`#${id}`).parent();
+
+            parent.addClass('has-error');
+            parent.append(`<span class="help-block">${errors[key][0]}</span>`);
+        }
+    }
+
+    deleteProductAttribute(e) {
+        $(e.currentTarget).closest('tr').remove();
+    }
+
+    changeProductAttributeValues(attributeEl, clearSelected = true) {
+        let values = $(attributeEl).find('option:selected').data('values');
+
+        let id = $.escapeSelector(`attributes.${attributeEl.dataset.attributeId}.values`);
+        let attributeValues = $(`#${id}`)[0].selectize;
+
+        if (clearSelected) {
+            attributeValues.clear();
+        }
+
+        attributeValues.clearOptions();
+
+        let options = attributeValues.options;
+
+        for (let id in values) {
+            attributeValues.addOption({ id, name: values[id] });
+
+            for (let i in options) {
+                attributeValues.addItem(options[i].value);
+            }
+        }
+    }
+
+    eventListeners() {
+        $('#add-new-attribute').on('click', () => this.addProductAttribute());
+        $('#product-attributes').on('click', '.delete-row', this.deleteProductAttribute);
+        $('#product-attributes-wrapper').on('change', '.attribute', (e) => {
+            this.changeProductAttributeValues(e.currentTarget);
+        });
+    }
+
+    triggerSelected() {
+        $('.attribute').has('option:selected').each((i, el) => {
+            this.changeProductAttributeValues(el, false);
+        });
+    }
+
+    sortable() {
+        Sortable.create(document.getElementById('product-attributes'), {
+            handle: '.drag-icon',
+            animation: 150,
+        });
+    }
+}

Modules/Attribute/Resources/assets/admin/js/main.js

@@ -0,0 +1,10 @@
+import AttributeValues from './AttributeValues';
+import ProductAttributes from './ProductAttributes';
+
+if ($('#attribute-values-wrapper').length !== 0) {
+    new AttributeValues();
+}
+
+if ($('#product-attributes-wrapper').length !== 0) {
+    new ProductAttributes();
+}

Modules/Attribute/Resources/assets/admin/sass/main.scss

@@ -0,0 +1,90 @@
+#product-attributes-wrapper,
+#attribute-values-wrapper {
+    margin-bottom: 15px;
+
+    .table {
+        .form-group {
+            margin: 0;
+        }
+
+        thead th {
+            &:first-child {
+                width: 40px;
+            }
+
+            &:last-child {
+                width: 60px;
+            }
+        }
+    }
+}
+
+#product-attributes-wrapper {
+    .table-responsive {
+        overflow: visible;
+    }
+
+    .table {
+        > tbody > tr {
+            > td {
+                vertical-align: middle;
+
+                &:nth-child(2) {
+                    width: 160px;
+                }
+            }
+        }
+    }
+
+    .options {
+        .drag-icon {
+            margin-top: 3px;
+        }
+    }
+}
+
+#attribute-values-wrapper {
+    .table {
+        > tbody > tr {
+            > td {
+                &:nth-child(2) {
+                    min-width: 150px;
+                }
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 767px) {
+    #product-attributes-wrapper {
+        .options {
+            .drag-icon {
+                margin-top: 0;
+            }
+        }
+
+        .table {
+            > tbody > tr {
+                border-top: 1px solid #e9e9e9;
+
+                > td {
+                    &:nth-child(2),
+                    &:nth-child(3),
+                    &:nth-child(4) {
+                        display: block;
+                        border: none;
+                        width: auto;
+                        padding-left: 15px;
+                        padding-right: 15px;
+                        text-align: left;
+                        vertical-align: initial;
+                    }
+
+                    &:nth-child(4) {
+                        padding-bottom: 15px;
+                    }
+                }
+            }
+        }
+    }
+}