creativetimofficial · dinhkhoiagl · Oct 17, 2024 · Oct 18, 2024
diff --git a/package.json b/package.json
@@ -13,25 +13,33 @@
     "lint-fix": "vue-cli-service lint --fix"
   },
   "dependencies": {
-    "bootstrap": "4.6.0",
+    "@ckeditor/ckeditor5-build-classic": "31.1.0",
+    "@ckeditor/ckeditor5-editor-classic": "31.1.0",
+    "@ckeditor/ckeditor5-vue2": "^3.0.1",
+    "axios": "^1.7.7",
+    "bootstrap": "^4.6.0",
+    "bootstrap-vue": "^2.23.1",
     "cache-loader": "^4.1.0",
     "chartist": "0.11.0",
     "google-maps": "3.2.1",
     "register-service-worker": "1.7.2",
     "v-tooltip": "2.0.0-rc.33",
     "vue": "2.7.14",
+    "vue-ckeditor2": "^2.1.5",
+    "vue-loading-overlay": "^6.0.6",
     "vue-router": "3.0.2",
-    "vue2-google-maps": "0.10.7"
+    "vue2-google-maps": "0.10.7",
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "3.12.1",
     "@vue/cli-plugin-eslint": "3.12.1",
     "@vue/cli-plugin-pwa": "3.12.1",
     "@vue/cli-service": "3.12.1",
+    "cross-env": "^7.0.3",
     "sass": "1.56.2",
     "sass-loader": "10.1.1",
-    "vue-template-compiler": "2.7.14",
-    "cross-env": "^7.0.3"
+    "vue-template-compiler": "2.7.14"
   },
   "browserslist": [
     "> 1%",

diff --git a/src/layout/ContentFooter.vue b/src/layout/ContentFooter.vue
@@ -1,5 +1,5 @@
 <template>
-  <footer class="footer">
+  <!-- <footer class="footer">
     <div class="container-fluid">
       <nav>
         <ul class="footer-menu">
@@ -15,7 +15,7 @@
         Designed by <a href="https://www.creative-tim.com/?ref=pdf-vuejs" target="_blank">Creative Tim</a>.
       </div>
     </div>
-  </footer>
+  </footer> -->
 </template>
 <script>
   export default {}

diff --git a/src/layout/DashboardLayout.vue b/src/layout/DashboardLayout.vue
@@ -6,38 +6,30 @@
         <i class="nc-icon nc-chart-pie-35"></i>
         <p>Dashboard</p>
       </sidebar-link>
-      <sidebar-link to="/admin/user">
+      <!-- <sidebar-link to="/admin/user">
         <i class="nc-icon nc-circle-09"></i>
         <p>User Profile</p>
-      </sidebar-link>
-      <sidebar-link to="/admin/table-list">
+      </sidebar-link> -->
+      <sidebar-link to="/admin/users">
         <i class="nc-icon nc-notes"></i>
-        <p>Table list</p>
+        <p>User List</p>
       </sidebar-link>
-      <sidebar-link to="/admin/typography">
-        <i class="nc-icon nc-paper-2"></i>
-        <p>Typography</p>
+      <sidebar-link to="/admin/categories">
+        <i class="nc-icon nc-notes"></i>
+        <p>Category list</p>
       </sidebar-link>
-      <sidebar-link to="/admin/icons">
-        <i class="nc-icon nc-atom"></i>
-        <p>Icons</p>
+      <sidebar-link to="/admin/articles">
+        <i class="nc-icon nc-notes"></i>
+        <p>Article list</p>
       </sidebar-link>
-      <sidebar-link to="/admin/maps">
-        <i class="nc-icon nc-pin-3"></i>
-        <p>Maps</p>
+      <sidebar-link to="/admin/categories">
+        <i class="nc-icon nc-notes"></i>
+        <p>Role list</p>
       </sidebar-link>
       <sidebar-link to="/admin/notifications">
         <i class="nc-icon nc-bell-55"></i>
         <p>Notifications</p>
       </sidebar-link>
-
-      <template slot="bottom-links">
-        <sidebar-link class="active"
-                      to="/admin/upgrade">
-          <i class="nc-icon nc-alien-33"></i>
-          <p>Upgrade to PRO</p>
-        </sidebar-link>
-      </template>
     </side-bar>
     <div class="main-panel">
       <top-navbar></top-navbar>

diff --git a/src/layout/TopNavbar.vue b/src/layout/TopNavbar.vue
@@ -1,7 +1,6 @@
 <template>
   <nav class="navbar navbar-expand-lg">
     <div class="container-fluid">
-      <a class="navbar-brand" href="#">Dashboard</a>
       <button type="button"
               class="navbar-toggler navbar-toggler-right"
               :class="{toggled: $sidebar.showSidebar}"
@@ -20,40 +19,8 @@
               <i class="nc-icon nc-palette"></i>
             </a>
           </li>
-          <base-dropdown tag="li">
-            <template slot="title">
-              <i class="nc-icon nc-planet"></i>
-              <b class="caret"></b>
-              <span class="notification">5</span>
-            </template>
-            <a class="dropdown-item" href="#">Notification 1</a>
-            <a class="dropdown-item" href="#">Notification 2</a>
-            <a class="dropdown-item" href="#">Notification 3</a>
-            <a class="dropdown-item" href="#">Notification 4</a>
-            <a class="dropdown-item" href="#">Another notification</a>
-          </base-dropdown>
-          <li class="nav-item">
-            <a href="#" class="nav-link">
-              <i class="nc-icon nc-zoom-split"></i>
-              <span class="d-lg-block">&nbsp;Search</span>
-            </a>
-          </li>
         </ul>
         <ul class="navbar-nav ml-auto">
-          <li class="nav-item">
-            <a class="nav-link" href="#">
-              Account
-            </a>
-          </li>
-          <base-dropdown title="Dropdown">
-            <a class="dropdown-item" href="#">Action</a>
-            <a class="dropdown-item" href="#">Another action</a>
-            <a class="dropdown-item" href="#">Something</a>
-            <a class="dropdown-item" href="#">Another action</a>
-            <a class="dropdown-item" href="#">Something</a>
-            <div class="divider"></div>
-            <a class="dropdown-item" href="#">Separated link</a>
-          </base-dropdown>
           <li class="nav-item">
             <a href="#" class="nav-link">
               Log out

diff --git a/src/layout/UserLayout.vue b/src/layout/UserLayout.vue
@@ -0,0 +1,109 @@
+<template>
+    <div class="container mt-5">
+        <div class="d-flex justify-content-between align-items-center mb-4">
+            <h2>List Articles</h2>
+            <b-form-group label="Search" label-for="search-input" class="mb-0">
+                <b-form-input id="search-input" v-model="searchQuery" placeholder="Search article..."
+                    @input="fetchArticles"></b-form-input>
+            </b-form-group>
+        </div>
+
+        <b-form-group label="Category" label-for="category-dropdown">
+            <b-form-select id="category-dropdown" v-model="selectedCategory" :options="categories"
+                @change="fetchArticles"></b-form-select>
+        </b-form-group>
+
+        <div class="row">
+            <div class="col-md-4 mb-4" v-for="article in paginatedArticles" :key="article.id">
+                <b-card :img-src="'http://127.0.0.1/storage/' + article.image_url" img-alt="Image" img-top>
+                    <b-card-title>{{ article.title }}</b-card-title>
+                    <b-card-text>
+                        <p>{{ truncatedContent(article.content) }}</p>
+                        <small class="text-muted">Author: {{ article.user.name }}</small><br />
+                        <small class="text-muted">Created: {{ formatDate(article.created_at) }}</small>
+                    </b-card-text>
+                    <b-button variant="primary" @click="viewArticle(article.id)">Xem chi tiết</b-button>
+                </b-card>
+            </div>
+        </div>
+
+        <b-pagination v-model="currentPage" :total-rows="totalArticles" :per-page="articlesPerPage"
+            @change="fetchArticles" class="mt-4"></b-pagination>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            searchQuery: '',
+            selectedCategory: null,
+            articles: [],
+            currentPage: 1,
+            articlesPerPage: 3,
+            categories: [],
+        };
+    },
+    async created() {
+        await this.fetchCategories();
+        await this.fetchArticles();
+    },
+    computed: {
+        totalArticles() {
+            return this.articles.length;
+        },
+        paginatedArticles() {
+            const start = (this.currentPage - 1) * this.articlesPerPage;
+            return this.articles.slice(start, start + this.articlesPerPage);
+        }
+    },
+    methods: {
+        async fetchCategories() {
+            axios.get('http://127.0.0.1:8000/api/categories')
+                .then(response => {
+                    this.categories = response.data.map(category => ({
+                        value: category.id,
+                        text: category.title,
+                    }));
+                })
+                .catch(error => {
+                    console.error('Error fetching categories:', error);
+                });
+        },
+        async fetchArticles() {
+            axios.get('http://127.0.0.1:8000/api/article', {
+                params: {
+                    search: this.searchQuery,
+                    category: this.selectedCategory,
+                    page: this.currentPage,
+                }
+            })
+                .then(response => {
+                    this.articles = response.data;
+                })
+                .catch(error => {
+                    console.error('Error fetching articles:', error);
+                });
+        },
+        truncatedContent(content) {
+            const plainText = content.replace(/<\/?[^>]+(>|$)/g, "");
+            const truncated = plainText.length > 200 ? plainText.substring(0, 200) + "..." : plainText;
+
+            return truncated.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+        },
+        viewArticle(id) {
+            this.$router.push({ name: 'ArticleDetail', params: { id } });
+        },
+        formatDate(dateString) {
+            const options = { year: 'numeric', month: 'long', day: 'numeric' };
+            return new Date(dateString).toLocaleDateString(undefined, options);
+        },
+    }
+};
+</script>
+
+<style scoped>
+.card {
+    height: 100%;
+}
+</style>
diff --git a/src/main.js b/src/main.js
@@ -13,10 +13,19 @@
  * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 
  */
+import axios from "axios";
+window.axios = axios;
+
+window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
+axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem("token")}`;
+window.axios.defaults.withCredentials = true;
+
 import Vue from "vue";
 import VueRouter from "vue-router";
 import App from "./App.vue";
 
+import store from './store';
+
 // LightBootstrap plugin
 import LightBootstrap from "./light-bootstrap-main";
 
@@ -28,8 +37,16 @@ import "./registerServiceWorker";
 Vue.use(VueRouter);
 Vue.use(LightBootstrap);
 
+import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
+import "bootstrap/dist/css/bootstrap.css";
+import "bootstrap-vue/dist/bootstrap-vue.css";
+
+Vue.use(BootstrapVue);
+Vue.use(IconsPlugin);
+
 // configure router
 const router = new VueRouter({
+  mode: 'history',
   routes, // short for routes: routes
   linkActiveClass: "nav-item active",
   scrollBehavior: (to) => {
@@ -41,9 +58,31 @@ const router = new VueRouter({
   },
 });
 
-/* eslint-disable no-new */
+// router.beforeEach(async (to, from, next) => {
+//   console.log(to, '123123')
+//   if (to.matched.some(record => record.meta.requiresAuth)) {
+//     if (!store.getters.isAuthenticated) {
+//       try {
+//         if (store.getters.isAuthenticated) {
+//           next();
+//         } else {
+//           next({ name: 'Login' });
+//         }
+//       } catch (error) {
+//         console.error("Error fetching user:", error);
+//         next({ name: 'Login' });
+//       }
+//     } else {
+//       next();
+//     }
+//   } else {
+//     next();
+//   }
+// });
+
 new Vue({
   el: "#app",
+  store,
   render: (h) => h(App),
   router,
 });