daily pastebin goal
23%
SHARE
TWEET

objectives

a guest Sep 26th, 2018 77 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 {{ row.item.objectiveID }}
  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 {{ row.item.objectiveID }}
  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.           ok-only
  138.           @hide="ObjectiveCancel"
  139.         >
  140.           <b-form >
  141.             <b-form-group
  142.               label="Title"
  143.               label-for="objectiveTitle">
  144.               <b-form-input
  145.                 id="objectiveTitle"
  146.                 v-model="form.title"
  147.                 :state="!$v.form.title.$error && null && !$v.form.title.$invalid"
  148.                 type="text"
  149.                 aria-describedby="objectiveTitleLiveFeedback"
  150.                 placeholder="New title"
  151.                 @input="$v.form.title.$touch()"
  152.               />
  153.               <b-form-invalid-feedback id="objectiveTitleLiveFeedback">
  154.                 <small
  155.                   v-if="!$v.form.title.required"
  156.                   class="form-text text-muted">This is a required field.</small>
  157.                 <small
  158.                   v-else-if="!$v.form.title.$pending && !$v.form.title.minLength"
  159.                   class="form-text text-muted">It must be at least 3 characters.</small>
  160.               </b-form-invalid-feedback>
  161.             </b-form-group>
  162.             <b-form-group
  163.               label="Description"
  164.               label-for="objectiveDesc">
  165.               <b-form-input
  166.                 id="objectiveDesc"
  167.                 v-model="form.description"
  168.                 :state="!$v.form.description.$error && null && !$v.form.description.$invalid"
  169.                 type="text"
  170.                 aria-describedby="objectiveDescLiveFeedback"
  171.                 placeholder="New description"
  172.                 @input="$v.form.description.$touch()"
  173.               />
  174.  
  175.               <b-form-invalid-feedback id="objectiveDescLiveFeedback">
  176.                 <small
  177.                   v-if="!$v.form.description.required"
  178.                   class="form-text text-muted">This is a required field.</small>
  179.                 <small
  180.                   v-else-if="!$v.form.description.$pending && !$v.form.description.minLength"
  181.                   class="form-text text-muted">It must be at least 3 characters.</small>
  182.               </b-form-invalid-feedback>
  183.             </b-form-group>
  184.           </b-form>
  185.         <!--
  186.           <div slot= "modal-footer">
  187.             <b-btn
  188.               :disabled="$v.form.$invalid"
  189.               type="submit"
  190.               variant="primary"
  191.               @click.stop.prevent="SecondUpdateObjective()"
  192.             >
  193.               Update
  194.             </b-btn>
  195.  
  196.             <b-btn
  197.               class="ml-3"
  198.               type="reset"
  199.               variant="primary"
  200.               @click.stop.prevent="ObjectiveCancel()"
  201.             >
  202.               Cancel
  203.             </b-btn>
  204.           </div>
  205.           -->
  206.         </b-modal>
  207.  
  208.         <b-modal
  209.           id="DeleteObjective"
  210.           ref="deletemodal"
  211.           :disabled="$v.form.$invalid"
  212.           title="Delete Objective"
  213.           @ok="ObjectiveDelete">
  214.           <p> Are you sure that you want to delete this objective?</p>
  215.         </b-modal>
  216.  
  217.       </div>
  218.     </div>
  219.   </div>
  220. </template>
  221.  
  222. <script>
  223. import SearchField from '@/components/Filters/SearchField.vue'
  224. import UsergroupSelector from '@/components/Filters/UsergroupSelector.vue'
  225. import { required, minLength } from 'vuelidate/lib/validators'
  226.  
  227. export default {
  228.   components: {
  229.     SearchField,
  230.     UsergroupSelector
  231.   },
  232.   props: {
  233.     objective: {
  234.       type: Object,
  235.       default: () => {}
  236.     }
  237.   },
  238.   data () {
  239.     return {
  240.       fields: [
  241.         // { key: 'objectiveID', label: 'ObjectiveID' },
  242.         // { key: 'usergroupID', label: 'UsergroupID' },
  243.         { key: 'title', label: 'Title' },
  244.         { key: 'description', label: 'Description' },
  245.         { key: 'actions', label: 'Actions' }
  246.       ],
  247.       isBusy: false,
  248.       items: [],
  249.       form: {
  250.         title: '',
  251.         description: ''
  252.       }
  253.     }
  254.   },
  255.   validations: {
  256.     form: {
  257.       title: {
  258.         required,
  259.         minLength: minLength(3)
  260.       },
  261.       description: {
  262.         required,
  263.         minLength: minLength(3)
  264.       }
  265.     }
  266.   },
  267.   computed () {
  268.     this.ObjectiveCreate()
  269.     this.ObjectiveDelete()
  270.   },
  271.   methods: {
  272.     ObjectiveCreate () {
  273.       // dodaj u objectives uzmi default usergroup za usergroupID
  274.       // {(this.$store.getters['auth/defaultUsergroup'])}
  275.       this.$axios.post('@api-v01/objectives/5', this.form)
  276.         .then((response) => {
  277.           console.log(response)
  278.           this.form.title = ''
  279.           this.form.description = ''
  280.           console.log('Submit form')
  281.           this.$refs.addmodal.hide()
  282.         })
  283.         .catch((err) => {
  284.           console.log(err)
  285.         })
  286.     },
  287.     ObjectiveUpdate (item) {
  288.       console.log(item.objectiveID)
  289.       // update this objective
  290.       if (this.form.title !== '' && this.form.description !== '') {
  291.         this.$axios.put(`@api-v01/objectives/5/${item.objectiveID}`, this.form)
  292.           .then((response) => {
  293.             console.log(response)
  294.           })
  295.           .catch((err) => {
  296.             console.log(err)
  297.           })
  298.       }
  299.       // this.$root.$emit('bv::show::modal', 'updatemodal', button)
  300.     },
  301.     ObjectiveCancel () {
  302.       this.form.title = ''
  303.       this.form.description = ''
  304.     },
  305.     ObjectiveDelete () {
  306.       console.log('OK')
  307.     },
  308.     ObjectiveData (ctx) {
  309.       let promise = this.$axios.get('@api-v01/objectives/5')
  310.  
  311.       // Must return a promise that resolves to an array of items
  312.       return promise.then((response) => {
  313.         // Pluck the array of items off our axios response
  314.         let items = response.data
  315.         this.items = response.data
  316.         console.log(response.data)
  317.         // Must return an array of items or an empty array if an error occurred
  318.         return (items || [])
  319.       })
  320.     }
  321.   }
  322. }
  323.  
  324. </script>
  325.  
  326. <style lang="scss" scoped>
  327.  
  328. </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