first upload all files

Modules/FlashSale/Resources/assets/admin/js/FlashSale.js

@@ -0,0 +1,65 @@
+import FlashSaleProduct from './FlashSaleProduct';
+
+export default class {
+    constructor() {
+        this.productCount = 0;
+
+        this.addFlashSaleProducts(FleetCart.data['flash_sale.products']);
+
+        if (this.productCount === 0) {
+            this.addProduct();
+        }
+
+        this.addFlashSaleProductsError(FleetCart.errors['flash_sale.products']);
+
+        this.attachEventListeners();
+        this.makeProductPanelsSortable();
+    }
+
+    addFlashSaleProducts(products) {
+        for (let attributes of products) {
+            this.addProduct(attributes);
+        }
+    }
+
+    addProduct(attributes = {}) {
+        let productTemplate = new FlashSaleProduct({ productPanelNumber: this.productCount++, product: attributes });
+
+        $('#products-wrapper').append(productTemplate.render());
+
+        window.admin.selectize();
+    }
+
+    addFlashSaleProductsError(errors) {
+        for (let key in errors) {
+            let parent = this.getInputFieldForKey(key).parent();
+
+            parent.addClass('has-error');
+            parent.append(`<span class="help-block">${errors[key][0]}</span>`);
+        }
+    }
+
+    getInputFieldForKey(key) {
+        let keyParts = key.split('.');
+
+        // Replace all "_" to "-".
+        keyParts = keyParts.map(k => {
+            return k.split('_').join('-');
+        });
+
+        return $(`#${keyParts.join('-')}`);
+    }
+
+    attachEventListeners() {
+        $('.add-product').on('click', () => {
+            this.addProduct();
+        });
+    }
+
+    makeProductPanelsSortable() {
+        Sortable.create(document.getElementById('products-wrapper'), {
+            handle: '.drag-icon',
+            animation: 150,
+        });
+    }
+}

Modules/FlashSale/Resources/assets/admin/js/FlashSaleProduct.js

@@ -0,0 +1,43 @@
+export default class {
+    constructor(data) {
+        this.productPanelHtml = this.getProductPanelHtml(data);
+    }
+
+    getProductPanelHtml(data) {
+        data.product = this.normalizeAttributes(data.product);
+
+        let template = _.template($('#flash-sale-product-template').html());
+
+        return $(template(data));
+    }
+
+    normalizeAttributes(product) {
+        if ($.isEmptyObject(product)) {
+            return { id: null, pivot: { campaign_end: null, price: { amount: null }, qty: null } };
+        }
+
+        if (! $.isEmptyObject(FleetCart.errors['flash_sale.products'])) {
+            return {
+                id: product.id,
+                name: product.name,
+                pivot: { campaign_end: product.campaign_end, price: { amount: product.price }, qty: product.qty },
+            };
+        }
+
+        return product;
+    }
+
+    render() {
+        this.attachEventListeners();
+
+        window.admin.dateTimePicker(this.productPanelHtml.find('.datetime-picker'));
+
+        return this.productPanelHtml;
+    }
+
+    attachEventListeners() {
+        this.productPanelHtml.find('.delete-product-panel').on('click', () => {
+            this.productPanelHtml.remove();
+        });
+    }
+}

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

@@ -0,0 +1,5 @@
+import FlashSale from './FlashSale';
+
+new FlashSale();
+
+window.admin.removeSubmitButtonOffsetOn(['#products']);