@konfuzio/document-validation-ui 0.1.10-dev.11 → 0.1.10-dev.13

package/src/components/App.vue

@@ -71,13 +71,19 @@ export default {
       required: false,
       default: "en",
     },
+    // eslint-disable-next-line vue/prop-name-casing
+    documents_list_path: {
+      type: String,
+      required: false,
+      default: "",
+    },
   },
   computed: {
     documentId() {
       if (getURLQueryParam("document")) {
         return getURLQueryParam("document");
-      } else if (getURLPath("docs")) {
-        return getURLPath("docs");
+      } else if (getURLPath("d")) {
+        return getURLPath("d");
       } else if (process.env.VUE_APP_DOCUMENT_ID) {
         return process.env.VUE_APP_DOCUMENT_ID;
       } else if (this.document) {
@@ -118,6 +124,15 @@ export default {
     showDocumentsList() {
       return process.env.VUE_APP_SHOW_DOCUMENTS_LIST;
     },
+    documentsListPath() {
+      if (process.env.VUE_APP_DOCUMENTS_LIST_PATH) {
+        return process.env.VUE_APP_DOCUMENTS_LIST_PATH;
+      } else if (this.documents_list_path && this.documents_list_path !== "") {
+        return this.documents_list_path;
+      } else {
+        return null;
+      }
+    },
   },
   created() {
     // Sentry config
@@ -160,6 +175,10 @@ export default {
       this.$store.dispatch("project/setProjectId", this.projectId),
       this.$store.dispatch("document/setDocId", this.documentId),
       this.$store.dispatch("document/setPublicView", this.isPublicView),
+      this.$store.dispatch(
+        "project/setDocumentsListPath",
+        this.documentsListPath
+      ),
     ]).finally(() => {
       this.$store.dispatch("document/fetchDocument");
     });

package/src/components/DocumentAnnotations/ChooseLabelSetModal.vue

@@ -4,7 +4,7 @@
       ref="modal"
       v-model="show"
       :can-cancel="['x', 'outside']"
-      class="modal-absolute modal-400 modal-no-footer"
+      class="modal-absolute modal-400 modal-no-footer model-overflow-visible"
       :on-cancel="close"
     >
       <section class="modal-card-body">
@@ -149,7 +149,7 @@ export default {
         }
       );
 
-      this.$emit("labelSet", this.selectedLabelSet);
+      this.$emit("finish", this.selectedLabelSet);
       this.close();
     },
     setSelectedLabelSet(labelSet) {
@@ -157,6 +157,7 @@ export default {
       this.selectedLabelSet = labelSet;
     },
     close() {
+      this.$store.dispatch("display/showChooseLabelSetModal", null);
       this.$emit("close");
     },
     createLabelsList(labels) {

package/src/components/DocumentAnnotations/EmptyAnnotation.vue

@@ -111,7 +111,7 @@ export default {
     spanSelection(newValue) {
       if (!newValue) return;
 
-      //   // Check if the bbox has no string
+      // Check if the bbox has no string
       if (newValue[0] && !newValue[0].offset_string) {
         this.$store.dispatch("document/resetEditAnnotation");
         this.$store.dispatch("selection/disableSelection");

package/src/components/DocumentAnnotations/MultiAnnotationTableOverlay.vue

@@ -100,7 +100,7 @@ import AnnotationRow from "../DocumentAnnotations/AnnotationRow";
 import DraggableIcon from "../../assets/images/DraggableIcon";
 
 export default {
-  name: "MultiAnnotationTablePopup",
+  name: "MultiAnnotationTableOverlay",
   components: {
     AnnotationRow,
     DraggableIcon,

package/src/components/DocumentDashboard.vue

@@ -12,6 +12,11 @@
         :left="documentContainerLeftPadding"
         :width="documentContainerWidth"
       />
+      <ChooseLabelSetModal
+        v-if="showChooseLabelSetModal && showChooseLabelSetModal.show"
+        :is-multiple-annotations="showChooseLabelSetModal.isMultipleAnnotations"
+        @finish="showChooseLabelSetModal.finish"
+      />
 
       <transition name="slide-fade">
         <div
@@ -50,6 +55,7 @@ import { DocumentEdit } from "./DocumentEdit";
 import ErrorMessage from "./ErrorMessage";
 import NotOptimizedViewportModal from "../components/DocumentModals/NotOptimizedViewportModal";
 import DocumentErrorModal from "../components/DocumentModals/DocumentErrorModal";
+import ChooseLabelSetModal from "../components/DocumentAnnotations/ChooseLabelSetModal";
 
 /**
  * This component shows the PDF pages in a scrolling component and
@@ -67,6 +73,7 @@ export default {
     NotOptimizedViewportModal,
     DocumentErrorModal,
     MultiAnnotationTableOverlay,
+    ChooseLabelSetModal,
   },
   data() {
     return {
@@ -84,6 +91,7 @@ export default {
       "pageWidthScale",
       "currentPage",
       "showAnnSetTable",
+      "showChooseLabelSetModal",
     ]),
     ...mapState("document", [
       "showActionError",

package/src/components/DocumentEdit/DocumentEdit.vue

@@ -27,8 +27,7 @@
     <div v-if="!renameAndCategorize" class="sidebar">
       <EditSidebar
         :split-suggestions-enabled="splitSuggestionsEnabled"
-        @rotate-left="rotatePage"
-        @rotate-right="rotatePage"
+        @rotate="rotatePage"
         @rotate-all-left="handleRotationsToTheLeft"
         @rotate-all-right="handleRotationsToTheRight"
         @handle-splitting-suggestions="applySplittingSuggestions"
@@ -46,6 +45,7 @@ import RenameAndCategorize from "./RenameAndCategorize";
 import EditPages from "./EditPages";
 import SplitInfoBar from "./SplitInfoBar";
 import EditConfirmationModal from "./EditConfirmationModal";
+import { navigateToDocumentsList } from "../../utils/utils";
 
 /**
  * This component shows a document thumbnail grid view and sidebar, to be able to edit the document.
@@ -85,6 +85,7 @@ export default {
       "selectedPages",
       "submitEditChanges",
     ]),
+    ...mapState("project", ["projectId", "documentsListPath"]),
     ...mapGetters("edit", ["documentShouldBePostprocessed"]),
   },
   watch: {
@@ -169,13 +170,11 @@ export default {
 
     /** ROTATE */
     rotatePage(direction) {
-      const page = this.selectedPages.map((page) => {
-        return page;
-      });
-
-      this.$store.dispatch("edit/rotatePage", {
-        page,
-        direction,
+      this.selectedPages.forEach((page) => {
+        this.$store.dispatch("edit/rotatePage", {
+          page,
+          direction,
+        });
       });
     },
     handleRotationsToTheLeft() {
@@ -386,6 +385,8 @@ export default {
               defaultErrorMessage: this.$t("edit_error"),
             });
           });
+
+        navigateToDocumentsList(this.documentsListPath, this.projectId);
       } else {
         // Check if only the category changes:
         const newCategory = this.updatedDocument[0].category;

package/src/components/DocumentEdit/EditSidebar.vue

@@ -129,10 +129,10 @@ export default {
   },
   methods: {
     rotateLeft() {
-      this.$emit("rotate-left", "left");
+      this.$emit("rotate", "left");
     },
     rotateRight() {
-      this.$emit("rotate-right", "right");
+      this.$emit("rotate", "right");
     },
     rotateAllLeft() {
       this.$emit("rotate-all-left");

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/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

@@ -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/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/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

@@ -1063,7 +1063,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) {

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: [],
@@ -113,12 +113,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 +131,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;
             }
@@ -271,6 +271,7 @@ const mutations = {
   },
   ADD_SELECTED_PAGE: (state, selectedPage) => {
     state.selectedPages.push(selectedPage);
+    console.log(state.selectedPages);
   },
   SET_SHOW_EDIT_CONFIRMATION_MODAL: (state, value) => {
     state.showEditConfirmationModal = value;

package/src/store/project.js

@@ -4,6 +4,7 @@ const HTTP = myImports.HTTP;
 const state = {
   projectId: null,
   currentUser: null,
+  documentsListPath: null,
 };
 
 const getters = {
@@ -75,6 +76,10 @@ const actions = {
   setCurrentUser: ({ commit }, currentUser) => {
     commit("SET_CURRENT_USER", currentUser);
   },
+
+  setDocumentsListPath: ({ commit }, path) => {
+    commit("SET_DOCUMENTS_LIST_PATH", path);
+  },
 };
 
 const mutations = {
@@ -84,6 +89,9 @@ const mutations = {
   SET_CURRENT_USER: (state, currentUser) => {
     state.currentUser = currentUser;
   },
+  SET_DOCUMENTS_LIST_PATH: (state, path) => {
+    state.documentsListPath = path;
+  },
 };
 
 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,16 @@ export function navigateToNewDocumentURL(oldId, newId) {
   window.location.replace(newUrl);
 }
 
+export function navigateToDocumentsList(path, projectId) {
+  if (!path) return;
+
+  const parameters = `?project=${projectId}&is_reviewed__exact=0`;
+
+  const newPath = `${path}/${parameters}`;
+
+  window.location.pathname = newPath;
+}
+
 export function isElementArray(element) {
   return Array.isArray(element);
 }