fix: use a button to handle tags

This commit is contained in:
Kazhnuz 2023-02-16 07:27:21 +01:00
parent f066f064f4
commit 64d93b9ef7
2 changed files with 122 additions and 14 deletions

View file

@ -4,6 +4,7 @@ import PaginatedFilteredTable from "@/utils/tables/PaginatedFilteredTable";
import type { TableField, TableItem } from "@/utils/tables/types";
import type { PropType } from "vue";
import PageList from "./pagination/PageList.vue";
import TagList from "./TagList.vue";
const props = defineProps({
fields: {
@ -60,20 +61,15 @@ function goTo(page: number) {
</script>
<template>
<div class="small-text" v-for="(filter, key) in filtersFieldMap" :key="key">
<strong>{{ filter.title }} : </strong>
<button
v-for="(isTrue, filterName) in filter.filters"
:key="filterName"
class="btn-small mb-0"
:class="{ 'btn-grey': !isTrue, 'btn-primary': isTrue }"
@click="switchFilter(key, filterName)"
>
{{ filterName }}
</button>
<button class="btn-small btn-secondary mb-0" @click="removeFilter(key)">
Vider filtres
</button>
<div class="d-flex f-between">
<div></div>
<div class="d-flex f-end">
<TagList
:filtersFieldMap="filtersFieldMap"
@remove-filter="removeFilter"
@switch-filter="switchFilter"
></TagList>
</div>
</div>
<table class="pb-0 table-auto">
<thead>

View file

@ -0,0 +1,112 @@
<script lang="ts" setup>
import type { FilterFieldsMap } from "@/utils/tables/types";
import { ref, defineProps, computed } from "vue";
const props = defineProps<{
filtersFieldMap: FilterFieldsMap;
}>();
const emit = defineEmits(["switchFilter", "removeFilter"]);
const computedFieldMap = computed(() => {
return props.filtersFieldMap ?? [];
});
const haveElement = computed(() => {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
for (const _key in props.filtersFieldMap) {
return true;
}
return false;
});
const tagNumber = computed(() => {
var i = 0;
for (const key in props.filtersFieldMap) {
const filters = props.filtersFieldMap[key].filters;
for (const key2 in filters) {
if (filters[key2] === true) {
i++;
}
}
}
return i;
});
const showPopover = ref(false);
function switchFilter(filterSet: string | number, filterName: string | number) {
emit("switchFilter", filterSet as string, filterName as string);
}
function removeFilter(filterSet: string | number) {
emit("removeFilter", filterSet as string);
}
</script>
<template>
<div class="taglist" v-if="haveElement">
<button class="btn-small btn-outline" @click="showPopover = !showPopover">
<strong>Tags</strong>
<span
class="badge pills"
:class="{ 'bg-grey': tagNumber <= 0, 'bg-secondary': tagNumber > 0 }"
>{{ tagNumber }} tag(s)</span
>
</button>
<div class="card menu fg-dark" v-if="showPopover">
<div
class="small-text"
v-for="(filter, key) in computedFieldMap"
:key="key"
>
<p class="m-0 p-0">
<strong>{{ filter.title }} : </strong>
</p>
<div>
<button
v-for="(isTrue, filterName) in filter.filters"
:key="filterName"
class="btn-small mb-0"
:class="{ 'btn-grey': !isTrue, 'btn-primary': isTrue }"
@click="switchFilter(key, filterName)"
>
{{ filterName }}
</button>
<button class="btn-small btn-danger mb-0" @click="removeFilter(key)">
Vider filtres
</button>
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.taglist {
position: relative;
}
.card {
position: absolute;
width: 480px;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.3);
background-color: white;
right: 0;
}
.btn-outline {
border: 1px solid rgba(0, 0, 0, 0.2);
&:hover {
background-color: rgba(0, 0, 0, 0.05);
}
margin-bottom: 0.5rem;
margin-left: 0;
margin-right: 0;
}
.badge {
font-size: 0.8em;
border-radius: 999px;
}
</style>