add dynamic documents
This commit is contained in:
Pete Matsyburka
@@ -18,20 +18,18 @@
|
||||
>
|
||||
<div
|
||||
style="width: 26px"
|
||||
class="flex flex-col justify-between group-hover:opacity-100"
|
||||
:class="{'opacity-0': !item.conditions?.length }"
|
||||
class="flex flex-col"
|
||||
>
|
||||
<div>
|
||||
<button
|
||||
class="btn border-gray-300 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors p-0 document-control-button"
|
||||
@click.stop="isShowConditionsModal = true"
|
||||
>
|
||||
<IconRouteAltLeft
|
||||
:width="14"
|
||||
:stroke-width="1.6"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
v-if="item.conditions?.length"
|
||||
class="btn border-gray-300 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors p-0 document-control-button"
|
||||
@click.stop="isShowConditionsModal = true"
|
||||
>
|
||||
<IconRouteAltLeft
|
||||
:width="14"
|
||||
:stroke-width="1.6"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="">
|
||||
<ReplaceButton
|
||||
@@ -44,51 +42,105 @@
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col justify-between opacity-0 group-hover:opacity-100"
|
||||
class="flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<span
|
||||
class="dropdown dropdown-end group-hover:opacity-100 has-[label:focus]:opacity-100"
|
||||
:class="{ 'dropdown-open': isMakeDynamicLoading, 'opacity-0': !isMakeDynamicLoading }"
|
||||
@mouseenter="renderDropdown = true"
|
||||
@touchstart="renderDropdown = true"
|
||||
>
|
||||
<label
|
||||
tabindex="0"
|
||||
class="btn border-gray-300 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button px-0"
|
||||
style="width: 24px; height: 24px"
|
||||
@click.stop
|
||||
>
|
||||
<IconDotsVertical
|
||||
:width="16"
|
||||
:height="16"
|
||||
:stroke-width="1.6"
|
||||
/>
|
||||
</label>
|
||||
<ul
|
||||
v-if="renderDropdown"
|
||||
tabindex="0"
|
||||
class="mt-1.5 dropdown-content p-1 shadow-lg rounded-lg border border-neutral-200 z-50 bg-white"
|
||||
style="min-width: 170px"
|
||||
@click="closeDropdown"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center justify-between text-sm"
|
||||
@click.stop="isShowConditionsModal = true; closeDropdown()"
|
||||
>
|
||||
<span class="flex items-center space-x-2">
|
||||
<IconRouteAltLeft class="w-4 h-4" />
|
||||
<span>{{ t('condition') }}</span>
|
||||
</span>
|
||||
<span
|
||||
v-if="item.conditions?.length"
|
||||
class="bg-neutral-200 rounded px-1 leading-3"
|
||||
style="font-size: 9px;"
|
||||
>{{ item.conditions.length }}</span>
|
||||
</button>
|
||||
</li>
|
||||
<li v-if="!item.dynamic">
|
||||
<button
|
||||
class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm whitespace-nowrap"
|
||||
@click.stop="$emit('reorder', item); closeDropdown()"
|
||||
>
|
||||
<IconSortDescending2 class="w-4 h-4" />
|
||||
<span>{{ t('reorder_fields') }}</span>
|
||||
</button>
|
||||
</li>
|
||||
<li v-if="withDynamicDocuments && !item.dynamic && document.metadata?.original_uuid">
|
||||
<button
|
||||
class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm whitespace-nowrap"
|
||||
:disabled="isMakeDynamicLoading"
|
||||
@click.stop="makeDynamic"
|
||||
>
|
||||
<IconInnerShadowTop
|
||||
v-if="isMakeDynamicLoading"
|
||||
class="w-4 h-4 animate-spin"
|
||||
/>
|
||||
<IconBolt
|
||||
v-else
|
||||
class="w-4 h-4"
|
||||
/>
|
||||
<span>{{ t('make_dynamic') }}</span>
|
||||
</button>
|
||||
</li>
|
||||
<hr class="my-1 border-neutral-200">
|
||||
<li>
|
||||
<button
|
||||
class="w-full px-2 py-1 rounded-md hover:bg-neutral-100 flex items-center space-x-2 text-sm text-red-600"
|
||||
@click.stop="$emit('remove', item); closeDropdown()"
|
||||
>
|
||||
<IconTrashX class="w-4 h-4" />
|
||||
<span>{{ t('remove') }}</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</span>
|
||||
<div
|
||||
v-if="withArrows"
|
||||
class="flex flex-col space-y-1 opacity-0 group-hover:opacity-100"
|
||||
>
|
||||
<button
|
||||
class="btn border-gray-300 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
|
||||
style="width: 24px; height: 24px"
|
||||
@click.stop="$emit('remove', item)"
|
||||
@click.stop="$emit('up', item)"
|
||||
>
|
||||
×
|
||||
↑
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col space-y-1"
|
||||
>
|
||||
<span
|
||||
:data-tip="t('reorder_fields')"
|
||||
class="tooltip tooltip-left before:text-xs"
|
||||
<button
|
||||
class="btn border-gray-300 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
|
||||
style="width: 24px; height: 24px"
|
||||
@click.stop="$emit('down', item)"
|
||||
>
|
||||
<button
|
||||
class="btn border-gray-300 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors p-0 document-control-button"
|
||||
@click.stop="$emit('reorder', item)"
|
||||
>
|
||||
<IconSortDescending2
|
||||
:width="18"
|
||||
:height="18"
|
||||
:stroke-width="1.6"
|
||||
/>
|
||||
</button>
|
||||
</span>
|
||||
<template v-if="withArrows">
|
||||
<button
|
||||
class="btn border-gray-300 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
|
||||
style="width: 24px; height: 24px"
|
||||
@click.stop="$emit('up', item)"
|
||||
>
|
||||
↑
|
||||
</button>
|
||||
<button
|
||||
class="btn border-gray-300 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
|
||||
style="width: 24px; height: 24px"
|
||||
@click.stop="$emit('down', item)"
|
||||
>
|
||||
↓
|
||||
</button>
|
||||
</template>
|
||||
↓
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -129,7 +181,7 @@
|
||||
<script>
|
||||
import Contenteditable from './contenteditable'
|
||||
import Upload from './upload'
|
||||
import { IconRouteAltLeft, IconSortDescending2 } from '@tabler/icons-vue'
|
||||
import { IconRouteAltLeft, IconSortDescending2, IconDotsVertical, IconTrashX, IconBolt, IconInnerShadowTop } from '@tabler/icons-vue'
|
||||
import ConditionsModal from './conditions_modal'
|
||||
import ReplaceButton from './replace'
|
||||
import GoogleDriveDocumentSettings from './google_drive_document_settings'
|
||||
@@ -140,13 +192,17 @@ export default {
|
||||
name: 'DocumentPreview',
|
||||
components: {
|
||||
Contenteditable,
|
||||
IconInnerShadowTop,
|
||||
IconRouteAltLeft,
|
||||
ConditionsModal,
|
||||
ReplaceButton,
|
||||
GoogleDriveDocumentSettings,
|
||||
IconSortDescending2
|
||||
IconSortDescending2,
|
||||
IconDotsVertical,
|
||||
IconTrashX,
|
||||
IconBolt
|
||||
},
|
||||
inject: ['t', 'getFieldTypeIndex'],
|
||||
inject: ['t', 'getFieldTypeIndex', 'baseFetch'],
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
@@ -175,16 +231,27 @@ export default {
|
||||
required: true,
|
||||
default: true
|
||||
},
|
||||
dynamicDocuments: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
withDynamicDocuments: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
withArrows: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
emits: ['scroll-to', 'change', 'remove', 'up', 'down', 'replace', 'reorder'],
|
||||
emits: ['scroll-to', 'change', 'remove', 'up', 'down', 'replace', 'reorder', 'make-dynamic'],
|
||||
data () {
|
||||
return {
|
||||
isShowConditionsModal: false
|
||||
isShowConditionsModal: false,
|
||||
isMakeDynamicLoading: false,
|
||||
renderDropdown: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -200,6 +267,32 @@ export default {
|
||||
methods: {
|
||||
upload: Upload.methods.upload,
|
||||
buildDefaultName: Field.methods.buildDefaultName,
|
||||
closeDropdown () {
|
||||
this.$el.getRootNode().activeElement.blur()
|
||||
},
|
||||
makeDynamic () {
|
||||
this.isMakeDynamicLoading = true
|
||||
|
||||
this.baseFetch(`/templates/${this.template.id}/dynamic_documents`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ uuid: this.document.uuid }),
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
}).then(async (resp) => {
|
||||
const dynamicDocument = await resp.json()
|
||||
|
||||
if (dynamicDocument.uuid) {
|
||||
this.dynamicDocuments.push(dynamicDocument)
|
||||
}
|
||||
|
||||
this.template.schema.find((item) => item.attachment_uuid === dynamicDocument.uuid).dynamic = true
|
||||
|
||||
this.$emit('change')
|
||||
}).finally(() => {
|
||||
this.isMakeDynamicLoading = false
|
||||
})
|
||||
},
|
||||
onUpdateName (value) {
|
||||
this.item.name = value
|
||||
|
||||
|
||||
Reference in New Issue
Block a user