ankurk91 / laravel-form-validation Goto Github PK

<template>
  <b-modal id="create-page-modal" title="Add new page"
           @hidden="resetModal"
           @ok="handleOk">
    
    <div class="form-group required">
      <label>Sequence</label>
      <input type="number" 
             class="form-control" 
             name="sequence"
             v-model="page.sequence"
             v-invalid="form.$errors">
      <field-error :bag="form.$errors" field="sequence"/>
    </div>

    <template v-slot:modal-footer="{ ok, cancel }">
      <button class="btn btn-secondary" @click="cancel()">
        Cancel
      </button>
      <button class="btn btn-primary" :disabled="form.$pending" @click="ok()">
        <span v-if="form.$pending">{{ form.$progress }}% Saving...</span>
        <span v-else>
          <i class="fas fa-check-circle"/> Save
        </span>
      </button>
    </template>
  </b-modal>
</template>
<script>
  import Form from 'laravel-form-validation'

  export default {
    name: 'CreatePageModal',
    props: {
      documentId: {}
    },
    data() {
      return {
        form: new Form(),
        page: {}
      }
    },
    mounted() {
      //
    },
    methods: {
      handleOk(event) {
        event.preventDefault();
        this.submit()
      },
      resetModal() {
        this.form.$errors.clear()
      },
      submit() {
        this.form.post(this.postUrl, this.page)
            .then((response) => {
              this.$emit('saved', response, this.documentId);
              this.$bvModal.hide('create-page-modal')
            })
            .catch((error) => {
              // handle error
              // this.$forceUpdate()
            })
      }
    },
    computed: {
      postUrl() {
        return 'documents/' + this.documentId + '/pages'
      }
    }
  }
</script>