-
Notifications
You must be signed in to change notification settings - Fork 275
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #6397 from inverse-inc/feature/gui-perf2
perf(admin): various improvements
- Loading branch information
Showing
505 changed files
with
17,246 additions
and
13,689 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
220 changes: 220 additions & 0 deletions
220
html/pfappserver/root/src/components/new/BaseSearch.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,220 @@ | ||
| <template> | ||
| <div> | ||
| <transition name="fade" mode="out-in"> | ||
| <div v-if="advancedMode"> | ||
| <b-form @submit.prevent="onSearchAdvanced" @reset.prevent="onSearchReset"> | ||
| <base-search-input-advanced | ||
| v-model="conditionAdvanced" | ||
| :disabled="disabled || isLoading" | ||
| :fields="fields" | ||
| @search="onSearchAdvanced" | ||
| /> | ||
| <b-container fluid class="text-right mt-3 px-0"> | ||
| <b-button class="ml-1" type="reset" variant="secondary" :disabled="disabled || isLoading">{{ $t('Reset') }}</b-button> | ||
| <base-button-save-search | ||
| :save-search-namespace="`${uuid}Advanced`" | ||
| class="ml-1" | ||
| v-model="conditionAdvanced" | ||
| :disabled="disabled || isLoading" | ||
| @search="onSearchAdvanced" | ||
| /> | ||
| <b-button class="ml-1" variant="outline-primary" @click="advancedMode = false" | ||
| v-b-tooltip.hover.top.d300 :title="$t('Switch to basic search.')"> | ||
| <icon name="search-minus" /> | ||
| </b-button> | ||
| </b-container> | ||
| </b-form> | ||
| </div> | ||
| <div class="d-flex" v-else> | ||
| <base-search-input-basic class="flex-grow-1" | ||
| :save-search-namespace="`${uuid}Basic`" | ||
| v-model="conditionBasic" | ||
| :disabled="disabled || isLoading" | ||
| :placeholder="placeholderBasic" | ||
| @reset="onSearchReset" | ||
| @search="onSearchBasic" | ||
| /> | ||
| <b-button class="ml-1" variant="outline-primary" @click="advancedMode = true" | ||
| v-b-tooltip.hover.top.d300 :title="$t('Switch to advanced search.')"> | ||
| <icon name="search-plus" /> | ||
| </b-button> | ||
| </div> | ||
| </transition> | ||
| <b-row align-h="end"> | ||
| <b-col cols="auto" class="mr-auto my-3"> | ||
| <slot /> | ||
| </b-col> | ||
| <b-col cols="auto" class="my-3 align-self-end d-flex"> | ||
| <base-search-input-limit | ||
| :value="limit" @input="setLimit" | ||
| size="md" | ||
| :limits="limits" | ||
| :disabled="disabled || isLoading" | ||
| /> | ||
| <base-search-input-page | ||
| :value="page" @input="setPage" | ||
| class="ml-3" | ||
| :limit="limit" | ||
| :total-rows="totalRows" | ||
| :disabled="disabled || isLoading" | ||
| /> | ||
| </b-col> | ||
| </b-row> | ||
| </div> | ||
| </template> | ||
| <script> | ||
| import BaseButtonConfirm from './BaseButtonConfirm' | ||
| import BaseButtonSaveSearch from './BaseButtonSaveSearch' | ||
| import BaseInputToggleAdvancedMode from './BaseInputToggleAdvancedMode' | ||
| import BaseSearchInputBasic from './BaseSearchInputBasic' | ||
| import BaseSearchInputAdvanced from './BaseSearchInputAdvanced' | ||
| import BaseSearchInputLimit from './BaseSearchInputLimit' | ||
| import BaseSearchInputPage from './BaseSearchInputPage' | ||
| const components = { | ||
| BaseButtonConfirm, | ||
| BaseButtonSaveSearch, | ||
| BaseInputToggleAdvancedMode, | ||
| BaseSearchInputBasic, | ||
| BaseSearchInputAdvanced, | ||
| BaseSearchInputLimit, | ||
| BaseSearchInputPage | ||
| } | ||
| const props = { | ||
| useSearch: { | ||
| type: Function | ||
| }, | ||
| disabled: { | ||
| type: Boolean | ||
| } | ||
| } | ||
| import { onMounted, ref, toRefs, watch } from '@vue/composition-api' | ||
| import { usePreference } from '@/views/Configuration/_store/preferences' | ||
| const setup = (props) => { | ||
| const { | ||
| useSearch | ||
| } = props | ||
| const search = useSearch() | ||
| const { | ||
| uuid, | ||
| setUp, | ||
| setPage, | ||
| defaultCondition, | ||
| doSearchCondition, | ||
| doSearchString, | ||
| doReset | ||
| } = search | ||
| const { | ||
| columns, | ||
| page, | ||
| limit, | ||
| sortBy, | ||
| sortDesc | ||
| } = toRefs(search) | ||
| const saveSearch = usePreference(`search::${uuid}`) | ||
| watch([columns, page, limit, sortBy, sortDesc], () => { | ||
| Promise.resolve(saveSearch.value).then(_saveSearch => { | ||
| saveSearch.value = { | ||
| ..._saveSearch, | ||
| columns: columns.value.filter(c => c.visible).map(c => c.key), | ||
| page: page.value, | ||
| limit: limit.value, | ||
| sortBy: sortBy.value, | ||
| sortDesc: sortDesc.value | ||
| } | ||
| }) | ||
| }) | ||
| const advancedMode = ref(false) | ||
| const conditionBasic = ref(null) | ||
| const conditionAdvanced = ref(defaultCondition()) // default | ||
| onMounted(() => { | ||
| Promise.resolve(saveSearch.value).then(value => { | ||
| if (value) { | ||
| const { | ||
| conditionAdvanced: _conditionAdvanced, | ||
| conditionBasic: _conditionBasic | ||
| } = value | ||
| setUp(value) | ||
| if (_conditionAdvanced) { | ||
| conditionAdvanced.value = _conditionAdvanced | ||
| advancedMode.value = true | ||
| return doSearchCondition(conditionAdvanced.value) | ||
| } | ||
| if (_conditionBasic) { | ||
| conditionBasic.value = _conditionBasic | ||
| advancedMode.value = false | ||
| return doSearchString(conditionBasic.value) | ||
| } | ||
| } | ||
| doReset() | ||
| }) | ||
| }) | ||
| const onSearchBasic = () => { | ||
| if (conditionBasic.value) { | ||
| doSearchString(conditionBasic.value) | ||
| Promise.resolve(saveSearch.value).then(_saveSearch => { | ||
| const { conditionAdvanced, ...rest } = _saveSearch || {} | ||
| saveSearch.value = { ...rest, conditionBasic: conditionBasic.value } | ||
| }) | ||
| } | ||
| else | ||
| doReset() | ||
| } | ||
| const onSearchAdvanced = () => { | ||
| if (conditionAdvanced.value) { | ||
| doSearchCondition(conditionAdvanced.value) | ||
| Promise.resolve(saveSearch.value).then(_saveSearch => { | ||
| const { conditionBasic, ...rest } = _saveSearch || {} | ||
| saveSearch.value = { ...rest, conditionAdvanced: conditionAdvanced.value } | ||
| }) | ||
| } | ||
| else | ||
| doReset() | ||
| } | ||
| const onSearchReset = () => { | ||
| conditionBasic.value = null | ||
| conditionAdvanced.value = defaultCondition() | ||
| setPage(1) | ||
| Promise.resolve(saveSearch.value).then(_saveSearch => { | ||
| const { conditionAdvanced, conditionBasic, ...rest } = _saveSearch || {} | ||
| saveSearch.value = rest | ||
| }) | ||
| doReset() | ||
| } | ||
| return { | ||
| uuid, | ||
| advancedMode, | ||
| conditionBasic, | ||
| conditionAdvanced, | ||
| onSearchBasic, | ||
| onSearchAdvanced, | ||
| onSearchReset, | ||
| ...toRefs(search), | ||
| columns | ||
| } | ||
| } | ||
| // @vue/component | ||
| export default { | ||
| name: 'base-search', | ||
| inheritAttrs: false, | ||
| components, | ||
| props, | ||
| setup | ||
| } | ||
| </script> |
Oops, something went wrong.