From 6d471ce0f429cd15a102e445489268e765e2d230 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 10:23:36 +0200
Subject: [PATCH] chore: convert logs to script setup style #65

---
 components/Logs.vue | 381 +++++++++++++++++++-------------------------
 1 file changed, 162 insertions(+), 219 deletions(-)

diff --git a/components/Logs.vue b/components/Logs.vue
index 5e7fa51..0e2f960 100644
--- a/components/Logs.vue
+++ b/components/Logs.vue
@@ -1,252 +1,195 @@
-<script lang="ts">
-import type { PropType } from 'vue'
-import _ from 'underscore'
+<script setup lang="ts">
+import { countBy, indexBy, intersection, sortBy, uniq } 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'
 
-export default defineNuxtComponent({
-  name: 'LogsComponent',
+const props = defineProps<{
+  project: string
+  logs: Log[]
+}>()
 
-  components: {
-    LogsComponent,
-  },
+const emit = defineEmits<{
+  (e: 'removeLogs', objectIds: ObjectId[]): void
+}>()
 
-  props: {
-    project: {
-      type: String,
-      required: true,
-    },
-    logs: {
-      type: Array as PropType<Log[]>,
-      required: true,
-    },
-  },
-
-  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,
-    }
-  },
-
-  setup() {
-    const user = useState<User>('user')
-
-    return { user }
-  },
-
-  watch: {
-    filterByAction() {
-      this.updateUrl()
-    },
-    filterByUserGroups() {
-      this.updateUrl()
-    },
-    filterBySelectors() {
-      this.updateUrl()
-    },
-    filterByUsers() {
-      this.updateUrl()
-    },
-    filterByDate() {
-      this.updateUrl()
-    },
-  },
+const route = useRoute()
+const filterByAction = ref<string | undefined>(route.query.filterByAction as string)
+const filterByUserGroups = ref<string | undefined>(route.query.filterByUserGroups as string)
+const filterBySelectors = ref<string[] | undefined>(route.query.filterByUserGroups as string[])
+const filterByUsers = ref<string | undefined>(route.query.filterByUsers as string)
+const filterByDate = ref<string | undefined>(route.query.filterByDate as string)
+const scroolCount = ref<number>(10)
 
-  emits: {
-    removeLogs: (_objectIds: ObjectId[]) => true,
-  },
+const stats = computed(() => {
+  const actions = props.logs
+    .map((log) =>
+      uniq(
+        [
+          ...Object.values(log.diff_attribs || {}),
+          ...Object.values(log.diff_tags || {}),
+        ]
+          .flat(1)
+          .map((action) => action[0]),
+      ),
+    )
+    .flat(1)
+  return getStats(actions)
+})
 
-  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)
-    },
+const statSelectors = computed(() => {
+  const matches = props.logs.map((log) => uniq(log.matches).flat()).flat(1)
+  return getStats(matches, (m) => m.selectors.join(';'))
+})
 
-    statSelectors() {
-      const matches = this.logs.map((log) => _.uniq(log.matches).flat()).flat(1)
-      return this.count(matches, (m) => m.selectors.join(';'))
-    },
+const statUserGroups = computed(() => {
+  const userGroups = props.logs
+    .map((log) => uniq(log.matches.map((m) => m.user_groups).flat(2)))
+    .flat(1)
+  return getStats(userGroups)
+})
 
-    statUserGroups() {
-      const userGroups = this.logs
-        .map((log) => _.uniq(log.matches.map((m) => m.user_groups).flat(2)))
-        .flat(1)
-      return this.count(userGroups)
-    },
+const statUsers = computed(() => {
+  const users = props.logs
+    .map((log) =>
+      (log.base ? log.changesets.slice(1) : log.changesets).map(
+        (changeset) => changeset.user,
+      ),
+    )
+    .flat(2)
+  return getStats(users)
+})
 
-    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)
-    },
+const statDates = computed(() => {
+  const dates = props.logs.map((log) => log.change.created.substring(0, 10))
+  return getStats(dates).sort()
+})
 
-    statDates() {
-      const dates = this.logs.map((log) => log.change.created.substring(0, 10))
-      return this.count(dates).sort()
-    },
+const logsWithFilter = computed(() => {
+  return props.logs.filter((log) => {
+    const changesetsUsers
+      = filterByUsers.value !== undefined
+      && uniq(
+        (log.base ? log.changesets.slice(1) : log.changesets).map(
+          (changeset) => changeset.user,
+        ),
+      )
+    return (
+      (filterByAction.value === undefined
+      || Object.values(log.diff_attribs || {})
+        .concat(Object.values(log.diff_tags || {}))
+        .some(
+          (actions) =>
+            actions?.some(
+              (action) => action[0] === filterByAction.value,
+            ) || false,
+        ))
+        && (filterByUserGroups.value === undefined
+        || log.matches.some((match) =>
+          match.user_groups.includes(filterByUserGroups.value!),
+        ))
+        && (filterBySelectors.value === undefined
+        || log.matches.some((match) =>
+          matchFilterBySelectors(match.selectors),
+        ))
+        && (filterByUsers.value === undefined
+        || (changesetsUsers
+        && changesetsUsers.length === 1
+        && changesetsUsers[0] === filterByUsers.value))
+        && (filterByDate.value === undefined
+        || log.change.created.substring(0, 10) === filterByDate.value)
+    )
+  })
+})
 
-    logsWithFilter() {
-      return this.logs.filter((log) => {
-        const changesetsUsers
-          = this.filterByUsers !== undefined
-          && _.uniq(
-            (log.base ? log.changesets.slice(1) : log.changesets).map(
-              (changeset) => changeset.user,
-            ),
-          )
-        return (
-          (this.filterByAction === undefined
-          || Object.values(log.diff_attribs || {})
-            .concat(Object.values(log.diff_tags || {}))
-            .some(
-              (actions) =>
-                actions?.some(
-                  (action) => action[0] === this.filterByAction,
-                ) || false,
-            ))
-            && (this.filterByUserGroups === undefined
-            || log.matches.some((match) =>
-              match.user_groups.includes(this.filterByUserGroups!),
-            ))
-            && (this.filterBySelectors === undefined
-            || log.matches.some((match) =>
-              this.matchFilterBySelectors(match.selectors),
-            ))
-            && (this.filterByUsers === undefined
-            || (changesetsUsers
-            && changesetsUsers.length === 1
-            && changesetsUsers[0] === this.filterByUsers))
-            && (this.filterByDate === undefined
-            || log.change.created.substring(0, 10) === this.filterByDate)
-        )
-      })
-    },
+const user = useState<User>('user')
+const isProjectUser = computed(() => {
+  return !!user.value.projects?.includes(props.project)
+})
 
-    isProjectUser(): boolean {
-      return !!this.user?.projects?.includes(this.project)
-    },
+const baseGeoms = computed(() => {
+  return props.logs
+    .map((log) => log.base?.geom)
+    .filter((geom): geom is Geometry => !!geom)
+})
 
-    baseGeoms(): Geometry[] {
-      return this.logs
-        .map((log) => log.base?.geom)
-        .filter((geom): geom is Geometry => !!geom)
-    },
+const changeGeoms = computed(() => {
+  return props.logs.map((log) => log.change.geom)
+})
 
-    changeGeoms(): Geometry[] {
-      return this.logs.map((log) => log.change.geom)
-    },
-  },
+watch(route.query, updateUrl)
 
-  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])
-    },
+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])
+}
 
-    accept(objectIds: ObjectId[]) {
-      setLogs(useRuntimeConfig().public.API, this.project, 'accept', objectIds)
-        .then(() => this.$emit('removeLogs', objectIds))
-        .catch((error) => {
-          /* eslint no-alert: 0 */
-          alert(error)
-        })
-    },
+function accept(objectIds: ObjectId[]) {
+  setLogs(useRuntimeConfig().public.API, props.project, 'accept', objectIds)
+    .then(() => 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)
-    },
+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)
+}
 
-    reset_filter() {
-      this.filterByAction = undefined
-      this.filterByUserGroups = undefined
-      this.filterBySelectors = undefined
-      this.filterByUsers = undefined
-      this.filterByDate = undefined
-    },
+function reset_filter() {
+  filterByAction.value = undefined
+  filterByUserGroups.value = undefined
+  filterBySelectors.value = undefined
+  filterByUsers.value = undefined
+  filterByDate.value = undefined
+}
 
-    validate_selection() {
-      this.accept_selection()
-      this.reset_filter()
-    },
+function validate_selection() {
+  accept_selection()
+  reset_filter()
+}
 
-    scroolLoad(): void {
-      this.scroolCount += 10
-    },
+function scroolLoad() {
+  scroolCount.value += 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,
-        },
-      })
+const router = useRouter()
+function updateUrl() {
+  router.replace({
+    name: route.name || undefined,
+    query: {
+      ...route.query,
+      filterByAction: filterByAction.value,
+      filterByUserGroups: filterByUserGroups.value,
+      filterBySelectors: filterBySelectors.value,
+      filterByUsers: filterByUsers.value,
+      filterByDate: filterByDate.value,
     },
+  })
+}
 
-    matchFilterBySelectors(selectors: string[]): boolean {
-      return (
-        this.filterBySelectors !== undefined
-        && _.intersection(selectors, this.filterBySelectors).length > 0
-      )
-    },
-  },
-})
+function matchFilterBySelectors(selectors: string[]) {
+  return (
+    filterBySelectors.value !== undefined
+    && intersection(selectors, filterBySelectors.value).length > 0
+  )
+}
 </script>
 
 <template>
   <div>
     <el-row>
-      <DiffMap
+      <diff-map
         :base-geom="baseGeoms"
         :change-geom="changeGeoms"
         style="resize: vertical"