Merge pull request #489 from LibCrowds/dev

Dev
LibCrowds · Nov 8, 2017 · f303abf · f303abf
2 parents 6870e8a + 0219da1
commit f303abf
Show file tree

Hide file tree

Showing 7 changed files with 327 additions and 308 deletions.
diff --git a/components/navbars/App.vue b/components/navbars/App.vue
@@ -15,88 +15,84 @@
       </b-link>
     </span>
 
-    <span class="app-navbar-right border-bottom" v-if="loggedIn">
-      <b-navbar-nav right>
+    <b-navbar-nav right class="app-navbar-right border-bottom" v-if="loggedIn">
 
-        <slot name="right"></slot>
+      <slot name="right"></slot>
 
-        <!-- Hide on small screens until the new menu is in place -->
-        <announcements class="d-none d-lg-block"></announcements>
+      <!-- Hide on small screens until the new menu is in place -->
+      <announcements class="d-none d-lg-block"></announcements>
 
-        <b-nav-item-dropdown
-          right
-          :text="currentUser.name">
+      <b-nav-item-dropdown
+        right
+        :text="currentUser.name">
 
-          <!-- Profile/settings -->
+        <!-- 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>
+
+        <!-- Project management -->
+        <span v-if="currentUser.admin">
+          <div role="separator" class="dropdown-divider"></div>
           <b-dropdown-item
             :to="{
-              name: 'account-name',
-              params: {
-                name: currentUser.name
-              }
-            }">Profile
+              name: 'admin-project-open'
+            }">
+            Project Admin
           </b-dropdown-item>
           <b-dropdown-item
             :to="{
-              name: 'account-name-settings-profile',
-              params: {
-                name: currentUser.name
-              }
-            }">Settings
+              name: 'admin-collection'
+            }">
+            Collection Admin
           </b-dropdown-item>
+          <b-dropdown-item
+            :to="{
+              name: 'admin-site-dashboard'
+            }">
+            Site Admin
+          </b-dropdown-item>
+        </span>
 
-          <!-- Project management -->
-          <span v-if="currentUser.admin">
-            <div role="separator" class="dropdown-divider"></div>
-            <b-dropdown-item
-              :to="{
-                name: 'admin-project-open'
-              }">
-              Project Admin
-            </b-dropdown-item>
-            <b-dropdown-item
-              :to="{
-                name: 'admin-collection'
-              }">
-              Collection Admin
-            </b-dropdown-item>
-            <b-dropdown-item
-              :to="{
-                name: 'admin-site-dashboard'
-              }">
-              Site Admin
-            </b-dropdown-item>
-          </span>
-
-          <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>
+        <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 -->
-    </span>
-    <span class="app-navbar-right" v-else>
-      <b-navbar-nav id="sign-in-up" right>
-        <b-nav-item
-          exact
-          :to="{
-            name: 'account-signin',
-            query: {
-              next: $route.path
-            }
-          }">
-          Sign in
-        </b-nav-item>
-        <b-nav-item
-          exact
-          id="btn-register"
-          :to="{
-            name: 'account-register'
-          }">
-          Sign up
-        </b-nav-item>
-      </b-navbar-nav>
-    </span>
+    <!-- Sign in/sign up -->
+    <b-navbar-nav id="sign-in-up" right class="app-navbar-right" v-else>
+      <b-nav-item
+        exact
+        :to="{
+          name: 'account-signin',
+          query: {
+            next: $route.path
+          }
+        }">
+        Sign in
+      </b-nav-item>
+      <b-nav-item
+        exact
+        id="btn-register"
+        :to="{
+          name: 'account-register'
+        }">
+        Sign up
+      </b-nav-item>
+    </b-navbar-nav>
   </b-navbar>
 </template>
 
@@ -187,6 +183,9 @@ export default {
 
   .app-navbar-right {
     height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
 
     &.border-bottom {
       border-bottom: 1px solid $gray-300;

diff --git a/components/presenters/LibcrowdsViewer.vue b/components/presenters/LibcrowdsViewer.vue
@@ -7,6 +7,7 @@
       :task-opts="taskOpts"
       :browsable="false"
       :selections-editable="false"
+      :before-submit="checkSubmission"
       show-help-on-mount
       @submit="onSubmit"
       @taskliked="onTaskLiked">
@@ -16,6 +17,7 @@
 </template>
 
 <script>
+import pluralize from 'pluralize'
 import isEmpty from 'lodash/isEmpty'
 
 export default {
@@ -78,6 +80,57 @@ export default {
      */
     onSubmit (taskData) {
       this.$emit('submit', this.project.id, taskData.id, taskData.annotations)
+    },
+
+    /**
+     * Check the submission before processing.
+     *
+     * This can be used, for example, to make sure we have n annotations.
+     */
+    checkSubmission (taskData) {
+      const nAnnotations = taskData.annotations.length
+      const mode = taskData.mode
+      const tag = taskData.tag
+      const showConfirm = (htmlMessage) => {
+        return new Promise((resolve, reject) => {
+          this.$swal({
+            title: 'Confirm',
+            html: htmlMessage,
+            type: 'question',
+            showCancelButton: true
+          }).then(data => {
+            resolve()
+          }, (dismiss) => {
+            reject(new Error('Submission cancelled'))
+          })
+        })
+      }
+
+      return new Promise((resolve, reject) => {
+        // TODO: expand these options.
+        if (mode === 'select' && nAnnotations < 2) {
+          return showConfirm(
+            `Each sheet usually contains at least 2 ${pluralize(tag, 2)}.<br>
+            You have outlined ${nAnnotations}.<br>
+            Are you sure you want to submit this sheet?`
+          ).then(() => {
+            resolve()
+          }).catch(err => {
+            console.info(err)
+          })
+        } else if (mode === 'transcribe' && nAnnotations < 1) {
+          return showConfirm(
+            `You have not added any transcriptions.<br>
+            Are you sure you want to submit this sheet?`
+          ).then(() => {
+            resolve()
+          }).catch(err => {
+            console.info(err)
+          })
+        } else {
+          resolve()
+        }
+      })
     }
   }
 }
@@ -98,5 +151,10 @@ export default {
     max-height: 200px;
     max-width: 100%;
   }
+
+  // Remove this when fixed in libcrowds-viewer
+  .lv-sidebar-footer {
+    width: 100%;
+  }
 }
 </style>
diff --git a/layouts/error.vue b/layouts/error.vue
@@ -42,7 +42,7 @@ export default {
   data () {
     return {
       messages: {
-        '403': 'You\'re not supposed to be here.',
+        '403': 'Forbidden.',
         '404': 'This page could not be found.',
         '405': 'Method not allowed.',
         '500': 'Uh oh, something\'s broken. We will fix it as soon as we can.'

diff --git a/pages/collection/_short_name/index.vue b/pages/collection/_short_name/index.vue
@@ -4,18 +4,11 @@
       <div class="container full-height text-center">
         <div class="header-content">
           <div class="d-flex justify-content-center align-items-center">
-            <object
-              id="collection-logo"
-              v-if="hasLogo && collection.info.logo.endsWith('.svg')"
-              :data="collection.info.logo"
-              class="d-block"
-              type="image/svg+xml">
-            </object>
             <img
               id="collection-logo"
-              v-else-if="hasLogo"
+              v-if="hasLogo"
               class="d-inline-block"
-              src="collection.info.logo">
+              :src="collection.info.logo">
             </img>
             <span
               class="mr-2 d-none d-lg-inline-block"

diff --git a/pages/collection/_short_name/projects/_id/_presenter.vue/index.vue b/pages/collection/_short_name/projects/_id/_presenter.vue/index.vue
@@ -74,30 +74,16 @@ export default {
   },
 
   methods: {
-    /**
-     * Return the URL to load the next set of tasks
-     */
-    getLoadTasksUrl () {
-      const endpoint = `/api/project/${this.project.id}/newtask`
-      let q = 'limit=10'
-      if (this.tasks.length) {
-        const lastTask = this.tasks[this.tasks.length - 1]
-        q += `&last_id=${lastTask.id}`
-      }
-      return `${endpoint}?${q}`
-    },
-
     /**
      * Load the next set of tasks.
      */
-    loadTasks () {
-      const url = this.getLoadTasksUrl()
+    loadTask () {
+      const url = `/api/project/${this.project.id}/newtask`
       this.$axios.$get(url).then(data => {
         if (isEmpty(data)) {
           this.handleCompletion()
         } else {
-          const loadedTasks = Array.isArray(data) ? data : [data]
-          this.tasks = this.tasks.concat(loadedTasks)
+          this.tasks = Array.isArray(data) ? data : [data]
         }
       }).catch(err => {
         this.$nuxt.error(err)
@@ -162,18 +148,6 @@ export default {
       }
     },
 
-    /**
-     * Remove a task from the queue by ID.
-     * @param {String|Number} taskId
-     *   The task ID.
-     */
-    removeTask (taskId) {
-      const idx = this.tasks.map((task) => { return task.id }).indexOf(taskId)
-      if (idx > -1) {
-        this.tasks.splice(idx, 1)
-      }
-    },
-
     /**
      * Show notifications depending on user progress.
      */
@@ -231,16 +205,15 @@ export default {
      *   The answer data.
      */
     onSubmit (projectId, taskId, answer) {
+      console.log('submoitted')
       const taskrun = JSON.stringify({
         'project_id': projectId,
         'task_id': taskId,
         'info': answer
       })
       this.$axios.$post(`/api/taskrun`, taskrun).then(data => {
-        this.removeTask(taskId)
-        if (this.tasks.length < 10) {
-          this.loadTasks()
-        }
+        console.log('new blah')
+        this.loadTask()
         this.trackUserProgress()
       }).catch(err => {
         this.$nuxt.error(err)
@@ -249,7 +222,7 @@ export default {
   },
 
   mounted () {
-    this.loadTasks()
+    this.loadTask()
     this.$store.dispatch('UPDATE_COLLECTION_NAV_ITEMS', [])
   }
 }

diff --git a/pages/collection/_short_name/projects/index.vue b/pages/collection/_short_name/projects/index.vue
@@ -88,7 +88,9 @@ export default {
   data () {
     return {
       projects: [],
-      searchParams: {},
+      searchParams: {
+        orderby: 'overall_progress'
+      },
       noResults: 'No projects are available using the selected filters, ' +
         'use the input fields on the left to change them.',
       tableFields: {