add allow custom option to multiple choice

app/Http/Controllers/Api/FormBlockInteractionController.php

@@ -22,9 +22,7 @@ public function create(Request $request, FormBlock $block)
             ))],
         ]);
 
-        $interaction = new FormBlockInteraction([
-            'type' => $request->input('type'),
-        ]);
+        $interaction = new FormBlockInteraction($request->only('type', 'name', 'is_editable', 'is_disabled'));
 
         $block->formBlockInteractions()->save($interaction);
 
@@ -38,12 +36,12 @@ public function update(Request $request, FormBlockInteraction $interaction)
         switch ($interaction->type) {
             case FormBlockInteractionType::button:
                 $request->validate([
-                    'label' => 'min:1',
+                    'label' => 'exclude_if:is_editable,false|min:1',
                 ]);
                 break;
         }
 
-        $interaction->fill($request->only(['label', 'message', 'uuid', 'options']));
+        $interaction->fill($request->only(['label', 'message', 'uuid', 'options', 'is_editable', 'is_disabled', 'name']));
         $interaction->save();
 
         return response()->json($interaction, 200);

app/Models/FormBlockInteraction.php

@@ -26,6 +26,8 @@ class FormBlockInteraction extends Model
         'form_block_id' => 'integer',
         'type' => FormBlockInteractionType::class,
         'options' => 'array',
+        'is_editable' => 'boolean',
+        'is_disabled' => 'boolean',
     ];
 
     protected static function boot()

database/migrations/2022_12_27_192226_add_system_name_and_disabled_field_to_interactions.php

@@ -0,0 +1,24 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('form_block_interactions', function (Blueprint $table) {
+            $table->after('type', function (Blueprint $table) {
+                $table->string('name')->nullable();
+                $table->boolean('is_editable')->default(true);
+                $table->boolean('is_disabled')->default(false);
+            });
+        });
+    }
+};

resources/js/api/interactions.ts

@@ -4,14 +4,16 @@ import handler from "./handler";
 
 export function callCreateFormBlockInteraction(
     id: number,
-    type: FormBlockInteractionModel["type"]
+    type: FormBlockInteractionModel["type"],
+    attributes?: Partial<FormBlockInteractionModel>
 ): Promise<AxiosResponse<FormBlockInteractionModel>> {
     return new Promise(async (resolve, reject) => {
         try {
             const response = await handler.post(
                 window.route("api.interactions.create", { block: id }),
                 {
                     type,
+                    ...attributes,
                 }
             );
 

resources/js/components/Factory/Main/ConfigureClicks.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <EmptyState
-      v-if="currentInteractions?.length === 0"
+      v-if="editableInteractions?.length === 0"
       title="Nothing here yet."
       description="Add your first option by clicking on the button below."
     />
@@ -13,7 +13,7 @@
       orientation="vertical"
       @drop="onDrop"
     >
-      <Draggable v-for="(item, index) in currentInteractions" :key="item.id">
+      <Draggable v-for="(item, index) in editableInteractions" :key="item.id">
         <ClickInteraction
           v-bind="{ item, index }"
           :key="`${item.id}-${index}`"
@@ -26,6 +26,17 @@
       </Draggable>
     </Container>
 
+    <div class="mb-3 flex justify-between pt-3">
+      <D9Label label="Allow Custom Response" />
+      <D9Switch
+        label=""
+        v-model="useCustomResponse"
+        onLabel="yes"
+        offLabel="no"
+        @change="updateCustomResponseSetting"
+      />
+    </div>
+
     <div class="mt-4">
       <D9Button
         label="Add new option"
@@ -41,16 +52,30 @@
 
 <script setup lang="ts">
 import { useWorkbench } from "@/stores";
-import { D9Button } from "@deck9/ui";
-import { ref, nextTick } from "vue";
+import { D9Button, D9Label, D9Switch } from "@deck9/ui";
+import { ref, nextTick, computed } from "vue";
 import ClickInteraction from "./Interactions/ClickInteraction.vue";
 import { Container, Draggable } from "vue3-smooth-dnd";
 import EmptyState from "@/components/EmptyState.vue";
-import { storeToRefs } from "pinia";
 import { useKeyboardNavigation } from "@/components/Factory/utils/useKeyboardNavigation";
+import useActiveInteractions from "../Shared/useActiveInteractions";
 
 const workbench = useWorkbench();
-const { currentInteractions } = storeToRefs(workbench);
+const { activeInteractions, editableInteractions } = useActiveInteractions(
+  workbench.block
+);
+
+const otherOptionInteractionName = "other_response";
+
+const otherOptionInteraction = computed(() => {
+  return activeInteractions.value?.find((interaction) => {
+    return interaction.name === otherOptionInteractionName;
+  });
+});
+
+const useCustomResponse = ref(
+  otherOptionInteraction.value?.is_disabled === false
+);
 
 const isCreatingInteraction = ref(false);
 
@@ -80,14 +105,32 @@ const createClickInteraction = async () => {
   }
 };
 
+const updateCustomResponseSetting = async () => {
+  // check if we have already created the interaction used for other option
+  if (!otherOptionInteraction.value) {
+    // create the interaction
+    await workbench.createInteraction("button", {
+      name: otherOptionInteractionName,
+      is_editable: false,
+      is_disabled: !useCustomResponse.value,
+    });
+  } else {
+    // update the interaction
+    await workbench.updateInteraction({
+      id: otherOptionInteraction.value.id,
+      is_disabled: !useCustomResponse.value,
+    });
+  }
+};
+
 const {
   bindTemplateRefsForTraversables,
   focusNextItem,
   focusNextItemSoft,
   focusPreviousItem,
   focusLastItem,
   focusNeighborItem,
-} = useKeyboardNavigation(currentInteractions, async () => {
+} = useKeyboardNavigation(activeInteractions, async () => {
   await createClickInteraction();
 });
 </script>

resources/js/components/Factory/Shared/useActiveInteractions.ts

@@ -4,6 +4,7 @@ import { useForm } from "@/stores/form";
 
 export default function (block: FormBlockModel | null): {
     activeInteractions: ComputedRef<FormBlockInteractionModel[] | undefined>;
+    editableInteractions: ComputedRef<FormBlockInteractionModel[] | undefined>;
 } {
     const activeInteractions = computed(() => {
         const store = useForm();
@@ -21,7 +22,14 @@ export default function (block: FormBlockModel | null): {
         return sortBy(interactions, ["sequence"]);
     });
 
+    const editableInteractions = computed(() => {
+        return activeInteractions.value?.filter((interaction) => {
+            return interaction.is_editable;
+        });
+    });
+
     return {
         activeInteractions,
+        editableInteractions,
     };
 }

resources/js/components/Factory/Sidebar/Block.vue

@@ -52,7 +52,7 @@
       </div>
 
       <BlockInteraction
-        v-for="(interaction, index) in activeInteractions"
+        v-for="(interaction, index) in editableInteractions"
         v-bind="{ interaction, index }"
         :key="interaction.id"
       />
@@ -84,7 +84,7 @@ const props = defineProps<{
 
 provide("block", props.block);
 
-const { activeInteractions } = useActiveInteractions(props.block);
+const { editableInteractions } = useActiveInteractions(props.block);
 
 const isActive = computed((): boolean => {
   return workbench.block && workbench.block.id === props.block.id

resources/js/stores/workbench.ts

@@ -116,7 +116,8 @@ export const useWorkbench = defineStore("workbench", {
         },
 
         async createInteraction(
-            type: FormBlockInteractionModel["type"]
+            type: FormBlockInteractionModel["type"],
+            attributes?: Partial<FormBlockInteractionModel>
         ): Promise<FormBlockInteractionModel | undefined> {
             if (!this.block) {
                 return;
@@ -125,7 +126,8 @@ export const useWorkbench = defineStore("workbench", {
             try {
                 const response = await callCreateFormBlockInteraction(
                     this.block?.id,
-                    type
+                    type,
+                    attributes
                 );
 
                 if (response.status === 201) {

resources/js/types/models.d.ts

@@ -102,6 +102,9 @@ type FormBlockInteractionSettings = {
 
 interface FormBlockInteractionModel extends BaseModel {
     type: FormBlockInteractionType;
+    name: string | null;
+    is_editable: boolean | null;
+    is_disabled: boolean | null;
     label: string | null;
     options: FormBlockInteractionSettings;
     message: string | null;

tests/Feature/Forms/Interactions/InteractionsTestingContract.php

@@ -84,7 +84,6 @@ public function can_delete_an_interaction_of_this_type()
     /** @test */
     public function can_save_json_option_object_to_interaction()
     {
-        $this->withoutExceptionHandling();
         $interaction = FormBlockInteraction::factory()->create([
             'type' => $this->getInteractionType(),
         ]);
@@ -103,4 +102,72 @@ public function can_save_json_option_object_to_interaction()
             'max_chars' => 250,
         ], $interaction->fresh()->options);
     }
+
+    /** @test */
+    public function an_interaction_can_be_made_not_editable()
+    {
+        $interaction = FormBlockInteraction::factory()->create([
+            'type' => $this->getInteractionType(),
+        ]);
+
+        $this->assertTrue($interaction->fresh()->is_editable);
+
+        $this->actingAs($interaction->formBlock->form->user)
+            ->json('post', route('api.interactions.update', $interaction->id), [
+                'is_editable' => false,
+            ])
+            ->assertSuccessful();
+
+        $this->assertFalse($interaction->fresh()->is_editable);
+    }
+
+    /** @test */
+    public function an_interaction_can_be_made_disabled()
+    {
+        $interaction = FormBlockInteraction::factory()->create([
+            'type' => $this->getInteractionType(),
+        ]);
+
+        $this->assertFalse($interaction->fresh()->is_disabled);
+
+        $this->actingAs($interaction->formBlock->form->user)
+            ->json('post', route('api.interactions.update', $interaction->id), [
+                'is_disabled' => true,
+            ])
+            ->assertSuccessful();
+
+        $this->assertTrue($interaction->fresh()->is_disabled);
+    }
+
+    /** @test */
+    public function an_interaction_can_be_named()
+    {
+        $interaction = FormBlockInteraction::factory()->create([
+            'type' => $this->getInteractionType(),
+        ]);
+
+        $this->actingAs($interaction->formBlock->form->user)
+            ->json('post', route('api.interactions.update', $interaction->id), [
+                'name' => 'other_option',
+            ])
+            ->assertSuccessful();
+
+        $this->assertEquals('other_option', $interaction->fresh()->name);
+    }
+
+    /** @test */
+    public function label_can_be_null_when_interaction_is_not_editable()
+    {
+        $interaction = FormBlockInteraction::factory()->create([
+            'type' => $this->getInteractionType(),
+            'is_editable' => false,
+        ]);
+
+        $this->actingAs($interaction->formBlock->form->user)
+            ->json('post', route('api.interactions.update', $interaction->id), [
+                'label' => null,
+                'is_editable' => false,
+            ])
+            ->assertSuccessful();
+    }
 }