[AIDAPP-323]: Enhance the display of articles by all articles, featured articles, and most viewed articles

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;

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');
+                })
                 ->paginate(5)
                 ->through(function (KnowledgeBaseItem $article) {
                     return [

portals/knowledge-management/src/Components/FilterComponent.vue

@@ -0,0 +1,88 @@
+<!--
+<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';
+
+    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>

portals/knowledge-management/src/Components/SearchResults.vue

@@ -37,9 +37,10 @@
     import { ChevronRightIcon, XMarkIcon } from '@heroicons/vue/20/solid';
     import Tags from './Tags.vue';
     import Article from './Article.vue';
+    import FilterComponent from './FilterComponent.vue';
     import Pagination from './Pagination.vue';
 
-    const emit = defineEmits(['fetchNextPage', 'fetchPreviousPage', 'fetchPage']);
+    const emit = defineEmits(['fetchNextPage', 'fetchPreviousPage', 'fetchPage', 'change-filter']);
 
     defineProps({
         searchQuery: {
@@ -54,6 +55,10 @@
             type: Boolean,
             required: true,
         },
+        selectedFilter: {
+            type: String,
+            default: '',
+        },
         currentPage: {
             type: Number,
             required: true,
@@ -75,6 +80,11 @@
             required: true,
         },
     });
+
+    const updateFilter = (value) => {
+        emit('change-filter', value);
+    };
+
     function fetchNextPage() {
         emit('fetchNextPage');
     }
@@ -96,6 +106,7 @@
             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 ({{ totalArticles }})</h4>
 

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 currentPage = ref(1);
     const nextPageUrl = ref(null);
     const prevPageUrl = ref(null);
@@ -82,7 +83,6 @@
 
     const debounceSearch = debounce((value, page = 1) => {
         const { post } = consumer();
-
         if (!value && selectedTags.value.length < 1) {
             searchQuery.value = null;
             searchResults.value = null;
@@ -94,6 +94,7 @@
         post(props.searchUrl, {
             search: JSON.stringify(value),
             tags: selectedTags.value.join(','),
+            filter: filter.value,
             page: page,
         }).then((response) => {
             searchResults.value = response.data;
@@ -162,6 +163,11 @@
         globalSearchInput.value.focus();
     }
 
+    const changeSearchFilter = (value) => {
+        filter.value = value;
+        debounceSearch(searchQuery.value);
+    };
+
     const fetchNextPage = () => {
         currentPage.value = currentPage.value !== lastPage.value ? currentPage.value + 1 : lastPage.value;
         debounceSearch(searchQuery.value, currentPage.value);
@@ -240,6 +246,8 @@
                 :searchQuery="searchQuery"
                 :searchResults="searchResults"
                 :loadingResults="loadingResults"
+                @change-filter="changeSearchFilter"
+                :selected-filter="filter"
                 :currentPage="currentPage"
                 :lastPage="lastPage"
                 :fromArticle="fromArticle"

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';
     import Pagination from '../Components/Pagination.vue';
 
     const route = useRoute();
@@ -81,6 +82,7 @@
     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) => {
@@ -97,6 +99,7 @@
         post(props.searchUrl, {
             search: JSON.stringify(value),
             tags: selectedTags.value.join(','),
+            filter: filter.value,
             page: page,
         }).then((response) => {
             searchResults.value = response.data;
@@ -116,6 +119,12 @@
     };
 
     watch(searchQuery, (value) => {
+        if (value == null) {
+            fromSearch.value = false;
+            getData(1);
+
+            return;
+        }
         debounceSearch(value);
     });
 
@@ -157,6 +166,17 @@
         currentPage.value = page;
         getData(currentPage.value);
     };
+
+    const changeFilter = (value) => {
+        filter.value = value;
+        getData(1);
+    };
+
+    const changeSearchFilter = (value) => {
+        filter.value = value;
+        debounceSearch(searchQuery.value);
+    };
+
     watch(
         route,
         async function (newRouteValue) {
@@ -178,12 +198,14 @@
 
         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;
-            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>
 
@@ -245,6 +267,8 @@
                                 :searchQuery="searchQuery"
                                 :searchResults="searchResults"
                                 :loadingResults="loadingeSearchResults"
+                                @change-filter="changeSearchFilter"
+                                :selected-filter="filter"
                                 :currentPage="currentPage"
                                 :lastPage="lastPage"
                                 :fromArticle="fromArticle"
@@ -262,7 +286,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"