SHARE
TWEET

objectives_finished

a guest Sep 26th, 2018 66 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.   <div>
  3.     <div class="row">
  4.       <div class="col-md-6">
  5.         <search-field/>
  6.       </div>
  7.       <div class="col-md-6">
  8.         <usergroup-selector/>
  9.       </div>
  10.     </div>
  11.  
  12.     <div class="row">
  13.       <div class="col-md-3">
  14.         <b-btn
  15.           v-b-modal.AddObjective
  16.           variant="primary">Add</b-btn>
  17.         <b-modal
  18.           id="AddObjective"
  19.           ref="addmodal"
  20.           :disabled="$v.form.$invalid"
  21.           title="Add New Objective"
  22.         >
  23.           <b-form >
  24.             <b-form-group
  25.               label="Title"
  26.               label-for="input1">
  27.               <b-form-input
  28.                 id="input1"
  29.                 v-model="form.title"
  30.                 :state="!$v.form.title.$error && null && !$v.form.title.$invalid"
  31.                 type="text"
  32.                 aria-describedby="input1LiveFeedback"
  33.                 placeholder="Enter title"
  34.                 @input="$v.form.title.$touch()"
  35.               />
  36.               <b-form-invalid-feedback id="input1LiveFeedback">
  37.                 <small
  38.                   v-if="!$v.form.title.required"
  39.                   class="form-text text-muted">This is a required field.</small>
  40.                 <small
  41.                   v-else-if="!$v.form.title.$pending && !$v.form.title.minLength"
  42.                   class="form-text text-muted">It must be at least 3 characters.</small>
  43.               </b-form-invalid-feedback>
  44.             </b-form-group>
  45.             <b-form-group
  46.               label="Description"
  47.               label-for="input2">
  48.               <b-form-input
  49.                 id="input2"
  50.                 v-model="form.description"
  51.                 :state="!$v.form.description.$error && null && !$v.form.description.$invalid"
  52.                 type="text"
  53.                 aria-describedby="input2LiveFeedback"
  54.                 placeholder="Enter description"
  55.                 @input="$v.form.description.$touch()"
  56.               />
  57.  
  58.               <b-form-invalid-feedback id="input1LiveFeedback">
  59.                 <small
  60.                   v-if="!$v.form.description.required"
  61.                   class="form-text text-muted">This is a required field.</small>
  62.                 <small
  63.                   v-else-if="!$v.form.description.$pending && !$v.form.description.minLength"
  64.                   class="form-text text-muted">It must be at least 3 characters.</small>
  65.               </b-form-invalid-feedback>
  66.             </b-form-group>
  67.           </b-form>
  68.           <div slot= "modal-footer">
  69.             <b-btn
  70.               :disabled="$v.form.$invalid"
  71.               type="submit"
  72.               variant="primary"
  73.               @click.stop.prevent="ObjectiveCreate"
  74.             >
  75.               Create
  76.             </b-btn>
  77.  
  78.             <b-btn
  79.               class="ml-3"
  80.               type="reset"
  81.               variant="primary"
  82.               @click.stop.prevent="ObjectiveCancel">
  83.               Cancel
  84.             </b-btn>
  85.           </div>
  86.         </b-modal>
  87.       </div>
  88.     </div>
  89.  
  90.     <div class="row mt-3">
  91.       <div class="col-12">
  92.         <b-table
  93.           :busy.sync="isBusy"
  94.           :items="ObjectiveData"
  95.           :fields="fields"
  96.         >
  97.           <template
  98.             slot="actions"
  99.             slot-scope="row"
  100.           >
  101.             <!--
  102.             <b-btn
  103.               v-b-modal.UpdateObjective
  104.               size="sm"
  105.               class="mr-1"
  106.               variant="primary"
  107.               @click.prevent="UpdateObjective(row.item)">Update for {{ row.item.objectiveID }}</b-btn>
  108.             <b-button
  109.               v-b-modal.DeleteObjective
  110.               variant="danger"
  111.               size="sm"
  112.               class="mr-1">Delete for {{ row.item.objectiveID }}</b-button>
  113.               -->
  114.             <b-button
  115.               v-b-modal.UpdateObjective
  116.               size="sm"
  117.               class="mr-1"
  118.               variant="primary"
  119.               @click.stop.prevent="ObjectiveUpdate(row.item)">
  120.               Update
  121.             </b-button>
  122.             <b-button
  123.               v-b-modal.DeleteObjective
  124.               size="sm"
  125.               variant="danger"
  126.               @click.stop.prevent="ObjectiveDelete(row.item)">
  127.               Delete
  128.             </b-button>
  129.  
  130.           </template>
  131.         </b-table>
  132.         <b-modal
  133.           id="UpdateObjective"
  134.           ref="updatemodal"
  135.           :disabled="$v.form.$invalid"
  136.           title="Update Objective"
  137.         >
  138.           <b-form >
  139.             <b-form-group
  140.               label="Title"
  141.               label-for="objectiveTitle">
  142.               <b-form-input
  143.                 id="objectiveTitle"
  144.                 v-model="form.title"
  145.                 :state="!$v.form.title.$error && null && !$v.form.title.$invalid"
  146.                 type="text"
  147.                 aria-describedby="objectiveTitleLiveFeedback"
  148.                 placeholder="New title"
  149.                 @input="$v.form.title.$touch()"
  150.               />
  151.               <b-form-invalid-feedback id="objectiveTitleLiveFeedback">
  152.                 <small
  153.                   v-if="!$v.form.title.required"
  154.                   class="form-text text-muted">This is a required field.</small>
  155.                 <small
  156.                   v-else-if="!$v.form.title.$pending && !$v.form.title.minLength"
  157.                   class="form-text text-muted">It must be at least 3 characters.</small>
  158.               </b-form-invalid-feedback>
  159.             </b-form-group>
  160.             <b-form-group
  161.               label="Description"
  162.               label-for="objectiveDesc">
  163.               <b-form-input
  164.                 id="objectiveDesc"
  165.                 v-model="form.description"
  166.                 :state="!$v.form.description.$error && null && !$v.form.description.$invalid"
  167.                 type="text"
  168.                 aria-describedby="objectiveDescLiveFeedback"
  169.                 placeholder="New description"
  170.                 @input="$v.form.description.$touch()"
  171.               />
  172.  
  173.               <b-form-invalid-feedback id="objectiveDescLiveFeedback">
  174.                 <small
  175.                   v-if="!$v.form.description.required"
  176.                   class="form-text text-muted">This is a required field.</small>
  177.                 <small
  178.                   v-else-if="!$v.form.description.$pending && !$v.form.description.minLength"
  179.                   class="form-text text-muted">It must be at least 3 characters.</small>
  180.               </b-form-invalid-feedback>
  181.             </b-form-group>
  182.           </b-form>
  183.  
  184.           <div slot= "modal-footer">
  185.             <b-btn
  186.               :disabled="$v.form.$invalid"
  187.               type="submit"
  188.               variant="primary"
  189.               @click.stop.prevent="SecondUpdateObjective()"
  190.             >
  191.               Update
  192.             </b-btn>
  193.  
  194.             <b-btn
  195.               class="ml-3"
  196.               type="reset"
  197.               variant="primary"
  198.               @click.stop.prevent="ObjectiveCancel()"
  199.             >
  200.               Cancel
  201.             </b-btn>
  202.           </div>
  203.  
  204.         </b-modal>
  205.  
  206.         <b-modal
  207.           id="DeleteObjective"
  208.           ref="deletemodal"
  209.           :disabled="$v.form.$invalid"
  210.           title="Delete Objective"
  211.           @ok ="SecondObjectiveDelete">
  212.           <p> Are you sure that you want to delete this objective?</p>
  213.         </b-modal>
  214.  
  215.       </div>
  216.     </div>
  217.   </div>
  218. </template>
  219.  
  220. <script>
  221. import SearchField from '@/components/Filters/SearchField.vue'
  222. import UsergroupSelector from '@/components/Filters/UsergroupSelector.vue'
  223. import { required, minLength } from 'vuelidate/lib/validators'
  224.  
  225. export default {
  226.   components: {
  227.     SearchField,
  228.     UsergroupSelector
  229.   },
  230.   props: {
  231.     objective: {
  232.       type: Object,
  233.       default: () => {}
  234.     }
  235.   },
  236.   data () {
  237.     return {
  238.       fields: [
  239.         // { key: 'objectiveID', label: 'ObjectiveID' },
  240.         // { key: 'usergroupID', label: 'UsergroupID' },
  241.         { key: 'title', label: 'Title' },
  242.         { key: 'description', label: 'Description' },
  243.         { key: 'actions', label: 'Actions' }
  244.       ],
  245.       isBusy: false,
  246.       items: [],
  247.       form: {
  248.         title: '',
  249.         description: ''
  250.       }
  251.     }
  252.   },
  253.   validations: {
  254.     form: {
  255.       title: {
  256.         required,
  257.         minLength: minLength(3)
  258.       },
  259.       description: {
  260.         required,
  261.         minLength: minLength(3)
  262.       }
  263.     }
  264.   },
  265.   computed () {
  266.     this.ObjectiveCreate()
  267.     this.ObjectiveDelete()
  268.   },
  269.   methods: {
  270.     ObjectiveCreate () {
  271.       // dodaj u objectives uzmi default usergroup za usergroupID
  272.       // {(this.$store.getters['auth/defaultUsergroup'])}
  273.       this.$axios.post('@api-v01/objectives/5', this.form)
  274.         .then((response) => {
  275.           console.log(response)
  276.           this.form.title = ''
  277.           this.form.description = ''
  278.           console.log('Submit form')
  279.           this.$refs.addmodal.hide()
  280.         })
  281.         .catch((err) => {
  282.           console.log(err)
  283.         })
  284.     },
  285.     ObjectiveUpdate (item) {
  286.       console.log(item.objectiveID)
  287.       // update this objective
  288.       this.form['editingItem'] = item
  289.     },
  290.     SecondUpdateObjective () {
  291.       // console.log(this.form.editingItem.objectiveID)
  292.       if (this.form.title !== '' && this.form.description !== '') {
  293.         this.$axios.put(`@api-v01/objectives/5/${this.form.editingItem.objectiveID}`, this.form)
  294.           .then((response) => {
  295.             console.log(response)
  296.             this.$refs.updatemodal.hide()
  297.           })
  298.           .catch((err) => {
  299.             console.log(err)
  300.           })
  301.       }
  302.     },
  303.     ObjectiveCancel () {
  304.       this.form.title = ''
  305.       this.form.description = ''
  306.       this.$refs.addmodal.hide()
  307.       this.$refs.updatemodal.hide()
  308.       this.$refs.deletemodal.hide()
  309.     },
  310.     ObjectiveDelete (item) {
  311.       console.log(item.objectiveID)
  312.       // update this objective
  313.       this.form['deletingItem'] = item
  314.     },
  315.     SecondObjectiveDelete () {
  316.       console.log(this.form.deletingItem.objectiveID)
  317.       this.$axios.delete(`@api-v01/objectives/5/${this.form.deletingItem.objectiveID}`)
  318.         .then((response) => {
  319.           console.log(response)
  320.           this.$refs.deletemodal.hide()
  321.         })
  322.         .catch((err) => {
  323.           console.log(err)
  324.         })
  325.     },
  326.     ObjectiveData (ctx) {
  327.       let promise = this.$axios.get('@api-v01/objectives/5')
  328.  
  329.       // Must return a promise that resolves to an array of items
  330.       return promise.then((response) => {
  331.         // Pluck the array of items off our axios response
  332.         let items = response.data
  333.         this.items = response.data
  334.         console.log(response.data)
  335.         // Must return an array of items or an empty array if an error occurred
  336.         return (items || [])
  337.       })
  338.     }
  339.   }
  340. }
  341.  
  342. </script>
  343.  
  344. <style lang="scss" scoped>
  345.  
  346. </style>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top