- 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
2024-03-19 16:43:25 +01:00 · 2024-03-19 16:43:25 +01:00 · c6469b00b4
commit c6469b00b4
parent 315eabf3bb
13 changed files with 885 additions and 689 deletions
--- a/.eslintrc.cjs
+++ b/.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",
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -53,5 +53,6 @@
    "typescript": "^5.1.3",
    "vue-loader": "^17.0.1",
    "webpack": "^5.72.1"
-  }
+  },
+  "type": "module"
 }
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
--- a/src/components/Pagination.vue
+++ b/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>
--- a/src/components/datacite/BaseWidget.ts
+++ b/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) || "";
--- a/src/models/pagination.ts
+++ b/src/models/pagination.ts
@ -1,9 +1,9 @@
 import { Dataset } from "./dataset";

-export interface Pagination {
+export interface IPagination {
    total: number;
-    per_page?: number;
-    current_page: number;
-    last_page?: number;
+    perPage: number;
+    currentPage: number;
+    lastPage?: number;
    data: Array<Dataset>;
 }
--- a/src/views/dataset-detail.component/dataset-detail.component.ts
+++ b/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);
--- a/src/views/search-view/search-view-component.ts
+++ b/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,
-        current_page: 0,
-        // last_page: 0,
+        perPage: 10,
+        currentPage: 1,
+        // 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["current_page"] = 1;
+        this.pagination["perPage"] = res.responseHeader.params.rows as number;
+        // 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["current_page"] = 1;
+                this.pagination["perPage"] = res.responseHeader.params.rows as number;
+                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 {}
 }
--- a/src/views/search-view/search-view-component.vue
+++ b/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">
--- a/tailwind.config.js
+++ b/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'
--- a/tsconfig.json
+++ b/tsconfig.json
@ -36,6 +36,7 @@
    "tests/**/*.tsx"
  ],
  "exclude": [
-    "node_modules"
+    "node_modules",
+    "dist"
  ]
 }
--- a/vue.config.cjs
+++ b/vue.config.cjs