Merge pull request #19 from traPtitech/feat/new-questionnaire-form-2

`/questionnaires/new` の実装
traPtitech · Dec 16, 2023 · ec7b564 · ec7b564
2 parents b82be29 + 841e75a
commit ec7b564
Show file tree

Hide file tree

Showing 15 changed files with 632 additions and 395 deletions.
diff --git a/components/new-questionnaire-form/add-question-buttons.vue b/components/new-questionnaire-form/add-question-buttons.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import type { QuestionSettings } from '~/components/new-questionnaire-form/type';
+
+defineEmits<{
+  (e: 'add-question', type: QuestionSettings['type']): void;
+}>();
+</script>
+
+<template>
+  <Panel header="新しい質問を追加する">
+    <div class="add-question-buttons">
+      <Button
+        class="add-question-button"
+        outlined
+        @click="$emit('add-question', 'text')"
+      >
+        <Icon size="24px" name="ic:outline-short-text" />
+        <span>1行テキスト</span>
+      </Button>
+      <Button
+        class="add-question-button"
+        outlined
+        @click="$emit('add-question', 'text-long')"
+      >
+        <Icon size="24px" name="mdi:text" />
+        <span>長文テキスト</span>
+      </Button>
+      <Button
+        class="add-question-button"
+        outlined
+        @click="$emit('add-question', 'number')"
+      >
+        <Icon size="24px" name="mdi:numeric" />
+        <span>数値</span>
+      </Button>
+      <Button
+        class="add-question-button"
+        outlined
+        @click="$emit('add-question', 'multiple-choice')"
+      >
+        <Icon size="24px" name="mdi:checkbox-outline" />
+        <span>チェックボックス</span>
+      </Button>
+      <Button
+        class="add-question-button"
+        outlined
+        @click="$emit('add-question', 'single-choice')"
+      >
+        <Icon size="24px" name="mdi:radiobox-marked" />
+        <span>ラジオボタン</span>
+      </Button>
+      <Button
+        class="add-question-button"
+        outlined
+        @click="$emit('add-question', 'scale')"
+      >
+        <Icon size="24px" name="ic:outline-linear-scale" />
+        <span>目盛り</span>
+      </Button>
+    </div>
+  </Panel>
+</template>
+
+<style lang="scss" scoped>
+.add-question-buttons {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
+
+@media screen and (max-width: $breakpoint-lg) {
+  .add-question-buttons {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media screen and (max-width: 620px) {
+  .add-question-buttons {
+    grid-template-columns: 1fr;
+  }
+}
+
+.add-question-button {
+  display: flex;
+  gap: 8px;
+  padding: 8px 12px;
+}
+</style>
diff --git a/...s/new-questionnaire-form/choice-group.vue → ...orm/form-control-element/choice-group.vue b/...s/new-questionnaire-form/choice-group.vue → ...orm/form-control-element/choice-group.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { Container, Draggable } from 'vue3-smooth-dnd';
+import type { QuestionSettingsMultipleChoice } from '~/components/new-questionnaire-form/type';
 
 const props = defineProps<{
   modelValue: QuestionSettingsMultipleChoice['options'];
@@ -72,6 +73,7 @@ watch(
         <InputText
           :model-value="option.label"
           class="choice-group-label-input"
+          required
           placeholder="選択肢"
           @update:model-value="
             $emit(

diff --git a/...stionnaire-form/multiple-choice-input.vue → ...control-element/multiple-choice-input.vue b/...stionnaire-form/multiple-choice-input.vue → ...control-element/multiple-choice-input.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import type { QuestionSettingsMultipleChoice } from '~/components/new-questionnaire-form/type';
+
 const props = defineProps<{
   modelValue: QuestionSettingsMultipleChoice;
 }>();
@@ -16,7 +18,7 @@ const options = computed({
 
 <template>
   <ChoiceGroup v-model="options">
-    <Checkbox :model-value="false" :disabled="true"/>
+    <Checkbox :model-value="false" disabled />
   </ChoiceGroup>
 </template>
 

diff --git a/...s/new-questionnaire-form/number-input.vue → ...orm/form-control-element/number-input.vue b/...s/new-questionnaire-form/number-input.vue → ...orm/form-control-element/number-input.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import type { QuestionSettingsNumber } from '~/components/new-questionnaire-form/type';
+
 defineProps<{
   modelValue: QuestionSettingsNumber;
 }>();
@@ -9,7 +11,7 @@ defineEmits<{
 </script>
 
 <template>
-  <InputNumber placeholder="回答 (数値)" :disabled="true" />
+  <InputNumber placeholder="回答 (数値)" disabled />
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/...ts/new-questionnaire-form/scale-input.vue → ...form/form-control-element/scale-input.vue b/...ts/new-questionnaire-form/scale-input.vue → ...form/form-control-element/scale-input.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import type { QuestionSettingsScale } from '~/components/new-questionnaire-form/type';
+
 const props = defineProps<{
   modelValue: QuestionSettingsScale;
 }>();

diff --git a/...uestionnaire-form/single-choice-input.vue → ...m-control-element/single-choice-input.vue b/...uestionnaire-form/single-choice-input.vue → ...m-control-element/single-choice-input.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import type { QuestionSettingsSingleChoice } from '~/components/new-questionnaire-form/type';
+
 const props = defineProps<{
   modelValue: QuestionSettingsSingleChoice;
 }>();
@@ -16,7 +18,7 @@ const options = computed({
 
 <template>
   <ChoiceGroup v-model="options">
-    <RadioButton :model-value="false" :disabled="true" />
+    <RadioButton :model-value="false" disabled />
   </ChoiceGroup>
 </template>
 

diff --git a/...nts/new-questionnaire-form/text-input.vue → ...-form/form-control-element/text-input.vue b/...nts/new-questionnaire-form/text-input.vue → ...-form/form-control-element/text-input.vue
@@ -10,7 +10,7 @@ defineEmits<{
 </script>
 
 <template>
-  <InputText placeholder="回答 (1行テキスト)" :disabled="true" />
+  <InputText placeholder="回答 (1行テキスト)" disabled />
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/...ew-questionnaire-form/text-long-input.vue → .../form-control-element/text-long-input.vue b/...ew-questionnaire-form/text-long-input.vue → .../form-control-element/text-long-input.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import type { QuestionSettingsTextLong } from '~/components/new-questionnaire-form/type';
+
 defineProps<{
   modelValue: QuestionSettingsTextLong;
 }>();
@@ -9,7 +11,7 @@ defineEmits<{
 </script>
 
 <template>
-  <Textarea placeholder="回答 (長文テキスト)" :disabled="true" />
+  <Textarea placeholder="回答 (長文テキスト)" disabled />
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/components/new-questionnaire-form/form-control.vue b/components/new-questionnaire-form/form-control.vue
@@ -1,10 +1,11 @@
 <script lang="ts" setup>
-import MultipleChoiceInput from './multiple-choice-input.vue';
-import NumberInput from './number-input.vue';
-import ScaleInput from './scale-input.vue';
-import SingleChoiceInput from './single-choice-input.vue';
-import TextInput from './text-input.vue';
-import TextLongInput from './text-long-input.vue';
+import type { QuestionSettings } from '~/components/new-questionnaire-form/type';
+import MultipleChoiceInput from './form-control-element/multiple-choice-input.vue';
+import NumberInput from './form-control-element/number-input.vue';
+import ScaleInput from './form-control-element/scale-input.vue';
+import SingleChoiceInput from './form-control-element/single-choice-input.vue';
+import TextInput from './form-control-element/text-input.vue';
+import TextLongInput from './form-control-element/text-long-input.vue';
 
 const props = defineProps<{
   modelValue: QuestionSettings;
@@ -35,7 +36,7 @@ const formComponent = computed(() => formComponents[question.value.type]);
 
 <template>
   <div class="form-control-container">
-    <InputText v-model="question.title" placeholder="質問" />
+    <InputText v-model="question.title" required placeholder="質問" />
     <Textarea
       v-model="question.description"
       placeholder="詳細な説明 (任意)"