Feature/four 16107 by gproly · Pull Request #6972 · ProcessMaker/processmaker
@@ -1,26 +1,49 @@
<template>
<div class="search-group">
<b-btn
class="btn btn-input"
:title="$t('Search Processes')"
@click="fetch()"
>
<i class="fas fa-search search-icon" />
</b-btn>
<b-form-input
id="search-box"
v-model="filter"
:placeholder="$t('Search Processes')"
@keyup.enter="fetch()"
/>
<div v-if="filter">
<b-btn
class="px-1 btn btn-input"
v-b-tooltip.hover.bottom="$t('Clear Search')"
@click="clearSearch()"
>
<b-icon class="icon-close" icon="x" />
</b-btn>
<div class="search">
<b-input-group class="search-input-group">
<b-input-group-prepend >
<b-button
:title="$t('Search Processes')"
@click="fetch()"
>
<i class="fas fa-search search-icon" />
</b-button>
</b-input-group-prepend>
<b-form-input class="search-box" v-model="filter" :placeholder="$t('Search categories and processes')" @keyup.enter="fetch()" />
<b-input-group-append> <b-button v-if="filter" v-b-tooltip.hover.bottom="$t('Clear Search')" @click="clearSearch()" > <b-icon class="icon-close" icon="x" /> </b-button> </b-input-group-append> </b-input-group> <div v-if="filteredCategories !== null" class="category-button-container"> <template v-if="filteredCategories.length > 0"> <b-button v-for="category in filteredCategories" :key="category.id" class="category-button" variant="light" @click="selectCategory(category)" > {{ category.name }} </b-button> </template> <template v-else> <div class="category-no-result"> {{ $t('No matching categories were found') }} </div> </template> </div> </div> </template> Expand All @@ -31,55 +54,80 @@ export default { data() { return { filter: "", filteredCategories: null, }; }, methods: { fetch() { this.filterPmql(this.filter, true); this.filterCategories(); }, clearSearch() { this.filter = ""; this.filterCategories(); this.fetch(); }, selectCategory(category) { // Do not set the query if we are already on the route if (this.$route.query.categoryId !== category.id) { this.$router.push({name: "index", query: {categoryId: category.id}}); } this.clearSearch(); }, filterCategories() { if (!this.filter) { this.filteredCategories = null; return; } this.filteredCategories = this.$root.categories.filter((category) => { return category.name .toLowerCase() .includes(this.filter.toLowerCase()); }); }, }, }; </script>
<style scoped> .search-group { display: flex; align-items: center; margin-top: 15px; } .btn-input, #search-box { border: none; background-color: #f7f9fb; <style scoped lang="scss"> .search-input-group { margin-top: 10px; .btn-secondary, input { background-color: #E5EDF3; border-color: #E5EDF3; color: #5C5C63; } } #search-box { font-size: 19px;
.category-button { color: #50606D; font-size: 14px; font-style: normal; font-weight: 400; line-height: 32.077px; letter-spacing: -0.38px; border-radius: 6px; border: 1px solid #CDDDEE; text-transform: inherit;
margin-top: 10px; margin-right: 5px; } .form-control:focus { border: none !important; box-shadow: none; } .btn-input { display: flex; justify-content: center; align-items: center; padding: 0px; font-size: 20px; color: #6a7888; border-radius: 4px; width: 24px; height: 24px;
.category-button-container { text-wrap: nowrap; overflow-x: scroll } .icon-close { width: 24px; height: 24px;
.category-no-result { color: #50606D; font-size: 14px; font-style: normal; font-weight: 400; border-radius: 6px; border: 1px solid #CDDDEE;
text-align: center; padding: 10px 0; background: none; margin-top: 10px; } </style>
<b-form-input class="search-box" v-model="filter" :placeholder="$t('Search categories and processes')" @keyup.enter="fetch()" />
<b-input-group-append> <b-button v-if="filter" v-b-tooltip.hover.bottom="$t('Clear Search')" @click="clearSearch()" > <b-icon class="icon-close" icon="x" /> </b-button> </b-input-group-append> </b-input-group> <div v-if="filteredCategories !== null" class="category-button-container"> <template v-if="filteredCategories.length > 0"> <b-button v-for="category in filteredCategories" :key="category.id" class="category-button" variant="light" @click="selectCategory(category)" > {{ category.name }} </b-button> </template> <template v-else> <div class="category-no-result"> {{ $t('No matching categories were found') }} </div> </template> </div> </div> </template> Expand All @@ -31,55 +54,80 @@ export default { data() { return { filter: "", filteredCategories: null, }; }, methods: { fetch() { this.filterPmql(this.filter, true); this.filterCategories(); }, clearSearch() { this.filter = ""; this.filterCategories(); this.fetch(); }, selectCategory(category) { // Do not set the query if we are already on the route if (this.$route.query.categoryId !== category.id) { this.$router.push({name: "index", query: {categoryId: category.id}}); } this.clearSearch(); }, filterCategories() { if (!this.filter) { this.filteredCategories = null; return; } this.filteredCategories = this.$root.categories.filter((category) => { return category.name .toLowerCase() .includes(this.filter.toLowerCase()); }); }, }, }; </script>
<style scoped> .search-group { display: flex; align-items: center; margin-top: 15px; } .btn-input, #search-box { border: none; background-color: #f7f9fb; <style scoped lang="scss"> .search-input-group { margin-top: 10px; .btn-secondary, input { background-color: #E5EDF3; border-color: #E5EDF3; color: #5C5C63; } } #search-box { font-size: 19px;
.category-button { color: #50606D; font-size: 14px; font-style: normal; font-weight: 400; line-height: 32.077px; letter-spacing: -0.38px; border-radius: 6px; border: 1px solid #CDDDEE; text-transform: inherit;
margin-top: 10px; margin-right: 5px; } .form-control:focus { border: none !important; box-shadow: none; } .btn-input { display: flex; justify-content: center; align-items: center; padding: 0px; font-size: 20px; color: #6a7888; border-radius: 4px; width: 24px; height: 24px;
.category-button-container { text-wrap: nowrap; overflow-x: scroll } .icon-close { width: 24px; height: 24px;
.category-no-result { color: #50606D; font-size: 14px; font-style: normal; font-weight: 400; border-radius: 6px; border: 1px solid #CDDDEE;
text-align: center; padding: 10px 0; background: none; margin-top: 10px; } </style>