google drive file picker

2025-10-09 16:43:11 +03:00
parent b99235397a
commit 9e8e1996e8
19 changed files with 608 additions and 87 deletions
@@ -0,0 +1,102 @@
+<template>
+  <div
+    class="dropdown"
+    :class="{ 'dropdown-open': isLoading }"
+  >
+    <label tabindex="0">
+      <IconBrandGoogleDrive class="w-5 h-5 inline-block mr-1 cursor-pointer" />
+    </label>
+    <ul
+      tabindex="0"
+      :style="{ backgroundColor }"
+      class="dropdown-content z-[1] shadow menu rounded-box"
+    >
+      <li>
+        <a
+          :href="`https://drive.google.com/file/d/${googleDriveFileId}/view?usp=sharing`"
+          data-turbo="false"
+          target="_blank"
+          class="flex items-center"
+        >
+          <IconExternalLink class="w-4 h-4 flex-shrink-0" />
+          <span>{{ t('view') }}</span>
+        </a>
+      </li>
+      <li>
+        <form
+          ref="form"
+          class="flex items-center"
+          @submit.prevent="upload({ path: uploadUrl })"
+        >
+          <input
+            :id="inputId"
+            ref="input"
+            :value="googleDriveFileId"
+            type="hidden"
+            name="google_drive_file_ids[]"
+          >
+          <button
+            type="submit"
+            :disabled="isLoading"
+            class="flex items-center w-full space-x-2"
+          >
+            <IconRefresh
+              class="w-4 h-4 flex-shrink-0"
+              :class="{ 'animate-spin': isLoading }"
+            />
+            <span>{{ message }}</span>
+          </button>
+        </form>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import Upload from './upload'
+import { IconRefresh, IconBrandGoogleDrive, IconExternalLink } from '@tabler/icons-vue'
+
+export default {
+  name: 'GoogleDriveDocumentSettings',
+  components: {
+    IconRefresh,
+    IconBrandGoogleDrive,
+    IconExternalLink
+  },
+  inject: ['baseFetch', 't', 'backgroundColor'],
+  props: {
+    templateId: {
+      type: [Number, String],
+      required: true
+    },
+    googleDriveFileId: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ['success'],
+  data () {
+    return {
+      isLoading: false
+    }
+  },
+  computed: {
+    inputId () {
+      return 'el' + Math.random().toString(32).split('.')[1]
+    },
+    uploadUrl () {
+      return `/templates/${this.templateId}/google_drive_documents`
+    },
+    message () {
+      if (this.isLoading) {
+        return this.t('syncing')
+      } else {
+        return this.t('sync')
+      }
+    }
+  },
+  methods: {
+    upload: Upload.methods.upload
+  }
+}
+</script>