Merge branch 'mde-file-upload' into 'main'

Mde file upload See merge request reportcreator/reportcreator!704
Syslifters · Sep 6, 2024 · 7361fbb · 7361fbb
2 parents 0fcf432 + 5bddb5a
commit 7361fbb
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 18 deletions.
diff --git a/frontend/src/components/FullHeightPage.vue b/frontend/src/components/FullHeightPage.vue
@@ -1,12 +1,16 @@
 <template>
   <div class="h-100 d-flex flex-column">
-    <div class="flex-grow-0">
+    <div v-if="$slots.header" class="flex-grow-0">
       <slot name="header" />
     </div>
 
     <div class="flex-grow-height" :class="{'overflow-y-auto': !props.scrollbar, 'overflow-y-scroll': props.scrollbar}">
       <slot name="default" />
     </div>
+
+    <div v-if="$slots.footer" class="flex-grow-0">
+      <slot name="footer" />
+    </div>
   </div>
 </template>
 

diff --git a/frontend/src/components/Markdown/Page.vue b/frontend/src/components/Markdown/Page.vue
@@ -34,6 +34,11 @@
         </v-col>
       </v-row>
     </template>
+
+    <template #footer>
+      <v-divider />
+      <markdown-statusbar v-if="editorView" v-bind="markdownStatusbarAttrs" />
+    </template>
   </full-height-page>
 </template>
 
@@ -43,7 +48,7 @@ import { MarkdownEditorMode } from '#imports';
 const props = defineProps(makeMarkdownProps());
 const emit = defineEmits(makeMarkdownEmits());
 
-const { editorView, markdownToolbarAttrs, markdownPreviewAttrs, onIntersect, focus, blur } = useMarkdownEditor({
+const { editorView, markdownToolbarAttrs, markdownStatusbarAttrs, markdownPreviewAttrs, onIntersect, focus, blur } = useMarkdownEditor({
   props: computed(() => props),
   emit,
   extensions: markdownEditorPageExtensions(),

diff --git a/frontend/src/components/Markdown/Statusbar.vue b/frontend/src/components/Markdown/Statusbar.vue
@@ -1,12 +1,23 @@
 <template>
-  <div class="mde-statusbar">
-    <template v-if="props.fileUploadEnabled">
-      <span v-if="!props.fileUploadInProgress">Attach files via drag and drop or pasting from clipboard.</span>
-      <span v-else>Upload in progress...</span>
-    </template>
-    <span>lines: {{ lineCount }}</span>
-    <span>words: {{ wordCount }}</span>
-    <span>{{ currentLineNumber }}:{{ currentColNumber }}</span>
+  <div class="mde-statusbar d-flex flex-row">
+    <div v-if="props.uploadFiles">
+      <v-btn 
+         v-if="!props.fileUploadInProgress"
+        @click="fileInput.click()"
+        text="Paste, drop or click to upload files"
+        :disabled="props.disabled"
+        variant="plain"
+        class="btn-upload"
+      />
+      <span v-else><v-progress-circular indeterminate :size="16" width="3" class="mr-1"/> Uploading files...</span>
+      <input ref="fileInput" type="file" multiple @change="e => onUploadFiles(e as InputEvent)" @click.stop :disabled="props.disabled || props.fileUploadInProgress" class="d-none" />
+    </div>
+    <v-spacer />
+    <div class="status-items">
+      <span>lines: {{ lineCount }}</span>
+      <span>words: {{ wordCount }}</span>
+      <span>{{ currentLineNumber }}:{{ currentColNumber }}</span>
+    </div>
   </div>
 </template>
 
@@ -15,8 +26,9 @@ import type { EditorState } from 'reportcreator-markdown/editor';
 
 const props = defineProps<{
   editorState: EditorState;
-  fileUploadEnabled: boolean;
-  fileUploadInProgress: boolean;
+  uploadFiles?: (files: FileList) => Promise<void>;
+  fileUploadInProgress?: boolean;
+  disabled?: boolean;
 }>();
 
 const currentLineNumber = computed(() => props.editorState.doc.lineAt(props.editorState.selection.main.head).number);
@@ -41,20 +53,43 @@ const wordCount = computed(() => {
   return count;
 });
 
+const fileInput = ref();
+async function onUploadFiles(event: InputEvent) {
+  const files = (event.target as HTMLInputElement).files;
+  if (!files || !props.uploadFiles) { return; }
+  try {
+    await props.uploadFiles(files);
+  } finally {
+    if (fileInput.value) {
+      fileInput.value.value = null;
+    }
+  }
+}
+
 </script>
 
 <style lang="scss" scoped>
 .mde-statusbar {
   width: 100%;
   font-size: smaller;
-  text-align: right;
   padding: 0.3em 1em;
   color: #959694;
 
-  span {
-    display: inline-block;
-    min-width: 4em;
-    margin-left: 1em;
+  .status-items {
+    span {
+      display: inline-block;
+      min-width: 4em;
+      margin-left: 1em;
+    }
   }
 }
+
+.btn-upload {
+  font-size: inherit;
+  font-weight: inherit;
+  text-transform: inherit;
+  letter-spacing: inherit;
+  height: unset;
+  padding: 0;
+}
 </style>
diff --git a/frontend/src/composables/markdown.ts b/frontend/src/composables/markdown.ts
@@ -444,8 +444,9 @@ export function useMarkdownEditorBase(options: {
     'onUpdate:markdownEditorMode': (val: MarkdownEditorMode) => options.emit('update:markdownEditorMode', val),
   }));
   const markdownStatusbarAttrs = computed(() => ({
+    disabled: options.props.value.disabled || options.props.value.readonly,
     editorState: editorState.value!,
-    fileUploadEnabled: fileUploadEnabled.value,
+    uploadFiles: fileUploadEnabled.value ? uploadFiles : undefined,
     fileUploadInProgress: fileUploadInProgress.value,
   }));
   const markdownPreviewAttrs = computed(() => ({