mirror of https://github.com/docusealco/docuseal
Alex Turchyn
3 weeks ago
committed by
GitHub
parent
b99235397a
commit
9e8e1996e8
@ -0,0 +1,55 @@
|
|||||||
|
export default class extends HTMLElement {
|
||||||
|
connectedCallback () {
|
||||||
|
const iframeTemplate = this.querySelector('template')
|
||||||
|
|
||||||
|
this.observer = new IntersectionObserver((entries) => {
|
||||||
|
if (entries.some(e => e.isIntersecting)) {
|
||||||
|
iframeTemplate.parentElement.prepend(iframeTemplate.content)
|
||||||
|
|
||||||
|
this.observer.disconnect()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
this.observer.observe(this)
|
||||||
|
|
||||||
|
window.addEventListener('message', this.messageHandler)
|
||||||
|
}
|
||||||
|
|
||||||
|
messageHandler = (event) => {
|
||||||
|
if (event.data.type === 'google-drive-files-picked') {
|
||||||
|
this.form.querySelectorAll('input[name="google_drive_file_ids[]"]').forEach(el => el.remove())
|
||||||
|
|
||||||
|
const files = event.data.files || []
|
||||||
|
|
||||||
|
files.forEach((file) => {
|
||||||
|
const input = document.createElement('input')
|
||||||
|
input.type = 'hidden'
|
||||||
|
input.name = 'google_drive_file_ids[]'
|
||||||
|
input.value = file.id
|
||||||
|
this.form.appendChild(input)
|
||||||
|
})
|
||||||
|
|
||||||
|
this.form.querySelector('button[type="submit"]').click()
|
||||||
|
this.loader.classList.remove('hidden')
|
||||||
|
} else if (event.data.type === 'google-drive-picker-loaded') {
|
||||||
|
this.loader.classList.add('hidden')
|
||||||
|
this.form.classList.remove('hidden')
|
||||||
|
} else if (event.data.type === 'google-drive-picker-request-oauth') {
|
||||||
|
document.getElementById(this.dataset.oauthButtonId).classList.remove('hidden')
|
||||||
|
this.classList.add('hidden')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
disconnectedCallback () {
|
||||||
|
this.observer?.unobserve(this)
|
||||||
|
window.removeEventListener('message', this.messageHandler)
|
||||||
|
}
|
||||||
|
|
||||||
|
get form () {
|
||||||
|
return this.querySelector('form')
|
||||||
|
}
|
||||||
|
|
||||||
|
get loader () {
|
||||||
|
return document.getElementById('google_drive_loader')
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
export default class extends HTMLElement {
|
||||||
|
connectedCallback () {
|
||||||
|
const src = this.getAttribute('src')
|
||||||
|
const link = document.createElement('a')
|
||||||
|
|
||||||
|
link.href = src
|
||||||
|
link.setAttribute('data-turbo-frame', 'modal')
|
||||||
|
link.style.display = 'none'
|
||||||
|
|
||||||
|
this.appendChild(link)
|
||||||
|
|
||||||
|
link.click()
|
||||||
|
|
||||||
|
window.history.replaceState({}, document.title, window.location.pathname)
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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>
|
||||||
|
After Width: | Height: | Size: 458 B |
@ -0,0 +1,31 @@
|
|||||||
|
<%= form_for @template, data: { turbo_frame: :_top }, html: { autocomplete: :off } do |f| %>
|
||||||
|
<% if @base_template %>
|
||||||
|
<%= hidden_field_tag :base_template_id, @base_template.id %>
|
||||||
|
<% end %>
|
||||||
|
<% if @base_template && (can?(:manage, :tenants) || true_user != current_user) && true_user.account.linked_accounts.active.accessible_by(current_ability).exists? %>
|
||||||
|
<div class="form-control -mb-2 mt-2">
|
||||||
|
<%= select_tag :account_id, options_for_select([true_user.account, *true_user.account.linked_accounts.active.accessible_by(current_ability)].uniq.map { |e| [e.name, e.id] }, current_account.id), required: true, class: 'base-select' %>
|
||||||
|
</div>
|
||||||
|
<% end %>
|
||||||
|
<div class="form-control mt-4">
|
||||||
|
<%= f.text_field :name, required: true, placeholder: t('document_name'), class: 'base-input', dir: 'auto' %>
|
||||||
|
</div>
|
||||||
|
<div class="mt-3 mb-4 flex items-center justify-between">
|
||||||
|
<label for="folder_name" class="cursor-pointer">
|
||||||
|
<%= svg_icon('folder', class: 'w-6 h-6') %>
|
||||||
|
</label>
|
||||||
|
<folder-autocomplete class="flex justify-between w-full">
|
||||||
|
<set-value data-on="blur" data-value="<%= TemplateFolder::DEFAULT_NAME %>" data-empty-only="true" class="peer w-full whitespace-nowrap">
|
||||||
|
<input id="folder_name" placeholder="<%= t('folder_name') %>" type="text" class="w-full outline-none border-transparent focus:border-transparent focus:ring-0 bg-base-100 px-1" name="folder_name" value="<%= params[:folder_name].presence || @base_template&.folder&.full_name || TemplateFolder::DEFAULT_NAME %>" autocomplete="off">
|
||||||
|
</set-value>
|
||||||
|
<set-value data-on="click" data-value="" data-input-id="folder_name" class="peer-focus-within:hidden whitespace-nowrap">
|
||||||
|
<label for="folder_name" data-clear-on-focus="true" class="shrink-0 link mr-1.5 cursor-pointer">
|
||||||
|
<%= t('change_folder') %>
|
||||||
|
</label>
|
||||||
|
</set-value>
|
||||||
|
</folder-autocomplete>
|
||||||
|
</div>
|
||||||
|
<div class="form-control">
|
||||||
|
<%= f.button button_title(title: @base_template ? t('submit') : t('create'), disabled_with: t('creating')), class: 'base-button' %>
|
||||||
|
</div>
|
||||||
|
<% end %>
|
||||||
@ -1,33 +1,3 @@
|
|||||||
<%= render 'shared/turbo_modal', title: @base_template ? t('clone_template') : t('new_document_template') do %>
|
<%= render 'shared/turbo_modal', title: @base_template ? t('clone_template') : t('new_document_template') do %>
|
||||||
<%= form_for @template, data: { turbo_frame: :_top }, html: { autocomplete: :off } do |f| %>
|
<%= render 'templates/file_form' %>
|
||||||
<% if @base_template %>
|
|
||||||
<%= hidden_field_tag :base_template_id, @base_template.id %>
|
|
||||||
<% end %>
|
|
||||||
<% if @base_template && (can?(:manage, :tenants) || true_user != current_user) && true_user.account.linked_accounts.active.accessible_by(current_ability).exists? %>
|
|
||||||
<div class="form-control -mb-2 mt-2">
|
|
||||||
<%= select_tag :account_id, options_for_select([true_user.account, *true_user.account.linked_accounts.active.accessible_by(current_ability)].uniq.map { |e| [e.name, e.id] }, current_account.id), required: true, class: 'base-select' %>
|
|
||||||
</div>
|
|
||||||
<% end %>
|
|
||||||
<div class="form-control mt-6">
|
|
||||||
<%= f.text_field :name, required: true, placeholder: t('document_name'), class: 'base-input', dir: 'auto' %>
|
|
||||||
</div>
|
|
||||||
<div class="mt-3 mb-4 flex items-center justify-between">
|
|
||||||
<label for="folder_name" class="cursor-pointer">
|
|
||||||
<%= svg_icon('folder', class: 'w-6 h-6') %>
|
|
||||||
</label>
|
|
||||||
<folder-autocomplete class="flex justify-between w-full">
|
|
||||||
<set-value data-on="blur" data-value="<%= TemplateFolder::DEFAULT_NAME %>" data-empty-only="true" class="peer w-full whitespace-nowrap">
|
|
||||||
<input id="folder_name" placeholder="<%= t('folder_name') %>" type="text" class="w-full outline-none border-transparent focus:border-transparent focus:ring-0 bg-base-100 px-1" name="folder_name" value="<%= params[:folder_name].presence || @base_template&.folder&.full_name || TemplateFolder::DEFAULT_NAME %>" autocomplete="off">
|
|
||||||
</set-value>
|
|
||||||
<set-value data-on="click" data-value="" data-input-id="folder_name" class="peer-focus-within:hidden whitespace-nowrap">
|
|
||||||
<label for="folder_name" data-clear-on-focus="true" class="shrink-0 link mr-1.5 cursor-pointer">
|
|
||||||
<%= t('change_folder') %>
|
|
||||||
</label>
|
|
||||||
</set-value>
|
|
||||||
</folder-autocomplete>
|
|
||||||
</div>
|
|
||||||
<div class="form-control">
|
|
||||||
<%= f.button button_title(title: @base_template ? t('submit') : t('create'), disabled_with: t('creating')), class: 'base-button' %>
|
|
||||||
</div>
|
|
||||||
<% end %>
|
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|||||||
Loading…
Reference in new issue