From 8b130a302caf67e507b53e40e2952206081914d1 Mon Sep 17 00:00:00 2001
From: Novout <novout@hotmail.com>
Date: Wed, 13 Oct 2021 16:57:01 -0300
Subject: [PATCH] feat(editor): last edit time in popover

---
 .../editor/entity/EditorEntityInput.vue       | 21 ++++++++++---------
 .../editor/entity/EditorEntityShowPopover.vue | 14 +++++++++----
 src/use/format.ts                             | 13 ++++++++++--
 3 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/src/components/editor/entity/EditorEntityInput.vue b/src/components/editor/entity/EditorEntityInput.vue
index 6226939d6..0d09974c0 100644
--- a/src/components/editor/entity/EditorEntityInput.vue
+++ b/src/components/editor/entity/EditorEntityInput.vue
@@ -52,6 +52,7 @@
   const { t } = useI18n()
   const emitter = useEmitter()
   const entity = useEntity()
+  const format = useFormat()
 
   const props = defineProps({
     modelValue: String,
@@ -126,8 +127,8 @@
       const content = {
         type: 'page-break',
         raw: '__PAGE_BREAK__',
-        createdAt: useFormat().actually(),
-        updatedAt: useFormat().actually(),
+        createdAt: format.actually(),
+        updatedAt: format.actually(),
       } as ContextStatePageContent
 
       type.value = 'paragraph'
@@ -144,8 +145,8 @@
       const content = {
         type: 'line-break',
         raw: '__LINE_BREAK__',
-        createdAt: useFormat().actually(),
-        updatedAt: useFormat().actually(),
+        createdAt: format.actually(),
+        updatedAt: format.actually(),
       } as ContextStatePageContent
 
       type.value = 'paragraph'
@@ -171,8 +172,8 @@
           const content = {
             type: 'image',
             raw: reader.result,
-            createdAt: useFormat().actually(),
-            updatedAt: useFormat().actually(),
+            createdAt: format.actually(),
+            updatedAt: format.actually(),
           } as ContextStatePageContent
 
           type.value = 'paragraph'
@@ -196,8 +197,8 @@
     const content = {
       type: type.value,
       raw: props.modelValue,
-      createdAt: useFormat().actually(),
-      updatedAt: useFormat().actually(),
+      createdAt: format.actually(),
+      updatedAt: format.actually(),
     } as ContextStatePageContent
 
     type.value = 'paragraph'
@@ -226,8 +227,8 @@
       const content = {
         type: type.value,
         raw: normalize,
-        createdAt: useFormat().actually(),
-        updatedAt: useFormat().actually(),
+        createdAt: format.actually(),
+        updatedAt: format.actually(),
       } as ContextStatePageContent
 
       store.commit('context/addInPageWithPaste', content)
diff --git a/src/components/editor/entity/EditorEntityShowPopover.vue b/src/components/editor/entity/EditorEntityShowPopover.vue
index 51f340007..2606e981d 100644
--- a/src/components/editor/entity/EditorEntityShowPopover.vue
+++ b/src/components/editor/entity/EditorEntityShowPopover.vue
@@ -147,7 +147,7 @@
             </svg>
           </HeroIcon>
         </template>
-        <p>{{ t('editor.aside.entity.up') }}</p>
+        <p>{{ t('editor.aside.props.entity.up') }}</p>
       </EditorEntityShowSelect>
       <EditorEntityShowSelect @click.prevent.stop="onDownEntity">
         <template #icon>
@@ -166,7 +166,7 @@
             </svg>
           </HeroIcon>
         </template>
-        <p>{{ t('editor.aside.entity.down') }}</p>
+        <p>{{ t('editor.aside.props.entity.down') }}</p>
       </EditorEntityShowSelect>
       <EditorEntityShowSelect @click.prevent.stop="onDeleteEntity">
         <template #icon>
@@ -185,7 +185,7 @@
             </svg>
           </HeroIcon>
         </template>
-        <p>{{ t('editor.aside.entity.delete') }}</p>
+        <p>{{ t('editor.aside.props.entity.delete') }}</p>
       </EditorEntityShowSelect>
     </section>
     <HeroIcon class="wb-icon" @mouseenter.prevent.stop="onAdjustEntityWrapper">
@@ -201,21 +201,27 @@
       </svg>
     </HeroIcon>
   </section>
+  <section class="absolute wb-icon right-14 bottom-0 pointer-events-none">
+    <p>{{ update }}</p>
+  </section>
 </template>
 
 <script setup lang="ts">
-  import { reactive } from 'vue'
+  import { reactive, computed } from 'vue'
   import { useStore } from 'vuex'
   import { useI18n } from 'vue-i18n'
+  import { useFormat } from '@/use/format'
 
   const store = useStore()
   const { t } = useI18n()
+  const format = useFormat()
 
   const state = reactive({
     new: false as boolean,
     switcher: false as boolean,
     adjust: false as boolean,
   })
+  const update = computed(() => format.lastTime(props.entity.updatedAt))
 
   const props = defineProps({
     entity: Object as any,
diff --git a/src/use/format.ts b/src/use/format.ts
index 4ebee6ceb..536a4a8ce 100644
--- a/src/use/format.ts
+++ b/src/use/format.ts
@@ -1,4 +1,5 @@
-import { format } from 'date-fns'
+import { format, formatRelative, parse } from 'date-fns'
+import { ptBR, enUS } from 'date-fns/locale'
 
 export const useFormat = () => {
   const simple = (date: Date): string => {
@@ -9,5 +10,13 @@ export const useFormat = () => {
     return simple(new Date())
   }
 
-  return { simple, actually }
+  const lastTime = (updatedAt: string) => {
+    const updatedDate = parse(updatedAt, 'yyyy-MM-dd HH:mm:ss', new Date())
+
+    return formatRelative(updatedDate, new Date(), {
+      locale: document.documentElement.lang === 'pt-BR' ? ptBR : enUS,
+    })
+  }
+
+  return { simple, actually, lastTime }
 }