wip: Refactor documents related components #904

core/client/components/document/KBrowser.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="fit column bg-black">
+    <div class="full-width row justify-between items-center">
+      <div 
+        v-if="document"
+        class="text-subtitle1"
+      >
+
+        {{ document.name }}
+      </div>
+    </div>
+    <div class="full-width col row justify-between items-center">
+      <div 
+        v-if="hasPrevious"
+        class="full-height column justify-center"
+      >
+        <KAction
+          id="previous-button"
+          icon="las la-angle-left"
+          size="1rem"
+          :handler="previous"
+        />
+      </div>
+      <div class="full-height col column justify-center items-center">
+        <KDocument 
+          v-bind="document" 
+          :localize="false"
+          class="fit"
+        />
+      </div>
+      <div 
+        v-if="hasNext"
+        class="full-height column justify-center"
+      >
+        <KAction
+          id="next-button"
+          icon="las la-angle-right"
+          size="1rem"
+          :handler="next"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import { ref, computed, watch } from 'vue'
+import { Storage } from '../../storage.js'
+import KDocument from './KDocument.vue'
+import KAction from '../action/KAction.vue';
+
+// Props
+const props = defineProps({
+  documents: {
+    type: Array,
+    default: () => null
+  },
+  default: {
+    type: String,
+    default: undefined
+  }
+})
+
+// Data
+const index = ref(null)
+const document = ref(null)
+
+// Computed
+const hasPrevious = computed(() => {
+  return _.size(props.documents) > 1
+})
+const hasNext = computed(() => {
+  return _.size(props.documents) > 1
+})
+
+// Watch
+watch(() => [props.documents, props.default], async () => {
+  console.log('[DEBUG] Props changed')
+  index.value = _.findIndex(props.documents, { name: props.default })
+  if (index.value > -1) await refresh()
+}, { immediate: true })
+
+// Functions
+async function previous () {
+  if (index.value === 0) index.value = _.size(props.documents) - 1
+  else index.value = index.value - 1
+  await refresh()
+}
+async function next () {
+  if (index.value === _.size(props.documents) - 1) index.value = 0
+  else index.value = index.value + 1
+  await refresh()
+}
+async function refresh () {
+  document.value = props.documents[index.value]
+  document.value.url = await Storage.getPresignedUrl({ 
+    key: document.value.key, 
+    context: document.value.contextId, 
+    expiresIn: 60 
+  })
+}
+</script>

core/client/components/document/KDocument.vue

@@ -19,7 +19,7 @@ const props = defineProps({
     type: String,
     default: null
   },
-  mimeType: {
+  type: {
     type: String,
     default: null
   },
@@ -35,15 +35,15 @@ const props = defineProps({
 
 // Computed
 const viewer = computed(() => {
-  const mimeType = props.mimeType || guessMimeType()
-  if (!mimeType) return null
-  const viewer = _.get(Document.options, `viewers.${mimeType}`)
+  const type = props.type || guessType()
+  if (!type) return null
+  const viewer = _.get(Document.options, `viewers.${type}`)
   if (!viewer) return null
   return loadComponent(viewer)
 })
 
 // Function
-function guessMimeType () {
+function guessType () {
   if (!props.url) return null
   const index = _.lastIndexOf(props.url, '.')
   if (!index) return null

core/client/components/document/KHtml.vue

@@ -1,8 +1,10 @@
 <template>
-  <div
-    v-if="html"
-    v-html="html"
-  />
+  <q-scroll-area class="fit">
+    <div
+      v-if="html"
+      v-html="html"
+    />
+  </q-scroll-area>  
 </template>
 
 <script setup>

core/client/components/document/KImage.vue

@@ -1,13 +1,13 @@
 <template>
-  <div>
+  <div class="fit column">
     <div v-if="interactive === true" class="fit" >
       <pinch-zoom class="pinch-zoom-controller fit row justify-center items-center" @change="$emit('image-transformed')">
-        <img :src="url" class="fit" :onload="onLoaded" />
+        <img :src="url"  :onload="onLoaded" />
       </pinch-zoom>
 
     </div>
     <div v-else class="fit row justify-center items-center">
-      <img :src="url" class="fit" :onload="onLoaded" />
+      <img :src="url" :onload="onLoaded" />
     </div>
     <q-spinner
       class="absolute-center"

core/client/components/document/KMarkdown.vue

@@ -1,8 +1,10 @@
 <template>
-  <div
-    v-if="html"
-    v-html="html"
-  />
+  <q-scroll-area class="fit">
+    <div
+      v-if="html"
+      v-html="html"
+    />
+  </q-scroll-area>
 </template>
 
 <script setup>