Remarks Editing

dfpc-coe · Nov 27, 2024 · a76c76e · a76c76e
1 parent 0052963
commit a76c76e
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 25 deletions.
diff --git a/api/web/src/components/CloudTAK/CoTView.vue b/api/web/src/components/CloudTAK/CoTView.vue
@@ -350,12 +350,13 @@
 
             <div class='col-12 py-2'>
                 <label class='subheader mx-2'>Remarks</label>
-                <div class='bg-gray-500 rounded mx-2 py-2 px-2'>
-                    <TablerMarkdown
-                        :markdown='remarks'
-                        class='mx-1'
-                    />
-                </div>
+                <CopyField
+                    :rows='10'
+                    :edit='isEditable'
+                    :hover='isEditable'
+                    v-model='cot.properties.remarks'
+                    class='mx-1'
+                />
             </div>
 
             <div
@@ -614,7 +615,6 @@ import {
     TablerDelete,
     TablerEnum,
     TablerRange,
-    TablerMarkdown,
     TablerDropdown,
     TablerIconButton,
 } from '@tak-ps/vue-tabler';
@@ -734,15 +734,6 @@ const center = computed(() => {
     ]
 })
 
-const remarks = computed(() => {
-    if (!cot.value) return '';
-
-    return (cot.value.properties.remarks || '')
-        .replace(/\n/g, '</br>')
-        .replace(/(http(s)?:\/\/.*?(\s|$))/g, '[$1]($1) ')
-        .trim()
-})
-
 function timediffFormat(date: string) {
     if (time.value === 'relative') {
         return timediff(date);

diff --git a/api/web/src/components/CloudTAK/util/CopyField.vue b/api/web/src/components/CloudTAK/util/CopyField.vue
@@ -2,27 +2,29 @@
     <TablerInput
         v-if='editing'
         ref='editor-input'
+        :rows='rows'
         v-model='text'
         :autofocus='true'
         @change='emit("update:modelValue", text)'
         @blur='editing = false'
-        @submit='editing = false'
+        @submit='rows > 1 ? undefined : editing = false'
         label=''
     />
     <div
         v-else
-        class='position-relative'
+        class='position-relative bg-gray-500 rounded-top py-2 px-2 text-truncate'
         style='height: 44px;'
         :class='{
-            "bg-gray-500 rounded-top py-2 px-2 text-truncate": !pre,
             "hover-button hover-border cursor-pointer": hover,
         }'
         @click='edit ? editing = true : undefined'
     >
         <slot />
 
-        <template v-if='pre'>
-            <pre v-text='text' />
+        <template v-if='multiline'>
+            <TablerMarkdown
+                :markdown='markdown'
+            />
 
             <TablerIconButton
                 v-if='edit'
@@ -70,10 +72,11 @@
 </template>
 
 <script setup lang='ts'>
-import { ref, watch } from 'vue';
+import { ref, watch, computed } from 'vue';
 import CopyButton from './CopyButton.vue';
 import {
     TablerInput,
+    TablerMarkdown,
     TablerIconButton
 } from '@tak-ps/vue-tabler'
 import {
@@ -89,9 +92,9 @@ const props = defineProps({
         type: [String, Number],
         required: true
     },
-    pre: {
-        type: Boolean,
-        default: false
+    rows: {
+        type: Number,
+        default: 1
     },
     hover: {
         type: Boolean,
@@ -114,6 +117,13 @@ const props = defineProps({
 const editing = ref(false);
 const text = ref(props.modelValue);
 
+const markdown = computed(() => {
+    return (props.modelValue || '')
+        .replace(/\n/g, '</br>')
+        .replace(/(http(s)?:\/\/.*?(\s|$))/g, '[$1]($1) ')
+        .trim()
+});
+
 watch(props, () => {
     if (text.value !== props.modelValue) {
         text.value = props.modelValue;