Merge branch 'data-model-update' into 'master'

Data model update

See merge request !6

.gitlab-ci.yml

+code_quality:
+  image: docker:stable
+  variables:
+    DOCKER_DRIVER: overlay2
+  allow_failure: true
+  services:
+    - docker:stable-dind
+  script:
+    - export SP_VERSION=$(echo "$CI_SERVER_VERSION" | sed 's/^\([0-9]*\)\.\([0-9]*\).*/\1-\2-stable/')
+    - docker run
+      --env SOURCE_CODE="$PWD"
+      --volume "$PWD":/code
+      --volume /var/run/docker.sock:/var/run/docker.sock
+      "registry.gitlab.com/gitlab-org/security-products/codequality:$SP_VERSION" /code
+  artifacts:
+    reports:
+      codequality: gl-code-quality-report.json

forms/AccessControl.vue

@@ -110,7 +110,7 @@
           const results = await this.$store.dispatch('annotations/find', { 'target.id': payload.id })
           for (let item of results.items) {
             const itemPayload = ObjectUtil.merge({}, payload)
-            itemPayload.uuid = item.uuid
+            itemPayload._uuid = item._uuid
             await this.$store.dispatch(action, payload)
           }
         }

forms/UsersTable.vue

@@ -127,13 +127,13 @@
           submit: {
             handler () {
               context.payload.author = context.$store.state.auth.payload.userId
-              if (!context.$route.params.id) {
-                context.payload.type = [constants.MAP_TYPE_TIMELINE]
+              if (!context.$route.params.uuid) {
+                context.payload.type = [constants.mapTypes.MAP_TYPE_TIMELINE]
               }
               return Promise.resolve()
                 .then(() => {
-                  if (context.payload.uuid) {
-                    return context.$store.dispatch('maps/patch', [context.payload.uuid, context.payload])
+                  if (context.payload._uuid) {
+                    return context.$store.dispatch('maps/patch', [context.payload._uuid, context.payload])
                   }
                   return context.$store.dispatch('maps/create', context.payload)
                 })

media/RandomGiphy.vue

-<template lang="pug">
-  img.responsive(v-if="gifURL", :src="gifURL")
-</template>
-
-<script>
-  export default {
-    props: ['tag', 'apiKey'],
-    created: function () {
-      this.fetchGIF(this.tag, this.apiKey)
-    },
-    data () {
-      return {
-        gifURL: undefined,
-        retries: 0
-      }
-    },
-    methods: {
-      fetchGIF: function (tag, apiKey) {
-        const _this = this
-        _this.retries = 0
-        function fetch () {
-          if (_this.retries > 3) return
-          _this.$axios.get(`http://api.giphy.com/v1/gifs/random?api_key=${apiKey}&tag=${tag}`)
-            .then(res => {
-              if (res.body && res.body.data) {
-                _this.gifURL = res.body.data.fixed_height_downsampled_url
-              }
-            })
-            .catch(() => {
-              _this.retries += 1
-              window.setTimeout(fetch, 200)
-            })
-        }
-        fetch()
-      }
-    }
-  }
-</script>
-
-<style></style>

media/VideoPlayer.vue

@@ -112,7 +112,7 @@
         }
         else if (this.type === 'video/panopto' && annotation) {
           this.type = 'video/mp4'
-          const meta = await this.$store.dispatch('metadata/get', annotation.uuid)
+          const meta = await this.$store.dispatch('metadata/get', annotation._uuid)
           if (meta && meta.video) src = meta.video
           else console.error('panopto video failed to load', meta.video)
         }

navigation/ContentBar.vue

-<template lang="pug">
-  #content-bar
-    slot(name="content-bar-item")
-    div.search-bar
-      q-search
-</template>
-
-<script>
-  export default {}
-</script>
-
-<style scoped>
-  .search-bar {
-    width: 50%;
-    background-color: antiquewhite;
-  }
-  .content-bar-item {
-    color: black;
-    padding: .2em .5em;
-    border-radius: .2em;
-    background-color: #eee;
-    text-transform: uppercase;
-    }
-
-  #content-bar {
-    /* background-color: #eee; */
-    padding-bottom: .5em;
-    /*border-bottom: 2px solid black; */
-    /* margin: .5em 1em 1em; */
-    /* background: rgba( 185, 165, 130, .2 ); */
-    /* box-shadow: 0 0 10px 10px antiquewhite; */
-  }
-  #content-bar > * {
-    display: inline-block;
-    vertical-align: top;
-    margin: .5em;
-  }
-  .search-bar {
-    /*box-shadow: 0 0 20px 0 rgba( 0, 0, 0, .2 );
-    margin: 1em;*/
-  }
-</style>

navigation/index.js

-import ContentBar from './ContentBar'
 import UserNav from './UserNav'
 
 export {
-  ContentBar,
   UserNav
 }

partials/AnimatedBackground.vue

-<template lang="pug">
-  q-transition(appear, enter="fadeIn", leave="fadeOut")
-    vue-particles.mobile-hide.fullscreen.no-pointer-events(
-    v-if="show",
-    color="#474C55",
-    :particleOpacity="0.3",
-    :particlesNumber="particlesNumber",
-    shapeType="edge",
-    :particleSize="particleSize",
-    linesColor="#A3ADC2",
-    :linesWidth="1",
-    :lineLinked="true",
-    :lineOpacity="0.1",
-    :linesDistance="linesDistance",
-    :moveSpeed="moveSpeed",
-    :hoverEffect="false",
-    hoverMode="push",
-    :clickEffect="false",
-    clickMode="grab")
-</template>
-
-<script>
-  import { Events } from 'quasar'
-
-  import Vue from 'vue'
-  import VueParticles from 'vue-particles'
-  import Chance from 'chance'
-
-  const chance = new Chance()
-  Vue.use(VueParticles)
-
-  export default {
-    data: function () {
-      return {
-        show: false
-      }
-    },
-    created: function () {
-      const ctx = this
-      Events.$on('show-animated-background', (state) => {
-        ctx.show = state
-      })
-    },
-    mounted: function () {
-      this.show = this.$route.meta && this.$route.meta.animatedBackground
-    },
-    computed: {
-      linesDistance: function () {
-        return Math.min(Math.max(window.innerWidth, 1024) * 0.2, 240)
-      },
-      particlesNumber: function () {
-        return Math.min(Math.max(Math.round(window.innerWidth * 0.1), 10), 72) // chance.integer({ min: 48, max: 64 })
-      },
-      moveSpeed: function () {
-        return chance.floating({ min: 0.8, max: 1.2 })
-      },
-      particleSize: function () {
-        return chance.integer({ min: 7, max: 14 })
-      }
-    }
-  }
-</script>
-
-<style></style>

partials/Annotation.vue

-<template lang="pug">
-
-  .annotation
-
-    .annotation-top
-      slot(name="annotation-timestamp").annotation-top-item.annotation-timestamp timestamp
-
-      .annotation-top-item.annotation-buttons
-        a(@click="EditForm ($event.target)") edit
-        a(@click="DeleteAnnotation ($event.target)") delete
-
-    .annotation-form
-      form-add
-        q-field(slot="form-middle-item")
-          q-input(value="value")
-
-        a(slot="form-bottom-item" @click="SaveEdit ($event.target)") Save changes
-        a(slot="form-bottom-item" @click="CancelEdit ($event.target)") Cancel
-      div copy-text
-
-    slot(name="annotation-text").text
-    slot(name="annotation-status").text
-
-    .annotation-buttons
-      slot(name="annotation-button")
-
-</template>
-
-<script>
-  import FormAdd from '../forms/FormAdd'
-  export default {
-    components: {
-      FormAdd
-    },
-    methods: {
-      CancelEdit (target) {
-        var el = target.parentElement.parentElement.parentElement.parentElement
-        console.log(el)
-        // el[0].style.display = 'none'
-        el[0].style.backgroundColor = 'red'
-      },
-      DeleteAnnotation () {
-      },
-      EditForm (target) {
-        var el = target.parentNode.parentNode.parentElement.getElementsByClassName('annotation-form')
-        el[0].style.display = 'block'
-      },
-      SaveEdit () {
-      }
-    }
-    // name: "annotation"
-  }
-</script>
-
-<style scoped>
-  .annotation {
-    padding: 1em;
-    border-bottom: 1px solid #eee;
-  }
-  .annotation-buttons * {
-    display: inline-block;
-    background-color: red;
-    margin-right: .2em;
-    padding: .2em .5em;
-    cursor: pointer;
-  }
-  .annotation-top {
-    display: inline-block;
-    padding: .2em .5em;
-    margin-right: .2em;
-    cursor: pointer;
-    width: 100%;
-  }
-  .annotation-form {
-    display: none;
-  }
-</style>

partials/Avatar.vue

-<template lang="pug">
-  div
-    svg.avatar.responsive(v-if="type === 1", :width="width", :height="height", :data-jdenticon-value="uuid")
-    img.avatar.responsive(v-if="type === 2", :width="width", :height="height", :src="src")
-</template>
-
-<script>
-  import 'jdenticon/dist/jdenticon'
-  export default {
-    props: ['width', 'height', 'uuid', 'src'],
-    computed: {
-      type () {
-        if (this.uuid) return 1
-        if (this.url) return 2
-        return 0
-      }
-    }
-  }
-</script>

partials/DataTable.vue

@@ -20,7 +20,7 @@
     template(slot="top-right", slot-scope="props")
       q-search(hide-underline, v-model="filter", dark)
     q-td(slot="body-cell-title", slot-scope="props", :props="props")
-      router-link.primary(v-if="hasShow", :to="getViewLink(props.row.uuid)")
+      router-link.primary(v-if="hasShow", :to="getViewLink(props.row._uuid)")
         promise-span(:value="props.value")
       promise-span(v-if="!hasShow", :value="props.value")
     q-td(slot="body-cell-tags", slot-scope="props", :props="props")
@@ -113,7 +113,7 @@
         if (btn.type === 'delete') {
           this.loading = true
           try {
-            await this.$store.dispatch(`${this.path}/delete`, props.row.uuid)
+            await this.$store.dispatch(`${this.path}/delete`, props.row._uuid)
           }
           catch (err) {
             if (typeof this.$captureException === 'function') this.$captureException(err)

partials/Tags.vue

@@ -67,8 +67,8 @@
           let a = _this.annotations.find(a => {
             return a.body.value === t
           })
-          // console.log('remove', a.uuid, t)
-          if (a && a.uuid) return this.$store.dispatch('annotations/remove', a.uuid)
+          // console.log('remove', a._uuid, t)
+          if (a && a._uuid) return this.$store.dispatch('annotations/remove', a._uuid)
           return null
         })
 
@@ -99,13 +99,13 @@
       typeFromRoute () {
         let path = this.$route.path
         if (/.+\/timelines\/[^/]+\/edit$/.test(path)) {
-          return constants.MAP_TYPE_TIMELINE
+          return constants.mapTypes.MAP_TYPE_TIMELINE
         }
         else if (/.+\/videos\/[^/]+\/edit$/.test(path)) {
           return 'Video'
         }
         else if (/.+\/grids\/[^/]+\/edit$/.test(path)) {
-          return constants.MAP_TYPE_2D_GRID
+          return constants.mapTypes.MAP_TYPE_2D_GRID
         }
         else {
           return 'Unknown'
@@ -118,7 +118,7 @@
           .then(annotations => {
             _this.annotations = annotations.filter(a => a.target.id === _this.timeline.id) // TODO: Anton, why is target id ignored in the query?
             let newTags = annotations.map(a => {
-              // this.$store.dispatch('annotations/remove', a.uuid) // clean up tags
+              // this.$store.dispatch('annotations/remove', a._uuid) // clean up tags
               return a.body.value
             })
             newTags = this.enforceUniqueTags(newTags)