src/components/tableaux/TableRenderer.vue

@@ -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>

src/components/tableaux/TagList.vue

@@ -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>