Merge pull request #124 from conedevelopment/options

Rework options, many fixes, proxy rework
conedevelopment · Mar 29, 2021 · 8259e62 · 8259e62
2 parents bba8119 + f18af8f
commit 8259e62
Show file tree

Hide file tree

Showing 130 changed files with 865 additions and 868 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,15 @@
+module.exports = {
+    plugins: [
+        // npm packages: eslint eslint-plugin-vue
+        "vue"
+    ],
+    extends: [
+        "plugin:vue/base",
+        "plugin:vue/essential",
+        "plugin:vue/strongly-recommended",
+        "plugin:vue/recommended"
+    ],
+    rules: {
+        "vue/component-definition-name-casing": ["error", "kebab-case"]
+    }
+}
diff --git a/.github/workflows/laravel-install.yml b/.github/workflows/laravel-install.yml
@@ -13,7 +13,7 @@ jobs:
       fail-fast: true
       matrix:
         os: ["ubuntu-18.04", "windows-latest"]
-        php: ["7.3", "7.4", "8.0"]
+        php: ["7.4", "8.0"]
         stability: ["prefer-stable"]
 
     name: "${{ matrix.os }} - PHP ${{ matrix.php }} - ${{ matrix.stability }}"

diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
@@ -13,7 +13,7 @@ jobs:
       fail-fast: true
       matrix:
         os: ["ubuntu-18.04", "windows-latest"]
-        php: ["7.3", "7.4", "8.0"]
+        php: ["7.4", "8.0"]
         stability: ["prefer-stable"]
 
     name: "${{ matrix.os }} - PHP ${{ matrix.php }} - ${{ matrix.stability }}"
@@ -42,7 +42,7 @@ jobs:
         run: vendor/bin/phpunit --verbose
 
       - name: Send coverage to Coveralls
-        if: "matrix.os == 'ubuntu-18.04' && matrix.php == '7.3'"
+        if: "matrix.os == 'ubuntu-18.04' && matrix.php == '7.4'"
         env:
           COVERALLS_REPO_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |

diff --git a/composer.json b/composer.json
@@ -24,12 +24,12 @@
     "require": {
         "ext-gd": "*",
         "ext-exif": "*",
-        "php": "^7.3 || ^8.0",
+        "php": "^7.4 || ^8.0",
         "laravel/framework": "^8.22.1",
         "inertiajs/inertia-laravel": "^0.3.6"
     },
     "require-dev": {
-        "fzaninotto/faker": "^1.9.1",
+        "fakerphp/faker": "^1.9.1",
         "mockery/mockery": "^1.3.1",
         "phpunit/phpunit": "^9.0",
         "laravel/laravel": "^8.0"

diff --git a/database/factories/ProductFactory.php b/database/factories/ProductFactory.php
@@ -26,7 +26,7 @@ public function definition(): array
             'name' => $this->faker->company,
             'slug' => Str::random(),
             'description' => $this->faker->sentences(3, true),
-            'options' => ['Size' => ['XS', 'S', 'M', 'L']],
+            'properties' => ['Size' => ['XS', 'S', 'M', 'L']],
             'prices' => [
                 'usd' => [
                     'default' => $price = mt_rand(10, 1000) / 10,

diff --git a/database/factories/VariantFactory.php b/database/factories/VariantFactory.php
@@ -23,7 +23,7 @@ class VariantFactory extends Factory
     public function definition(): array
     {
         return [
-            'option' => ['Size' => 'XS'],
+            'variation' => ['Size' => 'XS'],
             'prices' => ['usd' => ['default' => mt_rand(10, 1000) / 10]],
             'inventory' => [
                 'files' => [],

diff --git a/database/migrations/2020_01_01_000000_extend_users_table.php b/database/migrations/2020_01_01_000000_extend_users_table.php
@@ -1,6 +1,6 @@
 <?php
 
-use Bazar\Proxies\User as UserProxy;
+use Bazar\Models\User;
 use Illuminate\Database\Migrations\Migration;
 use Illuminate\Database\Schema\Blueprint;
 use Illuminate\Support\Facades\Schema;
@@ -14,7 +14,7 @@ class ExtendUsersTable extends Migration
      */
     public function up(): void
     {
-        $column = UserProxy::getProxiedInstance()->getDeletedAtColumn();
+        $column = User::proxy()->getDeletedAtColumn();
 
         Schema::table('users', static function (Blueprint $table) use ($column): void {
             if (! Schema::hasColumn('users', $column)) {

diff --git a/database/migrations/2020_01_01_000200_create_bazar_products_table.php b/database/migrations/2020_01_01_000200_create_bazar_products_table.php
@@ -19,7 +19,7 @@ public function up(): void
             $table->string('slug')->unique();
             $table->text('description')->nullable();
             $table->json('prices')->nullable();
-            $table->json('options')->nullable();
+            $table->json('properties')->nullable();
             $table->json('inventory')->nullable();
             $table->timestamps();
             $table->softDeletes();

diff --git a/database/migrations/2020_01_01_000300_create_bazar_items_table.php b/database/migrations/2020_01_01_000300_create_bazar_items_table.php
@@ -14,7 +14,7 @@ class CreateBazarItemsTable extends Migration
     public function up(): void
     {
         Schema::create('bazar_items', static function (Blueprint $table): void {
-            $table->uuid('id');
+            $table->uuid('id')->primary();
             $table->foreignId('product_id')->nullable()->constrained('bazar_products')->nullOnDelete();
             $table->morphs('itemable');
             $table->unsignedDecimal('price');

diff --git a/database/migrations/2020_01_01_000700_create_bazar_carts_table.php b/database/migrations/2020_01_01_000700_create_bazar_carts_table.php
@@ -14,9 +14,8 @@ class CreateBazarCartsTable extends Migration
     public function up(): void
     {
         Schema::create('bazar_carts', static function (Blueprint $table): void {
-            $table->id();
+            $table->uuid('id')->primary();
             $table->foreignId('user_id')->nullable()->constrained()->cascadeOnDelete();
-            $table->uuid('token');
             $table->string('currency');
             $table->unsignedDecimal('discount')->default(0);
             $table->boolean('locked')->default(false);

diff --git a/database/migrations/2020_01_01_000900_create_bazar_variants_table.php b/database/migrations/2020_01_01_000900_create_bazar_variants_table.php
@@ -17,7 +17,7 @@ public function up(): void
             $table->id();
             $table->foreignId('product_id')->constrained('bazar_products')->cascadeOnDelete();
             $table->string('alias')->nullable();
-            $table->json('option');
+            $table->json('variation');
             $table->json('prices')->nullable();
             $table->json('inventory')->nullable();
             $table->timestamps();

diff --git a/public/app.css b/public/app.css
diff --git a/public/app.css.map b/public/app.css.map
diff --git a/public/app.js b/public/app.js
diff --git a/public/app.js.map b/public/app.js.map
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,4 +1,4 @@
 {
-    "/app.js": "/app.js?id=22c3ab008d115bb4e927",
-    "/app.css": "/app.css?id=5a7cfcf0d5a7c0dcf8ad"
+    "/app.js": "/app.js?id=af4d89cc0e2ddbc5ffb5",
+    "/app.css": "/app.css?id=5600c3b00878c539f051"
 }
diff --git a/resources/js/Components/Form/Editor.vue b/resources/js/Components/Form/Editor.vue
@@ -33,7 +33,7 @@
                             container: [
                                 [{ header: [1, 2, 3, 4, false] }],
                                 ['bold', 'italic', 'underline'],
-                                [{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'align': [] }],
+                                [{ list: 'ordered'}, { list: 'bullet' }, { align: [] }],
                                 ['link', 'image'],
                                 ['clean']
                             ],
@@ -43,7 +43,7 @@
                         }
                     },
                     theme: 'snow',
-                    formats: ['header', 'bold', 'underline', 'italic', 'list', 'image', 'link'],
+                    formats: ['header', 'align', 'bold', 'underline', 'italic', 'list', 'image', 'link'],
                     placeholder: this.$attrs.placeholder || ''
                 };
             }
@@ -57,17 +57,15 @@
                 this.$refs.media.open();
             },
             insertMedia(values) {
-                const range = this.editor.getSelection() || 0;
+                const range = this.editor.getSelection(true);
 
                 values.forEach(value => {
                     if (value.is_image) {
-                        this.editor.insertEmbed(
-                            range ? range.index : 0, 'image', value.urls.original, Quill.sources.USER
-                        );
+                        this.editor.insertEmbed(range.index, 'image', value.urls.original, Quill.sources.USER);
+                        this.editor.setSelection(range.index + 1, 0, Quill.sources.SILENT);
                     } else {
-                        this.editor.insertText(
-                            range ? range.index : 0, value.name, 'link', value.urls.original, Quill.sources.USER
-                        );
+                        this.editor.insertText(range.index, value.name, 'link', value.urls.original, Quill.sources.USER);
+                        this.editor.setSelection(range.index + value.name.length, 0, Quill.sources.SILENT);
                     }
                 });
 

diff --git a/resources/js/Components/Form/Options.vue b/resources/js/Components/Form/Options.vue
@@ -13,7 +13,7 @@
             },
             name: {
                 type: String,
-                default: 'options'
+                default: 'properties'
             },
             schema: {
                 type: [Array, Object],

diff --git a/resources/js/Components/Media/Item.vue b/resources/js/Components/Media/Item.vue
@@ -7,6 +7,13 @@
             }
         },
 
+        data() {
+            return {
+                tries: 0,
+                url: this.item.urls.thumb,
+            };
+        },
+
         computed: {
             selected() {
                 return this.$parent.selection.some(item => item.id === this.item.id);
@@ -30,7 +37,22 @@
                 if (! this.$parent.busy) {
                     this.selected ? this.deselect() : this.select();
                 }
-            }
+            },
+            reload() {
+                if (this.tries >= 5) {
+                    return;
+                }
+
+                const interval = setInterval(() => {
+                    const url = new URL(this.url);
+                    url.searchParams.set('key', (new Date).getTime());
+
+                    this.url = url.toString();
+                    this.tries++;
+
+                    clearInterval(interval);
+                }, 5000);
+            },
         }
     }
 </script>
@@ -43,7 +65,7 @@
             :class="{ 'is-image': item.is_image, 'is-document': ! item.is_image, 'is-selected': selected }"
             @click.prevent="toggle"
         >
-            <img v-if="item.is_image" :src="item.urls.thumb" :alt="item.name">
+            <img v-if="item.is_image" :src="url" :alt="item.name" @error="reload">
             <span v-else class="media-item__caption">
                 <icon name="file"></icon>
                 <span style="text-overflow: ellipsis;">{{ item.file_name }}</span>

diff --git a/resources/js/Components/Media/Manager.vue b/resources/js/Components/Media/Manager.vue
@@ -112,8 +112,8 @@
                         <div v-if="queue.length || items.length" class="form-row">
                             <div :class="{ 'col-9': selection.length, 'col-12': ! selection.length }">
                                 <div class="form-row">
-                                    <uploader v-for="(file, index) in queue" :key="index" :file="file"></uploader>
-                                    <item v-for="(item, index) in items" :key="index + queue.length" :item="item"></item>
+                                    <uploader v-for="(file, index) in queue" :key="`uploader-${index}`" :file="file"></uploader>
+                                    <item v-for="(item, index) in items" :key="`${item.file_name}-${index}`" :item="item"></item>
                                 </div>
                             </div>
                             <div v-show="selection.length" class="col-3">

diff --git a/resources/js/Components/Media/Uploader.vue b/resources/js/Components/Media/Uploader.vue
@@ -37,7 +37,7 @@
                 let formData = new FormData;
 
                 formData.set('is_last', this.chunks.length === 1);
-                formData.set('file', this.chunks[0], `${this.hash}__${this.file.name}.part`);
+                formData.set('file', this.chunks[0], `${this.hash}__${this.file.name}.chunk`);
 
                 return formData;
             },

diff --git a/resources/js/Pages/Products/Create.vue b/resources/js/Pages/Products/Create.vue
@@ -16,10 +16,10 @@
                 <form-input name="slug" :label="__('Slug')" v-model="form.fields.slug"></form-input>
                 <form-editor name="description" :label="__('Description')" v-model="form.fields.description"></form-editor>
             </card>
-            <card :title="__('Options')" class="mb-5">
-                <form-options name="options" v-model="form.fields.options" :schema="[]">
+            <card :title="__('Properties')" class="mb-5">
+                <form-options name="properties" v-model="form.fields.properties" :schema="[]">
                     <template #default="{ key }">
-                        <form-tag :name="`options.${key}`" v-model="form.fields.options[key]"></form-tag>
+                        <form-tag :name="`properties.${key}`" v-model="form.fields.properties[key]"></form-tag>
                     </template>
                 </form-options>
             </card>

diff --git a/resources/js/Pages/Products/Show.vue b/resources/js/Pages/Products/Show.vue
@@ -16,15 +16,15 @@
                 <form-input name="slug" :label="__('Slug')" v-model="form.fields.slug"></form-input>
                 <form-editor name="description" :label="__('Description')" v-model="form.fields.description"></form-editor>
             </card>
-            <card :title="__('Options')" class="mb-5">
+            <card :title="__('Properties')" class="mb-5">
                 <template #header>
                     <inertia-link :href="`${$page.action}/variants`" class="btn btn-sm btn-primary">
                         {{ __('Variants') }}
                     </inertia-link>
                 </template>
-                <form-options name="options" v-model="form.fields.options" :schema="[]">
+                <form-options name="properties" v-model="form.fields.properties" :schema="[]">
                     <template #default="{ key }">
-                        <form-tag :name="`options.${key}`" v-model="form.fields.options[key]"></form-tag>
+                        <form-tag :name="`properties.${key}`" v-model="form.fields.properties[key]"></form-tag>
                     </template>
                 </form-options>
             </card>

diff --git a/resources/js/Pages/Variants/Create.vue b/resources/js/Pages/Variants/Create.vue
@@ -7,15 +7,15 @@
         },
 
         computed: {
-            hasOptions() {
-                return Object.keys(this.$page.variant.product.options).length;
+            hasProperties() {
+                return Object.keys(this.$page.variant.product.properties).length;
             }
         },
 
         methods: {
-            selection(options) {
-                return options.reduce((stack, option) => {
-                    return Object.assign(stack, { [option]: this.__(option) });
+            selection(properties) {
+                return properties.reduce((stack, property) => {
+                    return Object.assign(stack, { [property]: this.__(property) });
                 }, { '*': this.__('Any') });
             }
         }
@@ -25,28 +25,28 @@
 <template>
     <data-form :action="$page.action" :model="$page.variant">
         <template #default="form">
-            <card :title="__('Options')" class="mb-5">
-                <div v-if="hasOptions">
+            <card :title="__('Variation')" class="mb-5">
+                <div v-if="hasProperties">
                     <div class="row">
-                        <div v-for="(options, name) in $page.variant.product.options" :key="name" class="col">
+                        <div v-for="(values, name) in $page.variant.product.properties" :key="name" class="col">
                             <form-select
-                                :name="`option.${name}`"
+                                :name="`variation.${name}`"
                                 :label="__(name)"
-                                :options="selection(options)"
-                                v-model="form.fields.option[name]"
+                                :options="selection(values)"
+                                v-model="form.fields.variation[name]"
                             ></form-select>
                         </div>
                     </div>
-                    <div v-if="form.errors.has('option')" class="row">
+                    <div v-if="form.errors.has('variation')" class="row">
                         <div class="col">
                             <span class="form-text text-danger">
-                                {{ form.errors.get('option') }}
+                                {{ form.errors.get('variation') }}
                             </span>
                         </div>
                     </div>
                 </div>
                 <div v-else class="alert alert-info mb-0">
-                    {{ __('No variable options are available for the product.') }}
+                    {{ __('No variable properties are available for the product.') }}
                 </div>
             </card>
             <card :title="__('Pricing')" class="mb-5">

diff --git a/resources/js/Pages/Variants/Index.vue b/resources/js/Pages/Variants/Index.vue
@@ -49,9 +49,9 @@
                     {{ item.price ? item.formatted_price : item.product.formatted_price }}
                 </template>
             </data-column>
-            <data-column :label="__('Option')">
+            <data-column :label="__('Variation')">
                 <template #default="item">
-                    <span v-for="(value, key) in item.option" :key="key" class="badge badge-primary mr-1">
+                    <span v-for="(value, key) in item.variation" :key="key" class="badge badge-primary mr-1">
                         {{ __(key) }}: {{ __(value) }}
                     </span>
                 </template>