search page is ready

.github/workflows/ci.yml

@@ -15,4 +15,4 @@ jobs:
           user: ${{ secrets.PROD_SSH_USER }}
           key: ${{ secrets.PROD_SSH_KEY}}
           args: -tt
-          command: cd /home/webdev/Web/maucoding-web-v2 && git pull origin main && npm install && npm run build && pm2 stop mcdg-web-v2 && pm2 start mcdg-web-v2
+          command: cd /home/webdev/Web/maucoding-web-v2 && git pull origin main && pnpm install && pnpm build && pm2 stop mcdg-web-v2 && pm2 start mcdg-web-v2

components/commons/navigations/GlobalHeader/index.vue

@@ -16,17 +16,47 @@
         <q-tab class="q-pa-md" name="/posts" label="POSTS" />
         <q-tab class="q-pa-md" name="/videos" label="VIDEOS" />
       </q-tabs>
-      <q-btn flat round dense icon="search" />
+      <q-btn
+        @click="() => (search = { ...search, ...{ show: !search.show } })"
+        flat
+        round
+        dense
+        icon="search"
+      />
     </q-toolbar>
+
+    <!-- do search -->
+    <div v-if="search.show">
+      <div className="text-right">
+        <q-input
+          style="padding: 0 15px 20px; font-size: 1rem"
+          v-model="search.value"
+          :dense="dense"
+          placeholder="Ketik keyword pencarian disini..."
+          autofocus
+          @keydown.enter="
+            $router.push(`/search/${toSlug(search.value.toLowerCase())}`)
+          "
+        />
+        <!-- <Input type="text" :value="search.value" /> -->
+      </div>
+    </div>
+    <!-- end of do search -->
   </div>
 </template>
 <script>
+import { toSlug } from "@helpers/stringManager";
+
 export default {
   data() {
     const { path } = this.$route;
     const tabActive = `/${path.split("/")[1]}`;
     return {
       tab: tabActive,
+      search: {
+        show: false,
+        value: "",
+      },
     };
   },
   watch: {
@@ -37,5 +67,8 @@ export default {
       return this.$router.push(newVal);
     },
   },
+  methods: {
+    toSlug,
+  },
 };
 </script>

components/layouts/default-layout/index.vue

@@ -33,7 +33,7 @@ import GlobalHeader from "@components/commons/navigations/GlobalHeader";
 import GlobalFooter from "@components/commons/navigations/GlobalFooter";
 import Sidebar from "@components/commons/navigations/GlobalSidebar";
 
-const ALWAYS_FULLSCREEN = ["/posts", "/tag", "/author", "/videos"];
+const ALWAYS_FULLSCREEN = ["/posts", "/tag", "/author", "/videos", "/search"];
 
 export default {
   data() {

components/templates/PostLists/index.vue

@@ -34,6 +34,7 @@
 <script setup>
 import { ref, computed } from "vue";
 import { useRoute } from "vue-router";
+// import { useHead } from "vue";
 
 // components
 import DefaultLayout from "@components/layouts/default-layout";

pages/search/[keyword]/index.vue

@@ -0,0 +1,90 @@
+<template>
+  <DefaultLayout>
+    <Breadcrumb :data="breadcrumbData" />
+    <TitleMedium :title="`Video Search Result &quot;${keyword}&quot;`" />
+    <VideoPosts :size="'large'" :data="videosData" />
+
+    <br />
+    <br />
+    <br />
+
+    <TitleMedium :title="`Post Search Result &quot;${keyword}&quot;`" />
+    <BoxPosts :size="'large'" :data="postsData" />
+  </DefaultLayout>
+</template>
+
+<script setup>
+import { useRoute } from "vue-router";
+
+// components
+import DefaultLayout from "@components/layouts/default-layout";
+import TitleMedium from "@components/commons/headings/title-medium";
+import BoxPosts from "@components/commons/boxs/BoxPosts";
+import VideoPosts from "@components/commons/boxs/BoxVideos";
+import Breadcrumb from "@components/commons/navigations/Breadcrumbs";
+
+// services
+import { fetchPosts } from "@services/posts";
+import { fetchVideos } from "@services/videos";
+
+/***************
+ ** CONSTS
+ ***************/
+const route = useRoute();
+const keyword = route?.params?.keyword?.replace(/-/g, "");
+const title = `Pencarian "${keyword}"`;
+const defaultQuery = {
+  limit: 6,
+  keyword,
+  draft: false,
+};
+const breadcrumbData = [
+  { to: `/search/${route?.params?.keyword}`, label: `Search: "${keyword}"` },
+];
+
+/***************
+ ** REFS
+ ***************/
+const postsData = ref({});
+const videosData = ref({});
+
+/***************
+ ** FETCHERS
+ ***************/
+
+//  fetcher to get data post list
+const fetchPostsData = async (nextQuery = {}) => {
+  const query = { ...nextQuery, ...defaultQuery };
+  const response = await fetchPosts({ query });
+
+  if (!query.lastupdatedon) {
+    postsData.value = response;
+  }
+};
+
+// fetcher to get video list
+const fetchVideosData = async (nextQuery = {}) => {
+  const query = { ...nextQuery, ...defaultQuery };
+  const response = await fetchVideos({ query });
+
+  if (!query.lastcreateat) {
+    videosData.value = response;
+  }
+};
+
+/***************
+ ** LIFECYCLE
+ ***************/
+
+// setup meta title and desc
+useHead({
+  title: `${title} - MauCoding`,
+  meta: [{ name: "description", content: `Hasil dari ${title.toLowerCase()}` }],
+});
+
+// onMounted
+onMounted(() => {
+  fetchPostsData();
+  fetchVideosData();
+});
+</script>