feat: add Toolbar to DataTable #172

teritorio · Feb 29, 2024 · 5f6f7a2 · 5f6f7a2
1 parent acd622b
commit 5f6f7a2
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 50 deletions.
diff --git a/components/PoisList/PoisList.vue b/components/PoisList/PoisList.vue
@@ -5,7 +5,6 @@ import type { PropType } from 'vue'
 
 import { defineNuxtComponent, useRequestHeaders } from '#app'
 import PoiLayout from '~/components/Layout/PoiLayout.vue'
-import Actions from '~/components/PoisList/Actions.vue'
 import CategorySelector from '~/components/PoisList/CategorySelector.vue'
 import PoisTable from '~/components/PoisList/PoisTable.vue'
 import type { ContentEntry } from '~/lib/apiContent'
@@ -17,7 +16,6 @@ import { menuStore } from '~/stores/menu'
 export default defineNuxtComponent({
   components: {
     FontAwesomeIcon,
-    Actions,
     PoiLayout,
     CategorySelector,
     PoisTable,
@@ -108,20 +106,22 @@ export default defineNuxtComponent({
     :color-line="category.category.color_line"
     :color-fill="category.category.color_fill"
   >
-    <template #actions>
-      <Actions
-        :category-id="categoryId"
-        :color-line="category.category.color_line"
-      />
-    </template>
     <template #body>
       <CategorySelector
         :menu-items="menuItems || {}"
         :category-id="categoryId"
         @category-change="onMenuChange"
       />
 
-      <PoisTable v-if="pois" :fields="fields" :pois="pois" />
+      <VDivider />
+
+      <PoisTable
+        v-if="pois"
+        :category="category"
+        :fields="fields"
+        :pois="pois"
+      />
+
       <FontAwesomeIcon
         v-else
         icon="spinner"

diff --git a/components/PoisList/PoisTable.vue b/components/PoisList/PoisTable.vue
@@ -2,9 +2,12 @@
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { PropertyTranslationsContextEnum } from '~/plugins/property-translations'
 import type { ApiPois, FieldsListItem } from '~/lib/apiPois'
+import type { ApiMenuCategory } from '~/lib/apiMenu'
 import Field from '~/components/Fields/Field.vue'
 import IconButton from '~/components/UI/IconButton.vue'
 import ContribFieldGroup from '~/components/Fields/ContribFieldGroup.vue'
+import Actions from '~/components/PoisList/Actions.vue'
+import TeritorioIconBadge from '~/components/UI/TeritorioIconBadge.vue'
 
 interface DataTableHeader {
   filterable: boolean
@@ -14,6 +17,7 @@ interface DataTableHeader {
 }
 
 const props = defineProps<{
+  category: ApiMenuCategory
   fields: FieldsListItem[]
   pois: ApiPois
 }>()
@@ -61,55 +65,71 @@ const headers = computed((): Array<DataTableHeader> => {
 </script>
 
 <template>
-  <VDataTable
-    :headers="headers"
-    :items="pois.features"
-    :no-data-text="t('poisTable.empty')"
-    :search="search"
-    :custom-filter="customFilter"
-    items-per-page="20"
-  >
-    <template #top>
+  <VCard>
+    <VToolbar class="pa-2" flat>
+      <TeritorioIconBadge
+        :color-fill="category.category.color_fill"
+        :picto="category.category.icon"
+        size="xl"
+      />
+      <VToolbarTitle class="d-flex print:tw-pb-4" tag="h1" :text="category.category.name.fr" />
+
       <VTextField
         v-model="search"
         :label="t('poisTable.search')"
-        class="pa-2"
+        clearable
+        variant="solo-filled"
+        hide-details="auto"
       >
         <template #append-inner>
           <FontAwesomeIcon class="px-2" icon="search" />
         </template>
       </VTextField>
-    </template>
-    <template #item="{ item, columns }">
-      <tr>
-        <td v-for="col in columns" :key="col.key">
-          <ContribFieldGroup
-            v-if="col.key === 'contrib' && isContribEligible(item.raw.properties)"
-            v-bind="getContributorFields(item.raw)"
-          />
-          <IconButton
-            v-else-if="col.key === 'details'"
-            class="tw-h-10"
-            :href="`/poi/${item.raw.properties.metadata.id}/details`"
-            :label="t('poisTable.details')"
-            target="_self"
-          >
-            <FontAwesomeIcon icon="external-link-alt" />
-            {{ t('poisTable.details') }}
-          </IconButton>
-          <Field
-            v-else
-            :context="PropertyTranslationsContextEnum.List"
-            :recursion-stack="[col.key]"
-            :field="{ field: col.key }"
-            :details="t('poisTable.details')"
-            :properties="item.raw.properties"
-            :geom="item.raw.geometry"
-          />
-        </td>
-      </tr>
-    </template>
-  </VDataTable>
+      <Actions
+        class="ma-0 ml-2 w-auto"
+        :category-id="category.id"
+        :color-line="category.category.color_line"
+      />
+    </VToolbar>
+    <VDataTable
+      :headers="headers"
+      :items="pois.features"
+      :no-data-text="t('poisTable.empty')"
+      :search="search"
+      :custom-filter="customFilter"
+      items-per-page="20"
+    >
+      <template #item="{ item, columns }">
+        <tr>
+          <td v-for="col in columns" :key="col.key">
+            <ContribFieldGroup
+              v-if="col.key === 'contrib' && isContribEligible(item.raw.properties)"
+              v-bind="getContributorFields(item.raw)"
+            />
+            <IconButton
+              v-else-if="col.key === 'details'"
+              class="tw-h-10"
+              :href="`/poi/${item.raw.properties.metadata.id}/details`"
+              :label="t('poisTable.details')"
+              target="_self"
+            >
+              <FontAwesomeIcon icon="external-link-alt" />
+              {{ t('poisTable.details') }}
+            </IconButton>
+            <Field
+              v-else
+              :context="PropertyTranslationsContextEnum.List"
+              :recursion-stack="[col.key]"
+              :field="{ field: col.key }"
+              :details="t('poisTable.details')"
+              :properties="item.raw.properties"
+              :geom="item.raw.geometry"
+            />
+          </td>
+        </tr>
+      </template>
+    </VDataTable>
+  </VCard>
 </template>
 
 <style>