geolba/tethys.frontend
6
0
Fork 1
Code Issues 7 Pull Requests Packages Projects 3 Releases 1 Wiki Activity

- added src/compoenents/Pagination.vue

Browse Source 
- npm updates
- added "type": "module" inside package.json
- renamed .eslintrc.js, postcss.config.js and vue.config.js
- adapted search-view-component
This commit is contained in:
Kaimbacher 2024-03-19 16:43:25 +01:00
parent 315eabf3bb
commit c6469b00b4
13 changed files with 885 additions and 689 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc.js → .eslintrc.cjs
View File

@ -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",

1309
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

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

0
postcss.config.js → postcss.config.cjs
View File

187
src/components/Pagination.vue Normal file
View File

@ -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>

12
src/components/datacite/BaseWidget.ts
View File

@ -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) || "";

8
src/models/pagination.ts
View File

@ -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>;
}

8
src/views/dataset-detail.component/dataset-detail.component.ts
View File

@ -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);

38
src/views/search-view/search-view-component.ts
View File

@ -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 {}
}

4
src/views/search-view/search-view-component.vue
View File

@ -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">

1
tailwind.config.js
View File

@ -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'

3
tsconfig.json
View File

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

0
vue.config.js → vue.config.cjs
View File