Add clipboard button to filters

SpeciesFileGroup · Sep 26, 2024 · 31157e0 · 31157e0
1 parent 16507a6
commit 31157e0
Showing 1 changed file with 50 additions and 6 deletions.
diff --git a/app/javascript/vue/components/Filter/Table/TableResults.vue b/app/javascript/vue/components/Filter/Table/TableResults.vue
@@ -79,13 +79,30 @@
             :key="attr"
             @click="sortTable(attr)"
           >
-            <div class="horizontal-left-content">
+            <div class="horizontal-left-content gap-small">
               <span>{{ title }}</span>
+              <VBtn
+                color="primary"
+                circle
+                @click.stop="
+                  () =>
+                    copyColumnToClipboard(
+                      list
+                        .filter(rowHasCurrentValues)
+                        .map((item) => item[attr])
+                        .join('\n')
+                    )
+                "
+              >
+                <VIcon
+                  name="clip"
+                  x-small
+                />
+              </VBtn>
               <VBtn
                 v-if="filterValues[attr]"
-                class="margin-small-left"
                 color="primary"
-                small
+                circle
                 @click.stop="
                   () => {
                     delete filterValues[attr]
@@ -107,13 +124,30 @@
               :class="{ 'cell-left-border': pIndex === 0 }"
               @click="sortTable(`${key}.${property}`)"
             >
-              <div class="horizontal-left-content">
+              <div class="horizontal-left-content gap-small">
                 <span>{{ property }}</span>
+                <VBtn
+                  color="primary"
+                  circle
+                  @click.stop="
+                    () =>
+                      copyColumnToClipboard(
+                        props.list
+                          .filter(rowHasCurrentValues)
+                          .map((item) => renderItem(item, key, property))
+                          .join('\n')
+                      )
+                  "
+                >
+                  <VIcon
+                    name="clip"
+                    x-small
+                  />
+                </VBtn>
                 <VBtn
                   v-if="filterValues[`${key}.${property}`]"
-                  class="margin-small-left"
                   color="primary"
-                  small
+                  circle
                   @click.stop="
                     () => {
                       delete filterValues[`${key}.${property}`]
@@ -252,6 +286,7 @@ import { sortArray } from '@/helpers/arrays.js'
 import { vResizeColumn } from '@/directives/resizeColumn.js'
 import { humanize } from '@/helpers/strings'
 import VBtn from '@/components/ui/VBtn/index.vue'
+import VIcon from '@/components/ui/VIcon/index.vue'
 import HandyScroll from 'vue-handy-scroll'
 import RadialNavigation from '@/components/radials/navigation/radial.vue'
 import RadialAnnotator from '@/components/radials/annotator/annotator.vue'
@@ -340,6 +375,15 @@ const dataAttributeHeaders = computed(() => {
 
 const filterValues = ref({})
 
+function copyColumnToClipboard(text) {
+  navigator.clipboard
+    .writeText(text)
+    .then(() => {
+      TW.workbench.alert.create('Copied to clipboard', 'notice')
+    })
+    .catch(() => {})
+}
+
 function rowHasCurrentValues(item) {
   return Object.entries(filterValues.value).every(([properties, value]) => {
     const itemValue = getValue(item, properties)