feat: group images on index, show reaction counts on index, show numb…

…er of images in group on index
mdshack · Jan 14, 2024 · d9729e5 · d9729e5
1 parent 0a7a818
commit d9729e5
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 4 deletions.
diff --git a/app/Http/Controllers/ShotController.php b/app/Http/Controllers/ShotController.php
@@ -17,7 +17,18 @@ class ShotController extends Controller
     public function index(Request $request)
     {
         return Inertia::render('Shots/Index', [
-            'shots' => fn () => $request->user()->shots()->orderByDesc("id")->get(),
+            'shots' => fn () => $request->user()->shots()
+                ->orderByDesc("id")
+                ->whereNull("parent_shot_id")
+                ->with('childShots')
+                ->with('reactions', fn($reactionQuery) => $reactionQuery
+                    ->select('reaction', DB::raw('count(*) as count'), 'shot_id')
+                    ->groupBy('reaction', 'shot_id'))
+                ->get()
+                ->map(fn($shot) => array_merge($shot->toArray(), [
+                    'reactions' => $shot['reactions']
+                        ->mapWithKeys(fn($result) => [$result['reaction'] => $result['count']]),
+                ])),
         ]);
     }
 

diff --git a/config/features.php b/config/features.php
@@ -4,5 +4,5 @@
  * A collection of feature flags to enable/disable select functionality
  */
 return [
-    'reactions' => env("FEATURE_REACTIONS", true),
+    'reactions' => env("FEATURE_REACTIONS", false),
 ];
diff --git a/resources/js/Pages/Shots/Index.vue b/resources/js/Pages/Shots/Index.vue
@@ -4,8 +4,9 @@ import { Link, Head } from '@inertiajs/vue3'
 import Macy from "macy"
 import { ref } from 'vue';
 import { onMounted } from 'vue';
+import { HandThumbUpIcon, HandThumbDownIcon, PhotoIcon } from "@heroicons/vue/24/outline"
 
-defineProps({
+const props = defineProps({
     shots: Array
 })
 
@@ -25,13 +26,38 @@ onMounted(() => {
     <Head title="My Shots" />
 
     <Layout>
+
+        <div v-if="shots.length < 1" class="text-center text-lg">
+            You haven't uploaded any shots!
+        </div>
+
         <div class="masonry">
             <Link
                 v-for="shot in shots"
                 class="flex items-center justify-center p-1"
                 :href="route('shots.show', shot.id)">
-                <div class="border rounded-lg hover:bg-accent overflow-hidden w-full">
+                <div class="border rounded-lg hover:bg-accent overflow-hidden w-full relative">
                     <img :src="shot.links.asset_url" class="w-full"/>
+
+                    <div
+                        v-if="($page.props.features.reactions && (shot.reactions?.upvote || shot.reactions?.downvote)) || shot.child_shots.length"
+                        class="absolute bottom-0 right-0 bg-black/85 border-l border-t rounded-tl-lg flex space-x-2 p-1.5">
+                        <template v-if="$page.props.features.reactions">
+                            <div v-if="shot.reactions?.upvote" class="text-gray-500 text-xs text-center">
+                                <HandThumbUpIcon class="w-5"/>
+                                {{ shot.reactions?.upvote }}
+                            </div>
+                            <div v-if="shot.reactions?.downvote" class="text-gray-500 text-xs text-center">
+                                <HandThumbDownIcon class="w-5"/>
+                                {{ shot.reactions?.downvote }}
+                            </div>
+                        </template>
+
+                        <div v-if="shot.child_shots.length" class="text-gray-500 text-xs text-center">
+                            <PhotoIcon class="w-5"/>
+                            {{ shot.child_shots.length + 1 }}
+                        </div>
+                    </div>
                 </div>
             </Link>
         </div>