Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#5167 breadcrumbs for min and max price #5348

Merged
merged 6 commits into from
Mar 29, 2023
Merged

#5167 breadcrumbs for min and max price #5348

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
aef146f
#5167 breadcrumbs for min and maxc
prachi00 Mar 24, 2023
77c2cf8
ui change
prachi00 Mar 25, 2023
78b0791
Merge branch 'main' into feat-breads-min-max
prachi00 Mar 25, 2023
ed5f57a
Merge branch 'main' into feat-breads-min-max
prachi00 Mar 28, 2023
4fb28f1
Merge branch 'main' into feat-breads-min-max
vikiival Mar 28, 2023
809a81e
Merge remote-tracking branch 'upstream/main' into feat-breads-min-max
prachi00 Mar 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 31 additions & 6 deletions components/shared/BreadcrumbsFilter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,30 @@
v-if="key === 'search'"
:key="key"
class="control"
@close="removeSearch">
@close="removeBread('search')">
{{ `${$t('general.search')}: ${value}` }}
</NeoTag>
<NeoTag v-else :key="key" class="control" @close="closeTag(String(key))">
<NeoTag
v-else-if="key === 'min'"
:key="key"
class="control"
@close="removeBread('min')">
{{ `${$t('Min')}:` }}
<CommonTokenMoney :value="value" />
</NeoTag>
<NeoTag
v-else-if="key === 'max'"
:key="key"
class="control"
@close="removeBread('max')">
{{ `${$t('Max')}:` }}
<CommonTokenMoney :value="value" />
</NeoTag>
<NeoTag
v-else
:key="key"
class="control d"
@close="closeTag(String(key))">
{{ queryMapTranslation[String(key)] }}
</NeoTag>
</template>
Expand All @@ -23,6 +43,7 @@

<script lang="ts" setup>
import NeoTag from '@/components/shared/gallery/NeoTag.vue'
import CommonTokenMoney from '@/components/shared/CommonTokenMoney.vue'

const route = useRoute()
const isCollectionActivityTab = computed(
Expand All @@ -38,7 +59,11 @@ const breads = computed(() => {
const query = { ...route.query, redesign: undefined }

const activeFilters = Object.entries(query).filter(
([key, value]) => (key === 'search' && Boolean(value)) || value === 'true'
([key, value]) =>
(key === 'search' && Boolean(value)) ||
(key === 'min' && value) ||
(key === 'max' && value) ||
value === 'true'
)
return Object.fromEntries(activeFilters)
})
Expand All @@ -49,7 +74,7 @@ const isAnyFilterActive = computed(() =>

const clearAllFilters = () => {
const clearedFilters = Object.keys(breads.value).reduce((filters, key) => {
if (key === 'search') {
if (['search', 'min', 'max'].includes(key)) {
return { ...filters, [key]: undefined }
}
return { ...filters, [key]: isCollectionActivityTab ? undefined : 'false' }
Expand Down Expand Up @@ -78,8 +103,8 @@ const closeTag = (key: string) => {
replaceUrl({ [key]: false })
}

const removeSearch = () => {
replaceUrl({ search: undefined })
const removeBread = (key: string) => {
replaceUrl({ [key]: undefined })
}
</script>

Expand Down
34 changes: 22 additions & 12 deletions components/shared/filters/modules/PriceFilter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,15 +51,20 @@
@focus="toggleInputFocused"
@blur="toggleInputFocused" />
</div>
<NeoButton
data-cy="apply"
:disabled="!isValidFilter(range.min, range.max)"
no-shadow
variant="k-accent"
expanded
@click.native="apply">
{{ $t('general.apply') }}
</NeoButton>
<div class="is-flex">
<div class="unit mr-2 is-flex is-align-items-center py-1 px-3">
{{ unit }}
</div>
<NeoButton
data-cy="apply"
:disabled="!isValidFilter(range.min, range.max)"
no-shadow
variant="k-accent"
expanded
@click.native="apply">
{{ $t('general.apply') }}
</NeoButton>
</div>
</form>
</b-collapse>
</template>
Expand Down Expand Up @@ -87,7 +92,7 @@ const props = withDefaults(
)

const route = useRoute()
const { decimals } = useChain()
const { decimals, unit } = useChain()

const range =
props.dataModel === 'query'
Expand All @@ -110,8 +115,6 @@ const apply = () => {
if (props.dataModel === 'store') {
applyToStore()
}

range.value = { min: undefined, max: undefined }
}

const applyToStore = () => {
Expand Down Expand Up @@ -168,6 +171,13 @@ const toggleInputFocused = (): void => {
}
}
}

.unit {
@include ktheme() {
border: 1px solid theme('text-color');
}
}

.input-focused {
@include ktheme() {
box-shadow: 0 0 0 1px theme('k-blue');
Expand Down