@konfuzio/document-validation-ui 0.1.6 → 0.1.7-pre-release-1

package/src/components/DocumentEdit/EditPages.vue

@@ -13,68 +13,49 @@
         :key="page.id"
         class="image-section"
         tabindex="0"
-        @focusout="clickOutside"
       >
-        <div
-          class="image-container"
-          :tabindex="index"
-          @click="selectPage(page)"
-        >
-          <div class="thumbnail">
+        <div class="top-section">
+          <EditPageThumbnail
+            :page="page"
+            :index="index"
+            :rotation="getRotation(page.id)"
+          />
+          <div
+            :class="[
+              'splitting-lines',
+              splittingLines &&
+                splittingLines[index].page === page.number &&
+                'active-split',
+            ]"
+            @click="handleSplittingLines(page.number, 'manual')"
+          >
+            <div class="scissors-icon">
+              <b-icon icon="scissors" class="is-small" />
+            </div>
             <div
-              :class="[
-                'img-container',
-                selected && isPageSelected(page.id) === page.id && 'selected',
-              ]"
+              v-if="
+                splittingLines && splittingLines[index].page === page.number
+              "
+              class="lines"
             >
-              <ServerImage
-                class="img-thumbnail"
-                :image-url="`${page.thumbnail_url}?${page.updated_at}`"
-                :style="{
-                  transform: 'rotate(' + getRotation(page.id) + 'deg)',
-                }"
-              >
-                <b-skeleton width="57px" height="57px" />
-              </ServerImage>
+              <SplitZigZag
+                :color="
+                  splittingLines &&
+                  splittingLines[index].origin &&
+                  splittingLines[index].origin === 'AI' &&
+                  splitSuggestionsEnabled
+                    ? 'green'
+                    : 'dark'
+                "
+              />
             </div>
-            <div class="icon-container">
-              <div class="action-icon">
-                <EyeIcon />
-              </div>
+            <div v-else class="lines">
+              <SplitLines />
             </div>
           </div>
-          <span class="page-number">{{ page.number }}</span>
         </div>
-        <div
-          :class="[
-            'splitting-lines',
-            splittingLines &&
-              splittingLines[index].page === page.number &&
-              'active-split',
-          ]"
-          @click="handleSplittingLines(page.number, 'manual')"
-        >
-          <div class="scissors-icon">
-            <b-icon icon="scissors" class="is-small" />
-          </div>
-          <div
-            v-if="splittingLines && splittingLines[index].page === page.number"
-            class="lines"
-          >
-            <SplitZigZag
-              :color="
-                splittingLines &&
-                splittingLines[index].origin &&
-                splittingLines[index].origin === 'AI' &&
-                splitSuggestionsEnabled
-                  ? 'green'
-                  : 'dark'
-              "
-            />
-          </div>
-          <div v-else class="lines">
-            <SplitLines />
-          </div>
+        <div class="bottom-section">
+          <span class="page-number">{{ page.number }}</span>
         </div>
       </div>
     </draggable>
@@ -88,19 +69,18 @@
  */
 
 import { mapState } from "vuex";
-import ServerImage from "../../assets/images/ServerImage";
 import SplitLines from "../../assets/images/SplitLines";
 import SplitZigZag from "../../assets/images/SplitZigZag";
-import EyeIcon from "../../assets/images/EyeIcon";
+import EditPageThumbnail from "./EditPageThumbnail";
+
 import draggable from "vuedraggable";
 
 export default {
   name: "EditPages",
   components: {
-    ServerImage,
     SplitLines,
     SplitZigZag,
-    EyeIcon,
+    EditPageThumbnail,
     draggable,
   },
   props: {
@@ -116,7 +96,6 @@ export default {
   data() {
     return {
       editPages: null,
-      selected: null,
     };
   },
 
@@ -131,7 +110,6 @@ export default {
       "editMode",
       "pagesForPostprocess",
       "splitOverview",
-      "selectedPages",
       "splitOverview",
     ]),
   },
@@ -156,42 +134,7 @@ export default {
     this.editPages = this.pagesForPostprocess;
   },
   methods: {
-    handlePageChange(pageNumber) {
-      this.$emit("change-page", pageNumber);
-    },
-    isPageSelected(id) {
-      if (this.selectedPages.length === 0) return;
-      const selectedPage = this.selectedPages.find((page) => page.id === id);
-      if (selectedPage) return selectedPage.id;
-    },
-    selectPage(page) {
-      if (!page) return;
-      this.$emit("change-page", page.number);
-      const selectedPage = {
-        id: page.id,
-        number: page.number,
-        thumbnail_url: page.thumbnail_url,
-      };
-      this.selected = true;
-
-      this.$store.dispatch("edit/setSelectedPages", selectedPage);
-    },
-    clickOutside(event) {
-      if (!event || this.selectedPages.length === 0) return;
-
-      // Check if user clicks in any element other than thumbnail or buttons to deselect the thumbnail
-      if (
-        event.target.className.includes("button") ||
-        event.target.className.includes("image-container") ||
-        event.target.className.includes("icon")
-      ) {
-        return;
-      }
-
-      this.deselect();
-    },
     deselect() {
-      this.selected = null;
       this.$store.dispatch("edit/setSelectedPages");
     },
     getRotation(pageId) {

package/src/components/DocumentPage/DocumentToolbar.vue

@@ -30,7 +30,10 @@
         <div class="fit-zoom icon" @click.prevent.stop="fitAuto">
           <FitZoomIcon />
         </div>
-        <div class="zoom-in icon" @click.prevent.stop="zoomIn">
+        <div
+          :class="['zoom-in', 'icon', isZoomInExceeding && 'zoom-disabled']"
+          @click.prevent.stop="zoomIn"
+        >
           <PlusIcon />
         </div>
         <div class="zoom-out icon" @click.prevent.stop="zoomOut">
@@ -63,6 +66,7 @@ export default {
     return {
       defaultScale: null,
       currentPercentage: 100,
+      maxPercentage: 500,
       defaultPercentage: 0.25,
       fitPercentage: 0.5,
       toolbarModalOpen: true,
@@ -80,6 +84,12 @@ export default {
       "documentIsReviewed",
     ]),
     ...mapGetters("document", ["documentCannotBeEdited"]),
+    isZoomInExceeding() {
+      return (
+        this.currentPercentage + this.defaultPercentage * 100 >
+        this.maxPercentage
+      );
+    },
   },
   watch: {
     selectedDocument(newValue) {
@@ -110,8 +120,10 @@ export default {
       this.$store.dispatch("edit/enableEditMode");
     },
     zoomIn() {
-      this.currentPercentage += this.defaultPercentage * 100;
-      this.updateScale((this.defaultScale * this.currentPercentage) / 100);
+      if (this.maxPercentage > this.defaultPercentage * 100) {
+        this.currentPercentage += this.defaultPercentage * 100;
+        this.updateScale((this.defaultScale * this.currentPercentage) / 100);
+      }
     },
     zoomOut() {
       if (this.currentPercentage === 25) {

package/src/components/DocumentPage/ScrollingDocument.vue

@@ -21,13 +21,13 @@
           @page-jump="onPageJump"
         />
       </div>
+
       <div v-else class="loading-page">
         <b-skeleton width="100%" height="1000px" />
       </div>
     </div>
     <Toolbar v-if="showToolbar" />
     <ActionBar v-if="showActionBar" />
-    <MultiAnnotationTableOverlay v-if="showAnnSetTable" />
   </div>
 </template>
 <script>
@@ -36,14 +36,12 @@ import scroll from "../../directives/scroll";
 import ScrollingPage from "./ScrollingPage";
 import Toolbar from "./DocumentToolbar";
 import ActionBar from "./ActionBar";
-import MultiAnnotationTableOverlay from "./MultiAnnotationTableOverlay";
 
 export default {
   components: {
     ScrollingPage,
     Toolbar,
     ActionBar,
-    MultiAnnotationTableOverlay,
   },
   directives: {
     scroll,
@@ -75,7 +73,6 @@ export default {
       "documentActionBar",
       "pageChangedFromThumbnail",
       "currentPage",
-      "showAnnSetTable",
     ]),
     ...mapGetters("display", ["visiblePageRange"]),
 

package/src/components/DocumentPage/ScrollingPage.vue

@@ -90,7 +90,7 @@ export default {
       return this.scrollTop + this.clientHeight;
     },
 
-    ...mapState("display", ["scale", "currentPage"]),
+    ...mapState("display", ["currentPage"]),
     ...mapState("document", ["pages", "documentAnnotationSelected", "loading"]),
     ...mapState("edit", ["editMode"]),
   },

package/src/store/edit.js

@@ -17,6 +17,12 @@ const state = {
   showEditConfirmationModal: false,
 };
 
+const getters = {
+  isPageSelected: (state) => (id) => {
+    return state.selectedPages.find((page) => page.id === id);
+  },
+};
+
 const actions = {
   enableEditMode: ({ commit }) => {
     commit("SET_EDIT_MODE", true);
@@ -39,6 +45,27 @@ const actions = {
     commit("SET_UPDATED_DOCUMENT", updatedDocument);
   },
 
+  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", []);
@@ -230,4 +257,5 @@ export default {
   state,
   actions,
   mutations,
+  getters,
 };