Added customize component #337

app/javascript/vue/components/custom_attributes/predicates/components/predicateRow.vue

@@ -0,0 +1,61 @@
+<template>
+  <div
+    class="field"
+  >
+    <label v-html="predicateObject.object_tag" />
+    <input
+      type="text"
+      v-model="data_attribute.value"
+      @change="updatePredicate"
+    >
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    predicateObject: {
+      type: Object,
+      required: true
+    },
+    objectId: {
+      required: true,
+      validator(value) {
+        return value === undefined || typeof value === 'string' || typeof value === 'number'
+      }
+    },
+    objectType: {
+      type: String,
+      required: true
+    },
+    existing: {
+      type: Object,
+      required: false
+    }
+  },
+  data() {
+    return {
+      data_attribute: {
+        type: 'InternalAttribute',
+        controlled_vocabulary_term_id: this.predicateObject.id,
+        attribute_subject_id: this.objectId,
+        attribute_subject_type: this.objectType,
+        value: this.value
+      }
+    }
+  },
+  watch: {
+    existing(newVal) {
+      if(newVal) {
+        this.data_attribute = newVal
+      }
+    }
+  },
+  methods: {
+    updatePredicate() {
+      this.$emit('onUpdate', this.data_attribute)
+    }
+  }
+
+}
+</script>

app/javascript/vue/components/custom_attributes/predicates/predicates.vue

@@ -0,0 +1,126 @@
+<template>
+  <fieldset>
+    <spinner-component
+      v-if="loading"
+    />
+    <legend>Custom attributes</legend>
+    <predicate-row
+      v-for="item in predicatesList"
+      :key="item.id"
+      :object-id="objectId"
+      :object-type="objectType"
+      :predicate-object="item"
+      :existing="findExisting(item.id)"
+      @onUpdate="addDataAttribute"
+    />
+  </fieldset>
+</template>
+
+<script>
+
+import SpinnerComponent from 'components/spinner'
+import PredicateRow from './components/predicateRow'
+import { GetPredicates, GetPredicatesCreated, GetProjectPreferences } from './request/resources.js'
+
+export default {
+  components: {
+    PredicateRow,
+    SpinnerComponent
+  },
+  props: {
+    model: {
+      type: String,
+      required: true
+    },
+    objectId: {
+      required: true
+    },
+    objectType: {
+      type: String,
+      required: true
+    },
+    modelPreferences: {
+      type: [Array],
+      required: false
+    }
+  },
+  data() {
+    return {
+      loading: true,
+      createdList: [],
+      predicatesList: [],
+      list: [],
+      data_attributes: [],
+      modelPreferencesIds: undefined
+    }
+  },
+  watch: {
+    objectId(newVal) {
+      if(newVal && this.objectType) {
+        this.loading = true
+        GetPredicatesCreated(this.objectType, this.objectId).then(response => {
+          this.createdList = response.body
+          this.loading = false
+        }) 
+      }
+    }
+  },
+  mounted() {
+    this.loadPreferences()
+  },
+  methods: {
+    loadPreferences() {
+      if(Array.isArray(this.modelPreferences) && this.modelPreferences.length) {
+        this.loadPredicates(this.modelPreferences)
+      }
+      else {
+        GetProjectPreferences().then(response => {
+          this.modelPreferencesIds = response.body.model_predicate_sets[this.model]
+          this.loadPredicates(this.modelPreferencesIds)
+        })
+      }
+    },
+    loadPredicates(ids) {
+      let promises = []
+
+      promises.push(GetPredicates(ids).then(response => {
+        this.predicatesList = response.body
+      }))
+
+      if(this.objectId) {
+        promises.push(GetPredicatesCreated(this.objectType, this.objectId).then(response => {
+          this.createdList = response.body
+        }))
+      }
+
+      Promise.all(promises).then(() => {
+        this.loading = false
+      })
+    },
+    findExisting(id) {
+      return this.createdList.find(item => {
+        return item.controlled_vocabulary_term_id == id
+      })
+    },
+    addDataAttribute(dataAttribute) {
+      let index = this.data_attributes.findIndex(item => {
+        return item.controlled_vocabulary_term_id == dataAttribute.controlled_vocabulary_term_id
+      })
+
+      if(index > -1) {
+        this.$set(this.data_attributes, index, dataAttribute)
+      }
+      else {
+        this.data_attributes.push(dataAttribute)
+      }
+      this.$emit('onUpdate', this.data_attributes)
+    }
+  }
+}
+</script>
+<style scoped>
+  input {
+    width: 100%;
+  }
+</style>
+

app/javascript/vue/components/custom_attributes/predicates/request/resources.js

@@ -0,0 +1,19 @@
+import ajaxCall from 'helpers/ajaxCall'
+
+const GetProjectPreferences = function () {
+  return ajaxCall('get', `/project_preferences.json`)
+}
+
+const GetPredicates = function (ids) {
+  return ajaxCall('get', '/controlled_vocabulary_terms', { params: { 'of_type[]': 'Predicate', 'id': ids } })
+}
+
+const GetPredicatesCreated = function (objectType, objectId) {
+  return ajaxCall('get', `/data_attributes?attribute_subject_type=${objectType}&attribute_subject_id=${objectId}&type=InternalAttribute`)
+}
+
+export {
+  GetPredicates,
+  GetPredicatesCreated,
+  GetProjectPreferences
+}

app/javascript/vue/helpers/ajaxCall.js

@@ -0,0 +1,32 @@
+import Vue from 'vue'
+import VueResource from 'vue-resource'
+
+Vue.use(VueResource)
+
+const ajaxCall = function (type, url, data = null) {
+  Vue.http.headers.common['X-CSRF-Token'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content')
+  return new Promise(function (resolve, reject) {
+    Vue.http[type](url, data).then(response => {
+      console.log(response)
+      return resolve(response)
+    }, response => {
+      console.log(response)
+      handleError(response)
+      return reject(response)
+    })
+  })
+}
+
+const handleError = function (json) {
+  if (typeof json !== 'object') return
+  let errors = Object.keys(json)
+  let errorMessage = ''
+
+  errors.forEach(function (item) {
+    errorMessage += json[item].join('<br>')
+  })
+
+  TW.workbench.alert.create(errorMessage, 'error')
+}
+
+export default ajaxCall

app/javascript/vue/tasks/digitize/components/collectionEvent/components/GeographyLayout.vue

@@ -23,6 +23,7 @@
   import Times from './geography/times.vue'
   import Group from './geography/group.vue'
   import Collectors from './geography/collectors.vue'
+  import Predicates from './geography/predicates.vue'
   import sortComponent from '../../shared/sortComponenets.vue'
 
   export default {
@@ -35,11 +36,12 @@
       Elevation,
       Dates,
       Times,
-      Group
+      Group,
+      Predicates
     },
     data() {
       return {
-        componentsOrder: ['Geography', 'Georeferences', 'Elevation', 'Dates', 'Times', 'Collectors', 'Group'],
+        componentsOrder: ['Geography', 'Georeferences', 'Elevation', 'Dates', 'Times', 'Collectors', 'Group', 'Predicates'],
         keyStorage: 'tasks::digitize::GeographyOrder'
       }
     }

app/javascript/vue/tasks/digitize/components/collectionEvent/components/geography/predicates.vue

@@ -0,0 +1,33 @@
+<template>
+  <predicates-component
+    :object-id="collectingEvent.id"
+    object-type="CollectingEvent"
+    model="CollectingEvent"
+    @onUpdate="setAttributes"
+  />
+</template>
+
+<script>
+
+import PredicatesComponent from 'components/custom_attributes/predicates/predicates'
+import { GetterNames } from '../../../../store/getters/getters.js'
+import { MutationNames } from '../../../../store/mutations/mutations.js'
+
+export default {
+  components: {
+    PredicatesComponent
+  },
+  computed: {
+    collectingEvent() {
+      return this.$store.getters[GetterNames.GetCollectionEvent]
+    }
+  },
+  methods: {
+    setAttributes(dataAttributes) {
+      
+      this.$store.commit(MutationNames.SetCollectionEventDataAttributes, dataAttributes)
+      console.log(this.collectingEvent)
+    }
+  }
+}
+</script>

app/javascript/vue/tasks/digitize/store/mutations/CollectionEvent/setCollectionEventDataAttributes.js

@@ -0,0 +1,3 @@
+export default function(state, value) {
+  state.collection_event.data_attributes_attributes = value
+}

app/javascript/vue/tasks/digitize/store/mutations/mutations.js

@@ -43,6 +43,7 @@ import setCollectionObjectRepositoryId from './CollectionObject/setCollectionObj
 import setCollectionObjectTotal from './CollectionObject/setCollectionObjectTotal'
 
 import setCollectionEvent from './CollectionEvent/setCollectionEvent'
+import setCollectionEventDataAttributes from './CollectionEvent/setCollectionEventDataAttributes'
 import setCollectionEventGeographicArea from './CollectionEvent/setCollectionEventGeographicArea'
 import setCollectionEventFormation from './CollectionEvent/setCollectionEventFormation'
 import setCollectionEventGroup from './CollectionEvent/setCollectionEventGroup'
@@ -171,6 +172,7 @@ const MutationNames = {
   RemoveTypeMaterial: 'removeTypeMaterial',
 
   SetCollectionEvent: 'setCollectionEvent',
+  SetCollectionEventDataAttributes: 'setCollectionEventDataAttributes',
   SetCollectionEventGeographicArea: 'setCollectionEventGeographicArea',
   SetCollectionEventGroup: 'setCollectionEventGroup',
   SetCollectionEventFormation: 'setCollectionFormation',
@@ -281,6 +283,7 @@ const MutationFunctions = {
   [MutationNames.RemoveTypeMaterial]: removeTypeMaterial,
 
   [MutationNames.SetCollectionEvent]: setCollectionEvent,
+  [MutationNames.SetCollectionEventDataAttributes]: setCollectionEventDataAttributes,
   [MutationNames.SetCollectionEventGeographicArea]: setCollectionEventGeographicArea,
   [MutationNames.SetCollectionEventFormation]: setCollectionEventFormation,
   [MutationNames.SetCollectionEventGroup]: setCollectionEventGroup,