Merge pull request #207 from avored/develop

Develop

resources/css/app.css

@@ -1,7 +1,6 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-@import '~easymde/dist/easymde.min.css';
 
 .avored-input {
     @apply w-full px-3 py-2 ring-gray-300 ring-1 rounded shadow-sm appearance-none text-gray-700;

resources/lang/en/system.php

@@ -104,5 +104,7 @@
     'disabled' => 'Disabled',
     'customer_reset_password_link' => 'Customer Reset Password Link',
     'success_sent_password_reset_email_message' => 'Successfully Password Reset Email has been sent to customer',
-    'images' => 'Images'
+    'images' => 'Images',
+    'product_success_upload_message' => 'Product Document Uploaded successfully',
+    'product_success_delete_message' => 'Product Document Deleted successfully'
 ];

resources/views/catalog/attribute/index.blade.php

@@ -62,7 +62,7 @@
                                                 '{{ route('admin.attribute.destroy', $attribute) }}'
                                             )"
                                             url="{{ route('admin.attribute.destroy', $attribute) }}">
-                                            <i class="w-5 h-5" data-feather="trash"></i>
+                                                <i class="w-5 h-5" data-feather="trash"></i>
                                             <x-avored::form.form
                                                 id="category-destory-{{ $attribute->id }}"
                                                 method="delete"

resources/views/catalog/product/cards/images.blade.php

@@ -1,4 +1,4 @@
-<div>
+<div x-data="fileupload" x-init="fileuploadinit({{$product->documents}})">
     <label
         class="flex bg-white justify-center w-full h-32 p-4 transition border-2 border-gray-300 border-dashed rounded-md appearance-none cursor-pointer hover:border-gray-400 focus:outline-none">
         <span class="flex items-center space-x-2">
@@ -7,11 +7,65 @@ class="flex bg-white justify-center w-full h-32 p-4 transition border-2 border-g
                 <path stroke-linecap="round" stroke-linejoin="round"
                     d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
             </svg>
+
             <span class="font-medium text-gray-600">
                 Drop files to Attach, or
                 <span class="text-blue-600 underline">browse</span>
             </span>
         </span>
-        <input type="file" name="file_upload" class="hidden">
+        <input type="file" x-on:change="documentOnChange" name="file_upload" class="hidden">
     </label>
-</div>
+    <div class="mt-5">
+        <div class="grid gap-4 grid-cols-6">
+            <template x-for="document in documents">
+                <div class="text-center">
+                    <div class="object-fill h-48 w-96">
+                        <img x-bind:src="`/storage/${document.path}`" class="w-32 rounded-md" alt="product image" />
+                    </div>
+                    <div class="flex mt-3 justify-center w-full" >
+                        <a href="#" x-on:click.prevent="documentDelete(document.id)">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash w-5 text-red-900 h-5">
+                                <polyline points="3 6 5 6 21 6"></polyline>
+                                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
+                            </svg>
+                        </a>
+                    </div>
+                </div>
+            </template>
+
+        </div>
+    </div>
+
+</div>
+
+<script>
+    document.addEventListener('alpine:init', () => {
+        Alpine.data('fileupload', () => ({
+            documents: [],
+         
+            fileuploadinit(documents) {
+                console.log(documents)
+                this.documents = documents
+            },
+            documentOnChange (e) {
+                console.log(e.target.documents)
+
+                var formData = new FormData();
+                formData.append("image", e.target.files[0]);
+                axios.post('/admin/product-document-upload/10981be7-ac5b-485a-8ef6-de03584be21e', formData, {
+                    headers: {
+                        'Content-Type': 'multipart/form-data'
+                    }
+                }).then(({data}) => {
+                    this.documents = data.data
+                })
+            },
+            documentDelete(id) {
+                axios.delete('/admin/product-document-delete/' + id).then(({data}) => {
+                    this.documents = data.data
+                })
+            }
+        }))
+    })
+</script>
+

resources/views/system/components/layouts/app.blade.php

@@ -10,6 +10,7 @@
     <title>@yield('meta_title', 'AvoRed E commerce')</title>
 
     <link rel="stylesheet" href="{{ asset('vendor/avored/css/app.css') }}"></link>
+    <link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
 
     <livewire:styles />
     <livewire:scripts />

routes/web.php

@@ -80,6 +80,9 @@
         Route::resource('attribute', AttributeController::class);
         Route::resource('product', ProductController::class);
 
+        Route::post('product-document-upload/{product}', [ProductController::class, 'uploadDocument']);
+        Route::delete('product-document-delete/{document}', [ProductController::class, 'deleteDocument']);
+
 
         /***************** USER ROUTES *****************/
         Route::resource('staff', StaffController::class);

src/Catalog/Controllers/ProductController.php

@@ -5,9 +5,11 @@
 use AvoRed\Framework\Catalog\Requests\ProductRequest;
 use AvoRed\Framework\Database\Contracts\CategoryModelInterface;
 use AvoRed\Framework\Database\Contracts\ProductModelInterface;
+use AvoRed\Framework\Database\Models\Document;
 use AvoRed\Framework\Database\Models\Product;
 use AvoRed\Framework\Tab\Tab;
 use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
 use Illuminate\Routing\Controller;
 
 class ProductController extends Controller
@@ -128,4 +130,50 @@ public function destroy(Product $product)
             'message' => __('avored::system.success_delete_message', ['product' => __('avored::system.product')])
         ]);
     }
+
+    /**
+     * Upload a product image.
+     *
+     * @param Product $product
+     * @param \Illuminate\Http\Request $request
+     * @return \Illuminate\Http\Response
+     */
+    public function uploadDocument(Product $product, Request $request)
+    {
+        $image = $request->file('image');
+
+        $path = $image->store('uploads/catalog', 'public');
+        $product->documents()->create([
+            'path' => $path,
+            'mime_type' => $image->getClientMimeType(),
+            'size' => $image->getSize(),
+            'origional_name' => $image->getClientOriginalName(),
+        ]);
+
+
+        return new JsonResponse([
+            'success' => true,
+            'data' => $product->documents,
+            'message' => __('avored::system.product_success_upload_message', ['product' => __('avored::system.product')])
+        ]);
+    }
+
+    /**
+     * Delete a product image.
+     *
+     * @param Product $product
+     * @param \Illuminate\Http\Request $request
+     * @return \Illuminate\Http\Response
+     */
+    public function deleteDocument(Document $document)
+    {
+        $product = $document->documentable;
+        $document->delete();
+
+        return new JsonResponse([
+            'success' => true,
+            'data' => $product->documents,
+            'message' => __('avored::system.product_success_delete_message', ['product' => __('avored::system.product')])
+        ]);
+    }
 }

src/Database/Models/Product.php

@@ -70,9 +70,9 @@ public function categories()
      /**
      * Get the product image.
      */
-    public function document()
+    public function documents()
     {
-        return $this->morphOne(Document::class, 'documentable');
+        return $this->morphMany(Document::class, 'documentable');
     }
 
     /**