document conditions

app/javascript/template_builder/preview.vue

@@ -9,14 +9,30 @@
         loading="lazy"
       >
       <div
-        class="group flex justify-end cursor-pointer top-0 bottom-0 left-0 right-0 absolute p-1"
+        class="group flex justify-end cursor-pointer top-0 bottom-0 left-0 right-0 absolute p-1 hover:bg-black/10 transition-colors"
         @click="$emit('scroll-to', item)"
       >
         <div
           v-if="editable"
           class="flex justify-between w-full"
         >
-          <div style="width: 26px" />
+          <div
+            style="width: 26px"
+            class="flex flex-col justify-between group-hover:opacity-100"
+            :class="{'opacity-0': !item.conditions?.length }"
+          >
+            <div>
+              <button
+                class="btn border-base-200 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"
+                @click.stop="isShowConditionsModal = true"
+              >
+                <IconRouteAltLeft
+                  :width="14"
+                  :stroke-width="1.6"
+                />
+              </button>
+            </div>
+          </div>
           <div class="">
             <ReplaceButton
               v-if="withReplaceButton"
@@ -73,19 +89,36 @@
       />
     </div>
   </div>
+  <Teleport
+    v-if="isShowConditionsModal"
+    :to="modalContainerEl"
+  >
+    <ConditionsModal
+      :item="item"
+      :build-default-name="buildDefaultName"
+      @close="isShowConditionsModal = false"
+    />
+  </Teleport>
 </template>
 
 <script>
 import Contenteditable from './contenteditable'
 import Upload from './upload'
+import { IconRouteAltLeft } from '@tabler/icons-vue'
+import ConditionsModal from './conditions_modal'
 import ReplaceButton from './replace'
+import Field from './field'
+import FieldType from './field_type'
 
 export default {
   name: 'DocumentPreview',
   components: {
     Contenteditable,
+    IconRouteAltLeft,
+    ConditionsModal,
     ReplaceButton
   },
+  inject: ['t'],
   props: {
     item: {
       type: Object,
@@ -121,13 +154,24 @@ export default {
     }
   },
   emits: ['scroll-to', 'change', 'remove', 'up', 'down', 'replace'],
+  data () {
+    return {
+      isShowConditionsModal: false
+    }
+  },
   computed: {
+    fieldNames: FieldType.computed.fieldNames,
+    fieldLabels: FieldType.computed.fieldLabels,
     previewImage () {
       return [...this.document.preview_images].sort((a, b) => parseInt(a.filename) - parseInt(b.filename))[0]
+    },
+    modalContainerEl () {
+      return this.$el.getRootNode().querySelector('#docuseal_modal_container')
     }
   },
   methods: {
     upload: Upload.methods.upload,
+    buildDefaultName: Field.methods.buildDefaultName,
     onUpdateName (value) {
       this.item.name = value