Skip to content
Snippets Groups Projects
Commit ccb66dd1 authored by Petar Hristov's avatar Petar Hristov :speech_balloon:
Browse files

Fix: Minor changes (coscine/issues#1962)

parent 2a40ed73
No related branches found
No related tags found
1 merge request!25Issue/1962 search app ui2
Pipeline #663501 passed
Stage: build
Expand all Hide whitespace changes
Inline Side-by-side
src/modules/search/assets/dummy_data.ts
+ 4
− 4
View file @ ccb66dd1
import { DataEntry, DataType } from "../types";
import { DummyDataEntry, DummyDataType } from "../types";
export const mainViewData: Array<DataType> = [
export const mainViewData: Array<DummyDataType> = [
{
header: [
{
......@@ -109,7 +109,7 @@ export const mainViewData: Array<DataType> = [
type: "Resource",
value: "SomeExampleResourceName",
archived: true,
} as DataEntry,
} as DummyDataEntry,
],
body: [
{
......@@ -162,7 +162,7 @@ export const mainViewData: Array<DataType> = [
type: "Resource",
value: "Epic Project Resource",
archived: true,
} as DataEntry,
} as DummyDataEntry,
],
body: [
{
......
src/modules/search/pages/Search.vue
+ 184
− 179
View file @ ccb66dd1
<template>
<div class="search">
<b-container>
<CoscineHeadline :headline="$parent.$t('page.search.title')" />
<b-row id="mainRow">
<!-- Sidebar -->
<Sidebar />
<!-- Sidebar -->
<CoscineHeadline :headline="$parent.$t('page.search.title')" />
<b-col ref="rightCol" sm="10" align-self="end" style="height: 100%">
<!-- Search Bar Fields -->
<b-row id="searchBarContainer" align-content="center">
<b-col id="searchField" align-self="start" class="pl-0">
<b-form-input
v-model="searchText"
:placeholder="$parent.$t('page.search.search')"
></b-form-input>
</b-col>
<b-col sm="2" id="selectProjCol" align-self="center" class="pl-0">
<b-form-select v-model="selectProjValue">
<template #first>
<b-form-select-option :value="null" disabled
>{{ $parent.$t("page.search.allProjects") }}
</b-form-select-option>
</template>
</b-form-select>
</b-col>
<b-col sm="2" id="selectResCol" align-self="center" class="pl-0">
<b-form-select v-model="selectResValue">
<template #first>
<b-form-select-option :value="null" disabled
>{{ $parent.$t("page.search.allResources") }}
</b-form-select-option>
</template>
</b-form-select>
</b-col>
<b-col sm="0" align-self="center" class="text-right p-0">
<b-button-group>
<b-button id="searchButton" variant="primary">
{{ $parent.$t("page.search.search") }}
</b-button>
<b-dropdown
id="searchDropdown"
right
size="sm"
variant="primary"
>
<b-dropdown-item>{{ $parent.$t("page.search.buttonSearch.Item1") }}</b-dropdown-item>
<b-dropdown-item>{{ $parent.$t("page.search.buttonSearch.Item2") }}</b-dropdown-item>
</b-dropdown>
</b-button-group>
</b-col>
</b-row>
<!-- Search Bar Fields -->
<b-row id="mainRow">
<!-- Sidebar -->
<Sidebar />
<b-col ref="rightCol" sm="10" align-self="end" style="height: 100%">
<!-- Search Bar Fields -->
<b-row id="searchBarContainer" align-content="center">
<b-col id="searchField" align-self="start" class="pl-0">
<b-form-input
v-model="searchText"
:placeholder="$parent.$t('page.search.search')"
></b-form-input>
</b-col>
<b-col sm="2" id="selectProjCol" align-self="center" class="pl-0">
<b-form-select v-model="selectProjValue">
<template #first>
<b-form-select-option :value="null" disabled
>{{ $parent.$t("page.search.allProjects") }}
</b-form-select-option>
</template>
</b-form-select>
</b-col>
<b-col sm="2" id="selectResCol" align-self="center" class="pl-0">
<b-form-select v-model="selectResValue">
<template #first>
<b-form-select-option :value="null" disabled
>{{ $parent.$t("page.search.allResources") }}
</b-form-select-option>
</template>
</b-form-select>
</b-col>
<b-col sm="0" align-self="center" class="text-right p-0">
<b-button-group>
<b-button id="searchButton" variant="primary">
{{ $parent.$t("page.search.search") }}
</b-button>
<b-dropdown id="searchDropdown" right size="sm" variant="primary">
<b-dropdown-item>{{
$parent.$t("page.search.buttonSearch.Item1")
}}</b-dropdown-item>
<b-dropdown-item>{{
$parent.$t("page.search.buttonSearch.Item2")
}}</b-dropdown-item>
</b-dropdown>
</b-button-group>
</b-col>
</b-row>
<!-- Filter Tags -->
<b-row
id="filterTagsContainer"
align-self="center"
class="mt-2 mb-2 rounded bg-light"
style="min-height: 37px"
>
<b-col align-self="center" class="pl-0">
<b-form-tags
v-model="filterTags"
no-outer-focus
class="border-0 bg-transparent"
>
<template v-slot="{ tags, removeTag }">
<div>
<b-form-tag
v-for="tag in tags"
@remove="removeTag(tag)"
:key="tag"
:title="tag"
variant="primary"
pill
class="mr-1"
>{{ tag }}
</b-form-tag>
</div>
</template>
</b-form-tags>
</b-col>
<b-col align-self="center" sm="1" class="text-right">
<b-button id="filterTagsButton" size="sm" variant="light">
<b-icon icon="funnel-fill" />
</b-button>
</b-col>
</b-row>
<!-- Filter Tags -->
<b-row
id="filterTagsContainer"
align-self="center"
class="mt-2 mb-2 rounded bg-light"
style="min-height: 37px"
>
<b-col align-self="center" class="pl-0">
<b-form-tags
v-model="filterTags"
no-outer-focus
class="border-0 bg-transparent"
<!-- Results View -->
<b-row id="resultsViewContainer" class="flex-grow-1">
<b-card style="width: 100%">
<b-skeleton-wrapper :loading="resultsViewLoading">
<template #loading>
<div
v-for="(entry, index) in 3"
:key="index"
class="p-2 border-top"
style="height: 105px"
>
<b-skeleton width="30%" class="m-2 mb-3"></b-skeleton>
<b-skeleton width="95%" class="m-2"></b-skeleton>
<b-skeleton width="40%" class="m-2"></b-skeleton>
</div>
</template>
<b-table
id="resultsView"
:items="resultsViewData"
:fields="resultsViewFields"
:per-page="paginationPerPage"
:current-page="paginationCurrentPage"
thead-class="d-none"
style="min-height: 100%"
small
hover
sticky-header
show-empty
>
<template v-slot="{ tags, removeTag }">
<div>
<b-form-tag
v-for="tag in tags"
@remove="removeTag(tag)"
:key="tag"
:title="tag"
variant="primary"
pill
class="mr-1"
>{{ tag }}
</b-form-tag>
</div>
<template #cell(header)="data">
<Result :result="data.item" />
</template>
<template #empty>
<h6 class="text-center">
{{ $parent.$t("page.search.emptySearch") }}
</h6>
</template>
</b-form-tags>
</b-col>
<b-col align-self="center" sm="1" class="text-right">
<b-button id="filterTagsButton" size="sm" variant="light">
<BIconFunnelFill class="icon-tiny" />
</b-button>
</b-col>
</b-row>
<!-- Filter Tags -->
<!-- Results View -->
<b-row id="resultsViewContainer" class="flex-grow-1">
<b-card style="width: 100%">
<b-skeleton-wrapper :loading="resultsViewLoading">
<template #loading>
<template #custom-foot="foot">
<!-- Show footer if there are results and only on the last page -->
<div
v-for="(entry, index) in 3"
:key="index"
class="p-2 border-top"
style="height: 105px"
v-if="
foot.items.length > 0 &&
paginationCurrentPage ===
Math.ceil(paginationTotalRows / paginationPerPage)
"
class="p-2 text-center text-muted border-top"
>
<b-skeleton width="30%" class="m-2 mb-3"></b-skeleton>
<b-skeleton width="95%" class="m-2"></b-skeleton>
<b-skeleton width="40%" class="m-2"></b-skeleton>
{{ $parent.$t("page.search.endSearchResults") }}
</div>
</template>
<b-table
id="resultsView"
:items="resultsViewData"
:fields="resultsViewFields"
:per-page="paginationPerPage"
:current-page="paginationCurrentPage"
thead-class="d-none"
style="min-height: 100%"
small
hover
sticky-header
show-empty
>
<template #cell(header)="data">
<Result :result="data.item" />
</template>
<template #empty>
<h6 class="text-center">
{{ $parent.$t("page.search.emptySearch") }}
</h6>
</template>
<template #custom-foot="foot">
<!-- Show footer if there are results and only on the last page -->
<div
v-if="
foot.items.length > 0 &&
paginationCurrentPage ===
Math.ceil(paginationTotalRows / paginationPerPage)
"
class="p-2 text-center text-muted border-top"
>
{{ $parent.$t("page.search.endSearchResults") }}
</div>
</template>
</b-table>
</b-skeleton-wrapper>
</b-card>
</b-row>
<!-- Results View -->
</b-col>
</b-row>
</b-table>
</b-skeleton-wrapper>
</b-card>
</b-row>
</b-col>
</b-row>
<!-- Pagination -->
<b-row class="mt-1 mb-1 text-right" align-v="center">
<b-col align-self="center" class="p-0" />
<b-col align-self="center" class="p-0">
<b-pagination
id="pagination"
v-model="paginationCurrentPage"
:total-rows="paginationTotalRows"
:per-page="paginationPerPage"
aria-controls="resultsView"
align="center"
></b-pagination>
</b-col>
<b-col align-self="center" class="p-0">
<b-form-select
v-model="paginationPerPage"
:options="paginationPerPageOptions"
style="max-width: 5rem"
></b-form-select>
</b-col>
</b-row>
<!-- Pagination -->
</b-container>
<!-- Pagination -->
<b-row class="mt-1 mb-1 text-right" align-v="center">
<b-col align-self="center" class="p-0" />
<b-col align-self="center" class="p-0">
<b-pagination
id="pagination"
v-model="paginationCurrentPage"
:total-rows="paginationTotalRows"
:per-page="paginationPerPage"
aria-controls="resultsView"
align="center"
></b-pagination>
</b-col>
<b-col align-self="center" class="p-0">
<b-form-select
v-model="paginationPerPage"
:options="paginationPerPageOptions"
style="max-width: 5rem"
></b-form-select>
</b-col>
</b-row>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue-demi";
import CoscineHeadline from "@/components/CoscineHeadline.vue";
import Result from "../components/Result.vue";
import Sidebar from "../components/Sidebar.vue";
import {useMainStore} from "@/store/index";
import {useSearchStore} from "../store";
import { SearchResult } from "@coscine/api-client/dist/types/Coscine.Api.Search";
import Result from "./components/Result.vue";
import Sidebar from "./components/Sidebar.vue";
// import the store for current module
import { useSearchStore } from "../store";
// import the main store
import { useMainStore } from "@/store/index";
import type { DummyDataType } from "../types";
export default defineComponent({
setup() {
const mainStore = useMainStore();
const searchStore = useSearchStore();
return { mainStore, searchStore };
},
......@@ -211,27 +208,29 @@ export default defineComponent({
},
components: {
CoscineHeadline,
Result,
Sidebar,
},
computed: {
resultsViewData(): SearchResult | null {
resultsViewData(): DummyDataType[] | null {
return this.searchStore.searchResults;
}
},
},
watch: {
resultsViewData() {
this.paginationTotalRows = this.resultsViewData.length;
}
if (this.resultsViewData) {
this.paginationTotalRows = this.resultsViewData.length;
}
},
},
mounted() {
created() {
this.showResults();
},
methods: {
/* --- get search query to show results ---
getSearchQuery() {
const urlSearchParams = new URLSearchParams(window.location.search);
......@@ -250,15 +249,21 @@ export default defineComponent({
<style scoped>
#mainRow {
/* this style stretches the page vertically to fit the screen */
height: calc(100vh - 100px);
/* this style stretches the page vertically to fit the screen:-moz-animation:
- container-fluid <-> top = 59px
- mainRow <-> container-fluid = 53px
- mainRow <-> bottom = 62px
*/
height: calc(100vh - 59px - 53px - 62px);
}
#pagination {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
#resultsViewContainer {
/* this style stretches the results table vertically */
/* this style stretches the results table vertically
- resultsViewContainer <-> mainRow = 91px
*/
height: calc(100% - 91px);
}
.card-body {
......
src/modules/search/components/Result.vue → src/modules/search/pages/components/Result.vue
+ 6
− 3
View file @ ccb66dd1
......@@ -33,10 +33,13 @@
<script lang="ts">
import { defineComponent, PropType } from "vue-demi";
import { DummyDataType } from "../../types";
// import the store for current module
import { useSearchStore } from "../../store";
// import the main store
import { useMainStore } from "@/store/index";
import { useSearchStore } from "../store";
import { DataType } from "../types";
export default defineComponent({
setup() {
......@@ -50,7 +53,7 @@ export default defineComponent({
props: {
result: {
required: true,
type: Object as PropType<DataType>,
type: Object as PropType<DummyDataType>,
},
},
methods: {},
......
src/modules/search/components/Sidebar.vue → src/modules/search/pages/components/Sidebar.vue
+ 4
− 1
View file @ ccb66dd1
......@@ -12,8 +12,11 @@
<script lang="ts">
import { defineComponent } from "vue-demi";
// import the store for current module
import { useSearchStore } from "../../store";
// import the main store
import { useMainStore } from "@/store/index";
import { useSearchStore } from "../store";
export default defineComponent({
setup() {
......
src/modules/search/store.ts
+ 10
− 3
View file @ ccb66dd1
......@@ -2,6 +2,8 @@ import { defineStore } from "pinia";
import { SearchState } from "./types";
import { mainViewData } from "./assets/dummy_data";
import type { DummyDataType } from "./types";
/*
Store variable name is "this.<id>Store"
id: "search" --> this.searchStore
......@@ -15,7 +17,7 @@ export const useSearchStore = defineStore({
--------------------------------------------------------------------------------------
*/
state: (): SearchState => ({
searchResults: {},
searchResults: null,
}),
/*
......@@ -27,7 +29,11 @@ export const useSearchStore = defineStore({
In a component use as e.g.:
:label = "this.searchStore.<getter_name>;
*/
getters: {},
getters: {
retrieveDummyResults(): DummyDataType[] {
return mainViewData;
}
},
/*
--------------------------------------------------------------------------------------
ACTIONS
......@@ -40,7 +46,8 @@ export const useSearchStore = defineStore({
*/
actions: {
retrieveSearchResults() {
this.searchResults = mainViewData;
// Currently using only Dummy Data
this.searchResults = this.retrieveDummyResults;
}
},
});
......
src/modules/search/types.ts
+ 10
− 4
View file @ ccb66dd1
import type { SearchResult } from "@coscine/api-client/dist/types/Coscine.Api.Search";
export interface SearchState {
/*
--------------------------------------------------------------------------------------
STATE TYPE DEFINITION
--------------------------------------------------------------------------------------
*/
searchResults: DummyDataType[] | null, // Fix type for real API use
}
export declare type DataType = {
header: Array<DataEntry>;
body: Array<DataEntry>;
/* DELETE AFTER DATA IS ACTUALLY FETCHED OVER THE API */
export type DummyDataType = {
header: Array<DummyDataEntry>;
body: Array<DummyDataEntry>;
};
export declare type DataEntry = {
/* DELETE AFTER DATA IS ACTUALLY FETCHED OVER THE API */
export type DummyDataEntry = {
type: string;
value: string;
};
yarn.lock-workspace
+ 1158
− 1101
View file @ ccb66dd1
This diff is collapsed.
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment