Add recent posts

zisu-dev · Dec 31, 2020 · 03581a4 · 03581a4
1 parent 2079d26
commit 03581a4
Show file tree

Hide file tree

Showing 21 changed files with 93 additions and 25 deletions.
diff --git a/components/UserIndicator.vue b/components/UserIndicator.vue
@@ -8,7 +8,7 @@
       </v-btn>
     </template>
     <v-list dense>
-      <v-list-item :to="'/user/' + user.slug">
+      <v-list-item :to="'/user/' + user.slug" nuxt>
         <v-list-item-icon>
           <v-icon>{{ mdiAccount }}</v-icon>
         </v-list-item-icon>
@@ -24,7 +24,7 @@
           </v-badge>
         </v-list-item-content>
       </v-list-item>
-      <v-list-item v-if="user.perm.admin" to="/admin">
+      <v-list-item v-if="user.perm.admin" to="/admin" nuxt>
         <v-list-item-icon>
           <v-icon>{{ mdiCog }}</v-icon>
         </v-list-item-icon>
@@ -42,7 +42,7 @@
       </v-list-item>
     </v-list>
   </v-menu>
-  <v-btn v-else text to="/login">
+  <v-btn v-else text to="/login" nuxt>
     <v-icon left>{{ mdiAccountCircle }}</v-icon>
     Login
   </v-btn>

diff --git a/components/admin/AdminNav.vue b/components/admin/AdminNav.vue
@@ -11,6 +11,7 @@
       :key="i"
       :to="'/admin' + link.to"
       :exact="link.exact"
+      nuxt
     >
       <v-list-item-avatar tile size="24">
         <v-icon>{{ link.icon }}</v-icon>

diff --git a/components/app/AppNav.vue b/components/app/AppNav.vue
@@ -1,6 +1,6 @@
 <template>
   <v-list nav dense>
-    <v-list-item v-for="(link, i) of links" :key="i" :to="link.to">
+    <v-list-item v-for="(link, i) of links" :key="i" :to="link.to" nuxt>
       <v-list-item-avatar tile size="24">
         <v-icon>{{ link.icon }}</v-icon>
       </v-list-item-avatar>

diff --git a/components/post/Post.vue b/components/post/Post.vue
@@ -22,7 +22,7 @@
           {{ post.public ? 'Public' : 'Private' }}
         </v-chip>
         <v-spacer />
-        <v-btn outlined small :to="'/admin/post/' + post._id">Edit</v-btn>
+        <v-btn outlined small :to="'/admin/post/' + post._id" nuxt>Edit</v-btn>
       </v-card-actions>
     </template>
     <v-divider />

diff --git a/components/post/PostList.vue b/components/post/PostList.vue
@@ -1,7 +1,7 @@
 <template>
-  <v-row>
+  <v-row dense>
     <v-col v-for="(post, i) of posts" :key="i" cols="12">
-      <post-list-item :post="post" />
+      <post-list-item :outlined="outlined" :post="post" />
     </v-col>
   </v-row>
 </template>
@@ -17,6 +17,9 @@ export default Vue.extend({
     posts: {
       type: Array,
       required: true
+    },
+    outlined: {
+      type: Boolean
     }
   }
 })

diff --git a/components/post/PostListItem.vue b/components/post/PostListItem.vue
@@ -1,10 +1,11 @@
 <template>
-  <v-card>
+  <v-card :outlined="outlined">
     <v-card-title>
       <div>
         <nuxt-link
           class="title"
           :to="`/post/${post.slug}`"
+          nuxt
           v-text="post.title"
         />
         <div>
@@ -26,7 +27,7 @@
           {{ post.public ? 'Public' : 'Private' }}
         </v-chip>
         <v-spacer />
-        <v-btn outlined small :to="'/admin/post/' + post._id">Edit</v-btn>
+        <v-btn outlined small :to="'/admin/post/' + post._id" nuxt>Edit</v-btn>
       </v-card-actions>
     </template>
     <v-divider />
@@ -59,6 +60,9 @@ export default Vue.extend({
     post: {
       type: Object,
       required: true
+    },
+    outlined: {
+      type: Boolean
     }
   },
   data() {

diff --git a/components/post/PostTable.vue b/components/post/PostTable.vue
@@ -11,7 +11,7 @@
       dense
     >
       <template #[`item._id`]="{ item }">
-        <nuxt-link class="object-id" :to="'/admin/post/' + item._id">
+        <nuxt-link class="object-id" :to="'/admin/post/' + item._id" nuxt>
           {{ item._id }}
         </nuxt-link>
       </template>

diff --git a/components/post/RecentPosts.vue b/components/post/RecentPosts.vue
@@ -0,0 +1,46 @@
+<template>
+  <v-card>
+    <v-card-title>Recent Posts</v-card-title>
+    <v-divider />
+    <template v-if="$fetchState.pending">
+      <v-skeleton-loader type="list-item-three-line@3" />
+    </template>
+    <template v-else-if="$fetchState.error">
+      <error-card :error="$fetchState.error" @reload="$fetch" />
+    </template>
+    <template v-else>
+      <v-card-text>
+        <post-list :posts="posts" outlined />
+      </v-card-text>
+    </template>
+  </v-card>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import ErrorCard from '~/components/ErrorCard.vue'
+import PostList from '~/components/post/PostList.vue'
+
+export default Vue.extend({
+  name: 'RecentPosts',
+  components: { ErrorCard, PostList },
+  data() {
+    return {
+      posts: []
+    }
+  },
+  async fetch() {
+    const searchParams: Record<string, any> = {
+      page: 1,
+      per_page: 15,
+      sort: 'updated'
+    }
+
+    const data: any = await this.$http.$get('/post/', {
+      searchParams
+    })
+
+    this.posts = data.items
+  }
+})
+</script>
diff --git a/components/tag/TagChip.vue b/components/tag/TagChip.vue
@@ -4,6 +4,7 @@
     :to="(admin ? '/admin/tag/' : '/tag/') + tag.slug"
     outlined
     small
+    nuxt
   >
     <v-icon v-if="!noIcon" left>{{ mdiLabel }}</v-icon>
     {{ tag.title }}

diff --git a/layouts/error.vue b/layouts/error.vue
@@ -28,7 +28,7 @@
                 </v-btn>
               </v-col>
               <v-col cols="12" lg="6">
-                <v-btn color="primary" block to="/">Go Home</v-btn>
+                <v-btn color="primary" block to="/" nuxt>Go Home</v-btn>
               </v-col>
             </v-row>
           </v-card-actions>

diff --git a/pages/admin/meta/index.vue b/pages/admin/meta/index.vue
@@ -7,7 +7,7 @@
           <v-divider />
           <v-card-actions>
             <v-spacer />
-            <v-btn outlined to="/admin/meta/new">New Meta Item</v-btn>
+            <v-btn outlined to="/admin/meta/new" nuxt>New Meta Item</v-btn>
           </v-card-actions>
         </v-card>
       </v-col>
@@ -22,7 +22,7 @@
             dense
           >
             <template #[`item._id`]="{ item }">
-              <nuxt-link class="object-id" :to="'/admin/meta/' + item._id">
+              <nuxt-link class="object-id" :to="'/admin/meta/' + item._id" nuxt>
                 {{ item._id }}
               </nuxt-link>
             </template>

diff --git a/pages/admin/post/_id.vue b/pages/admin/post/_id.vue
@@ -48,6 +48,7 @@
                   :disabled="loading"
                   color="success"
                   :to="'/post/' + post.slug"
+                  nuxt
                 >
                   View
                 </v-btn>

diff --git a/pages/admin/post/index.vue b/pages/admin/post/index.vue
@@ -7,7 +7,7 @@
           <v-divider />
           <v-card-actions>
             <v-spacer />
-            <v-btn outlined to="/admin/post/new">New Post</v-btn>
+            <v-btn outlined to="/admin/post/new" nuxt>New Post</v-btn>
           </v-card-actions>
         </v-card>
       </v-col>

diff --git a/pages/admin/tag/_id.vue b/pages/admin/tag/_id.vue
@@ -16,7 +16,12 @@
           <v-divider />
           <v-card-actions>
             <v-spacer />
-            <v-btn :disabled="loading" color="success" :to="'/tag/' + tag.slug">
+            <v-btn
+              :disabled="loading"
+              color="success"
+              :to="'/tag/' + tag.slug"
+              nuxt
+            >
               View
             </v-btn>
             <v-btn :disabled="loading" color="warning" @click="reset">

diff --git a/pages/admin/tag/index.vue b/pages/admin/tag/index.vue
@@ -7,7 +7,7 @@
           <v-divider />
           <v-card-actions>
             <v-spacer />
-            <v-btn outlined to="/admin/tag/new">New Tag</v-btn>
+            <v-btn outlined to="/admin/tag/new" nuxt>New Tag</v-btn>
           </v-card-actions>
         </v-card>
       </v-col>
@@ -22,7 +22,7 @@
             dense
           >
             <template #[`item._id`]="{ item }">
-              <nuxt-link class="object-id" :to="'/admin/tag/' + item._id">
+              <nuxt-link class="object-id" :to="'/admin/tag/' + item._id" nuxt>
                 {{ item._id }}
               </nuxt-link>
             </template>

diff --git a/pages/admin/user/index.vue b/pages/admin/user/index.vue
@@ -7,7 +7,7 @@
           <v-divider />
           <v-card-actions>
             <v-spacer />
-            <v-btn outlined to="/admin/user/new">New User</v-btn>
+            <v-btn outlined to="/admin/user/new" nuxt>New User</v-btn>
           </v-card-actions>
         </v-card>
       </v-col>
@@ -22,7 +22,7 @@
             dense
           >
             <template #[`item._id`]="{ item }">
-              <nuxt-link class="object-id" :to="'/user/' + item._id">
+              <nuxt-link class="object-id" :to="'/user/' + item._id" nuxt>
                 {{ item._id }}
               </nuxt-link>
             </template>

diff --git a/pages/index.vue b/pages/index.vue
@@ -41,6 +41,11 @@
         </v-card>
       </v-col>
     </v-row>
+    <v-row justify="center">
+      <v-col cols="12" lg="6" xl="4">
+        <recent-posts />
+      </v-col>
+    </v-row>
     <v-row justify="center">
       <v-col cols="12" lg="6" xl="4">
         <v-card>
@@ -82,9 +87,11 @@
 import Vue from 'vue'
 import { mdiFormatListText, mdiWeb, mdiArrowDown } from '@mdi/js'
 import { wait } from '~/utils/misc'
+import RecentPosts from '~/components/post/RecentPosts.vue'
 
 export default Vue.extend({
   name: 'IndexPage',
+  components: { RecentPosts },
   data() {
     return {
       links: [

diff --git a/pages/login.vue b/pages/login.vue
@@ -6,7 +6,7 @@
           <v-card-title>
             Login
             <v-spacer />
-            <v-btn outlined to="/register">
+            <v-btn outlined to="/register" nuxt>
               Register
               <v-icon right>{{ mdiAccountPlus }}</v-icon>
             </v-btn>

diff --git a/pages/register.vue b/pages/register.vue
@@ -6,7 +6,7 @@
           <v-card-title>
             Register
             <v-spacer />
-            <v-btn outlined to="/login">
+            <v-btn outlined to="/login" nuxt>
               Login
               <v-icon right>{{ mdiLoginVariant }}</v-icon>
             </v-btn>

diff --git a/pages/tag/_slug.vue b/pages/tag/_slug.vue
@@ -12,7 +12,7 @@
               <template v-if="isAdmin">
                 <v-divider />
                 <v-card-text>
-                  <v-btn outlined small :to="'/admin/tag/' + tag._id">
+                  <v-btn outlined small :to="'/admin/tag/' + tag._id" nuxt>
                     Edit
                   </v-btn>
                 </v-card-text>

diff --git a/styles/vuetify.scss b/styles/vuetify.scss
@@ -1,21 +1,21 @@
 .acrylic {
   .v-app-bar,
   .v-footer,
-  .v-card,
+  .v-card:not(.v-card--flat, .v-sheet--outlined),
   .v-navigation-drawer,
   .v-menu__content {
     backdrop-filter: blur(5px);
   }
 
   .theme--light {
-    &.v-card,
+    &.v-card:not(.v-card--flat, .v-sheet--outlined),
     &.v-menu__content {
       background-color: #ffffffc0;
     }
   }
 
   .theme--dark {
-    &.v-card,
+    &.v-card:not(.v-card--flat, .v-sheet--outlined),
     &.v-menu__content {
       background-color: #000000c0;
     }