fix cover & home memos display

app/Http/Controllers/MemosController.php

@@ -63,12 +63,10 @@ class MemosController extends Controller
         $created = $memos->sortByDesc('created_at')->first();
         $updated = $memos->sortByDesc('updated_at')->first();
 
-//        dd($count, $created, $updated);
-
         return response(['data' => [
             'count' => $count,
-            'last_created' => new MemoResource($created),
+            'last_created' => ($created !== null) ? new MemoResource($created) : null,
-            'last_updated' => new MemoResource($updated),
+            'last_updated' => ($updated !== null) ? new MemoResource($updated) : null,
         ]]);
     }
 

resources/js/views/Memo/MemoEdit.vue

@@ -10,7 +10,7 @@
                 :author="form.attributes.posted_by"
                 :id="form.memo_id"
                 :model="form.type"
-                classes="cover"
+                classes="w-full"
                 :alt="form.name"/>
         </div>
         <div class="mx-2 p-2">

resources/js/views/Memo/MemoHome.vue

@@ -5,6 +5,12 @@
                 <h2>Memos</h2>
                 <Loader />
             </div>
+            <div v-else-if="memos.length === 0">
+                <router-link :to="'/memos/create'" class="mb-4 no-underline"><h2>No Memo</h2></router-link>
+                <div class="flex justify-center items-center">
+                    <router-link :to="'/memos/create'" class="btn-primary mt-6">Add Memos</router-link>
+                </div>
+            </div>
             <div v-else>
                 <router-link to="/memos" class="mb-4 no-underline"><h2>{{ memos.count }} Memos</h2></router-link>
                 <router-link :to="memos.last_updated.links.self" class="m-2 block no-underline">
@@ -45,13 +51,13 @@ export default {
         // eslint-disable-next-line no-undef
         axios.get('/api/memos/home')
             .then(response => {
+                if (response.data.data.count !== 0) {
                     this.memos = response.data.data
-                console.log(this.memos)
+                }
                 this.loading = false
             })
             .catch(() => {
                 this.loading = false
-                console.log('Unable to fetch memos.')
             })
     }
 }

resources/js/views/Memo/MemoIndex.vue

@@ -16,8 +16,8 @@
         </div>
         <Loader v-if="loading" />
         <div v-else class="flex flex-wrap -m-2">
-            <div v-if="memos.lenght === 0">
+            <div v-if="memos.length === 0" class="pt-4 text-center w-full">
-                <p>No memos yet. <router-link to="/memos/create">Get Started ></router-link></p>
+                <p>No memos yet. <router-link :to="'/memos/create'" class="btn-primary">Get Started ></router-link></p>
             </div>
             <router-link v-for="memo in memos" :key="memo.data.memo_id" :to="'/memos/' + memo.data.memo_id" class="flex-initial sm:mx-auto md:w-1/2 md:mx-0 lg:w-1/3 xl:w-1/4 mb-4 no-underline">
                 <div class="card sm:max-w-124">

resources/js/views/Memo/MemoShow.vue

@@ -13,7 +13,7 @@
             <div class="relative">
                 <img
                     v-if="!loading"
-                    class="cover"
+                    class="w-full"
                     :src="memo.attributes.cover_image.data.attributes.path"
                 />
                 <div class="absolute flex flex-col justify-between w-full top-0 bottom-0">