@konfuzio/document-validation-ui 0.1.24-dev.0 → 0.1.24-dev.2

package/src/components/DocumentPage/SearchBar.vue

@@ -0,0 +1,130 @@
+<template>
+  <div id="document-search">
+    <div class="search-container">
+      <input
+        ref="searchInput"
+        v-model="search"
+        :placeholder="$t('search')"
+        class="search-input"
+        @keyup.13="focusSearchResult(1)"
+      />
+      <div v-if="searchLoading" class="search-loading">
+        <b-icon icon="spinner" class="fa-spin loading-icon-size spinner" />
+      </div>
+
+      <div
+        v-else-if="
+          searchResults.length === 0 && search.length >= minSearchLength
+        "
+        class="search-no-results"
+      >
+        {{ $t("no_results") }}
+      </div>
+      <div v-else class="search-navigation">
+        <span v-if="searchBelowMinimum" class="search-counters">
+          {{ $t("search_below_minimum") }}
+        </span>
+        <span v-else class="search-counters"
+          >{{ currentCounter }}/{{ searchResults.length }}</span
+        >
+        <b-button
+          v-if="!searchBelowMinimum"
+          class="is-ghost is-small next-search"
+          :disabled="!searchResults.length || searchResults.length <= 1"
+          @click="focusSearchResult(1)"
+          ><b-icon icon="angle-down" class="is-small"
+        /></b-button>
+
+        <b-button
+          v-if="!searchBelowMinimum"
+          class="is-ghost is-small previous-search"
+          :disabled="!searchResults.length || searchResults.length <= 1"
+          @click="focusSearchResult(-1)"
+          ><b-icon icon="angle-up" class="is-small"
+        /></b-button>
+      </div>
+      <div class="search-close">
+        <b-button class="is-ghost is-small" @click="closeSearch">
+          <b-icon icon="xmark" class="is-small" />
+        </b-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+  name: "SearchBar",
+  data() {
+    return {
+      search: "",
+      minSearchLength: 3,
+    };
+  },
+  computed: {
+    ...mapState("display", [
+      "currentSearchResult",
+      "currentSearch",
+      "searchEnabled",
+      "searchResults",
+      "searchLoading",
+    ]),
+    searchBelowMinimum() {
+      return (
+        this.search &&
+        this.search.length > 0 &&
+        this.search.length < this.minSearchLength
+      );
+    },
+    currentCounter() {
+      return this.currentSearchResult != null && this.searchResults.length > 0
+        ? this.currentSearchResult + 1
+        : 0;
+    },
+  },
+  watch: {
+    search(search) {
+      console.log("search", search);
+      this.$store.dispatch("display/setCurrentSearch", search);
+      if (search.length >= this.minSearchLength) {
+        this.$store.dispatch("display/startSearchLoading");
+      }
+      this.$store.dispatch("display/debounceSearch", search);
+    },
+    currentSearch(search) {
+      if (this.search !== search) {
+        this.search = search;
+      }
+    },
+    searchEnabled(enabled) {
+      if (enabled) {
+        this.$nextTick(() => {
+          this.$refs.searchInput.focus();
+        });
+      }
+    },
+  },
+  mounted() {
+    if (this.currentSearch !== this.search) {
+      this.search = this.currentSearch;
+    }
+  },
+  methods: {
+    focusSearchResult(n) {
+      this.$store.dispatch("display/setCurrentSearchResult", n);
+    },
+    closeSearch() {
+      this.$store.dispatch("display/resetSearch");
+      this.$store.dispatch("display/toggleSearch");
+    },
+  },
+};
+</script>
+
+<style
+  scoped
+  lang="scss"
+  src="../../assets/scss/document_search_bar.scss"
+></style>

package/src/components/DocumentTopBar/DocumentName.vue

@@ -32,7 +32,7 @@
       class="edit-btn btn"
       @click="handleEdit"
     >
-      {{ $t("edit") }}
+      {{ $t("rename") }}
     </div>
     <div
       v-if="showSaveBtn && !editMode"
@@ -56,6 +56,10 @@
       <span v-else class="cloud-icon"><FileNameNotSaved /></span>
       <span>{{ saved ? $t("saved") : $t("not_saved") }}</span>
     </div>
+
+    <div v-if="detailsUrl" class="details-btn btn" @click="openDocumentDetails">
+      {{ $t("document_details") }}
+    </div>
   </div>
 </template>
 
@@ -97,8 +101,9 @@ export default {
       "selectedDocument",
       "publicView",
       "recalculatingAnnotations",
+      "documentId",
     ]),
-    ...mapState("display", ["optimalResolution"]),
+    ...mapState("display", ["optimalResolution", "detailsUrl"]),
     ...mapState("edit", ["editMode"]),
     ...mapGetters("document", ["isDocumentReviewed"]),
     textContent() {
@@ -229,6 +234,9 @@ export default {
         contentNotEditable.blur();
       }
     },
+    openDocumentDetails() {
+      window.location.href = this.detailsUrl;
+    },
   },
 };
 </script>

package/src/icons.js

@@ -18,6 +18,7 @@ import {
   faArrowLeft,
   faArrowRight,
   faDownload,
+  faSearch,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon as Icons } from "@fortawesome/vue-fontawesome";
 
@@ -39,7 +40,8 @@ library.add(
   faRepeat,
   faArrowLeft,
   faArrowRight,
-  faDownload
+  faDownload,
+  faSearch
 );
 
 export default Icons;

package/src/locales/de.json

@@ -16,6 +16,7 @@
   "set_status": "Setzen Sie bitte einen Status",
   "status_error": "Wir konnten den Status nicht ändern. Bitte versuchen Sie es später erneut.",
   "edit": "Bearbeiten",
+  "rename": "Umbenennen",
   "save": "Speichern",
   "autosaving": "Automatisches Speichern...",
   "saved": "Gespeichert",
@@ -146,5 +147,10 @@
   "translated_string_title": "Übersetzter Text",
   "no_translated_string": "Es existiert noch keine Übersetzung.",
   "add_translation": "Klicken Sie zum hinzufügen",
-  "edit_translation": "Zum Bearbeiten anklicken"
+  "edit_translation": "Zum Bearbeiten anklicken",
+  "search": "Suchen",
+  "no_results": "Keine Ergebnisse",
+  "search_below_minimum": "Mindestens 3 Zeichen",
+  "search_in_document": "Suche im Dokument",
+  "document_details": "Einzelheiten"
 }

package/src/locales/en.json

@@ -16,7 +16,9 @@
   "set_status": "Set a status",
   "status_error": "We couldn’t change the status. Please try again later.",
   "edit": "Edit",
+  "rename": "Rename",
   "save": "Save",
+  "details": "Details",
   "autosaving": "Auto saving...",
   "saved": "Saved",
   "not_saved": "Could not save. Try again",
@@ -146,5 +148,10 @@
   "translated_string_title": "Translated text",
   "no_translated_string": "No translation exists yet.",
   "add_translation": "Click to add one",
-  "edit_translation": "Click to edit"
+  "edit_translation": "Click to edit",
+  "search": "Search",
+  "no_results": "No results",
+  "search_below_minimum": "Minimum 3 characters",
+  "search_in_document": "Search document",
+  "document_details": "Details"
 }

package/src/locales/es.json

@@ -16,6 +16,7 @@
   "set_status": "Establecer estado",
   "status_error": "No ha sido posible cambiar el estado del documento. Por favor, inténtelo de nuevo más tarde.",
   "edit": "Editar",
+  "rename": "Rebautizar",
   "save": "Guardar",
   "autosaving": "Auto guardando...",
   "saved": "Guardado",
@@ -146,5 +147,10 @@
   "translated_string_title": "Texto traducido",
   "no_translated_string": "Aún no existe traducción.",
   "add_translation": "Clic para agregar",
-  "edit_translation": "Clic para editar"
+  "edit_translation": "Clic para editar",
+  "search": "Buscar",
+  "no_results": "Sin resultados",
+  "search_below_minimum": "Mínimo 3 caracteres",
+  "search_in_document": "Buscar en documento",
+  "document_details": "Detalles"
 }

package/src/store/display.js

@@ -1,10 +1,14 @@
 import BigNumber from "bignumber.js";
+import myImports from "../api";
 import {
   PIXEL_RATIO,
   VIEWPORT_RATIO,
   MINIMUM_APP_WIDTH,
   MINIMUM_OPTIMIZED_APP_WIDTH,
 } from "../constants";
+
+const HTTP = myImports.HTTP;
+
 const debounce = (cb, duration) => {
   let timer;
   return (...args) => {
@@ -31,6 +35,12 @@ const state = {
   pageChangedFromThumbnail: false,
   showAnnSetTable: null,
   showChooseLabelSetModal: null,
+  currentSearch: "",
+  searchEnabled: false,
+  searchResults: [],
+  searchLoading: false,
+  currentSearchResult: null,
+  detailsUrl: null,
 };
 
 const getters = {
@@ -54,6 +64,28 @@ const getters = {
     return [previousPage, state.currentPage, nextPage];
   },
 
+  searchResultsForPage: (state, getters) => (pageNumber) => {
+    if (!state.searchEnabled || state.searchResults.length < 1) {
+      return [];
+    }
+
+    return state.searchResults.filter((r) => r.page_index + 1 === pageNumber);
+  },
+
+  currentSearchResultForPage: (state) => (pageNumber) => {
+    if (!state.searchEnabled || state.searchResults.length < 1) {
+      return false;
+    }
+
+    const currentResult = state.searchResults[state.currentSearchResult];
+
+    if (!currentResult || currentResult.page_index !== pageNumber - 1) {
+      return false;
+    }
+
+    return currentResult;
+  },
+
   /**
    * The proportion between the original size of the page and the
    * image rendering.
@@ -259,6 +291,66 @@ const actions = {
   setPageChangedFromThumbnail: ({ commit }, value) => {
     commit("SET_PAGE_CHANGED_FROM_THUMBNAIL", value);
   },
+
+  setDetailsUrl: ({ commit }, value) => {
+    commit("SET_DETAILS_URL", value);
+  },
+
+  debounceSearch: debounce(({ commit, dispatch }, query) => {
+    dispatch("search", query);
+  }, 300),
+
+  startSearchLoading({ commit }) {
+    commit("SET_SEARCH_LOADING", true);
+  },
+
+  search({ commit, rootState }, query) {
+    // only allow queries that are at least 3 characters long
+    if (query.length >= 3) {
+      return HTTP.post(`documents/${rootState.document.documentId}/search/`, {
+        q: query,
+      }).then((response) => {
+        commit("SET_SEARCH_RESULTS", response.data.span);
+        commit("SET_SEARCH_LOADING", false);
+      });
+    } else {
+      commit("SET_SEARCH_RESULTS", []);
+      commit("SET_SEARCH_LOADING", false);
+    }
+  },
+
+  resetSearch({ commit }) {
+    commit("SET_CURRENT_SEARCH", "");
+    commit("SET_SEARCH_RESULTS", []);
+    commit("SET_SEARCH_LOADING", false);
+  },
+
+  toggleSearch({ commit }) {
+    commit("TOGGLE_SEARCH");
+  },
+
+  enableSearch({ commit }, toEnable) {
+    commit("ENABLE_SEARCH", toEnable);
+  },
+
+  setCurrentSearch({ commit }, currentSearch) {
+    commit("SET_CURRENT_SEARCH", currentSearch);
+  },
+
+  setCurrentSearchResult({ commit, state }, n) {
+    let newSearchResult = state.currentSearchResult + n;
+    const searchResultsMaxIndex = state.searchResults.length - 1;
+
+    if (newSearchResult > searchResultsMaxIndex) {
+      // once we're at the end of the results, start again
+      newSearchResult = 0;
+    } else if (newSearchResult < 0) {
+      // once we're at the beginning of the results, go to the end
+      newSearchResult = searchResultsMaxIndex;
+    }
+
+    commit("SET_CURRENT_SEARCH_RESULT", newSearchResult);
+  },
 };
 
 const mutations = {
@@ -303,6 +395,28 @@ const mutations = {
   SET_SHOW_CHOOSE_LABEL_SET_MODAL: (state, options) => {
     state.showChooseLabelSetModal = options;
   },
+  SET_SEARCH_RESULTS: (state, searchResults) => {
+    state.currentSearchResult = 0;
+    state.searchResults = searchResults;
+  },
+  SET_SEARCH_LOADING: (state, loading) => {
+    state.searchLoading = loading;
+  },
+  TOGGLE_SEARCH: (state) => {
+    state.searchEnabled = !state.searchEnabled;
+  },
+  ENABLE_SEARCH: (state, toEnable) => {
+    state.searchEnabled = toEnable;
+  },
+  SET_CURRENT_SEARCH: (state, currentSearch) => {
+    state.currentSearch = currentSearch;
+  },
+  SET_CURRENT_SEARCH_RESULT: (state, n) => {
+    state.currentSearchResult = n;
+  },
+  SET_DETAILS_URL: (state, value) => {
+    state.detailsUrl = value;
+  },
 };
 
 export default {

package/src/store/document.js

@@ -663,8 +663,6 @@ const getters = {
       return label.annotations;
     });
 
-    console.log(annotations);
-
     return annotations.length === 0 ? true : false;
   },
 };
@@ -672,6 +670,7 @@ const getters = {
 const actions = {
   startLoading: ({ commit }) => {
     commit("SET_LOADING", true);
+    commit("display/ENABLE_SEARCH", false, { root: true });
   },
   endLoading: ({ commit }) => {
     commit("SET_LOADING", false);