@konfuzio/document-validation-ui 0.1.32 → 0.1.34

package/src/components/DocumentTopBar/DocumentNameEditModal.vue

@@ -0,0 +1,186 @@
+<template>
+  <section class="document-name-edit-modal">
+    <b-modal
+      ref="modal"
+      v-model="show"
+      :can-cancel="['x', 'outside']"
+      class="modal-absolute modal-400 modal-no-footer model-overflow-visible"
+      :on-cancel="close"
+    >
+      <section class="modal-card-body">
+        <div class="content">
+          <h3>
+            {{
+              isMultipleAnnotations
+                ? $t("new_multi_ann_title")
+                : $t("new_ann_set_title")
+            }}
+          </h3>
+          <p>
+            {{
+              isMultipleAnnotations
+                ? $t("new_multi_ann_description")
+                : $t("new_ann_set_description")
+            }}
+          </p>
+          <b-tooltip
+            multilined
+            :active="labelSets.length === 0"
+            size="is-large"
+            position="is-bottom"
+            class="bottom-aligned"
+            :close-delay="5000"
+          >
+            <template #content>
+              <div ref="tooltipContent"></div>
+            </template>
+            <b-dropdown
+              v-model="selectedLabelSet"
+              aria-role="list"
+              :disabled="labelSets.length === 0"
+              :class="[
+                'label-set-dropdown',
+                labelSets.length === 0 && 'dropdown-disabled',
+              ]"
+              scrollable
+            >
+              <template #trigger>
+                <div>
+                  <div>
+                    <span v-if="selectedLabelSet">{{
+                      selectedLabelSet.name
+                    }}</span>
+                    <span v-else>{{ $t("select_label_set") }}</span>
+                  </div>
+                </div>
+              </template>
+              <b-dropdown-item
+                v-for="labelSetItem in labelSets"
+                :key="labelSetItem.id"
+                aria-role="listitem"
+                :value="labelSetItem"
+                @click="setSelectedLabelSet(labelSetItem)"
+              >
+                <span>{{ labelSetItem.name }}</span>
+              </b-dropdown-item>
+            </b-dropdown>
+          </b-tooltip>
+          <div v-if="selectedLabelSet" class="labels-list">
+            <div v-if="isMultipleAnnotations" class="labels-select">
+              <div v-for="label in labels" :key="label.id">
+                <b-checkbox v-model="label.selected">{{
+                  label.name
+                }}</b-checkbox>
+              </div>
+            </div>
+            <span v-for="(label, index) in labels" v-else :key="label.id">{{
+              `${label.name}${index + 1 !== labels.length ? ", " : ""}`
+            }}</span>
+          </div>
+          <b-button
+            class="submit-ann-set primary-button"
+            type="is-primary"
+            :disabled="!selectedLabelSet"
+            @click="submit"
+          >
+            {{ $t("continue") }}
+          </b-button>
+          <p
+            v-if="!isMultipleAnnotations && selectedLabelSet"
+            class="next-step-description"
+          >
+            {{ $t("new_ann_set_hint") }}
+          </p>
+        </div>
+      </section>
+    </b-modal>
+  </section>
+</template>
+
+<script>
+/**
+ * This component shows a modal to choose a label set from the project
+ */
+
+import { mapGetters, mapState } from "vuex";
+
+export default {
+  name: "CreateAnnotationSetModal",
+  props: {
+    isMultipleAnnotations: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      selectedLabelSet: null,
+      labelSets: [],
+      show: true,
+      labels: [],
+    };
+  },
+  computed: {
+    ...mapState("document", ["annotationSets"]),
+    ...mapGetters("project", ["labelSetsFilteredForAnnotationSetCreation"]),
+  },
+  watch: {
+    labelSets(newValue) {
+      if (newValue.length === 0) {
+        this.setTooltipText();
+      }
+    },
+  },
+  mounted() {
+    this.$store.dispatch("project/fetchLabelSets").then((data) => {
+      this.labelSets = this.labelSetsFilteredForAnnotationSetCreation(
+        data,
+        this.annotationSets
+      );
+    });
+  },
+  methods: {
+    submit() {
+      // filter labels that were selected (by default all are selected so no issue if the feature is disabled)
+      const labelsFiltered = this.labels.filter((label) => label.selected);
+      this.selectedLabelSet.labels = this.selectedLabelSet.labels.filter(
+        (label) => {
+          return labelsFiltered.find((filtered) => filtered.id === label.id);
+        }
+      );
+
+      this.$emit("finish", this.selectedLabelSet);
+      this.close();
+    },
+    setSelectedLabelSet(labelSet) {
+      this.createLabelsList(labelSet.labels);
+      this.selectedLabelSet = labelSet;
+    },
+    close() {
+      this.$store.dispatch("display/showChooseLabelSetModal", null);
+      this.$emit("close");
+    },
+    createLabelsList(labels) {
+      this.labels = labels.map((label) => {
+        return {
+          ...label,
+          selected: true,
+        };
+      });
+    },
+    setTooltipText() {
+      // Text set from innerHTML vs 'label' due to html tag in locales file string
+      this.$refs.tooltipContent.innerHTML = this.$t(
+        "no_multi_ann_labelset_model"
+      );
+    },
+  },
+};
+</script>
+
+<style
+  scoped
+  lang="scss"
+  src="../../assets/scss/choose_label_set_modal.scss"
+></style>

package/src/components/DocumentTopBar/DocumentTopBar.vue

@@ -17,7 +17,7 @@
         ]"
       >
         <div
-          v-if="previousDocument"
+          :style="`visibility: ${previousDocument ? 'visible' : 'hidden'}`"
           class="left-arrow navigation-arrow"
           type="button"
           @click="navigateToDocument(previousDocument)"
@@ -28,8 +28,8 @@
         <DocumentName :data-file-name="selectedDocument.data_file_name" />
 
         <div
-          v-if="nextDocument"
           class="right-arrow navigation-arrow"
+          :style="`visibility: ${nextDocument ? 'visible' : 'hidden'}`"
           type="button"
           @click="navigateToDocument(nextDocument)"
         >
@@ -84,7 +84,7 @@
       </div>
     </div>
     <div v-else class="loading-top-bar">
-      <b-skeleton position="is-centered" width="25%" height="60%" />
+      <b-skeleton position="is-centered" width="20%" height="60%" />
     </div>
   </div>
 </template>
@@ -160,13 +160,7 @@ export default {
       this.setComponentWidth(this.$refs.documentTopBar.offsetWidth);
     },
     getPreviousAndNextDocuments() {
-      // Only consider documents who have a status of "ready"
-      const filteredDocuments =
-        this.documentsInProject; /*this.documentsInProject.filter(
-        (document) =>
-          (this.isDocumentReadyToBeReviewed(document)) ||
-          this.waitingForSplittingConfirmation(document)
-      );*/
+      const filteredDocuments = this.documentsInProject;
 
       if (!filteredDocuments) return;
 

package/src/constants.js

@@ -2,5 +2,11 @@ export const PIXEL_RATIO = window.devicePixelRatio || 1;
 export const VIEWPORT_RATIO = 0.98;
 export const MINIMUM_APP_WIDTH = 600;
 export const MINIMUM_OPTIMIZED_APP_WIDTH = 950;
-export const TEXT_BREAKPOINT_WIDTH = 1350;
+export const TEXT_BREAKPOINT_WIDTH = (locale) => {
+  if (locale === "en") {
+    return 1350;
+  } else {
+    return 1800;
+  }
+};
 export const MULTI_ANN_TABLE_FEATURE = false;

package/src/store/display.js

@@ -87,6 +87,31 @@ const getters = {
     return currentResult;
   },
 
+  /**
+   * We take the entities from the backend and resize them according
+   * to the `scale` (zoom), the `imageScale` (proportion between the original
+   * document and the served image) and `PIXEL_RATIO` (in case of retina displays).
+   * We also change the original bbox format to something that can be used with CSS.
+   * The original is stored inside the `original` property, since it can be reused
+   * when we're sending the entity to the backend for selection or saving.
+   */
+  scaledEntities: (state, getters) => (entities, page) => {
+    // entities are either not loaded yet or empty
+    if (!entities || entities.length === 0) {
+      return [];
+    }
+
+    return entities.map((entity) => {
+      const box = getters.bboxToRect(page, entity);
+      return {
+        original: entity,
+        scaled: {
+          ...box,
+        },
+      };
+    });
+  },
+
   /**
    * The proportion between the original size of the page and the
    * image rendering.

package/src/store/document.js

@@ -55,19 +55,6 @@ const state = {
   },
 };
 const getters = {
-  /**
-   * Get entities inside a box
-   */
-  entitiesOnSelection: (state) => (box, page) => {
-    return page.entities.filter(
-      (entity) =>
-        box.x0 <= entity.x0 &&
-        box.x1 >= entity.x1 &&
-        box.y0 <= entity.y0 &&
-        box.y1 >= entity.y1
-    );
-  },
-
   /**
    * Number of pages. If the pages array doesn't exist yet, return 0.
    */
@@ -1345,6 +1332,7 @@ const actions = {
     if (state.splittingSuggestions) {
       commit("SET_SPLITTING_SUGGESTIONS", null);
     }
+    commit("SET_RECALCULATING_ANNOTATIONS", false);
 
     if (getURLQueryParam("document") || getURLPath("d")) {
       navigateToNewDocumentURL(state.selectedDocument.id, newDocumentId);

package/src/store/project.js

@@ -93,7 +93,7 @@ const actions = {
 
   fetchDocumentList: ({ commit, state }, parameters) => {
     return HTTP.get(
-      `documents/?project=${state.projectId}&assignee=${state.currentUser.username}&limit=100&${parameters}`
+      `documents/?project=${state.projectId}&limit=100&${parameters}`
     )
       .then((response) => {
         if (response.data.results) {

package/src/store/selection.js

@@ -38,6 +38,19 @@ const getters = {
     }
     return null;
   },
+
+  /**
+   * Get entities inside a box
+   */
+  entitiesOnSelection: (state) => (box, page) => {
+    return page.entities.filter(
+      (entity) =>
+        box.x0 <= entity.x0 &&
+        box.x1 >= entity.x1 &&
+        box.y0 <= entity.y0 &&
+        box.y1 >= entity.y1
+    );
+  },
 };
 
 const actions = {