Merge from docusealco/wip

Author: AlexBTurchyn

Dockerfile

@@ -47,7 +47,7 @@ FROM ruby:3.4.2-alpine AS app
 ENV RAILS_ENV=production
 ENV BUNDLE_WITHOUT="development:test"
 ENV LD_PRELOAD=/lib/libgcompat.so.0
-ENV OPENSSL_CONF=/app/openssl_legacy.cnf
+ENV OPENSSL_CONF=/etc/openssl_legacy.cnf
 
 WORKDIR /app
 
@@ -65,36 +65,35 @@ legacy = legacy_sect\n\
 activate = 1\n\
 \n\
 [legacy_sect]\n\
-activate = 1' >> /app/openssl_legacy.cnf
+activate = 1' >> /etc/openssl_legacy.cnf
 
-COPY ./Gemfile ./Gemfile.lock ./
+COPY --chown=docuseal:docuseal ./Gemfile ./Gemfile.lock ./
 
 RUN apk add --no-cache build-base && bundle install && apk del --no-cache build-base && rm -rf ~/.bundle /usr/local/bundle/cache && ruby -e "puts Dir['/usr/local/bundle/**/{spec,rdoc,resources/shared,resources/collation,resources/locales}']" | xargs rm -rf && ln -sf /usr/lib/libonnxruntime.so.1 $(ruby -e "print Dir[Gem::Specification.find_by_name('onnxruntime').gem_dir + '/vendor/*.so'].first")
 
 RUN echo 'https://dl-cdn.alpinelinux.org/alpine/edge/main' >> /etc/apk/repositories && echo 'https://dl-cdn.alpinelinux.org/alpine/edge/community' >> /etc/apk/repositories && apk add --no-cache onnxruntime
 
-COPY ./bin ./bin
-COPY ./app ./app
-COPY ./config ./config
-COPY ./db/migrate ./db/migrate
-COPY ./log ./log
-COPY ./lib ./lib
-COPY ./public ./public
-COPY ./tmp ./tmp
-COPY LICENSE README.md Rakefile config.ru .version ./
-COPY .version ./public/version
-
-COPY --from=download /fonts/GoNotoKurrent-Regular.ttf /fonts/GoNotoKurrent-Bold.ttf /fonts/DancingScript-Regular.otf /fonts/OFL.txt /fonts
+COPY --chown=docuseal:docuseal ./bin ./bin
+COPY --chown=docuseal:docuseal ./app ./app
+COPY --chown=docuseal:docuseal ./config ./config
+COPY --chown=docuseal:docuseal ./db/migrate ./db/migrate
+COPY --chown=docuseal:docuseal ./log ./log
+COPY --chown=docuseal:docuseal ./lib ./lib
+COPY --chown=docuseal:docuseal ./public ./public
+COPY --chown=docuseal:docuseal ./tmp ./tmp
+COPY --chown=docuseal:docuseal LICENSE README.md Rakefile config.ru .version ./
+COPY --chown=docuseal:docuseal .version ./public/version
+
+COPY --chown=docuseal:docuseal --from=download /fonts/GoNotoKurrent-Regular.ttf /fonts/GoNotoKurrent-Bold.ttf /fonts/DancingScript-Regular.otf /fonts/OFL.txt /fonts
 COPY --from=download /fonts/FreeSans.ttf /usr/share/fonts/freefont
 COPY --from=download /pdfium-linux/lib/libpdfium.so /usr/lib/libpdfium.so
 COPY --from=download /pdfium-linux/licenses/pdfium.txt /usr/lib/libpdfium-LICENSE.txt
-COPY --from=download /model.onnx /app/tmp/model.onnx
-COPY --from=webpack /app/public/packs ./public/packs
+COPY --chown=docuseal:docuseal --from=download /model.onnx /app/tmp/model.onnx
+COPY --chown=docuseal:docuseal --from=webpack /app/public/packs ./public/packs
 
-RUN ln -s /fonts /app/public/fonts
-RUN bundle exec bootsnap precompile -j 1 --gemfile app/ lib/
-
-RUN chown -R docuseal:docuseal /app
+RUN ln -s /fonts /app/public/fonts && \
+    bundle exec bootsnap precompile -j 1 --gemfile app/ lib/ && \
+    chown -R docuseal:docuseal /app/tmp/cache
 
 WORKDIR /data/docuseal
 ENV HOME=/home/docuseal

app/controllers/templates_detect_fields_controller.rb

@@ -11,11 +11,14 @@ def create
     sse = SSE.new(response.stream)
 
     documents = @template.schema_documents.preload(:blob)
+    documents = documents.where(uuid: params[:attachment_uuid]) if params[:attachment_uuid].present?
+
+    page_number = params[:page].present? ? params[:page].to_i : nil
 
     documents.each do |document|
       io = StringIO.new(document.download)
 
-      Templates::DetectFields.call(io, attachment: document) do |(attachment_uuid, page, fields)|
+      Templates::DetectFields.call(io, attachment: document, page_number:) do |(attachment_uuid, page, fields)|
         sse.write({ attachment_uuid:, page:, fields: })
       end
     end

app/javascript/submission_form/form.vue

@@ -1244,17 +1244,31 @@ export default {
       } else if (['equal', 'contains'].includes(condition.action) && field) {
         if (field.options) {
           const option = field.options.find((o) => o.uuid === condition.value)
-          const values = [this.values[condition.field_uuid] ?? defaultValue].flat()
 
-          return values.includes(this.optionValue(option, field.options.indexOf(option)))
+          if (option) {
+            const values = [this.values[condition.field_uuid] ?? defaultValue].flat()
+
+            return values.includes(this.optionValue(option, field.options.indexOf(option)))
+          } else {
+            return false
+          }
         } else {
           return [this.values[condition.field_uuid] ?? defaultValue].flat().includes(condition.value)
         }
       } else if (['not_equal', 'does_not_contain'].includes(condition.action) && field) {
-        const option = field.options.find((o) => o.uuid === condition.value)
-        const values = [this.values[condition.field_uuid] ?? defaultValue].flat()
+        if (field.options) {
+          const option = field.options.find((o) => o.uuid === condition.value)
 
-        return !values.includes(this.optionValue(option, field.options.indexOf(option)))
+          if (option) {
+            const values = [this.values[condition.field_uuid] ?? defaultValue].flat()
+
+            return !values.includes(this.optionValue(option, field.options.indexOf(option)))
+          } else {
+            return false
+          }
+        } else {
+          return false
+        }
       } else {
         return true
       }

app/javascript/template_builder/area.vue

@@ -8,7 +8,7 @@
     @touchstart="startTouchDrag"
   >
     <div
-      v-if="isSelected || isDraw"
+      v-if="isSelected || isDraw || isInMultiSelection"
       class="top-0 bottom-0 right-0 left-0 absolute border border-1.5 pointer-events-none"
       :class="activeBorderClasses"
     />
@@ -24,15 +24,15 @@
         :style="{ left: (cellW / area.w * 100) + '%' }"
       >
         <span
-          v-if="index === 0 && editable"
+          v-if="index === 0 && editable && !isInMultiSelection"
           class="h-2.5 w-2.5 rounded-full -bottom-1 border-gray-400 bg-white shadow-md border absolute cursor-ew-resize z-10"
           style="left: -4px"
           @mousedown.stop="startResizeCell"
         />
       </div>
     </div>
     <div
-      v-if="field?.type && (isSelected || isNameFocus)"
+      v-if="field?.type && (isSelected || isNameFocus) && !isInMultiSelection"
       class="absolute bg-white rounded-t border overflow-visible whitespace-nowrap flex z-10 field-area-controls"
       style="top: -25px; height: 25px"
       @mousedown.stop
@@ -48,7 +48,7 @@
         :menu-classes="'dropdown-content bg-white menu menu-xs p-2 shadow rounded-box w-52 rounded-t-none -left-[1px] mt-[1px]'"
         :submitters="template.submitters"
         @update:model-value="save"
-        @click="selectedAreaRef.value = area"
+        @click="selectedAreasRef.value = [area]"
       />
       <FieldType
         v-model="field.type"
@@ -57,7 +57,7 @@
         :button-classes="'px-1'"
         :menu-classes="'bg-white rounded-t-none'"
         @update:model-value="[maybeUpdateOptions(), save()]"
-        @click="selectedAreaRef.value = area"
+        @click="selectedAreasRef.value = [area]"
       />
       <span
         v-if="field.type !== 'checkbox' || field.name"
@@ -146,7 +146,7 @@
               @click-font="isShowFontModal = true"
               @click-description="isShowDescriptionModal = true"
               @click-condition="isShowConditionsModal = true"
-              @scroll-to="[selectedAreaRef.value = $event, $emit('scroll-to', $event)]"
+              @scroll-to="[selectedAreasRef.value = [$event], $emit('scroll-to', $event)]"
             />
           </ul>
         </span>
@@ -266,7 +266,7 @@
               ref="defaultValueSelect"
               class="bg-transparent outline-none focus:outline-none w-full"
               @change="[field.default_value = $event.target.value, field.readonly = !!field.default_value?.length, save()]"
-              @focus="selectedAreaRef.value = area"
+              @focus="selectedAreasRef.value = [area]"
               @keydown.enter="onDefaultValueEnter"
             >
               <option
@@ -293,7 +293,7 @@
               :class="{ 'cursor-text': isValueInput }"
               :placeholder="withFieldPlaceholder && !isValueInput ? defaultField?.title || field.title || field.name || defaultName : (field.type === 'date' ? field.preferences?.format || t('type_value') : t('type_value'))"
               @blur="onDefaultValueBlur"
-              @focus="selectedAreaRef.value = area"
+              @focus="selectedAreasRef.value = [area]"
               @paste.prevent="onPaste"
               @keydown.enter="onDefaultValueEnter"
             >{{ field.default_value }}</span>
@@ -319,6 +319,7 @@
     <span
       v-if="field?.type && editable"
       class="h-4 w-4 lg:h-2.5 lg:w-2.5 -right-1 rounded-full -bottom-1 border-gray-400 bg-white shadow-md border absolute cursor-nwse-resize"
+      :class="{ 'z-30': isInMultiSelection }"
       @mousedown.stop="startResize"
       @touchstart="startTouchResize"
     />
@@ -398,7 +399,7 @@ export default {
     FieldSubmitter,
     IconX
   },
-  inject: ['template', 'selectedAreaRef', 'save', 't', 'isInlineSize'],
+  inject: ['template', 'save', 't', 'isInlineSize', 'selectedAreasRef', 'isCmdKeyRef'],
   props: {
     area: {
       type: Object,
@@ -463,6 +464,11 @@ export default {
       type: Object,
       required: false,
       default: null
+    },
+    isSelectMode: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   emits: ['start-resize', 'stop-resize', 'start-drag', 'stop-drag', 'remove', 'scroll-to'],
@@ -646,7 +652,10 @@ export default {
       ]
     },
     isSelected () {
-      return this.selectedAreaRef.value === this.area
+      return this.selectedAreasRef.value.includes(this.area)
+    },
+    isInMultiSelection () {
+      return this.selectedAreasRef.value.length >= 2 && this.isSelected
     },
     positionStyle () {
       const { x, y, w, h } = this.area
@@ -683,10 +692,10 @@ export default {
     buildAreaOptionValue (area) {
       const option = this.optionsUuidIndex[area.option_uuid]
 
-      return option.value || `${this.t('option')} ${this.field.options.indexOf(option) + 1}`
+      return option?.value || `${this.t('option')} ${this.field.options.indexOf(option) + 1}`
     },
     maybeToggleDefaultValue () {
-      if (!this.editable) {
+      if (!this.editable || this.isCmdKeyRef.value) {
         return
       }
 
@@ -770,7 +779,7 @@ export default {
       }
     },
     onNameFocus (e) {
-      this.selectedAreaRef.value = this.area
+      this.selectedAreasRef.value = [this.area]
 
       this.isNameFocus = true
       this.$refs.name.style.minWidth = this.$refs.name.clientWidth + 'px'
@@ -906,6 +915,15 @@ export default {
       if (e.target.id === 'mask') {
         this.area.w = e.offsetX / e.target.clientWidth - this.area.x
         this.area.h = e.offsetY / e.target.clientHeight - this.area.y
+
+        if (this.isInMultiSelection) {
+          this.selectedAreasRef.value.forEach((area) => {
+            if (area !== this.area) {
+              area.w = this.area.w
+              area.h = this.area.h
+            }
+          })
+        }
       }
     },
     drag (e) {
@@ -931,7 +949,7 @@ export default {
 
       const rect = e.target.getBoundingClientRect()
 
-      this.selectedAreaRef.value = this.area
+      this.selectedAreasRef.value = [this.area]
 
       this.dragFrom = { x: rect.left - e.touches[0].clientX, y: rect.top - e.touches[0].clientY }
 
@@ -980,13 +998,23 @@ export default {
 
       e.preventDefault()
 
+      if (e.metaKey || e.ctrlKey) {
+        if (!this.selectedAreasRef.value.includes(this.area)) {
+          this.selectedAreasRef.value.push(this.area)
+        } else {
+          this.selectedAreasRef.value.splice(this.selectedAreasRef.value.indexOf(this.area), 1)
+        }
+
+        return
+      }
+
       if (this.editable) {
         this.isDragged = true
       }
 
       const rect = e.target.getBoundingClientRect()
 
-      this.selectedAreaRef.value = this.area
+      this.selectedAreasRef.value = [this.area]
 
       this.dragFrom = { x: rect.left - e.clientX, y: rect.top - e.clientY }
 
@@ -1055,7 +1083,9 @@ export default {
       this.$emit('stop-drag')
     },
     startResize () {
-      this.selectedAreaRef.value = this.area
+      if (!this.selectedAreasRef.value.includes(this.area)) {
+        this.selectedAreasRef.value = [this.area]
+      }
 
       this.$el.getRootNode().addEventListener('mousemove', this.resize)
       this.$el.getRootNode().addEventListener('mouseup', this.stopResize)
@@ -1071,7 +1101,9 @@ export default {
       this.save()
     },
     startTouchResize (e) {
-      this.selectedAreaRef.value = this.area
+      if (!this.selectedAreasRef.value.includes(this.area)) {
+        this.selectedAreasRef.value = [this.area]
+      }
 
       this.$refs?.name?.blur()
 
@@ -1088,6 +1120,15 @@ export default {
 
       this.area.w = (e.touches[0].clientX - rect.left) / rect.width - this.area.x
       this.area.h = (e.touches[0].clientY - rect.top) / rect.height - this.area.y
+
+      if (this.isInMultiSelection) {
+        this.selectedAreasRef.value.forEach((area) => {
+          if (area !== this.area) {
+            area.w = this.area.w
+            area.h = this.area.h
+          }
+        })
+      }
     },
     stopTouchResize () {
       this.$el.getRootNode().removeEventListener('touchmove', this.touchResize)