Update Copy Field

dfpc-coe · Dec 2, 2024 · 7232953 · 7232953
2 parents 331d9d4 + c245b13
commit 7232953
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 37 deletions.
diff --git a/api/web/src/components/CloudTAK/CoTView.vue b/api/web/src/components/CloudTAK/CoTView.vue
@@ -348,14 +348,18 @@
                 @attachment='addAttachment($event)'
             />
 
-            <div class='col-12 py-2'>
+            <div
+                v-if='cot.properties.remarks'
+                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
+                    v-model='cot.properties.remarks'
+                    :rows='10'
+                    :edit='isEditable'
+                    :hover='isEditable'
+                    class='mx-1'
+                />
             </div>
 
             <div
@@ -591,7 +595,8 @@
                 class='overflow-auto'
             >
                 <CopyField
-                    :pre='true'
+                    mode='pre'
+                    style='height: calc(100vh - 225px)'
                     :model-value='JSON.stringify(cot.as_feature(), null, 4)'
                 />
             </div>
@@ -614,7 +619,6 @@ import {
     TablerDelete,
     TablerEnum,
     TablerRange,
-    TablerMarkdown,
     TablerDropdown,
     TablerIconButton,
 } from '@tak-ps/vue-tabler';
@@ -734,15 +738,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
@@ -1,36 +1,60 @@
 <template>
-    <TablerInput
+    <div
         v-if='editing'
-        ref='editor-input'
-        v-model='text'
-        :autofocus='true'
-        label=''
-        @change='emit("update:modelValue", text)'
-        @blur='editing = false'
-        @submit='editing = false'
-    />
+        class='position-relative rounded-top'
+    >
+        <TablerInput
+            v-model='text'
+            :rows='rows'
+            :autofocus='true'
+            label=''
+            @change='emit("update:modelValue", text)'
+            @blur='editing = false'
+            @submit='rows > 1 ? undefined : editing = false'
+        />
+
+        <TablerIconButton
+            title='Done Editing'
+            class='position-absolute'
+            style='right: 8px; top: 8px;'
+            @click.stop.prevent='editing = false'
+        >
+            <IconCheck
+                :size='24'
+                stroke='1'
+            />
+        </TablerIconButton>
+    </div>
     <div
         v-else
-        class='position-relative'
-        style='height: 44px;'
+        ref='infobox'
+        class='position-relative bg-gray-500 rounded-top py-2 px-2 text-truncate'
+        :style='rows === 1 ? `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='rows > 1 || mode === "pre"'>
+            <TablerMarkdown
+                v-if='mode === "text"'
+                :markdown='markdown'
+            />
+            <pre
+                v-else
+                v-text='text'
+            />
 
             <TablerIconButton
                 v-if='edit'
+                title='Edit Field'
                 class='position-absolute'
                 :class='{
                     "hover-button-hidden": hover,
                 }'
                 style='right: 36px; top: 8px;'
+                @click='editing = true'
             >
                 <IconPencil
                     :size='24'
@@ -57,6 +81,7 @@
                 style='right: 36px'
                 :size='24'
                 stroke='1'
+                @click='editing = true'
             />
 
             <CopyButton
@@ -70,13 +95,15 @@
 </template>
 
 <script setup lang='ts'>
-import { ref, watch } from 'vue';
+import { ref, watch, computed, useTemplateRef } from 'vue';
 import CopyButton from './CopyButton.vue';
 import {
     TablerInput,
+    TablerMarkdown,
     TablerIconButton
 } from '@tak-ps/vue-tabler'
 import {
+    IconCheck,
     IconPencil
 } from '@tabler/icons-vue';
 
@@ -85,13 +112,17 @@ const emit = defineEmits([
 ]);
 
 const props = defineProps({
+    mode: {
+        type: String,
+        default: 'text' // text or pre
+    },
     modelValue: {
         type: [String, Number],
         required: true
     },
-    pre: {
-        type: Boolean,
-        default: false
+    rows: {
+        type: Number,
+        default: 1
     },
     hover: {
         type: Boolean,
@@ -114,6 +145,28 @@ const props = defineProps({
 const editing = ref(false);
 const text = ref(props.modelValue);
 
+const infoboxRef = useTemplateRef<HTMLElement>('infobox');
+
+const markdown = computed(() => {
+    return String(props.modelValue || '')
+        .replace(/\n/g, '</br>')
+        .replace(/(http(s)?:\/\/.*?(\s|$))/g, '[$1]($1) ')
+        .trim()
+});
+
+watch(infoboxRef, () => {
+    if (infoboxRef.value) {
+        infoboxRef.value.addEventListener('click', (event: MouseEvent) => {
+            if (!props.edit) return;
+            if (event.target) {
+                const target = event.target as HTMLElement;     
+                if (['A'].includes(target.tagName)) return;
+            }
+            editing.value = true;
+        });
+    }
+})
+
 watch(props, () => {
     if (text.value !== props.modelValue) {
         text.value = props.modelValue;