From bf9bb3286713516a0dff04d484cde9c3a0623b11 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Mon, 22 Apr 2024 17:41:16 +0200
Subject: [PATCH 01/11] chore: use custom fetch and nuxt state for data
 fetching #57

---
 pages/[project]/changes_logs.vue | 37 +++++++++++++++++++-------------
 1 file changed, 22 insertions(+), 15 deletions(-)

diff --git a/pages/[project]/changes_logs.vue b/pages/[project]/changes_logs.vue
index 8992753..4096af6 100644
--- a/pages/[project]/changes_logs.vue
+++ b/pages/[project]/changes_logs.vue
@@ -1,10 +1,5 @@
 <script setup lang="ts">
-import {
-  getAsyncDataOrThrows,
-  setAsyncRef,
-} from '~/libs/getAsyncData'
 import type { Log, ObjectId, Project } from '~/libs/types'
-import { getLogs, getProject } from '~/libs/types'
 
 definePageMeta({
   validate({ params }) {
@@ -13,15 +8,27 @@ definePageMeta({
 })
 
 const params = useRoute().params
-const project: string = params.project as string
-const projectDetails = ref<Project>()
+const projectSlug = params.project as string
+const project = ref<Project>()
 const logs = ref<Log[]>()
 
-getAsyncDataOrThrows('fetchProject', () =>
-  getProject(useRuntimeConfig().public.API, project)).then(setAsyncRef(projectDetails))
+try {
+  const projectData = await useFetchWithCache<Project>(`project-${projectSlug}`, `${useRuntimeConfig().public.API}/projects/${projectSlug}`)
+  project.value = projectData.value
+  useState<Project>('project', () => projectData.value)
+}
+catch (err: any) {
+  ElMessage.error(err.message)
+}
 
-getAsyncDataOrThrows('fetchSettings', () =>
-  getLogs(useRuntimeConfig().public.API, project)).then(setAsyncRef(logs))
+try {
+  const logsData = await useFetchWithCache<Log[]>(`logs-${projectSlug}`, `${useRuntimeConfig().public.API}/projects/${projectSlug}/changes_logs`)
+  logs.value = logsData.value
+  useState<Log[]>('logs', () => logsData.value)
+}
+catch (err: any) {
+  ElMessage.error(err.message)
+}
 
 function removeLogs(objectIds: ObjectId[]) {
   logs.value = logs.value?.filter(
@@ -35,10 +42,10 @@ function removeLogs(objectIds: ObjectId[]) {
 
 <template>
   <div>
-    <ProjectLight v-if="projectDetails" :project="projectDetails" />
-    <Logs
-      v-if="logs !== undefined"
-      :project="project"
+    <project-light v-if="project" :project="project" />
+    <logs
+      v-if="logs?.length"
+      :project="projectSlug"
       :logs="logs"
       @remove-logs="removeLogs($event)"
     />

From 24e136adddffa0e14859f17984058c1fdf161918 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Mon, 22 Apr 2024 18:23:34 +0200
Subject: [PATCH 02/11] chore: move diff-map on high level #57

---
 components/Logs.vue              | 18 ------------------
 pages/[project]/changes_logs.vue | 32 ++++++++++++++++++++++++++++++--
 2 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/components/Logs.vue b/components/Logs.vue
index 5e7fa51..a1e9fef 100644
--- a/components/Logs.vue
+++ b/components/Logs.vue
@@ -1,7 +1,6 @@
 <script lang="ts">
 import type { PropType } from 'vue'
 import _ from 'underscore'
-import type { Geometry } from 'geojson'
 import LogsComponent from '~/components/LogsComponent.vue'
 import type { Log, ObjectId, User } from '~/libs/types'
 import { setLogs } from '~/libs/types'
@@ -159,16 +158,6 @@ export default defineNuxtComponent({
     isProjectUser(): boolean {
       return !!this.user?.projects?.includes(this.project)
     },
-
-    baseGeoms(): Geometry[] {
-      return this.logs
-        .map((log) => log.base?.geom)
-        .filter((geom): geom is Geometry => !!geom)
-    },
-
-    changeGeoms(): Geometry[] {
-      return this.logs.map((log) => log.change.geom)
-    },
   },
 
   methods: {
@@ -245,13 +234,6 @@ export default defineNuxtComponent({
 
 <template>
   <div>
-    <el-row>
-      <DiffMap
-        :base-geom="baseGeoms"
-        :change-geom="changeGeoms"
-        style="resize: vertical"
-      />
-    </el-row>
     <h3>{{ $t('logs.filters') }}</h3>
     <el-row style="margin-top: 20px">
       <el-badge :value="logs.length" class="item" :max="999">
diff --git a/pages/[project]/changes_logs.vue b/pages/[project]/changes_logs.vue
index 4096af6..fd85cdb 100644
--- a/pages/[project]/changes_logs.vue
+++ b/pages/[project]/changes_logs.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { Geometry } from 'geojson'
 import type { Log, ObjectId, Project } from '~/libs/types'
 
 definePageMeta({
@@ -30,6 +31,24 @@ catch (err: any) {
   ElMessage.error(err.message)
 }
 
+const baseGeoms = computed(() => {
+  if (!logs.value) {
+    return []
+  }
+
+  return logs.value
+    .map((log) => log.base?.geom)
+    .filter((geom): geom is Geometry => !!geom)
+})
+
+const changeGeoms = computed(() => {
+  if (!logs.value) {
+    return []
+  }
+
+  return logs.value.map((log) => log.change.geom)
+})
+
 function removeLogs(objectIds: ObjectId[]) {
   logs.value = logs.value?.filter(
     (log) =>
@@ -41,13 +60,22 @@ function removeLogs(objectIds: ObjectId[]) {
 </script>
 
 <template>
-  <div>
+  <el-container direction="vertical">
+    <!-- TODO: Improve this component for reuse -->
     <project-light v-if="project" :project="project" />
+    <!-- TODO: Create a component -->
+    <el-row>
+      <diff-map
+        :base-geom="baseGeoms"
+        :change-geom="changeGeoms"
+        style="resize: vertical"
+      />
+    </el-row>
     <logs
       v-if="logs?.length"
       :project="projectSlug"
       :logs="logs"
       @remove-logs="removeLogs($event)"
     />
-  </div>
+  </el-container>
 </template>

From 5a48e116b3f017b8849d0c7a6708473cdd087b1d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Mon, 22 Apr 2024 18:54:38 +0200
Subject: [PATCH 03/11] feat: create log-filters components #57

---
 components/LogFilters.vue        | 196 ++++++++++++++++++++++++
 components/Logs.vue              | 252 ++-----------------------------
 pages/[project]/changes_logs.vue |   1 +
 3 files changed, 211 insertions(+), 238 deletions(-)
 create mode 100644 components/LogFilters.vue

diff --git a/components/LogFilters.vue b/components/LogFilters.vue
new file mode 100644
index 0000000..44e59c7
--- /dev/null
+++ b/components/LogFilters.vue
@@ -0,0 +1,196 @@
+<script setup lang="ts">
+import { countBy, indexBy, intersection, sortBy, uniq } from 'underscore'
+import type { Log } from '~/libs/types'
+
+const logs = useState<Log[]>('logs')
+const route = useRoute()
+const filterByAction = route.query.filterByAction as string | undefined
+const filterByUserGroups = route.query.filterByUserGroups as string | undefined
+const filterBySelectors = route.query.filterBySelectors as string[] | undefined
+const filterByUsers = route.query.filterByUsers as string | undefined
+const filterByDate = route.query.filterByDate as string | undefined
+
+const stats = computed((): [string, number][] => {
+  const actions = logs.value
+    .map((log) =>
+      uniq(
+        [
+          ...Object.values(log.diff_attribs || {}),
+          ...Object.values(log.diff_tags || {}),
+        ]
+          .flat(1)
+          .map((action) => action[0]),
+      ),
+    )
+    .flat(1)
+  return getStats(actions)
+})
+
+const statUserGroups = computed(() => {
+  const userGroups = logs.value
+    .map((log) => uniq(log.matches.map((m) => m.user_groups).flat(2)))
+    .flat(1)
+  return getStats(userGroups)
+})
+
+const statSelectors = computed(() => {
+  const matches = logs.value.map((log) => uniq(log.matches).flat()).flat(1)
+  return getStats(matches, (m) => m.selectors.join(';'))
+})
+
+const statUsers = computed(() => {
+  const users = logs.value
+    .map((log) =>
+      (log.base ? log.changesets.slice(1) : log.changesets).map(
+        (changeset) => changeset.user,
+      ),
+    )
+    .flat(2)
+  return getStats(users)
+})
+
+const statDates = computed(() => {
+  const dates = logs.value.map((log) => log.change.created.substring(0, 10))
+  return getStats(dates).sort()
+})
+
+function getStats<Type>(
+  data: Type[],
+  key: (o: Type) => string = (i) => `${i}`,
+): [Type, number][] {
+  const index = indexBy(data, key)
+  return sortBy(
+    Object.entries(countBy(data, key)) as [string, number][],
+    ([_key, count]) => -count,
+  ).map(([key, count]) => [index[key], count])
+}
+
+function matchFilterBySelectors(selectors: string[]): boolean {
+  return (
+    filterBySelectors !== undefined && intersection(selectors, filterBySelectors).length > 0
+  )
+}
+</script>
+
+<template>
+  <aside>
+    <h3>{{ $t('logs.filters') }}</h3>
+    <el-row style="margin-top: 20px">
+      <el-badge :value="logs.length" class="item" :max="999">
+        <el-tag size="small">
+          {{ $t('logs.objects') }}
+        </el-tag>
+      </el-badge>
+      <el-badge
+        v-for="[key, count] in stats"
+        :key="key"
+        :value="count"
+        class="item"
+        :max="999"
+      >
+        <el-button
+          type="danger"
+          :plain="filterByAction !== key"
+          :disabled="(filterByAction && filterByAction !== key) || false"
+          size="small"
+          @click="filterByAction = filterByAction !== key ? key : undefined"
+        >
+          {{ key }}
+        </el-button>
+      </el-badge>
+    </el-row>
+    <el-row>
+      <el-badge
+        v-for="[key, count] in statUserGroups"
+        :key="key"
+        :value="count"
+        class="item"
+        :max="999"
+      >
+        <el-button
+          type="primary"
+          :plain="filterByUserGroups !== key"
+          :disabled="(filterByUserGroups && filterByUserGroups !== key) || false"
+          size="small"
+          @click="
+            filterByUserGroups = filterByUserGroups !== key ? key : undefined
+          "
+        >
+          📌 {{ key }}
+        </el-button>
+      </el-badge>
+    </el-row>
+    <el-row>
+      <el-badge
+        v-for="[match, count] in statSelectors"
+        :key="match.selectors.join(';')"
+        :value="count"
+        class="item"
+        :max="999"
+      >
+        <el-button
+          type="warning"
+          :plain="filterBySelectors !== match.selectors"
+          :disabled="
+            (filterBySelectors && !matchFilterBySelectors(match.selectors))
+              || false
+          "
+          size="small"
+          @click="
+            filterBySelectors = !matchFilterBySelectors(match.selectors)
+              ? match.selectors
+              : undefined
+          "
+        >
+          🏷️ {{ $i18nHash(match.name) || match.selectors.join(' ') }}
+        </el-button>
+      </el-badge>
+    </el-row>
+    <el-row>
+      <el-badge
+        v-for="[key, count] in statUsers.slice(0, 20)"
+        :key="key"
+        :value="count"
+        class="item"
+        :max="999"
+      >
+        <el-button
+          type="info"
+          :plain="filterByUsers !== key"
+          :disabled="(filterByUsers && filterByUsers !== key) || false"
+          size="small"
+          @click="filterByUsers = filterByUsers !== key ? key : undefined"
+        >
+          👤 {{ key }}
+        </el-button>
+      </el-badge>
+      <span v-if="statUsers.length > 20">{{ $t('logs.tags_more') }}</span>
+    </el-row>
+    <el-row>
+      <el-badge
+        v-for="[key, count] in statDates"
+        :key="key"
+        :value="count"
+        class="item"
+        :max="999"
+      >
+        <el-button
+          type="primary"
+          :plain="filterByDate !== key"
+          :disabled="(filterByDate && filterByDate !== key) || false"
+          size="small"
+          @click="filterByDate = filterByDate !== key ? key : undefined"
+        >
+          📅 {{ key }}
+        </el-button>
+      </el-badge>
+    </el-row>
+  </aside>
+</template>
+
+<style scoped>
+.item {
+  margin-top: 0.7em;
+  margin-right: 1.3em;
+}
+</style>
diff --git a/components/Logs.vue b/components/Logs.vue
index a1e9fef..ff39826 100644
--- a/components/Logs.vue
+++ b/components/Logs.vue
@@ -24,23 +24,9 @@ export default defineNuxtComponent({
   },
 
   data(): {
-    filterByAction?: string
-    filterByUserGroups?: string
-    filterBySelectors?: string[]
-    filterByUsers?: string
-    filterByDate?: string
     scroolCount: number
   } {
     return {
-      filterByAction: this.$route.query.filterByAction as string | undefined,
-      filterByUserGroups: this.$route.query.filterByUserGroups as
-      | string
-      | undefined,
-      filterBySelectors: this.$route.query.filterBySelectors as
-      | string[]
-      | undefined,
-      filterByUsers: this.$route.query.filterByUsers as string | undefined,
-      filterByDate: this.$route.query.filterByDate as string | undefined,
       scroolCount: 10,
     }
   },
@@ -51,106 +37,44 @@ export default defineNuxtComponent({
     return { user }
   },
 
-  watch: {
-    filterByAction() {
-      this.updateUrl()
-    },
-    filterByUserGroups() {
-      this.updateUrl()
-    },
-    filterBySelectors() {
-      this.updateUrl()
-    },
-    filterByUsers() {
-      this.updateUrl()
-    },
-    filterByDate() {
-      this.updateUrl()
-    },
-  },
-
   emits: {
     removeLogs: (_objectIds: ObjectId[]) => true,
   },
 
   computed: {
-    stats(): [string, number][] {
-      const actions = this.logs
-        .map((log) =>
-          _.uniq(
-            [
-              ...Object.values(log.diff_attribs || {}),
-              ...Object.values(log.diff_tags || {}),
-            ]
-              .flat(1)
-              .map((action) => action[0]),
-          ),
-        )
-        .flat(1)
-      return this.count(actions)
-    },
-
-    statSelectors() {
-      const matches = this.logs.map((log) => _.uniq(log.matches).flat()).flat(1)
-      return this.count(matches, (m) => m.selectors.join(';'))
-    },
-
-    statUserGroups() {
-      const userGroups = this.logs
-        .map((log) => _.uniq(log.matches.map((m) => m.user_groups).flat(2)))
-        .flat(1)
-      return this.count(userGroups)
-    },
-
-    statUsers() {
-      const users = this.logs
-        .map((log) =>
-          (log.base ? log.changesets.slice(1) : log.changesets).map(
-            (changeset) => changeset.user,
-          ),
-        )
-        .flat(2)
-      return this.count(users)
-    },
-
-    statDates() {
-      const dates = this.logs.map((log) => log.change.created.substring(0, 10))
-      return this.count(dates).sort()
-    },
-
     logsWithFilter() {
       return this.logs.filter((log) => {
         const changesetsUsers
-          = this.filterByUsers !== undefined
+          = this.$route.query.filterByUsers !== undefined
           && _.uniq(
             (log.base ? log.changesets.slice(1) : log.changesets).map(
               (changeset) => changeset.user,
             ),
           )
         return (
-          (this.filterByAction === undefined
+          (this.$route.query.filterByAction === undefined
           || Object.values(log.diff_attribs || {})
             .concat(Object.values(log.diff_tags || {}))
             .some(
               (actions) =>
                 actions?.some(
-                  (action) => action[0] === this.filterByAction,
+                  (action) => action[0] === this.$route.query.filterByAction,
                 ) || false,
             ))
-            && (this.filterByUserGroups === undefined
+            && (this.$route.query.filterByUserGroups === undefined
             || log.matches.some((match) =>
-              match.user_groups.includes(this.filterByUserGroups!),
+              match.user_groups.includes(this.$route.query.filterByUserGroups as string),
             ))
-            && (this.filterBySelectors === undefined
+            && (this.$route.query.filterBySelectors === undefined
             || log.matches.some((match) =>
               this.matchFilterBySelectors(match.selectors),
             ))
-            && (this.filterByUsers === undefined
+            && (this.$route.query.filterByUsers === undefined
             || (changesetsUsers
             && changesetsUsers.length === 1
-            && changesetsUsers[0] === this.filterByUsers))
-            && (this.filterByDate === undefined
-            || log.change.created.substring(0, 10) === this.filterByDate)
+            && changesetsUsers[0] === this.$route.query.filterByUsers))
+            && (this.$route.query.filterByDate === undefined
+            || log.change.created.substring(0, 10) === this.$route.query.filterByDate)
         )
       })
     },
@@ -161,17 +85,6 @@ export default defineNuxtComponent({
   },
 
   methods: {
-    count<Type>(
-      data: Type[],
-      key: (o: Type) => string = (i) => `${i}`,
-    ): [Type, number][] {
-      const index = _.indexBy(data, key)
-      return _.sortBy(
-        Object.entries(_.countBy(data, key)) as [string, number][],
-        ([_key, count]) => -count,
-      ).map(([key, count]) => [index[key], count])
-    },
-
     accept(objectIds: ObjectId[]) {
       setLogs(useRuntimeConfig().public.API, this.project, 'accept', objectIds)
         .then(() => this.$emit('removeLogs', objectIds))
@@ -192,11 +105,7 @@ export default defineNuxtComponent({
     },
 
     reset_filter() {
-      this.filterByAction = undefined
-      this.filterByUserGroups = undefined
-      this.filterBySelectors = undefined
-      this.filterByUsers = undefined
-      this.filterByDate = undefined
+      this.$router.replace({ ...this.$route, query: undefined })
     },
 
     validate_selection() {
@@ -208,24 +117,10 @@ export default defineNuxtComponent({
       this.scroolCount += 10
     },
 
-    updateUrl(): void {
-      this.$router.replace({
-        name: this.$route.name || undefined,
-        query: {
-          ...this.$route.query,
-          filterByAction: this.filterByAction,
-          filterByUserGroups: this.filterByUserGroups,
-          filterBySelectors: this.filterBySelectors,
-          filterByUsers: this.filterByUsers,
-          filterByDate: this.filterByDate,
-        },
-      })
-    },
-
     matchFilterBySelectors(selectors: string[]): boolean {
       return (
-        this.filterBySelectors !== undefined
-        && _.intersection(selectors, this.filterBySelectors).length > 0
+        this.$route.query.filterBySelectors !== undefined
+        && _.intersection(selectors, this.$route.query.filterBySelectors as string).length > 0
       )
     },
   },
@@ -234,127 +129,8 @@ export default defineNuxtComponent({
 
 <template>
   <div>
-    <h3>{{ $t('logs.filters') }}</h3>
-    <el-row style="margin-top: 20px">
-      <el-badge :value="logs.length" class="item" :max="999">
-        <el-tag size="small">
-          {{ $t('logs.objects') }}
-        </el-tag>
-      </el-badge>
-      <el-badge
-        v-for="[key, count] in stats"
-        :key="key"
-        :value="count"
-        class="item"
-        :max="999"
-      >
-        <el-button
-          type="danger"
-          :plain="filterByAction !== key"
-          :disabled="(filterByAction && filterByAction !== key) || false"
-          size="small"
-          @click="filterByAction = filterByAction !== key ? key : undefined"
-        >
-          {{ key }}
-        </el-button>
-      </el-badge>
-    </el-row>
-    <el-row>
-      <el-badge
-        v-for="[key, count] in statUserGroups"
-        :key="key"
-        :value="count"
-        class="item"
-        :max="999"
-      >
-        <el-button
-          type="primary"
-          :plain="filterByUserGroups !== key"
-          :disabled="(filterByUserGroups && filterByUserGroups !== key) || false"
-          size="small"
-          @click="
-            filterByUserGroups = filterByUserGroups !== key ? key : undefined
-          "
-        >
-          📌 {{ key }}
-        </el-button>
-      </el-badge>
-    </el-row>
-    <el-row>
-      <el-badge
-        v-for="[match, count] in statSelectors"
-        :key="match.selectors.join(';')"
-        :value="count"
-        class="item"
-        :max="999"
-      >
-        <el-button
-          type="warning"
-          :plain="filterBySelectors !== match.selectors"
-          :disabled="
-            (filterBySelectors && !matchFilterBySelectors(match.selectors))
-              || false
-          "
-          size="small"
-          @click="
-            filterBySelectors = !matchFilterBySelectors(match.selectors)
-              ? match.selectors
-              : undefined
-          "
-        >
-          🏷️ {{ $i18nHash(match.name) || match.selectors.join(' ') }}
-        </el-button>
-      </el-badge>
-    </el-row>
-    <el-row>
-      <el-badge
-        v-for="[key, count] in statUsers.slice(0, 20)"
-        :key="key"
-        :value="count"
-        class="item"
-        :max="999"
-      >
-        <el-button
-          type="info"
-          :plain="filterByUsers !== key"
-          :disabled="(filterByUsers && filterByUsers !== key) || false"
-          size="small"
-          @click="filterByUsers = filterByUsers !== key ? key : undefined"
-        >
-          👤 {{ key }}
-        </el-button>
-      </el-badge>
-      <span v-if="statUsers.length > 20">{{ $t('logs.tags_more') }}</span>
-    </el-row>
-    <el-row>
-      <el-badge
-        v-for="[key, count] in statDates"
-        :key="key"
-        :value="count"
-        class="item"
-        :max="999"
-      >
-        <el-button
-          type="primary"
-          :plain="filterByDate !== key"
-          :disabled="(filterByDate && filterByDate !== key) || false"
-          size="small"
-          @click="filterByDate = filterByDate !== key ? key : undefined"
-        >
-          📅 {{ key }}
-        </el-button>
-      </el-badge>
-    </el-row>
-
     <el-button-group
-      v-if="
-        isProjectUser
-          && (filterByAction
-            || filterByUserGroups
-            || filterBySelectors
-            || filterByUsers
-            || filterByDate)
-      "
+      v-if="isProjectUser && Object.keys($route.query).length"
     >
       <el-button type="primary" @click="validate_selection()">
         ✓ {{ $t('logs.validate_selection') }}
diff --git a/pages/[project]/changes_logs.vue b/pages/[project]/changes_logs.vue
index fd85cdb..85e879a 100644
--- a/pages/[project]/changes_logs.vue
+++ b/pages/[project]/changes_logs.vue
@@ -71,6 +71,7 @@ function removeLogs(objectIds: ObjectId[]) {
         style="resize: vertical"
       />
     </el-row>
+    <log-filters />
     <logs
       v-if="logs?.length"
       :project="projectSlug"

From 1a76982f4404503d8862bed9cf744b000c727cde Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Mon, 22 Apr 2024 20:38:31 +0200
Subject: [PATCH 04/11] fix: sync route query params to UI filters #57

---
 components/LogFilters.vue | 91 ++++++++++++++++++---------------------
 1 file changed, 43 insertions(+), 48 deletions(-)

diff --git a/components/LogFilters.vue b/components/LogFilters.vue
index 44e59c7..1e73b2f 100644
--- a/components/LogFilters.vue
+++ b/components/LogFilters.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
-import { countBy, indexBy, intersection, sortBy, uniq } from 'underscore'
+import { countBy, indexBy, sortBy, uniq } from 'underscore'
+import type { LocationQuery } from 'vue-router'
 import type { Log } from '~/libs/types'
 
 const logs = useState<Log[]>('logs')
+
 const route = useRoute()
-const filterByAction = route.query.filterByAction as string | undefined
-const filterByUserGroups = route.query.filterByUserGroups as string | undefined
-const filterBySelectors = route.query.filterBySelectors as string[] | undefined
-const filterByUsers = route.query.filterByUsers as string | undefined
-const filterByDate = route.query.filterByDate as string | undefined
+const filters = ref<LocationQuery>()
+watchEffect(() => {
+  filters.value = route.query
+})
 
 const stats = computed((): [string, number][] => {
   const actions = logs.value
@@ -65,10 +66,13 @@ function getStats<Type>(
   ).map(([key, count]) => [index[key], count])
 }
 
-function matchFilterBySelectors(selectors: string[]): boolean {
-  return (
-    filterBySelectors !== undefined && intersection(selectors, filterBySelectors).length > 0
-  )
+const router = useRouter()
+async function applyFilter(key: string, value: string) {
+  const query = filters.value?.[key] === value
+    ? Object.fromEntries(Object.entries(route.query).filter(([k, _v]) => k !== key))
+    : { ...route.query, [key]: value }
+
+  await router.replace({ ...route, query })
 }
 </script>
 
@@ -82,106 +86,97 @@ function matchFilterBySelectors(selectors: string[]): boolean {
         </el-tag>
       </el-badge>
       <el-badge
-        v-for="[key, count] in stats"
-        :key="key"
+        v-for="[filter, count] in stats"
+        :key="filter"
         :value="count"
         class="item"
         :max="999"
       >
         <el-button
           type="danger"
-          :plain="filterByAction !== key"
-          :disabled="(filterByAction && filterByAction !== key) || false"
           size="small"
-          @click="filterByAction = filterByAction !== key ? key : undefined"
+          :plain="filters?.filterByAction !== filter"
+          :disabled="!!(filters?.filterByAction && filters?.filterByAction !== filter)"
+          @click="applyFilter('filterByAction', filter)"
         >
-          {{ key }}
+          {{ filter }}
         </el-button>
       </el-badge>
     </el-row>
     <el-row>
       <el-badge
-        v-for="[key, count] in statUserGroups"
-        :key="key"
+        v-for="[filter, count] in statUserGroups"
+        :key="filter"
         :value="count"
         class="item"
         :max="999"
       >
         <el-button
           type="primary"
-          :plain="filterByUserGroups !== key"
-          :disabled="(filterByUserGroups && filterByUserGroups !== key) || false"
           size="small"
-          @click="
-            filterByUserGroups = filterByUserGroups !== key ? key : undefined
-          "
+          :plain="filters?.filterByUserGroups !== filter"
+          :disabled="!!(filters?.filterByUserGroups && filters?.filterByUserGroups !== filter)"
+          @click="applyFilter('filterByUserGroups', filter)"
         >
-          📌 {{ key }}
+          📌 {{ filter }}
         </el-button>
       </el-badge>
     </el-row>
     <el-row>
       <el-badge
         v-for="[match, count] in statSelectors"
-        :key="match.selectors.join(';')"
+        :key="match.selectors.join()"
         :value="count"
         class="item"
         :max="999"
       >
         <el-button
           type="warning"
-          :plain="filterBySelectors !== match.selectors"
-          :disabled="
-            (filterBySelectors && !matchFilterBySelectors(match.selectors))
-              || false
-          "
+          :plain="filters?.filterBySelectors !== match.selectors.join()"
+          :disabled="!!(filters?.filterBySelectors && filters?.filterBySelectors !== match.selectors.join())"
           size="small"
-          @click="
-            filterBySelectors = !matchFilterBySelectors(match.selectors)
-              ? match.selectors
-              : undefined
-          "
+          @click="applyFilter('filterBySelectors', match.selectors.join())"
         >
-          🏷️ {{ $i18nHash(match.name) || match.selectors.join(' ') }}
+          🏷️ {{ $i18nHash(match.name) || match.selectors.join() }}
         </el-button>
       </el-badge>
     </el-row>
     <el-row>
       <el-badge
-        v-for="[key, count] in statUsers.slice(0, 20)"
-        :key="key"
+        v-for="[filter, count] in statUsers.slice(0, 20)"
+        :key="filter"
         :value="count"
         class="item"
         :max="999"
       >
         <el-button
           type="info"
-          :plain="filterByUsers !== key"
-          :disabled="(filterByUsers && filterByUsers !== key) || false"
+          :plain="filters?.filterByUsers !== filter"
+          :disabled="!!(filters?.filterByUsers && filters?.filterByUsers !== filter)"
           size="small"
-          @click="filterByUsers = filterByUsers !== key ? key : undefined"
+          @click="applyFilter('filterByUsers', filter)"
         >
-          👤 {{ key }}
+          👤 {{ filter }}
         </el-button>
       </el-badge>
       <span v-if="statUsers.length > 20">{{ $t('logs.tags_more') }}</span>
     </el-row>
     <el-row>
       <el-badge
-        v-for="[key, count] in statDates"
-        :key="key"
+        v-for="[filter, count] in statDates"
+        :key="filter"
         :value="count"
         class="item"
         :max="999"
       >
         <el-button
           type="primary"
-          :plain="filterByDate !== key"
-          :disabled="(filterByDate && filterByDate !== key) || false"
+          :plain="filters?.filterByDate !== filter"
+          :disabled="!!(filters?.filterByDate && filters?.filterByDate !== filter)"
           size="small"
-          @click="filterByDate = filterByDate !== key ? key : undefined"
+          @click="applyFilter('filterByDate', filter)"
         >
-          📅 {{ key }}
+          📅 {{ filter }}
         </el-button>
       </el-badge>
     </el-row>

From 9735fdd87c4f8506013a6939b9daac12ce8f377a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Tue, 23 Apr 2024 11:27:08 +0200
Subject: [PATCH 05/11] chore: convert logs to script setup style #57

---
 components/Logs.vue              | 223 +++++++++++++------------------
 pages/[project]/changes_logs.vue |   7 +-
 2 files changed, 96 insertions(+), 134 deletions(-)

diff --git a/components/Logs.vue b/components/Logs.vue
index ff39826..8153b13 100644
--- a/components/Logs.vue
+++ b/components/Logs.vue
@@ -1,138 +1,105 @@
-<script lang="ts">
-import type { PropType } from 'vue'
-import _ from 'underscore'
+<script setup lang="ts">
+import { intersection, uniq } from 'underscore'
 import LogsComponent from '~/components/LogsComponent.vue'
 import type { Log, ObjectId, User } from '~/libs/types'
 import { setLogs } from '~/libs/types'
 
-export default defineNuxtComponent({
-  name: 'LogsComponent',
-
-  components: {
-    LogsComponent,
-  },
-
-  props: {
-    project: {
-      type: String,
-      required: true,
-    },
-    logs: {
-      type: Array as PropType<Log[]>,
-      required: true,
-    },
-  },
-
-  data(): {
-    scroolCount: number
-  } {
-    return {
-      scroolCount: 10,
-    }
-  },
-
-  setup() {
-    const user = useState<User>('user')
-
-    return { user }
-  },
-
-  emits: {
-    removeLogs: (_objectIds: ObjectId[]) => true,
-  },
-
-  computed: {
-    logsWithFilter() {
-      return this.logs.filter((log) => {
-        const changesetsUsers
-          = this.$route.query.filterByUsers !== undefined
-          && _.uniq(
-            (log.base ? log.changesets.slice(1) : log.changesets).map(
-              (changeset) => changeset.user,
-            ),
-          )
-        return (
-          (this.$route.query.filterByAction === undefined
-          || Object.values(log.diff_attribs || {})
-            .concat(Object.values(log.diff_tags || {}))
-            .some(
-              (actions) =>
-                actions?.some(
-                  (action) => action[0] === this.$route.query.filterByAction,
-                ) || false,
-            ))
-            && (this.$route.query.filterByUserGroups === undefined
-            || log.matches.some((match) =>
-              match.user_groups.includes(this.$route.query.filterByUserGroups as string),
-            ))
-            && (this.$route.query.filterBySelectors === undefined
-            || log.matches.some((match) =>
-              this.matchFilterBySelectors(match.selectors),
-            ))
-            && (this.$route.query.filterByUsers === undefined
-            || (changesetsUsers
-            && changesetsUsers.length === 1
-            && changesetsUsers[0] === this.$route.query.filterByUsers))
-            && (this.$route.query.filterByDate === undefined
-            || log.change.created.substring(0, 10) === this.$route.query.filterByDate)
-        )
-      })
-    },
-
-    isProjectUser(): boolean {
-      return !!this.user?.projects?.includes(this.project)
-    },
-  },
-
-  methods: {
-    accept(objectIds: ObjectId[]) {
-      setLogs(useRuntimeConfig().public.API, this.project, 'accept', objectIds)
-        .then(() => this.$emit('removeLogs', objectIds))
-        .catch((error) => {
-          /* eslint no-alert: 0 */
-          alert(error)
-        })
-    },
-
-    accept_selection() {
-      const objectIds = this.logsWithFilter.map((log) => ({
-        objtype: log.objtype,
-        id: log.id,
-        version: log.change.version,
-        deleted: log.change.deleted,
-      }))
-      this.accept(objectIds)
-    },
-
-    reset_filter() {
-      this.$router.replace({ ...this.$route, query: undefined })
-    },
-
-    validate_selection() {
-      this.accept_selection()
-      this.reset_filter()
-    },
-
-    scroolLoad(): void {
-      this.scroolCount += 10
-    },
-
-    matchFilterBySelectors(selectors: string[]): boolean {
-      return (
-        this.$route.query.filterBySelectors !== undefined
-        && _.intersection(selectors, this.$route.query.filterBySelectors as string).length > 0
+const props = defineProps<{
+  projectSlug: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'removeLogs', objectIds: ObjectId[]): void
+}>()
+
+const logs = useState<Log[]>('logs')
+const user = useState<User>('user')
+
+const route = useRoute()
+const logsWithFilter = computed(() => {
+  return logs.value.filter((log) => {
+    const changesetsUsers
+      = route.query.filterByUsers !== undefined
+      && uniq(
+        (log.base ? log.changesets.slice(1) : log.changesets).map(
+          (changeset) => changeset.user,
+        ),
       )
-    },
-  },
+    return (
+      (route.query.filterByAction === undefined
+      || Object.values(log.diff_attribs || {})
+        .concat(Object.values(log.diff_tags || {}))
+        .some(
+          (actions) =>
+            actions?.some(
+              (action) => action[0] === route.query.filterByAction,
+            ) || false,
+        ))
+        && (route.query.filterByUserGroups === undefined
+        || log.matches.some((match) =>
+          match.user_groups.includes(route.query.filterByUserGroups as string),
+        ))
+        && (route.query.filterBySelectors === undefined
+        || log.matches.some((match) =>
+          matchFilterBySelectors(match.selectors),
+        ))
+        && (route.query.filterByUsers === undefined
+        || (changesetsUsers
+        && changesetsUsers.length === 1
+        && changesetsUsers[0] === route.query.filterByUsers))
+        && (route.query.filterByDate === undefined
+        || log.change.created.substring(0, 10) === route.query.filterByDate)
+    )
+  })
 })
+
+const isProjectUser = computed(() => {
+  return !!user.value.projects?.includes(props.projectSlug)
+})
+
+function accept(objectIds: ObjectId[]) {
+  setLogs(useRuntimeConfig().public.API, props.projectSlug, 'accept', objectIds)
+    .then(() => emit('removeLogs', objectIds))
+    .catch((error) => {
+      /* eslint no-alert: 0 */
+      alert(error)
+    })
+}
+
+function accept_selection() {
+  const objectIds = logsWithFilter.value.map((log) => ({
+    objtype: log.objtype,
+    id: log.id,
+    version: log.change.version,
+    deleted: log.change.deleted,
+  }))
+  accept(objectIds)
+}
+
+const router = useRouter()
+function reset_filter() {
+  router.replace({ ...route, query: undefined })
+}
+
+function validate_selection() {
+  accept_selection()
+  reset_filter()
+}
+
+const scrollCount = ref(10)
+function scrollLoad() {
+  scrollCount.value += 10
+}
+
+function matchFilterBySelectors(selectors: string[]): boolean {
+  return !!(route.query.filterBySelectors && intersection(selectors, route.query.filterBySelectors?.toString()).length > 0)
+}
 </script>
 
 <template>
   <div>
-    <el-button-group
-      v-if="isProjectUser && Object.keys($route.query).length"
-    >
-      <el-button type="primary" @click="validate_selection()">
+    <el-button-group v-if="isProjectUser && (Object.keys(route.query).length)">
+      <el-button type="primary" @click="validate_selection">
         ✓ {{ $t('logs.validate_selection') }}
       </el-button>
     </el-button-group>
@@ -144,12 +111,12 @@ export default defineNuxtComponent({
       <li>{{ $t('logs.data_details_manual') }}</li>
     </ul>
 
-    <el-space v-infinite-scroll="scroolLoad" :fill="true" wrap :size="20">
+    <el-space v-infinite-scroll="scrollLoad" :fill="true" wrap :size="20">
       <LogsComponent
-        v-for="log in (logsWithFilter || []).slice(0, scroolCount + 1)"
+        v-for="log in (logsWithFilter || []).slice(0, scrollCount + 1)"
         :key="log.id"
         :log="log"
-        :project="project"
+        :project="projectSlug"
         :project-user="isProjectUser"
         @accept="accept([$event])"
       />
diff --git a/pages/[project]/changes_logs.vue b/pages/[project]/changes_logs.vue
index 85e879a..45c7d14 100644
--- a/pages/[project]/changes_logs.vue
+++ b/pages/[project]/changes_logs.vue
@@ -72,11 +72,6 @@ function removeLogs(objectIds: ObjectId[]) {
       />
     </el-row>
     <log-filters />
-    <logs
-      v-if="logs?.length"
-      :project="projectSlug"
-      :logs="logs"
-      @remove-logs="removeLogs($event)"
-    />
+    <logs :project-slug="projectSlug" @remove-logs="removeLogs($event)" />
   </el-container>
 </template>

From 905ca3784a4699a6e2fac9f678a4e35e30c7191f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Tue, 23 Apr 2024 11:45:59 +0200
Subject: [PATCH 06/11] chore: use custom fetch for log validation #57

---
 components/Logs.vue | 28 ++++++++++++++++++++--------
 libs/types.ts       | 23 -----------------------
 2 files changed, 20 insertions(+), 31 deletions(-)

diff --git a/components/Logs.vue b/components/Logs.vue
index 8153b13..c2424d0 100644
--- a/components/Logs.vue
+++ b/components/Logs.vue
@@ -2,7 +2,6 @@
 import { intersection, uniq } from 'underscore'
 import LogsComponent from '~/components/LogsComponent.vue'
 import type { Log, ObjectId, User } from '~/libs/types'
-import { setLogs } from '~/libs/types'
 
 const props = defineProps<{
   projectSlug: string
@@ -57,13 +56,26 @@ const isProjectUser = computed(() => {
   return !!user.value.projects?.includes(props.projectSlug)
 })
 
-function accept(objectIds: ObjectId[]) {
-  setLogs(useRuntimeConfig().public.API, props.projectSlug, 'accept', objectIds)
-    .then(() => emit('removeLogs', objectIds))
-    .catch((error) => {
-      /* eslint no-alert: 0 */
-      alert(error)
-    })
+async function accept(objectIds: ObjectId[]) {
+  try {
+    await useFetchWithCache(
+      'accept',
+      `${useRuntimeConfig().public.API}/projects/${props.projectSlug}/changes_logs/accept`,
+      {
+        credentials: 'include',
+        method: 'POST',
+        headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(objectIds),
+      },
+    )
+    emit('removeLogs', objectIds)
+  }
+  catch (err: any) {
+    ElMessage.error(err.message)
+  }
 }
 
 function accept_selection() {
diff --git a/libs/types.ts b/libs/types.ts
index caf8ca9..515e749 100644
--- a/libs/types.ts
+++ b/libs/types.ts
@@ -98,29 +98,6 @@ export function getLogs(apiEndpoint: string, project: string): Promise<Log[]> {
   )
 }
 
-export function setLogs(
-  apiEndpoint: string,
-  project: string,
-  logAction: LogAction,
-  objectsIds: ObjectId[],
-): Promise<void> {
-  return fetch(`${apiEndpoint}/projects/${project}/changes_logs/${logAction}`, {
-    credentials: 'include',
-    method: 'POST',
-    headers: {
-      'Accept': 'application/json',
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify(objectsIds),
-  }).then((data) => {
-    if (!data.ok) {
-      return Promise.reject(
-        new Error([data.url, data.status, data.statusText].join(' ')),
-      )
-    }
-  })
-}
-
 export function action2priority(logAction: LogAction | null): number {
   return logAction ? { reject: 2, accept: 0 }[logAction] : 1
 }

From 351b331d2b2824fd74a888515dd6ed50246713c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Tue, 23 Apr 2024 12:23:30 +0200
Subject: [PATCH 07/11] chore: create log-validator-bulk component #57

---
 components/LogValidatorBulk.vue  |  11 ++++
 components/Logs.vue              | 103 ++----------------------------
 pages/[project]/changes_logs.vue | 106 +++++++++++++++++++++++++++++--
 3 files changed, 118 insertions(+), 102 deletions(-)
 create mode 100644 components/LogValidatorBulk.vue

diff --git a/components/LogValidatorBulk.vue b/components/LogValidatorBulk.vue
new file mode 100644
index 0000000..118b0cf
--- /dev/null
+++ b/components/LogValidatorBulk.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineEmits(['bulkValidation'])
+</script>
+
+<template>
+  <el-button-group>
+    <el-button type="primary" @click="$emit('bulkValidation')">
+      ✓ {{ $t('logs.validate_selection') }}
+    </el-button>
+  </el-button-group>
+</template>
diff --git a/components/Logs.vue b/components/Logs.vue
index c2424d0..f9c66dc 100644
--- a/components/Logs.vue
+++ b/components/Logs.vue
@@ -1,121 +1,28 @@
 <script setup lang="ts">
-import { intersection, uniq } from 'underscore'
 import LogsComponent from '~/components/LogsComponent.vue'
-import type { Log, ObjectId, User } from '~/libs/types'
+import type { Log, User } from '~/libs/types'
 
 const props = defineProps<{
+  logs: Log[]
   projectSlug: string
 }>()
 
-const emit = defineEmits<{
-  (e: 'removeLogs', objectIds: ObjectId[]): void
-}>()
+defineEmits(['validate'])
 
-const logs = useState<Log[]>('logs')
 const user = useState<User>('user')
 
-const route = useRoute()
-const logsWithFilter = computed(() => {
-  return logs.value.filter((log) => {
-    const changesetsUsers
-      = route.query.filterByUsers !== undefined
-      && uniq(
-        (log.base ? log.changesets.slice(1) : log.changesets).map(
-          (changeset) => changeset.user,
-        ),
-      )
-    return (
-      (route.query.filterByAction === undefined
-      || Object.values(log.diff_attribs || {})
-        .concat(Object.values(log.diff_tags || {}))
-        .some(
-          (actions) =>
-            actions?.some(
-              (action) => action[0] === route.query.filterByAction,
-            ) || false,
-        ))
-        && (route.query.filterByUserGroups === undefined
-        || log.matches.some((match) =>
-          match.user_groups.includes(route.query.filterByUserGroups as string),
-        ))
-        && (route.query.filterBySelectors === undefined
-        || log.matches.some((match) =>
-          matchFilterBySelectors(match.selectors),
-        ))
-        && (route.query.filterByUsers === undefined
-        || (changesetsUsers
-        && changesetsUsers.length === 1
-        && changesetsUsers[0] === route.query.filterByUsers))
-        && (route.query.filterByDate === undefined
-        || log.change.created.substring(0, 10) === route.query.filterByDate)
-    )
-  })
-})
-
 const isProjectUser = computed(() => {
   return !!user.value.projects?.includes(props.projectSlug)
 })
 
-async function accept(objectIds: ObjectId[]) {
-  try {
-    await useFetchWithCache(
-      'accept',
-      `${useRuntimeConfig().public.API}/projects/${props.projectSlug}/changes_logs/accept`,
-      {
-        credentials: 'include',
-        method: 'POST',
-        headers: {
-          'Accept': 'application/json',
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(objectIds),
-      },
-    )
-    emit('removeLogs', objectIds)
-  }
-  catch (err: any) {
-    ElMessage.error(err.message)
-  }
-}
-
-function accept_selection() {
-  const objectIds = logsWithFilter.value.map((log) => ({
-    objtype: log.objtype,
-    id: log.id,
-    version: log.change.version,
-    deleted: log.change.deleted,
-  }))
-  accept(objectIds)
-}
-
-const router = useRouter()
-function reset_filter() {
-  router.replace({ ...route, query: undefined })
-}
-
-function validate_selection() {
-  accept_selection()
-  reset_filter()
-}
-
 const scrollCount = ref(10)
 function scrollLoad() {
   scrollCount.value += 10
 }
-
-function matchFilterBySelectors(selectors: string[]): boolean {
-  return !!(route.query.filterBySelectors && intersection(selectors, route.query.filterBySelectors?.toString()).length > 0)
-}
 </script>
 
 <template>
   <div>
-    <el-button-group v-if="isProjectUser && (Object.keys(route.query).length)">
-      <el-button type="primary" @click="validate_selection">
-        ✓ {{ $t('logs.validate_selection') }}
-      </el-button>
-    </el-button-group>
-
     <h3>{{ $t('logs.data') }}</h3>
     <p>{{ $t('logs.data_details') }}</p>
     <ul>
@@ -125,12 +32,12 @@ function matchFilterBySelectors(selectors: string[]): boolean {
 
     <el-space v-infinite-scroll="scrollLoad" :fill="true" wrap :size="20">
       <LogsComponent
-        v-for="log in (logsWithFilter || []).slice(0, scrollCount + 1)"
+        v-for="log in (logs || []).slice(0, scrollCount + 1)"
         :key="log.id"
         :log="log"
         :project="projectSlug"
         :project-user="isProjectUser"
-        @accept="accept([$event])"
+        @accept="$emit('validate', $event)"
       />
     </el-space>
 
diff --git a/pages/[project]/changes_logs.vue b/pages/[project]/changes_logs.vue
index 45c7d14..0a02cd0 100644
--- a/pages/[project]/changes_logs.vue
+++ b/pages/[project]/changes_logs.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import { intersection, uniq } from 'underscore'
 import type { Geometry } from 'geojson'
-import type { Log, ObjectId, Project } from '~/libs/types'
+import type { Log, ObjectId, Project, User } from '~/libs/types'
 
 definePageMeta({
   validate({ params }) {
@@ -8,8 +9,8 @@ definePageMeta({
   },
 })
 
-const params = useRoute().params
-const projectSlug = params.project as string
+const route = useRoute()
+const projectSlug = route.params.project as string
 const project = ref<Project>()
 const logs = ref<Log[]>()
 
@@ -31,6 +32,47 @@ catch (err: any) {
   ElMessage.error(err.message)
 }
 
+const logsFiltered = computed(() => {
+  if (!logs.value?.length) {
+    return []
+  }
+
+  return logs.value.filter((log) => {
+    const changesetsUsers
+      = route.query.filterByUsers !== undefined
+      && uniq(
+        (log.base ? log.changesets.slice(1) : log.changesets).map(
+          (changeset) => changeset.user,
+        ),
+      )
+    return (
+      (route.query.filterByAction === undefined
+      || Object.values(log.diff_attribs || {})
+        .concat(Object.values(log.diff_tags || {}))
+        .some(
+          (actions) =>
+            actions?.some(
+              (action) => action[0] === route.query.filterByAction,
+            ) || false,
+        ))
+        && (route.query.filterByUserGroups === undefined
+        || log.matches.some((match) =>
+          match.user_groups.includes(route.query.filterByUserGroups as string),
+        ))
+        && (route.query.filterBySelectors === undefined
+        || log.matches.some((match) =>
+          matchFilterBySelectors(match.selectors),
+        ))
+        && (route.query.filterByUsers === undefined
+        || (changesetsUsers
+        && changesetsUsers.length === 1
+        && changesetsUsers[0] === route.query.filterByUsers))
+        && (route.query.filterByDate === undefined
+        || log.change.created.substring(0, 10) === route.query.filterByDate)
+    )
+  })
+})
+
 const baseGeoms = computed(() => {
   if (!logs.value) {
     return []
@@ -49,6 +91,18 @@ const changeGeoms = computed(() => {
   return logs.value.map((log) => log.change.geom)
 })
 
+const user = useState<User>('user')
+const isProjectUser = computed(() => {
+  if (!user.value) {
+    return false
+  }
+  return !!user.value.projects?.includes(projectSlug)
+})
+
+function matchFilterBySelectors(selectors: string[]): boolean {
+  return !!(route.query.filterBySelectors && intersection(selectors, route.query.filterBySelectors?.toString()).length > 0)
+}
+
 function removeLogs(objectIds: ObjectId[]) {
   logs.value = logs.value?.filter(
     (log) =>
@@ -57,6 +111,42 @@ function removeLogs(objectIds: ObjectId[]) {
       ) === -1,
   )
 }
+
+async function validate(objectIds: ObjectId[]) {
+  try {
+    await useFetchWithCache(
+      'accept',
+      `${useRuntimeConfig().public.API}/projects/${projectSlug}/changes_logs/accept`,
+      {
+        credentials: 'include',
+        method: 'POST',
+        headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(objectIds),
+      },
+    )
+    removeLogs(objectIds)
+  }
+  catch (err: any) {
+    ElMessage.error(err.message)
+  }
+}
+
+const router = useRouter()
+async function handleBulkValidation() {
+  const objectIds = logsFiltered.value.map((log) => ({
+    objtype: log.objtype,
+    id: log.id,
+    version: log.change.version,
+    deleted: log.change.deleted,
+  }))
+
+  validate(objectIds)
+
+  await router.replace({ ...route, query: undefined })
+}
 </script>
 
 <template>
@@ -72,6 +162,14 @@ function removeLogs(objectIds: ObjectId[]) {
       />
     </el-row>
     <log-filters />
-    <logs :project-slug="projectSlug" @remove-logs="removeLogs($event)" />
+    <log-validator-bulk
+      v-if="isProjectUser && (Object.keys(route.query).length)"
+      @bulk-validation="handleBulkValidation"
+    />
+    <!-- <logs
+      :logs="logsFiltered"
+      :project-slug="projectSlug"
+      @validate="validate"
+    /> -->
   </el-container>
 </template>

From 3d44f209dd28b55d62f56440f08487223daf01d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Tue, 23 Apr 2024 14:43:49 +0200
Subject: [PATCH 08/11] chore: rename logs to log-list #57

---
 components/{Logs.vue => LogList.vue} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename components/{Logs.vue => LogList.vue} (100%)

diff --git a/components/Logs.vue b/components/LogList.vue
similarity index 100%
rename from components/Logs.vue
rename to components/LogList.vue

From 1362f86e8d23466206efa79a5eb2ba8943234771 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Tue, 23 Apr 2024 14:48:46 +0200
Subject: [PATCH 09/11] chore: rename logs-component to log-item #57

---
 components/{LogsComponent.vue => LogItem.vue} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename components/{LogsComponent.vue => LogItem.vue} (100%)

diff --git a/components/LogsComponent.vue b/components/LogItem.vue
similarity index 100%
rename from components/LogsComponent.vue
rename to components/LogItem.vue

From 30a7f0686329414be9f0878013d0af8baf4a0cac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Tue, 23 Apr 2024 15:01:04 +0200
Subject: [PATCH 10/11] chore: convert log-item to script setup style #57

---
 components/LogItem.vue | 63 ++++++++++++++----------------------------
 1 file changed, 20 insertions(+), 43 deletions(-)

diff --git a/components/LogItem.vue b/components/LogItem.vue
index f65a1ea..506b514 100644
--- a/components/LogItem.vue
+++ b/components/LogItem.vue
@@ -1,45 +1,26 @@
-<script lang="ts">
-import type { PropType } from 'vue'
+<script setup lang="ts">
 import LazyComponent from 'v-lazy-component'
-import Diff from '~/components/Diff.vue'
 import type { Log, ObjType, ObjTypeFull, ObjectId } from '~/libs/types'
 import { objTypeFull } from '~/libs/types'
-import Changesets from '~/components/Changesets.vue'
 
-export default defineNuxtComponent({
-  name: 'LogsComponent',
+const props = defineProps<{
+  log: Log
+  project: string
+  projectUser: boolean
+}>()
 
-  components: {
-    Changesets,
-    Diff,
-    LazyComponent,
-  },
+defineEmits<{
+  (e: 'accept', objectId: ObjectId): void
+}>()
 
-  props: {
-    log: {
-      type: Object as PropType<Log>,
-      required: true,
-    },
-    project: {
-      type: String,
-      required: true,
-    },
-    projectUser: {
-      type: Boolean,
-      required: true,
-    },
-  },
-
-  emits: {
-    accept: (_objectId: ObjectId) => true,
-  },
-
-  methods: {
-    objtypeFull(objtype: ObjType): ObjTypeFull {
-      return objTypeFull(objtype)
-    },
-  },
+const logSorted = computed(() => {
+  const sorted = props.log
+  return sorted.matches.sort()
 })
+
+function objtypeFull(objtype: ObjType): ObjTypeFull {
+  return objTypeFull(objtype)
+}
 </script>
 
 <template>
@@ -48,9 +29,7 @@ export default defineNuxtComponent({
       <div class="card-header">
         <span>
           <a
-            :href="`https://www.openstreetmap.org/${objtypeFull(log.objtype)}/${
-              log.id
-            }/history`"
+            :href="`https://www.openstreetmap.org/${objtypeFull(log.objtype)}/${log.id}/history`"
             target="_blank"
           >
             {{ log.objtype }}{{ log.id }}
@@ -90,7 +69,7 @@ export default defineNuxtComponent({
             📌 {{ text }}
           </el-tag>
           <el-tag
-            v-for="match in log.matches.sort()"
+            v-for="match in logSorted"
             :key="match.selectors.join(';')"
             size="small"
             type="warning"
@@ -176,12 +155,10 @@ export default defineNuxtComponent({
         </template>v{{
           log.change.version
         }}
-        <Changesets
-          :changesets="log.base ? log.changesets.slice(1) : log.changesets"
-        />
+        <changesets :changesets="log.base ? log.changesets.slice(1) : log.changesets" />
       </el-col>
       <el-col :span="7">
-        <Diff
+        <diff
           :src="log.base"
           :dst="log.change"
           :diff="log.diff_attribs || {}"

From 8bf4734b4fe898c90b1d054bb87d6cb1a5e8b498 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?= <noe.viricel@wazo-lab.io>
Date: Wed, 24 Apr 2024 09:47:02 +0200
Subject: [PATCH 11/11] fix: infinite scroll #57

---
 app.vue                          |  4 +--
 components/LogList.vue           | 48 +++++++++++---------------------
 pages/[project]/changes_logs.vue | 28 +++++++++++++++----
 pages/index.vue                  |  4 +--
 4 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/app.vue b/app.vue
index 86b5213..6f2eaae 100644
--- a/app.vue
+++ b/app.vue
@@ -27,9 +27,7 @@ catch (err: any) {
   <nuxt-layout>
     <el-container direction="vertical">
       <app-menu />
-      <el-main>
-        <nuxt-page />
-      </el-main>
+      <nuxt-page />
       <app-footer />
     </el-container>
   </nuxt-layout>
diff --git a/components/LogList.vue b/components/LogList.vue
index f9c66dc..69bd80f 100644
--- a/components/LogList.vue
+++ b/components/LogList.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import LogsComponent from '~/components/LogsComponent.vue'
 import type { Log, User } from '~/libs/types'
 
 const props = defineProps<{
@@ -10,44 +9,29 @@ const props = defineProps<{
 defineEmits(['validate'])
 
 const user = useState<User>('user')
-
 const isProjectUser = computed(() => {
+  if (!user.value) {
+    return false
+  }
   return !!user.value.projects?.includes(props.projectSlug)
 })
 
-const scrollCount = ref(10)
+const scrollCount = ref(2)
+const lazyLogs = computed(() => props.logs.slice(0, scrollCount.value))
 function scrollLoad() {
-  scrollCount.value += 10
+  scrollCount.value += 2
 }
 </script>
 
 <template>
-  <div>
-    <h3>{{ $t('logs.data') }}</h3>
-    <p>{{ $t('logs.data_details') }}</p>
-    <ul>
-      <li>{{ $t('logs.data_details_osm') }}</li>
-      <li>{{ $t('logs.data_details_manual') }}</li>
-    </ul>
-
-    <el-space v-infinite-scroll="scrollLoad" :fill="true" wrap :size="20">
-      <LogsComponent
-        v-for="log in (logs || []).slice(0, scrollCount + 1)"
-        :key="log.id"
-        :log="log"
-        :project="projectSlug"
-        :project-user="isProjectUser"
-        @accept="$emit('validate', $event)"
-      />
-    </el-space>
-
-    <iframe name="hidden_josm_target" style="display: none" />
-  </div>
+  <el-space v-infinite-scroll="scrollLoad" :fill="true" wrap :size="20">
+    <log-item
+      v-for="log in lazyLogs"
+      :key="log.id"
+      :log="log"
+      :project="projectSlug"
+      :project-user="isProjectUser"
+      @accept="$emit('validate', $event)"
+    />
+  </el-space>
 </template>
-
-<style scoped>
-.item {
-  margin-top: 0.7em;
-  margin-right: 1.3em;
-}
-</style>
diff --git a/pages/[project]/changes_logs.vue b/pages/[project]/changes_logs.vue
index 0a02cd0..21328e4 100644
--- a/pages/[project]/changes_logs.vue
+++ b/pages/[project]/changes_logs.vue
@@ -136,7 +136,11 @@ async function validate(objectIds: ObjectId[]) {
 
 const router = useRouter()
 async function handleBulkValidation() {
-  const objectIds = logsFiltered.value.map((log) => ({
+  if (!logs.value) {
+    return
+  }
+
+  const objectIds = logs.value.map((log) => ({
     objtype: log.objtype,
     id: log.id,
     version: log.change.version,
@@ -150,7 +154,7 @@ async function handleBulkValidation() {
 </script>
 
 <template>
-  <el-container direction="vertical">
+  <el-main>
     <!-- TODO: Improve this component for reuse -->
     <project-light v-if="project" :project="project" />
     <!-- TODO: Create a component -->
@@ -166,10 +170,24 @@ async function handleBulkValidation() {
       v-if="isProjectUser && (Object.keys(route.query).length)"
       @bulk-validation="handleBulkValidation"
     />
-    <!-- <logs
+    <h3>{{ $t('logs.data') }}</h3>
+    <p>{{ $t('logs.data_details') }}</p>
+    <ul>
+      <li>{{ $t('logs.data_details_osm') }}</li>
+      <li>{{ $t('logs.data_details_manual') }}</li>
+    </ul>
+    <log-list
+      v-if="logs?.length"
       :logs="logsFiltered"
       :project-slug="projectSlug"
       @validate="validate"
-    /> -->
-  </el-container>
+    />
+    <iframe name="hidden_josm_target" style="display: none" />
+  </el-main>
 </template>
+
+<style scope>
+.el-main {
+  overflow: initial;
+}
+</style>
diff --git a/pages/index.vue b/pages/index.vue
index 27efdad..2c26ab1 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -16,7 +16,7 @@ otherProjects.value = other
 </script>
 
 <template>
-  <div>
+  <el-main>
     <h1>{{ $t('app.title') }}</h1>
 
     <el-row>
@@ -72,5 +72,5 @@ otherProjects.value = other
     </template>
 
     <el-empty v-else :description="$t('page.index.empty')" :image-size="50" />
-  </div>
+  </el-main>
 </template>