Added CategoriesIndex.vue component

* web.php route added for the categories.

* index.blade.php renders the CategoriesIndex.vue component.

* Added CategoriesIndex.vue component to show the categories in the HTML table.

Author: ahmadhussnain

resources/js/app.js

@@ -9,6 +9,7 @@ Vue.prototype._ = _;
 Vue.component('front-page', require('./components/FrontPage.vue').default);
 
 // id app
+let categoriesIndex = Vue.component('categories-index', require('./components/CategoriesIndex.vue').default);
 let categoriesCreate = Vue.component('categories-create', require('./components/CategoriesCreate.vue').default);
 
 // Load third party vue component `laravel-vue-pagination`
@@ -18,6 +19,7 @@ Vue.component('pagination', require('laravel-vue-pagination'));
 new Vue({
     el: '#app',
     components: {
+        categoriesIndex: categoriesIndex,
         categoriesCreate: categoriesCreate
     }
 });

resources/js/components/CategoriesIndex.vue

@@ -0,0 +1,73 @@
+<template>
+    <div class="container py-5">
+        <div class="row">
+            <div class="col-12">
+
+                <div v-if="loading" class="text-center">Loading....</div>
+                <div v-if="Array.isArray(categories) && categories.length > 0" class="table-responsive">
+                 <a href="/categories/create" class="btn btn-primary my-4">Add new Category</a>
+                <table class="table table-striped">
+                    <thead>
+                    <tr>
+                        <th scope="col">#</th>
+                        <th scope="col">Name</th>
+                        <th scope="col">Photo</th>
+                        <th scope="col">Actions</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+
+                    <tr v-for="(category, index) in categories" :key="category.id">
+                        <th scope="row">{{ index + 1 }}</th>
+                        <td>{{ _.capitalize(category.name) }}</td>
+                        <!-- Photo -->
+                        <td v-if="category.hasOwnProperty('photo') && category.photo">
+                            <img :src="category.photo" style="width: 80px;height: 80px" alt="Photo"/>
+                        </td>
+                        <td v-else><em>Null</em></td>
+                        <!-- End - Photo -->
+                        <td>
+                          <a :href="`/categories/${category.id}/edit`" class="btn btn-primary mr-2">Edit</a>
+                           <a :href="`/categories/${category.id}`" class="btn btn-danger">Delete</a>
+                        </td>
+                    </tr>
+                    </tbody>
+                </table>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'CategoriesIndex',
+    data: function () {
+        return {
+            categories: [],
+            loading: true
+        }
+    },
+    mounted() {
+        this.loadCategories();
+    },
+    methods: {
+        loadCategories: function () {
+            // Note: Please only destructure those properties which are read only
+            // e.g. Props are read only and state should not be destructure.
+            const self = this;
+            axios.get('/api/categories').then(function (response) {
+                setTimeout(function () {
+                    self.categories = response.data.data;
+                    self.loading = false;
+                }, 2000);
+            }).catch(function (err) {
+                self.loading = false;
+                console.log('Error from the GET Request', err);
+            });
+        }
+    }
+
+}
+</script>

resources/views/index.blade.php

@@ -0,0 +1,8 @@
+@extends('master')
+
+@section('vue')
+    <div id="app">
+        <categories-index></categories-index>
+    </div>
+@endsection
+

routes/web.php

@@ -18,4 +18,5 @@
 Route::view('/', 'home');
 
 // Categories create.blade.php file for the form creation.
+Route::view('/categories', 'index')->name('categories.index');
 Route::view('/categories/create', 'create')->name('categories.create');