vue2_frontend/src/components/todo/InputComponent.vue

<template>
  <div>
    <b-modal
      id="inputForm"
      centered
      title="입력폼"
      size="lg"
      :header-bg-variant="headerBgVariant"
      :header-text-variant="headerTextVariant"
      :body-bg-variant="bodyBgVariant"
      :body-text-variant="bodyTextVariant"
      :footer-bg-variant="footerBgVariant"
      :footer-text-variant="footerTextVariant"
    >
      <validation-observer ref="observer" v-slot="{ handleSubmit }">
        <b-form @submit.stop.prevent="handleSubmit(onSubmit)">
          <validation-provider
            :name="field.title.label"
            :rules="field.title.rules"
            v-slot="validationContext"
          >
            <b-input-group>
              <label class="input-group-text">{{ field.title.label }}</label>
              <b-form-input
                :name="field.title.key"
                :type="field.title.type"
                v-model="form.title"
                :state="getValidationState(validationContext)"
                :style="field.title.style"
              ></b-form-input>
              <b-form-invalid-feedback>{{
                validationContext.errors[0]
              }}</b-form-invalid-feedback>
            </b-input-group>
          </validation-provider>
          <validation-provider
            :name="field.content.label"
            :rules="field.content.rules"
            v-slot="validationContext"
          >
            <label class="input-group-text">{{ field.content.label }}</label>
            <b-input-group>
              <b-form-textarea
                :config="field.content.config"
                :name="field.content.key"
                v-model="form.content"
                :state="getValidationState(validationContext)"
                :style="field.content.style"
                rows="8"
              ></b-form-textarea>
              <b-form-invalid-feedback>{{
                validationContext.errors[0]
              }}</b-form-invalid-feedback>
            </b-input-group>
          </validation-provider>
          <div class="mt-300 border">
            <b-button type="submit" variant="primary">입력</b-button>
            <b-button type="reset" variant="danger" @click="onReset()"
              >Reset</b-button
            >
          </div>
        </b-form>
      </validation-observer>
    </b-modal>
  </div>
</template>

<script>
import axios from 'axios'
//import { VueEditor } from 'vue2-editor/dist/vue2-editor.core.js'

export default {
  components: {},
  data() {
    return {
      form: {
        title: null,
        content: null
      },
      field: {
        title: {
          key: 'title',
          label: '제목',
          type: 'text',
          placeholder: 'Enter your name',
          rules: { required: true, min: 10 },
          style: 'sm-2'
        },
        content: {
          key: 'content',
          label: '내용',
          type: 'textarea',
          rules: { required: true, min: 10 },
          style: 'height: 200px'
        }
      },
      variants: [
        'primary',
        'secondary',
        'success',
        'warning',
        'danger',
        'info',
        'light',
        'dark'
      ],
      headerBgVariant: 'dark',
      headerTextVariant: 'light',
      bodyBgVariant: 'light',
      bodyTextVariant: 'dark',
      footerBgVariant: 'warning',
      footerTextVariant: 'dark'
    }
  },
  methods: {
    getValidationState({ dirty, validated, valid = null }) {
      return dirty || validated ? valid : null
    },
    async onSubmit() {
      const result = await this.callAPI('/todo', {
        title: this.form.title,
        content: this.form.content
      })
      if (result !== null) {
        alert('todo 추가 완료...')
      } else {
        console.log(result)
        alert('todo 추가 오류발생...')
      }
    },
    onReset() {
      // Reset our form values
      this.form.email = ''
      this.form.pasword = ''
      // Trick to reset/clear native browser form validation state
      this.$nextTick(() => {
        this.$refs.observer.reset()
      })
    },
    async callAPI(url, params) {
      console.log('CallAPI..', [url, params])
      axios.defaults.baseURL = process.env.VUE_APP_BACKEND_HOST
      //전송 Header에 추가
      const headers = {
        Authorization:
          'Bearer ' +
          sessionStorage.getItem(process.env.VUE_APP_LOCALSTORAGE_NAME)
      }
      return await axios
        .post(url, params, headers)
        .then((response) => {
          console.log(response)
          return response.status === 201 ? response.data : null
        })
        .catch((err) => {
          console.log(err)
          return null
        })
    }
  }
}
</script>
<style scoped>
/* @import '~vue2-editor/dist/vue2-editor.css';
/* Import the Quill styles you want */
/* @import '~quill/dist/quill.core.css';
@import '~quill/dist/quill.bubble.css';
@import '~quill/dist/quill.snow.css';  */
</style>