memos home module

app/Http/Controllers/MemosController.php

@@ -54,6 +54,24 @@ class MemosController extends Controller
         return response([], Response::HTTP_NO_CONTENT);
     }
 
+    public function home()
+    {
+        $this->authorize('viewAny', Memo::class);
+
+        $memos = request()->user()->memos;
+        $count = $memos->count();
+        $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_updated' => new MemoResource($updated),
+        ]]);
+    }
+
     private function validateData()
     {
         return request()->validate([

resources/js/components/Loader.vue

@@ -1,6 +1,8 @@
 <template>
-    <div v-if="loading" class="flex items-center">
-        <svg-vue icon="loader" class="loader"/>
+    <div class="min-h-16 w-full">
+        <div v-if="loading" class="flex justify-center text-gray-900 m-4">
+            <svg-vue icon="loader" class="stroke-current w-12 h-12"/>
+        </div>
     </div>
 </template>
 

resources/js/views/Home.vue

@@ -1,17 +1,21 @@
 <template>
-    <div class="p-2">
-        <h1>Home</h1>
-        <OpenWeatherCard />
+    <div class="p-4">
+        <h1 class="page-title">Home</h1>
+        <div class="flex flex-wrap -m-2 mt-2">
+            <OpenWeatherCard class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4" />
+            <MemoHome class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4" />
+        </div>
     </div>
 </template>
 
 <script>
 import OpenWeatherCard from './Meteo/OpenWeatherCard'
+import MemoHome from './Memo/MemoHome'
 
 export default {
     name: 'Home',
     components: {
-        OpenWeatherCard
+        OpenWeatherCard, MemoHome
     }
 }
 </script>

resources/js/views/Memo/MemoHome.vue

@@ -1,11 +1,60 @@
 <template>
-    $END$
+    <div>
+        <div class="card m-2">
+            <div v-if="loading"  class="p-2">
+                <h2>Memos</h2>
+                <Loader />
+            </div>
+            <div v-else class="p-2">
+                <router-link to="/memos"><h2 class="mb-4 text-gray-900">{{ memos.count }} Memos</h2></router-link>
+                <router-link :to="memos.last_updated.links.self" class="m-2 block">
+                    <div class="flex justify-between text-black">
+                        Dernier édité
+                        <span class="inline-block bg-gray-400 text-white text-center rounded-full px-3 py-1 text-sm font-semibold">{{ memos.last_updated.data.last_updated }}</span>
+                    </div>
+                    <div class="text-2xl font-bold">{{ memos.last_updated.data.name }}</div>
+                </router-link>
+                <hr class="border border-gray-900">
+                <router-link :to="memos.last_created.links.self" class="m-2 block">
+                    <div class="flex justify-between text-black">
+                        Dernier créé
+                        <span class="inline-block bg-gray-400 text-white text-center rounded-full px-3 py-1 text-sm font-semibold">{{ memos.last_created.data.last_updated }}</span>
+                    </div>
+                    <div class="text-2xl font-bold">{{ memos.last_created.data.name }}</div>
+                </router-link>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
-    export default {
-        name: "MemoHome"
+import Loader from '../../components/Loader'
+
+export default {
+    name: 'MemoHome',
+    components: {
+        Loader
+    },
+    data: function () {
+        return {
+            loading: true,
+            memos: '',
+        }
+    },
+    mounted() {
+        // eslint-disable-next-line no-undef
+        axios.get('/api/memos/home')
+            .then(response => {
+                this.memos = response.data.data
+                console.log(this.memos)
+                this.loading = false
+            })
+            .catch(() => {
+                this.loading = false
+                console.log('Unable to fetch memos.')
+            })
     }
+}
 </script>
 
 <style scoped>

resources/js/views/Meteo/OpenWeatherCard.vue

@@ -1,24 +1,22 @@
 <template>
-    <div class="my-2">
-        <h2>Météo</h2>
-        <p v-if="loading"></p>
-        <div v-else class="my-1">
-
-            <div class="flex flex-wrap -m-2 mt-2">
-                <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4">
-                    <div class="bg-gray-300 rounded text-black m-2 p-2 flex flex-col">
-                        <h3 class="text-2xl font-bold text-center">{{ meteo.city.name }}</h3>
-                        <div class="flex">
-                            <div class="flex flex-col justify-end">
-                                <div>{{ dateFormat(meteo.list[0].dt_txt) }}</div>
-                                <div><strong>{{ meteo.list[0].main.temp }}</strong> °C</div>
-                                <div><strong>{{ meteo.list[0].main.humidity }}</strong> %</div>
-                                <div><strong>{{ meteo.list[0].main.pressure }}</strong> hPa</div>
-                            </div>
-                            <div class="flex flex-col flex-1 justify-end items-end">
-                                <i v-bind:class="'owf owf-5x owf-' + meteo.list[0].weather[0].id"></i>
-                                <div><strong>{{ meteo.list[0].weather[0].description }}</strong></div>
-                            </div>
+    <div>
+        <div v-if="loading">
+            <Loader />
+        </div>
+        <div v-else class="m-2">
+            <div class="card">
+                <div class="text-black m-2 p-2 flex flex-col">
+                    <h2>{{ meteo.city.name }}</h2>
+                    <div class="flex">
+                        <div class="flex flex-col justify-end">
+                            <div>{{ dateFormat(meteo.list[0].dt_txt) }}</div>
+                            <div><strong>{{ meteo.list[0].main.temp }}</strong> °C</div>
+                            <div><strong>{{ meteo.list[0].main.humidity }}</strong> %</div>
+                            <div><strong>{{ meteo.list[0].main.pressure }}</strong> hPa</div>
+                        </div>
+                        <div class="flex flex-col flex-1 justify-end items-end">
+                            <i v-bind:class="'owf owf-5x owf-' + meteo.list[0].weather[0].id"></i>
+                            <div><strong>{{ meteo.list[0].weather[0].description }}</strong></div>
                         </div>
                     </div>
                 </div>
@@ -28,8 +26,13 @@
 </template>
 
 <script>
+import Loader from '../../components/Loader'
+
 export default {
     name: 'OpenWeatherCard',
+    components: {
+        Loader
+    },
     data: function () {
         return {
             loading: true,

resources/sass/components/_base.scss

@@ -30,3 +30,6 @@
     max-width: 12rem;
 }
 
+.min-h-16 {
+    min-height: 4rem;
+}

resources/sass/components/_elements.scss

@@ -1,28 +1,5 @@
 // Elements
 
-//@for $i from 1 through 9 {
-//
-//    .bg-primary-#{$i}00 {
-//        @apply bg-green-#{$i}00;
-//    }
-//
-//    .hover:bg-primary-#{$i}00 {
-//        @apply bg-green-#{$i}00;
-//    }
-//
-//    .bg-secondary-#{$i}00 {
-//        @apply bg-blue-#{$i}00;
-//    }
-//
-//    .text-primary-#{$i}00 {
-//        @apply text-gray-#{$i}00;
-//    }
-//
-//    .hover:text-primary-#{$i}00 {
-//        @apply text-gray-#{$i}00;
-//    }
-//}
-
 .page-title {
     @apply text-3xl font-bold text-gray-900;
 }
@@ -85,12 +62,4 @@ a {
     h2 {
         @apply text-2xl text-center font-bold;
     }
-
-    &:hover {
-        @apply bg-gray-500 text-gray-700;
-
-        h2 {
-            @apply text-gray-700;
-        }
-    }
 }

routes/api.php

@@ -18,6 +18,7 @@ Route::middleware('auth:api')->group(function () {
 
     Route::get('auth-user', 'AuthUserController@show');
 
+    Route::get('/memos/home', 'MemosController@home');
 
     Route::apiResources([
         '/users' => 'UserController',