Apiko Delete File

Apiko Delete File

<template lang="pug">
  q-layout

    // NAVIGATION SECTION
    .toolbar( slot="header" )
      q-toolbar-title( :padding="1" ) File Delete
    q-tabs( slot="navigation" )
      q-tab( route="/files/delete", exact, replace ) go back

    // CONTAINER SECTION
    .row.gutter.auto
      .layout-view
        .layout-padding

          // INPUT SECTION
          .card.auto
            .card-title.bg-secondary.text-white file delete
            .card-content
              p.caption
                .stacked-label
                  input.full-width.has-error( type="text", v-model.trim="id", pattern="^\d{1,10}$", autofocus, required )
                  label file id
              button.full-width.secondary.raised( @click="onSubmit" ) delete file

</template>

<script>
  import axios from 'axios'
  import { Toast } from 'quasar'

  export default {
    data () {
      return {
        delURL: 'http://localhost:5000/files/',
        id: null
      }
    },
    methods: {
      onSuccess () {
        Toast.create.positive('File Successfully Deleted!')
      },
      onError () {
        Toast.create.negative('File Not Found!')
      },
      onWarning () {
        Toast.create.warning('Input Field Should Not Be Empty!')
      },
      onSubmit () {
        if (!this.id) {
          this.onWarning()
        }
        else {
          axios.delete(this.delURL + this.id)
            .then(response => {
              this.onSuccess()
              this.id = null
              console.log(response.status) // NOT RESPONSE
            })
            .catch(error => {
              this.onError()
              console.log(error)
            })
        }
      }
    }
  }
</script>

<style lang="scss">
  .card {
    & .card-title,
    & label {
      text-transform: capitalize;
    }
  }
</style>