images

app/Http/Livewire/Tables/BookCaseTable.php

@@ -5,6 +5,7 @@ namespace App\Http\Livewire\Tables;
 use App\Models\BookCase;
 use App\Models\OrangePill;
 use Illuminate\Database\Eloquent\Builder;
+use Livewire\WithFileUploads;
 use Rappasoft\LaravelLivewireTables\DataTableComponent;
 use Rappasoft\LaravelLivewireTables\Views\Column;
 use Rappasoft\LaravelLivewireTables\Views\Filters\TextFilter;
@@ -12,10 +13,13 @@ use WireUi\Traits\Actions;
 
 class BookCaseTable extends DataTableComponent
 {
+    use WithFileUploads;
     use Actions;
 
     public string $country;
 
+    public $photo;
+
     public bool $viewingModal = false;
     public $currentModal;
     public array $orangepill = [
@@ -29,7 +33,7 @@ class BookCaseTable extends DataTableComponent
     {
         $this->setPrimaryKey('id')
              ->setAdditionalSelects(['id', 'homepage'])
-            ->setDefaultSort('orange_pills_count', 'desc')
+             ->setDefaultSort('orange_pills_count', 'desc')
              ->setThAttributes(function (Column $column) {
                  return [
                      'class'   => 'px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider dark:bg-gray-800 dark:text-gray-400',
@@ -97,7 +101,9 @@ class BookCaseTable extends DataTableComponent
                   )
                   ->html(),
             Column::make('Orange-Pilled', 'orange_pilled')
-                  ->label(fn($row, Column $column) => view('columns.book_cases.oranged-pilled')->withRow($row)->withCountry($this->country))
+                  ->label(fn($row, Column $column) => view('columns.book_cases.oranged-pilled')
+                      ->withRow($row)
+                      ->withCountry($this->country))
         ];
     }
 
@@ -130,6 +136,7 @@ class BookCaseTable extends DataTableComponent
         $this->validate([
             'orangepill.amount' => 'required|numeric',
             'orangepill.date'   => 'required|date',
+            'photo'             => 'image|max:4096', // 4MB Max
         ]);
         $orangePill = OrangePill::create([
             'user_id'      => auth()->id(),
@@ -137,6 +144,14 @@ class BookCaseTable extends DataTableComponent
             'amount'       => $this->orangepill['amount'],
             'date'         => $this->orangepill['date'],
         ]);
+        $orangePill
+            ->addMedia($this->photo)
+            ->preservingOriginal()
+            ->toMediaCollection('images');
+        $orangePill->load(['media']);
+        $this->currentModal
+            ->addMedia($this->photo)
+            ->toMediaCollection('images');
         if ($this->orangepill['comment']) {
             $this->currentModal->comment($this->orangepill['comment'], null);
         }

app/Models/OrangePill.php

@@ -6,10 +6,15 @@ use App\Gamify\Points\BookCaseOrangePilled;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Spatie\Image\Manipulations;
+use Spatie\MediaLibrary\HasMedia;
+use Spatie\MediaLibrary\InteractsWithMedia;
+use Spatie\MediaLibrary\MediaCollections\Models\Media;
 
-class OrangePill extends Model
+class OrangePill extends Model implements HasMedia
 {
     use HasFactory;
+    use InteractsWithMedia;
 
     /**
      * The attributes that aren't mass assignable.
@@ -35,6 +40,23 @@ class OrangePill extends Model
         });
     }
 
+    public function registerMediaConversions(Media $media = null): void
+    {
+        $this
+            ->addMediaConversion('preview')
+            ->fit(Manipulations::FIT_CROP, 300, 300)
+            ->nonQueued();
+        $this->addMediaConversion('thumb')
+             ->fit(Manipulations::FIT_CROP, 130, 130)
+             ->width(130)
+             ->height(130);
+    }
+
+    public function registerMediaCollections(): void
+    {
+        $this->addMediaCollection('images');
+    }
+
     public function user(): BelongsTo
     {
         return $this->belongsTo(User::class);

config/media-library.php

@@ -29,7 +29,7 @@ return [
     /*
      * By default all conversions will be performed on a queue.
      */
-    'queue_conversions_by_default' => env('QUEUE_CONVERSIONS_BY_DEFAULT', true),
+    'queue_conversions_by_default' => env('QUEUE_CONVERSIONS_BY_DEFAULT', false),
 
     /*
      * The fully qualified class name of the media model.

resources/lang/de.json

@@ -639,5 +639,7 @@
     "This lecturer has not yet written an introduction.": "Dieser Dozent hat noch keine Einführung geschrieben.",
     "If your city is not listed, please create it first.": "Wenn deine Stadt nicht aufgeführt ist, erstelle sie bitte zuerst.",
     "You get a point when you log in.": "Du bekommst einen Punkt, wenn du dich einloggst.",
-    "has": "hat"
+    "has": "hat",
+    "logins": "",
+    "points": ""
 }

resources/lang/en.json

@@ -631,5 +631,7 @@
     "This lecturer has not yet written an introduction.": "",
     "If your city is not listed, please create it first.": "",
     "You get a point when you log in.": "",
-    "has": ""
+    "has": "",
+    "logins": "",
+    "points": ""
 }

resources/lang/es.json

@@ -622,5 +622,17 @@
     "Back": "",
     "By lecturer": "",
     "All courses of this lecturer": "",
-    "Here you can see all events of this lecturer.": ""
+    "Here you can see all events of this lecturer.": "",
+    "This lecturer has not yet written an introduction.": "",
+    "Subtitle": "",
+    "This is the subtitle on the landing page.": "",
+    "Intro": "",
+    "This is the introduction text that is shown on the landing page.": "",
+    "If your city is not listed, please create it first.": "",
+    "has": "",
+    "logins": "",
+    "You get a point when you log in.": "",
+    "points": "",
+    "All courses of :name": "",
+    "Here you can see all events of :name.": ""
 }

resources/lang/fr.json

@@ -622,5 +622,17 @@
     "Back": "",
     "By lecturer": "",
     "All courses of this lecturer": "",
-    "Here you can see all events of this lecturer.": ""
+    "Here you can see all events of this lecturer.": "",
+    "This lecturer has not yet written an introduction.": "",
+    "Subtitle": "",
+    "This is the subtitle on the landing page.": "",
+    "Intro": "",
+    "This is the introduction text that is shown on the landing page.": "",
+    "If your city is not listed, please create it first.": "",
+    "has": "",
+    "logins": "",
+    "You get a point when you log in.": "",
+    "points": "",
+    "All courses of :name": "",
+    "Here you can see all events of :name.": ""
 }

resources/lang/hr.json

@@ -622,5 +622,17 @@
     "Back": "",
     "By lecturer": "",
     "All courses of this lecturer": "",
-    "Here you can see all events of this lecturer.": ""
+    "Here you can see all events of this lecturer.": "",
+    "This lecturer has not yet written an introduction.": "",
+    "Subtitle": "",
+    "This is the subtitle on the landing page.": "",
+    "Intro": "",
+    "This is the introduction text that is shown on the landing page.": "",
+    "If your city is not listed, please create it first.": "",
+    "has": "",
+    "logins": "",
+    "You get a point when you log in.": "",
+    "points": "",
+    "All courses of :name": "",
+    "Here you can see all events of :name.": ""
 }

resources/lang/it.json

@@ -622,5 +622,17 @@
     "Back": "",
     "By lecturer": "",
     "All courses of this lecturer": "",
-    "Here you can see all events of this lecturer.": ""
+    "Here you can see all events of this lecturer.": "",
+    "This lecturer has not yet written an introduction.": "",
+    "Subtitle": "",
+    "This is the subtitle on the landing page.": "",
+    "Intro": "",
+    "This is the introduction text that is shown on the landing page.": "",
+    "If your city is not listed, please create it first.": "",
+    "has": "",
+    "logins": "",
+    "You get a point when you log in.": "",
+    "points": "",
+    "All courses of :name": "",
+    "Here you can see all events of :name.": ""
 }

resources/lang/mk.json

@@ -622,5 +622,17 @@
     "Back": "",
     "By lecturer": "",
     "All courses of this lecturer": "",
-    "Here you can see all events of this lecturer.": ""
+    "Here you can see all events of this lecturer.": "",
+    "This lecturer has not yet written an introduction.": "",
+    "Subtitle": "",
+    "This is the subtitle on the landing page.": "",
+    "Intro": "",
+    "This is the introduction text that is shown on the landing page.": "",
+    "If your city is not listed, please create it first.": "",
+    "has": "",
+    "logins": "",
+    "You get a point when you log in.": "",
+    "points": "",
+    "All courses of :name": "",
+    "Here you can see all events of :name.": ""
 }

resources/lang/pl.json

@@ -622,5 +622,17 @@
     "Back": "",
     "By lecturer": "",
     "All courses of this lecturer": "",
-    "Here you can see all events of this lecturer.": ""
+    "Here you can see all events of this lecturer.": "",
+    "This lecturer has not yet written an introduction.": "",
+    "Subtitle": "",
+    "This is the subtitle on the landing page.": "",
+    "Intro": "",
+    "This is the introduction text that is shown on the landing page.": "",
+    "If your city is not listed, please create it first.": "",
+    "has": "",
+    "logins": "",
+    "You get a point when you log in.": "",
+    "points": "",
+    "All courses of :name": "",
+    "Here you can see all events of :name.": ""
 }

resources/lang/pt.json

@@ -622,5 +622,17 @@
     "Back": "",
     "By lecturer": "",
     "All courses of this lecturer": "",
-    "Here you can see all events of this lecturer.": ""
+    "Here you can see all events of this lecturer.": "",
+    "This lecturer has not yet written an introduction.": "",
+    "Subtitle": "",
+    "This is the subtitle on the landing page.": "",
+    "Intro": "",
+    "This is the introduction text that is shown on the landing page.": "",
+    "If your city is not listed, please create it first.": "",
+    "has": "",
+    "logins": "",
+    "You get a point when you log in.": "",
+    "points": "",
+    "All courses of :name": "",
+    "Here you can see all events of :name.": ""
 }

resources/lang/tr.json

@@ -596,5 +596,17 @@
     "Back": "",
     "By lecturer": "",
     "All courses of this lecturer": "",
-    "Here you can see all events of this lecturer.": ""
+    "Here you can see all events of this lecturer.": "",
+    "This lecturer has not yet written an introduction.": "",
+    "Subtitle": "",
+    "This is the subtitle on the landing page.": "",
+    "Intro": "",
+    "This is the introduction text that is shown on the landing page.": "",
+    "If your city is not listed, please create it first.": "",
+    "has": "",
+    "logins": "",
+    "You get a point when you log in.": "",
+    "points": "",
+    "All courses of :name": "",
+    "Here you can see all events of :name.": ""
 }

resources/views/livewire/book-case/highscore-table.blade.php

@@ -103,7 +103,7 @@
                                             <div
                                                 class="group aspect-w-10 aspect-h-10 block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100">
                                                 <img
-                                                    src="{{ $orangePill->bookCase->getFirstMediaUrl('images') ? $orangePill->bookCase->getFirstMediaUrl('images') : asset('img/empty_book_case.webp') }}"
+                                                    src="{{ $orangePill->getFirstMediaUrl('images') ? $orangePill->bookCase->getFirstMediaUrl('images') ?: asset('img/empty_book_case.webp') : asset('img/empty_book_case.webp') }}"
                                                     alt="book_case"
                                                     class="pointer-events-none object-cover group-hover:opacity-75">
                                             </div>

resources/views/modals/book_cases/orange_pill.blade.php

@@ -27,6 +27,16 @@
                 </ul>
             </div>
 
+            <div class="col-span-6 sm:col-span-4">
+                <form wire:submit.prevent="save">
+                    <label class="my-2 text-gray-200 text-xl">{{ __('Photo') }}</label>
+                    <div class="text-sm text-gray-500">
+                        <input type="file" wire:model="photo">
+                        @error('photo') <span class="text-red-500">{{ $message }}</span> @enderror
+                    </div>
+                </form>
+            </div>
+
             <div class="col-span-6 sm:col-span-4">
                 <x-input
                     min="1"