[#7] hash filter done in index page

tblog_quasar/src/components/TagBar.vue

@@ -1,16 +1,22 @@
 <template>
   <div>
-    <span v-for="tag in props.tags" :key="tag" class="tag click" @click="click">
+    <span
+      v-for="tag in props.tags"
+      :key="tag"
+      class="tag click"
+      @click="click(tag)"
+    >
       {{ tag }}
     </span>
   </div>
 </template>
 
 <script setup lang="ts">
 const props = defineProps<{ tags: Array<string> }>()
+const emits = defineEmits(['click:tag'])
 
-function click(): void {
-  console.log('test')
+function click(tag: string): void {
+  emits('click:tag', tag)
 }
 </script>
 

tblog_quasar/src/layouts/MainLayout.vue

@@ -3,7 +3,9 @@
     <q-header reveal class="bg-grey-2 text-black">
       <q-toolbar>
         <q-toolbar-title class="q-ml-lg">
-          <router-link class="main-link" to="/">Wonhee's Tech Blog</router-link>
+          <span class="main-link click" @click="mainClick()">
+            Wonhee's Tech Blog
+          </span>
         </q-toolbar-title>
         <ControlDropdown />
       </q-toolbar>
@@ -17,7 +19,15 @@
 
 <script setup lang="ts">
 import ControlDropdown from 'components/ControlDropdown.vue'
+import { useRouter } from 'vue-router'
+import { useIndexStore } from 'stores/indexStore'
 
+const r = useRouter()
+const s = useIndexStore()
+function mainClick(): void {
+  s.selectedTag = ''
+  r.push('/')
+}
 </script>
 
 <style scoped>
@@ -27,5 +37,6 @@ import ControlDropdown from 'components/ControlDropdown.vue'
   font-size: 1.5rem;
   font-family: 'Quicksand', sans-serif;
   text-decoration: none;
+  cursor: pointer;
 }
 </style>

tblog_quasar/src/pages/IndexPage.vue

@@ -1,10 +1,10 @@
 <template>
-  <q-page class="q-pa-md post-cards row">
-    <TagBar :tags="s.tags" />
+  <q-page class="q-pa-md post-cards">
+    <TagBar :tags="s.selectedTags" @click:tag="tagClick" />
     <q-card
-      v-for="post in s.posts"
+      v-for="post in s.selectedPosts"
       :key="(post.id as number)"
-      class="col-12 q-mt-sm q-mb-sm post-card"
+      class="col-12 q-mt-sm q-mb-sm"
     >
       <div class="click" @click="postClick(post.id as number)">
         <q-card-section>
@@ -41,6 +41,11 @@ export default {
 import { useRouter } from 'vue-router'
 const s = useIndexStore()
 const r = useRouter()
+
+function tagClick(tag: string) {
+  s.selectedTag = tag
+}
+
 function postClick(id: number) {
   r.push(`/post/${id}`)
 }

tblog_quasar/src/stores/indexStore.ts

@@ -1,11 +1,12 @@
 import { defineStore } from 'pinia'
-import { IndexState } from 't-common'
+import { IndexState, Post } from 't-common'
 import { api } from 'boot/axios'
 
 export const useIndexStore = defineStore('index', {
   state: (): IndexState => ({
     posts: [],
     tags: [],
+    selectedTag: '',
   }),
   actions: {
     async initialize() {
@@ -21,4 +22,19 @@ export const useIndexStore = defineStore('index', {
       }
     },
   },
+
+  getters: {
+    selectedPosts(): Post[] {
+      if (this.selectedTag !== '') {
+        return this.posts.filter((p) => p.tags.includes(this.selectedTag))
+      }
+      return this.posts
+    },
+    selectedTags(): string[] {
+      if (this.selectedTag !== '') {
+        return [this.selectedTag]
+      }
+      return this.tags
+    },
+  },
 })

tblog_quasar/src/types/common.d.ts

@@ -11,14 +11,15 @@ declare module 't-common' {
   export interface IndexState {
     posts: Array<Post>
     tags: Array<string>
+    selectedTag: string
   }
 
   export interface UserState {
     user: User
   }
   export interface User {
-    email: string,
-    isSu: boolean,
-    picture: string,
+    email: string
+    isSu: boolean
+    picture: string
   }
 }