components.tar

components/0040777000000000000000000000000013763676613010223 5ustar00components/avatars/0040777000000000000000000000000013763724256011661 5ustar00components/avatars/Base.vue0100777000000000000000000000222213763675024013250 0ustar00<template>
  <div class="base-avatar">
    <img
      v-if="src && !hasError"
      :src="src"
      :class="imgClass"
      :style="imgStyle"
      v-b-tooltip
      :title="tooltip" 
      :alt="alt-image"
      :triggers="tooltipTriggers"
      @error="handleError">
    </img>
    <slot v-else name="placeholder"></slot>
  </div>
</template>

<script>
export default {
  data () {
    return {
      hasError: false
    }
  },

  props: {
    src: {
      type: String,
      required: true
    },
    altTag: {
      type: String,
      required: true
    },
    imgClass: {
      type: String,
      default: ''
    },
    imgStyle: {
      type: String,
      default: ''
    },
    tooltip: {
      type: String,
      default: ''
    },
    tooltipTriggers: {
      type: [Boolean, String, Array],
      default: () => []
    }
  },

  methods: {
    /**
     * Handle error while loading an image.
     */
    handleError () {
      this.hasError = true
      console.warn(`Image not found: ${this.src}`)
    }
  },

  watch: {
    src () {
      this.hasError = false
    }
  }
}
</script>
components/avatars/Project.vue0100777000000000000000000000253313763724256014013 0ustar00<template>
  <div class="project-avatar">
    <base-avatar
      :src="src"
      :img-class="imgClass"
      :alt-tag="altTag">
      <div
        slot="placeholder"
        :class="darkMode ? 'placeholder placeholder-dark' : 'placeholder'">
        <icon name="picture-o" scale="4"></icon>
      </div>
    </base-avatar>
  </div>
</template>

<script>
import 'vue-awesome/icons/picture-o'
import localConfig from '@/local.config'
import BaseAvatar from '@/components/avatars/Base'

export default {
  data () {
    return {
      altTag: `Avatar for ${this.project.name}`,
      imgClass: `hoizontal-${this.horizontalBreakpoint}-up`
    }
  },

  props: {
    project: {
      type: Object,
      required: true
    }
  },

  components: {
    BaseAvatar
  },

  computed: {
    src () {
      const thumbnailUrl = this.project.info.thumbnail_url

      if (thumbnailUrl === undefined || thumbnailUrl === null) {
        return ''
      }

      if (thumbnailUrl.indexOf('/uploads') === 0) {
        return localConfig.pybossaHost + thumbnailUrl
      }
      return thumbnailUrl
    }
  }
}
</script>

<style lang="scss">
.project-avatar {
  height: 100%;
  width: auto;

  .base-avatar {
    height: 100%;
    width: auto;

    img {
      width: 100%;
      height: auto;
    }
  }
}
</style>
components/avatars/Small.vue0100777000000000000000000000523013761671004013440 0ustar00<template>
  <div :class="classObj">
    <base-avatar
      :src="src"
      img-class="img-fluid rounded-circle"
      alt-tag="Small thumbnail image">
      <v-gravatar
        v-if="gravatar"
        slot="placeholder"
        :email="gravatar"
        :size="100"
        default-img="identicon"
        alt-tag="Small thumbnail placeholder"
        :class="placeholderClassObj">
      </v-gravatar>
      <div
       v-else
        slot="placeholder"
        :class="placeholderClassObj">
        <icon name="question"></icon>
      </div>
    </base-avatar>
  </div>
</template>

<script>
import 'vue-awesome/icons/picture-o'
import localConfig from '@/local.config'
import BaseAvatar from '@/components/avatars/Base'

export default {
  props: {
    info: {
      type: Object,
      required: true
    },
    gravatar: {
      type: String,
      required: false
    },
    extraSmall: {
      type: Boolean,
      default: false
    }
  },

  components: {
    BaseAvatar
  },

  computed: {
    src () {
      let url = null
      if (this.info.avatar_url) {
        url = this.info.avatar_url
      } else if (this.info.thumbnail_url) {
        url = this.info.thumbnail_url
      } else if (this.info.media_url) {
        url = this.info.media_url
      }
      if (url && url.indexOf('/uploads') === 0) {
        return localConfig.pybossaHost + url
      } else if (url) {
        return url
      }
      return ''
    },

    classObj () {
      return {
        'small-avatar': true,
        'xs': this.extraSmall
      }
    },

    placeholderClassObj () {
      return {
        'img-fluid': true,
        'rounded-circle': true,
        'placeholder': true,
        'placeholder-dark': this.darkMode
      }
    }
  },

  watch: {
    domainObject () {
      this.hasError = false
    }
  }
}
</script>

<style lang="scss">
.small-avatar {
  overflow: hidden;
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  min-height: 3rem;
  max-width: 3rem;
  max-height: 3rem;

  .base-avatar,
  .placeholder {
    width: 3rem;
    height: 3rem;
    min-width: 3rem;
    min-height: 3rem;
    max-width: 3rem;
    max-height: 3rem;
  }

  &.xs {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    min-height: 2rem;
    max-width: 2rem;
    max-height: 2rem;

    .placeholder {
      width: 2rem;
      height: 2rem;
      min-width: 2rem;
      min-height: 2rem;
      max-width: 2rem;
      max-height: 2rem;
    }
  }

  .placeholder {
    border: 1px solid $gray-300;

    &.placeholder-dark {
      border-color: $gray-600;
    }
  }
}
</style>
components/avatars/User.vue0100777000000000000000000000322013763724254013313 0ustar00<template>
  <div class="user-avatar mx-auto d-inline" :style="`width: ${size}px;`">
    <base-avatar
      :src="src"
      img-class="img-thumbnail rounded-circle"
      :img-style="style"
      :alt-tag="altTag"
      :tooltip="user.name"
      :tooltip-triggers="tooltipTriggers">
      <v-gravatar
        slot="placeholder"
        v-b-tooltip
        :triggers="tooltipTriggers"
        :title="user.name"
        :email="user.name"
        :size="size"
        default-img="identicon"
        :alt="altTag"
        :style="style"
        class="img-thumbnail rounded-circle">
      </v-gravatar>
    </base-avatar>
  </div>
</template>

<script>
import localConfig from '@/local.config'
import BaseAvatar from '@/components/avatars/Base'

export default {
  data () {
    return {
      altTag: `Avatar for ${this.user.name}`
    }
  },

  props: {
    user: {
      type: Object,
      required: true
    },
    tooltipTriggers: {
      type: [Boolean, String, Array],
      default: () => []
    },
    size: {
      type: Number,
      default: 80
    }
  },

  components: {
    BaseAvatar
  },

  computed: {
    src () {
      const avatarUrl = this.user.info.avatar_url

      // Will use Gravatar if no custom avatar is available
      if (avatarUrl === undefined || avatarUrl === null) {
        return ''
      }

      // Prepend the pybossa host if a standard upload
      if (avatarUrl.indexOf('/uploads') === 0) {
        return localConfig.pybossaHost + avatarUrl
      }

      return avatarUrl
    },

    style () {
      return `width: ${this.size}px;`
    }
  }
}
</script>
components/buttons/0040777000000000000000000000000013763676613011721 5ustar00components/buttons/Clipboard.vue0100777000000000000000000000176213763676613014347 0ustar00<template>
  <b-btn
    :variant="variant"
    ref="btn">
    {{ btnText }}
  </b-btn>
</template>

<script>
import ClipboardJS from 'clipboard'

export default {
  props: {
    content: {
      type: String,
      default: null
    },
    btnText: {
      type: String,
      default: 'Copy to Clipboard'
    },
    variant: {
      type: String,
      default: 'primary'
    },
    message: {
      type: String,
      default: 'Copied!'
    },
    containerId: {
      type: String,
      default: ''
    }
  },

  mounted () {
    const btn = this.$refs.btn
    /* eslint-disable no-new */
    new ClipboardJS(btn, {
      text: (trigger) => {
        this.$notifications.success({ message: this.message })
        return this.content
      },
      // Container ID needs to be set as the Bootstrap modal takes focus
      container: this.containerId.length
        ? document.getElementById(this.containerId)
        : document.body
    })
  }
}
</script>components/buttons/Oauth.vue0100777000000000000000000000522413763676613013525 0ustar00<template>
  <div id="oauth-buttons">

    <b-btn
      v-if="facebook"
      variant="facebook"
      class="d-flex align-items-center"
      @click="redirect('facebook')">
      <icon name="facebook"></icon>
      Facebook
    </b-btn>

    <b-btn
      v-if="google"
      variant="googleplus"
      class="d-flex align-items-center"
      @click="redirect('google')">
      <icon name="google"></icon>
      Google
    </b-btn>

    <b-btn
      v-if="twitter"
      variant="twitter"
      class="d-flex align-items-center"
      @click="redirect('twitter')">
      <icon name="twitter"></icon>
      Twitter
    </b-btn>

  </div>
</template>

<script>
import 'vue-awesome/icons/facebook'
import 'vue-awesome/icons/google'
import 'vue-awesome/icons/twitter'
import localConfig from '@/local.config'

export default {
  props: {
    facebook: {
      type: Boolean,
      default: false
    },
    google: {
      type: Boolean,
      default: false
    },
    twitter: {
      type: Boolean,
      default: false
    },
    next: {
      type: String,
      required: ''
    }
  },

  methods: {
    /**
     * Redirect to an external endpoint for OAuth signin.
     * @param {String} endpoint
     *   The endpoint.
     */
    redirect (endpoint) {
      // next param could be added here but makes things complicated with
      // Oauth via an SPA
      const query = `response_format=json`

      const url = `${localConfig.pybossaHost}/${endpoint}?${query}`
      window.location.assign(url)
    }
  }
}
</script>


<style lang="scss" scoped>
#oauth-buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  @include media-breakpoint-up (sm) {
    flex-direction: row;
  }

  .btn {
    @include hover-focus;
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    color: $white;
    margin: 0.25rem 0.5rem;

    @include hover-focus {
      color: $white;
    }

    @include media-breakpoint-up (sm) {
      width: auto;
    }

    &.btn-twitter {
      background: $twitter;

      @include hover-focus {
        background: darken($twitter, 5%);
      }
    }

    &.btn-facebook {
      background: $facebook;

      @include hover-focus {
        background: darken($facebook, 5%);
      }
    }

    &.btn-googleplus {
      background: $googleplus;

      @include hover-focus {
        background: darken($googleplus, 5%);
      }
    }
  }

  /* Fix inconsistend heights */
  svg {
    display: flex;
    height: 1.2rem;
    margin-right: 0.5rem;
  }
}
</style>
components/buttons/ProjectContrib.vue0100777000000000000000000000166213763676613015376 0ustar00<template>
  <b-btn
    :to="{
      name: 'collection-short_name-projects-id-presenter',
      params: {
        short_name: collection.short_name,
        id: project.id,
        presenter: collection.info.presenter
      }
    }"
    :block="block"
    :size="size"
    :variant="variant"
    :disabled="disabled">
    Contribute
  </b-btn>
</template>

<script>
export default {
  props: {
    collection: {
      type: Object,
      required: true
    },
    project: {
      type: Object,
      required: true
    },
    size: {
      type: String,
      default: ''
    },
    variant: {
      type: String,
      default: 'success'
    },
    block: {
      type: Boolean,
      default: true
    }
  },

  computed: {
    disabled () {
      return this.project.hasOwnProperty('stats')
        ? Number(this.project.stats.overall_progress) >= 100
        : false
    }
  }
}
</script>
components/buttons/SocialMedia.vue0100777000000000000000000000657113772335625014620 0ustar00<template>
  <div class="social-media-buttons"> 
 
      <b-btn
        v-b-tooltip
        title="Share on Facebook"
        variant="facebook"
        :size="size"
        @click="share('Facebook', facebookUrl, 980, 620)">
        <icon name="facebook" class="sr-only"></icon>
      </b-btn>

      <b-btn
        v-b-tooltip
        title="Share on Twitter"
        variant="twitter"
        :size="size"
        @click="share('Twitter', twitterUrl, 450, 550)">
        <icon name="twitter" class="sr-only"></icon>
      </b-btn>

      <b-btn
        v-b-tooltip
        title="Share on Google Plus"
        variant="googleplus"
        :size="size"
        @click="share('Google Plus', googleplusUrl, 510, 725)">
        <icon name="google-plus" class="sr-only"></icon>
      </b-btn>

      <b-btn
        v-b-tooltip
        title="Share on LinkedIn"
        variant="linkedin"
        :size="size"
        @click="share('LinkedIn', linkedinUrl, 510, 520)">
        <icon name="linkedin" class="sr-only" ></icon>
      </b-btn>

  </div>
</template>

<script>
import localConfig from '@/local.config'
import 'vue-awesome/icons/facebook'
import 'vue-awesome/icons/twitter'
import 'vue-awesome/icons/google-plus'
import 'vue-awesome/icons/linkedin'
import { locale } from 'moment'



export default {
  data () {
    return {
      facebookUrl: `http://www.facebook.com/sharer.php?u=${this.shareUrl}`,
      twitterUrl: `https://twitter.com/intent/tweet?` +
                  `original_referer=${this.shareUrl}&text=${this.tweet}` +
                  `&tw_p=tweetbutton&url=${this.shareUrl}`,
      googleplusUrl: `https://plus.google.com/share?url=${this.shareUrl}`,
      linkedinUrl: `https://www.linkedin.com/cws/share?url=${this.shareUrl}`
    }
  },

  props: {
    shareUrl: {
      type: String,
      required: true
    },
    tweet: {
      type: String,
      default: localConfig.tagline
    },
    size: {
      type: String,
      default: ''
    }
  },

  methods: {
    /**
     * Open a new window to share the url on the chosen platform.
     */
    share (platform, url, width, height) {
      if (this.$ga) {
        this.$ga.social(platform, 'Share', this.shareUrl)
      }
      const specs = `scrollbars=yes,width=${width},height=${height}`
      const popup = window.open(url, 'Share', specs)
      popup.focus()
    }
  }
}
</script>

<style lang="scss" scoped>
.social-media-buttons {
  div {
    display: inline-block;
  }

  .btn {
    margin-left: 0.25rem;
    margin-right: 0.25rem;

    @include hover-focus;
    border-radius: 0;
    color: $white;

    @include hover-focus {
      color: $white;
    }

    &.btn-twitter {
      background: $twitter;

      @include hover-focus {
        background: darken($twitter, 5%);
      }
    }

    &.btn-facebook {
      background: $facebook;

      @include hover-focus {
        background: darken($facebook, 5%);
      }
    }

    &.btn-googleplus {
      background: $googleplus;

      @include hover-focus {
        background: darken($googleplus, 5%);
      }
    }

    &.btn-linkedin {
      background: $linkedin;

      @include hover-focus {
        background: darken($linkedin, 5%);
      }
    }
  }

  /* Fix inconsistend heights */
  svg {
    display: flex;
    height: 1.2rem;
  }
}
</style>
components/cards/0040777000000000000000000000000013763676613011317 5ustar00components/cards/Announcement.vue0100777000000000000000000001064513763676613014500 0ustar00<template>
  <b-card
    no-body
    :bg-variant="darkMode ? 'dark' : null"
    :text-variant="darkMode ? 'white' : null"
    :class="classObj"
    @click="onClick">
    <div class="d-flex flex-row">

      <div class="p-1">
        <small-avatar :info="announcement"></small-avatar>
      </div>

      <div class="p-1 flex-grow">
        <div class="card-title mb-0" v-html="title"></div>
        <div class="card-text mb-0" v-html="body"></div>
      </div>

      <div class="p-1">
        <small class="no-wrap text-muted">
          <span class="d-none d-md-block">
            {{ announcement.created | moment('calendar') }}
          </span>
          <span class="d-md-none">
            {{ announcement.created | moment('L') }}
          </span>
        </small>
      </div>

    </div>
  </b-card>
</template>

<script>
import marked from 'marked'
import 'vue-awesome/icons/question'
import localConfig from '@/local.config'
import SmallAvatar from '@/components/avatars/Small'

export default {
  data () {
    return {
      imgSrc: localConfig.pybossaHost + this.announcement.media_url,
      title: marked(this.announcement.title),
      body: marked(this.announcement.body),
      unread: !this.announcement._read
    }
  },

  props: {
    announcement: {
      type: Object,
      required: true
    }
  },

  components: {
    SmallAvatar
  },

  computed: {
    currentUser () {
      return this.$store.state.currentUser
    },

    userAnnouncements () {
      return this.currentUser.info.announcements || {}
    },

    classObj () {
      return {
        'announcement-card': true,
        unread: this.unread
      }
    },

    placeholderClassObj () {
      return {
        'img-fluid': true,
        'img-announcement': true,
        'rounded-circle': true,
        'placeholder': true,
        'placeholder-dark': this.darkMode
      }
    }
  },

  methods: {
    /**
     * Handle announcement clicked.
     */
    onClick () {
      this.$emit('click')
      this.markAsRead()
      this.goToUrl()
    },

    /**
     * Handle navigation.
     */
    goToUrl () {
      const url = this.announcement.info.url
      const parser = document.createElement('a')
      const internal = this.isInternal(url)
      if (internal) {
        parser.href = url
        this.$router.push({ path: parser.pathname })
      } else if (url) {
        window.open(url)
      }
    },

    /**
     * Return true if the URL is internal, false otherwise
     * @param {String} url
     *   The URL to be checked.
     */
    isInternal (url) {
      const origin = window.location.origin
      return url && (url.indexOf(origin) === 0 || url.indexOf('/') === 0)
    },

    /**
     * Mark the announcement as read.
     */
    markAsRead () {
      this.unread = false
      const infoClone = JSON.parse(JSON.stringify(this.currentUser.info))
      const userAnnouncements = infoClone.announcements || {}
      const readIds = userAnnouncements.read_ids || []
      const readSet = new Set(readIds)
      readSet.add(this.announcement.id)
      const newReadIds = Array.from(readSet)
      newReadIds.sort()
      userAnnouncements['read_ids'] = newReadIds
      infoClone.announcements = userAnnouncements
      this.$axios.$put(`/api/user/${this.currentUser.id}`, {
        info: infoClone
      }).then(data => {
        this.$store.dispatch('UPDATE_CURRENT_USER', this.$axios)
      })
    }
  }
}
</script>

<style lang="scss">
.announcement-card {
  cursor: pointer;
  display: block;
  border-top: none;
  border-left: none;
  border-right: none;

  @include hover-focus {
    background-color: $gray-100;
  }

  &.unread {
    background-color: rgba($blue, 0.1);

    @include hover-focus {
      background-color: rgba($blue, 0.15);
    }
  }

  a {
    text-decoration: none;
    color: inherit;
  }

  .flex-grow {
    flex: 1 1 auto;
  }

  .no-wrap {
    white-space: nowrap;
  }

  .img-announcement {
    width: 50px;
    height: 50px;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: $font-family-base;
    margin-top: 2px;
    margin-bottom: 0;
    font-size: $font-size-sm;
    text-transform: uppercase;
  }

  .card-title {
    font-weight: 700;
    font-size: $font-size-sm;
  }

  p {
    margin: 0;
  }

  .placeholder {
    border: 1px solid $gray-300;
  }
}
</style>
components/cards/Base.vue0100777000000000000000000000343713763676613012721 0ustar00<template>
  <b-card
    no-body
    class="card-base"
    :bg-variant="darkMode ? 'dark' : null"
    :text-variant="darkMode ? 'white' : null">

    <template slot="header" v-if="!noHeader">
      <b-row
        class="mb-0 d-flex align-items-center">
        <b-col>
          <h6 v-if="title.length" class="mb-0">{{ title }}</h6>
          <p v-if="description.length" class="text-muted mb-0">
            <small>
              {{ description }}
            </small>
          </p>
        </b-col>
        <b-col xs="12" md="6" class="my-1 my-md-0" v-if="$slots.controls">
          <slot name="controls"></slot>
        </b-col>
      </b-row>
    </template>

    <template v-if="$slots.guidance || docs.length">
      <b-card-body>
        <slot name="guidance"></slot>
        <p v-if="localConfig.docs" class="mb-0">
          <small>
            See the
            <a :href="docsURI" target="_blank">full documentation</a>
            for further guidance.
          </small>
        </p>
      </b-card-body>
    </template>

    <slot></slot>

  </b-card>
</template>

<script>
import localConfig from '@/local.config'

export default {
  data () {
    return {
      localConfig: localConfig
    }
  },

  props: {
    title: {
      type: String,
      default: ''
    },
    description: {
      type: String,
      default: ''
    },
    docs: {
      type: String,
      default: ''
    },
    noHeader: {
      type: Boolean,
      default: false
    }
  },

  computed: {
    docsURI () {
      if (!localConfig.docs) {
        return null
      }

      const base = localConfig.docs.replace(/\/$/, '')
      return base + this.docs
    }
  }
}
</script>

<style scoped>
.card-base {
  overflow-x: auto;
}
</style>components/cards/Collection.vue0100777000000000000000000000556613777774630014152 0ustar00<template>
  <b-card
    no-body
    show-footer
    :bg-variant="darkMode ? 'dark' : null"
    :text-variant="darkMode ? 'white' : null"
    class="collection-card my-3">
    <nuxt-link
      :to="{
        name: 'collection-short_name',
        params: {
          short_name: collection.short_name
        }
      }">
      <div class="collection-card-img main-app-bg" :style="cardBgStyle">
      </div>
      <div class="card-body">
        <h3 class="card-title">
          {{ collection.name }}
        </h3>
        <hr class="my-1">
        <p class="card-text" v-if="collection.info">
          {{ collection.info.tagline }}
        </p>
      </div>
      <div class="card-footer">
        <icon label="Enter Website">
          <icon name="arrow-right"></icon>
          <icon name="circle-thin" scale="2"></icon>
        </icon>
      </div>
    </nuxt-link>
  </b-card>
</template>

<script>
import 'vue-awesome/icons/arrow-right'
import 'vue-awesome/icons/circle-thin'

export default {
  props: {
    collection: {
      type: Object,
      required: true
    }
  },

  computed: {
    cardBgStyle () {
      if (!this.collection.info || !this.collection.info.background) {
        return
      }
      return {
        backgroundImage: `url('${this.collection.info.background}')`
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.collection-card {
  border: none;

  &.bg-dark {
    .card-title {
      color: $gray-400;
    }

    hr {
      border-color: $gray-900;
    }

    .collection-card-img:after {
      background-color: rgba($gray-1000, 0.4);
    }
  }

  a {
    color: inherit;
    height: 100%;
    display: flex;
    flex-direction: column;

    @include hover-focus {
      text-decoration: none;
    }
  }

  @include hover-focus {
    .collection-card-img:after {
      opacity: 1;
    }
  }

  .collection-card-img {
    height: 250px;
    width: auto;
    overflow: hidden;
    position: relative;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;

    &:after {
      content: 'Enter';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      color: $gray-300;
      background-color: rgba($gray-300, 0.4);
      opacity: 0;
      font-size: $font-size-lg;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 250ms ease-in;
    }
  }

  .card-title {
    font-size: $font-size-base;
    font-family: $font-family-base;
    font-weight: 600;
    text-transform: uppercase;
    color: $gray-1000;
  }

  .card-footer {
    background-color: inherit;
    border: none;
    color: $gray-600;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }
}
</style>
components/cards/Profile.vue0100777000000000000000000000342213763676613013441 0ustar00<template>
  <b-card
    no-body
    class="profile-card"
    :bg-variant="darkMode ? 'dark' : null"
    :text-variant="darkMode ? 'white' : null">

    <div class="avatar-background profile-card-bg">
      <user-avatar
        :user="user"
        :size="200">
      </user-avatar>
    </div>

    <div id="user-details" class="card-body">
      <div class="card-title">
        <h2>{{ user.name }}</h2>
      </div>
      <div class="card-text">
        <ul>
          <li>
            <icon name="trophy"></icon>Rank {{ user.rank }}
          </li>
          <li>
            <icon name="tasks"></icon>Contributions: {{ user.n_answers }}
          </li>
          <li>
            <icon name="clock-o"></icon>Joined: {{ user.registered_ago }}
          </li>
        </ul>
      </div>
    </div>

    <slot></slot>

  </b-card>
</template>

<script>
import 'vue-awesome/icons/trophy'
import 'vue-awesome/icons/tasks'
import 'vue-awesome/icons/clock-o'
import UserAvatar from '@/components/avatars/User'

export default {
  props: {
    user: {
      type: Object,
      required: true
    }
  },

  components: {
    UserAvatar
  }
}
</script>

<style lang="scss" scoped>
.profile-card {
  .avatar-background {
    text-align: center;
    padding-top: $spacer * 2;
    padding-left: $spacer * 2;
    padding-right: $spacer * 2;
    background-size: cover;
    background-position: center center;
  }

  #user-details {
    text-align: center;

    ul {
      list-style: none;
      padding: 0;
    }

    li {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      margin-bottom: 0.5rem;

      svg {
        margin-right: 5px;
      }
    }
  }
}
</style>
components/cards/Project.vue0100777000000000000000000002034013763676613013445 0ustar00<template>
  <b-card
    no-body
    v-if="collection.info.presenter"
    class="project-card"
    :bg-variant="darkMode ? 'dark' : null"
    :text-variant="darkMode ? 'white' : null">
    <nuxt-link
      v-if="projectIncomplete"
      :to="{
        name: 'collection-short_name-projects-id-presenter',
        params: {
          short_name: collection.short_name,
          id: project.id,
          presenter: collection.info.presenter
        }
      }">
      <div class="avatar-wrapper">
        <project-avatar
          :project="project">
        </project-avatar>
      </div>
    </nuxt-link>
    <div v-else class="avatar-wrapper">
      <project-avatar
        :project="project">
      </project-avatar>
    </div>

    <div class="card-body project-details p-0">
      <div class="card-title mb-0">
        <nuxt-link
          v-if="projectIncomplete"
          :to="{
            name: 'collection-short_name-projects-id-presenter',
            params: {
              short_name: collection.short_name,
              id: project.id,
              presenter: collection.info.presenter
            }
          }">
          <h4 class="card-title mb-1 px-2 pt-2">
            {{ project.name }}
          </h4>
        </nuxt-link>
        <h4 v-else class="card-title mb-1 px-2 pt-2">
          {{ project.name }}
        </h4>
        <div v-if="hasStats">
          <b-btn
            v-b-modal="statsModalId"
            class="project-stats-btn d-none d-lg-block"
            :variant="darkMode ? 'dark' : 'info'">
            Stats
            <icon name="bar-chart"></icon>
          </b-btn>
        </div>
      </div>
      <p class="card-text project-description mb-0 px-2 pb-1">
        {{ project.description }}
      </p>
      <div class="mb-0 px-2 pt-1">
        <project-filters-list
          v-if="project.info.filters"
          class="d-none d-md-block"
          :project-filters="project.info.filters"
          :collection="collection"
          @click="onProjectFilterClick">
        </project-filters-list>
      </div>

      <div class="progress-container" :id="progressBarId"></div>

      <div class="card-footer mt-1 px-2 py-1">
        <span
          v-if="hasStats"
          class="card-stat text-muted mb-2 mb-lg-0 mt-lg-0 d-none d-lg-block">
          {{ project.stats.overall_progress }}% complete
        </span>
        <span
          v-if="hasStats"
          class="card-stat text-muted mb-2 mb-lg-0 d-none d-lg-block">
          <icon name="tasks"></icon> {{ project.stats.n_tasks | intComma }}
          {{ 'task' | pluralize(project.stats.n_tasks) }}
        </span>
        <span
          v-if="hasStats"
          class="card-stat text-muted mb-2 mb-lg-0 d-none d-lg-block">
          <icon name="users"></icon>Join {{ project.stats.n_volunteers | intComma }}
          {{ 'volunteer' | pluralize(project.stats.n_volunteers) }}
        </span>
        <div class="footer-buttons my-1 mt-lg-0">
          <b-btn
            block
            v-b-modal="statsModalId"
            class="d-lg-none mb-1"
            :variant="darkMode ? 'dark' : 'info'">
            Stats
          </b-btn>
          <project-contrib-button
            block
            :collection="collection"
            :project="project">
          </project-contrib-button>
        </div>
      </div>
    </div>

    <project-stats-modal
      v-if="hasStats"
      :project="project"
      :collection="collection"
      :modal-id="statsModalId">
    </project-stats-modal>

  </b-card>
</template>

<script>
import 'vue-awesome/icons/bar-chart'
import 'vue-awesome/icons/users'
import 'vue-awesome/icons/tasks'
import ProgressBar from 'progressbar.js'
import ProjectAvatar from '@/components/avatars/Project'
import ProjectContribButton from '@/components/buttons/ProjectContrib'
import ProjectStatsModal from '@/components/modals/ProjectStats'
import ProjectFiltersList from '@/components/lists/ProjectFilters'

export default {
  data () {
    return {
      progressBarId: `progress-${this.project.id}`,
      statsModalId: `project-stats-modal-${this.project.id}`
    }
  },

  props: {
    project: {
      type: Object,
      required: true
    },
    collection: {
      type: Object,
      required: true
    }
  },

  components: {
    ProjectStatsModal,
    ProjectContribButton,
    ProjectAvatar,
    ProjectFiltersList
  },

  computed: {
    hasStats () {
      return this.project.hasOwnProperty('stats')
    },

    projectIncomplete () {
      return this.hasStats
        ? this.project.stats.overall_progress < 100
        : 0
    }
  },

  methods: {
    /**
     * Handle a project filters click.
     */
    onProjectFilterClick (type, value) {
      this.$emit('filter', type, value)
    }
  },

  mounted () {
    if (
      process.browser &&
      this.hasStats
    ) {
      const bar = new ProgressBar.Line(`#${this.progressBarId}`, {
        strokeWidth: 4,
        easing: 'easeInOut',
        duration: 1400,
        color: '#d0e5d0',
        trailColor: 'rgba(0, 0, 0, 0.125)',
        trailWidth: 0.5,
        svgStyle: {
          width: '100%',
          height: '100%'
        }
      })
      bar.animate(this.project.stats.overall_progress / 100)
    }
  }
}
</script>

<style lang="scss" scoped>
.card.project-card {
  text-align: center;
  flex-direction: column;
  overflow-y: hidden;
  margin-bottom: $spacer;
  margin-left: auto;
  margin-right: auto;
  max-width: 300px;

  @include media-breakpoint-up(lg) {
    max-width: 100%;
    max-height: 250px;
    text-align: left;
    flex-direction: row;
  }

  .card-body {

    @include media-breakpoint-up(lg) {
      flex: 1 1 0%;
    }

    .card-title {
      display: flex;
      font-size: $font-size-lg;

      a {
        width: 100%;
        color: inherit;
        flex: 1 1 auto;
        display: flex;
        justify-content: center;

        @include hover-focus {
          text-decoration: none;
        }

        @include media-breakpoint-up(lg) {
          display: block;
        }
      }
    }

    .card-text {
      font-size: $font-size-sm;
    }

    .card-footer {
      border-top: none;
      background-color: transparent;

      .footer-buttons {
        @include media-breakpoint-down(md) {
          width: 100%;
        }
      }
    }

    &:not(first-child) {
      border-top: $card-border-width solid $card-border-color;

      .card-footer {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        margin-top: auto;

        .btn {
          margin-top: 0;
        }
      }

      @include media-breakpoint-up(lg) {
        display: flex;
        flex-direction: column;
        border-top: none;
        border-left: $card-border-width solid $card-border-color;

        .card-footer {
          flex-direction: row;
        }
      }
    }
  }

  .project-description {
    flex: 1 1 auto;
    overflow-y: auto;
  }

  .avatar-wrapper {
    position: relative;
    overflow: hidden;
    line-height: 0;
    flex-shrink: 2;
    width: auto;
    height: 250px;

    @include media-breakpoint-up(lg) {
      width: 250px;
    }
  }

  .card-stat {
    font-size: $font-size-xs;
    display: flex;
    align-items: center;

    svg {
      margin-right: 0.5em;
    }
  }

  .project-stats-btn {
    display: flex;
    border-left: 1px solid $gray-300;
    border-bottom: 1px solid $gray-300;
    border-top: 0;
    border-right: 0;
    background: $white;
    color: $gray-600;
    font-size: $font-size-xs;
    text-transform: uppercase;

    svg {
      margin-left: 0.5rem;
    }
  }

  .progress-container {
    height: 4px;
    position: relative;
    margin-bottom: 0.5rem;
  }

  &.bg-dark {
    .project-stats-btn {
      color: $white;
      border-color: $black;
      background-color: transparent;
    }
  }

  &.bg-light {
    background-color: $white !important;

    .card-footer {
      background-color: $white;
    }

    .project-stats-btn {
      background-color: $white;
    }
  }
}
</style>
components/charts/0040777000000000000000000000000013763676613011507 5ustar00components/charts/Bar.vue0100777000000000000000000000176513763676613012745 0ustar00<template>
  <no-ssr>
    <chartist
      type="Bar"
      :data="chartData"
      :options="mergedOptions"
      class="ct-container">
    </chartist>
  </no-ssr>
</template>

<script>
import pluralize from 'pluralize'

export default {
  props: {
    chartData: {
      type: Object,
      required: true
    },
    unit: {
      type: String,
      required: true
    },
    options: {
      type: Object,
      default: () => ({})
    }
  },

  computed: {
    mergedOptions () {
      const defaults = {
        height: '300px'
      }

      // $chartist will only be available on the client
      if (this.$chartist) {
        defaults.plugins = [
          this.$chartist.plugins.tooltip({
            transformTooltipTextFnc: (val) => {
              let text = pluralize(this.unit, Number(val))
              return `${val} ${text}`
            }
          })
        ]
      }
      return Object.assign(defaults, this.options)
    }
  }
}
</script>
components/charts/Legend.vue0100777000000000000000000000047013763676613013427 0ustar00<template>
  <ul class="ct-legend">
    <li
      v-for="(item, idx) in items"
      :key="idx"
      :class="`ct-series-${idx}`">
      {{ item }}
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true
    }
  }
}
</script>
components/charts/Line.vue0100777000000000000000000000221613763676613013120 0ustar00<template>
  <no-ssr>
    <chartist
      type="Line"
      :data="chartData"
      :options="mergedOptions"
      class="ct-container">
    </chartist>
  </no-ssr>
</template>

<script>
import pluralize from 'pluralize'

export default {
  props: {
    chartData: {
      type: Object,
      required: true
    },
    unit: {
      type: String,
      required: true
    },
    options: {
      type: Object,
      default: () => ({})
    }
  },

  computed: {
    mergedOptions () {
      const defaults = {
        height: '300px',
        low: 0,
        showArea: true
      }

      // $chartist will only be available on the client
      if (this.$chartist) {
        defaults.lineSmooth = this.$chartist.Interpolation.cardinal({
          fillHoles: true
        })
        defaults.plugins = [
          this.$chartist.plugins.tooltip({
            transformTooltipTextFnc: (val) => {
              let text = pluralize(this.unit, Number(val))
              return `${val} ${text}`
            }
          })
        ]
      }
      return Object.assign(defaults, this.options)
    }
  }
}
</script>
components/charts/Pie.vue0100777000000000000000000000177213763676613012754 0ustar00<template>
  <no-ssr>
    <chartist
      type="Pie"
      :data="chartData"
      :options="mergedOptions"
      class="ct-container">
    </chartist>
  </no-ssr>
</template>

<script>
export default {
  props: {
    chartData: {
      type: Object,
      required: true
    },
    options: {
      type: Object,
      default: () => ({})
    }
  },

  methods: {
    labelInterpolationFnc (value, idx) {
      let sum = this.chartData.series.reduce((a, b) => a.value + b.value)
      return Math.round(this.chartData.series[idx].value / sum * 100) + '%'
    }
  },

  computed: {
    mergedOptions () {
      const defaults = {
        height: '200px',
        labelInterpolationFnc: this.labelInterpolationFnc
      }

      // $chartist will only be available on the client
      if (this.$chartist) {
        defaults.plugins = [
          this.$chartist.plugins.tooltip()
        ]
      }
      return Object.assign(defaults, this.options)
    }
  }
}
</script>
components/data/0040777000000000000000000000000013763676613011134 5ustar00components/data/DownloadAnnotationData.vue0100777000000000000000000000245313763676613016255 0ustar00<template>
  <b-btn
    :variant="btnVariant"
    :size="btnSize"
    :disabled="processing"
    :href="downloadLink"
    download
    @click="trackEvent">
    {{ btnText }}
  </b-btn>
</template>

<script>
import localConfig from '@/local.config'

export default {
  data () {
    return {
      processing: false
    }
  },

  props: {
    containerIri: {
      type: String,
      required: true
    },
    scope: {
      type: String,
      required: true
    },
    btnText: {
      type: String,
      default: 'Download'
    },
    btnVariant: {
      type: String,
      default: 'success'
    },
    btnSize: {
      type: String,
      default: 'sm'
    }
  },

  computed: {
    downloadLink () {
      const baseURL = localConfig.explicates.baseURL
      const parts = this.containerIri.split('/')
      const collectionId = parts[parts.length - 2]
      return `${baseURL}/export/${collectionId}/?zip=1`
    }
  },

  methods: {
    /**
     * Track Google Analytics event.
     */
    trackEvent () {
      if (this.$ga) {
        this.$ga.event({
          eventCategory: 'Downloads',
          eventAction: `${this.scope}-annotations_json`,
          eventLabel: this.iri,
          eventValue: 1
        })
      }
    }
  }
}
</script>components/data/DownloadProjectData.vue0100777000000000000000000000465513763676613015557 0ustar00<template>
  <b-dropdown
    :text="btnText"
    :variant="btnVariant"
    :size="btnSize"
    :disabled="processing">
    <b-dropdown-item-button
      v-for="item in items"
      :key="item.type + 'json'"
      @click="download(item.type, 'json')">
      {{ item.dataset }} JSON
    </b-dropdown-item-button>
    <b-dropdown-divider class="my-1"></b-dropdown-divider>
    <b-dropdown-item-button
      v-for="item in items"
      :key="item.type + 'csv'"
      @click="download(item.type, 'csv')">
      {{ item.dataset }} CSV
    </b-dropdown-item-button>
  </b-dropdown>
</template>

<script>
import { exportFile } from '@/mixins/exportFile'

export default {
  mixins: [ exportFile ],

  data () {
    return {
      items: [
        { dataset: 'Tasks', type: 'task' },
        { dataset: 'Contributions', type: 'task_run' },
        { dataset: 'Results', type: 'result' }
      ],
      processing: false
    }
  },

  props: {
    project: {
      type: Object,
      required: true
    },
    btnText: {
      type: String,
      default: 'Download'
    },
    btnVariant: {
      type: String,
      default: 'success'
    },
    btnSize: {
      type: String,
      default: 'sm'
    }
  },

  computed: {
    endpoint () {
      return `/project/${this.project.short_name}/tasks/export`
    }
  },

  methods: {
    /**
     * Download the data.
     *
     * The <b-dropdown-item-button> tag does not support href attributes,
     * so let's keep the old method of re-exporting the downloaded file
     * for now. If memory usage becomes an issue we might want to have
     * another look at this.
     * @param {String} type
     *   The download type.
     * @param {String} format
     *   The download format.
     */
    download (type, format) {
      this.processing = true
      if (this.$ga) {
        this.$ga.event({
          eventCategory: 'Downloads',
          eventAction: `${type}_${format}`,
          eventLabel: this.project.name,
          eventValue: 1
        })
      }

      this.$axios.$get(this.endpoint, {
        responseType: 'arraybuffer',
        params: {
          type: type,
          format: format
        }
      }).then(data => {
        this.exportFile(data, `${this.project.short_name}_${type}`, 'zip')
        this.processing = false
      }).catch(err => {
        this.$nuxt.error(err)
      })
    }
  }
}
</script>components/data/FilterProjects.vue0100777000000000000000000000421613772335614014610 0ustar00<template>
  <div class="filter-projects-data">
    <div
      v-for="(filter, index) in collection.info.project_filters"
      :key="index"
      class="mb-2">
      <label for='filter.name' class="sr-only">{{ filter.name }}</label>
      <multiselect
        :id="filter.name"
        v-model="model[filter.name]"
        :placeholder="`Filter by ${filter.name.toLowerCase()}`"
        :show-labels="false"
        :show-no-results="false"
        :options="options[filter.name] || []"
        @input="onInput"
        @select="onSelect">
      </multiselect>
    </div>
  </div>
</template>

<script>
import pickBy from 'lodash/pickBy'
import identity from 'lodash/identity'

export default {
  data () {
    return {
      model: this.value,
      options: {}
    }
  },

  props: {
    value: {
      type: Object,
      default: () => ({})
    },
    collection: {
      type: Object,
      required: true
    },
    hideLabel: {
      type: Boolean,
      default: false
    }
  },

  methods: {
    /**
     * Handle a filter being selected or removed.
     * @param {String} value
     *   The filter value.
     * @param {String} name
     *   The filter name (which comes from the multiselect component ID).
     */
    onInput (value, name) {
      this.model[name] = value
      // Emit with null values removed
      this.$emit('input', pickBy(this.model, identity))
    },

    /**
     * Handle a filter being selected.
     * @param {String} value
     *   The filter name.
     * @param {String} name
     *   The filter name (which comes from the multiselect component ID).
     */
    onSelect (value, typnamee) {
      this.$emit('select', value, name)
    }
  },

  mounted () {
    // Get all current filters for the collection.
    const catShortName = this.collection.short_name
    const endpoint = `/lc/categories/${catShortName}/project-filters`
    return this.$axios.$get(endpoint).then(data => {
      this.options = data.filters
    }).catch(err => {
      this.$nuxt.error(err)
    })
  },

  watch: {
    value (val) {
      this.model = val
    }
  }
}
</script>
components/data/SearchTags.vue0100777000000000000000000001016113763676613013700 0ustar00<template>
  <multiselect
    v-model="selectedTags"
    track-by="id"
    ref="multi"
    placeholder="Type to search"
    open-direction="bottom"
    :options="foundTags"
    :multiple="true"
    :searchable="true"
    :loading="tagsLoading"
    :internal-search="false"
    :limit="10"
    :hide-selected="true"
    :custom-label="getTagLabel"
    no-result="No tags found, try changing the search query"
    @select="selectTag"
    @remove="removeTag"
    @search-change="searchTags"
  ></multiselect>
</template>

<script>
export default {
  data () {
    return {
      tagsLoading: false,
      foundTags: [],
      selectedTags: []
    }
  },

  props: {
    containerIri: {
      type: String,
      required: true
    }
  },

  methods: {
    /**
     * Search for current tags.
     * @param {String} query
     *   The query string.
     */
    searchTags (query) {
      // return this.search(query).then(r => {
      return this.suggestTags(query).then(r => {
        if (r.data.total > 0) {
          this.foundTags = r.data.first.items
        } else {
          this.foundTags = []
        }
        this.tagsLoading = false
      }).catch(err => {
        this.handleError(err)
      })
    },

    /**
     * Search for current tag Annotations.
     * @param {String} query
     *   The query string.
     * @param {Boolean} strict
     *   True to use the query as a prefix, false otherwise.
     */
    search (query, strict = false, contains = null) {
      const safeQuery = query.replace(/[^\w]/gi, '')
      const params = {
        collection: this.containerIri,
        contains: contains === null ? {} : contains
      }
      if (safeQuery.length) {
        params.fts = {
          body: {
            query: safeQuery
          }
        }
      }
      return this.$explicates.search(params)
    },

    /**
     * Search for current tag Annotations.
     * @param {String} query
     *   The query string.
     * @param {Boolean} strict
     *   True to use the query as a prefix, false otherwise.
     */
    suggestTags (query, strict = false, contains = null) {
      const safeQuery = query.replace(/[^\w\s&]/gi, '')
      return this.$explicates.suggestTags({
        collection: this.containerIri,
        q: safeQuery
      })
    },

    /**
     * Get the label to display for a tag.
     * @param {Object} tag
     *   The tag.
     */
    getTagLabel (tag) {
      return tag.body.value
    },

    /**
     * Handle an error.
     *
     * If the Annotation Server fails we probably just want to disable this
     * tagging function, so display a friendly error message and emit the
     * error event.
     * @param {Object} err
     *   The error.
     */
    handleError (err) {
      const errorMessage = `Oh no, our tagging system seems to be broken.<br>
        Sorry about that, we'll get it fixed as soon as possible.<br><br>
        You can still continue using the result of the application as normal.`
      this.tagsLoading = false
      this.$emit('error', err)
      this.$notifications.error({ message: errorMessage })
    },

    /**
     * Select a tag.
     *
     * The selected values are not actually up-to-date when the @select
     * event is emitted, so we have to add the selected tag first, then return.
     * @param {Object} tag
     *   The tag.
     */
    selectTag (tag) {
      const tagsClone = JSON.parse(JSON.stringify(this.selectedTags))
      tagsClone.push(tag)
      this.$emit('change', tagsClone)
    },

    /**
     * Select a tag programatically.
     * @param {Object} tag
     *   The tag.
     */
    externalSelectTag (tag) {
      this.$refs.multi.value.push(tag)
      this.selectTag(tag)
    },

    /**
     * Select a tag.
     * @param {Object} tag
     *   The tag.
     */
    removeTag (tag) {
      let tClone = JSON.parse(JSON.stringify(this.selectedTags)).filter(t => {
        return t.id !== tag.id
      })
      this.$emit('change', tClone)
    }
  },

  mounted () {
    this.searchTags('') // Populate initial list
  }
}
</script>
components/data/SelectTags.vue0100777000000000000000000001617013763676613013720 0ustar00<template>
  <multiselect
    ref="multiselect"
    v-model="selectedTags"
    track-by="id"
    placeholder="Type to search"
    open-direction="bottom"
    :options="foundTags"
    :multiple="true"
    :searchable="true"
    :loading="tagsLoading"
    :internal-search="false"
    :limit="10"
    :show-no-results="false"
    :hide-selected="true"
    :custom-label="getTagLabel"
    :taggable="true"
    @tag="addTag"
    @select="selectTag"
    @remove="removeTag"
    @search-change="searchTags"
  ></multiselect>
</template>

<script>
import localConfig from '@/local.config'

export default {
  data () {
    return {
      tagsLoading: false,
      foundTags: [],
      selectedTags: []
    }
  },

  props: {
    containerIri: {
      type: String,
      required: true
    },
    sourceIri: {
      type: String,
      required: true
    },
    scopeIri: {
      type: String,
      default: ''
    }
  },

  methods: {
    /**
     * Build a new tag.
     * @param {Object} value
     *   The proposed tag value.
     */
    getNewTag (value) {
      const creator = this.getCreator()
      const newTag = {
        motivation: 'tagging',
        type: 'Annotation',
        body: {
          type: 'TextualBody',
          value: value,
          format: 'text/plain'
        },
        target: this.getTarget()
      }

      if (creator !== null) {
        newTag.creator = creator
      }

      return newTag
    },

    /**
     * Search for current tags.
     * @param {String} query
     *   The query string.
     */
    searchTags (query) {
      if (!query || !query.length) {
        this.foundTags = []
        this.tagsLoading = false
        return
      }

      const parts = query.split(' ')

      if (parts.length > 1) {
        this.$refs.multiselect.search = parts[1]
        return this.addTag(parts[0])
      }

      // return this.search(query).then(r => {
      let ret = this.suggestTags(query)

      ret.then(r => {
        if (r.data.total > 0) {
          this.foundTags = r.data.first.items
        } else {
          this.foundTags = []
        }
        this.tagsLoading = false
      }).catch(err => {
        this.handleError(err)
      })

      return ret
    },

    /**
     * Search for current tag Annotations.
     * @param {String} query
     *   The query string.
     * @param {Boolean} strict
     *   True to use the query as a prefix, false otherwise.
     */
    search (query, strict = false, contains = null) {
      const safeQuery = query.replace(/[^\w\s&]/gi, '')
      return this.$explicates.search({
        collection: this.containerIri,
        fts: {
          body: {
            query: safeQuery
          }
        },
        contains: contains === null ? {} : contains
      })
    },

    /**
     * Search for current tag Annotations.
     * @param {String} query
     *   The query string.
     * @param {Boolean} strict
     *   True to use the query as a prefix, false otherwise.
     */
    suggestTags (query, strict = false, contains = null) {
      const safeQuery = query.replace(/[^\w\s&]/gi, '')
      return this.$explicates.suggestTags({
        collection: this.containerIri,
        q: safeQuery
      })
    },

    /**
     * Get the label to display for a tag.
     * @param {Object} tag
     *   The tag.
     */
    getTagLabel (tag) {
      return tag.body.value
    },

    /**
     * Get the target of the current item.
     */
    getTarget () {
      const source = this.sourceIri

      if (this.scopeIri && this.scopeIri.length) {
        return {
          source: source,
          scope: this.scopeIri
        }
      }

      return source
    },

    /**
     * Get the current user details, if any.
     */
    getCreator () {
      const currentUser = this.$store.state.currentUser
      if (typeof currentUser.id === 'undefined') {
        return null
      }
      return {
        id: `${localConfig.libcrowdsHost}/api/user/${currentUser.id}`,
        type: 'Person',
        name: currentUser.fullname,
        nickname: currentUser.name
      }
    },

    /**
     * Check if a tag with the same target and body exists.
     * @param {Object} value
     *   The proposed tag value.
     */
    async checkTagExists (value) {
      let response = null
      try {
        response = await this.$explicates.search({
          contains: {
            body: {
              value: value
            },
            target: this.getTarget()
          }
        })
      } catch (err) {
        this.handleError(err)
      }
      return response.data.total > 0
    },

    /**
     * Add a new tag.
     * @param {String} value
     *   The tag value.
     * @param {String} id
     *   The multiselect item id
     *   (the explicates annotation id if user selected existing tag one)
     *   (if user pressed space or selected new tag => null/undefined)
     */
    async addTag (value, id) {
      value = (value || '').trim()

      if (!value) {
        this.$notifications.info({ message: 'Tag is empty' })
        // if (isNew) this.selectedTags.pop()
        return
      }

      const exists = await this.checkTagExists(value)

      if (id) {
        // we unselect that tag as we want to create a new one instead
        this.selectedTags.pop()
      }

      if (exists) {
        this.$notifications.info({ message: 'Tag already exists' })
        return
      }

      const iri = this.containerIri
      const newTag = this.getNewTag(value)
      this.tagsLoading = true
      return this.$explicates.createAnnotation(iri, newTag).then(r => {
        this.$notifications.success({ message: 'Tag added' })
        this.tagsLoading = false
        this.selectedTags.push(r.data)
      }).catch(err => {
        this.handleError(err)
      })
    },

    /**
     * Select a tag.
     * @param {Object} tag
     *   The tag.
     */
    selectTag (tag, id) {
      // create a new tag in the DB and select it
      this.addTag(tag.body.value, tag.id)
    },

    /**
     * Remove a tag.
     * @param {Object} tag
     *   The tag.
     */
    removeTag (tag) {
      if (!tag) {
        return
      }

      this.$explicates.deleteAnnotation(tag.id).then(() => {
        this.$notifications.success({ message: 'Tag removed' })
      }).catch(err => {
        this.handleError(err)
      })
    },

    /**
     * Handle an error.
     *
     * If the Annotation Server fails we probably just want to disable this
     * tagging function, so display a friendly error message and emit the
     * error event.
     * @param {Object} err
     *   The error.
     */
    handleError (err) {
      const errorMessage = `Oh no, our tagging system seems to be broken.<br>
        Sorry about that, we'll get it fixed as soon as possible.<br><br>
        You can still continue using the result of the application as normal.`
      this.tagsLoading = false
      this.$emit('error', err)
      this.$notifications.error({ message: errorMessage })
    }
  }
}
</script>
components/footers/0040777000000000000000000000000013763724557011705 5ustar00components/footers/App.vue0100777000000000000000000001226513777775313013155 0ustar00<template>
  <footer id="app-footer" :class="darkMode ? 'footer footer-dark' : 'footer'">
    <div class="container pt-3 pb-2">

      <section>
        <nuxt-link
          :to="{ name: 'index' }"
          @click.native="scrollIfCurrent">
          Part of the {{ localConfig.brand }} crowdsourcing platform
        </nuxt-link>
        <p v-html="copyright" class="my-2"></p>
        <ul class="list-inline mt-2 mb-0">
          <li
            v-if="localConfig.twitter"
            class="list-inline-item mx-1">
            <a
              :href="`https://twitter.com/${localConfig.twitter}`"
              class="text-muted">
              <icon name="twitter"></icon>
              <span class="sr-only">Twitter</span>
            </a>
          </li>
          <li
            v-if="localConfig.email"
            class="list-inline-item mx-1">
            <a :href="`mailto:${localConfig.email}`" class="text-muted">
              <icon name="envelope"></icon>
              <span class="sr-only">Email</span>
           </a>
          </li>
          <li
            v-if="localConfig.github"
            class="list-inline-item mx-1">
            <a :href="localConfig.github" class="text-muted">
              <icon name="github"></icon>
              <span class="sr-only">GitHub</span>
            </a>
          </li>
        </ul>
      </section>

      <section class="d-none d-lg-block" v-if="localConfig.footer">
        <h5 class="list-title"  style="color: #fff;">{{ localConfig.footer.title }}</h5>
        <ul class="list-unstyled">
          <li
            v-for="(item, index) in localConfig.footer.items"
            :key="index"
            class="list-item">
            <a :href="item.url" target="_blank">
              {{ item.text }}
            </a>
          </li>
        </ul>
      </section>

      <section class="d-none d-lg-block">
        <h5 class="list-title">Collections</h5>
        <ul class="list-unstyled">
          <li
            v-for="collection in collections.slice(0, 5)"
            :key="collection.id"
            class="list-item">
            <nuxt-link
              :to="{
                name: 'collection-short_name',
                params: {
                  short_name: collection.short_name
                }
              }"
              @click.native="scrollIfCurrent">
              {{ collection.name }}
            </nuxt-link>
          </li>
        </ul>
      </section>

      <section class="d-none d-lg-block">
        <h5 class="list-title">Help</h5>
        <ul class="list-unstyled">
          <li class="list-item" v-if="localConfig.docs">
            <a :href="localConfig.docs" target="_blank">Docs</a>
          </li>
          <li class="list-item">
            <nuxt-link
              :to="{
                name: 'help-tos'
              }"
              @click.native="scrollIfCurrent">
              Terms
            </nuxt-link>
          </li>
          <li class="list-item">
            <nuxt-link
              :to="{
                name: 'help-privacy'
              }"
              @click.native="scrollIfCurrent">
              Privacy
            </nuxt-link>
          </li>
          <li class="list-item">
            <nuxt-link
              :to="{
                name: 'help-cookies'
              }"
              @click.native="scrollIfCurrent">
              Cookies
            </nuxt-link>
          </li>
          <li class="list-item">
            <nuxt-link
              :to="{
                name: 'help-api'
              }"
              @click.native="scrollIfCurrent">
              API
            </nuxt-link>
          </li>
        </ul>
      </section>
    </div>
  </footer>
</template>

<script>
import 'vue-awesome/icons/twitter'
import 'vue-awesome/icons/github'
import 'vue-awesome/icons/envelope'
import localConfig from '@/local.config'

export default {
  data () {
    return {
      localConfig: localConfig,
      copyright: `&copy; ${localConfig.company}, ${new Date().getFullYear()}`
    }
  },

  props: {
    collections: {
      type: Array,
      required: true
    }
  },

  methods: {
    /**
     * Scroll to the top if the link clicked is for the current page.
     * @param {Object} evt
     *   The event.
     */
    scrollIfCurrent (evt) {
      if (process.browser && evt.target.href === window.location.href) {
        const VueScrollTo = require('vue-scrollto')
        VueScrollTo.scrollTo('body')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
#app-footer {
  background-color: $gray-1000;
  letter-spacing: 0.8px;
  color: $gray-600;
  font-size: $font-size-sm;
  line-height: 2;

  .container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;

      @include media-breakpoint-up(lg) {
        flex-direction: row;
        text-align: left;
      }
  }

  .list-title {
    margin-bottom: 1em;
    text-transform: uppercase;
    font-size: $font-size-sm;
  }

  a {
    color: $gray-300;
  }

  .brand-link {
    font-family: $headings-font-family;
  }
}
</style>
components/footers/Dashboard.vue0100777000000000000000000000364513772335620014312 0ustar00<template>
  <footer
    id="dashboard-footer"
    :class="darkMode ? 'footer footer-dark' : 'footer'">
    <div class="container-fluid">
      <ul class="list-inline my-2 d-flex flex-row align-items-center">
        <li
          v-if="localConfig.twitter"
          class="list-inline-item mx-1">
          <a
            :href="`https://twitter.com/${localConfig.twitter}`"
            class="text-muted">
            <icon name="twitter"></icon>
            <span class="sr-only">Twitter</span>
          </a>
        </li>
        <li
          v-if="localConfig.email"
          class="list-inline-item mx-1">
          <a :href="`mailto:${localConfig.email}`" class="text-muted">
            <icon name="envelope"></icon>
            <span class="sr-only">Email</span>
          </a>
        </li>
        <li
          v-if="localConfig.github"
          class="list-inline-item mx-1">
          <a :href="localConfig.github" class="text-muted">
            <icon name="github"></icon>
            <span class="sr-only">GitHub</span>
          </a>
        </li>
      </ul>
      <p v-html="copyright" class="my-2 mx-1 float-right text-muted"></p>
    </div>
  </footer>
</template>

<script>
import localConfig from '@/local.config'
import 'vue-awesome/icons/twitter'
import 'vue-awesome/icons/github'
import 'vue-awesome/icons/envelope'

export default {
  data () {
    return {
      localConfig: localConfig,
      copyright: `&copy; ${localConfig.company}, ${new Date().getFullYear()}`
    }
  }
}
</script>

<style lang="scss" scoped>
#dashboard-footer {
  background: $white;
  font-size: $font-size-sm;
  border-top: 1px solid $gray-300;

  .container-fluid {
    display: flex;
    justify-content: space-between;

    ul > li > a {
      display: flex;
    }
  }

  &.footer-dark {
    background: $gray-1000;
    border-top: 1px solid $gray-800;
  }
}
</style>
components/forms/0040777000000000000000000000000013763676613011351 5ustar00components/forms/Base.vue0100777000000000000000000000345613763676613012754 0ustar00<template>
  <b-card
    :class="cardClass"
    :no-body="noBody"
    :bg-variant="darkMode ? 'dark' : null"
    :text-variant="darkMode ? 'white' : null">

    <slot></slot>

    <template v-if="showFooter" slot="footer">
      <span>
        <slot name="footer-base-left"></slot>
      </span>
      <span>
        <b-btn
          v-if="showCancel"
          :variant="darkMode ? 'secondary': 'dark'"
          :disabled="processing"
          class="mr-1"
          @click="$emit('cancel')">
          {{ cancelText }}
        </b-btn>
        <b-btn
          v-if="showSubmit"
          :variant="darkMode ? 'dark': 'success'"
          :disabled="processing"
          @click="$emit('submit')">
          {{ submitText }}
        </b-btn>
      </span>
    </template>

  </b-card>
</template>

<script>
import 'vue-awesome/icons/circle-o-notch'

export default {
  props: {
    submitText: {
      type: String,
      default: 'Submit'
    },
    cancelText: {
      type: String,
      default: 'Cancel'
    },
    showCancel: {
      type: Boolean,
      default: false
    },
    showSubmit: {
      type: Boolean,
      default: true
    },
    showFooter: {
      type: Boolean,
      default: true
    },
    noBody: {
      type: Boolean,
      default: false
    },
    processing: {
      type: Boolean,
      default: false
    }
  },

  computed: {
    cardClass () {
      return {
        'form-container': true,
        'form-base': true,
        'form-dark': this.darkMode
      }
    }
  }
}
</script>

<style lang="scss">
.form-base {
  .btn {
    transition: 250ms opacity;
  }

  .card-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
components/forms/fields/0040777000000000000000000000000013763676613012617 5ustar00components/forms/fields/Array.vue0100777000000000000000000000521513763676613014421 0ustar00<template>
  <div>
    <b-list-group>
      <b-list-group-item
        v-for="(item, index) in value"
        :key="index"
        class="d-flex justify-content-between align-items-center">
        {{ item }}
        <b-button-group>
          <b-btn
            variant="link"
            size="sm"
            class="d-flex"
            :disabled="index === 0"
            @click="moveUp(item)">
            <icon name="arrow-up"></icon>
          </b-btn>
          <b-btn
            variant="link"
            size="sm"
            class="d-flex"
            :disabled="index === value.length - 1"
            @click="moveDown(item)">
            <icon name="arrow-down"></icon>
          </b-btn>
          <b-btn
            variant="link"
            size="sm"
            class="d-flex"
            @click="remove(index)">
            <icon name="times"></icon>
          </b-btn>
        </b-button-group>
      </b-list-group-item>
    </b-list-group>
    <b-input-group class="mt-1">
      <b-form-input
        ref="input"
        :placeholder="schema.placeholder"
        @keyup.enter.native.stop="add">
      </b-form-input>
      <b-input-group-append>
        <b-btn variant="success" @click="add">
          Add
        </b-btn>
      </b-input-group-append>
    </b-input-group>
  </div>
</template>

<script>
import 'vue-awesome/icons/times'
import 'vue-awesome/icons/arrow-up'
import 'vue-awesome/icons/arrow-down'
import { abstractField } from 'vue-form-generator'

export default {
  mixins: [ abstractField ],

  methods: {
    /**
     * Add the current input value to the array.
     */
    add () {
      const inputValue = this.$refs.input.$el.value
      if (inputValue.length && this.value.indexOf(inputValue) < 0) {
        this.value.push(inputValue)
      }
      this.$refs.input.$el.value = ''
    },

    /**
     * Remove an item from the array.
     * @param {Number} index
     *   The index of the item to remove.
     */
    remove (index) {
      this.value.splice(index, 1)
    },

    /**
     * Move an element up in the array.
     * @param {*} elem
     *  The element.
     */
    moveUp (elem) {
      const idx = this.value.indexOf(elem)
      if (idx > 0) {
        this.value.splice(idx - 1, 0, this.value.splice(idx, 1)[0])
      }
    },

    /**
     * Move an element down in the array.
     * @param {*} elem
     *  The element.
     */
    moveDown (elem) {
      const idx = this.value.indexOf(elem)
      if (idx < this.value.length) {
        this.value.splice(idx + 1, 0, this.value.splice(idx, 1)[0])
      }
    }
  }
}
</script>
components/forms/ImageUpload.vue0100777000000000000000000001165013763676613014264 0ustar00<template>
  <form-base
    class="image-upload-form"
    :show-footer="showFooter"
    :no-body="noBody"
    :show-cancel="showCancel"
    :cancel-text="cancelText"
    :processing="processing"
    :submit-text="submitText"
    @submit="submit"
    @cancel="$emit('cancel')">

    <div id="preview" ref="preview" @click="onPreviewClick"></div>

    <div class="mt-2">
      <b-form-file
        id="image-upload-form-file"
        ref="formfile"
        accept="image/*"
        v-model="model[fileField]"
        @input="onInput"
        :required="true">
      </b-form-file>
    </div>

  </form-base>
</template>

<script>
import intersection from 'lodash/intersection'
import keys from 'lodash/keys'
import axios from 'axios'
import localConfig from '@/local.config'
import FormBase from '@/components/forms/Base'

export default {
  data () {
    return {
      file: null,
      croppie: null,
      processing: false
    }
  },

  components: {
    FormBase
  },

  props: {
    endpoint: {
      type: String,
      required: true
    },
    model: {
      type: Object,
      required: true,
      validator: (value) => {
        const required = ['x1', 'x2', 'y1', 'y2']
        return intersection(required, keys(value)).length === required.length
      }
    },
    method: {
      type: String,
      default: 'POST',
      validator: (value) => {
        return ['POST', 'PUT'].indexOf(value.toUpperCase()) > -1
      }
    },
    fileField: {
      type: String,
      default: 'file'
    },
    cropType: {
      type: String,
      default: 'circle',
      validator: (value) => {
        return ['circle', 'square'].indexOf(value) > -1
      }
    },
    currentImageUrl: {
      type: String,
      default: ''
    },
    viewportWidth: {
      type: Number,
      default: 300
    },
    viewportHeight: {
      type: Number,
      default: 300
    },
    submitText: {
      type: String,
      default: 'Submit'
    },
    cancelText: {
      type: String,
      default: 'Cancel'
    },
    showCancel: {
      type: Boolean,
      default: false
    },
    showFooter: {
      type: Boolean,
      default: true
    },
    noBody: {
      type: Boolean,
      default: false
    }
  },

  methods: {
    /**
     * Submit the form.
     */
    submit () {
      this.processing = true
      let formData = new FormData()
      for (let field in this.model) {
        formData.append(field, this.model[field])
      }
      if (!this.file) {
        this.processing = false
        this.$notifications.error({
          status: 'error',
          message: 'You must provide an image file'
        })
        return
      }

      axios({
        baseURL: localConfig.pybossaHost,
        url: this.endpoint,
        method: this.method,
        data: formData,
        headers: {
          'X-CSRFToken': this.model.csrf
        },
        withCredentials: true
      }).then(response => {
        if (response.data.status && response.data.message) {
          this.$notifications.flash(response.data)
        } else {
          // For API endpoints without flash messages
          this.$notifications.success({
            message: 'Image uploaded'
          })
        }
      }).catch(err => {
        this.$notifications.error({
          message: err.message
        })
      }).then(() => {
        this.processing = false
      })
    },

    /**
     * Load the image on file input.
     */
    onInput () {
      const reader = new FileReader()
      reader.onload = (evt) => {
        this.file = evt.target.result
        this.croppie.bind({
          url: this.file
        })
      }
      reader.readAsDataURL(this.model[this.fileField])
    },

    /**
     * Click the form file input on preview click if no image loaded.
     */
    onPreviewClick () {
      if (!this.file) {
        this.$refs.formfile.$el.querySelector('input').click()
      }
    }
  },

  mounted () {
    const Croppie = require('croppie')
    const previewEl = this.$refs.preview
    this.croppie = new Croppie(previewEl, {
      viewport: {
        width: this.viewportWidth,
        height: this.viewportHeight,
        type: this.cropType
      },
      boundary: {
        width: '100%',
        height: 350
      },
      enableOrientation: true,
      update: (data) => {
        this.model.x1 = Math.floor(data.points[0])
        this.model.y1 = Math.floor(data.points[1])
        this.model.x2 = Math.floor(data.points[2])
        this.model.y2 = Math.floor(data.points[3])
      }
    })

    // Bind current image
    if (this.currentImageUrl) {
      this.croppie.bind({
        url: this.currentImageUrl,
        zoom: 0
      })
    }
  }
}
</script>

<style lang="scss">
.image-upload {
  .custom-file {
    width: 100%;
  }

  #preview {
    height: 400px;
  }
}
</style>
components/forms/Modal.vue0100777000000000000000000000447413763676613013137 0ustar00<template>
  <b-modal
    ref="modal"
    :id="modalId"
    :title="title"
    :size="size"
    @ok="submit"
    :header-text-variant="darkMode ? 'white' : null"
    :header-bg-variant="darkMode ? 'dark' : null"
    :body-bg-variant="darkMode ? 'dark' : null"
    :body-text-variant="darkMode ? 'white' : null"
    :footer-bg-variant="darkMode ? 'dark' : null"
    :footer-text-variant="darkMode ? 'white' : null"
    @hidden="$emit('hidden')"
    @shown="onShown">

    <slot></slot>

    <form-base
      class="pybossa-form"
      :show-footer="false">

      <vue-form-generator
        ref="form"
        :class="darkMode ? 'form-dark' : null"
        :schema="form.schema"
        :model="form.model">
      </vue-form-generator>

    </form-base>
  </b-modal>
</template>

<script>
import FormBase from '@/components/forms/Base'

export default {
  props: {
    form: {
      type: Object,
      required: true,
      validator: value => {
        return (
          'model' in value &&
          'schema' in value
        )
      }
    },
    title: {
      type: String,
      required: true
    },
    modalId: {
      type: String,
      required: true
    },
    size: {
      type: String,
      default: 'md'
    }
  },

  components: {
    FormBase
  },

  methods: {
    /**
     * Submit the form.
     */
    submit (evt) {
      evt.preventDefault()
      if (!this.$refs.form.validate()) {
        this.$notifications.invalidForm()
        return
      }
      this.$emit('submit', this.form)
      this.$refs.modal.hide()
    },

    /**
     * Handle modal shown.
     */
    onShown () {
      this.$refs.modal.$el.querySelector('.form-control').focus()
      this.$emit('shown')
    },

    /**
     * Submit the form if the event wasn't triggered via a textarea.
     * @param {Object} evt
     *   The event.
     */
    handleKeyup (evt) {
      if (evt.keyCode === 13 && evt.target.type !== 'textarea') {
        this.submit(evt)
      }
    }
  },

  mounted () {
    this.$refs.form.$el.addEventListener('keypress', this.handleKeyup)
  },

  beforeDestroy () {
    this.$refs.form.$el.removeEventListener('keypress', this.handleKeyup)
  }
}
</script>

<style>
.form-base .form-group {
  margin-bottom: 1rem;
}
</style>
components/forms/PybossaForm.vue0100777000000000000000000001455013763676613014343 0ustar00<template>
  <form-base
    class="pybossa-form"
    :show-footer="showFooter"
    :no-body="noBody"
    :show-cancel="showCancel"
    :show-submit="showSubmit"
    :cancel-text="cancelText"
    :processing="processing"
    :submit-text="submitText"
    @submit="submit"
    @cancel="$emit('cancel')">

    <b-alert
      show
      :variant="status === 'error' ? 'danger' : status"
      v-for="msg in alertMsg"
      class="mb-1"
      :key="msg">
      {{ msg }}
    </b-alert>

    <p class="lead text-center" v-if="lead">{{ lead }}</p>

    <slot name="top"></slot>

    <vue-form-generator
      ref="form"
      :class="darkMode ? 'form-dark' : null"
      :schema="form.schema"
      :model="form.model">
    </vue-form-generator>

    <slot name="bottom"></slot>

    <template slot="footer-base-left">
      <slot name="footer-left"></slot>
    </template>

  </form-base>
</template>

<script>
import FormBase from '@/components/forms/Base'

export default {
  data () {
    return {
      status: null,
      alert: '',
      processing: false
    }
  },

  props: {
    form: {
      type: Object,
      required: true,
      validator: value => {
        return (
          'endpoint' in value &&
          'method' in value &&
          'model' in value &&
          'schema' in value
        )
      }
    },
    submitText: {
      type: String,
      default: 'Submit'
    },
    cancelText: {
      type: String,
      default: 'Cancel'
    },
    lead: {
      type: String,
      required: false
    },
    showCancel: {
      type: Boolean,
      default: false
    },
    showSubmit: {
      type: Boolean,
      default: true
    },
    showFooter: {
      type: Boolean,
      default: true
    },
    noSubmit: {
      type: Boolean,
      default: false
    },
    next: {
      type: String,
      default: ''
    },
    noBody: {
      type: Boolean,
      default: false
    },
    confirmation: {
      type: String,
      required: false
    },
    formKey: {
      type: String,
      default: 'form'
    }
  },

  computed: {
    alertMsg () {
      // To handle disappearing and multiple alerts
      return this.alert ? [this.alert] : []
    },
    cardStyle () {
      if (this.noBorder) {
        return {
          border: 'none'
        }
      }
    }
  },

  components: {
    FormBase
  },

  methods: {
    /**
     * Inject errors into the form generator.
     * @param {Object} errors
     *   The form errors.
     */
    injectErrors (errors) {
      this.$refs.form.errors = []
      for (let field of this.form.schema.fields) {
        if (field.model in errors) {
          for (let error of errors[field.model]) {
            this.$refs.form.errors.push({
              error,
              field
            })
          }
        }
      }
    },

    /**
     * Validate the form.
     */
    isValid () {
      const valid = this.$refs.form.validate()
      if (!valid) {
        this.alert = 'Please correct the errors'
        this.status = 'error'
        this.$notifications.invalidForm()
      }
      return valid
    },

    /**
     * Process and submit the form.
     */
    process () {
      this.processing = true
      this.alert = ''

      return this.$axios({
        method: this.form.method,
        url: this.form.endpoint,
        data: this.getModel(),
        params: this.form.params || {},
        headers: {
          'X-CSRFToken': this.form.model.csrf
        }
      }).then(r => {
        this.$emit('response', r.data)
        if (r.data.status === 'error' || r.data.status === 'danger') {
          this.alert = r.data.flash
          this.status = r.data.status
          this.$notifications.invalidForm()
          this.injectErrors(r.data[this.formKey].errors)
          return
        } else if (
          r.data.status === 'success' ||
          r.data.status === 'sent' ||
          !r.data.status
        ) {
          this.handleSuccess(r.data)
        }
        this.$notifications.flash(r.data)
      }).catch(err => {
        this.$nuxt.error(err)
      }).then(() => {
        this.processing = false
      })
    },

    /**
     * Submit the form.
     */
    submit () {
      if (!this.isValid()) {
        return
      }

      this.$emit('submit', this.form.model)

      if (this.noSubmit) {
        return
      }

      if (!this.confirmation) {
        this.process()
        return
      }

      this.$swal({
        title: `Confirm`,
        html: this.confirmation,
        type: 'question',
        showCancelButton: true,
        reverseButtons: true,
        showLoaderOnConfirm: true,
        preConfirm: () => {
          return this.process()
        }
      }).catch(err => {
        if (typeof err === 'object' && err.hasOwnProperty('dismiss')) {
          this.$nuxt.error(err)
        }
      })
    },

    /**
     * Return the form model after converting any multiselect fields.
     */
    getModel () {
      const modelCopy = JSON.parse(JSON.stringify(this.form.model))
      const multiselectFields = this.form.schema.fields.filter(field => {
        return field.type === 'vueMultiSelect'
      })

      for (let field of multiselectFields) {
        let value = modelCopy[field.model]
        if (Array.isArray(value)) {
          modelCopy[field.model] = value.map(item => (item.id))
        } else if (value) {
          modelCopy[field.model] = value.id
        }
      }
      return modelCopy
    },

    /**
     * Emit success and go to next, if present.
     * @param {Object} data
     *   The response data
     */
    handleSuccess (data) {
      if (typeof this.next === 'string' && this.next.length) {
        this.$router.push({ path: this.next })
      }
      this.$emit('success', data)
    },

    /**
     * Submit the form if the event wasn't triggered via a textarea.
     * @param {Object} evt
     *   The event.
     */
    handleKeyup (evt) {
      if (evt.keyCode === 13 && evt.target.type !== 'textarea') {
        this.submit()
      }
    }
  },

  mounted () {
    this.$refs.form.$el.addEventListener('keypress', this.handleKeyup)
  },

  beforeDestroy () {
    this.$refs.form.$el.removeEventListener('keypress', this.handleKeyup)
  }
}
</script>
components/infiniteload/0040777000000000000000000000000013763676613012670 5ustar00components/infiniteload/Annotations.vue0100777000000000000000000000721513763676613015713 0ustar00<template>
  <no-ssr>
    <infinite-loading
      ref="infiniteload"
      class="infinite-loading"
      @infinite="infiniteLoadAnnotations"
    >
      <span slot="no-results">
        <span v-if="noResults">{{ noResults }}</span>
      </span>
      <span slot="no-more">
        <span v-if="noMoreResults">{{ noMoreResults }}</span>
      </span>
    </infinite-loading>
  </no-ssr>
</template>

<script>
import uniqBy from 'lodash/uniqBy'
import Fuse from 'fuse.js'

export default {
  data () {
    return {
      items: [],
      offset: 0
    }
  },

  props: {
    value: {
      type: Array,
      required: true
    },
    containerIri: {
      type: String,
      required: true
    },
    noResults: {
      type: String,
      default: 'No results'
    },
    noMoreResults: {
      type: String,
      default: 'No more results'
    },
    searchString: {
      type: String,
      default: ''
    },
    searchKeys: {
      type: Array,
      default: () => ([])
    }
  },

  methods: {
    /**
     * Handler to infinitely load Annotations.
     * @param {Object} $state
     *   The vue-inifinite-loading state.
     */
    async infiniteLoadAnnotations ($state) {
      let response = null
      const limit = 20
      // const limit = 100
      try {
        response = await this.$explicates.search({
        // response = await this.$explicates.suggestTags({
          collection: this.containerIri,
          limit: limit,
          offset: this.offset
        })
      } catch (err) {
        this.$nuxt.error(err)
      }

      if (response.data.hasOwnProperty('first')) {
        this.items = uniqBy(this.items.concat(response.data.first.items), 'id')
        // this.items = this.items.concat(response.data.first.items)
        this.offset += response.data.first.items.length
      }

      if (
        !response.data.hasOwnProperty('first') ||
        response.data.first.items.length < limit
      ) {
        $state.complete()
        this.$emit('complete')
        return
      }

      $state.loaded()
    },

    /**
     * Apply fuzzy search.
     * @param {Array} items
     *   The items to search.
     */
    search (items) {
      if (
        this.searchKeys &&
        this.searchString &&
        this.searchKeys.length &&
        this.searchString.length
      ) {
        return this.fuse.search(this.searchString)
      }
      return items
    },

    /**
     * Reset the loaded items.
     */
    reset () {
      this.$emit('input', [])
      this.$nextTick(() => {
        this.page = 0
        this.$refs.infiniteload.$emit('$InfiniteLoading:reset')
      })
    },

    /**
     * Trigger a manual load.
     */
    load () {
      this.$nextTick(() => {
        if (!this.$refs.infiniteload.isLoading) {
          this.$refs.infiniteload.attemptLoad()
        }
      })
    },

    /**
     * Emit the loaded and possibly filtered items.
     */
    emitItems () {
      const filteredItems = this.search(this.items)
      this.$emit('input', filteredItems)
    }
  },

  computed: {
    fuse () {
      return new Fuse(this.items, {
        shouldSort: true,
        tokenize: true,
        matchAllTokens: true,
        findAllMatches: true,
        threshold: 0,
        location: 0,
        distance: 100,
        maxPatternLength: 32,
        minMatchCharLength: 1,
        keys: this.searchKeys
      })
    }
  },

  watch: {
    searchKeys () {
      this.emitItems()
    },
    searchString () {
      this.emitItems()
    },
    items () {
      this.emitItems()
    }
  }
}
</script>
components/infiniteload/DomainObjects.vue0100777000000000000000000001011213763676613016125 0ustar00<template>
  <no-ssr>
    <infinite-loading
      ref="infiniteload"
      class="infinite-loading"
      @infinite="infiniteLoadDomainObjects">
      <span slot="no-results">
        <span v-if="noResults">{{ noResults }}</span>
      </span>
      <span slot="no-more">
        <span v-if="noMoreResults">{{ noMoreResults }}</span>
      </span>
    </infinite-loading>
  </no-ssr>
</template>

<script>
import Fuse from 'fuse.js'
import uniqBy from 'lodash/uniqBy'

export default {
  data () {
    return {
      items: []
    }
  },

  props: {
    value: {
      type: Array,
      required: true
    },
    domainObject: {
      type: String,
      required: true,
      validator: (value) => {
        const valid = [
          'announcement',
          'auditlog',
          'blogpost',
          'category',
          'helpingmaterial',
          'project',
          'projectstats',
          'result',
          'task',
          'taskrun',
          'user',
          'webhook'
        ]
        return valid.indexOf(value) > -1
      }
    },
    searchParams: {
      type: Object,
      default: () => ({})
    },
    searchString: {
      type: String,
      default: ''
    },
    searchKeys: {
      type: Array,
      default: () => ([])
    },
    noResults: {
      type: String,
      default: 'No results'
    },
    noMoreResults: {
      type: String,
      default: 'No more results'
    }
  },

  methods: {
    /**
     * Handler to infinitely load domain objects.
     * @param {Object} $state
     *   The vue-inifinite-loading state.
     */
    async infiniteLoadDomainObjects ($state) {
      const params = Object.assign({}, this.searchParams)
      params.offset = this.items.length
      let data = null

      try {
        data = await this.$axios.$get(`/api/${this.domainObject}`, {
          params: params
        })
      } catch (err) {
        this.$nuxt.error(err)
      }

      // Loading complete
      if (!data.length) {
        $state.complete()
        this.$emit('complete')
        return
      }

      // Add the _showDetails flag
      data = data.map(item => {
        item._showDetails = false
        return item
      })

      // Get unique by ID, in case multiple loads were running asynchronously
      this.items = uniqBy(this.items.concat(data), 'id')
      $state.loaded()
    },

    /**
     * Reset the loaded items.
     */
    reset () {
      this.$emit('input', [])
      this.$nextTick(() => {
        this.items = []
        this.$refs.infiniteload.$emit('$InfiniteLoading:reset')
      })
    },

    /**
     * Trigger a manual load.
     */
    load () {
      this.$nextTick(() => {
        if (!this.$refs.infiniteload.isLoading) {
          this.$refs.infiniteload.attemptLoad()
        }
      })
    },

    /**
     * Apply fuzzy search.
     * @param {Array} items
     *   The items to search.
     */
    search (items) {
      if (
        this.searchKeys &&
        this.searchString &&
        this.searchKeys.length &&
        this.searchString.length
      ) {
        return this.fuse.search(this.searchString)
      }
      return items
    },

    /**
     * Emit the loaded and possibly filtered items.
     */
    emitItems () {
      const filteredItems = this.search(this.items)
      this.$emit('input', filteredItems)
    }
  },

  computed: {
    fuse () {
      return new Fuse(this.items, {
        shouldSort: true,
        tokenize: true,
        matchAllTokens: true,
        findAllMatches: true,
        threshold: 0,
        location: 0,
        distance: 100,
        maxPatternLength: 32,
        minMatchCharLength: 1,
        keys: this.searchKeys
      })
    }
  },

  watch: {
    'searchParams': {
      handler: function (val, oldVal) {
        this.reset()
      },
      deep: true
    },
    searchKeys () {
      this.emitItems()
    },
    searchString () {
      this.emitItems()
    },
    items () {
      this.emitItems()
    }
  }
}
</script>
components/lists/0040777000000000000000000000000013763676613011361 5ustar00components/lists/Announcements.vue0100777000000000000000000001302713763676613014722 0ustar00<template>
  <div id="announcements-list">

    <b-btn
      id="announcements-toggle"
      class="nav-link"
      v-on-clickaway="hide"
      @click="toggle">
      <icon name="bell"></icon>
      <b-badge
        pill
        id="unread-badge"
        v-if="hasUnread"
        variant="info">
        &nbsp;
      </b-badge>
    </b-btn>

    <span v-show="show">
      <b-card
        no-body
        header="Notifications"
        id="announcements-container"
        class="dropdown-menu-right"
        :bg-variant="darkMode ? 'dark' : null"
        :text-variant="darkMode ? 'white' : null">

        <div
          slot="header"
          class="d-flex align-items-center justify-content-between">
          <h6 class="mb-0">
            Notifications
          </h6>
          <b-btn
            size="sm"
            variant="link"
            @click="markAllAsRead">
            <small>
              Mark all as read
            </small>
          </b-btn>
        </div>

        <div id="announcements" class="custom-scrollbar">
          <announcement-card
            v-for="announcement in enhancedAnnouncements"
            :key="announcement.id"
            :announcement="announcement">
          </announcement-card>
          <div class="m-1">
            <b-btn
              v-if="announcements.length"
              size="sm"
              :variant="darkMode ? 'secondary' : 'primary'"
              class="mx-auto"
              :disabled="noMore"
              @click.stop="loadMore">
              Load More
            </b-btn>
            <small v-else>
              There are no notifications yet.
            </small>
          </div>
        </div>
      </b-card>
    </span>
  </div>
</template>

<script>
import 'vue-awesome/icons/bell'
import AnnouncementCard from '@/components/cards/Announcement'

export default {
  data () {
    return {
      show: false,
      noMore: false,
      announcements: []
    }
  },

  components: {
    AnnouncementCard
  },

  computed: {
    currentUser () {
      return this.$store.state.currentUser
    },

    userAnnouncements () {
      return this.currentUser.info.announcements || {}
    },

    hasUnread () {
      if (!this.announcements.length) {
        return false
      }
      const lastRead = this.userAnnouncements.last_read
      if (!lastRead) {
        return true
      }
      const lastAnnouncement = this.announcements[0]
      const lastCreated = Date.parse(lastAnnouncement.created)
      return !lastRead || Date.parse(lastRead) < lastCreated
    },

    enhancedAnnouncements () {
      const readIds = this.userAnnouncements.read_ids || []
      const allRead = this.userAnnouncements.all_read
      return this.announcements.map(ann => {
        if (allRead && Date.parse(allRead) > Date.parse(ann.created)) {
          ann._read = true
        } else {
          ann._read = readIds.indexOf(ann.id) > -1
        }
        return ann
      })
    }
  },

  methods: {
    /**
     * Hide the announcements.
     */
    hide () {
      this.show = false
    },

    /**
     * Toggle the announcements.
     */
    toggle () {
      if (window.innerWidth < 768) {
        // Redirect to the announcements page on small screens
        this.$router.push({
          name: 'account-name-announcements',
          params: {
            name: this.currentUser.name
          }
        })
      } else {
        this.show = !this.show
      }
      this.$store.dispatch('UPDATE_LAST_READ', this.$axios)
    },

    /**
     * Load the next batch of announcements.
     */
    loadMore () {
      const limit = 50
      // For some reason the $get version of this request won't work (?)
      this.$axios.get('/api/announcement', {
        params: {
          published: true,
          orderby: 'created',
          desc: true,
          limit: limit,
          offset: this.announcements.length
        }
      }).then(response => {
        if (response.data.length) {
          this.announcements = this.announcements.concat(response.data)
          if (response.data.length < limit) {
            this.noMore = true
          }
        } else {
          this.noMore = true
        }
      }).catch(err => {
        this.$nuxt.error(err)
      })
    },

    /**
     * Mark all announcements as read.
     */
    markAllAsRead () {
      this.$store.dispatch('UPDATE_ALL_READ', this.$axios)
    }
  },

  created () {
    this.loadMore()
  }
}
</script>

<style lang="scss">
#announcements-list {
  font-size: $font-size-sm;
  display: flex;
  justify-content: center;
  padding-right: 0;
  position: relative;
  text-transform: none;

  #announcements-toggle {
    display: flex;
    flex-direction: row;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: .5rem 1rem;

    &:after {
      display: none;
    }
  }

  #unread-badge {
    font-size: 0.5rem;
  }

  #announcements-container {
    font-weight: 400;
    position: absolute;
    right: 0;
    top: 100%;
    width: 400px;
    font-size: $font-size-sm;
    padding: 0;
    z-index: $zindex-dropdown;

    .list-group {
      border: none;
    }

    .announcement-card {
      @include hover-focus {
        background: rgba($gray-300, 0.25);
      }
    }

    #announcements {
      max-height: 400px;
      overflow-y: auto;
    }

    .infinite-status-prompt {
      background: $white;
    }
  }
}
</style>
components/lists/ItemTags.vue0100777000000000000000000000327013763676613013621 0ustar00<template>
  <div class="badge-list">
    <p class="text-muted" v-if="message">
      {{ message }}
    </p>
    <b-badge
      v-else
      v-for="tag in tags"
      :key="tag.id"
      variant="primary">
      {{ tag.body.value }}
    </b-badge>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tags: [],
      message: 'Loading...'
    }
  },

  props: {
    containerIri: {
      type: String,
      required: true
    },
    sourceIri: {
      type: String,
      required: true
    },
    scopeIri: {
      type: String,
      required: true
    }
  },

  methods: {
    /**
     * Load the item's tags.
     */
    async loadTags () {
      this.message = 'Loading...'
      this.tags = []

      return this.$explicates.search({
        collection: this.containerIri,
        contains: {
          target: this.getTarget()
        }
      }).then(r => {
        if (r.data.total > 0) {
          this.message = ''
          this.tags = r.data.first.items
        } else {
          this.message = 'None'
        }
      }).catch(err => {
        this.message = 'Failed to load tags'
        this.$notifications.flash({ status: 'error', message: err.message })
      })
    },

    /**
     * Get the target of for searching purposes.
     */
    getTarget () {
      const source = this.sourceIri

      if (this.scopeIri && this.scopeIri.length) {
        return {
          source: source,
          scope: this.scopeIri
        }
      }

      return source
    }
  },

  mounted () {
    this.loadTags()
  },

  watch: {
    sourceIri () {
      this.loadTags()
    }
  }
}
</script>
components/lists/ProjectFilters.vue0100777000000000000000000000252013763676613015040 0ustar00<template>
  <div class="badge-list">
    <b-badge
      v-for="(value, name) in projectFilters"
      :key="name"
      :style="getFilterStyle(name)"
      @click.prevent="handleClick(name, value)">
      {{ name }}: {{ value }}
    </b-badge>
  </div>
</template>

<script>
export default {
  props: {
    projectFilters: {
      type: Object,
      required: true
    },
    collection: {
      type: Object,
      default: () => ({})
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },

  methods: {
    /**
     * Return the colour of a project filter.
     * @param {String} name
     *   The filter name.
     */
    getFilterStyle (name) {
      const filter = this.collection.info.project_filters.filter(t => {
        return t.name === name
      })[0] || null

      let color = this.darkMode || !filter || !filter.color
        ? '#868e96'
        : filter.color

      return {
        backgroundColor: color,
        cursor: this.disabled ? 'default' : 'pointer'
      }
    },

    /**
     * Handle click.
     * @param {String} name
     *   The filter name.
     * @param {String} value
     *   The filter value.
     */
    handleClick (name, value) {
      if (!this.disabled) {
        this.$emit('click', name, value)
      }
    }
  }
}
</script>
components/modals/0040777000000000000000000000000013763676613011502 5ustar00components/modals/AddAnnoCollection.vue0100777000000000000000000001426613763676613015554 0ustar00<template>
  <modal-form
    :form="form"
    :modalId="modalId"
    title="Add a project filter"
    @submit="processForm"
    @shown="resetModel">
  </modal-form>
</template>

<script>
import localConfig from '@/local.config'
import VueFormGenerator from 'vue-form-generator'
import ModalForm from '@/components/forms/Modal'

export default {
  data () {
    return {
      form: {
        model: {}, // See resetModel()
        schema: {
          fields: [
            {
              model: 'purpose',
              label: 'Purpose',
              type: 'select',
              required: true,
              hint: 'The purpose of the AnnotationCollection.',
              values: [
                { id: 'results', name: 'Storing results' },
                { id: 'tags', name: 'Storing user tags' }
              ],
              hideNoneSelectedText: true,
              validator: VueFormGenerator.validators.required
            },
            {
              model: 'label',
              label: 'Label',
              type: 'input',
              inputType: 'text',
              required: true,
              hint: 'A human-readable label for the AnnotationCollection.',
              validator: VueFormGenerator.validators.string
            },
            {
              model: 'slug',
              label: 'Slug',
              type: 'input',
              inputType: 'text',
              required: true,
              hint: `Used to form part of the AnnotationCollection's IRI.`,
              validator: (value) => {
                const checkFunc = this.getAnnotationCollection
                return new Promise((resolve, reject) => {
                  if (!value.length) {
                    resolve([ 'This field is required!' ])
                  }

                  // Check that the IRI does not already exist
                  /* eslint-disable handle-callback-err */
                  checkFunc(value).then(r => {
                    resolve([
                      `An AnnotationCollection is already using this slug ` +
                      `(see ${r.data.id})`
                    ])
                  }).catch(err => {
                    // We don't know at this stage if the error is because
                    // of a 404 (which is what we want) or something else, but
                    // easiest to just resolve for now and any deal with any
                    // other errors during creation.
                    resolve()
                  })
                })
              }
            }
          ]
        }
      }
    }
  },

  components: {
    ModalForm
  },

  props: {
    modalId: {
      type: String,
      required: true
    },
    collection: {
      type: Object,
      required: true
    }
  },

  methods: {
    /**
     * Process the AnnotationCollection form.
     */
    processForm () {
      const purpose = this.form.model.purpose
      const currentIri = this.collection.info.annotations[purpose]
      if (!currentIri) {
        this.addAnnotationCollection()
        return
      }

      return this.$swal({
        title: `Confirm`,
        html: `An AnnotationCollection is already linked to the collection
        microsite for this purpose:<br><br>
        <a href="${currentIri}" target="_blank">${currentIri}</a><br><br>
        Once AnnotationCollections have been generated for a particular
        purpose they should not normally be changed, especially without
        first migrating the data.<br><br>
        Are you sure you want to continue?`,
        type: 'question',
        showCancelButton: true,
        reverseButtons: true,
        showLoaderOnConfirm: true,
        preConfirm: () => {
          return this.addAnnotationCollection()
        }
      }).catch(err => {
        if (typeof err === 'object' && err.hasOwnProperty('dismiss')) {
          this.$notifications.error({ message: err.message })
        }
      })
    },

    /**
     * Add an AnnotationCollection.
     */
    addAnnotationCollection () {
      const libcrowdsHost = localConfig.libcrowdsHost
      const data = {
        type: [
          'AnnotationCollection',
          'BasicContainer'
        ],
        creator: `${libcrowdsHost}/api/category/${this.collection.id}`,
        label: this.form.model.label
      }
      const slug = this.form.model.slug
      return this.$explicates.createCollection(data, slug).then(r => {
        return this.updateCollection(r.data.id, this.form.model.purpose)
      }).catch(err => {
        this.$notifications.error({ message: err.message })
      })
    },

    /**
     * Store an AnnotationCollection IRI in the LibCrowds collection data.
     * @param {String} iri
     *   The AnnotationCollection IRI.
     * @param {String} purpose
     *   The purpose of the collection (e.g. "results").
     */
    updateCollection (iri, purpose) {
      const infoClone = JSON.parse(JSON.stringify(this.collection.info))
      infoClone.annotations[purpose] = iri
      return this.$axios.$put(`/api/category/${this.collection.id}`, {
        info: infoClone
      }).then(data => {
        this.$emit('success')
        this.$store.dispatch('UPDATE_CURRENT_COLLECTION', data)
      }).catch(err => {
        this.$notifications.error({ message: err.messag })
        this.deleteAnnotationCollection(iri)
      })
    },

    /**
     * Delete an AnnotationCollection.
     *
     * Only required if we fail to store the IRI in the collection metadata.
     * @param {String} iri
     *   The AnnotationCollection IRI.
     */
    deleteAnnotationCollection (iri) {
      this.$explicates.deleteCollection(iri).catch(err => {
        this.$notifications.error({ message: err.message })
      })
    },

    /**
     * Get an AnnotationCollection by slug.
     * @param {String} slug
     *   The AnnotationCollection IRI.
     */
    getAnnotationCollection (slug) {
      return this.$explicates.getCollectionBySlug(slug)
    },

    /**
     * Reset the model.
     */
    resetModel () {
      this.form.model = {
        purpose: '',
        slug: '',
        label: ''
      }
    }
  }
}
</script>
components/modals/AddFormField.vue0100777000000000000000000001047613763676613014513 0ustar00<template>
  <modal-form
    :form="form"
    :modalId="modalId"
    title="Add a form field"
    @submit="onSubmit"
    @shown="resetModel">
  </modal-form>
</template>

<script>
import ModalForm from '@/components/forms/Modal'
import VueFormGenerator from 'vue-form-generator'

export default {
  data () {
    return {
      form: {
        model: {},
        schema: {
          fields: [
            {
              type: 'input',
              inputType: 'text',
              label: 'Model',
              model: 'model',
              required: true,
              validator: (value) => {
                const keys = this.model.map(field => field.model)
                const re = /^[A-Za-z0-9_]*$/
                if (!value || !value.length) {
                  return 'This field is required!'
                }
                if (keys.indexOf(value) > -1) {
                  return 'The model already contains this key'
                }
                if (!re.test(value)) {
                  return 'Can only contain Latin characters, numbers ' +
                    'or underscores'
                }
              },
              hint: 'A key used to identify the field (e.g. title).'
            },
            {
              type: 'input',
              inputType: 'text',
              label: 'Label',
              model: 'label',
              maxlength: 50,
              required: true,
              validator: VueFormGenerator.validators.string,
              hint: 'A label shown above the form field (e.g. Title).'
            },
            {
              type: 'select',
              label: 'Type',
              model: 'type',
              required: true,
              values: () => {
                return [
                  { id: 'input', name: 'Input' },
                  { id: 'textArea', name: 'TextArea' },
                  { id: 'checkbox', name: 'Checkbox' }
                ]
              },
              selectOptions: {
                hideNoneSelectedText: true
              },
              validator: (value) => {
                if (!value || !value.length) {
                  return 'This field is required!'
                }
              },
              hint: 'The type of the form field.'
            },
            {
              type: 'select',
              label: 'Input Type',
              model: 'inputType',
              values: () => {
                return [
                  { id: 'text', name: 'Text' },
                  { id: 'number', name: 'Number' },
                  { id: 'date', name: 'Date' },
                  { id: 'url', name: 'URL' }
                ]
              },
              disabled: model => {
                return model.type !== 'input'
              },
              selectOptions: {
                hideNoneSelectedText: true
              },
              validator: (value, field, model) => {
                if ((!value || !value.length) && model.type === 'input') {
                  return 'This field is required when the type is "input"'
                }
              },
              hint: 'The specific type of input field.'
            },
            {
              type: 'input',
              inputType: 'text',
              label: 'Placeholder',
              model: 'placeholder',
              validator: VueFormGenerator.validators.string,
              hint: 'Placeholder text for the form field'
            }
          ]
        }
      }
    }
  },

  components: {
    ModalForm
  },

  props: {
    modalId: {
      type: String,
      required: true
    },
    model: {
      type: Array,
      required: true
    }
  },

  methods: {
    /**
     * Handle submit.
     */
    onSubmit () {
      const modelClone = Object.assign({}, this.form.model)
      if (this.form.model.type === 'input') {
        // Add name attribute to any input fields
        this.form.model['inputName'] = this.form.model.model
      } else {
        delete modelClone['inputType']
      }
      this.$emit('submit', this.form.model)
    },

    /**
     * Reset the model.
     */
    resetModel () {
      const schema = this.form.schema
      this.form.model = VueFormGenerator.schema.createDefaultObject(schema)
    }
  }
}
</script>
components/modals/AddProjectFilter.vue0100777000000000000000000000440213763676613015410 0ustar00<template>
  <modal-form
    :form="form"
    :modalId="modalId"
    title="Add a project filter"
    @submit="addProjectFilter"
    @shown="resetModel">
  </modal-form>
</template>

<script>
import ModalForm from '@/components/forms/Modal'

export default {
  data () {
    return {
      form: {
        model: {},
        schema: {
          fields: [
            {
              model: 'name',
              label: 'Name',
              type: 'input',
              inputType: 'text',
              hint: 'The name of the project filter (e.g. Location).',
              required: true,
              validator: (value) => {
                const projectFilters = this.collection.info.project_filters
                const currentFilters = Object.keys(projectFilters)
                if (!value || !value.length) {
                  return 'This field is required'
                }
                if (currentFilters.filter(f => (f.id === value)).length) {
                  return 'A project filter already exists with that name'
                }
              }
            },
            {
              model: 'color',
              label: 'Colour',
              type: 'input',
              inputType: 'color',
              hint: 'A color for the project filter.'
            }
          ]
        }
      }
    }
  },

  components: {
    ModalForm
  },

  props: {
    modalId: {
      type: String,
      required: true
    },
    collection: {
      type: Object,
      required: true
    }
  },

  methods: {
    /**
     * Add a project filter.
     */
    addProjectFilter () {
      const filter = {
        name: this.form.model.name,
        color: this.form.model.color
      }

      this.collection.info.project_filters.push(filter)

      return this.$axios.$put(`/api/category/${this.collection.id}`, {
        info: this.collection.info
      }).then(data => {
        this.$notifications.success({ message: 'Project filter added' })
        this.$emit('update', filter)
        this.processing = false
      })
    },

    /**
     * Reset the model.
     */
    resetModel () {
      this.form.model = {
        name: '',
        color: '#9DD0EC'
      }
    }
  }
}
</script>
components/modals/Leaderboard.vue0100777000000000000000000000336113763676613014432 0ustar00<template>
  <b-modal
    lazy
    :id="modalId"
    title="Leaderboard"
    ok-only
    :header-text-variant="darkMode ? 'white' : null"
    :header-bg-variant="darkMode ? 'dark' : null"
    :body-bg-variant="darkMode ? 'dark' : null"
    :body-text-variant="darkMode ? 'white' : null"
    :footer-bg-variant="darkMode ? 'dark' : null"
    :footer-text-variant="darkMode ? 'white' : null">
    <b-table
      responsive
      striped
      hover
      show-empty
      :dark="darkMode"
      :items="filteredUsers"
      :fields="fields">
    </b-table>
  </b-modal>
</template>

<script>
export default {
  data () {
    return {
      fields: {
        rank: { label: 'Rank' },
        name: { label: 'Name' },
        score: { label: 'Score' }
      }
    }
  },

  props: {
    topUsers: {
      type: Array,
      required: true
    },
    modalId: {
      type: String,
      required: true
    }
  },

  computed: {
    /**
     * Highlight current user and remove from the end if they appear twice.
     */
    filteredUsers () {
      let users = JSON.parse(JSON.stringify(this.topUsers))

      users = users.map(user => {
        if (this.currentUser && this.currentUser.name === user.name) {
          user._rowVariant = 'success'
        }
        return user
      })

      let userRepeated = users.filter(user => {
        return user.name === this.currentUser.name
      }).length

      if (userRepeated) {
        users.splice(-1, 1)
      }

      return users
    },
    currentUser () {
      return this.$store.state.currentUser
    }
  }
}
</script>

<style lang="scss" scoped>
.table {
  tr *:first-child,
  tr *:last-child {
    text-align: center;
  }
}
</style>
components/modals/ProjectStats.vue0100777000000000000000000001055013763676613014651 0ustar00<template>
  <b-modal
    lazy
    :id="modalId"
    ok-only
    :header-text-variant="darkMode ? 'white' : null"
    :header-bg-variant="darkMode ? 'dark' : null"
    :body-bg-variant="darkMode ? 'dark' : null"
    :body-text-variant="darkMode ? 'white' : null"
    :footer-bg-variant="darkMode ? 'dark' : null"
    :footer-text-variant="darkMode ? 'white' : null"
    title="Project Stats"
    size="lg">

    <div class="p-2">
      <card-base
        v-for="(chart, index) in charts"
        v-if="chart.data"
        :key="index"
        :title="chart.title"
        :description="chart.description"
        class="mb-3 card-overflow">
        <b-card-body
          :bg-variant="darkMode ? 'dark' : null"
          :text-variant="darkMode ? 'white' : null">
          <component
            :is="chart.type"
            :chart-data="chart.data"
            :unit="chart.unit">
          </component>
        </b-card-body>
      </card-base>
    </div>
  </b-modal>
</template>

<script>
import moment from 'moment'
import 'vue-awesome/icons/clock-o'
import LineChart from '@/components/charts/Line'
import BarChart from '@/components/charts/Bar'
import PieChart from '@/components/charts/Pie'
import CardBase from '@/components/cards/Base'

export default {
  components: {
    LineChart,
    BarChart,
    PieChart,
    CardBase
  },

  props: {
    modalId: {
      type: String,
      required: true
    },
    project: {
      type: Object,
      required: true
    },
    collection: {
      type: Object,
      required: true
    }
  },

  computed: {
    currentUser () {
      return this.$store.state.currentUser
    },

    charts () {
      return [
        {
          title: 'Top Users',
          description: `Authenticated users with the most contributions over
            the past two weeks`,
          data: this.topUsersData,
          type: BarChart,
          unit: 'user'
        },
        {
          title: 'Daily Contributions',
          description: `Daily contributions over the past two weeks`,
          data: this.dailyContributionsData,
          type: LineChart,
          unit: 'contribution'
        },
        {
          title: 'Hourly Contributions',
          description: `Hourly contributions over the past two weeks`,
          data: this.hourlyContributionsData,
          type: LineChart,
          unit: 'contribution'
        },
        {
          title: 'Proportion Authenticated',
          description: `Proportion of authenticated users over the past two
            weeks`,
          data: this.proportionAuthData,
          type: PieChart,
          unit: 'user'
        }
      ]
    },

    dailyContributionsData () {
      const datesStats = this.project.stats.info.dates_stats
      if (typeof datesStats === 'undefined') {
        return null
      }
      return {
        labels: datesStats[0].values.map(value => {
          return moment(new Date(value[0])).format('DD MMM')
        }),
        series: [
          datesStats[0].values.map(value => value[1])
        ]
      }
    },

    hourlyContributionsData () {
      const hoursStats = this.project.stats.info.hours_stats
      if (typeof hoursStats === 'undefined') {
        return null
      }
      return {
        labels: hoursStats[0].values.map(value => value[0]),
        series: [
          hoursStats[0].values.map(value => value[1])
        ]
      }
    },

    topUsersData () {
      const usersStats = this.project.stats.info.users_stats
      if (typeof usersStats === 'undefined') {
        return null
      }
      return {
        labels: usersStats.auth.top5.map(stat => stat.name),
        series: [
          usersStats.auth.top5.map(stat => stat.tasks)
        ]
      }
    },

    proportionAuthData () {
      const usersStats = this.project.stats.info.users_stats
      if (typeof usersStats === 'undefined') {
        return null
      }
      return {
        labels: [
          'Authenticated Volunteers',
          'Anonymous Volunteers'
        ],
        series: [
          {
            meta: 'Authenticated Volunteers:',
            value: usersStats.n_anon
          },
          {
            meta: 'Anonymous Volunteers:',
            value: usersStats.n_auth
          }
        ]
      }
    }
  }
}
</script>
components/navbars/0040777000000000000000000000000013763676613011657 5ustar00components/navbars/Side.vue0100777000000000000000000002043113777477351013267 0ustar00<template>
  <div
    ref="sidebar"
    :class="sideNavClass">
    <div class="header">
      <b-btn
        variant="link"
        class="d-flex align-items-center"
        @click="$emit('close')">
        Close<icon name="times" class="ml-1"></icon>
      </b-btn>
    </div>

    <div id="side-nav-items" class="custom-scrollbar" v-prevent-parent-scroll>

      <div v-for="(items, key, index) in sideNavItems" :key="key">
       <h4  v-if="item !== null">{{ key }}</h4>
        <b-nav>
          <b-nav-item
            v-for="(item, index) in items"
            exact
            :key="index"
            :to="item.external ? '' : item.link"
            :href="item.external ? item.link : ''"
            :active-class="item.activeClass"
            @click="$emit('itemclick', item.link)">
            {{ item.label }}
            <b-badge
              v-if="item.badge && item.badge.value"
              pill
              :variant="item.badge.variant">
              {{ item.badge.value }}
            </b-badge>
          </b-nav-item>
          <li
            v-if="index !== sideNavItems.length"
            role="seperator"
            class="divider">
          </li>
        </b-nav>
      </div>

      <div class="d-flex align-items-center justify-content-between my-2 px-2">
        <label class="mr-1 mb-0 toggle-label text-secondary">
          <strong>Activate dark mode</strong>
        </label>
        <no-ssr>
          <toggle-button
            :value="dark"
            :labels="true"
            class="mb-0"
            @change="toggleDarkMode">
          </toggle-button>
        </no-ssr> 
      </div>

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

<script>
import 'vue-awesome/icons/times'
import isEmpty from 'lodash/isEmpty'
import { currentMicrositeNavItems } from '@/mixins/currentMicrositeNavItems'
import localConfig from '@/local.config'

export default {
  mixins: [ currentMicrositeNavItems ],

  data () {
    return {
      localConfig: localConfig
    }
  },

  props: {
    value: {
      type: Boolean,
      default: false
    },
    navItems: {
      type: Object,
      default: () => ({})
    },
    fixed: {
      type: Boolean,
      default: false
    },
    dark: {
      type: Boolean,
      default: false
    }
  },

  computed: {
    currentUser () {
      return this.$store.state.currentUser
    },

    loggedIn () {
      return !isEmpty(this.currentUser)
    },

    sideNavClass () {
      return {
        'side-nav': true,
        'show': this.value,
        'side-nav-dark': this.dark,
        'side-nav-fixed': this.fixed
      }
    },

    sideNavItems () {
      const items = JSON.parse(JSON.stringify(this.navItems))
      const canBuild = (
        this.loggedIn &&
        (this.currentUser.admin || !localConfig.disableProjectBuilder)
      )

      // Microsite nav items
      if (this.currentMicrositeNavItems.length) {
        items[''] = this.currentMicrositeNavItems
      }

      // Project admin
      if (canBuild) {
        items['Projects'] = [
          {
            label: 'New Project',
            link: {
              name: 'admin-project-new'
            }
          },
          {
            label: 'Open Project',
            link: {
              name: 'admin-project'
            }
          }
        ]
      }

      // Site/collection admin
      if (this.currentUser.admin) {
        items['Admin'] = [
          {
            label: 'Dashboard',
            exact: true,
            link: {
              name: 'admin-site'
            }
          },
          {
            label: 'Project Templates',
            link: {
              name: 'admin-template'
            }
          },
          {
            label: 'Collections',
            link: {
              name: 'admin-collection'
            }
          },
          {
            label: 'User Management',
            link: {
              name: 'admin-site-users'
            }
          },
          {
            label: 'Announcements',
            link: {
              name: 'admin-site-announcements'
            }
          },
          {
            label: 'Results',
            link: {
              name: 'admin-site-results'
            }
          },
          {
            label: 'Background Tasks',
            link: {
              name: 'admin-site-jobs'
            }
          }
        ]
      }
      return items
    }
  },

  methods: {
    /**
     * Toggle dark mode.
     */
    toggleDarkMode () {
      this.$cookies.set('dark-mode', !this.$store.state.darkMode)
      this.$store.dispatch('TOGGLE_DARK_MODE')
    },

    /**
     * Restrict body content to avoid multiple scroll bars.
     */
    restrictBody () {
      const sidebar = this.$refs.sidebar
      let height = '100%'
      let overflow = 'initial'
      if (
        typeof sidebar !== 'undefined' &&
        sidebar.classList.contains('show') &&
        window.innerWidth < 576
      ) {
        height = '100vh'
        overflow = 'hidden'
      }
      document.querySelector('body').style.height = height
      document.querySelector('body').style.overflow = overflow
    }
  },

  watch: {
    value () {
      setTimeout(() => {
        this.restrictBody()
      }, 350)
    }
  },

  mounted () {
    window.addEventListener('resize', this.restrictBody)
  },

  destroyed () {
    window.removeEventListener('resize', this.restrictBody)
  }
}
</script>

<style lang="scss">
.side-nav {
  display: block;
  white-space: nowrap;
  background-size: cover;
  background-position: center center;
  background: $gray-100;
  max-height: 100%;
  height: 100%;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: $zindex-modal;
  min-width: 0;
  width: 0;
  transition: all 350ms ease-out;

  @include media-breakpoint-up(sm) {
    position: relative;

    &.side-nav-fixed {
      position: fixed;
    }
  }

  .btn {
    text-transform: uppercase;
    font-size: $font-size-sm;
    color: inherit;
    cursor: pointer;

    svg {
      margin-bottom: 2px;
    }

    @include hover-focus {
      text-decoration: none;
    }
  }

  &.show {
    min-width: 100%;
    width: 100%;
    border-right: 1px solid $gray-200;
    white-space: normal;
    word-wrap: break-word;

    @include media-breakpoint-up(sm) {
      min-width: $sidebar-width;
      width: $sidebar-width;
    }

    .header {
      opacity: 1;
    }
  }

  h4 {
    color: $gray-600;
    text-transform: uppercase;
    margin: 0;
    padding: .75rem 1.25rem;
    font-size: $font-size-sm;
    font-family: inherit;
  }

  .header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    top: 0;
    z-index: 2;
    height: $top-navbar-height;
    min-height: $top-navbar-height;
    border-bottom: 1px solid $gray-300;
    background: $gray-100;
    opacity: 0;
    transition: opacity 200ms;
  }

  #side-nav-items {
    height: calc(100vh - #{$top-navbar-height});
    overflow-y: auto;
    right: 0;
    position: absolute;
    width: 100%;

    @include media-breakpoint-up(sm) {
      width: $sidebar-width;
    }
  }

  .nav-item {
    font-size: $font-size-sm;
    display: flex;
    margin: 0;
    letter-spacing: 0.8px;
    border: none;
    background-color: transparent;
    padding: 0rem;

    .nav-link {
      padding: 0.5rem 1.25rem;
      width: 100%;
      color: inherit;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;

      &:hover {
        text-decoration: none;
        background-color: rgba($gray-600, 0.2);
      }

      &.active:not(.active-unstyled) {
        color: $blue;
      }
    }
  }

  ul {
    display: block;
  }

  .divider {
    height: 0;
    margin: .5rem 0;
    overflow: hidden;
    border-bottom: 1px solid $gray-200;
  }

  &.side-nav-dark {
    color: $white;
    background: $gray-1000;
    border-color: $gray-900;

    .header {
      background: $gray-1000;
      border-color: $gray-800;
    }

    .divider {
      border-color: $gray-900;
    }
  }
}
</style>
components/navbars/Top.vue0100777000000000000000000002742413763676613013153 0ustar00<template>
  <b-navbar
    id="top-navbar"
    :variant="navbarVariant"
    :type="navbarType"
    :fixed="fixedTop ? 'top': null">

    <b-btn
      variant="outline-dark"
      class="px-2 border-top-0 border-left-0"
      @click="$emit('menuclick')">
      <icon name="bars" class="mr-1"></icon>
      <p class="mb-0">Menu</p>
    </b-btn>

    <span class="top-navbar-left">
      <b-link
        v-if="navbarBrand"
        class="navbar-brand d-none d-lg-block ml-1 mr-2"
        @click="onNavbarBrandClick">
        <span>{{ navbarBrand }}</span>
      </b-link>

      <!-- Main menu -->
      <b-navbar-nav class="main-nav-menu d-none d-xl-flex">
        <b-nav-item
          v-for="(item, index) in currentMicrositeNavItems"
          :key="index"
          exact
          :to="item.external ? '' : item.link"
          :href="item.external ? item.link : ''"
          @click="$emit('itemclick', item.link)">
          {{ item.label }}
        </b-nav-item>
      </b-navbar-nav>
    </span>

    <b-navbar-nav right class="top-navbar-right" v-if="loggedIn">

      <slot name="right"></slot>

      <!-- Docs -->
      <b-navbar-nav
        v-if="showHelp && localConfig.docs">
        <b-nav-item
          class="px-1"
          :href="localConfig.docs"
          target="_blank">
          <span class="d-none d-md-block">Go to docs</span>
          <icon
            name="question-circle"
            class="d-md-none"
            scale="1.2">
          </icon>
        </b-nav-item>
      </b-navbar-nav>

      <!-- Announcements -->
      <announcements></announcements>

      <!-- User menu -->
      <b-nav-item-dropdown
        right
        no-caret
        id="user-menu"
        class="pr-2 pl-1">
        <div
          class="d-flex flex-row align-items-center"
          slot="button-content">
          <small-avatar
            extra-small
            class="mr-1"
            :gravatar="currentUser.name"
            :info="currentUser.info">
          </small-avatar>
          <span class="d-none d-md-block mr-1">{{ currentUser.name }}</span>
          <icon name="caret-down"></icon>
        </div>

        <!-- Profile/settings -->
        <b-dropdown-item
          :to="{
            name: 'account-name',
            params: {
              name: currentUser.name
            }
          }">Profile
        </b-dropdown-item>
        <b-dropdown-item
          :to="{
            name: 'account-name-settings-profile',
            params: {
              name: currentUser.name
            }
          }">Settings
        </b-dropdown-item>

        <div role="separator" class="dropdown-divider"></div>
        <b-dropdown-item v-on:click="signout">Sign Out</b-dropdown-item>
      </b-nav-item-dropdown>
    </b-navbar-nav>

    <!-- Sign in/sign up -->
    <b-navbar-nav right class="top-navbar-right" v-else>
      <b-btn
        variant="outline-dark"
        class="px-2 border-0"
        :to="{
          name: 'account-signin',
          query: {
            next: $route.path
          }
        }">
        <p class="mb-0">Sign in</p>
      </b-btn>
      <b-btn
        :variant="navbarVariant === 'transparent' ? 'outline-dark' : 'success'"
        class="px-2 border-0"
        :to="{
          name: 'account-register'
        }">
        <p class="mb-0">Sign up</p>
      </b-btn>
    </b-navbar-nav>
  </b-navbar>
</template>

<script>
import 'vue-awesome/icons/question-circle'
import 'vue-awesome/icons/bars'
import 'vue-awesome/icons/caret-down'
import throttle from 'lodash/throttle'
import isEmpty from 'lodash/isEmpty'
import { currentMicrositeNavItems } from '@/mixins/currentMicrositeNavItems'
import SmallAvatar from '@/components/avatars/Small'
import localConfig from '@/local.config'
import Announcements from '@/components/lists/Announcements'

export default {
  mixins: [ currentMicrositeNavItems ],

  data () {
    return {
      localConfig: localConfig,
      navbarVariant: this.transparent ? 'transparent' : null
    }
  },

  props: {
    fixedTop: {
      type: Boolean,
      default: false
    },
    navbarBrand: {
      type: String,
      required: false
    },
    transparent: {
      type: Boolean,
      default: false
    },
    showHelp: {
      type: Boolean,
      default: false
    },
    dark: {
      type: Boolean,
      default: false
    }
  },

  components: {
    Announcements,
    SmallAvatar
  },

  computed: {
    currentUser () {
      return this.$store.state.currentUser
    },

    loggedIn () {
      return !isEmpty(this.currentUser)
    },

    navbarType () {
      return this.dark ? 'dark' : 'light'
    }
  },

  methods: {
    /**
     * Sign the user out.
     */
    signout () {
      this.$store.dispatch('LOGOUT', this.$axios, this.$flarum)
    },

    /**
     * Handle click of the navbar brand.
     */
    onNavbarBrandClick () {
      const micrositeShortName = this.$route.path.indexOf('/collection') === 0
        ? this.$route.path.replace(/^(\/collection\/)/, '').split('/')[0]
        : null
      let link = {
        name: 'index'
      }
      if (micrositeShortName) {
        link = {
          name: 'collection-short_name',
          params: {
            short_name: micrositeShortName
          }
        }
      }
      this.$router.push(link)
      this.$emit('itemclick', link)
    },

    /**
     * Remove navbar transparency.
     *
     * Applies if over an opaque-navbar element, or if on an extra-small screen.
     */
    styleNavbar: throttle(
      function () {
        const ieScrollTop = document.documentElement.scrollTop
        const scrollTop = document.body.scrollTop === 0
          ? ieScrollTop
          : document.body.scrollTop
        const bounds = []
        const nodes = document.getElementsByClassName('opaque-navbar')
        for (let i = 0; i < nodes.length; i++) {
          bounds.push({
            top: nodes[i].offsetTop,
            bottom: nodes[i].offsetTop + nodes[i].offsetHeight
          })
        }

        for (let b of bounds) {
          if (
            scrollTop >= b.top - 25 &&
            scrollTop <= b.bottom &&
            this.transparent
          ) {
            this.navbarVariant = null
            return
          }
        }

        if (window.innerWidth < 576) {
          this.navbarVariant = null
          return
        }

        if (this.transparent) {
          this.navbarVariant = 'transparent'
        }
      },
      10
    )
  },

  mounted () {
    this.styleNavbar()
    window.addEventListener('scroll', this.styleNavbar)
    window.addEventListener('resize', this.styleNavbar)
  },

  destroyed () {
    window.removeEventListener('scroll', this.styleNavbar)
    window.addEventListener('resize', this.styleNavbar)
  }
}
</script>

<style lang="scss">
#top-navbar {
  padding: 0;
  display: flex;
  flex-direction: row;
  align-self: center;
  justify-content: space-between;
  font-size: $font-size-sm;
  min-height: $top-navbar-height;
  height: $top-navbar-height;
  width: 100%;
  z-index: $zindex-fixed;
  transition: background-color 200ms;

  .btn-outline-dark {
    &:hover,
    &:focus,
    &.active {
      color: inherit;
      background-color: inherit;
    }
  }

  &.navbar-light {
    background-color: $white;

    .btn {
      border-color: $gray-300;
    }
  }

  &.navbar-dark {
    background-color: $gray-1000;

    .btn {
      border-right: 1px solid $gray-1000;
      border-bottom: 1px solid $gray-800;
    }

    .top-navbar-left,
    .top-navbar-right {
      border-bottom: 1px solid $gray-800;
    }
  }

  &.navbar-dark,
  &.bg-transparent {
    .dropdown-menu {
      background-color: rgba($black, 0.75);
      color: $white;

      .dropdown-divider {
        background-color: rgba($white, 0.35);
      }

      .dropdown-item {
        color: $white;
        background: transparent;
      }
    }

    .navbar-brand,
    .nav-link {
      color: $white;
    }

    .btn {
      cursor: pointer;
      color: $white;

      @include hover-focus {
        color: $white;
        background: transparent;
      }
    }
  }

  .btn {
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: row;
    font-size: $font-size-sm;
    font-weight: 600;
    text-transform: uppercase;
  }

  &.bg-transparent {
    background-color: transparent;

    .top-navbar-left,
    .top-navbar-right {
      border-color: transparent;
    }

    .btn {
      border-color: transparent;

      @include hover-focus {
        border-color: transparent;
      }
    }
  }

  .top-navbar-left,
  .top-navbar-right {
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px solid $gray-300;
  }

  .top-navbar-left {
    flex: 1 1 auto;
    padding: 0 0.75rem;
  }

  .navbar-brand {
    margin: 0;
    letter-spacing: 1.15px;
    font-family: $font-family-base;
    font-weight: 600;
    text-transform: uppercase;
    display: none;

    @include media-breakpoint-up(sm) {
      display: block;
    }
  }

  .nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
  }

  .nav-item {
    text-transform: none;
    font-weight: 500;

    svg {
      display: flex;
    }
  }

  #user-menu {
    font-weight: 600;
    text-transform: uppercase;
    padding: 0 0.75rem;
    color: inherit;
    display: inline-block;

    .nav-link {
      letter-spacing: 0.4px;
    }

    @include media-breakpoint-up(sm) {
      display: block;
      padding: 0 1.25rem;
    }

    &:not(.dropdown) {
      display: flex;
      justify-content: center;
      flex-direction: column;
      padding: 0rem 1.25rem;
      border-bottom: 1px solid $gray-300;
      height: 100%;
      white-space: nowrap;
    }
  }

  .main-nav-menu {
    display: flex;
    flex-direction: row;

    &:first-child {
      margin-right: auto;
    }

    .nav-item {
      font-size: $font-size-sm;
      margin-left: 1rem;
      margin-right: 1rem;
      border-bottom: none;
      position: relative;
      text-transform: none;
      padding: 0;

      &:not(.dropdown):not(.nav-button) .nav-link:after {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        content: '';
        background-color: $red;
        opacity: 0;
      }

      .nav-link {
        font-weight: 500;
        letter-spacing: 0.8px;
        transition: color 250ms;
        padding: .25rem 0;
        transition: color 200ms;
        padding: .35rem 0;

        &:after {
          content: none;
        }

        &:focus,
        &:hover,
        &.active {
          color: $red;
        }

        &:not(.dropdown-toggle) {
          &:after {
            transition: opacity 200ms, transform 200ms;
            transform: translateY(10px);
          }

          &.active:after,
          &:hover:after,
          &:focus:after {
            opacity: 1;
            transform: none;
          }
        }
      }

      &.nav-button {
        padding: 0 0.5rem;
        transition: background-color 250ms;
        margin-left: 1rem;

        @include media-breakpoint-up(lg) {
          border: 1px solid $white;
          border-radius: 2.5rem;
        }
      }
    }
  }

  .dropdown-menu {
    position: absolute;
    border-radius: 0;
    right: 1rem;
    left: auto;
    text-transform: none;
  }

  .dropdown-item.active {
    color: initial;
    background-color: $white;
  }

  .dropdown-divider {
    margin: 0.5rem 0;
  }
}
</style>
components/presenters/0040777000000000000000000000000013763676613012415 5ustar00components/presenters/IIIFAnnotation.vue0100777000000000000000000001520613763676613015715 0ustar00<template>
  <div class="iiif-annotation-presenter">

    <libcrowds-viewer
      v-if="showViewer"
      :task-opts="taskOpts"
      :sidebar-buttons="sidebarButtons"
      :toolbar-buttons="toolbarButtons"
      :browsable="false"
      :confirm-on-submit="false"
      :selections-editable="false"
      :before-submit="checkSubmission"
      disable-modals
      @submit="onSubmit"
      @toolbarbtnclick="onToolbarBtnClick">
      <b-btn-group slot="footer" class="mb-1 d-flex">
        <b-btn
          v-if="extraTagLink.length"
          class="m-0"
          size="sm"
          variant="link"
          @click="$emit('tags')">
          {{ extraTagLink }}
        </b-btn>
        <b-btn
          size="sm"
          class="m-0"
          variant="link"
          @click="$emit('reject')"
          v-html="rejectButtonText">
        </b-btn>
      </b-btn-group>
    </libcrowds-viewer>

    <p class="mb-0 text-white d-flex align-items-center
      justify-content-center h-100" v-else>
      Loading...
    </p>

  </div>
</template>

<script>
import marked from 'marked'
import pluralize from 'pluralize'

export default {
  props: {
    project: {
      type: Object,
      required: true
    },
    collection: {
      type: Object,
      required: true
    },
    task: {
      type: Object,
      required: true
    },
    projectTemplate: {
      type: Object,
      required: true,
      validator: this.projectTemplateIsValid
    }
  },

  computed: {
    currentUser () {
      return this.$store.state.currentUser
    },

    taskOpts () {
      const opts = Object.assign(this.projectTemplate.task, this.task.info)

      // Build the form for transcribe tasks
      if (opts.hasOwnProperty('fields_schema')) {
        opts['form'] = {
          model: opts.fields_schema.reduce((obj, item) => {
            obj[item.model] = ''
            return obj
          }, {}),
          schema: {
            fields: opts.fields_schema
          }
        }
      }

      // Add the task ID
      opts.id = this.task.id

      // LibCrowds viewer currently requires an Array of options
      return [opts]
    },

    sidebarButtons () {
      return {
        note: marked(this.collection.info.presenter_options.note_button),
        submit: marked(this.collection.info.presenter_options.submit_button)
      }
    },

    extraTagLink () {
      return this.collection.info.presenter_options.extra_tag_link
    },

    rejectButtonText () {
      const customText = this.collection.info.presenter_options.reject_button
      return typeof customText === 'undefined'
        ? 'Reject'
        : marked(customText)
    },

    toolbarButtons () {
      return {
        browse: false,
        'share-alt': 'Share',
        'tags': 'Add Tags'
      }
    },

    showViewer () {
      return (
        this.projectTemplateIsValid(this.projectTemplate) &&
        this.taskOpts.length
      )
    }
  },

  methods: {
    /**
     * Submit an answer.
     * @param {Object} taskData
     *   The task data.
     */
    onSubmit (taskData) {
      this.$emit('submit', this.project.id, taskData.id, taskData.annotations)
    },

    /**
     * Handle a toolbar button click.
     * @param {String} key
     *   The button key
     */
    onToolbarBtnClick (key) {
      if (key === 'share-alt') {
        this.$emit('share')
      } else if (key === 'help') {
        this.$emit('help')
      } else if (key === 'info') {
        this.$emit('info')
      } else if (key === 'tags') {
        this.$emit('tags')
      }
    },

    /**
     * Check if a project template is valid.
     * @param {Object} tmpl
     *   The project template.
     */
    projectTemplateIsValid (tmpl) {
      return (
        tmpl.hasOwnProperty('task') &&
        tmpl.task.hasOwnProperty('mode') &&
        tmpl.task.hasOwnProperty('objective') &&
        tmpl.task.hasOwnProperty('guidance')
      )
    },

    /**
     * Check the submission before processing.
     *
     * This can be used to make sure we have n annotations. For now it is
     * set to 1 by default but could be made into a config option in future.
     */
    checkSubmission (taskData) {
      const nAnnotations = taskData.annotations.filter(annotation => {
        return annotation.purpose !== 'commenting'
      }).length
      const mode = taskData.mode
      const tag = taskData.tag
      const nRequired = 1

      const showConfirm = (htmlMessage) => {
        return new Promise((resolve, reject) => {
          this.$swal({
            title: 'Are you sure?',
            html: htmlMessage,
            type: 'question',
            showCancelButton: true,
            reverseButtons: true,
            confirmButtonText: 'Yes, save and continue',
            cancelButtonText: 'No, go back'
          }).then(result => {
            if (result.value) {
              resolve()
            } else if (result.dismiss) {
              reject(new Error('Submission cancelled'))
            }
            resolve()
          })
        }).catch(err => {
          if (typeof err === 'object' && err.hasOwnProperty('dismiss')) {
            this.$nuxt.error(err)
          }
        })
      }

      return new Promise((resolve, reject) => {
        if (mode === 'select' && nAnnotations < nRequired) {
          return showConfirm(
            `Each image usually contains at least ${nRequired}
            ${pluralize(tag, nRequired)}.
            <br>
            You have outlined ${nAnnotations}.<br>
            Are you sure you want to save this answer?`
          ).then(() => {
            resolve()
          }).catch(err => {
            console.info(err)
          })
        } else if (mode === 'transcribe' && nAnnotations < nRequired) {
          return showConfirm(
            `You have not added any transcriptions.<br>
            Are you sure you want to submit this answer?`
          ).then(() => {
            resolve()
          }).catch(err => {
            console.info(err)
          })
        } else {
          resolve()
        }
      })
    }
  }
}
</script>

<style lang="scss">
.iiif-annotation-presenter {
  width: 100%;
  height: 100%;
  background-color: $black;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .lv-sidebar {
    color: $gray-100;
  }

  .lv-sidebar-header {
    padding-top: 2rem;
  }

  .lv-sidebar-footer {
    p {
      margin-bottom: 0;
    }
  }

  .lv-modal .lv-modal-body {
    img {
      max-width: 100%;
    }
  }
}
</style>
components/presenters/Z3950.vue0100777000000000000000000004415513763676613013701 0ustar00<template>
  <div id="z3950-presenter">

    <!-- Toolbar buttons -->
    <b-row class="mb-2 text-right">
      <b-col>
        <b-btn-group>
          <b-btn
            class="d-flex align-items-center"
            variant="outline-primary"
            @click="$emit('help')">
            <icon name="question-circle" class="mr-1"></icon>
            <small>Help</small>
          </b-btn>
          <b-btn
            class="d-flex align-items-center"
            variant="outline-primary"
            @click="$emit('share')">
            <icon name="share-alt" class="mr-1"></icon>
            <small>Share</small>
          </b-btn>
          <b-btn
            class="d-flex align-items-center"
            variant="outline-primary"
            @click="$emit('tags')">
            <icon name="tags" class="mr-1"></icon>
            <small>Add Tags</small>
          </b-btn>
        </b-btn-group>
      </b-col>
    </b-row>

    <b-row>
      <b-col lg="6">

        <!-- Image -->
        <b-card
          no-body
          :bg-variant="darkMode ? 'dark' : null"
          :text-variant="darkMode ? 'white' : null"
          v-if="task" >
          <img :src="task.info.url" class="img-fluid">
        </b-card>

        <b-btn
          v-if="extraTagLink.length"
          variant="link"
          @click="$emit('tags')">
          {{ extraTagLink }}
        </b-btn>

      </b-col>
      <b-col lg="6" class="mt-3 mt-lg-0">
        <b-card
          id="answer-card"
          no-body
          :bg-variant="darkMode ? 'dark' : null"
          :text-variant="darkMode ? 'white' : null">
          <!-- Alert -->
          <b-card-body
            class="pb-0"
            v-if="alert"
            :bg-variant="darkMode ? 'dark' : null"
            :text-variant="darkMode ? 'white' : null">
            <b-alert
              show
              :variant="alert.type"
              :key="alert.msg"
              class="mb-0">
              {{ alert.msg }}
            </b-alert>
          </b-card-body>

          <!-- Header -->
          <template slot="header">
            <div class="d-flex justify-content-between align-items-center">
              <h6 class="mb-0">{{ header }}</h6>
              <b-btn
                v-if="searchQuery || selectedRecord"
                variant="warning"
                size="sm"
                class="float-right"
                @click="reset">
                Search Again
              </b-btn>
            </div>
          </template>

          <!-- Search Form -->
          <b-card-body
            v-show="stage == 'search'"
            :bg-variant="darkMode ? 'dark' : null"
            :text-variant="darkMode ? 'white' : null">
            <vue-form-generator
              ref="searchform"
              class="form-container"
              :class="darkMode ? 'form-dark' : null"
              :schema="form.schema"
              :model="form.model">
            </vue-form-generator>
          </b-card-body>

          <!-- Search Results -->
          <div id="search-results" v-if="stage == 'results'">
            <b-list-group>
              <b-list-group-item
                v-for="(record, index) in searchResults"
                :key="`result-${index}`"
                class="p-2">
                <div class="d-flex flex-row w-100">
                  <div class="w-75">
                    <h5 class="mb-0">
                      <a :href="record.externalLink" target="_blank">
                        {{ record.title }}
                      </a>
                    </h5>
                    <p class="mb-0">{{ record.author }}</p>
                    <p class="mb-0">
                      <small>{{ record.physdesc }}</small>
                    </p>
                    <p class="mb-0">
                      <small>
                        {{ record.publisher }}{{ record.pubyear }}
                      </small>
                    </p>
                  </div>
                  <div class="w-25 d-flex flex-column justify-content-center">
                    <div class="result-buttons">
                      <b-btn
                        variant="success"
                        size="sm"
                        @click="selectedRecord = record">
                        Select
                      </b-btn>
                    </div>
                  </div>
                </div>
              </b-list-group-item>
            </b-list-group>
            <no-ssr>
              <infinite-loading
                ref="infiniteload"
                @infinite="onInfiniteLoad">
                <span slot="no-results">No results</span>
                <span slot="no-more">No more results</span>
              </infinite-loading>
            </no-ssr>
          </div>

          <!-- Reference Form -->
          <b-card-body
            v-show="stage == 'submit'"
            :bg-variant="darkMode ? 'dark' : null"
            :text-variant="darkMode ? 'white' : null">
            <div v-if="selectedRecord">
              <h5 class="mb-1">{{ selectedRecord.title }}</h5>
              <p class="mb-0">{{ selectedRecord.author }}</p>
              <p class="mb-0">
                <small>{{ selectedRecord.physdesc }}</small>
              </p>
              <p class="mb-2">
                <small>
                  {{ selectedRecord.publisher }}{{ selectedRecord.pubyear }}
                </small>
              </p>
            </div>
            <vue-form-generator
              ref="smform"
              class="form-container"
              :schema="referenceForm.schema"
              :model="referenceForm.model">
            </vue-form-generator>
          </b-card-body>

          <!-- Footer -->
          <template slot="footer">
            <div id="footer-buttons">
              <b-btn
                v-b-toggle.collapsecomment
                variant="dark"
                v-html="noteButtonText">
              </b-btn>
              <b-btn
                variant="dark"
                @click="$emit('reject')"
                v-html="rejectButtonText">
              </b-btn>
              <b-btn
                v-if="stage !== 'results'"
                variant="success"
                @click="onSubmit"
                v-html="submitButtonText">
              </b-btn>
            </div>
            <b-collapse id="collapsecomment" class="mt-1">
              <textarea
                class="form-control"
                ref="comments"
                rows="3"
                placeholder="Enter your comment...">
              </textarea>
            </b-collapse>
          </template>

        </b-card>
      </b-col>
    </b-row>

  </div>
</template>

<script>
import 'vue-awesome/icons/question-circle'
import 'vue-awesome/icons/info-circle'
import 'vue-awesome/icons/share-alt'
import 'vue-awesome/icons/tags'
import marked from 'marked'
import capitalize from 'capitalize'
import isEmpty from 'lodash/isEmpty'
import mapValues from 'lodash/mapValues'
import SocialMediaButtons from '@/components/buttons/SocialMedia'
import VueFormGenerator from 'vue-form-generator'

export default {
  data () {
    return {
      header: 'What is this item?',
      tutorialModalId: 'tutorial-modal',
      searchQuery: null,
      searchResults: [],
      selectedRecord: null,
      alert: null,
      searchForm: {
        model: {
          'title': '',
          'author': '',
          'year': '',
          'isbn': ''
        },
        schema: {
          fields: [
            {
              model: 'title',
              label: 'Title',
              type: 'input',
              inputType: 'text',
              placeholder: 'Search by title'
            },
            {
              model: 'author',
              label: 'Author',
              type: 'input',
              inputType: 'text',
              placeholder: 'Search by author'
            },
            {
              model: 'year',
              label: 'Year',
              type: 'input',
              inputType: 'text',
              placeholder: 'Search by year'
            },
            {
              model: 'isbn',
              label: 'ISBN',
              type: 'input',
              inputType: 'text',
              placeholder: 'Search by ISBN'
            }
          ]
        }
      },
      referenceForm: {
        model: {
          'reference': null
        },
        schema: {
          fields: [
            {
              model: 'reference',
              label: 'Reference',
              type: 'input',
              inputType: 'text',
              placeholder: 'Enter the reference',
              required: true,
              validator: VueFormGenerator.validators.string
            }
          ]
        }
      }
    }
  },

  props: {
    project: {
      type: Object,
      required: true
    },
    task: {
      type: Object,
      required: true
    },
    projectTemplate: {
      type: Object,
      required: true
    }
  },

  components: {
    SocialMediaButtons
  },

  computed: {
    currentUser () {
      return this.$store.state.currentUser
    },

    buttons () {
      return {
        like: !isEmpty(this.currentUser)
      }
    },

    collection () {
      return this.$store.state.currentCollection
    },

    shareText () {
      return marked(this.collection.info.presenter_options.share_text)
    },

    rejectButtonText () {
      const customText = this.collection.info.presenter_options.reject_button
      return typeof customText === 'undefined'
        ? 'Skip / Not Found'
        : marked(customText)
    },

    noteButtonText () {
      return marked(this.collection.info.presenter_options.note_button)
    },

    submitButtonText () {
      if (this.stage === 'submit') {
        return marked(this.collection.info.presenter_options.submit_button)
      }
      return capitalize(this.stage)
    },

    extraTagLink () {
      return this.collection.info.presenter_options.extra_tag_link
    },

    stage () {
      if (!this.searchQuery && !this.selectedRecord) {
        return 'search'
      } else if (this.searchQuery && !this.selectedRecord) {
        return 'results'
      } else if (this.selectedRecord) {
        return 'submit'
      }
    },

    form () {
      if (!this.searchQuery && !this.selectedRecord) {
        return this.searchForm
      } else {
        return this.referenceForm
      }
    },

    database () {
      if (this.projectTemplate.task) {
        return this.projectTemplate.task.database
      }
    },

    institutions () {
      if (this.projectTemplate.task) {
        return this.projectTemplate.task.institutions
      }
    }
  },

  methods: {
    /**
     * Handler to infinitely load results.
     * @param {Object} $state
     *   The vue-inifinite-loading state.
     */
    async onInfiniteLoad ($state) {
      const endpoint = `/z3950/search/${this.database}/json`
      try {
        const results = await this.$axios.$get(endpoint, {
          params: {
            query: this.searchQuery,
            position: this.searchResults.length + 1
          }
        })

        if (!results.data.length) {
          $state.complete()
          this.$emit('complete')
          return
        }

        const processedResults = this.processResults(results.data)
        this.searchResults = this.searchResults.concat(processedResults)
        $state.loaded()
      } catch (err) {
        this.$nuxt.error(err)
      }
    },

    /**
     * Build a query from the form data.
     */
    buildQuery () {
      let model = this.searchForm.model
      this.searchQuery = `(1,1183)="eng"` +
        `and(1,4)="${model.title}"` +
        `and(1,1003)="${model.author}"` +
        `and(1,31)="${model.year}"` +
        `and(1,7)="${model.isbn.trim().replace(/-/g, '')}"`
      if (Array.isArray(this.institutions)) {
        this.searchQuery += `and(1,6119)="(${this.institutions.join(' or ')})"`
      }
    },

    /**
     * Parse a subfield.
     * @param {Object} subfield
     *  The subfield.
     * @param {Array} linkedFields
     *  Any linked fields.
     * @param {Array} codes
     *  The subfield codes.
     */
    parseSubfield (subfield, linkedFields, codes) {
      let res = ''
      for (let code in subfield) {
        if (code === '6' && subfield[code].indexOf('880') === 0) {
          let linkIndex = parseInt(subfield[code].split('-')[1]) - 1
          res += linkedFields[linkIndex]['880']['subfields'].map((sf) => {
            return this.parseSubfield(sf)
          }).join(' ') + ' '
        } else if (code !== '6') {
          if (!codes || codes.indexOf(code) > -1) {
            res = subfield[code] + ' '
          }
        }
      }
      return res
    },

    /**
     * Return a field or concatenated subfields.
     * @param {Object} result
     *  The result.
     * @param {Number} tag
     *  The field tag.
     * @param {Array} codes
     *  The subfield codes.
     */
    getField (result, tag, codes = null) {
      let res = ''

      // Store linked subfields for future reference
      let linkedFields = result.fields.filter((f) => f.hasOwnProperty('880'))

      for (let field of result.fields) {
        if (!field.hasOwnProperty(tag)) {
          continue
        }

        // Header field
        if (String(tag).match(/00\d/i)) {
          return field[tag]
        }

        // Concatenate chosen subfields
        for (let subfield of field[tag]['subfields']) {
          res += this.parseSubfield(subfield, linkedFields, codes)
        }
      }
      return res
    },

    /**
     * Process search results
     * @param {Array} results
     *  The search results.
     */
    processResults (results) {
      return results.map(r => {
        let worldcatBase = 'https://www.worldcat.org/title/apis/oclc/'
        let controlNumber = this.getField(r, '001').replace(/^\D+/g, '')
        return {
          controlNumber: controlNumber,
          externalLink: `${worldcatBase}${controlNumber}`,
          title: this.getField(r, 245, ['a', 'b', 'c']),
          author: (
            this.getField(r, 100) ||
            this.getField(r, 110) ||
            this.getField(r, 111)
          ),
          physdesc: this.getField(r, 300),
          publisher: (
            this.getField(r, 260, ['b']) +
            this.getField(r, 264, ['b'])
          ),
          pubyear: (
            this.getField(r, 260, ['c']) +
            this.getField(r, 264, ['c'])
          ),
          full: r
        }
      })
    },

    /**
     * Handle the skip button click.
     */
    onSkip () {
      this.$swal({
        title: 'Skip Task',
        text: 'Are you sure you want to skip this task?',
        type: 'warning',
        reverseButtons: true,
        showCancelButton: true
      }).then(result => {
        if (result) {
          this.submit({
            control_number: '',
            reference: '',
            comments: this.$refs.comments.value
          })
        }
      }).catch(err => {
        if (typeof err === 'object' && err.hasOwnProperty('dismiss')) {
          this.$nuxt.error(err)
        }
      })
    },

    /**
     * Handle the submit button click.
     */
    onSubmit () {
      this.alert = null
      if (this.stage === 'search') {
        this.buildQuery()
      } else if (this.stage === 'submit' && this.$refs.smform.validate()) {
        this.submit({
          control_number: this.selectedRecord.controlNumber,
          reference: this.referenceForm.model.reference,
          form: this.searchForm.model,
          comments: this.$refs.comments.value
        })
      }
    },

    /**
     * Submit a task run.
     * @param {Object} answer
     *   The answer.
     */
    submit (answer) {
      this.$emit('submit', this.project.id, this.task.id, answer)
      this.reset()
    },

    /**
     * Handle key up.
     * @param {Object} evt
     *   The event.
     */
    handleKeyup (evt) {
      if (evt.keyCode === 13) {
        this.onSubmit()
      }
    },

    /**
     * Reset the task.
     */
    reset () {
      this.searchQuery = null
      this.searchResults = []
      this.selectedRecord = null
      this.alert = null
      this.searchForm.model = mapValues(this.searchForm.model, () => '')
      this.referenceForm.model.reference = null
      this.$refs.comments.value = ''
    },

    /**
     * Markdown parser.
     */
    marked
  },

  mounted () {
    this.$refs.searchform.$el.addEventListener('keypress', this.handleKeyup)
    this.$refs.smform.$el.addEventListener('keypress', this.handleKeyup)
  },

  beforeDestroy () {
    this.$refs.searchform.$el.removeEventListener('keypress', this.handleKeyup)
    this.$refs.smform.$el.addEventListener('keypress', this.handleKeyup)
  }
}
</script>

<style lang="scss">
#z3950-presenter {
  div {
    transition: opacity 400ms ease;
  }

  .card {
    h5 {
      font-size: 1rem;
    }
  }

  code {
    font-size: $font-size-sm;
  }

  #share-text {
    text-transform: uppercase;
    font-size: $font-size-sm;
  }

  .list-group {
    overflow: auto;
  }

  .list-group-item {
    display: block;
    border-right: none;
    border-left: none;
    flex-direction: column;
    align-items: flex-start;

    .remove {
      align-self: flex-end;
      background: transparent;
      border: none;
      color: $gray-400;
      padding: 0;
    }

    .result-buttons {
      align-self: flex-end;
      margin-left: auto;
    }
  }

  #footer-buttons {
    display: flex;
    flex-direction: column-reverse;

    p {
      margin-bottom: 0;
    }

    .btn {
      margin: 0.5rem 0 ;
    }

    @include media-breakpoint-up(lg) {
      flex-direction: row;
      justify-content: space-between;

      .btn {
        margin: 0;
      }
    }
  }

  #search-results {
    max-height: 60vh;
    overflow-y: auto;
  }
}
</style>
components/tables/0040777000000000000000000000000013763676613011475 5ustar00components/tables/InfiniteLoading.vue0100777000000000000000000000635413763676613015271 0ustar00<template>
  <div class="infinite-loading-table">
    <b-table
      hover
      striped
      show-empty
      :outlined="outlined"
      :dark="darkMode"
      :items="items"
      :fields="tableFields"
      @sort-changed="onSortChange">

      <template slot="created" slot-scope="row">
        {{ row.item.created | moment('calendar') }}
      </template>

      <template slot="updated" slot-scope="row">
        {{ row.item.updated | moment('calendar') }}
      </template>

      <template slot="last_activity" slot-scope="row">
        {{ row.item.updated | moment('calendar') }}
      </template>

      <template slot="actions" slot-scope="row">
        <b-btn
          v-if="showDetails"
          variant="info"
          size="sm"
          @click="row.toggleDetails">
          {{ row.detailsShowing ? 'Hide' : 'Show' }} Details
        </b-btn>
        <slot name="action" :item="row.item"></slot>
      </template>

      <template slot="row-details" slot-scope="row">
        <b-card
          :bg-variant="darkMode ? 'dark' : null"
          :text-variant="darkMode ? 'white' : null">
          <ul class="list-unstyled">
            <li v-for="(key, index) in Object.keys(row.item)" :key="index">
              <strong>{{ key }}: </strong>{{ row.item[key] }}
            </li>
          </ul>
        </b-card>
      </template>

    </b-table>

    <infinite-load-domain-objects
      ref="infiniteload"
      :domain-object="domainObject"
      v-model="items"
      :search-params="mergedParams"
      :search-keys="searchKeys"
      :search-string="searchString"
      no-more-results="No more results">
    </infinite-load-domain-objects>

  </div>
</template>

<script>
import InfiniteLoadDomainObjects from '@/components/infiniteload/DomainObjects'

export default {
  data () {
    return {
      items: [],
      sortParams: {}
    }
  },

  components: {
    InfiniteLoadDomainObjects
  },

  props: {
    domainObject: {
      type: String,
      required: true
    },
    searchParams: {
      type: Object,
      default: () => ({})
    },
    searchString: {
      type: String,
      default: ''
    },
    searchKeys: {
      type: Array,
      default: () => ([])
    },
    fields: {
      type: Object,
      default: () => ({})
    },
    outlined: {
      type: Boolean,
      default: false
    },
    showDetails: {
      type: Boolean,
      default: false
    }
  },

  computed: {
    tableFields () {
      const fieldsCopy = JSON.parse(JSON.stringify(this.fields))
      if (this.$scopedSlots.action) {
        fieldsCopy.actions = {
          label: 'Actions',
          class: 'text-center'
        }
      }
      return fieldsCopy
    },

    mergedParams () {
      const params = JSON.parse(JSON.stringify(this.searchParams))
      return Object.assign({}, params, this.sortParams)
    }
  },

  methods: {
    /**
     * Handle table sort change.
     */
    onSortChange (value) {
      this.sortParams = {
        orderby: value.sortBy,
        desc: value.sortDesc
      }
    },

    /**
     * Reset the loaded items.
     */
    reset () {
      this.$refs.infiniteload.reset()
    }
  }
}
</script>
components/tables/Templates.vue0100777000000000000000000001317413763676613014162 0ustar00<template>
  <b-table
    responsive
    striped
    hover
    show-empty
    :dark="darkMode"
    :outlined="outlined"
    :items="filteredItems"
    :fields="mergedFields">

    <template slot="actions" slot-scope="row">
      <b-btn
        v-if="showDetails"
        variant="info"
        size="sm"
        @click.stop="row.toggleDetails">
        {{ row.detailsShowing ? 'Hide' : 'Show' }} Details
      </b-btn>
      <slot name="action" :item="row.item"></slot>
    </template>

    <template slot="row-details" slot-scope="row">
      <b-card
        :bg-variant="darkMode ? 'dark' : null"
        :text-variant="darkMode ? 'white' : null">

        <h5>Project Details</h5>
        <ul class="list-unstyled">
          <li
            v-for="(key, index) in getProjectKeys(row.item)"
            :class="getHighlightCls(row.item, key)"
            :key="index">
            <strong>{{ key }}:</strong>
            {{ row.item[key] }}
          </li>
        </ul>

        <h5 class="mt-3">Task Details</h5>
        <ul class="list-unstyled" v-if="row.item.task">
          <li
            v-for="(key, index) in Object.keys(row.item.task)"
            :class="getHighlightCls(row.item, key, 'task')"
            :key="index">
            <strong>{{ key }}:</strong>
            <template v-if="key === 'fields_schema'">
              <ul>
                <li
                  v-for="(field, index) in row.item.task[key]"
                  :key="index">
                  <strong>{{ field.model }}:</strong>
                  <ul>
                    <li
                      v-for="(fieldKey, index) in Object.keys(field)"
                      :key="index">
                      <strong>{{ fieldKey }}:</strong>
                      {{ field[fieldKey] }}
                    </li>
                  </ul>
                </li>
              </ul>
            </template>
            <template v-else-if="key === 'institutions'">
              <ul>
                <li
                  v-for="code in row.item.task[key]"
                  :key="code">
                  {{ code }}
                </li>
              </ul>
            </template>
            <template v-else>
              {{ row.item.task[key] }}
            </template>
          </li>
        </ul>
        <p v-else>None</p>

        <h5 class="mt-3">Analysis Rules</h5>
        <ul class="list-unstyled" v-if="row.item.rules">
          <li
            v-for="(key, index) in Object.keys(row.item.rules)"
            :class="getHighlightCls(row.item, key, 'rules')"
            :key="index">
            <strong>{{ key }}:</strong>
            {{ row.item.rules[key] }}
          </li>
        </ul>
        <p v-else>None</p>
        <h5 class="mt-3">Tutorial</h5>
        <div
          v-if="row.item.tutorial"
          :class="getHighlightCls(row.item, 'tutorial')"
          v-html="marked(row.item.tutorial)">
        </div>
        <p v-else>None</p>

      </b-card>
    </template>
  </b-table>
</template>

<script>
import isEqual from 'lodash/isEqual'
import marked from 'marked'

export default {
  props: {
    templates: {
      type: Array,
      required: true
    },
    fields: {
      type: Object,
      default: () => {
        return {
          name: {
            label: 'Name',
            sortable: true
          }
        }
      }
    },
    showDetails: {
      type: Boolean,
      default: false
    },
    outlined: {
      type: Boolean,
      default: false
    },
    filter: {
      type: String,
      default: null
    },
    filterBy: {
      type: String,
      default: null
    },
    collectionId: {
      type: Number,
      default: null
    }
  },

  computed: {
    mergedFields () {
      const fieldsCopy = JSON.parse(JSON.stringify(this.fields))
      if (this.showDetails || this.$scopedSlots.action) {
        fieldsCopy.actions = {
          label: 'Actions',
          class: 'text-center'
        }
      }
      return fieldsCopy
    },

    filteredItems () {
      let items = this.templates

      if (this.collectionId) {
        items = items.filter(item => {
          return item.category_id === this.collectionId
        })
      }

      if (!this.filter || !this.filterBy) {
        return items
      }

      return items.filter(item => {
        const value = this.filter.toUpperCase()
        const cell = item[this.filterBy]
        return JSON.stringify(cell).toUpperCase().indexOf(value) > -1
      })
    }
  },

  methods: {
    /**
     * Return core project keys.
     * @param {Object} tmpl
     *   The template.
     */
    getProjectKeys (tmpl) {
      const hiddenKeys = [
        'task',
        'rules',
        'tutorial',
        '_original',
        '_showDetails'
      ]
      return Object.keys(tmpl).filter(key => hiddenKeys.indexOf(key) < 0)
    },

    /**
     * Highlight text if the value has changed.
     * @param {Object} tmpl
     *   The template.
     * @param {String} key
     *   The key to check against the original.
     * @param {String} baseKey
     *   The context for checking the key.
     */
    getHighlightCls (tmpl, key, baseKey = null) {
      let changed = false
      if (
        typeof tmpl._original !== 'undefined'
      ) {
        changed = baseKey
          ? !isEqual(tmpl[baseKey][key], tmpl._original[baseKey][key])
          : !isEqual(tmpl[key], tmpl._original[key])
      }
      return {
        'text-success': changed
      }
    },

    /**
     * Markdown processor.
     */
    marked
  }
}
</script>
components/tables/Volumes.vue0100777000000000000000000000653013763676613013654 0ustar00<template>
  <b-table
    responsive
    striped
    hover
    show-empty
    :dark="darkMode"
    :outlined="outlined"
    :items="filteredItems"
    :fields="mergedFields">

    <template slot="name" slot-scope="row">
      <div class="d-flex flex-row align-items-center">
        <small-avatar
          class="mr-1"
          :info="row.item">
        </small-avatar>
        <a :href="row.item.source" target="_blank">
          {{ row.item.name }}
        </a>
      </div>
    </template>

    <template slot="actions" slot-scope="row">
      <b-btn
        v-if="showDetails"
        variant="info"
        size="sm"
        block
        @click="row.toggleDetails">
        {{ row.detailsShowing ? 'Hide' : 'Show' }} Projects
      </b-btn>
      <slot name="action" :item="row.item"></slot>
    </template>

    <template slot="row-details" slot-scope="row">
      <b-card
        :bg-variant="darkMode ? 'dark' : null"
        :text-variant="darkMode ? 'white' : null">
        <h5>Projects</h5>
        <template v-if="row.item.projects.length">
          <ul class="list-unstyled mb-0">
            <li v-for="project in row.item.projects" :key="project.id">
              <strong>{{ project.name }}:</strong>
              {{ project.overall_progress }}% complete
            </li>
          </ul>
        </template>
        <p v-else class="mb-0">
          None
        </p>
      </b-card>
    </template>

  </b-table>
</template>

<script>
import SmallAvatar from '@/components/avatars/Small'

export default {
  data () {
    return {
      defaultFields: {
        name: {
          label: 'Volume',
          sortable: true
        },
        importer: {
          label: 'Importer',
          class: 'text-center',
          sortable: true
        }
      }
    }
  },

  props: {
    volumes: {
      type: Array,
      required: true
    },
    extraFields: {
      type: Object,
      default: () => ({})
    },
    showDetails: {
      type: Boolean,
      default: false
    },
    outlined: {
      type: Boolean,
      default: false
    },
    filter: {
      type: String,
      default: null
    },
    filterBy: {
      type: String,
      default: null
    }
  },

  components: {
    SmallAvatar
  },

  computed: {
    mergedFields () {
      const defaultsCopy = JSON.parse(JSON.stringify(this.defaultFields))
      const fields = Object.assign(defaultsCopy, this.extraFields)
      if (this.showDetails) {
        fields.n_ongoing_projects = {
          label: 'Ongoing Projects',
          class: 'text-center',
          sortable: true
        }
        fields.n_completed_projects = {
          label: 'Completed Projects',
          class: 'text-center',
          sortable: true
        }
      }
      if (this.showDetails || this.$scopedSlots.action) {
        fields.actions = {
          label: 'Actions',
          class: 'text-center'
        }
      }
      return fields
    },

    filteredItems () {
      if (!this.filter || !this.filterBy) {
        return this.volumes
      }

      return this.volumes.filter(item => {
        const value = this.filter.toUpperCase()
        const cell = item[this.filterBy]
        return JSON.stringify(cell).toUpperCase().indexOf(value) > -1
      })
    }
  }
}
</script>