linkselect copy value to clipboard

ddkwork · Sep 6, 2024 · 7fa22de · 7fa22de
1 parent b1a842b
commit 7fa22de
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 13 deletions.
diff --git a/src/components/LinkSelect.vue b/src/components/LinkSelect.vue
@@ -72,6 +72,21 @@
                 :options="{modal: true, page: fieldConfig && fieldConfig.config.searchDialog, selecting: true}"
                 @selected="selectFromDialog"
     />
+
+    <el-popover
+        :virtual-ref="select"
+        trigger="hover"
+        virtual-triggering
+        placement="top-end"
+        :width="50"
+        :show-after="300"
+        :popper-style="{'max-width': '50px'}"
+    >
+
+        <el-button title="Copy" class="editor-panel-button" size="small" text @click="copyTextToClipboard">
+            <Icon  class="editor-panel-button-icon" icon="material-symbols:content-copy-outline" width="18" />
+        </el-button>
+    </el-popover>
 </template>
 
 <script setup lang="ts">
@@ -81,6 +96,13 @@ import {DataSourceInterface, GetDataManyOptions} from "../model/datasource";
 import {useDataSourceService} from "../services/datasource.service";
 import DialogView from "./DialogView.vue";
 import {ScreenSize} from "../model/page";
+import { useClipboard } from '@vueuse/core'
+import {ElMessage} from "element-plus";
+import {useI18n} from "vue-i18n";
+const { t } = useI18n();
+
+const clip = ref('')
+const { text, copy, copied, isSupported } = useClipboard({})
 
 let isLoading = ref(false)
 let data = ref<Array<any>>([])
@@ -277,6 +299,33 @@ const getCacheData = async () => {
     return data.value
 }
 
+const copyTextToClipboard = () => {
+    if (!isSupported) {
+        ElMessage.error('Clipboard is not supported')
+        return
+    }
+
+    if (!value.value)
+        return
+
+    let items = []
+    if (props.fieldConfig.isMultiple) {
+        value.value.forEach(i => {
+            let t = data.value.find(j => j.id === i)
+            if (t) {
+                items.push(t[props.displayProp ? props.displayProp : 'name'])
+            }
+        })
+    } else {
+        let t = data.value.find(j => j.id === value.value)
+        if (t) {
+            items.push(t[props.displayProp ? props.displayProp : 'name'])
+        }
+    }
+    copy(items.join(', '))
+    ElMessage.info(t('copiedToClipboard'))
+}
+
 
 
 </script>

diff --git a/src/components/RichTextEditor.vue b/src/components/RichTextEditor.vue
@@ -2,23 +2,23 @@
     <div v-if="editor" style="width: 100%; height: fit-content" >
 
         <div class="editor-panel" v-if="!readonly">
-            <el-button class="editor-panel-button" size="small" text @click="editor.chain().focus().toggleBold().run()">
+            <el-button title="Bold" class="editor-panel-button" size="small" text @click="editor.chain().focus().toggleBold().run()">
                 <Icon  class="editor-panel-button-icon" icon="material-symbols:format-bold" width="18" />
             </el-button>
-            <el-button class="editor-panel-button" size="small" text @click="editor.chain().focus().toggleItalic().run()">
+            <el-button title="Italic" class="editor-panel-button" size="small" text @click="editor.chain().focus().toggleItalic().run()">
                 <Icon  class="editor-panel-button-icon" icon="material-symbols:format-italic" width="18"/>
             </el-button>
-            <el-button class="editor-panel-button" size="small" text @click="editor.chain().focus().toggleStrike().run()">
+            <el-button title="Strike" class="editor-panel-button" size="small" text @click="editor.chain().focus().toggleStrike().run()">
                 <Icon  class="editor-panel-button-icon" icon="material-symbols:strikethrough-s" width="18"/>
             </el-button>
-            <el-button class="editor-panel-button" size="small" text @click="editor.chain().focus().toggleUnderline().run()">
+            <el-button title="Underline" class="editor-panel-button" size="small" text @click="editor.chain().focus().toggleUnderline().run()">
                 <Icon  class="editor-panel-button-icon" icon="material-symbols:format-underlined" width="18"/>
             </el-button>
 
-            <el-button class="editor-panel-button" size="small" text @click="editor.chain().focus().toggleBulletList().run()">
+            <el-button title="Bullet list" class="editor-panel-button" size="small" text @click="editor.chain().focus().toggleBulletList().run()">
                 <Icon  class="editor-panel-button-icon" icon="material-symbols:format-list-bulleted" width="18"/>
             </el-button>
-            <el-button class="editor-panel-button" size="small" text @click="editor.chain().focus().toggleOrderedList().run()">
+            <el-button title="Ordered list" class="editor-panel-button" size="small" text @click="editor.chain().focus().toggleOrderedList().run()">
                 <Icon  class="editor-panel-button-icon" icon="material-symbols:format-list-numbered" width="18"/>
             </el-button>
 
@@ -28,7 +28,7 @@
                 trigger="click"
             >
                 <template #reference>
-                    <el-button class="editor-panel-button" size="small" text>
+                    <el-button title="Highlight" class="editor-panel-button" size="small" text>
                         <Icon  class="editor-panel-button-icon" icon="material-symbols:format-ink-highlighter-outline-rounded" width="18"/>
                     </el-button>
                 </template>
@@ -47,7 +47,7 @@
                 trigger="click"
             >
                 <template #reference>
-                    <el-button class="editor-panel-button" size="small" text>
+                    <el-button title="Color" class="editor-panel-button" size="small" text>
                         <Icon  class="editor-panel-button-icon" icon="material-symbols:format-color-text" width="18"/>
                     </el-button>
                 </template>
@@ -64,7 +64,7 @@
                 trigger="click"
             >
                 <template #reference>
-                    <el-button class="editor-panel-button" size="small" text>
+                    <el-button title="Format" class="editor-panel-button" size="small" text>
                         <Icon  class="editor-panel-button-icon" icon="material-symbols:format-h1" width="18"/>
                     </el-button>
                 </template>

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -185,5 +185,7 @@
     "openRevision": "Open from revision",
     "confirmOpenRevision": "Data is changed! Do you confirm opening data from the revision?",
     "revisions": "Changes history",
-    "confirmSaveOnServerDataChanged": "Data is changed on server! Do you confirm save current data?"
+    "confirmSaveOnServerDataChanged": "Data is changed on server! Do you confirm save current data?",
+    "copiedToClipboard": "Copied to clipboard",
+    "clipboardNotSupported":  "Clipboard is not supported"
 }
diff --git a/src/locales/ru.json b/src/locales/ru.json
@@ -184,5 +184,7 @@
     "openRevision": "Открыть из истории",
     "confirmOpenRevision": "Данные изменены! Открыть запись из истории?",
     "revisions": "История изменений",
-    "confirmSaveOnServerDataChanged": "Данные на сервере изменены! Вы точно хотите сохранить данные?"
+    "confirmSaveOnServerDataChanged": "Данные на сервере изменены! Вы точно хотите сохранить данные?",
+    "copiedToClipboard": "Скопировано в буффер обмена",
+    "clipboardNotSupported":  "Буфер обмена не поддерживается"
 }
diff --git a/src/pages/configuration/Configuration.vue b/src/pages/configuration/Configuration.vue
@@ -18,7 +18,11 @@
         </template>
     </el-page-header>
 
-    <el-tabs ref="tabsEl" tab-position="top" style="height: calc(100% - 150px); padding-left: 16px; padding-right: 16px" v-model="activeTab" @tab-change="tabChange">
+    <el-tabs ref="tabsEl"
+             tab-position="top"
+             style="height: calc(100% - 150px); padding-left: 16px; padding-right: 16px"
+             v-model="activeTab"
+             @tab-change="tabChange">
 
         <el-tab-pane :label="$t('pages')"  name="pages" style="height: inherit">
             <Table :columns="pagesColumns"

diff --git a/src/pages/configuration/DataSourceEdit.vue b/src/pages/configuration/DataSourceEdit.vue
@@ -131,7 +131,7 @@
         </div>
 
 
-        <el-tabs v-model="activeTab" class="demo-tabs">
+        <el-tabs v-model="activeTab" class="demo-tabs" style="; max-height: unset">
             <el-tab-pane :label="$t('fields')" name="fields">
 
                 <el-form-item >