@konfuzio/document-validation-ui 0.1.10-dev.8 → 0.1.10

package/src/components/DocumentPage/DocumentPage.vue

@@ -18,14 +18,6 @@
       :container-height="scaledViewport.height"
       @close="closePopups"
     />
-    <MultiAnnotationTablePopup
-      v-if="newMultiAnnotationSetTable"
-      :table-position="newMultiAnnotationSetTable.position"
-      :page-size="scaledViewport"
-      :label-set="newMultiAnnotationSetTable.labelSet"
-      :grouped-entities="newMultiAnnotationSetTable.entities"
-      @close="closePopups"
-    />
 
     <AnnSetTableOptions v-if="showAnnSetTable" :page="page" />
 
@@ -117,7 +109,6 @@
           :page="page"
           @buttonEnter="onElementEnter"
           @buttonLeave="onElementLeave"
-          @finished="handleMultiAnnSelectionFinished"
         />
       </v-layer>
     </v-stage>
@@ -136,7 +127,6 @@ import api from "../../api";
 import BoxSelection from "./BoxSelection";
 import MultiAnnSelection from "./MultiAnnSelection";
 import NewAnnotation from "./NewAnnotation";
-import MultiAnnotationTablePopup from "./MultiAnnotationTablePopup";
 import AnnSetTableOptions from "./AnnSetTableOptions";
 
 export default {
@@ -145,7 +135,6 @@ export default {
     BoxSelection,
     MultiAnnSelection,
     NewAnnotation,
-    MultiAnnotationTablePopup,
     AnnSetTableOptions,
   },
 
@@ -160,7 +149,6 @@ export default {
     return {
       image: null,
       newAnnotation: [],
-      newMultiAnnotationSetTable: null,
     };
   },
 
@@ -393,7 +381,6 @@ export default {
     },
 
     handleFocusedAnnotation(annotation, trigger) {
-      this.$store.dispatch("document/resetEditAnnotation");
       this.$store.dispatch("document/setSidebarAnnotationSelected", {
         annotation,
         trigger,
@@ -461,10 +448,6 @@ export default {
       this.$refs.stage.$el.style.cursor = "inherit";
     },
 
-    handleMultiAnnSelectionFinished(newMultiAnnotationSetTable) {
-      this.newMultiAnnotationSetTable = newMultiAnnotationSetTable;
-    },
-
     /**
      * Konva draws pages like this.
      */
@@ -557,7 +540,6 @@ export default {
       };
     },
     closePopups(closeNewAnnotaton) {
-      this.newMultiAnnotationSetTable = null;
       if (closeNewAnnotaton) {
         this.newAnnotation = [];
       }

package/src/components/DocumentPage/DocumentToolbar.vue

@@ -119,6 +119,7 @@ export default {
   methods: {
     handleEdit() {
       if (this.editModeDisabled) return;
+      this.$store.dispatch("selection/disableSelection");
       this.$store.dispatch("edit/enableEditMode");
     },
     zoomIn() {

package/src/components/DocumentPage/MultiAnnSelection.vue

@@ -132,34 +132,12 @@ export default {
   },
   methods: {
     openMultiAnnotationModal() {
-      this.$buefy.modal.open({
-        parent: this.$parent,
-        component: ChooseLabelSetModal,
-        hasModalCard: true,
-        trapFocus: true,
-        canCancel: false,
-        customClass: "dv-ui-theme invisible-parent-modal",
-        props: { isMultipleAnnotations: true },
-        events: {
-          labelSet: this.submitAnnotations,
-        },
+      this.$store.dispatch("display/showChooseLabelSetModal", {
+        show: true,
+        isMultipleAnnotations: true,
+        finish: this.submitAnnotations,
       });
     },
-    chooseLabelSet(labelSet) {
-      // TODO: deprecated with new multi ann set table
-      const tableSelection = {
-        labelSet,
-        position: {
-          x: this.selection.start.x,
-          y: this.selection.start.y,
-          width: this.selection.end.x - this.selection.start.x,
-          height: this.selection.end.y - this.selection.start.y,
-        },
-        entities: this.entities,
-      };
-      this.$store.dispatch("selection/disableSelection");
-      this.$emit("finished", tableSelection);
-    },
 
     async submitAnnotations(labelSet) {
       const columns = labelSet.labels.map((label) => {

package/src/components/DocumentPage/NewAnnotation.vue

@@ -5,6 +5,7 @@
       v-model="selectedSet"
       aria-role="list"
       :class="[
+        'annotation-dropdown',
         'no-padding-bottom',
         setsList.length === 0 ? 'no-padding-top' : '',
       ]"
@@ -69,7 +70,7 @@
         v-model="selectedLabel"
         aria-role="list"
         :disabled="!labels || labels.length === 0"
-        class="label-dropdown"
+        class="label-dropdown annotation-dropdown"
       >
         <template #trigger>
           <b-button
@@ -258,15 +259,7 @@ export default {
           this.loading = false;
         });
     },
-    disableLabelSetModalShowing() {
-      // timeout to stop propagation of click event
-      setTimeout(() => {
-        this.isAnnSetModalShowing = false;
-      }, 500);
-    },
     chooseLabelSet(labelSet) {
-      this.disableLabelSetModalShowing();
-
       const newSet = {
         label_set: labelSet,
         labels: labelSet.labels,
@@ -276,20 +269,10 @@ export default {
       this.selectedSet = newSet;
     },
     openAnnotationSetCreation() {
-      this.isAnnSetModalShowing = true;
-
-      this.$buefy.modal.open({
-        parent: this.$parent,
-        component: ChooseLabelSetModal,
-        hasModalCard: true,
-        trapFocus: true,
-        canCancel: false,
-        onCancel: this.disableLabelSetModalShowing,
-        customClass: "dv-ui-theme invisible-parent-modal",
-        events: {
-          labelSet: this.chooseLabelSet,
-          close: this.disableLabelSetModalShowing,
-        },
+      this.$store.dispatch("display/showChooseLabelSetModal", {
+        show: true,
+        isMultipleAnnotations: true,
+        finish: this.chooseLabelSet,
       });
     },
     setTooltipText() {

package/src/components/DocumentTopBar/DocumentName.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="document-name-component">
+  <div
+    :class="['document-name-component', editMode && 'document-name-edit-mode']"
+  >
     <div class="document-icon">
       <ServerImage
         :height="'22px'"

package/src/components/DocumentTopBar/DocumentTopBar.vue

@@ -10,7 +10,36 @@
         />
       </div>
 
-      <DocumentName :data-file-name="selectedDocument.data_file_name" />
+      <div
+        :class="[
+          'center-bar-components',
+          recalculatingAnnotations && 'single-component',
+        ]"
+      >
+        <div
+          :class="[
+            'left-arrow navigation-arrow',
+            !previousDocument && 'navigation-disabled',
+          ]"
+          type="button"
+          @click="navigateToDocument(previousDocument)"
+        >
+          <b-icon icon="angle-left" size="is-small" />
+        </div>
+
+        <DocumentName :data-file-name="selectedDocument.data_file_name" />
+
+        <div
+          :class="[
+            'right-arrow navigation-arrow',
+            !nextDocument && 'navigation-disabled',
+          ]"
+          type="button"
+          @click="navigateToDocument(nextDocument)"
+        >
+          <b-icon icon="angle-right" size="is-small" />
+        </div>
+      </div>
 
       <div v-if="!recalculatingAnnotations" class="right-bar-components">
         <div
@@ -87,6 +116,8 @@ export default {
   data() {
     return {
       categoryError: false,
+      previousDocument: null,
+      nextDocument: null,
     };
   },
   computed: {
@@ -98,7 +129,19 @@ export default {
     ]),
     ...mapState("category", ["categories"]),
     ...mapState("edit", ["editMode"]),
-    ...mapGetters("document", ["isDocumentReviewed"]),
+    ...mapState("project", ["documentsInProject"]),
+    ...mapGetters("document", [
+      "isDocumentReviewed",
+      "isDocumentReadyToBeReviewed",
+      "waitingForSplittingConfirmation",
+    ]),
+  },
+  watch: {
+    documentsInProject(newValue) {
+      if (newValue && this.selectedDocument) {
+        this.getPreviousAndNextDocuments();
+      }
+    },
   },
   created() {
     window.addEventListener("resize", this.handleResize);
@@ -120,6 +163,42 @@ export default {
     handleResize() {
       this.setComponentWidth(this.$refs.documentTopBar.offsetWidth);
     },
+    getPreviousAndNextDocuments() {
+      // Only consider documents who have a status of "ready"
+      const filteredDocuments = this.documentsInProject.filter(
+        (document) =>
+          this.isDocumentReadyToBeReviewed(document) ||
+          this.waitingForSplittingConfirmation(document)
+      );
+
+      if (!filteredDocuments) return;
+
+      const found = filteredDocuments.find(
+        (document) => document.id === this.selectedDocument.id
+      );
+
+      const indexOfCurrentDocument = filteredDocuments.indexOf(found);
+
+      if (!(indexOfCurrentDocument < 0)) {
+        this.previousDocument = filteredDocuments[indexOfCurrentDocument - 1];
+        this.nextDocument = filteredDocuments[indexOfCurrentDocument + 1];
+      } else {
+        this.previousDocument = filteredDocuments[0];
+        this.nextDocument = filteredDocuments[1];
+      }
+    },
+    navigateToDocument(document) {
+      if (!document) return;
+
+      this.$store.dispatch("document/changeCurrentDocument", document.id);
+
+      if (this.editMode) {
+        // Reset edit mode when changing the document,
+        // in case the change was made from the arrows in the Edit Mode
+        // so that the user does not get stuck in this interface
+        this.$store.dispatch("edit/disableEditMode");
+      }
+    },
   },
 };
 </script>

package/src/components/DocumentsList/DocumentsList.vue

@@ -110,12 +110,7 @@ export default {
   },
   methods: {
     changeDocument(documentId) {
-      if (getURLQueryParam("document") || getURLPath("docs")) {
-        navigateToNewDocumentURL(this.selectedDocument.id, documentId);
-      } else {
-        this.$store.dispatch("document/setDocId", documentId);
-        this.$store.dispatch("document/fetchDocument");
-      }
+      this.$store.dispatch("document/changeCurrentDocument", documentId);
     },
     requestTrialAccess() {
       window.open("https://konfuzio.com", "_blank");

package/src/locales/de.json

@@ -57,7 +57,7 @@
   "reorder": "Sortieren",
   "rotate": "Rotieren",
   "edit_error": "Die Änderungen konnten nicht gespeichert werden. Bitte versuchen Sie es später erneut.",
-  "select_pages": "Sie können nun Seiten drehen, neu sortieren und Dokumente splitten.",
+  "select_pages": "Sie können nun Seiten drehen, neu sortieren und Dokumente teilen.",
   "edit_document": "Dokument bearbeiten (Early Access)",
   "edit_early_access": "Sie sind einer der Nutzer, die Zugang zu diesen Funktionalitäten vor dem offiziellen Erscheinungstermin erhalten.",
   "selected": "ausgewählt",
@@ -131,5 +131,6 @@
   "edit_label": "Label editieren",
   "delete_label": "Label löschen",
   "table": "Tabelle",
-  "prepare_document": "Dokument vorbereiten"
+  "prepare_document": "Dokument vorbereiten",
+  "delete_table": "Tabelle löschen"
 }

package/src/locales/en.json

@@ -131,5 +131,6 @@
   "missing_from_document": "Missing from the document",
   "edit_label": "Edit label",
   "delete_label": "Delete label",
-  "table": "Table"
+  "table": "Table",
+  "delete_table": "Delete table"
 }

package/src/locales/es.json

@@ -131,5 +131,6 @@
   "table": "Tabla",
   "new_multi_ann_description": "Seleccione un modelo de datos de los existentes, luego deseleccione las etiquetas que no existen en este documento.",
   "new_multi_ann_title": "Crear múltiples anotaciones",
-  "prepare_document": "Prepare el documento"
+  "prepare_document": "Prepare el documento",
+  "delete_table": "Eliminar tabla"
 }

package/src/main.js

@@ -1,10 +1,7 @@
 import Vue from "vue";
 import Buefy from "buefy";
-import "buefy/dist/buefy.css";
 import VueKonva from "vue-konva";
 import App from "./components/App";
-import * as Sentry from "@sentry/vue";
-import { Integrations } from "@sentry/tracing";
 import i18n from "./i18n";
 import store from "./store";
 import { library } from "@fortawesome/fontawesome-svg-core";
@@ -59,27 +56,6 @@ Vue.use(Buefy, {
 });
 Vue.use(VueObserveVisibility);
 
-// Sentry config
-if (process.env.NODE_ENV != "development") {
-  Sentry.init({
-    Vue,
-    dsn: process.env.VUE_APP_SENTRY_DSN,
-    integrations: [new Integrations.BrowserTracing()],
-    environment: process.env.VUE_APP_SENTRY_ENVIRONMENT,
-
-    // We recommend adjusting this value in production, or using tracesSampler
-    // for finer control
-    tracesSampleRate: 1.0,
-
-    // If false, errors won't show up in devtools
-    logErrors: true,
-
-    tracingOptions: {
-      trackComponents: true,
-    },
-  });
-}
-
 /**
  * Main entrypoint for the App
  */

package/src/store/category.js

@@ -3,7 +3,7 @@ import myImports from "../api";
 const HTTP = myImports.HTTP;
 
 const state = {
-  documentsInProject: [],
+  createAvailableListOfDocuments: false,
   documentsAvailableToReview: [], // filtered by user
   categories: null,
 };
@@ -39,37 +39,21 @@ const getters = {
 };
 
 const actions = {
-  setDocumentsInProject: ({ commit }, documents) => {
-    commit("SET_DOCUMENTS_IN_PROJECT", documents);
-  },
   setDocumentsAvailableToReview: ({ commit }, documentsAvailableToReview) => {
     commit("SET_AVAILABLE_DOCUMENTS", documentsAvailableToReview);
   },
   setCategories: ({ commit }, categories) => {
     commit("SET_CATEGORIES", categories);
   },
-  /**
-   * Actions that use HTTP requests always return the axios promise,
-   * so they can be `await`ed (useful to set the `loading` status).
-   */
-  fetchDocumentList: ({ commit, rootState }, categoryId) => {
-    return HTTP.get(
-      `documents/?category=${categoryId}&assignee=${rootState.project.currentUser}&limit=100`
-    )
-      .then((response) => {
-        if (response.data.results) {
-          commit("SET_DOCUMENTS_IN_PROJECT", response.data.results);
-        }
-      })
-      .catch((error) => {
-        console.log(error, "Could not fetch document list from the backend");
-      });
-  },
 
   createAvailableDocumentsList: (
-    { commit, state, dispatch, rootGetters },
+    { commit, state, dispatch, rootState, rootGetters },
     { categoryId, user, poll }
   ) => {
+    if (!state.createAvailableListOfDocuments) return;
+
+    const parameters = `category=${categoryId}`;
+
     const sleep = (duration) =>
       new Promise((resolve) => setTimeout(resolve, duration));
 
@@ -80,10 +64,10 @@ const actions = {
       let errors = 0;
       count += 1;
 
-      return dispatch("fetchDocumentList", categoryId).then(() => {
-        for (let i = 0; i < state.documentsInProject.length; i++) {
+      return dispatch("project/fetchDocumentList", parameters).then(() => {
+        for (let i = 0; i < rootState.project.documentsInProject.length; i++) {
           const found = state.documentsAvailableToReview.find(
-            (doc) => doc.id === state.documentsInProject[i].id
+            (doc) => doc.id === rootState.project.documentsInProject[i].id
           );
 
           if (found) {
@@ -92,14 +76,17 @@ const actions = {
             continue;
           } else if (
             rootGetters["document/isDocumentReadyToBeReviewed"](
-              state.documentsInProject[i]
+              rootState.project.documentsInProject[i]
             )
           ) {
             // add available doc to the end of the array
-            commit("ADD_AVAILABLE_DOCUMENT", state.documentsInProject[i]);
+            commit(
+              "ADD_AVAILABLE_DOCUMENT",
+              rootState.project.documentsInProject[i]
+            );
           } else if (
             rootGetters["document/documentHadErrorDuringExtraction"](
-              state.documentsInProject[i]
+              rootState.project.documentsInProject[i]
             )
           ) {
             dispatch("document/setDocumentError", null, { root: true });
@@ -118,10 +105,10 @@ const actions = {
         // And if the difference is due to errors or to docs not ready
         if (
           poll &&
-          state.documentsInProject.length !==
+          rootState.project.documentsInProject.length !==
             state.documentsAvailableToReview.length &&
           state.documentsAvailableToReview.length + errors !==
-            state.documentsInProject.length
+            rootState.project.documentsInProject.length
         ) {
           if (count >= 10) return true;
 
@@ -137,8 +124,8 @@ const actions = {
 
     // Poll as long as the lengths are different
     if (
-      state.documentsInProject.length === 0 ||
-      state.documentsInProject.length !==
+      rootState.project.documentsInProject.length === 0 ||
+      rootState.project.documentsInProject.length !==
         state.documentsAvailableToReview.length
     ) {
       let duration;
@@ -169,9 +156,6 @@ const actions = {
 };
 
 const mutations = {
-  SET_DOCUMENTS_IN_PROJECT: (state, documents) => {
-    state.documentsInProject = documents;
-  },
   SET_AVAILABLE_DOCUMENTS: (state, documentsAvailableToReview) => {
     state.documentsAvailableToReview = documentsAvailableToReview;
   },

package/src/store/display.js

@@ -31,6 +31,7 @@ const state = {
   categorizeModalIsActive: false,
   pageChangedFromThumbnail: false,
   showAnnSetTable: null,
+  showChooseLabelSetModal: null,
 };
 
 const getters = {
@@ -236,6 +237,9 @@ const actions = {
   showAnnSetTable({ commit }, tableSet) {
     commit("SET_ANN_SET_TABLE", tableSet);
   },
+  showChooseLabelSetModal({ commit }, options) {
+    commit("SET_SHOW_CHOOSE_LABEL_SET_MODAL", options);
+  },
   toggleAnnSetTable({ commit }, tableSet) {
     commit("TOGGLE_ANN_SET_TABLE", tableSet);
   },
@@ -286,6 +290,9 @@ const mutations = {
   SET_PAGE_CHANGED_FROM_THUMBNAIL: (state, value) => {
     state.pageChangedFromThumbnail = value;
   },
+  SET_SHOW_CHOOSE_LABEL_SET_MODAL: (state, options) => {
+    state.showChooseLabelSetModal = options;
+  },
 };
 
 export default {

package/src/store/document.js

@@ -1,5 +1,10 @@
 import myImports from "../api";
-import { sleep } from "../utils/utils";
+import {
+  sleep,
+  getURLQueryParam,
+  navigateToNewDocumentURL,
+  getURLPath,
+} from "../utils/utils";
 
 const HTTP = myImports.HTTP;
 const documentPollDuration = 1000;
@@ -758,13 +763,18 @@ const actions = {
         await dispatch("category/fetchCategories", projectId, {
           root: true,
         });
+
+        // get list of documents not reviewed
+        await dispatch("project/fetchDocumentList", "is_reviewed=false", {
+          root: true,
+        });
       }
-      if (categoryId) {
+      if (categoryId && rootState.category.createAvailableListOfDocuments) {
         await dispatch(
           "category/createAvailableDocumentsList",
           {
             categoryId,
-            user: rootState.project.currentUser,
+            user: rootState.project.currentUser.username,
             poll: pollDocumentList,
           },
           {
@@ -1063,7 +1073,7 @@ const actions = {
     { error, serverErrorMessage, defaultErrorMessage }
   ) => {
     // check type of error
-    if (error && error.status === 500) {
+    if (error && error.status >= 500 && error.status < 600) {
       dispatch("setErrorMessage", serverErrorMessage);
       commit("SET_SERVER_ERROR", true);
     } else if (error.data && error.data.length > 0) {
@@ -1083,11 +1093,25 @@ const actions = {
 
   contactSupport: ({ rootState }, error) => {
     const url = "https://konfuzio.com/support/";
-    const params = `project=${rootState.project.projectId}&email=${rootState.project.currentUser}&issue=${error}`;
+    const params = `project=${rootState.project.projectId}&email=${rootState.project.currentUser.username}&issue=${error}`;
     const fullUrl = `${url}?${params}`;
 
     window.open(fullUrl, "_blank");
   },
+
+  changeCurrentDocument: ({ commit, state, dispatch }, newDocumentId) => {
+    // reset splitting suggestions
+    if (state.splittingSuggestions) {
+      commit("SET_SPLITTING_SUGGESTIONS", null);
+    }
+
+    if (getURLQueryParam("document") || getURLPath("d")) {
+      navigateToNewDocumentURL(state.selectedDocument.id, newDocumentId);
+    } else {
+      commit("SET_DOC_ID", newDocumentId);
+      dispatch("fetchDocument");
+    }
+  },
 };
 
 const mutations = {