@konfuzio/document-validation-ui 0.1.10-dev.9 → 0.1.11-dev.0

package/src/components/DocumentPage/NewAnnotation.vue

@@ -259,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,
@@ -277,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/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 = {

package/src/store/edit.js

@@ -10,7 +10,7 @@ const HTTP = myImports.HTTP;
 const state = {
   editMode: false,
   renameAndCategorize: false,
-  isMultipleSelection: false,
+  isMultipleSelection: true,
   pagesForPostprocess: [],
   selectedPages: [],
   updatedDocument: [],
@@ -28,12 +28,19 @@ const getters = {
       (page) => page.angle !== 0
     );
 
-    let foundReorderedPage;
-
-    state.pagesForPostprocess.map((page) => {
-      foundReorderedPage = rootState.document.selectedDocument.pages.find(
-        (p) => p.id === page.id && p.number !== page.number
-      );
+    let foundReorderedPage = false;
+
+    state.pagesForPostprocess.map((page, index) => {
+      if (
+        (page.id === rootState.document.selectedDocument.pages[index].id &&
+          page.number !==
+            rootState.document.selectedDocument.pages[index].number) ||
+        (page.id !== rootState.document.selectedDocument.pages[index].id &&
+          page.number ===
+            rootState.document.selectedDocument.pages[index].number)
+      ) {
+        foundReorderedPage = true;
+      }
     });
 
     return (
@@ -113,12 +120,12 @@ const actions = {
   },
 
   rotatePage: ({ state, commit }, { page, direction }) => {
-    if (state.pagesForPostprocess.find((p) => p.id === page[0].id)) {
+    if (state.pagesForPostprocess.find((p) => p.id === page.id)) {
       const pagesForPostprocess = state.pagesForPostprocess.map((p) => {
         let rotatedAngle;
         if (direction === "left") {
           rotatedAngle = p.angle - 90;
-          if (p.id === page[0].id) {
+          if (p.id === page.id) {
             if (rotatedAngle === -270) {
               rotatedAngle = 90;
             }
@@ -131,7 +138,7 @@ const actions = {
         }
         if (direction === "right") {
           rotatedAngle = p.angle + 90;
-          if (p.id === page[0].id) {
+          if (p.id === page.id) {
             if (rotatedAngle === 270) {
               rotatedAngle = -90;
             }
@@ -219,7 +226,7 @@ const actions = {
 
             commit("SET_SUBMIT_EDIT_CHANGES", false);
 
-            if (newId !== oldId) {
+            if (newId != oldId) {
               if (getURLQueryParam("document") || getURLPath("docs")) {
                 navigateToNewDocumentURL(oldId, newId);
               } else {
@@ -231,12 +238,17 @@ const actions = {
                   root: true,
                 });
               }
+            } else {
+              dispatch("document/setSelectedDocument", response.data[0], {
+                root: true,
+              });
+
+              dispatch("document/pollDocumentEndpoint", null, {
+                root: true,
+              });
             }
-
-            resolve(null);
-          } else {
-            resolve(response);
           }
+          resolve(response);
         })
         .catch((error) => {
           reject(error.response);

package/src/store/project.js

@@ -4,6 +4,8 @@ const HTTP = myImports.HTTP;
 const state = {
   projectId: null,
   currentUser: null,
+  documentsListPath: null,
+  documentsInProject: null,
 };
 
 const getters = {
@@ -65,7 +67,7 @@ const actions = {
   fetchCurrentUser: ({ commit }) => {
     return HTTP.get(`/auth/me/`)
       .then((response) => {
-        commit("SET_CURRENT_USER", response.data.username);
+        commit("SET_CURRENT_USER", response.data);
       })
       .catch((error) => {
         console.log(error);
@@ -75,6 +77,28 @@ const actions = {
   setCurrentUser: ({ commit }, currentUser) => {
     commit("SET_CURRENT_USER", currentUser);
   },
+
+  setDocumentsListPath: ({ commit }, path) => {
+    commit("SET_DOCUMENTS_LIST_PATH", path);
+  },
+
+  setDocumentsInProject: ({ commit }, documents) => {
+    commit("SET_DOCUMENTS_IN_PROJECT", documents);
+  },
+
+  fetchDocumentList: ({ commit, state }, parameters) => {
+    return HTTP.get(
+      `documents/?project=${state.projectId}&assignee=${state.currentUser.username}&limit=100&${parameters}`
+    )
+      .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");
+      });
+  },
 };
 
 const mutations = {
@@ -84,6 +108,12 @@ const mutations = {
   SET_CURRENT_USER: (state, currentUser) => {
     state.currentUser = currentUser;
   },
+  SET_DOCUMENTS_LIST_PATH: (state, path) => {
+    state.documentsListPath = path;
+  },
+  SET_DOCUMENTS_IN_PROJECT: (state, documents) => {
+    state.documentsInProject = documents;
+  },
 };
 
 export default {

package/src/utils/utils.js

@@ -15,7 +15,7 @@ export function getURLQueryParam(param) {
 export function getURLPath(value) {
   const path = window.location.pathname;
 
-  if (!path.includes(value)) return;
+  if (!path.includes(`/${value}/`)) return;
 
   const id = path.split(value)[1].split("/")[1];
 
@@ -30,6 +30,23 @@ export function navigateToNewDocumentURL(oldId, newId) {
   window.location.replace(newUrl);
 }
 
+export function navigateToDocumentsList(path, projectId, userId) {
+  if (!path) return;
+
+  const lastCharOfString = path.charAt(path.length - 1);
+  let slash = "/";
+
+  if (lastCharOfString === slash) {
+    slash = "";
+  }
+
+  const parameters = `?project=${projectId}&is_reviewed__exact=0&assignee__id__exact=${userId}`;
+
+  const newPath = `${path}${slash}${parameters}`;
+
+  window.location.pathname = newPath;
+}
+
 export function isElementArray(element) {
   return Array.isArray(element);
 }