add Google Drive replace option

app/javascript/template_builder/replace.vue

@@ -1,14 +1,52 @@
 <template>
-  <label
-    :for="inputId"
-    class="btn btn-neutral btn-xs text-white transition-none replace-document-button"
-    :class="{ 'opacity-100': isLoading }"
-  >
-    {{ message }}
+  <div class="inline-flex items-stretch replace-document-control">
+    <label
+      :for="inputId"
+      class="btn btn-neutral btn-xs text-white transition-none replace-document-button"
+      :class="[{ 'opacity-100': isLoading }, showGoogleDriveDropdown ? 'rounded-r-none pr-1.5' : '']"
+    >
+      {{ message }}
+    </label>
+    <span
+      v-if="showGoogleDriveDropdown"
+      class="dropdown dropdown-end"
+      @click.stop
+    >
+      <label
+        tabindex="0"
+        class="btn btn-neutral btn-xs text-white rounded-l-none border-l border-white/30 px-1 transition-none cursor-pointer flex items-center"
+      >
+        <IconChevronDown
+          width="12"
+          stroke-width="2.5"
+        />
+      </label>
+      <ul
+        tabindex="0"
+        :style="{  minWidth: '130px', backgroundColor: backgroundColor }"
+        class="mt-1.5 dropdown-content p-1 shadow-lg rounded-lg border border-neutral-200 z-50 bg-white"
+      >
+        <li>
+          <button
+            type="button"
+            class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center justify-between text-sm"
+            @click.prevent="openGoogleDriveModal"
+          >
+            <IconBrandGoogleDrive class="w-4 h-4 flex-shrink-0" />
+            <span>Google Drive</span>
+          </button>
+        </li>
+      </ul>
+    </span>
     <form
       ref="form"
       class="hidden"
     >
+      <input
+        v-if="googleDriveFile"
+        name="google_drive_file_ids[]"
+        :value="googleDriveFile.id"
+      >
       <input
         :id="inputId"
         ref="input"
@@ -18,20 +56,51 @@
         @change="upload"
       >
     </form>
-  </label>
+    <GoogleDrivePickerModal
+      v-if="showGoogleDriveModal"
+      v-model:loading="isLoadingGoogleDrive"
+      :template-id="templateId"
+      :authenticity-token="authenticityToken"
+      :modal-container-el="modalContainerEl"
+      @close="showGoogleDriveModal = false"
+      @picked="onGoogleDrivePicked"
+    />
+  </div>
 </template>
 
 <script>
 import Upload from './upload'
+import GoogleDrivePickerModal from './google_drive_picker_modal'
+import { IconChevronDown, IconBrandGoogleDrive } from '@tabler/icons-vue'
 
 export default {
   name: 'ReplaceDocument',
-  inject: ['baseFetch', 't'],
+  components: {
+    IconChevronDown,
+    IconBrandGoogleDrive,
+    GoogleDrivePickerModal
+  },
+  inject: ['baseFetch', 't', 'backgroundColor'],
   props: {
     templateId: {
       type: [Number, String],
       required: true
     },
+    authenticityToken: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    googleDriveFileId: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    withGoogleDrive: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     acceptFileTypes: {
       type: String,
       required: false,
@@ -41,16 +110,25 @@ export default {
   emits: ['success'],
   data () {
     return {
-      isLoading: false
+      isLoading: false,
+      isLoadingGoogleDrive: true,
+      googleDriveFile: null,
+      showGoogleDriveModal: false
     }
   },
   computed: {
     inputId () {
       return 'el' + Math.random().toString(32).split('.')[1]
     },
+    showGoogleDriveDropdown () {
+      return this.withGoogleDrive && !!this.googleDriveFileId
+    },
     uploadUrl () {
       return `/templates/${this.templateId}/documents`
     },
+    modalContainerEl () {
+      return this.$el.getRootNode().querySelector('#docuseal_modal_container')
+    },
     message () {
       if (this.isLoading) {
         return this.t('uploading_')
@@ -60,7 +138,27 @@ export default {
     }
   },
   methods: {
-    upload: Upload.methods.upload
+    upload: Upload.methods.upload,
+    openGoogleDriveModal () {
+      this.showGoogleDriveModal = true
+      this.isLoadingGoogleDrive = true
+      this.googleDriveFile = null
+      this.$el.getRootNode().activeElement?.blur()
+    },
+    onGoogleDrivePicked (files) {
+      this.googleDriveFile = files[0]
+
+      this.$nextTick(() => {
+        this.upload({ path: `/templates/${this.templateId}/google_drive_documents` }).then((resp) => {
+          if (resp.ok) {
+            this.showGoogleDriveModal = false
+          }
+        }).finally(() => {
+          this.isLoadingGoogleDrive = false
+          this.googleDriveFile = null
+        })
+      })
+    }
   }
 }
 </script>