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

package/src/components/App.vue

@@ -69,7 +69,9 @@ export default {
     locale: {
       type: String,
       required: false,
+      default: "en",
     },
+    // eslint-disable-next-line vue/prop-name-casing
     documents_list_path: {
       type: String,
       required: false,

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/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/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,
     };
   },
 
@@ -460,10 +448,6 @@ export default {
       this.$refs.stage.$el.style.cursor = "inherit";
     },
 
-    handleMultiAnnSelectionFinished(newMultiAnnotationSetTable) {
-      this.newMultiAnnotationSetTable = newMultiAnnotationSetTable;
-    },
-
     /**
      * Konva draws pages like this.
      */
@@ -556,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

@@ -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/components/DocumentPage/MultiAnnotationTablePopup.vue

@@ -1,226 +0,0 @@
-<template>
-  <div
-    class="multi-ann-table-popup"
-    :style="{
-      left: `${tablePosition.x}px`,
-      top: `${tablePosition.y - 22}px`,
-      width: `${tablePosition.width}px`,
-      height: `${tablePosition.height}px`,
-      maxWidth: `${pageSize.width}px`,
-      maxHeight: `${pageSize.height}px`,
-    }"
-  >
-    <b-table
-      ref="table"
-      class="full-height"
-      detail-icon="faScissors"
-      :data="rows"
-      :columns="columns"
-      :narrowed="true"
-      :bordered="true"
-      draggable-column
-      @columndragstart="columndragstart"
-      @columndrop="columndrop"
-      @columndragover="columndragover"
-      @columndragleave="columndragleave"
-    >
-    </b-table>
-  </div>
-</template>
-
-<script>
-import { mapState } from "vuex";
-
-export default {
-  name: "MultiAnnotationTablePopup",
-
-  props: {
-    tablePosition: {
-      required: true,
-      type: Object,
-      default: null,
-    },
-    pageSize: {
-      required: true,
-      type: Object,
-      default: null,
-    },
-    labelSet: {
-      required: true,
-      type: Object,
-      default: null,
-    },
-    groupedEntities: {
-      required: true,
-      type: Object,
-      default: null,
-    },
-  },
-  data() {
-    const columns = this.labelSet.labels.map((label) => {
-      return {
-        field: `${label.id}`,
-        label: label.name,
-        centered: true,
-      };
-    });
-    return {
-      rows: [],
-      columns,
-      counter: 0,
-      draggingColumn: null,
-      draggingColumnIndex: null,
-      orderedEntities: [],
-    };
-  },
-  computed: {
-    ...mapState("document", ["documentId"]),
-  },
-  mounted() {
-    this.handleRows();
-    setTimeout(() => {
-      // prevent click propagation when opening the popup
-      document.body.addEventListener("click", this.clickOutside);
-      this.$refs.table.$el.scrollIntoView({
-        behavior: "smooth",
-        block: "nearest",
-        inline: "center",
-      });
-    }, 200);
-
-    // show action bar
-    this.$store.dispatch("display/showDocumentActionBar", {
-      show: true,
-      text: this.$t("drag_drop_columns_multi_ann"),
-      icon: "drag",
-      loading: false,
-      action: () => {
-        this.submitAnnotations();
-        this.$emit("close");
-      },
-    });
-  },
-  destroyed() {
-    this.$store.dispatch("display/showDocumentActionBar", { show: false });
-    this.$store.dispatch("selection/disableSelection");
-    document.body.removeEventListener("click", this.clickOutside);
-  },
-  methods: {
-    handleRows() {
-      this.rows = [];
-      this.orderedEntities = []; // this will match the order of entities in the table so we have a way of tracking them once we submit
-      let rowIndex = 0;
-
-      Object.entries(this.groupedEntities).forEach(([key, groupedEntity]) => {
-        let row = null;
-        this.columns.forEach((column, index) => {
-          let spans = [];
-          if (
-            Object.entries(groupedEntity)[index] &&
-            Object.entries(groupedEntity)[index].length > 0
-          ) {
-            spans = Object.entries(groupedEntity)[index][1];
-          }
-          const entityExists = spans.length > 0;
-
-          let textContent = "";
-
-          spans.forEach((entity) => {
-            textContent = `${textContent} ${entity.offset_string}`;
-          });
-
-          row = {
-            ...row,
-            [column.field]: textContent,
-          };
-          if (entityExists) {
-            const customEntity = {
-              spans: [...spans],
-              label_id: column.field,
-              row_index: rowIndex,
-            };
-
-            this.orderedEntities.push(customEntity);
-          }
-        });
-        if (row !== null) {
-          rowIndex++;
-        }
-        this.rows.push(row);
-      });
-    },
-
-    clickOutside(event) {
-      if (!(this.$el == event.target || this.$el.contains(event.target))) {
-        this.$emit("close");
-      }
-    },
-    async submitAnnotations() {
-      this.$store.dispatch("display/showDocumentActionBar", {
-        show: true,
-        loading: false,
-        action: true,
-      });
-
-      this.orderedEntities.forEach((orderedEntity) => {
-        annotations.push({
-          document: this.documentId,
-          span: orderedEntity.spans,
-          label: orderedEntity.label_id,
-          is_correct: true,
-          revised: false,
-          label_set: labelSet.id,
-          set_reference: orderedEntity.row_index,
-        });
-      });
-
-      this.$store
-        .dispatch("document/createAnnotation", annotations)
-        .then(() => {
-          this.$emit("close");
-        })
-        .catch((error) => {
-          this.$store.dispatch("document/createErrorMessage", {
-            error,
-            serverErrorMessage: this.$t("server_error"),
-            defaultErrorMessage: this.$t("error_creating_multi_ann"),
-          });
-        });
-    },
-    deleteRow(index) {
-      this.rows.splice(index, 1);
-    },
-
-    //#region Column Drag
-    columndragstart(payload) {
-      this.draggingColumn = payload.column;
-      this.draggingColumnIndex = payload.index;
-      payload.event.dataTransfer.effectAllowed = "copy";
-    },
-    columndragover(payload) {
-      payload.event.dataTransfer.dropEffect = "copy";
-      payload.event.target.closest("th").classList.add("is-selected");
-      payload.event.preventDefault();
-    },
-    columndragleave(payload) {
-      payload.event.target.closest("th").classList.remove("is-selected");
-      payload.event.preventDefault();
-    },
-    columndrop(payload) {
-      payload.event.target.closest("th").classList.remove("is-selected");
-      const droppedOnColumnIndex = payload.index;
-
-      const column = this.columns[this.draggingColumnIndex];
-      this.columns.splice(this.draggingColumnIndex, 1);
-      this.columns.splice(droppedOnColumnIndex, 0, column);
-      this.handleRows();
-    },
-    //#endregion
-  },
-};
-</script>
-<style
-  scoped
-  lang="scss"
-  src="../../assets/scss/multi_ann_table_popup.scss"
-></style>