add ability to draw areas for radio options

2023-11-14 01:30:00 +02:00
parent 9aa68fe955
commit 333a5d6b7b
6 changed files with 138 additions and 13 deletions
@@ -66,7 +66,7 @@
        @keydown.enter.prevent="onNameEnter"
        @focus="onNameFocus"
        @blur="onNameBlur"
-      >{{ field.name || defaultName }}</span>
+      >{{ optionIndexText }} {{ field.name || defaultName }}</span>
      <div
        v-if="isNameFocus && !['checkbox', 'phone'].includes(field.type)"
        class="flex items-center ml-1.5"
@@ -185,6 +185,13 @@ export default {
    defaultName: Field.computed.defaultName,
    fieldNames: FieldType.computed.fieldNames,
    fieldIcons: FieldType.computed.fieldIcons,
+    optionIndexText () {
+      if (this.area.option_uuid && this.field.options) {
+        return `${this.field.options.findIndex((o) => o.uuid === this.area.option_uuid) + 1}.`
+      } else {
+        return ''
+      }
+    },
    cells () {
      const cells = []

@@ -168,7 +168,7 @@
          :selected-submitter="selectedSubmitter"
          class="md:hidden"
          :editable="editable"
-          @cancel="drawField = null"
+          @cancel="[drawField = null, drawOption = null]"
          @change-submitter="[selectedSubmitter = $event, drawField.submitter_uuid = $event.uuid]"
        />
        <FieldType
@@ -209,7 +209,7 @@
            <p>
              <button
                class="base-button"
-                @click="drawField = null"
+                @click="[drawField = null, drawOption = null]"
              >
                Cancel
              </button>
@@ -225,7 +225,7 @@
            :default-fields="defaultFields"
            :with-sticky-submitters="withStickySubmitters"
            :editable="editable"
-            @set-draw="drawField = $event"
+            @set-draw="[drawField = $event.field, drawOption = $event.option]"
            @set-drag="dragField = $event"
            @change-submitter="selectedSubmitter = $event"
            @drag-end="dragField = null"
@@ -354,6 +354,7 @@ export default {
      isSaving: false,
      selectedSubmitter: null,
      drawField: null,
+      drawOption: null,
      dragField: null
    }
  },
@@ -433,6 +434,7 @@ export default {
      }

      this.drawField = field
+      this.drawOption = null
    },
    undo () {
      if (this.undoStack.length > 1) {
@@ -482,6 +484,7 @@ export default {
    onKeyUp (e) {
      if (e.code === 'Escape') {
        this.drawField = null
+        this.drawOption = null
        this.selectedAreaRef.value = null
      }

@@ -528,6 +531,16 @@ export default {
    },
    onDraw (area) {
      if (this.drawField) {
+        if (this.drawOption) {
+          const areaWithoutOption = this.drawField.areas?.find((a) => !a.option_uuid)
+
+          if (areaWithoutOption && !this.drawField.areas.find((a) => a.option_uuid === this.drawField.options[0].uuid)) {
+            areaWithoutOption.option_uuid = this.drawField.options[0].uuid
+          }
+
+          area.option_uuid = this.drawOption.uuid
+        }
+
        this.drawField.areas ||= []
        this.drawField.areas.push(area)

@@ -536,6 +549,7 @@ export default {
        }

        this.drawField = null
+        this.drawOption = null

        this.selectedAreaRef.value = area

@@ -58,7 +58,7 @@
            v-if="field && !field.areas.length"
            title="Draw"
            class="relative cursor-pointer text-transparent group-hover:text-base-content"
-            @click="$emit('set-draw', field)"
+            @click="$emit('set-draw', { field })"
          >
            <IconNewSection
              :width="18"
@@ -151,11 +151,11 @@
                  Page {{ area.page + 1 }}
                </a>
              </li>
-              <li>
+              <li v-if="!field.areas?.length || !['radio', 'multiple'].includes(field.type)">
                <a
                  href="#"
                  class="text-sm py-1 px-2"
-                  @click.prevent="$emit('set-draw', field)"
+                  @click.prevent="$emit('set-draw', { field })"
                >
                  <IconNewSection
                    :width="20"
@@ -205,16 +205,39 @@
          <span class="text-sm w-3.5">
            {{ index + 1 }}.
          </span>
+          <div
+            v-if="['radio', 'multiple'].includes(field.type) && (index > 0 || field.areas.find((a) => a.option_uuid)) && !field.areas.find((a) => a.option_uuid === option.uuid)"
+            class="items-center flex w-full"
+          >
+            <input
+              v-model="option.value"
+              class="w-full input input-primary input-xs text-sm bg-transparent !pr-7 -mr-6"
+              type="text"
+              required
+              @blur="save"
+            >
+            <button
+              title="Draw"
+              @click.prevent="$emit('set-draw', { field, option })"
+            >
+              <IconNewSection
+                :width="18"
+                :stroke-width="1.6"
+              />
+            </button>
+          </div>
          <input
+            v-else
            v-model="option.value"
            class="w-full input input-primary input-xs text-sm bg-transparent"
            type="text"
            required
+            @focus="maybeFocusOnOptionArea(option)"
            @blur="save"
          >
          <button
            class="text-sm w-3.5"
-            @click="[field.options.splice(index, 1), save()]"
+            @click="removeOption(option)"
          >
            &times;
          </button>
@@ -248,7 +271,7 @@ export default {
    IconCopy,
    FieldType
  },
-  inject: ['template', 'save', 'backgroundColor'],
+  inject: ['template', 'save', 'backgroundColor', 'selectedAreaRef'],
  props: {
    field: {
      type: Object,
@@ -306,6 +329,13 @@ export default {
        }, 1)
      }
    },
+    maybeFocusOnOptionArea (option) {
+      const area = this.field.areas.find((a) => a.option_uuid === option.uuid)
+
+      if (area) {
+        this.selectedAreaRef.value = area
+      }
+    },
    scrollToFirstArea () {
      return this.field.areas?.[0] && this.$emit('scroll-to', this.field.areas[0])
    },
@@ -317,6 +347,12 @@ export default {

      this.save()
    },
+    removeOption (option) {
+      this.field.options.splice(this.field.options.indexOf(option), 1)
+      this.field.areas.splice(this.field.areas.findIndex((a) => a.option_uuid === option.uuid), 1)
+
+      this.save()
+    },
    maybeUpdateOptions () {
      delete this.field.default_value