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

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

@@ -42,7 +42,7 @@
<i :class="icon"></i>
</div>
<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">
<span
class="input-group-text bg-primary-pm text-white"
@@ -52,7 +52,12 @@
<b-icon icon="search"></b-icon
></span>
</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 }">
<div class="d-inline-block" style="font-size: 1rem">
<b-form-tag
@@ -557,3 +562,14 @@ export default {
line-height: 40px;
}
</style>
<style scoped>
.b-form-tags {
border: none;
}
.input-group-tag {
position: relative;
display: flex;
flex-wrap: nowrap;
align-items: stretch;
}
</style>

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

@@ -35,7 +35,7 @@
<i :class="icon"></i>
</div>
<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">
<span
class="input-group-text bg-primary-pm text-white"
@@ -45,7 +45,12 @@
<b-icon icon="search"></b-icon
></span>
</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 }">
<div class="d-inline-block" style="font-size: 1rem">
<b-form-tag
@@ -376,3 +381,14 @@ export default {
margin-right: 1rem;
}
</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>
<div class="pm-mc-text-icon">
<i :class="icon"></i>
</div>
<b-input-group class="w-75 p-1">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span
class="input-group-text bg-primary-pm text-white"
id="popover-target-1"
@click="searchClickHandler"
</div>
<b-input-group class="w-75 p-1">
<div class="input-group-tag mb-3">
<div class="input-group-prepend">
<span
class="input-group-text bg-primary-pm text-white"
id="popover-target-1"
@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
></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">
<template v-slot="{ tags, tagVariant, removeTag }">
<div class="d-inline-block" style="font-size: 1rem">
<b-form-tag
v-for="tag in tags"
@remove="customRemove(removeTag, tag)"
:key="tag"
:title="tag"
:variant="tagVariant"
class="mr-1 badge badge-light"
>
<div :id="tag">
<i class="fas fa-tags"></i>
{{ tagContent(tag) }}
</div>
<template v-slot="{ tags, tagVariant, removeTag }" >
<div class="d-inline-block" style="font-size: 1rem">
<b-form-tag
v-for="tag in tags"
@remove="customRemove(removeTag, tag)"
:key="tag"
:title="tag"
:variant="tagVariant"
class="mr-1 badge badge-light"
>
<div :id="tag">
<i class="fas fa-tags"></i>
{{ tagContent(tag) }}
</div>
<component
:filters="filters"
v-bind:is="tagComponent(tag)"
v-bind:info="tagInfo(tag)"
v-bind:tag="tag"
v-bind:filter="dataToFilter(tag)"
@updateSearchTag="updateSearchTag"
/>
</b-form-tag>
</div>
</template>
</b-form-tags>
<component
:filters="filters"
v-bind:is="tagComponent(tag)"
v-bind:info="tagInfo(tag)"
v-bind:tag="tag"
v-bind:filter="dataToFilter(tag)"
@updateSearchTag="updateSearchTag"
/>
</b-form-tag>
</div>
</template>
</b-form-tags>
</div>
</b-input-group>
</div>
@@ -478,4 +483,14 @@ export default {
line-height: 40px;
}
</style>
<style scoped>
.b-form-tags {
border: none;
}
.input-group-tag {
position: relative;
display: flex;
flex-wrap: nowrap;
align-items: stretch;
}
</style>