From 79396e51f60081b79092decbcaa18a9400474043 Mon Sep 17 00:00:00 2001
From: Denis Gukov <denguk@gmail.com>
Date: Thu, 21 Nov 2024 19:07:08 +0500
Subject: [PATCH] feat(ui): extend message log dialog

---
 web/src/App.vue                    |  3 ++-
 web/src/components/EditDialog.vue  | 26 +++++++++++++++++++++++++-
 web/src/components/TaskLogView.vue |  6 +++++-
 3 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index 46924272..b7989e68 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -71,9 +71,10 @@
 
     <EditDialog
       v-model="taskLogDialog"
-      save-button-text="Delete"
       :max-width="1000"
       :hide-buttons="true"
+      :expandable="true"
+      name="TaskLogDialog"
       @close="onTaskLogDialogClosed()"
     >
       <template v-slot:title={}>
diff --git a/web/src/components/EditDialog.vue b/web/src/components/EditDialog.vue
index f6c47dd5..bde5a38f 100644
--- a/web/src/components/EditDialog.vue
+++ b/web/src/components/EditDialog.vue
@@ -8,6 +8,7 @@ Can use used in tandem with ItemFormBase.js. See KeyForm.vue for example.
     v-model="dialog"
     :max-width="maxWidth || 400"
     persistent
+    :fullscreen="fullscreen"
     :transition="false"
     :content-class="'item-dialog item-dialog--' + position"
   >
@@ -19,7 +20,12 @@ Can use used in tandem with ItemFormBase.js. See KeyForm.vue for example.
         </slot>
 
         <v-spacer></v-spacer>
-        <v-btn icon @click="close()">
+
+        <v-btn icon @click="toggleFullscreen()" class="mr-3">
+          <v-icon>mdi-arrow-{{ fullscreen ? 'collapse' : 'expand' }}</v-icon>
+        </v-btn>
+
+        <v-btn icon @click="close()" style="margin-right: -6px;">
           <v-icon>mdi-close</v-icon>
         </v-btn>
       </v-card-title>
@@ -82,6 +88,7 @@ export default {
     dontCloseOnSave: Boolean,
     cancelButtonText: String,
     saveButtonText: String,
+    expandable: Boolean,
   },
 
   data() {
@@ -89,6 +96,7 @@ export default {
       dialog: false,
       needSave: false,
       needReset: false,
+      fullscreen: null,
     };
   },
 
@@ -106,6 +114,18 @@ export default {
     async value(val) {
       this.dialog = val;
     },
+
+    fullscreen(val) {
+      if (val) {
+        localStorage.setItem(`EditDialog_${this.name}__fullscreen`, '1');
+      } else {
+        localStorage.removeItem(`EditDialog_${this.name}__fullscreen`);
+      }
+    },
+  },
+
+  created() {
+    this.fullscreen = localStorage.getItem(`EditDialog_${this.name}__fullscreen`) === '1';
   },
 
   methods: {
@@ -118,6 +138,10 @@ export default {
       this.close(e);
     },
 
+    toggleFullscreen() {
+      this.fullscreen = !this.fullscreen;
+    },
+
     close(e) {
       this.dialog = false;
 
diff --git a/web/src/components/TaskLogView.vue b/web/src/components/TaskLogView.vue
index 495c0b56..c6fa6029 100644
--- a/web/src/components/TaskLogView.vue
+++ b/web/src/components/TaskLogView.vue
@@ -123,6 +123,10 @@
   padding: 5px 10px 50px;
 }
 
+.v-dialog--fullscreen .task-log-records {
+  height: calc(100vh - 136px);
+}
+
 .task-log-view--with-message .task-log-records {
   height: calc(100vh - 300px);
 }
@@ -140,7 +144,7 @@
 
 .task-log-records__output {
   width: 100%;
-  white-space: pre;
+  white-space: pre-wrap;
 }
 
 @media #{map-get($display-breakpoints, 'sm-and-down')} {