Added URL copy button

openzim · Oct 8, 2024 · 8c8b0dc · 8c8b0dc
1 parent aca7944
commit 8c8b0dc
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 2 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -29,6 +29,7 @@
     "smart-tagz": "^0.4.1",
     "uuid": "^9.0.0",
     "vue": "^3.3.2",
+    "vue-clipboard3": "^2.0.0",
     "vue-router": "^4.2.0"
   },
   "devDependencies": {

diff --git a/frontend/src/components/ReloadWebDAVPathComponent.vue b/frontend/src/components/ReloadWebDAVPathComponent.vue
@@ -23,6 +23,14 @@
         >
           Re-generate JSON collection on WebDAV
         </button>
+        <button
+          class="btn btn-sm btn-outline-primary ms-2"
+          :disabled="!canRefresh"
+          @click.prevent="copyCollectionUrl"
+          title="Copy JSON Collection URL"
+        >
+          <font-awesome-icon :icon="['fa-regular', 'copy']" />
+        </button>
       </p>
     </div>
   </div>
@@ -31,11 +39,13 @@
 <script setup lang="ts">
 import { ref, computed, type Ref } from 'vue'
 import { storeToRefs } from 'pinia'
+import useClipboard from 'vue-clipboard3'
 import { useAppStore, useProjectStore } from '@/stores/stores'
 import { set_project_webdav_path } from '@/utils'
 import { type Project } from '@/constants'
 
 const emit = defineEmits<{ updatedWebdav: [webdav_path: string | null] }>()
+const { toClipboard } = useClipboard()
 const storeProject = useProjectStore()
 const storeApp = useAppStore()
 const busyRefreshing: Ref<boolean> = ref(false)
@@ -74,6 +84,18 @@ async function request_json_gen() {
   }
   busyRefreshing.value = false
 }
+
+async function copyCollectionUrl() {
+  let url: string = `${webdav_url.value}/collection.json`
+  await toClipboard(url).then(
+    function () {
+      storeApp.alertsSuccess(`JSON URL copied to Clipboard`)
+    },
+    function () {
+      storeApp.alertsError(`Unable to copy URL to clipboard 😞`)
+    }
+  )
+}
 </script>
 
 <style type="text/css">

diff --git a/frontend/src/main.ts b/frontend/src/main.ts
@@ -21,7 +21,7 @@ import {
   faFileArrowDown,
   faFileExcel
 } from '@fortawesome/free-solid-svg-icons'
-import { faCircleXmark as farCircleXmark } from '@fortawesome/free-regular-svg-icons'
+import { faCircleXmark as farCircleXmark, faCopy } from '@fortawesome/free-regular-svg-icons'
 
 /* add icons to the library */
 library.add(
@@ -37,7 +37,8 @@ library.add(
   faFile,
   faFileArrowDown,
   farCircleXmark,
-  faFileExcel
+  faFileExcel,
+  faCopy
 )
 
 import App from './App.vue'

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -707,6 +707,15 @@ chalk@^4.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+clipboard@^2.0.6:
+  version "2.0.11"
+  resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.11.tgz#62180360b97dd668b6b3a84ec226975762a70be5"
+  integrity sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==
+  dependencies:
+    good-listener "^1.2.2"
+    select "^1.1.2"
+    tiny-emitter "^2.0.0"
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"
@@ -845,6 +854,11 @@ delayed-stream@~1.0.0:
   resolved "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz"
   integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
 
+delegate@^3.1.2:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
+  integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==
+
 dir-glob@^3.0.1:
   version "3.0.1"
   resolved "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz"
@@ -1340,6 +1354,13 @@ globby@^11.1.0:
     merge2 "^1.4.1"
     slash "^3.0.0"
 
+good-listener@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
+  integrity sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==
+  dependencies:
+    delegate "^3.1.2"
+
 gopd@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz"
@@ -2073,6 +2094,11 @@ sanitize-filename@^1.6.3:
   dependencies:
     truncate-utf8-bytes "^1.0.0"
 
+select@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
+  integrity sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==
+
 "semver@2 || 3 || 4 || 5", semver@^5.5.0:
   version "5.7.2"
   resolved "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz"
@@ -2267,6 +2293,11 @@ text-table@^0.2.0:
   resolved "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz"
   integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
 
+tiny-emitter@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
+  integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
+
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz"
@@ -2415,6 +2446,13 @@ vite@^4.3.5:
   optionalDependencies:
     fsevents "~2.3.2"
 
+vue-clipboard3@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/vue-clipboard3/-/vue-clipboard3-2.0.0.tgz#79b026c765c0f6a5cde18a477c2dbfc7d3b9f178"
+  integrity sha512-Q9S7dzWGax7LN5iiSPcu/K1GGm2gcBBlYwmMsUc5/16N6w90cbKow3FnPmPs95sungns4yvd9/+JhbAznECS2A==
+  dependencies:
+    clipboard "^2.0.6"
+
 vue-demi@^0.14.10:
   version "0.14.10"
   resolved "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz"