From 735fac4307d31a04d5d8cefcf36e83eb73663747 Mon Sep 17 00:00:00 2001
From: Michael Wedl <michael@syslifters.com>
Date: Fri, 6 Sep 2024 10:09:47 +0200
Subject: [PATCH 1/2] Improve MDE file upload indicator

---
 frontend/src/components/FullHeightPage.vue    |  6 +++-
 frontend/src/components/Markdown/Page.vue     |  7 ++++-
 .../src/components/Markdown/Statusbar.vue     | 30 +++++++++++--------
 3 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/FullHeightPage.vue b/frontend/src/components/FullHeightPage.vue
index 95138ccb1..54ccbbb3a 100644
--- 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
index 33db920b2..9b2bb871a 100644
--- 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
index 6cd46bc50..36f1acf07 100644
--- a/frontend/src/components/Markdown/Statusbar.vue
+++ b/frontend/src/components/Markdown/Statusbar.vue
@@ -1,12 +1,15 @@
 <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.fileUploadEnabled">
+      <span v-if="!props.fileUploadInProgress">Paste or drop to upload files</span>
+      <span v-else><v-progress-circular indeterminate :size="16" width="3" class="mr-1"/> Uploading files...</span>
+    </div>
+    <v-spacer />
+    <div class="status-items">
+      <span>lines: {{ lineCount }}</span>
+      <span>words: {{ wordCount }}</span>
+      <span>{{ currentLineNumber }}:{{ currentColNumber }}</span>
+    </div>
   </div>
 </template>
 
@@ -47,14 +50,15 @@ const wordCount = computed(() => {
 .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;
+    }
   }
 }
 </style>

From 5bddb5a1961c2663fa99139b367ffdf0eade83ea Mon Sep 17 00:00:00 2001
From: Michael Wedl <michael@syslifters.com>
Date: Fri, 6 Sep 2024 10:35:50 +0200
Subject: [PATCH 2/2] Upload files in MDE statusbar

---
 .../src/components/Markdown/Statusbar.vue     | 39 +++++++++++++++++--
 frontend/src/composables/markdown.ts          |  3 +-
 2 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/Markdown/Statusbar.vue b/frontend/src/components/Markdown/Statusbar.vue
index 36f1acf07..343696ba2 100644
--- a/frontend/src/components/Markdown/Statusbar.vue
+++ b/frontend/src/components/Markdown/Statusbar.vue
@@ -1,8 +1,16 @@
 <template>
   <div class="mde-statusbar d-flex flex-row">
-    <div v-if="props.fileUploadEnabled">
-      <span v-if="!props.fileUploadInProgress">Paste or drop to upload files</span>
+    <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">
@@ -18,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);
@@ -44,6 +53,19 @@ 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>
@@ -61,4 +83,13 @@ const wordCount = computed(() => {
     }
   }
 }
+
+.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
index 8cdc2efc3..65f4dce3d 100644
--- 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(() => ({