Skip to content
Snippets Groups Projects
Commit dcee56c3 authored by Tobias Kuhnert's avatar Tobias Kuhnert
Browse files

started prototype for search component

parent e2a602e1
No related branches found
No related tags found
2 merge requests!296Merge develop for staging release,!225Draft: Resolve "[Refactoring] Improve vuex store usage"
Hide whitespace changes
Inline Side-by-side
components/platforms/PlatformSearch.vue 0 → 100644
+ 287
− 0
View file @ dcee56c3
<template>
<div>
<ProgressIndicator
v-model="isLoading"
/>
<v-card>
<v-container>
<v-tabs v-model="activeTab">
<v-tab>Search</v-tab>
<v-tab>Extended Search</v-tab>
</v-tabs>
<v-tabs-items
v-model="activeTab"
>
<v-tab-item :eager="true">
<v-row>
<v-col cols="12" md="5">
<v-text-field
v-model="searchedText"
label="Label"
placeholder="Label of configuration"
hint="Please enter at least 3 characters"
@keydown.enter="basicSearch"
/>
</v-col>
<v-col
cols="12"
md="7"
align-self="center"
>
<v-btn
color="primary"
small
@click="basicSearch"
>
Search
</v-btn>
<v-btn
text
small
@click="clearBasicSearch"
>
Clear
</v-btn>
</v-col>
</v-row>
</v-tab-item>
<v-tab-item :eager="true">
<v-row>
<v-col cols="12" md="6">
<v-text-field
v-model="searchedText"
label="Label"
placeholder="Label of configuration"
hint="Please enter at least 3 characters"
@keydown.enter="extendedSearch"
/>
</v-col>
</v-row>
<v-row>
<v-col cols="12" md="3">
<ManufacturerSelect v-model="selectedManufacturers" label="Select a manufacturer" />
</v-col>
</v-row>
<v-row>
<v-col cols="12" md="3">
<StatusSelect v-model="selectedStates" label="Select a status" />
</v-col>
</v-row>
<v-row>
<v-col cols="12" md="3">
<PlatformTypeSelect v-model="selectedPlatformTypes" label="Select a platform type" />
</v-col>
</v-row>
<v-row v-if="$auth.loggedIn">
<v-col cols="12" md="3">
<v-checkbox v-model="selectOnlyOwnPlatforms" label="Only own platforms" />
</v-col>
</v-row>
<v-row>
<v-col
cols="12"
align-self="center"
>
<v-btn
color="primary"
small
@click="extendedSearch"
>
Search
</v-btn>
<v-btn
text
small
@click="clearExtendedSearch"
>
Clear
</v-btn>
</v-col>
</v-row>
</v-tab-item>
</v-tabs-items>
</v-container>
</v-card>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { Manufacturer } from '@/models/Manufacturer'
import { Status } from '@/models/Status'
import { PlatformType } from '@/models/PlatformType'
import ManufacturerSelect from '@/components/ManufacturerSelect.vue'
import StatusSelect from '@/components/StatusSelect.vue'
import PlatformTypeSelect from '@/components/PlatformTypeSelect.vue'
import { PlatformSearchParamsSerializer } from '@/modelUtils/PlatformSearchParams'
import { mapActions, mapGetters, mapState } from 'vuex'
import ProgressIndicator from '@/components/ProgressIndicator.vue'
@Component({
components: { ProgressIndicator, PlatformTypeSelect, StatusSelect, ManufacturerSelect },
computed: {
...mapState('vocabulary',['platformtypes', 'manufacturers', 'equipmentstatus']),
...mapState('platforms',['selectedSearchManufacturers','selectedSearchStates','selectedSearchPlatformTypes','onlyOwnPlatforms','searchText']),
...mapGetters('platforms',['searchParams'])
},
methods:{
...mapActions('vocabulary',['loadEquipmentstatus', 'loadPlatformtypes', 'loadManufacturers']),
...mapActions('platforms',[
'searchPlatformsPaginated',
'setPageNumber',
'setSelectedSearchManufacturers',
'setSelectedSearchStates',
'setSelectedSearchPlatformTypes',
'setOnlyOwnPlatforms',
'setSearchText'
])
}
})
export default class PlatformSearch extends Vue {
private activeTab=0
// private selectedSearchManufacturers: Manufacturer[] = []
// private selectedStates: Status[] = []
// private selectedPlatformTypes: PlatformType[] = []
// private selectOnlyOwnPlatforms: boolean = false
// private searchText: string | null = null
private isLoading = false
get selectedManufacturers(){
return this.selectedSearchManufacturers
}
set selectedManufacturers(newVal){
this.setSelectedSearchManufacturers(newVal)
}
get selectedStates(){
return this.selectedSearchStates
}
set selectedStates(newVal){
this.setSelectedSearchStates(newVal)
}
get selectedPlatformTypes(){
return this.selectedSearchPlatformTypes
}
set selectedPlatformTypes(newVal){
this.setSelectedSearchPlatformTypes(newVal)
}
get selectOnlyOwnPlatforms(){
return this.onlyOwnPlatforms
}
set selectOnlyOwnPlatforms(newVal){
this.setOnlyOwnPlatforms(newVal)
}
get searchedText(){
return this.searchText
}
set searchedText(newVal){
this.setSearchText(newVal)
}
async created(){
try {
this.isLoading = true
await this.loadEquipmentstatus()
await this.loadPlatformtypes()
await this.loadManufacturers()
await this.initSearchQueryParams()
// await this.runInitialSearch()
} catch (e) {
this.$store.commit('snackbar/setError', 'Loading of platforms failed')
} finally {
this.isLoading = false
}
}
// get searchParams () {
// return {
// searchText: this.searchedText,
// manufacturer: this.selectedManufacturers,
// states: this.selectedStates,
// types: this.selectedPlatformTypes,
// onlyOwnPlatforms: this.selectOnlyOwnPlatforms && this.$auth.loggedIn
// }
// }
basicSearch(){
this.selectedManufacturers = []
this.selectedStates = []
this.selectedPlatformTypes = []
this.selectOnlyOwnPlatforms = false
this.$emit('basic-search')
this.runSearch()
}
clearBasicSearch(){
this.searchedText = null
this.$emit('clear-basic-search')
}
extendedSearch(){
this.$emit('extended-search')
this.runSearch()
}
clearExtendedSearch(){
this.clearBasicSearch()
this.selectedManufacturers = []
this.selectedStates = []
this.selectedPlatformTypes = []
this.selectOnlyOwnPlatforms = false
this.$emit('clear-extended-search')
}
async runSearch () {
try {
this.isLoading = true
this.setPageNumber(1) // important for query
this.initUrlQueryParams()
// await this.searchPlatformsPaginated(this.searchParams(this.$auth.loggedIn))
await this.searchPlatformsPaginated()
// this.setPageInUrl() // todo muss das eigentlich rein?
} catch (_error) {
this.$store.commit('snackbar/setError', 'Loading of platforms failed')
} finally {
this.isLoading = false
}
}
initSearchQueryParams (): void {
const searchParamsObject = (new PlatformSearchParamsSerializer({
states: this.equipmentstatus,
platformTypes: this.platformtypes,
manufacturer: this.manufacturers
})).toSearchParams(this.$route.query)
// prefill the form by the serialized search params from the URL
if (searchParamsObject.searchText) {
this.searchedText = searchParamsObject.searchText
}
if (searchParamsObject.onlyOwnPlatforms) {
this.selectOnlyOwnPlatforms = searchParamsObject.onlyOwnPlatforms
}
if (searchParamsObject.manufacturer) {
this.selectedManufacturers = searchParamsObject.manufacturer
}
if (searchParamsObject.types) {
this.selectedPlatformTypes = searchParamsObject.types
}
if (searchParamsObject.states) {
this.selectedStates = searchParamsObject.states
}
}
initUrlQueryParams (): void {
this.$router.push({
query: (new PlatformSearchParamsSerializer()).toQueryParams(this.searchParams(this.$auth.loggedIn)),
hash: this.$route.hash
})
}
}
</script>
<style scoped>
</style>
pages/platforms/index.vue
+ 70
− 185
View file @ dcee56c3
......@@ -30,66 +30,71 @@ permissions and limitations under the Licence.
-->
<template>
<div>
<v-tabs-items
v-model="activeTab"
>
<PlatformsBasicSearch
v-model="searchText"
@search="basicSearch"
@clear="clearBasicSearch"
<div>
<PlatformSearch
/>
<v-tab-item :eager="true">
<v-row>
<v-col cols="12" md="6">
<PlatformsBasicSearchField
v-model="searchText"
@start-search="extendedSearch"
/>
</v-col>
</v-row>
<v-row>
<v-col cols="12" md="3">
<ManufacturerSelect v-model="selectedSearchManufacturers" label="Select a manufacturer" />
</v-col>
</v-row>
<v-row>
<v-col cols="12" md="3">
<StatusSelect v-model="selectedSearchStates" label="Select a status" />
</v-col>
</v-row>
<v-row>
<v-col cols="12" md="3">
<PlatformTypeSelect v-model="selectedSearchPlatformTypes" label="Select a platform type" />
</v-col>
</v-row>
<v-row v-if="$auth.loggedIn">
<v-col cols="12" md="3">
<v-checkbox v-model="onlyOwnPlatforms" label="Only own platforms" />
</v-col>
</v-row>
<v-row>
<v-col
cols="12"
align-self="center"
>
<v-btn
color="primary"
small
@click="extendedSearch"
>
Search
</v-btn>
<v-btn
text
small
@click="clearExtendedSearch"
>
Clear
</v-btn>
</v-col>
</v-row>
</v-tab-item>
</v-tabs-items>
</div>
<!-- <v-tabs-items-->
<!-- v-model="activeTab"-->
<!-- >-->
<!-- <PlatformsBasicSearch-->
<!-- v-model="searchText"-->
<!-- @search="basicSearch"-->
<!-- @clear="clearBasicSearch"-->
<!-- />-->
<!-- <v-tab-item :eager="true">-->
<!-- <v-row>-->
<!-- <v-col cols="12" md="6">-->
<!-- <PlatformsBasicSearchField-->
<!-- v-model="searchText"-->
<!-- @start-search="extendedSearch"-->
<!-- />-->
<!-- </v-col>-->
<!-- </v-row>-->
<!-- <v-row>-->
<!-- <v-col cols="12" md="3">-->
<!-- <ManufacturerSelect v-model="selectedSearchManufacturers" label="Select a manufacturer" />-->
<!-- </v-col>-->
<!-- </v-row>-->
<!-- <v-row>-->
<!-- <v-col cols="12" md="3">-->
<!-- <StatusSelect v-model="selectedSearchStates" label="Select a status" />-->
<!-- </v-col>-->
<!-- </v-row>-->
<!-- <v-row>-->
<!-- <v-col cols="12" md="3">-->
<!-- <PlatformTypeSelect v-model="selectedSearchPlatformTypes" label="Select a platform type" />-->
<!-- </v-col>-->
<!-- </v-row>-->
<!-- <v-row v-if="$auth.loggedIn">-->
<!-- <v-col cols="12" md="3">-->
<!-- <v-checkbox v-model="onlyOwnPlatforms" label="Only own platforms" />-->
<!-- </v-col>-->
<!-- </v-row>-->
<!-- <v-row>-->
<!-- <v-col-->
<!-- cols="12"-->
<!-- align-self="center"-->
<!-- >-->
<!-- <v-btn-->
<!-- color="primary"-->
<!-- small-->
<!-- @click="extendedSearch"-->
<!-- >-->
<!-- Search-->
<!-- </v-btn>-->
<!-- <v-btn-->
<!-- text-->
<!-- small-->
<!-- @click="clearExtendedSearch"-->
<!-- >-->
<!-- Clear-->
<!-- </v-btn>-->
<!-- </v-col>-->
<!-- </v-row>-->
<!-- </v-tab-item>-->
<!-- </v-tabs-items>-->
<v-progress-circular
v-if="loading"
......@@ -162,13 +167,12 @@ permissions and limitations under the Licence.
</v-menu>
</template>
</v-subheader>
<v-pagination
v-model="page"
:disabled="loading"
:length="totalPages"
:total-visible="7"
@input="runSearch"
@input="searchPlatformsPaginated"
/>
<BaseList
:list-items="platforms"
......@@ -196,7 +200,7 @@ permissions and limitations under the Licence.
:disabled="loading"
:length="totalPages"
:total-visible="7"
@input="runSearch"
@input="searchPlatformsPaginated"
/>
</div>
<PlatformDeleteDialog
......@@ -248,9 +252,11 @@ import { Status } from '@/models/Status'
import { QueryParams } from '@/modelUtils/QueryParams'
import { IPlatformSearchParams, PlatformSearchParamsSerializer } from '@/modelUtils/PlatformSearchParams'
import PlatformSearch from '@/components/platforms/PlatformSearch.vue'
@Component({
components: {
PlatformSearch,
PlatformsBasicSearchField,
PlatformsBasicSearch,
PlatformsListItem,
......@@ -263,11 +269,9 @@ import { IPlatformSearchParams, PlatformSearchParamsSerializer } from '@/modelUt
StatusSelect
},
computed: {
...mapState('vocabulary', ['platformtypes', 'manufacturers', 'equipmentstatus']),
...mapState('platforms', ['platforms', 'pageNumber', 'pageSize', 'totalPages'])
},
methods: {
...mapActions('vocabulary', ['loadEquipmentstatus', 'loadPlatformtypes', 'loadManufacturers']),
...mapActions('platforms', ['searchPlatformsPaginated', 'setPageNumber', 'exportAsCsv', 'deletePlatform']),
...mapActions('appbar', ['initPlatformsIndexAppBar', 'setDefaults'])
}
......@@ -276,21 +280,11 @@ export default class SearchPlatformsPage extends Vue {
private loading: boolean = true
private processing: boolean = false
private selectedSearchManufacturers: Manufacturer[] = []
private selectedSearchStates: Status[] = []
private selectedSearchPlatformTypes: PlatformType[] = []
private onlyOwnPlatforms: boolean = false
private searchText: string | null = null
private showDeleteDialog: boolean = false
private platformToDelete: Platform | null = null
// vuex definition for typescript check
loadEquipmentstatus!: () => void
loadPlatformtypes!: () => void
loadManufacturers!: () => void
initPlatformsIndexAppBar!: () => void
setDefaults!: () => void
pageNumber!: number
......@@ -306,13 +300,10 @@ export default class SearchPlatformsPage extends Vue {
async created () {
try {
this.loading = true
await this.loadEquipmentstatus()
await this.loadPlatformtypes()
await this.loadManufacturers()
await this.initPlatformsIndexAppBar()
await this.initSearchQueryParams()
await this.runInitialSearch()
await this.searchPlatformsPaginated()
} catch (e) {
console.log('e',e);
this.$store.commit('snackbar/setError', 'Loading of platforms failed')
} finally {
this.loading = false
......@@ -332,80 +323,6 @@ export default class SearchPlatformsPage extends Vue {
this.setPageInUrl(false)
}
get activeTab (): number | null {
return this.$store.state.appbar.activeTab
}
set activeTab (tab: number | null) {
this.$store.commit('appbar/setActiveTab', tab)
}
get searchParams () {
return {
searchText: this.searchText,
manufacturer: this.selectedSearchManufacturers,
states: this.selectedSearchStates,
types: this.selectedSearchPlatformTypes,
onlyOwnPlatforms: this.onlyOwnPlatforms && this.$auth.loggedIn
}
}
isExtendedSearch (): boolean {
return this.onlyOwnPlatforms === true ||
!!this.selectedSearchStates.length ||
!!this.selectedSearchPlatformTypes.length ||
!!this.selectedSearchManufacturers.length
}
async runInitialSearch (): Promise<void> {
this.activeTab = this.isExtendedSearch() ? 1 : 0
this.page = this.getPageFromUrl()
await this.runSearch()
}
basicSearch () {
this.selectedSearchManufacturers = []
this.selectedSearchStates = []
this.selectedSearchPlatformTypes = []
this.onlyOwnPlatforms = false
this.page = 1// Important to set page to one otherwise it's possible that you don't anything
this.runSearch()
}
clearBasicSearch () {
this.searchText = null
this.initUrlQueryParams()
}
extendedSearch () {
this.page = 1// Important to set page to one otherwise it's possible that you don't anything
this.runSearch()
}
clearExtendedSearch () {
this.clearBasicSearch()
this.selectedSearchManufacturers = []
this.selectedSearchStates = []
this.selectedSearchPlatformTypes = []
this.onlyOwnPlatforms = false
this.initUrlQueryParams()
}
async runSearch () {
try {
this.loading = true
this.initUrlQueryParams()
await this.searchPlatformsPaginated(this.searchParams)
this.setPageInUrl()
} catch (_error) {
this.$store.commit('snackbar/setError', 'Loading of platforms failed')
} finally {
this.loading = false
}
}
async exportCsv () {
if (this.platforms.length > 0) {
......@@ -448,38 +365,6 @@ export default class SearchPlatformsPage extends Vue {
}
}
initSearchQueryParams (): void {
const searchParamsObject = (new PlatformSearchParamsSerializer({
states: this.equipmentstatus,
platformTypes: this.platformtypes,
manufacturer: this.manufacturers
})).toSearchParams(this.$route.query)
// prefill the form by the serialized search params from the URL
if (searchParamsObject.searchText) {
this.searchText = searchParamsObject.searchText
}
if (searchParamsObject.onlyOwnPlatforms) {
this.onlyOwnPlatforms = searchParamsObject.onlyOwnPlatforms
}
if (searchParamsObject.manufacturer) {
this.selectedSearchManufacturers = searchParamsObject.manufacturer
}
if (searchParamsObject.types) {
this.selectedSearchPlatformTypes = searchParamsObject.types
}
if (searchParamsObject.states) {
this.selectedSearchStates = searchParamsObject.states
}
}
initUrlQueryParams (): void {
this.$router.push({
query: (new PlatformSearchParamsSerializer()).toQueryParams(this.searchParams),
hash: this.$route.hash
})
}
getPageFromUrl (): number {
if ('page' in this.$route.query && typeof this.$route.query.page === 'string') {
return parseInt(this.$route.query.page) ?? 1
......
store/appbar.ts
+ 5
− 4
View file @ dcee56c3
......@@ -181,10 +181,11 @@ const actions = {
},
initPlatformsIndexAppBar ({ commit }: {commit: Commit}) {
commit('setTitle', 'Platforms')
commit('setTabs', [
'Search',
'Extended Search'
])
// commit('setTabs', [ //todo remove
// 'Search',
// 'Extended Search'
// ])
commit('setTabs', [])
commit('setCancelBtnHidden', true)
commit('setSaveBtnHidden', true)
},
......
store/platforms.ts
+ 69
− 6
View file @ dcee56c3
......@@ -30,7 +30,7 @@
* implied. See the Licence for the specific language governing
* permissions and limitations under the Licence.
*/
import { Commit, Dispatch } from 'vuex'
import { Commit, Dispatch, Getter } from 'vuex'
import { Platform } from '@/models/Platform'
import { IPlatformSearchParams } from '@/modelUtils/PlatformSearchParams'
import { Contact } from '@/models/Contact'
......@@ -44,6 +44,9 @@ import { PlatformMountActionWrapper } from '@/viewmodels/PlatformMountActionWrap
import { PlatformUnmountActionWrapper } from '@/viewmodels/PlatformUnmountActionWrapper'
import { IDateCompareable } from '@/modelUtils/Compareables'
import { Api } from '@/services/Api'
import { Manufacturer } from '@/models/Manufacturer'
import { Status } from '@/models/Status'
import { PlatformType } from '@/models/PlatformType'
const KIND_OF_ACTION_TYPE_SOFTWARE_UPDATE = 'software_update'
const KIND_OF_ACTION_TYPE_GENERIC_PLATFORM_ACTION = 'generic_platform_action'
......@@ -67,6 +70,11 @@ interface platformsState {
platformMountActions: PlatformMountActionWrapper[],
platformUnmountActions: PlatformUnmountActionWrapper[],
chosenKindOfPlatformAction: IOptionsForActionType | null,
selectedSearchManufacturers:Manufacturer[],
selectedSearchStates: Status[],
selectedSearchPlatformTypes:PlatformType[],
onlyOwnPlatforms: boolean,
searchText: string | null
pageNumber: number,
pageSize: number,
totalPages: number
......@@ -85,12 +93,28 @@ const state = () => ({
chosenKindOfPlatformAction: null,
platformGenericAction: null,
platformSoftwareUpdateAction: null,
selectedSearchManufacturers:[],
selectedSearchStates:[],
selectedSearchPlatformTypes:[],
onlyOwnPlatforms: false,
searchText: null,
totalPages: 1,
pageNumber: 1,
pageSize: 20
pageSize: 1
// pageSize: 20
})
const getters = {
searchParams: (state: platformsState) => (isLoggedIn:boolean)=>{
return {
searchText: state.searchText,
manufacturer: state.selectedSearchManufacturers,
states: state.selectedSearchStates,
types: state.selectedSearchPlatformTypes,
onlyOwnPlatforms: state.onlyOwnPlatforms && isLoggedIn
}
},
actions: (state: platformsState) => {
let actions = [
...state.platformGenericActions,
......@@ -114,14 +138,20 @@ const actions: {
} = {
async searchPlatformsPaginated ({
commit,
state
}: { commit: Commit, state: platformsState }, searchParams: IPlatformSearchParams) {
state,
getters
}: { commit: Commit, state: platformsState, getters: any }) {
let searchParams = getters.searchParams(this.$auth.loggedIn)
console.log('searchParams',searchParams);
let email = null
if (searchParams.onlyOwnPlatforms) {
// @ts-ignore
email = this.$auth.user!.email as string
}
// @ts-ignore
const { elements, totalCount } = await this.$api.platforms
.setSearchText(searchParams.searchText)
......@@ -293,7 +323,23 @@ const actions: {
},
setChosenKindOfPlatformAction ({ commit }: { commit: Commit }, newval: IOptionsForActionType | null) {
commit('setChosenKindOfPlatformAction', newval)
}
},
setSelectedSearchManufacturers({ commit }: { commit: Commit },selectedSearchManufacturers:Manufacturer[]){
commit('setSelectedSearchManufacturers',selectedSearchManufacturers)
},
setSelectedSearchStates({ commit }: { commit: Commit },selectedSearchStates:Status[]){
commit('setSelectedSearchStates',selectedSearchStates)
},
setSelectedSearchPlatformTypes({ commit }: { commit: Commit },selectedSearchPlatformTypes:PlatformType[]){
commit('setSelectedSearchPlatformTypes',selectedSearchPlatformTypes)
},
setOnlyOwnPlatforms({ commit }: { commit: Commit },onlyOwnPlatforms:boolean){
commit('setOnlyOwnPlatforms',onlyOwnPlatforms)
},
setSearchText({ commit }: { commit: Commit },searchText:string|null){
commit('setSearchText',searchText)
},
}
const mutations = {
......@@ -338,7 +384,24 @@ const mutations = {
},
setPlatformSoftwareUpdateAction (state: platformsState, action: SoftwareUpdateAction) {
state.platformSoftwareUpdateAction = action
}
},
setSelectedSearchManufacturers(state:platformsState,selectedSearchManufacturers:Manufacturer[]){
state.selectedSearchManufacturers=selectedSearchManufacturers
},
setSelectedSearchStates(state:platformsState,selectedSearchStates:Status[]){
state.selectedSearchStates=selectedSearchStates
},
setSelectedSearchPlatformTypes(state:platformsState,selectedSearchPlatformTypes:PlatformType[]){
state.selectedSearchPlatformTypes=selectedSearchPlatformTypes
},
setOnlyOwnPlatforms(state:platformsState,onlyOwnPlatforms:boolean){
state.onlyOwnPlatforms=onlyOwnPlatforms
},
setSearchText(state:platformsState,searchText:string|null){
state.searchText=searchText
},
}
export default {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

A HIFIS Service | Privacy | Imprint | Support | Documentation | Changelog