diff --git a/components/platforms/PlatformSearch.vue b/components/platforms/PlatformSearch.vue new file mode 100644 index 0000000000000000000000000000000000000000..d7f7622ff0ce7a1c99f38d124f3f25caaab4bee5 --- /dev/null +++ b/components/platforms/PlatformSearch.vue @@ -0,0 +1,287 @@ +<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> diff --git a/pages/platforms/index.vue b/pages/platforms/index.vue index fd4e53e105e9a0391963782088909e528fc68ca8..16489a6e38f0a40488041ca0e10e2dd71db5bec4 100644 --- a/pages/platforms/index.vue +++ b/pages/platforms/index.vue @@ -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 diff --git a/store/appbar.ts b/store/appbar.ts index 9bc9cccfc600c547bd143a24cf5d33ca8fb78e63..eaa40f3cb464f3b31259f65c69aa727aebedfd3f 100644 --- a/store/appbar.ts +++ b/store/appbar.ts @@ -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) }, diff --git a/store/platforms.ts b/store/platforms.ts index 1f1b065b979415e6f4962a3db39f9f81e77c2022..c44728500c6aceee93c263829c0f853aa0fae4ef 100644 --- a/store/platforms.ts +++ b/store/platforms.ts @@ -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 {