From d81a5b9764b9ae0bb25810df033ffbd45db27eb2 Mon Sep 17 00:00:00 2001
From: Hao Wu <wuhaoecho@gmail.com>
Date: Fri, 27 Dec 2024 22:45:01 +0800
Subject: [PATCH] Add MDView component and integrate markdown export
 functionality

- Introduced `MDView.vue` component to display and copy markdown content.
- Added markdown export dialog in `Home.vue` with corresponding state management.
- Updated `DiaryEditor.vue` to invalidate markdown content queries.
- Adjusted styling and formatting in `TodoEditor.vue`.
---
 web/src/components/DiaryEditor.vue |   1 +
 web/src/components/MDView.vue      | 100 +++++++++++++++++++++++++++++
 web/src/components/TodoEditor.vue  |  20 +++---
 web/src/views/Home.vue             |  21 ++++--
 4 files changed, 127 insertions(+), 15 deletions(-)
 create mode 100644 web/src/components/MDView.vue

diff --git a/web/src/components/DiaryEditor.vue b/web/src/components/DiaryEditor.vue
index e55618c..6f0dec9 100644
--- a/web/src/components/DiaryEditor.vue
+++ b/web/src/components/DiaryEditor.vue
@@ -62,6 +62,7 @@ const mutation = useMutation({
     // 
     // Then use it here:
     queryClient.invalidateQueries({ queryKey: ['todoContent'] });
+    queryClient.invalidateQueries({ queryKey: ['MdContent',props.date] });
   },
   onError: (error) => {
     loading.value = false;
diff --git a/web/src/components/MDView.vue b/web/src/components/MDView.vue
new file mode 100644
index 0000000..196386d
--- /dev/null
+++ b/web/src/components/MDView.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="content">
+    <pre>  {{ content }} </pre>
+    <button v-if="content" @click="copyToClipboard" class="copy-button">
+      <div v-if="copySuccess">
+        <Icon icon="akar-icons:check" />
+      </div>
+      <div v-else>
+        <Icon icon="iconamoon:copy"></Icon>
+      </div>
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, watch } from 'vue';
+import { useQuery } from '@tanstack/vue-query';
+import axios from '@/axiosConfig.js';
+import { Icon } from '@iconify/vue2';
+
+const props = defineProps({
+  noteId: String,
+});
+const copySuccess = ref(false);
+
+const content = ref("");
+const loading = ref(true);
+
+const copyToClipboard = async () => {
+  if (content.value) {
+    try {
+      await navigator.clipboard.writeText(content.value);
+      copySuccess.value = true;
+      setTimeout(() => {
+        copySuccess.value = false;
+      }, 1500); // Reset the message after 1.5 seconds
+    } catch (err) {
+      console.error('Failed to copy text: ', err);
+      // Optionally provide user feedback about the failure
+    }
+  }
+};
+
+const fetchMdContent = async () => {
+  const { isLoading, isError, data, error } = useQuery(
+    {
+      queryKey: ['MdContent', props.noteId],
+      queryFn: async () => {
+        const response = await axios.post('/api/export_md', {
+          id: props.noteId
+        });
+        return response.data;
+      }
+    });
+
+  watch(isLoading, (isLoading) => {
+    loading.value = isLoading;
+  });
+  watch(data, (data) => {
+    if (content) {
+      content.value = data;
+    }
+  });
+
+
+  watch(isError, (hasError) => {
+    if (hasError) {
+      console.error('Error fetching todo content:', error.value);
+    }
+  });
+};
+
+onMounted(() => {
+  fetchMdContent();
+});
+</script>
+
+<style>
+.content {
+  max-width: 65rem;
+  margin: auto;
+}
+
+.copy-button {
+  background-color: #f1f1f1;
+  border: none;
+  color: black;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  cursor: pointer;
+  border-radius: 4px;
+  padding: 10px;
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+}
+
+/* Additional styles... */
+</style>
diff --git a/web/src/components/TodoEditor.vue b/web/src/components/TodoEditor.vue
index ac2f85c..7618029 100644
--- a/web/src/components/TodoEditor.vue
+++ b/web/src/components/TodoEditor.vue
@@ -7,14 +7,14 @@
 
 <script setup>
 defineProps({
-  content: {
-    type: [String, Object],
-    required: true
-  },
-  extensions: {
-    type: Array,
-    required: true
-  }
+        content: {
+                type: [String, Object],
+                required: true
+        },
+        extensions: {
+                type: Array,
+                required: true
+        }
 });
 </script>
 
@@ -35,8 +35,6 @@ defineProps({
 
 
 pre code {
-  font-family: "Fira Code", Courier, Monaco, monospace;
+        font-family: "Fira Code", Courier, Monaco, monospace;
 }
-
-
 </style>
\ No newline at end of file
diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
index 61e4a4b..7fc96f8 100644
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -21,10 +21,16 @@
       <el-dialog :visible="dialogVisible" @close="closeModal">
         <Todo></Todo>
       </el-dialog>
+      <el-dialog :visible="dialogVisibleMd" @close="closeModalMd">
+        <MDView :noteId="date"></MDView>
+      </el-dialog>
       <div class="right-corner">
-         <OnlineStatusIndicator />
+         <OnlineStatusIndicator />  
+        <div @click="openModalMd">
+          <Icon icon="material-symbols:markdown-copy-outline" />
+        </div>
         <div @click="openModal">
-          <Icon icon="streamline:task-list" />
+          <Icon icon="ri:todo-line" />
         </div>
         <div>
         <a href="/content">
@@ -46,13 +52,13 @@ import { Icon } from '@iconify/vue2';
 import tableOfContents from '@iconify/icons-mdi/table-of-contents';
 import DiaryEditor from "@/components/DiaryEditor";
 import Todo from '@/components/Todo.vue';
+import MDView from '@/components/MDView.vue';
 import OnlineStatusIndicator from '@/components/OnlineStatusIndicator.vue';
 
-
-
 const now = ref(moment());
 const date = ref(moment().format('YYYYMMDD'))
 const dialogVisible = ref(false)
+const dialogVisibleMd = ref(false)
 
 onMounted(() => {
   // eslint-disable-next-line no-unused-vars
@@ -96,6 +102,13 @@ function closeModal() {
   dialogVisible.value = false
 }
 
+function openModalMd() {
+  dialogVisibleMd.value = true
+}
+function closeModalMd() {
+  dialogVisibleMd.value = false
+}
+
 </script>
 
 <style scoped>