fernando/luos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

PMCORE-3810:Improve trays search area to increase intuitiveness

Browse Source
This commit is contained in:
Fabio Guachalla
2022-08-10 10:54:49 -04:00
parent 7aeb33e475
commit 4a7d74686f
4 changed files with 103 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
resources/assets/js/components/search/AdvancedFilter.vue
View File

@@ -100,12 +100,13 @@
<b-row> <b-row>
<b-col> <b-col>
<div class="d-flex flex-row"> <div class="d-flex flex-row">
<div class="tag row"> <div class="input-group-tag" v-if="filters && filters.length > 0">
<div class="col-11"> <div class="col-11">
<b-form-tags <b-form-tags
input-id="tags-pills" input-id="tags-pills"
v-model="searchTags" v-model="searchTags"
size="sm" size="sm"
:disabled="true"
> >
<template v-slot="{ tags, tagVariant, removeTag }"> <template v-slot="{ tags, tagVariant, removeTag }">
<div <div
@@ -687,11 +688,16 @@ export default {
.bv-example-row-flex-cols .row { .bv-example-row-flex-cols .row {
min-height: 10rem; min-height: 10rem;
} }
.b-form-tags {
border: none;
}
.input-group-tag {
position: relative;
display: flex;
flex-wrap: nowrap;
align-items: stretch;
}
</style> </style>
},
};
</script>
<style lang="scss"> <style lang="scss">
.bv-example-row .row + .row { .bv-example-row .row + .row {
margin-top: 1rem; margin-top: 1rem;

20
resources/assets/js/components/search/CasesFilter.vue
View File

@@ -42,7 +42,7 @@
<i :class="icon"></i> <i :class="icon"></i>
</div> </div>
<b-input-group class="w-75 p-1"> <b-input-group class="w-75 p-1">
<div class="input-group mb-3"> <div class="input-group-tag mb-3">
<div class="input-group-prepend"> <div class="input-group-prepend">
<span <span
class="input-group-text bg-primary-pm text-white" class="input-group-text bg-primary-pm text-white"
@@ -52,7 +52,12 @@
<b-icon icon="search"></b-icon <b-icon icon="search"></b-icon
></span> ></span>
</div> </div>
<b-form-tags input-id="tags-pills" v-model="searchTags"> <b-form-tags
input-id="tags-pills"
v-model="searchTags"
:disabled="true"
v-if="filters.length > 0"
>
<template v-slot="{ tags, tagVariant, removeTag }"> <template v-slot="{ tags, tagVariant, removeTag }">
<div class="d-inline-block" style="font-size: 1rem"> <div class="d-inline-block" style="font-size: 1rem">
<b-form-tag <b-form-tag
@@ -557,3 +562,14 @@ export default {
line-height: 40px; line-height: 40px;
} }
</style> </style>
<style scoped>
.b-form-tags {
border: none;
}
.input-group-tag {
position: relative;
display: flex;
flex-wrap: nowrap;
align-items: stretch;
}
</style>

22
resources/assets/js/components/search/CustomFilter.vue
View File

@@ -35,7 +35,7 @@
<i :class="icon"></i> <i :class="icon"></i>
</div> </div>
<b-input-group class="w-75 p-1"> <b-input-group class="w-75 p-1">
<div class="input-group mb-3"> <div class="input-group-tag mb-3">
<div class="input-group-prepend"> <div class="input-group-prepend">
<span <span
class="input-group-text bg-primary-pm text-white" class="input-group-text bg-primary-pm text-white"
@@ -45,7 +45,12 @@
<b-icon icon="search"></b-icon <b-icon icon="search"></b-icon
></span> ></span>
</div> </div>
<b-form-tags input-id="tags-pills" v-model="searchTags"> <b-form-tags
input-id="tags-pills"
v-model="searchTags"
:disabled="true"
v-if="filters.length > 0"
>
<template v-slot="{ tags, tagVariant, removeTag }"> <template v-slot="{ tags, tagVariant, removeTag }">
<div class="d-inline-block" style="font-size: 1rem"> <div class="d-inline-block" style="font-size: 1rem">
<b-form-tag <b-form-tag
@@ -375,4 +380,15 @@ export default {
display: block !important; display: block !important;
margin-right: 1rem; margin-right: 1rem;
} }
</style> </style>
<style scoped>
.b-form-tags {
border: none;
}
.input-group-tag {
position: relative;
display: flex;
flex-wrap: nowrap;
align-items: stretch;
}
</style>

95
resources/assets/js/components/search/MyCasesFilter.vue
View File

@@ -40,47 +40,52 @@
<h5 class="v-search-title">{{ title }}</h5> <h5 class="v-search-title">{{ title }}</h5>
<div class="pm-mc-text-icon"> <div class="pm-mc-text-icon">
<i :class="icon"></i> <i :class="icon"></i>
</div> </div>
<b-input-group class="w-75 p-1"> <b-input-group class="w-75 p-1">
<div class="input-group mb-3"> <div class="input-group-tag mb-3">
<div class="input-group-prepend"> <div class="input-group-prepend">
<span <span
class="input-group-text bg-primary-pm text-white" class="input-group-text bg-primary-pm text-white"
id="popover-target-1" id="popover-target-1"
@click="searchClickHandler" @click="searchClickHandler"
>
<b-icon icon="search"></b-icon>
</span>
<b-tooltip target="popover-target-1">{{$t('ID_MY_CASES_SEARCH')}}</b-tooltip>
</div>
<b-form-tags
input-id="tags-pills"
v-model="searchTags"
:disabled="true"
v-if="filters.length > 0"
> >
<b-icon icon="search"></b-icon <template v-slot="{ tags, tagVariant, removeTag }" >
></span> <div class="d-inline-block" style="font-size: 1rem">
<b-tooltip target="popover-target-1">{{$t('ID_MY_CASES_SEARCH')}}</b-tooltip> <b-form-tag
</div> v-for="tag in tags"
<b-form-tags input-id="tags-pills" v-model="searchTags"> @remove="customRemove(removeTag, tag)"
<template v-slot="{ tags, tagVariant, removeTag }"> :key="tag"
<div class="d-inline-block" style="font-size: 1rem"> :title="tag"
<b-form-tag :variant="tagVariant"
v-for="tag in tags" class="mr-1 badge badge-light"
@remove="customRemove(removeTag, tag)" >
:key="tag" <div :id="tag">
:title="tag" <i class="fas fa-tags"></i>
:variant="tagVariant" {{ tagContent(tag) }}
class="mr-1 badge badge-light" </div>
>
<div :id="tag">
<i class="fas fa-tags"></i>
{{ tagContent(tag) }}
</div>
<component <component
:filters="filters" :filters="filters"
v-bind:is="tagComponent(tag)" v-bind:is="tagComponent(tag)"
v-bind:info="tagInfo(tag)" v-bind:info="tagInfo(tag)"
v-bind:tag="tag" v-bind:tag="tag"
v-bind:filter="dataToFilter(tag)" v-bind:filter="dataToFilter(tag)"
@updateSearchTag="updateSearchTag" @updateSearchTag="updateSearchTag"
/> />
</b-form-tag> </b-form-tag>
</div> </div>
</template> </template>
</b-form-tags> </b-form-tags>
</div> </div>
</b-input-group> </b-input-group>
</div> </div>
@@ -478,4 +483,14 @@ export default {
line-height: 40px; line-height: 40px;
} }
</style> </style>
<style scoped>
.b-form-tags {
border: none;
}
.input-group-tag {
position: relative;
display: flex;
flex-wrap: nowrap;
align-items: stretch;
}
</style>