@konfuzio/document-validation-ui 0.1.26-dev.2 → 0.1.26-dev.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konfuzio/document-validation-ui",
-  "version": "0.1.26-dev.2",
+  "version": "0.1.26-dev.4",
   "repository": "git://github.com:konfuzio-ai/document-validation-ui.git",
   "main": "dist/app.js",
   "scripts": {

package/src/assets/scss/document_annotations.scss

@@ -501,6 +501,12 @@
       }
     }
 
+    .button-icon {
+      height: 24px;
+      width: 24px;
+      padding: 6px;
+    }
+
     .accept-decline-container {
       padding-right: 14px;
       display: flex;

package/src/components/App.vue

@@ -78,6 +78,12 @@ export default {
       required: false,
       default: "",
     },
+    // eslint-disable-next-line vue/prop-name-casing
+    review_filter: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     documentId() {
@@ -130,6 +136,15 @@ export default {
         return null;
       }
     },
+    reviewFilter() {
+      if (process.env.VUE_APP_DOCUMENTS_LIST_REVIEW_FILTER) {
+        return process.env.VUE_APP_DOCUMENTS_LIST_REVIEW_FILTER;
+      } else if (this.review_filter) {
+        return this.review_filter;
+      } else {
+        return null;
+      }
+    },
   },
   created() {
     // Sentry config
@@ -172,6 +187,7 @@ export default {
     // document and project config
     Promise.all([
       this.$store.dispatch("display/setDetailsUrl", this.detailsUrl),
+      this.$store.dispatch("display/setReviewFilter", this.reviewFilter),
       this.$store.dispatch("document/setDocId", this.documentId),
       this.$store.dispatch("document/setPublicView", this.isPublicView),
       this.$store.dispatch(

package/src/components/DocumentAnnotations/AnnotationActionButtons.vue

@@ -20,7 +20,10 @@
       type="is-primary"
       @click.stop="save"
     >
-      {{ $t("save") }}
+      <span v-if="showText">{{ $t("save") }}</span>
+      <b-tooltip v-else position="is-left" :label="$t('save')">
+        <b-icon icon="floppy-disk" size="small" class="button-icon" />
+      </b-tooltip>
     </b-button>
 
     <!-- cancel button -->
@@ -57,14 +60,20 @@
       class="missing-button-container"
     >
       <b-button type="is-ghost" class="missing-btn" @click.stop="markAsMissing">
-        {{ $t("missing_annotation") }}
+        <span v-if="showText">{{ $t("missing_annotation") }}</span>
+        <b-tooltip v-else position="is-left" :label="$t('missing_annotation')">
+          <b-icon icon="xmark" size="small" class="button-icon" />
+        </b-tooltip>
       </b-button>
       <b-button
         type="is-ghost"
         class="search-btn"
         @click.stop="searchInDocument"
       >
-        {{ $t("search_in_document") }}
+        <span v-if="showText">{{ $t("search_in_document") }}</span>
+        <b-tooltip v-else position="is-left" :label="$t('search_in_document')">
+          <b-icon icon="search" size="small" class="button-icon" />
+        </b-tooltip>
       </b-button>
     </div>
 
@@ -75,7 +84,10 @@
       type="is-primary"
       @click.stop="restore"
     >
-      {{ $t("restore") }}
+      <span v-if="showText">{{ $t("restore") }}</span>
+      <b-tooltip v-else position="is-left" :label="$t('restore')">
+        <b-icon icon="trash-arrow-up" size="small" class="button-icon" />
+      </b-tooltip>
     </b-button>
   </div>
 </template>
@@ -83,6 +95,7 @@
 /* Component for showing actions for each annotation row */
 import { mapGetters, mapState } from "vuex";
 import AcceptedCheckMark from "../../assets/images/AcceptedCheckMark";
+import { TEXT_BREAKPOINT_WIDTH } from "../../constants";
 export default {
   name: "AnnotationActionButtons",
   components: {
@@ -116,6 +129,11 @@ export default {
       required: false,
     },
   },
+  data() {
+    return {
+      showText: window.innerWidth > TEXT_BREAKPOINT_WIDTH,
+    };
+  },
   computed: {
     ...mapState("document", ["publicView", "missingAnnotations"]),
     ...mapGetters("document", ["isDocumentReviewed"]),
@@ -129,7 +147,17 @@ export default {
       );
     },
   },
+  created() {
+    window.addEventListener("resize", this.resize);
+  },
+
+  destroyed() {
+    window.removeEventListener("resize", this.resize);
+  },
   methods: {
+    resize() {
+      this.showText = window.innerWidth > TEXT_BREAKPOINT_WIDTH;
+    },
     save() {
       this.$emit("save");
     },

package/src/components/DocumentTopBar/DocumentTopBar.vue

@@ -123,6 +123,7 @@ export default {
       "loading",
       "recalculatingAnnotations",
     ]),
+    ...mapState("display", ["reviewFilter"]),
     ...mapState("category", ["categories"]),
     ...mapState("edit", ["editMode"]),
     ...mapState("project", ["documentsInProject"]),
@@ -163,7 +164,7 @@ export default {
       // Only consider documents who have a status of "ready"
       const filteredDocuments = this.documentsInProject.filter(
         (document) =>
-          this.isDocumentReadyToBeReviewed(document) ||
+          (this.reviewFilter && this.isDocumentReadyToBeReviewed(document)) ||
           this.waitingForSplittingConfirmation(document)
       );
 

package/src/constants.js

@@ -2,4 +2,5 @@ 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 MULTI_ANN_TABLE_FEATURE = false;

package/src/icons.js

@@ -19,6 +19,8 @@ import {
   faArrowRight,
   faDownload,
   faSearch,
+  faTrashArrowUp,
+  faFloppyDisk,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon as Icons } from "@fortawesome/vue-fontawesome";
 
@@ -41,7 +43,9 @@ library.add(
   faArrowLeft,
   faArrowRight,
   faDownload,
-  faSearch
+  faSearch,
+  faTrashArrowUp,
+  faFloppyDisk
 );
 
 export default Icons;

package/src/store/display.js

@@ -41,6 +41,7 @@ const state = {
   searchLoading: false,
   currentSearchResult: null,
   detailsUrl: null,
+  reviewFilter: false,
 };
 
 const getters = {
@@ -296,6 +297,10 @@ const actions = {
     commit("SET_DETAILS_URL", value);
   },
 
+  setReviewFilter: ({ commit }, value) => {
+    commit("SET_REVIEW_FILTER", value);
+  },
+
   debounceSearch: debounce(({ commit, dispatch }, query) => {
     dispatch("search", query);
   }, 300),
@@ -417,6 +422,9 @@ const mutations = {
   SET_DETAILS_URL: (state, value) => {
     state.detailsUrl = value;
   },
+  SET_REVIEW_FILTER: (state, value) => {
+    state.reviewFilter = value;
+  },
 };
 
 export default {