From 96d035581011cb3229254df9a5f707cebcd0b893 Mon Sep 17 00:00:00 2001
From: amit-canyon <amit.solanki@canyongbs.com>
Date: Mon, 28 Oct 2024 06:20:13 +0000
Subject: [PATCH 1/4] Enhance the display of articles by all articles, featured
 articles, and most viewed articles

---
 ...edgeManagementPortalCategoryController.php |  6 ++
 ...wledgeManagementPortalSearchController.php |  6 ++
 .../src/Components/FilterComponent.vue        | 55 ++++++++++++++++
 .../src/Components/SearchResults.vue          | 13 +++-
 .../knowledge-management/src/Pages/Home.vue   |  9 +++
 .../src/Pages/ViewCategory.vue                | 64 ++++++++++++-------
 6 files changed, 130 insertions(+), 23 deletions(-)
 create mode 100644 portals/knowledge-management/src/Components/FilterComponent.vue

diff --git a/app-modules/portal/src/Http/Controllers/KnowledgeManagementPortal/KnowledgeManagementPortalCategoryController.php b/app-modules/portal/src/Http/Controllers/KnowledgeManagementPortal/KnowledgeManagementPortalCategoryController.php
index ad66977ad..99f3cd48c 100644
--- a/app-modules/portal/src/Http/Controllers/KnowledgeManagementPortal/KnowledgeManagementPortalCategoryController.php
+++ b/app-modules/portal/src/Http/Controllers/KnowledgeManagementPortal/KnowledgeManagementPortalCategoryController.php
@@ -74,6 +74,12 @@ public function show(KnowledgeBaseCategory $category): JsonResponse
             'articles' => $category->knowledgeBaseItems()
                 ->with('tags')
                 ->public()
+                ->when(request()->get('filter') === 'featured', function ($q) {
+                    $q->where('is_featured', true);
+                })
+                ->when(request()->get('filter') === 'most-viewed', function ($q) {
+                    $q->orderBy('portal_view_count', 'desc');
+                })
                 ->paginate(5)
                 ->through(function ($category) {
                     $category->name = $category->title;
diff --git a/app-modules/portal/src/Http/Controllers/KnowledgeManagementPortal/KnowledgeManagementPortalSearchController.php b/app-modules/portal/src/Http/Controllers/KnowledgeManagementPortal/KnowledgeManagementPortalSearchController.php
index 3c8963400..35268c4b5 100644
--- a/app-modules/portal/src/Http/Controllers/KnowledgeManagementPortal/KnowledgeManagementPortalSearchController.php
+++ b/app-modules/portal/src/Http/Controllers/KnowledgeManagementPortal/KnowledgeManagementPortalSearchController.php
@@ -69,6 +69,12 @@ public function get(Request $request): KnowledgeManagementSearchData
                 ->with('tags')
                 ->when($search->isNotEmpty(), fn (Builder $query) => $query->tap(new SearchBy('title', $search)))
                 ->when($tags->isNotEmpty(), fn (Builder $query) => $query->whereHas('tags', fn (Builder $query) => $query->whereIn('id', $tags)))
+                ->when($request->get('filter') === 'featured', function ($q) {
+                    $q->where('is_featured', true);
+                })
+                ->when($request->get('filter') === 'most-viewed', function ($q) {
+                    $q->orderBy('portal_view_count', 'desc');
+                })
                 ->get()
                 ->map(function (KnowledgeBaseItem $article) {
                     return [
diff --git a/portals/knowledge-management/src/Components/FilterComponent.vue b/portals/knowledge-management/src/Components/FilterComponent.vue
new file mode 100644
index 000000000..cd17a2103
--- /dev/null
+++ b/portals/knowledge-management/src/Components/FilterComponent.vue
@@ -0,0 +1,55 @@
+<script setup>
+    import { defineProps, computed, ref, watch, defineEmits } from 'vue';
+
+    const props = defineProps({
+        selectedFilter: {
+            type: String,
+            default: '',
+        },
+    });
+
+    const emit = defineEmits(['change-filter']);
+    const currentFilter = ref(props.selectedFilter);
+
+    const updateFilter = (value) => {
+        emit('change-filter', value);
+    };
+</script>
+<template>
+    <ul class="mb-5 flex list-none flex-row flex-wrap border-b-0 ps-0" role="tablist" data-twe-nav-ref>
+        <li
+            role="presentation"
+            @click="updateFilter('all-articles')"
+            class="text-sm font-semibold text-primary-600 px-4 py-3 hover:border-primary-600 cursor-pointer"
+            :class="
+                selectedFilter === '' || selectedFilter === 'all-articles'
+                    ? 'border-b-2 border-primary-600'
+                    : 'border-transparent'
+            "
+            data-twe-toggle="pill"
+            aria-selected="true"
+        >
+            All Articles
+        </li>
+        <li
+            role="presentation"
+            @click="updateFilter('featured')"
+            class="text-sm font-semibold text-primary-600 px-4 py-3 border-b-2 hover:border-primary-600 cursor-pointer"
+            :class="selectedFilter === 'featured' ? 'border-b-2 border-primary-600' : 'border-transparent'"
+            data-twe-toggle="pill"
+            aria-selected="true"
+        >
+            Featured
+        </li>
+        <li
+            role="presentation"
+            @click="updateFilter('most-viewed')"
+            class="text-sm font-semibold text-primary-600 px-4 py-3 border-b-2 hover:border-primary-600 cursor-pointer"
+            :class="selectedFilter === 'most-viewed' ? 'border-b-2 border-primary-600' : 'border-transparent'"
+            data-twe-toggle="pill"
+            aria-selected="true"
+        >
+            Most Viewed
+        </li>
+    </ul>
+</template>
diff --git a/portals/knowledge-management/src/Components/SearchResults.vue b/portals/knowledge-management/src/Components/SearchResults.vue
index 42baf2b8d..be8ee937c 100644
--- a/portals/knowledge-management/src/Components/SearchResults.vue
+++ b/portals/knowledge-management/src/Components/SearchResults.vue
@@ -37,6 +37,7 @@
     import { ChevronRightIcon, XMarkIcon } from '@heroicons/vue/20/solid';
     import Tags from './Tags.vue';
     import Article from './Article.vue';
+    import FilterComponent from './FilterComponent.vue';
 
     defineProps({
         searchQuery: {
@@ -51,7 +52,17 @@
             type: Boolean,
             required: true,
         },
+        selectedFilter: {
+            type: String,
+            default: '',
+        },
     });
+
+    const emit = defineEmits(['change-filter']);
+
+    const updateFilter = (value) => {
+        emit('change-filter', value);
+    };
 </script>
 
 <template>
@@ -64,11 +75,11 @@
             Search results: <span class="font-normal">{{ searchQuery }}</span>
         </h3>
 
+        <filter-component @change-filter="updateFilter" :selected-filter="selectedFilter"></filter-component>
         <div class="flex flex-col divide-y ring-1 ring-black/5 shadow-sm px-3 pt-3 pb-1 rounded bg-white">
             <h4 class="text-lg font-semibold text-gray-800 px-3 pt-1 pb-3">
                 Articles ({{ searchResults.data.articles.length }})
             </h4>
-
             <div v-if="searchResults.data.articles.length > 0">
                 <ul role="list" class="divide-y">
                     <li v-for="article in searchResults.data.articles" :key="article.id">
diff --git a/portals/knowledge-management/src/Pages/Home.vue b/portals/knowledge-management/src/Pages/Home.vue
index 7ed7b32be..ea3f504fd 100644
--- a/portals/knowledge-management/src/Pages/Home.vue
+++ b/portals/knowledge-management/src/Pages/Home.vue
@@ -72,6 +72,7 @@
     const selectedTags = ref([]);
     const route = useRoute();
     const globalSearchInput = ref(null);
+    const filter = ref('');
 
     const debounceSearch = debounce((value) => {
         const { post } = consumer();
@@ -87,6 +88,7 @@
         post(props.searchUrl, {
             search: JSON.stringify(value),
             tags: selectedTags.value.join(','),
+            filter: filter.value,
         }).then((response) => {
             searchResults.value = response.data;
             loadingResults.value = false;
@@ -142,6 +144,11 @@
         searchQuery.value = value;
         globalSearchInput.value.focus();
     }
+
+    const changeSearchFilter = (value) => {
+        filter.value = value;
+        debounceSearch(searchQuery.value);
+    };
 </script>
 
 <template>
@@ -206,6 +213,8 @@
                 :searchQuery="searchQuery"
                 :searchResults="searchResults"
                 :loadingResults="loadingResults"
+                @change-filter="changeSearchFilter"
+                :selected-filter="filter"
             >
             </SearchResults>
 
diff --git a/portals/knowledge-management/src/Pages/ViewCategory.vue b/portals/knowledge-management/src/Pages/ViewCategory.vue
index 95766273c..14573e9bf 100644
--- a/portals/knowledge-management/src/Pages/ViewCategory.vue
+++ b/portals/knowledge-management/src/Pages/ViewCategory.vue
@@ -44,6 +44,7 @@
     import Article from '../Components/Article.vue';
     import SearchResults from '../Components/SearchResults.vue';
     import Badge from '../Components/Badge.vue';
+    import FilterComponent from '../Components/FilterComponent.vue';
 
     const route = useRoute();
 
@@ -80,6 +81,7 @@
     const totalArticles = ref(0);
     const fromArticle = ref(0);
     const toArticle = ref(0);
+    const filter = ref('');
 
     const debounceSearch = debounce((value) => {
         const { post } = consumer();
@@ -95,6 +97,7 @@
         post(props.searchUrl, {
             search: JSON.stringify(value),
             tags: selectedTags.value.join(','),
+            filter: filter.value,
         }).then((response) => {
             searchResults.value = response.data;
             loadingeSearchResults.value = false;
@@ -152,34 +155,46 @@
         return Array.from({ length: end - start + 1 }, (_, i) => i + start);
     };
 
+    const changeFilter = (value) => {
+        filter.value = value;
+        getData(1);
+    };
+
+    const changeSearchFilter = (value) => {
+        filter.value = value;
+        debounceSearch(searchQuery.value);
+    };
+
+    const getData = async (page = 1) => {
+        loadingResults.value = true;
+
+        const { get } = consumer();
+
+        await get(props.apiUrl + '/categories/' + route.params.categoryId, { page, filter: filter.value }).then(
+            (response) => {
+                category.value = response.data.category;
+                articles.value = response.data.articles.data;
+                currentPage.value = response.data.articles.current_page;
+                prevPageUrl.value = response.data.articles.prev_page_url;
+                nextPageUrl.value = response.data.articles.next_page_url;
+                lastPage.value = response.data.articles.last_page;
+                totalArticles.value = response.data.articles.total;
+                fromArticle.value = response.data.articles.from;
+                toArticle.value = response.data.articles.to;
+                loadingResults.value = false;
+            },
+        );
+    };
+
     watch(
         route,
-        async function (newRouteValue) {
-            await getData();
+        function (newRouteValue) {
+            getData();
         },
         {
             immediate: true,
         },
     );
-
-    async function getData(page = 1) {
-        loadingResults.value = true;
-
-        const { get } = consumer();
-
-        await get(props.apiUrl + '/categories/' + route.params.categoryId, { page: page }).then((response) => {
-            category.value = response.data.category;
-            articles.value = response.data.articles.data;
-            currentPage.value = response.data.articles.current_page;
-            prevPageUrl.value = response.data.articles.prev_page_url;
-            nextPageUrl.value = response.data.articles.next_page_url;
-            lastPage.value = response.data.articles.last_page;
-            totalArticles.value = response.data.articles.total;
-            fromArticle.value = response.data.articles.from;
-            toArticle.value = response.data.articles.to;
-            loadingResults.value = false;
-        });
-    }
 </script>
 
 <template>
@@ -240,6 +255,8 @@
                                 :searchQuery="searchQuery"
                                 :searchResults="searchResults"
                                 :loadingResults="loadingeSearchResults"
+                                @change-filter="changeSearchFilter"
+                                :selected-filter="filter"
                             >
                             </SearchResults>
                         </div>
@@ -249,7 +266,10 @@
                                 <h2 class="text-2xl font-bold text-primary-950">
                                     {{ category.name }}
                                 </h2>
-
+                                <filter-component
+                                    @change-filter="changeFilter"
+                                    :selected-filter="filter"
+                                ></filter-component>
                                 <div>
                                     <div
                                         class="flex flex-col divide-y ring-1 ring-black/5 shadow-sm px-3 pt-3 pb-1 rounded bg-white"

From 3b75b1e4e77010250f30058c8830d20fe53e8ffe Mon Sep 17 00:00:00 2001
From: amit-canyon <amit-canyon@users.noreply.github.com>
Date: Mon, 28 Oct 2024 07:32:12 +0000
Subject: [PATCH 2/4] chore: fix enforcement of copyright on all files

---
 .../src/Components/FilterComponent.vue        | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/portals/knowledge-management/src/Components/FilterComponent.vue b/portals/knowledge-management/src/Components/FilterComponent.vue
index cd17a2103..d971819e2 100644
--- a/portals/knowledge-management/src/Components/FilterComponent.vue
+++ b/portals/knowledge-management/src/Components/FilterComponent.vue
@@ -1,3 +1,36 @@
+<!--
+<COPYRIGHT>
+
+    Copyright © 2016-2024, Canyon GBS LLC. All rights reserved.
+
+    Aiding App™ is licensed under the Elastic License 2.0. For more details,
+    see <https://github.com/canyongbs/aidingapp/blob/main/LICENSE.>
+
+    Notice:
+
+    - You may not provide the software to third parties as a hosted or managed
+      service, where the service provides users with access to any substantial set of
+      the features or functionality of the software.
+    - You may not move, change, disable, or circumvent the license key functionality
+      in the software, and you may not remove or obscure any functionality in the
+      software that is protected by the license key.
+    - You may not alter, remove, or obscure any licensing, copyright, or other notices
+      of the licensor in the software. Any use of the licensor’s trademarks is subject
+      to applicable law.
+    - Canyon GBS LLC respects the intellectual property rights of others and expects the
+      same in return. Canyon GBS™ and Aiding App™ are registered trademarks of
+      Canyon GBS LLC, and we are committed to enforcing and protecting our trademarks
+      vigorously.
+    - The software solution, including services, infrastructure, and code, is offered as a
+      Software as a Service (SaaS) by Canyon GBS LLC.
+    - Use of this software implies agreement to the license terms and conditions as stated
+      in the Elastic License 2.0.
+
+    For more information or inquiries please visit our website at
+    <https://www.canyongbs.com> or contact us via email at legal@canyongbs.com.
+
+</COPYRIGHT>
+-->
 <script setup>
     import { defineProps, computed, ref, watch, defineEmits } from 'vue';
 

From 12955e60b0a2032c9b9994490fd69171a525d2b5 Mon Sep 17 00:00:00 2001
From: joelicatajr <joelicatajr@users.noreply.github.com>
Date: Mon, 28 Oct 2024 07:33:52 +0000
Subject: [PATCH 3/4] chore: fix code style

---
 .../src/Components/SearchResults.vue          |   2 +-
 .../src/Pages/ViewCategory.vue                | 371 ++++++++++--------
 2 files changed, 202 insertions(+), 171 deletions(-)

diff --git a/portals/knowledge-management/src/Components/SearchResults.vue b/portals/knowledge-management/src/Components/SearchResults.vue
index 401bb3632..dd3322315 100644
--- a/portals/knowledge-management/src/Components/SearchResults.vue
+++ b/portals/knowledge-management/src/Components/SearchResults.vue
@@ -40,7 +40,7 @@
     import FilterComponent from './FilterComponent.vue';
     import Pagination from './Pagination.vue';
 
-const emit = defineEmits(['fetchNextPage', 'fetchPreviousPage', 'fetchPage', 'change-filter']);
+    const emit = defineEmits(['fetchNextPage', 'fetchPreviousPage', 'fetchPage', 'change-filter']);
 
     defineProps({
         searchQuery: {
diff --git a/portals/knowledge-management/src/Pages/ViewCategory.vue b/portals/knowledge-management/src/Pages/ViewCategory.vue
index de8f8d265..823cb7ebd 100644
--- a/portals/knowledge-management/src/Pages/ViewCategory.vue
+++ b/portals/knowledge-management/src/Pages/ViewCategory.vue
@@ -32,179 +32,181 @@
 </COPYRIGHT>
 -->
 <script setup>
-import { MagnifyingGlassIcon } from '@heroicons/vue/24/outline';
-import { defineProps, ref, watch } from 'vue';
-import { useRoute } from 'vue-router';
-import Breadcrumbs from '../Components/Breadcrumbs.vue';
-import AppLoading from '../Components/AppLoading.vue';
-import { consumer } from '../Services/Consumer.js';
-import { Bars3Icon } from '@heroicons/vue/24/outline/index.js';
-import { ChevronRightIcon, XMarkIcon, ChevronLeftIcon } from '@heroicons/vue/20/solid/index.js';
-import Tags from '../Components/Tags.vue';
-import Article from '../Components/Article.vue';
-import SearchResults from '../Components/SearchResults.vue';
-import Badge from '../Components/Badge.vue';
-import FilterComponent from '../Components/FilterComponent.vue';
-import Pagination from '../Components/Pagination.vue';
+    import { MagnifyingGlassIcon } from '@heroicons/vue/24/outline';
+    import { defineProps, ref, watch } from 'vue';
+    import { useRoute } from 'vue-router';
+    import Breadcrumbs from '../Components/Breadcrumbs.vue';
+    import AppLoading from '../Components/AppLoading.vue';
+    import { consumer } from '../Services/Consumer.js';
+    import { Bars3Icon } from '@heroicons/vue/24/outline/index.js';
+    import { ChevronRightIcon, XMarkIcon, ChevronLeftIcon } from '@heroicons/vue/20/solid/index.js';
+    import Tags from '../Components/Tags.vue';
+    import Article from '../Components/Article.vue';
+    import SearchResults from '../Components/SearchResults.vue';
+    import Badge from '../Components/Badge.vue';
+    import FilterComponent from '../Components/FilterComponent.vue';
+    import Pagination from '../Components/Pagination.vue';
 
-const route = useRoute();
+    const route = useRoute();
 
-const props = defineProps({
-    searchUrl: {
-        type: String,
-        required: true,
-    },
-    apiUrl: {
-        type: String,
-        required: true,
-    },
-    categories: {
-        type: Object,
-        required: true,
-    },
-    tags: {
-        type: Object,
-        required: true,
-    },
-});
+    const props = defineProps({
+        searchUrl: {
+            type: String,
+            required: true,
+        },
+        apiUrl: {
+            type: String,
+            required: true,
+        },
+        categories: {
+            type: Object,
+            required: true,
+        },
+        tags: {
+            type: Object,
+            required: true,
+        },
+    });
 
-const loadingResults = ref(true);
-const loadingeSearchResults = ref(true);
-const category = ref(null);
-const articles = ref(null);
-const searchQuery = ref('');
-const searchResults = ref(null);
-const selectedTags = ref([]);
-const currentPage = ref(1);
-const nextPageUrl = ref(null);
-const prevPageUrl = ref(null);
-const lastPage = ref(null);
-const totalArticles = ref(0);
-const fromArticle = ref(0);
-const toArticle = ref(0);
-const filter = ref('');
-const fromSearch = ref(false);
+    const loadingResults = ref(true);
+    const loadingeSearchResults = ref(true);
+    const category = ref(null);
+    const articles = ref(null);
+    const searchQuery = ref('');
+    const searchResults = ref(null);
+    const selectedTags = ref([]);
+    const currentPage = ref(1);
+    const nextPageUrl = ref(null);
+    const prevPageUrl = ref(null);
+    const lastPage = ref(null);
+    const totalArticles = ref(0);
+    const fromArticle = ref(0);
+    const toArticle = ref(0);
+    const filter = ref('');
+    const fromSearch = ref(false);
 
-const debounceSearch = debounce((value, page = 1) => {
-    const { post } = consumer();
-    fromSearch.value = true;
-    if (!value && selectedTags.value.length < 1) {
-        searchQuery.value = null;
-        searchResults.value = null;
-        return;
-    }
+    const debounceSearch = debounce((value, page = 1) => {
+        const { post } = consumer();
+        fromSearch.value = true;
+        if (!value && selectedTags.value.length < 1) {
+            searchQuery.value = null;
+            searchResults.value = null;
+            return;
+        }
 
-    loadingeSearchResults.value = true;
+        loadingeSearchResults.value = true;
 
-    post(props.searchUrl, {
-        search: JSON.stringify(value),
-        tags: selectedTags.value.join(','),
-        filter: filter.value,
-        page: page,
-    }).then((response) => {
-        searchResults.value = response.data;
-        loadingeSearchResults.value = false;
-        setPagination(response.data.data.articles.meta);
-    });
-}, 500);
+        post(props.searchUrl, {
+            search: JSON.stringify(value),
+            tags: selectedTags.value.join(','),
+            filter: filter.value,
+            page: page,
+        }).then((response) => {
+            searchResults.value = response.data;
+            loadingeSearchResults.value = false;
+            setPagination(response.data.data.articles.meta);
+        });
+    }, 500);
 
-const setPagination = (pagination) => {
-    currentPage.value = pagination.current_page;
-    prevPageUrl.value = pagination.prev_page_url;
-    nextPageUrl.value = pagination.next_page_url;
-    lastPage.value = pagination.last_page;
-    totalArticles.value = pagination.total;
-    fromArticle.value = pagination.from;
-    toArticle.value = pagination.to;
-};
+    const setPagination = (pagination) => {
+        currentPage.value = pagination.current_page;
+        prevPageUrl.value = pagination.prev_page_url;
+        nextPageUrl.value = pagination.next_page_url;
+        lastPage.value = pagination.last_page;
+        totalArticles.value = pagination.total;
+        fromArticle.value = pagination.from;
+        toArticle.value = pagination.to;
+    };
 
-watch(searchQuery, (value) => {
-    if (value == null) {
-        fromSearch.value = false;
-        getData(1)
+    watch(searchQuery, (value) => {
+        if (value == null) {
+            fromSearch.value = false;
+            getData(1);
 
-        return;
-    }
-    debounceSearch(value);
-});
+            return;
+        }
+        debounceSearch(value);
+    });
 
-watch(selectedTags, () => {
-    debounceSearch(searchQuery.value);
-});
+    watch(selectedTags, () => {
+        debounceSearch(searchQuery.value);
+    });
 
-function debounce(func, delay) {
-    let timerId;
-    return function (...args) {
-        if (timerId) {
-            clearTimeout(timerId);
-        }
-        timerId = setTimeout(() => {
-            func(...args);
-        }, delay);
-    };
-}
+    function debounce(func, delay) {
+        let timerId;
+        return function (...args) {
+            if (timerId) {
+                clearTimeout(timerId);
+            }
+            timerId = setTimeout(() => {
+                func(...args);
+            }, delay);
+        };
+    }
 
-function toggleTag(tag) {
-    if (selectedTags.value.includes(tag)) {
-        selectedTags.value = selectedTags.value.filter((t) => t !== tag);
-    } else {
-        selectedTags.value = [...selectedTags.value, tag];
+    function toggleTag(tag) {
+        if (selectedTags.value.includes(tag)) {
+            selectedTags.value = selectedTags.value.filter((t) => t !== tag);
+        } else {
+            selectedTags.value = [...selectedTags.value, tag];
+        }
     }
-}
 
-const fetchNextPage = () => {
-    currentPage.value = currentPage.value !== lastPage.value ? currentPage.value + 1 : lastPage.value;
-    getData(currentPage.value);
-};
+    const fetchNextPage = () => {
+        currentPage.value = currentPage.value !== lastPage.value ? currentPage.value + 1 : lastPage.value;
+        getData(currentPage.value);
+    };
 
-const fetchPreviousPage = () => {
-    currentPage.value = currentPage.value !== 1 ? currentPage.value - 1 : 1;
-    getData(currentPage.value);
-};
+    const fetchPreviousPage = () => {
+        currentPage.value = currentPage.value !== 1 ? currentPage.value - 1 : 1;
+        getData(currentPage.value);
+    };
 
-const fetchPage = (page) => {
-    currentPage.value = page;
-    getData(currentPage.value);
-};
+    const fetchPage = (page) => {
+        currentPage.value = page;
+        getData(currentPage.value);
+    };
 
-const changeFilter = (value) => {
-    filter.value = value;
-    getData(1);
-};
+    const changeFilter = (value) => {
+        filter.value = value;
+        getData(1);
+    };
 
-const changeSearchFilter = (value) => {
-    filter.value = value;
-    debounceSearch(searchQuery.value);
-};
+    const changeSearchFilter = (value) => {
+        filter.value = value;
+        debounceSearch(searchQuery.value);
+    };
 
-watch(
-    route,
-    async function (newRouteValue) {
-        searchQuery.value = '';
-        fromSearch.value = false;
-        await getData();
-    },
-    {
-        immediate: true,
-    },
-);
+    watch(
+        route,
+        async function (newRouteValue) {
+            searchQuery.value = '';
+            fromSearch.value = false;
+            await getData();
+        },
+        {
+            immediate: true,
+        },
+    );
 
-async function getData(page = 1) {
-    if (fromSearch.value) {
-        debounceSearch(searchQuery.value, page);
-        return;
-    }
-    loadingResults.value = true;
+    async function getData(page = 1) {
+        if (fromSearch.value) {
+            debounceSearch(searchQuery.value, page);
+            return;
+        }
+        loadingResults.value = true;
 
-    const { get } = consumer();
+        const { get } = consumer();
 
-    await get(props.apiUrl + '/categories/' + route.params.categoryId, { page: page, filter: filter.value }).then((response) => {
-        category.value = response.data.category;
-        articles.value = response.data.articles.data;
-        setPagination(response.data.articles);
-        loadingResults.value = false;
-    });
-}
+        await get(props.apiUrl + '/categories/' + route.params.categoryId, { page: page, filter: filter.value }).then(
+            (response) => {
+                category.value = response.data.category;
+                articles.value = response.data.articles.data;
+                setPagination(response.data.articles);
+                loadingResults.value = false;
+            },
+        );
+    }
 </script>
 
 <template>
@@ -222,20 +224,31 @@ async function getData(page = 1) {
                         <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 py-3">
                             <MagnifyingGlassIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
                         </div>
-                        <input type="search" v-model="searchQuery" id="search"
+                        <input
+                            type="search"
+                            v-model="searchQuery"
+                            id="search"
                             placeholder="Search for articles and categories"
                             class="block w-full rounded border-0 pl-12 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-2-- sm:text-sm sm:leading-6"
-                            :class="{ 'rounded-b-none': tags.length > 0 }" />
+                            :class="{ 'rounded-b-none': tags.length > 0 }"
+                        />
                     </div>
                 </div>
-                <details v-if="tags.length > 0"
-                    class="rounded rounded-t-none bg-white py-3 p-4 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-2-- sm:text-sm sm:leading-6">
+                <details
+                    v-if="tags.length > 0"
+                    class="rounded rounded-t-none bg-white py-3 p-4 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-2-- sm:text-sm sm:leading-6"
+                >
                     <summary v-if="selectedTags.length > 0">Tags ({{ selectedTags.length }} selected)</summary>
                     <summary v-else>Tags</summary>
                     <div class="flex flex-wrap gap-2">
-                        <Badge v-for="tag in tags" :key="tag.id" :value="tag.name" class="cursor-pointer"
+                        <Badge
+                            v-for="tag in tags"
+                            :key="tag.id"
+                            :value="tag.name"
+                            class="cursor-pointer"
                             :class="{ 'bg-primary-600 text-white': selectedTags.includes(tag.id) }"
-                            @click="toggleTag(tag.id)" />
+                            @click="toggleTag(tag.id)"
+                        />
                     </div>
                 </details>
             </div>
@@ -250,12 +263,21 @@ async function getData(page = 1) {
                 <div v-else>
                     <main class="flex flex-col gap-8">
                         <div v-if="searchQuery || selectedTags.length > 0" class="flex flex-col gap-6">
-                            <SearchResults :searchQuery="searchQuery" :searchResults="searchResults"
-                                :loadingResults="loadingeSearchResults" @change-filter="changeSearchFilter"
-                                :selected-filter="filter" :currentPage="currentPage" :lastPage="lastPage"
-                                :fromArticle="fromArticle" :toArticle="toArticle" :totalArticles="totalArticles"
-                                @fetchNextPage="fetchNextPage" @fetchPreviousPage="fetchPreviousPage"
-                                @fetchPage="fetchPage">
+                            <SearchResults
+                                :searchQuery="searchQuery"
+                                :searchResults="searchResults"
+                                :loadingResults="loadingeSearchResults"
+                                @change-filter="changeSearchFilter"
+                                :selected-filter="filter"
+                                :currentPage="currentPage"
+                                :lastPage="lastPage"
+                                :fromArticle="fromArticle"
+                                :toArticle="toArticle"
+                                :totalArticles="totalArticles"
+                                @fetchNextPage="fetchNextPage"
+                                @fetchPreviousPage="fetchPreviousPage"
+                                @fetchPage="fetchPage"
+                            >
                             </SearchResults>
                         </div>
                         <div v-else class="flex flex-col gap-6">
@@ -264,11 +286,14 @@ async function getData(page = 1) {
                                 <h2 class="text-2xl font-bold text-primary-950">
                                     {{ category.name }}
                                 </h2>
-                                <filter-component @change-filter="changeFilter"
-                                    :selected-filter="filter"></filter-component>
+                                <filter-component
+                                    @change-filter="changeFilter"
+                                    :selected-filter="filter"
+                                ></filter-component>
                                 <div>
                                     <div
-                                        class="flex flex-col divide-y ring-1 ring-black/5 shadow-sm px-3 pt-3 pb-1 rounded bg-white">
+                                        class="flex flex-col divide-y ring-1 ring-black/5 shadow-sm px-3 pt-3 pb-1 rounded bg-white"
+                                    >
                                         <h3 class="text-lg font-semibold text-gray-800 px-3 pt-1 pb-3">
                                             Articles ({{ totalArticles }})
                                         </h3>
@@ -279,10 +304,16 @@ async function getData(page = 1) {
                                                     <Article :article="article" />
                                                 </li>
                                             </ul>
-                                            <Pagination :currentPage="currentPage" :lastPage="lastPage"
-                                                :fromArticle="fromArticle" :toArticle="toArticle"
-                                                :totalArticles="totalArticles" @fetchNextPage="fetchNextPage"
-                                                @fetchPreviousPage="fetchPreviousPage" @fetchPage="fetchPage" />
+                                            <Pagination
+                                                :currentPage="currentPage"
+                                                :lastPage="lastPage"
+                                                :fromArticle="fromArticle"
+                                                :toArticle="toArticle"
+                                                :totalArticles="totalArticles"
+                                                @fetchNextPage="fetchNextPage"
+                                                @fetchPreviousPage="fetchPreviousPage"
+                                                @fetchPage="fetchPage"
+                                            />
                                         </div>
                                         <div v-else class="p-3 flex items-start gap-2">
                                             <XMarkIcon class="h-5 w-5 text-gray-400" />

From c3ba9e7f6afd08e8152ff604909c9b8297e55a64 Mon Sep 17 00:00:00 2001
From: amit-canyon <amit.solanki@canyongbs.com>
Date: Mon, 28 Oct 2024 16:29:45 +0000
Subject: [PATCH 4/4] remove unuse tag , change query

---
 .../KnowledgeManagementPortalCategoryController.php      | 9 +++++----
 .../KnowledgeManagementPortalSearchController.php        | 8 ++++----
 .../src/Components/FilterComponent.vue                   | 3 ---
 3 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/app-modules/portal/src/Http/Controllers/KnowledgeManagementPortal/KnowledgeManagementPortalCategoryController.php b/app-modules/portal/src/Http/Controllers/KnowledgeManagementPortal/KnowledgeManagementPortalCategoryController.php
index 99f3cd48c..f026df4e7 100644
--- a/app-modules/portal/src/Http/Controllers/KnowledgeManagementPortal/KnowledgeManagementPortalCategoryController.php
+++ b/app-modules/portal/src/Http/Controllers/KnowledgeManagementPortal/KnowledgeManagementPortalCategoryController.php
@@ -38,6 +38,7 @@
 
 use Illuminate\Http\JsonResponse;
 use App\Http\Controllers\Controller;
+use Illuminate\Database\Eloquent\Builder;
 use AidingApp\KnowledgeBase\Models\KnowledgeBaseCategory;
 use AidingApp\Portal\DataTransferObjects\KnowledgeBaseCategoryData;
 
@@ -74,11 +75,11 @@ public function show(KnowledgeBaseCategory $category): JsonResponse
             'articles' => $category->knowledgeBaseItems()
                 ->with('tags')
                 ->public()
-                ->when(request()->get('filter') === 'featured', function ($q) {
-                    $q->where('is_featured', true);
+                ->when(request()->get('filter') === 'featured', function (Builder $query) {
+                    $query->where('is_featured', true);
                 })
-                ->when(request()->get('filter') === 'most-viewed', function ($q) {
-                    $q->orderBy('portal_view_count', 'desc');
+                ->when(request()->get('filter') === 'most-viewed', function (Builder $query) {
+                    $query->where('portal_view_count', '>', 0)->orderBy('portal_view_count', 'desc');
                 })
                 ->paginate(5)
                 ->through(function ($category) {
diff --git a/app-modules/portal/src/Http/Controllers/KnowledgeManagementPortal/KnowledgeManagementPortalSearchController.php b/app-modules/portal/src/Http/Controllers/KnowledgeManagementPortal/KnowledgeManagementPortalSearchController.php
index d31b73049..a899a8f56 100644
--- a/app-modules/portal/src/Http/Controllers/KnowledgeManagementPortal/KnowledgeManagementPortalSearchController.php
+++ b/app-modules/portal/src/Http/Controllers/KnowledgeManagementPortal/KnowledgeManagementPortalSearchController.php
@@ -69,11 +69,11 @@ public function get(Request $request): KnowledgeManagementSearchData
                 ->with('tags')
                 ->when($search->isNotEmpty(), fn (Builder $query) => $query->tap(new SearchBy('title', $search)))
                 ->when($tags->isNotEmpty(), fn (Builder $query) => $query->whereHas('tags', fn (Builder $query) => $query->whereIn('id', $tags)))
-                ->when($request->get('filter') === 'featured', function ($q) {
-                    $q->where('is_featured', true);
+                ->when($request->get('filter') === 'featured', function (Builder $query) {
+                    $query->where('is_featured', true);
                 })
-                ->when($request->get('filter') === 'most-viewed', function ($q) {
-                    $q->orderBy('portal_view_count', 'desc');
+                ->when($request->get('filter') === 'most-viewed', function (Builder $query) {
+                    $query->where('portal_view_count', '>', 0)->orderBy('portal_view_count', 'desc');
                 })
                 ->paginate(5)
                 ->through(function (KnowledgeBaseItem $article) {
diff --git a/portals/knowledge-management/src/Components/FilterComponent.vue b/portals/knowledge-management/src/Components/FilterComponent.vue
index d971819e2..6a33acb7e 100644
--- a/portals/knowledge-management/src/Components/FilterComponent.vue
+++ b/portals/knowledge-management/src/Components/FilterComponent.vue
@@ -59,7 +59,6 @@
                     ? 'border-b-2 border-primary-600'
                     : 'border-transparent'
             "
-            data-twe-toggle="pill"
             aria-selected="true"
         >
             All Articles
@@ -69,7 +68,6 @@
             @click="updateFilter('featured')"
             class="text-sm font-semibold text-primary-600 px-4 py-3 border-b-2 hover:border-primary-600 cursor-pointer"
             :class="selectedFilter === 'featured' ? 'border-b-2 border-primary-600' : 'border-transparent'"
-            data-twe-toggle="pill"
             aria-selected="true"
         >
             Featured
@@ -79,7 +77,6 @@
             @click="updateFilter('most-viewed')"
             class="text-sm font-semibold text-primary-600 px-4 py-3 border-b-2 hover:border-primary-600 cursor-pointer"
             :class="selectedFilter === 'most-viewed' ? 'border-b-2 border-primary-600' : 'border-transparent'"
-            data-twe-toggle="pill"
             aria-selected="true"
         >
             Most Viewed