From d680335a7dee255a71887bfb797ff193a99005e7 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] chore: move diff-map on high level #57

---
 components/Logs.vue              | 18 ---------------
 pages/[project]/changes_logs.vue | 39 ++++++++++++++++++++++++++++++--
 2 files changed, 37 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..78f8a68 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((): Geometry[] => {
+  if (!logs.value) {
+    return []
+  }
+
+  return logs.value
+    .map((log) => log.base?.geom)
+    .filter((geom): geom is Geometry => !!geom)
+})
+
+const changeGeoms = computed((): Geometry[] => {
+  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,29 @@ 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>
+
+<style scoped>
+.item {
+  margin-top: 0.7em;
+  margin-right: 1.3em;
+}
+</style>