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']);

Modules/FlashSale/Resources/lang/en/attributes.php

@@ -0,0 +1,15 @@
+<?php
+
+return [
+    'product' => 'Product',
+    'end_date' => 'End Date',
+    'price' => 'Price',
+    'quantity' => 'Quantity',
+    'campaign_name' => 'Campaign Name',
+
+    // validation
+    'products.*.product_id' => 'Product',
+    'products.*.end_date' => 'End Date',
+    'products.*.price' => 'Price',
+    'products.*.qty' => 'Quantity',
+];

Modules/FlashSale/Resources/lang/en/flash_sales.php

@@ -0,0 +1,20 @@
+<?php
+
+return [
+    'flash_sale' => 'Flash Sale',
+    'flash_sales' => 'Flash Sales',
+    'table' => [
+        'campaign_name' => 'Campaign Name',
+    ],
+    'tabs' => [
+        'group' => [
+            'flash_sale_information' => 'Flash Sale Information',
+        ],
+        'products' => 'Products',
+        'settings' => 'Settings',
+    ],
+    'form' => [
+        'add_product' => 'Add Product',
+        'flash_sale_product' => 'Flash Sale Product',
+    ],
+];

Modules/FlashSale/Resources/lang/en/permissions.php

@@ -0,0 +1,8 @@
+<?php
+
+return [
+    'index' => 'Index Flash Sale',
+    'create' => 'Create Flash Sale',
+    'edit' => 'Edit Flash Sale',
+    'destroy' => 'Delete Flash Sale',
+];

Modules/FlashSale/Resources/views/admin/flash_sales/create.blade.php

@@ -0,0 +1,18 @@
+@extends('admin::layout')
+
+@component('admin::components.page.header')
+    @slot('title', trans('admin::resource.create', ['resource' => trans('flashsale::flash_sales.flash_sale')]))
+
+    <li><a href="{{ route('admin.flash_sales.index') }}">{{ trans('flashsale::flash_sales.flash_sales') }}</a></li>
+    <li class="active">{{ trans('admin::resource.create', ['resource' => trans('flashsale::flash_sales.flash_sale')]) }}</li>
+@endcomponent
+
+@section('content')
+    <form method="POST" action="{{ route('admin.flash_sales.store') }}" class="form-horizontal" id="flash-sale-create-form" novalidate>
+        {{ csrf_field() }}
+
+        {!! $tabs->render(compact('flashSale')) !!}
+    </form>
+@endsection
+
+@include('flashsale::admin.flash_sales.partials.shortcuts')

Modules/FlashSale/Resources/views/admin/flash_sales/edit.blade.php

@@ -0,0 +1,20 @@
+@extends('admin::layout')
+
+@component('admin::components.page.header')
+    @slot('title', trans('admin::resource.edit', ['resource' => trans('flashsale::flash_sales.flash_sale')]))
+    @slot('subtitle', $flashSale->campaign_name)
+
+    <li><a href="{{ route('admin.flash_sales.index') }}">{{ trans('flashsale::flash_sales.flash_sales') }}</a></li>
+    <li class="active">{{ trans('admin::resource.edit', ['resource' => trans('flashsale::flash_sales.flash_sale')]) }}</li>
+@endcomponent
+
+@section('content')
+    <form method="POST" action="{{ route('admin.flash_sales.update', $flashSale) }}" class="form-horizontal" id="flash-sale-edit-form" novalidate>
+        {{ csrf_field() }}
+        {{ method_field('put') }}
+
+        {!! $tabs->render(compact('flashSale')) !!}
+    </form>
+@endsection
+
+@include('flashsale::admin.flash_sales.partials.shortcuts')

Modules/FlashSale/Resources/views/admin/flash_sales/index.blade.php

@@ -0,0 +1,38 @@
+@extends('admin::layout')
+
+@component('admin::components.page.header')
+    @slot('title', trans('flashsale::flash_sales.flash_sales'))
+
+    <li class="active">{{ trans('flashsale::flash_sales.flash_sales') }}</li>
+@endcomponent
+
+@component('admin::components.page.index_table')
+    @slot('buttons', ['create'])
+    @slot('resource', 'flash_sales')
+    @slot('name', trans('flashsale::flash_sales.flash_sale'))
+
+    @component('admin::components.table')
+        @slot('thead')
+            <tr>
+                @include('admin::partials.table.select_all')
+
+                <th>{{ trans('admin::admin.table.id') }}</th>
+                <th>{{ trans('flashsale::flash_sales.table.campaign_name') }}</th>
+                <th data-sort>{{ trans('admin::admin.table.created') }}</th>
+            </tr>
+        @endslot
+    @endcomponent
+@endcomponent
+
+@push('scripts')
+    <script>
+        new DataTable('#flash_sales-table .table', {
+            columns: [
+                { data: 'checkbox', orderable: false, searchable: false, width: '3%' },
+                { data: 'id', width: '5%' },
+                { data: 'campaign_name', name: 'translations.campaign_name', orderable: false, defaultContent: '' },
+                { data: 'created', name: 'created_at' },
+            ],
+        });
+    </script>
+@endpush

Modules/FlashSale/Resources/views/admin/flash_sales/partials/shortcuts.blade.php

@@ -0,0 +1,14 @@
+@push('shortcuts')
+    <dl class="dl-horizontal">
+        <dt><code>b</code></dt>
+        <dd>{{ trans('admin::admin.shortcuts.back_to_index', ['name' => trans('flashsale::flash_sales.flash_sale')]) }}</dd>
+    </dl>
+@endpush
+
+@push('scripts')
+    <script>
+        keypressAction([
+            { key: 'b', route: "{{ route('admin.flash_sales.index') }}" }
+        ]);
+    </script>
+@endpush

Modules/FlashSale/Resources/views/admin/flash_sales/tabs/products.blade.php

@@ -0,0 +1,19 @@
+<div class="panel-wrap flash-sale" id="products-wrapper">
+    {{-- Products will be added here dynamically using JS --}}
+</div>
+
+<div class="form-group">
+    <button type="button" class="add-product btn btn-default m-l-15">
+        {{ trans('flashsale::flash_sales.form.add_product') }}
+    </button>
+</div>
+
+@include('admin::partials.selectize_remote')
+@include('flashsale::admin.flash_sales.templates.product')
+
+@push('globals')
+    <script>
+        FleetCart.data['flash_sale.products'] = {!! old_json('products', $flashSale->products) !!};
+        FleetCart.errors['flash_sale.products'] = @json($errors->get('products.*'), JSON_FORCE_OBJECT);
+    </script>
+@endpush

Modules/FlashSale/Resources/views/admin/flash_sales/tabs/settings.blade.php

@@ -0,0 +1,5 @@
+<div class="row">
+    <div class="col-md-8">
+        {{ Form::text('campaign_name', trans('flashsale::attributes.campaign_name'), $errors, $flashSale, ['required' => true]) }}
+    </div>
+</div>

Modules/FlashSale/Resources/views/admin/flash_sales/templates/product.blade.php

@@ -0,0 +1,93 @@
+<script type="text/html" id="flash-sale-product-template">
+    <div class="panel">
+        <div class="panel-header clearfix">
+            <span class="drag-icon pull-left">
+                <i class="fa">&#xf142;</i>
+                <i class="fa">&#xf142;</i>
+            </span>
+
+            {{ trans('flashsale::flash_sales.form.flash_sale_product') }}
+
+            <button type="button" class="delete-product-panel btn pull-right">
+                <i class="fa fa-times"></i>
+            </button>
+        </div>
+
+        <div class="panel-body">
+            <div class="row">
+                <div class="col-sm-12">
+                    <div class="form-group">
+                        <label for="products-<%- productPanelNumber %>-product-id">
+                            {{ trans('flashsale::attributes.product') }}<span class="m-l-5 text-red">*</span>
+                        </label>
+
+                        <input type="hidden"
+                            name="products[<%- productPanelNumber %>][name]"
+                            class="form-control"
+                            id="products-<%- productPanelNumber %>-name"
+                            value="<%- product.name %>"
+                        >
+
+                        <select name="products[<%- productPanelNumber %>][product_id]"
+                            class="form-control selectize prevent-creation"
+                            id="products-<%- productPanelNumber %>-product-id"
+                            data-url="{{ route('admin.products.index') }}"
+                        >
+                            <% if (product.id !== null && product.name !== null) { %>
+                                <option value="<%- product.id %>"><%- product.name %></option>
+                            <% } %>
+                        </select>
+                    </div>
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col-sm-6 col-xs-12">
+                    <div class="form-group">
+                        <label for="products-<%- productPanelNumber %>-campaign-end">
+                            {{ trans('flashsale::attributes.end_date') }}<span class="m-l-5 text-red">*</span>
+                        </label>
+
+                        <input type="text"
+                            name="products[<%- productPanelNumber %>][end_date]"
+                            class="form-control datetime-picker"
+                            id="products-<%- productPanelNumber %>-campaign-end"
+                            value="<%- product.pivot.end_date %>"
+                        >
+                    </div>
+                </div>
+
+                <div class="col-sm-3 col-xs-6">
+                    <div class="form-group">
+                        <label for="products-<%- productPanelNumber %>-price">
+                            {{ trans('flashsale::attributes.price') }}<span class="m-l-5 text-red">*</span>
+                        </label>
+
+                        <input type="number"
+                            name="products[<%- productPanelNumber %>][price]"
+                            class="form-control"
+                            id="products-<%- productPanelNumber %>-price"
+                            value="<%- product.pivot.price.amount %>"
+                            min="0"
+                        >
+                    </div>
+                </div>
+
+                <div class="col-sm-3 col-xs-6">
+                    <div class="form-group">
+                        <label for="products-<%- productPanelNumber %>-qty">
+                            {{ trans('flashsale::attributes.quantity') }}<span class="m-l-5 text-red">*</span>
+                        </label>
+
+                        <input type="number"
+                            name="products[<%- productPanelNumber %>][qty]"
+                            class="form-control"
+                            id="products-<%- productPanelNumber %>-qty"
+                            value="<%- product.pivot.qty %>"
+                        >
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</script>