- added src/compoenents/Pagination.vue

- npm updates
- added "type": "module" inside package.json
- renamed .eslintrc.js, postcss.config.js and vue.config.js
- adapted search-view-component

.eslintrc.cjs

@@ -33,6 +33,7 @@ module.exports = {
         // "@vue-eslint/printWidth": ["error", 120],
         "vue/v-bind-style": ["warn", "longform"], //autofix
         "vue/prop-name-casing": ["error", "camelCase"], //autofix
+        "vue/multi-word-component-names": ["warn"],
         // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/attribute-hyphenation.md
         "vue/attribute-hyphenation": [
             "error",

package.json

@@ -53,5 +53,6 @@
     "typescript": "^5.1.3",
     "vue-loader": "^17.0.1",
     "webpack": "^5.72.1"
-  }
+  },
+  "type": "module"
 }

src/components/Pagination.vue

@@ -0,0 +1,187 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps({
+    data: {
+        type: Object,
+        default: () => ({}),
+    },
+});
+
+// const nextPageLink = computed(() => {
+//     const url = new URL(document.location);
+//     url.searchParams.set("page", props.data.currentPage + 1);
+//     return url.href;
+//     // return url + '&page=' + (Number(props.data.currentPage) + 1);
+// });
+// const prevPageLink = computed(() => {
+//     const url = new URL(document.location);
+//     url.searchParams.set("page", props.data.currentPage - 1);
+//     return url.href;
+//     // return url + '&page=' + (props.data.currentPage - 1);
+// });
+const toPage = computed(() => {
+    const currentPage = props.data.currentPage;
+    const perPage = props.data.perPage;
+
+    if (props.data.currentPage == props.data.lastPage) {
+        return props.data.total;
+    } else {
+        return currentPage * perPage;
+    }
+});
+const fromPage = computed(() => {
+    const currentPage = props.data.currentPage;
+    const perPage = props.data.perPage;
+    return currentPage * perPage - (perPage - 1);
+});
+
+const emit = defineEmits(["menu-click"]);
+
+const nextClick = () => {
+    const nextPage = props.data.currentPage + 1;
+    emit("menu-click", nextPage);
+};
+const prevClick = () => {
+    const prevPage = props.data.currentPage - 1;
+    emit("menu-click", prevPage);
+};
+</script>
+
+<template>
+    <!-- <nav v-if="data.links.length > 3" -->
+    <nav v-if="data.total > 3" role="navigation" aria-label="Pagination Navigation" class="flex items-center justify-between">
+        <div id="mobileMenu" class="flex justify-between flex-1 sm:hidden">
+            <span
+                v-if="data.currentPage <= 1"
+                aria-disabled="true"
+                class="cursor-not-allowed opacity-50 relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md"
+            >
+                Previous
+            </span>
+            <!-- v-bind:href="data.previousPageUrl" -->
+            <a
+                v-else
+                class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
+                @click="prevClick"
+            >
+                Previous
+            </a>
+
+            <!-- v-bind:href="data.nextPageUrl" -->
+            <a
+                v-if="data.currentPage < data.lastPage"
+                class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
+                @click="nextClick"
+            >
+                Next
+            </a>
+            <span
+                v-else
+                aria-disabled="true"
+                class="cursor-not-allowed opacity-50 relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md"
+            >
+                Next
+            </span>
+        </div>
+
+        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
+            <div id="frontText">
+                <p class="text-sm text-gray-700 leading-5">
+                    Showing
+                    <span class="font-medium">{{ fromPage }}</span>
+                    to
+                    <span class="font-medium">{{ toPage }}</span>
+                    of
+                    <span class="font-medium">{{ data.total }}</span>
+                    results
+                </p>
+            </div>
+
+            <div>
+                <span class="relative z-0 inline-flex shadow-sm rounded-md">
+                    <!-- previous button -->
+                    <span v-if="props.data.currentPage <= 1" aria-disabled="true" aria-label="Previous">
+                        <span
+                            aria-disabled="true"
+                            class="bg-gray-300 cursor-not-allowed opacity-50 relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-l-md leading-5"
+                            aria-hidden="true"
+                        >
+                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                                <path
+                                    fill-rule="evenodd"
+                                    d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+                                    clip-rule="evenodd"
+                                />
+                            </svg>
+                        </span>
+                    </span>
+                    <!-- v-bind:href="prevPageLink" -->
+                    <a
+                        v-else
+                        rel="prev"
+                        class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-l-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150"
+                        aria-label="Previous"
+                        @click="prevClick"
+                    >
+                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                            <path
+                                fill-rule="evenodd"
+                                d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+                                clip-rule="evenodd"
+                            />
+                        </svg>
+                    </a>
+
+                    <!-- <template v-for="(link, key) in data.links">
+                        <template v-if="key > 0 && key < data.lastPage + 1">
+                            <span v-if="!link.active && link.url === null" :key="key" aria-disabled="true">
+                                <span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 cursor-default leading-5">{{ link.label }}</span>
+                            </span>
+
+                            <span v-else-if="link.active" :key="`current-${key}`" aria-current="page">
+                                <span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5">{{ link.label }}</span>
+                            </span>
+
+                            <Link v-else :key="`link-${key}`" :href="link.url" v-html="link.label" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150" aria-label="`Go to page ${link.label}`" />
+                        </template>
+                    </template> -->
+
+                    <!-- next button -->
+                    <!-- v-bind:href="nextPageLink" -->
+                    <a
+                        v-if="props.data.currentPage < props.data.lastPage"
+                        rel="next"
+                        class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150"
+                        aria-label="Next"
+                        @click="nextClick"
+                    >
+                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                            <path
+                                fill-rule="evenodd"
+                                d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                                clip-rule="evenodd"
+                            />
+                        </svg>
+                    </a>
+                    <!-- else disabled link -->
+                    <span v-else aria-disabled="true" aria-label="Next">
+                        <span
+                            aria-disabled="true"
+                            class="bg-gray-300 cursor-not-allowed relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-r-md leading-5"
+                            aria-hidden="true"
+                        >
+                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                                <path
+                                    fill-rule="evenodd"
+                                    d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                                    clip-rule="evenodd"
+                                />
+                            </svg>
+                        </span>
+                    </span>
+                </span>
+            </div>
+        </div>
+    </nav>
+</template>

src/components/datacite/BaseWidget.ts

@@ -4,6 +4,14 @@ import testLogo from "@/assets/datacite/testLogo.vue";
 
 const APIURL = "https://api.datacite.org";
 
+interface DataciteResponse {
+    // [key: string]: any;
+    views: number;
+    downloads: number;
+    citations: number;
+    datacite: number;
+}
+
 @ComponentBase({
     name: "BaseWidget",
     components: {
@@ -19,7 +27,7 @@ export default class BaseWidget extends Vue {
             return ["citations", "views", "downloads"].some((r) => keys.includes(r));
         },
     })
-    dataInput = {};
+    dataInput!: DataciteResponse;
 
     @Prop({
         type: String,
@@ -98,7 +106,7 @@ export default class BaseWidget extends Vue {
         return true;
     }
 
-    private grabMetrics(data: any) {
+    private grabMetrics(data: DataciteResponse) {
         this.views = (this.formatNumbers(data.views) as string) || "";
         this.downloads = (this.formatNumbers(data.downloads) as string) || "";
         this.citations = (this.formatNumbers(data.citations) as string) || "";

src/models/pagination.ts

@@ -1,9 +1,9 @@
 import { Dataset } from "./dataset";
 
-export interface Pagination {
+export interface IPagination {
     total: number;
-    per_page?: number;
+    perPage: number;
-    current_page: number;
+    currentPage: number;
-    last_page?: number;
+    lastPage?: number;
     data: Array<Dataset>;
 }

src/views/dataset-detail.component/dataset-detail.component.ts

@@ -1,6 +1,5 @@
 import { Component, Vue, Prop } from "vue-facing-decorator";
 import { DbDataset } from "@/models/dataset";
-// import { Prop } from "vue-property-decorator";
 import DatasetService from "../../services/dataset.service";
 import { Subscription } from "rxjs";
 import dayjs from "dayjs";
@@ -29,7 +28,7 @@ export default class DatasetDetailComponent extends Vue {
 
     private subscriptions: Array<Subscription> = [];
     public dataset = {} as DbDataset;
-    private error = "";
+    private error: string = "";
     public loaded = false;
     public openAccessLicences: Array<string> = ["CC-BY-4.0", "CC-BY-SA-4.0"];
     public portal = VUE_API + "/api/file/download/";
@@ -93,7 +92,10 @@ export default class DatasetDetailComponent extends Vue {
                 this.dataset = res;
                 this.loaded = true;
             },
-            error: (error: string) => this.errorHandler(error),
+            // error: (error: string) => this.errorHandler(error),
+            error: (error: string) => {
+                this.error = error;
+            },
         });
 
         this.subscriptions.push(newSub);

src/views/search-view/search-view-component.ts

@@ -10,7 +10,8 @@ import { Suggestion, Dataset, SearchType } from "@/models/dataset";
 import { SolrResponse, FacetFields, FacetItem, FacetResults, FacetInstance } from "@/models/headers";
 import { ActiveFilterCategories } from "@/models/solr";
 import { SOLR_HOST, SOLR_CORE } from "@/constants";
-import { Pagination } from "@/models/pagination";
+import { IPagination } from "@/models/pagination";
+import PaginationComponent from "@/components/Pagination.vue";
 
 @Component({
     name: "SearchViewComponent",
@@ -19,6 +20,7 @@ import { Pagination } from "@/models/pagination";
         VsResult,
         FacetCategory,
         ActiveFacetCategory,
+        PaginationComponent,
     },
 })
 export default class SearchViewComponent extends Vue {
@@ -35,11 +37,11 @@ export default class SearchViewComponent extends Vue {
     searchTerm: string | Suggestion = "";
     // activeFilterCategories: Object = {};
     activeFilterCategories: ActiveFilterCategories = new ActiveFilterCategories(); // = new Array<ActiveFilterCategory>();
-    pagination: Pagination = {
+    pagination: IPagination = {
         total: 0,
-        per_page: 2,
+        perPage: 10,
-        current_page: 0,
+        currentPage: 1,
-        // last_page: 0,
+        // lastPage: 0,
         data: [],
     };
     loaded = false;
@@ -84,7 +86,7 @@ export default class SearchViewComponent extends Vue {
     beforeMount(): void {
         // this.rdrAPI = new DatasetService();
         if (this.display != "" && this.type != undefined) {
-            const enumKey = this.getEnumKeyByEnumValue(SearchType, this.type);
+            const enumKey: "Title" | "Author" | "Subject" | null = this.getEnumKeyByEnumValue(SearchType, this.type);
             if (enumKey) {
                 const suggestion = new Suggestion(this.display, SearchType[enumKey]);
                 this.onSearch(suggestion);
@@ -133,9 +135,10 @@ export default class SearchViewComponent extends Vue {
 
         // pagination
         this.pagination["total"] = res.response.numFound;
-        this.pagination["per_page"] = res.responseHeader.params.rows;
+        this.pagination["perPage"] = res.responseHeader.params.rows as number;
-        this.pagination["current_page"] = 1;
+        // this.pagination["currentPage"] = 1;
         this.pagination["data"] = res.response.docs;
+        this.pagination.lastPage = Math.ceil(this.pagination.total / this.pagination.perPage);
 
         // facets
         // const facet_fields = res.facet_counts.facet_fields;
@@ -194,7 +197,20 @@ export default class SearchViewComponent extends Vue {
         // this.loading = false;
     }
 
+    onMenuClick(page: number) {
+        const test = page;
+        console.log(test);
+        this.pagination.currentPage = page;
+        const start = page * this.pagination.perPage - this.pagination.perPage;
+
+        DatasetService.facetedSearch(this.searchTerm, this.activeFilterCategories, this.solr.core, this.solr.host, start.toString()).subscribe(
+            (res: SolrResponse) => this.dataHandler(res),
+            (error: string) => this.errorHandler(error),
+        );
+    }
+
     onFilter(facetItem: FacetItem): void {
+        this.pagination.currentPage = 1;
         // console.log(facetItem.val);
         // if (!this.activeFilterCategories.hasOwnProperty(facetItem.category)) {
         if (!Object.prototype.hasOwnProperty.call(this.activeFilterCategories, facetItem.category)) {
@@ -257,8 +273,8 @@ export default class SearchViewComponent extends Vue {
 
                 // pagination
                 this.pagination["total"] = res.response.numFound;
-                this.pagination["per_page"] = res.responseHeader.params.rows;
+                this.pagination["perPage"] = res.responseHeader.params.rows as number;
-                this.pagination["current_page"] = 1;
+                this.pagination["currentPage"] = 1;
                 this.pagination["data"] = res.response.docs;
 
                 const facet_fields: FacetFields = res.facets;
@@ -294,4 +310,6 @@ export default class SearchViewComponent extends Vue {
             complete: () => console.log("clear facet category completed"),
         });
     }
+
+    // onPaging(page: number): void {}
 }

src/views/search-view/search-view-component.vue

@@ -119,10 +119,14 @@
                     </span>
                 </div>
                 <div class="results">
+                    <PaginationComponent class="mb-5" v-bind:data="pagination" @menu-click="onMenuClick"></PaginationComponent>
                     <!-- Results section -->
                     <vs-result v-bind:datasets="results"></vs-result>
+                    <PaginationComponent class="mt-5" v-bind:data="pagination" @menu-click="onMenuClick"></PaginationComponent>
                 </div>
             </div>
+
+            <!-- <PaginationComponent v-bind:data="pagination"></PaginationComponent> -->
         </div>
 
         <div class="container-fluid" style="padding-top: 3.8em">

tailwind.config.js

@@ -1,6 +1,5 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-    content: [],
     // purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
     content: ["./src/**/*.{edge,js,ts,jsx,tsx,vue}"],
     darkMode: "media", // or 'media' or 'class'

tsconfig.json

@@ -36,6 +36,7 @@
     "tests/**/*.tsx"
   ],
   "exclude": [
-    "node_modules"
+    "node_modules",
+    "dist"
   ]
 }