Skip to content

Commit

Permalink
search page is ready
Browse files Browse the repository at this point in the history
  • Loading branch information
yussan committed Feb 8, 2024
1 parent 2335e85 commit 3172851
Show file tree
Hide file tree
Showing 5 changed files with 127 additions and 3 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
35 changes: 34 additions & 1 deletion components/commons/navigations/GlobalHeader/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -37,5 +67,8 @@ export default {
return this.$router.push(newVal);
},
},
methods: {
toSlug,
},
};
</script>
2 changes: 1 addition & 1 deletion components/layouts/default-layout/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down
1 change: 1 addition & 0 deletions components/templates/PostLists/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
90 changes: 90 additions & 0 deletions pages/search/[keyword]/index.vue
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit 3172851

Please sign in to comment.