add original content to the ui

LlmLaraHub · Jul 26, 2024 · e6c082c · e6c082c
1 parent 0e0902d
commit e6c082c
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 16 deletions.
diff --git a/app/Http/Resources/DocumentResource.php b/app/Http/Resources/DocumentResource.php
@@ -26,6 +26,7 @@ public function toArray(Request $request): array
             'link' => $this->link,
             'summary' => $this->summary,
             'summary_markdown' => $summary,
+            'original_content' => str($this->original_content)->markdown(),
             'type' => str($this->type->name)->title()->toString(),
             'status' => str($this->status->name)->headline()->toString(),
             'document_chunks_count' => $this->document_chunks()->where('section_number', 0)->count(),

diff --git a/resources/js/Pages/Collection/Components/ShowDocument.vue b/resources/js/Pages/Collection/Components/ShowDocument.vue
@@ -38,24 +38,40 @@
                                 type="button" class="btn btn-ghost rounded-none" @click="toggleEdit">
                                 edit</button>
                         </div>
-                      <h2 class="font-bold">Summary:</h2>
-                        <div v-if="updating" class="mt-10">
-                            <div class="flex w-full flex-col gap-4">
-                                <div class="skeleton bg-gray-700 h-4 w-28"></div>
-                                <div class="skeleton bg-gray-700 h-4 w-full"></div>
-                                <div class="skeleton bg-gray-700 h-4 w-full"></div>
-                                <div class="skeleton bg-gray-700  h-32 w-full"></div>
+                    <div role="tablist" class="tabs tabs-bordered mt-4 mb-4">
+                        <a role="tab" class="tab"
+                        :class="{ 'tab-active': activeTab === 'summary' }"
+                        @click="toggleTab('summary')"
+                        >Summary</a>
+                        <a role="tab" class="tab"
+                           :class="{ 'tab-active': activeTab === 'original_content' }"
+                           @click="toggleTab('original_content')"
+                        >Original Data</a>
+                    </div>
+                        <div v-if="activeTab === 'summary'">
+                            <h2 class="font-bold">Summary:</h2>
+                            <div v-if="updating" class="mt-10">
+                                <div class="flex w-full flex-col gap-4">
+                                    <div class="skeleton bg-gray-700 h-4 w-28"></div>
+                                    <div class="skeleton bg-gray-700 h-4 w-full"></div>
+                                    <div class="skeleton bg-gray-700 h-4 w-full"></div>
+                                    <div class="skeleton bg-gray-700  h-32 w-full"></div>
+                                </div>
+                            </div>
+                            <div
+                                v-if="!updating && !showEdit"
+                                class="prose  mb-10 mt-5" v-html="documentToShow.summary_markdown"></div>
+                            <div v-if="showEdit && !updating && false">
+                                <MdEditor
+                                    theme="dark"
+                                    language="en"
+                                    :preview=false
+                                    v-model="documentToShow.summary" />
                             </div>
                         </div>
-                      <div
-                          v-if="!updating && !showEdit"
-                          class="prose  mb-10 mt-5" v-html="documentToShow.summary_markdown"></div>
-                        <div v-if="showEdit && !updating && false">
-                            <MdEditor
-                                theme="dark"
-                                language="en"
-                                :preview=false
-                                v-model="documentToShow.summary" />
+                        <div v-if="activeTab === 'original_content'">
+                            <div class="prose  mb-10 mt-5" v-html="documentToShow.original_content"></div>
+
                         </div>
                     </div>
                   </div>
@@ -86,6 +102,12 @@ const props = defineProps({
     open: Boolean,
 });
 
+const activeTab = ref('summary');
+
+const toggleTab = (tab) => {
+    activeTab.value = tab;
+}
+
 const documentToShow = ref(props.document);
 
 onMounted(() => {