@konfuzio/document-validation-ui 0.1.14 → 0.1.15

package/src/store/edit.js

@@ -1,14 +1,53 @@
 import myImports from "../api";
+import {
+  getURLQueryParam,
+  navigateToNewDocumentURL,
+  getURLPath,
+} from "../utils/utils";
 
 const HTTP = myImports.HTTP;
 
 const state = {
   editMode: false,
-  splitOverview: false,
-  isMultipleSelection: false,
-  documentPagesListForEditMode: [], // TODO: change name
+  renameAndCategorize: false,
+  isMultipleSelection: true,
+  pagesForPostprocess: [],
   selectedPages: [],
   updatedDocument: [],
+  showEditConfirmationModal: false,
+  submitEditChanges: false,
+  redirectingUser: false,
+};
+
+const getters = {
+  isPageSelected: (state) => (id) => {
+    return state.selectedPages.find((page) => page.id === id);
+  },
+
+  documentShouldBePostprocessed: (state, _, rootState) => {
+    const foundRotatedPage = state.pagesForPostprocess.find(
+      (page) => page.angle !== 0
+    );
+
+    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 (
+      state.updatedDocument.length > 1 || foundRotatedPage || foundReorderedPage
+    );
+  },
 };
 
 const actions = {
@@ -18,21 +57,46 @@ const actions = {
 
   disableEditMode: ({ commit }) => {
     commit("SET_EDIT_MODE", false);
-    commit("SET_SPLIT_OVERVIEW", false);
+    commit("SET_RENAME_AND_CATEGORIZE", false);
   },
 
-  setSplitOverview: ({ commit }, overview) => {
-    commit("SET_SPLIT_OVERVIEW", overview);
+  setRenameAndCategorize: ({ commit }, value) => {
+    commit("SET_RENAME_AND_CATEGORIZE", value);
   },
 
-  setDocumentPagesListForEditMode: ({ commit }, pages) => {
-    commit("SET_DOCUMENT_PAGES_FOR_EDIT_MODE", pages);
+  setPagesForPostprocess: ({ commit }, pages) => {
+    commit("SET_PAGES_FOR_POSTPROCESS", pages);
   },
 
   setUpdatedDocument: ({ commit }, updatedDocument) => {
     commit("SET_UPDATED_DOCUMENT", updatedDocument);
   },
 
+  setSubmitEditChanges: ({ commit }, value) => {
+    commit("SET_SUBMIT_EDIT_CHANGES", value);
+  },
+
+  selectPage: ({ state, commit }, page) => {
+    if (state.isMultipleSelection) {
+      commit("ADD_SELECTED_PAGE", page);
+    } else {
+      commit("SET_SELECTED_PAGES", []);
+      commit("ADD_SELECTED_PAGE", page);
+    }
+  },
+
+  unselectPage: ({ state, commit }, selectedPage) => {
+    const found = state.selectedPages.find(
+      (page) => page.id === selectedPage.id
+    );
+    if (found) {
+      const filtered = state.selectedPages.filter(
+        (page) => page.id !== selectedPage.id
+      );
+      commit("SET_SELECTED_PAGES", filtered);
+    }
+  },
+
   setSelectedPages: ({ state, commit }, selectedPage) => {
     if (!selectedPage) {
       commit("SET_SELECTED_PAGES", []);
@@ -57,42 +121,41 @@ const actions = {
   },
 
   rotatePage: ({ state, commit }, { page, direction }) => {
-    if (state.documentPagesListForEditMode.find((p) => p.id === page[0].id)) {
-      const documentPagesListForEditMode =
-        state.documentPagesListForEditMode.map((p) => {
-          let rotatedAngle;
-          if (direction === "left") {
-            rotatedAngle = p.angle - 90;
-            if (p.id === page[0].id) {
-              if (rotatedAngle === -270) {
-                rotatedAngle = 90;
-              }
-              return {
-                ...p,
-                angle: rotatedAngle,
-              };
+    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.id) {
+            if (rotatedAngle === -270) {
+              rotatedAngle = 90;
             }
-            return p;
+            return {
+              ...p,
+              angle: rotatedAngle,
+            };
           }
-          if (direction === "right") {
-            rotatedAngle = p.angle + 90;
-            if (p.id === page[0].id) {
-              if (rotatedAngle === 270) {
-                rotatedAngle = -90;
-              }
-              return {
-                ...p,
-                angle: rotatedAngle,
-              };
+          return p;
+        }
+        if (direction === "right") {
+          rotatedAngle = p.angle + 90;
+          if (p.id === page.id) {
+            if (rotatedAngle === 270) {
+              rotatedAngle = -90;
             }
-            return p;
+            return {
+              ...p,
+              angle: rotatedAngle,
+            };
           }
-        });
+          return p;
+        }
+      });
 
-      commit("SET_DOCUMENT_PAGES_FOR_EDIT_MODE", documentPagesListForEditMode);
+      commit("SET_PAGES_FOR_POSTPROCESS", pagesForPostprocess);
     } else {
       if (direction === "left") {
-        state.documentPagesListForEditMode.push({
+        state.pagesForPostprocess.push({
           id: page.id,
           number: page.number,
           angle: -90,
@@ -102,7 +165,7 @@ const actions = {
       }
 
       if (direction === "right") {
-        state.documentPagesListForEditMode.push({
+        state.pagesForPostprocess.push({
           id: page.id,
           number: page.number,
           angle: 90,
@@ -115,7 +178,7 @@ const actions = {
 
   updateRotationToTheLeft: ({ state, commit }) => {
     // updated the angles that will be sent to the backend
-    const array = state.documentPagesListForEditMode.map((p) => {
+    const array = state.pagesForPostprocess.map((p) => {
       let rotatedAngle = p.angle - 90;
       if (rotatedAngle === -270) {
         rotatedAngle = 90;
@@ -126,12 +189,12 @@ const actions = {
       };
     });
 
-    commit("SET_DOCUMENT_PAGES_FOR_EDIT_MODE", array);
+    commit("SET_PAGES_FOR_POSTPROCESS", array);
   },
 
   updateRotationToTheRight: ({ state, commit }) => {
     // updated the angles that will be sent to the backend
-    const array = state.documentPagesListForEditMode.map((p) => {
+    const array = state.pagesForPostprocess.map((p) => {
       let rotatedAngle = p.angle + 90;
       if (rotatedAngle === 270) {
         rotatedAngle = -90;
@@ -142,40 +205,66 @@ const actions = {
       };
     });
 
-    commit("SET_DOCUMENT_PAGES_FOR_EDIT_MODE", array);
+    commit("SET_PAGES_FOR_POSTPROCESS", array);
   },
 
-  editDocument: ({ rootState, dispatch }, editedDocument) => {
+  editDocument: ({ rootState, commit, dispatch }, editedDocument) => {
     dispatch("document/startRecalculatingAnnotations", null, {
       root: true,
     });
-    return new Promise((resolve) => {
+
+    const oldId = rootState.document.documentId;
+
+    return new Promise((resolve, reject) => {
       HTTP.post(
         `/documents/${rootState.document.documentId}/postprocess/`,
         editedDocument
       )
         .then(async (response) => {
           if (response && response.status === 200) {
-            const newDocument = response.data[0];
-            const newId = newDocument.id;
-
-            await dispatch("document/setDocId", newId, {
-              root: true,
-            });
-            dispatch("document/pollDocumentEndpoint", null, {
-              root: true,
-            });
-            resolve(null);
-          } else {
-            resolve(response);
+            const newId = response.data[0].id;
+            dispatch("document/setSplittingSuggestions", null, { root: true });
+
+            commit("SET_SUBMIT_EDIT_CHANGES", false);
+
+            if (newId != oldId) {
+              if (getURLQueryParam("document") || getURLPath("docs")) {
+                navigateToNewDocumentURL(oldId, newId);
+              } else {
+                await dispatch("document/setDocId", newId, {
+                  root: true,
+                });
+
+                dispatch("document/pollDocumentEndpoint", null, {
+                  root: true,
+                });
+              }
+            } else {
+              dispatch("document/setSelectedDocument", response.data[0], {
+                root: true,
+              });
+
+              dispatch("document/pollDocumentEndpoint", null, {
+                root: true,
+              });
+            }
           }
+          resolve(response);
         })
         .catch((error) => {
-          resolve(error.response);
+          reject(error.response);
           console.log(error);
         });
     });
   },
+
+  setShowEditConfirmationModal: ({ commit }, value) => {
+    commit("SET_SHOW_EDIT_CONFIRMATION_MODAL", value);
+  },
+
+  setRedirectingUser: ({ commit }, value) => {
+    commit("SET_REDIRECTING_USER", value);
+  },
 };
 
 const mutations = {
@@ -183,12 +272,12 @@ const mutations = {
     state.editMode = option;
   },
 
-  SET_SPLIT_OVERVIEW: (state, overview) => {
-    state.splitOverview = overview;
+  SET_RENAME_AND_CATEGORIZE: (state, value) => {
+    state.renameAndCategorize = value;
   },
 
-  SET_DOCUMENT_PAGES_FOR_EDIT_MODE: (state, pages) => {
-    state.documentPagesListForEditMode = pages;
+  SET_PAGES_FOR_POSTPROCESS: (state, pages) => {
+    state.pagesForPostprocess = pages;
   },
 
   SET_UPDATED_DOCUMENT: (state, updatedDocument) => {
@@ -200,6 +289,15 @@ const mutations = {
   ADD_SELECTED_PAGE: (state, selectedPage) => {
     state.selectedPages.push(selectedPage);
   },
+  SET_SHOW_EDIT_CONFIRMATION_MODAL: (state, value) => {
+    state.showEditConfirmationModal = value;
+  },
+  SET_SUBMIT_EDIT_CHANGES: (state, value) => {
+    state.submitEditChanges = value;
+  },
+  SET_REDIRECTING_USER: (state, value) => {
+    state.redirectingUser = value;
+  },
 };
 
 export default {
@@ -207,4 +305,5 @@ export default {
   state,
   actions,
   mutations,
+  getters,
 };

package/src/store/project.js

@@ -2,8 +2,10 @@ import myImports from "../api";
 const HTTP = myImports.HTTP;
 
 const state = {
-  projectId: null,
-  currentUser: null
+  projectId: process.env.VUE_APP_PROJECT_ID,
+  currentUser: null,
+  documentsListPath: null,
+  documentsInProject: null,
 };
 
 const getters = {
@@ -11,13 +13,13 @@ const getters = {
    * Gets label sets for an annotation set creation
    */
   labelSetsFilteredForAnnotationSetCreation:
-    state => (labelsSet, annotationSets) => {
+    (state) => (labelsSet, annotationSets) => {
       let returnLabels = [];
       if (labelsSet) {
-        returnLabels = labelsSet.filter(labelSet => {
+        returnLabels = labelsSet.filter((labelSet) => {
           // check if label set has multiple and if not, if there's already an annotation set created
           if (!labelSet.has_multiple_annotation_sets) {
-            const existingAnnotationSet = annotationSets.find(annSet => {
+            const existingAnnotationSet = annotationSets.find((annSet) => {
               return annSet.id === labelSet.id;
             });
             return existingAnnotationSet;
@@ -27,7 +29,7 @@ const getters = {
         });
       }
       return returnLabels;
-    }
+    },
 };
 
 const actions = {
@@ -38,10 +40,10 @@ const actions = {
   fetchLabelSetDetails: ({ commit, state }, labelSetId) => {
     return new Promise((resolve, reject) => {
       HTTP.get(`label-sets/${labelSetId}/`)
-        .then(response => {
+        .then((response) => {
           return resolve(response.data);
         })
-        .catch(error => {
+        .catch((error) => {
           reject(error);
           console.log(error);
         });
@@ -52,10 +54,10 @@ const actions = {
   fetchLabelSets: ({ state }) => {
     return new Promise((resolve, reject) => {
       HTTP.get(`label-sets/?project=${state.projectId}`)
-        .then(response => {
+        .then((response) => {
           return resolve(response.data.results);
         })
-        .catch(error => {
+        .catch((error) => {
           reject(error);
           console.log(error);
         });
@@ -64,17 +66,39 @@ const actions = {
 
   fetchCurrentUser: ({ commit }) => {
     return HTTP.get(`/auth/me/`)
-      .then(response => {
-        commit("SET_CURRENT_USER", response.data.username);
+      .then((response) => {
+        commit("SET_CURRENT_USER", response.data);
       })
-      .catch(error => {
+      .catch((error) => {
         console.log(error);
       });
   },
 
   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 = {
@@ -83,7 +107,13 @@ 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 {
@@ -91,5 +121,5 @@ export default {
   state,
   actions,
   mutations,
-  getters
+  getters,
 };

package/src/store/selection.js

@@ -14,6 +14,7 @@ const state = {
   isSelecting: false,
   spanSelection: null,
   elementSelected: null, // selected element id
+  selectedEntities: null,
 };
 
 const getters = {
@@ -37,9 +38,6 @@ const getters = {
     }
     return null;
   },
-  isValueArray: () => (value) => {
-    return Array.isArray(value);
-  },
 };
 
 const actions = {
@@ -70,15 +68,22 @@ const actions = {
       commit("MOVE_SELECTION", points);
     }
 
-    dispatch("document/setSelectedEntities", null, { root: true });
+    commit("SET_SELECTED_ENTITIES", null);
   },
 
   endSelection: ({ commit, state }, end) => {
-    const xDiff = Math.abs(state.selection.start.x - end.x);
-    const yDiff = Math.abs(state.selection.start.y - end.y);
-    // if start and end points are the same, or if we have a selection smaller than 5x5,
+    let xDiff;
+    let yDiff;
+
+    if (end) {
+      xDiff = Math.abs(state.selection.start.x - end.x);
+      yDiff = Math.abs(state.selection.start.y - end.y);
+    }
+
+    // if "end" is not provided, start and end points are the same, or if we have a selection smaller than 5x5,
     // just reset
     if (
+      !end ||
       (yDiff <= 5 && xDiff <= 5) ||
       (state.selection.start.x === end.x && state.selection.start.y == end.y)
     ) {
@@ -99,9 +104,23 @@ const actions = {
     commit("SET_SPAN_SELECTION", span);
   },
 
-  getTextFromBboxes: ({ commit, rootState }, box) => {
+  setSelectedEntities: ({ commit }, entities) => {
+    commit("SET_SELECTED_ENTITIES", entities);
+  },
+
+  getTextFromBboxes: ({ commit, rootState }, { box, entities }) => {
+    let span;
+
+    if (entities) {
+      span = box.flatMap((s) => {
+        return s.original;
+      });
+    } else {
+      span = [box];
+    }
+
     return HTTP.post(`documents/${rootState.document.documentId}/bbox/`, {
-      span: [box],
+      span,
     })
       .then((response) => {
         if (response.data.span.length && response.data.span.length > 0) {
@@ -119,13 +138,23 @@ const actions = {
            * an annotation on this empty area, adding the offset_string
            * attribute, ready to be filled.
            */
-          commit("SET_SPAN_SELECTION", box);
+          commit("SET_SPAN_SELECTION", span);
         }
       })
       .catch((error) => {
         alert("Could not fetch the selected text from the backend");
       });
   },
+
+  getTextFromEntities: ({ commit, dispatch }, selectedEntities) => {
+    if (!selectedEntities) return;
+
+    return dispatch("getTextFromBboxes", {
+      box: selectedEntities,
+      entities: true,
+    });
+  },
+
   setSpanSelection: ({ commit }, span) => {
     commit("SET_SPAN_SELECTION", span);
   },
@@ -167,6 +196,9 @@ const mutations = {
   SET_SELECTION: (state, selection) => {
     state.selection = selection;
   },
+  SET_SELECTED_ENTITIES: (state, entities) => {
+    state.selectedEntities = entities;
+  },
 };
 
 export default {

package/src/utils/utils.js

@@ -5,14 +5,50 @@ export function sleep(duration) {
 export function getURLQueryParam(param) {
   const queryString = window.location.search;
   const urlParams = new URLSearchParams(queryString);
+
   if (urlParams.has(param)) {
     return urlParams.get(param);
   }
   return undefined;
 }
 
+export function getURLPath(value) {
+  const path = window.location.pathname;
+
+  if (!path.includes(`/${value}/`)) return;
+
+  const id = path.split(value)[1].split("/")[1];
+
+  if (id === "") return;
+
+  return id;
+}
+
 export function navigateToNewDocumentURL(oldId, newId) {
   const url = window.location.href;
   const newUrl = url.replace(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.href = newPath;
+
+  return true;
+}
+
+export function isElementArray(element) {
+  return Array.isArray(element);
+}