objectives

<template>
  <div>
    <div class="row">
      <div class="col-md-6">
        <search-field/>
      </div>
      <div class="col-md-6">
        <usergroup-selector/>
      </div>
    </div>

    <div class="row">
      <div class="col-md-3">
        <b-btn
          v-b-modal.AddObjective
          variant="primary">Add</b-btn>
        <b-modal
          id="AddObjective"
          ref="addmodal"
          :disabled="$v.form.$invalid"
          title="Add New Objective"
        >
          <b-form >
            <b-form-group
              label="Title"
              label-for="input1">
              <b-form-input
                id="input1"
                v-model="form.title"
                :state="!$v.form.title.$error && null && !$v.form.title.$invalid"
                type="text"
                aria-describedby="input1LiveFeedback"
                placeholder="Enter title"
                @input="$v.form.title.$touch()"
              />
              <b-form-invalid-feedback id="input1LiveFeedback">
                <small
                  v-if="!$v.form.title.required"
                  class="form-text text-muted">This is a required field.</small>
                <small
                  v-else-if="!$v.form.title.$pending && !$v.form.title.minLength"
                  class="form-text text-muted">It must be at least 3 characters.</small>
              </b-form-invalid-feedback>
            </b-form-group>
            <b-form-group
              label="Description"
              label-for="input2">
              <b-form-input
                id="input2"
                v-model="form.description"
                :state="!$v.form.description.$error && null && !$v.form.description.$invalid"
                type="text"
                aria-describedby="input2LiveFeedback"
                placeholder="Enter description"
                @input="$v.form.description.$touch()"
              />

              <b-form-invalid-feedback id="input1LiveFeedback">
                <small
                  v-if="!$v.form.description.required"
                  class="form-text text-muted">This is a required field.</small>
                <small
                  v-else-if="!$v.form.description.$pending && !$v.form.description.minLength"
                  class="form-text text-muted">It must be at least 3 characters.</small>
              </b-form-invalid-feedback>
            </b-form-group>
          </b-form>
          <div slot= "modal-footer">
            <b-btn
              :disabled="$v.form.$invalid"
              type="submit"
              variant="primary"
              @click.stop.prevent="ObjectiveCreate"
            >
              Create
            </b-btn>

            <b-btn
              class="ml-3"
              type="reset"
              variant="primary"
              @click.stop.prevent="ObjectiveCancel">
              Cancel
            </b-btn>
          </div>
        </b-modal>
      </div>
    </div>

    <div class="row mt-3">
      <div class="col-12">
        <b-table
          :busy.sync="isBusy"
          :items="ObjectiveData"
          :fields="fields"
        >
          <template
            slot="actions"
            slot-scope="row"
          >
            <!--
            <b-btn
              v-b-modal.UpdateObjective
              size="sm"
              class="mr-1"
              variant="primary"
              @click.prevent="UpdateObjective(row.item)">Update for {{ row.item.objectiveID }}</b-btn>
            <b-button
              v-b-modal.DeleteObjective
              variant="danger"
              size="sm"
              class="mr-1">Delete for {{ row.item.objectiveID }}</b-button>
              -->
            <b-button
              v-b-modal.UpdateObjective
              size="sm"
              class="mr-1"
              variant="primary"
              @click.stop.prevent="ObjectiveUpdate(row.item)">
              Update {{ row.item.objectiveID }}
            </b-button>
            <b-button
              v-b-modal.DeleteObjective
              size="sm"
              variant="danger"
              @click.stop.prevent="ObjectiveDelete(row.item)">
              Delete {{ row.item.objectiveID }}
            </b-button>

          </template>
        </b-table>
        <b-modal
          id="UpdateObjective"
          ref="updatemodal"
          :disabled="$v.form.$invalid"
          title="Update Objective"
          ok-only
          @hide="ObjectiveCancel"
        >
          <b-form >
            <b-form-group
              label="Title"
              label-for="objectiveTitle">
              <b-form-input
                id="objectiveTitle"
                v-model="form.title"
                :state="!$v.form.title.$error && null && !$v.form.title.$invalid"
                type="text"
                aria-describedby="objectiveTitleLiveFeedback"
                placeholder="New title"
                @input="$v.form.title.$touch()"
              />
              <b-form-invalid-feedback id="objectiveTitleLiveFeedback">
                <small
                  v-if="!$v.form.title.required"
                  class="form-text text-muted">This is a required field.</small>
                <small
                  v-else-if="!$v.form.title.$pending && !$v.form.title.minLength"
                  class="form-text text-muted">It must be at least 3 characters.</small>
              </b-form-invalid-feedback>
            </b-form-group>
            <b-form-group
              label="Description"
              label-for="objectiveDesc">
              <b-form-input
                id="objectiveDesc"
                v-model="form.description"
                :state="!$v.form.description.$error && null && !$v.form.description.$invalid"
                type="text"
                aria-describedby="objectiveDescLiveFeedback"
                placeholder="New description"
                @input="$v.form.description.$touch()"
              />

              <b-form-invalid-feedback id="objectiveDescLiveFeedback">
                <small
                  v-if="!$v.form.description.required"
                  class="form-text text-muted">This is a required field.</small>
                <small
                  v-else-if="!$v.form.description.$pending && !$v.form.description.minLength"
                  class="form-text text-muted">It must be at least 3 characters.</small>
              </b-form-invalid-feedback>
            </b-form-group>
          </b-form>
        <!--
          <div slot= "modal-footer">
            <b-btn
              :disabled="$v.form.$invalid"
              type="submit"
              variant="primary"
              @click.stop.prevent="SecondUpdateObjective()"
            >
              Update
            </b-btn>

            <b-btn
              class="ml-3"
              type="reset"
              variant="primary"
              @click.stop.prevent="ObjectiveCancel()"
            >
              Cancel
            </b-btn>
          </div>
          -->
        </b-modal>

        <b-modal
          id="DeleteObjective"
          ref="deletemodal"
          :disabled="$v.form.$invalid"
          title="Delete Objective"
          @ok="ObjectiveDelete">
          <p> Are you sure that you want to delete this objective?</p>
        </b-modal>

      </div>
    </div>
  </div>
</template>

<script>
import SearchField from '@/components/Filters/SearchField.vue'
import UsergroupSelector from '@/components/Filters/UsergroupSelector.vue'
import { required, minLength } from 'vuelidate/lib/validators'

export default {
  components: {
    SearchField,
    UsergroupSelector
  },
  props: {
    objective: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      fields: [
        // { key: 'objectiveID', label: 'ObjectiveID' },
        // { key: 'usergroupID', label: 'UsergroupID' },
        { key: 'title', label: 'Title' },
        { key: 'description', label: 'Description' },
        { key: 'actions', label: 'Actions' }
      ],
      isBusy: false,
      items: [],
      form: {
        title: '',
        description: ''
      }
    }
  },
  validations: {
    form: {
      title: {
        required,
        minLength: minLength(3)
      },
      description: {
        required,
        minLength: minLength(3)
      }
    }
  },
  computed () {
    this.ObjectiveCreate()
    this.ObjectiveDelete()
  },
  methods: {
    ObjectiveCreate () {
      // dodaj u objectives uzmi default usergroup za usergroupID
      // {(this.$store.getters['auth/defaultUsergroup'])}
      this.$axios.post('@api-v01/objectives/5', this.form)
        .then((response) => {
          console.log(response)
          this.form.title = ''
          this.form.description = ''
          console.log('Submit form')
          this.$refs.addmodal.hide()
        })
        .catch((err) => {
          console.log(err)
        })
    },
    ObjectiveUpdate (item) {
      console.log(item.objectiveID)
      // update this objective
      if (this.form.title !== '' && this.form.description !== '') {
        this.$axios.put(`@api-v01/objectives/5/${item.objectiveID}`, this.form)
          .then((response) => {
            console.log(response)
          })
          .catch((err) => {
            console.log(err)
          })
      }
      // this.$root.$emit('bv::show::modal', 'updatemodal', button)
    },
    ObjectiveCancel () {
      this.form.title = ''
      this.form.description = ''
    },
    ObjectiveDelete () {
      console.log('OK')
    },
    ObjectiveData (ctx) {
      let promise = this.$axios.get('@api-v01/objectives/5')

      // Must return a promise that resolves to an array of items
      return promise.then((response) => {
        // Pluck the array of items off our axios response
        let items = response.data
        this.items = response.data
        console.log(response.data)
        // Must return an array of items or an empty array if an error occurred
        return (items || [])
      })
    }
  }
}

</script>

<style lang="scss" scoped>

</style>