@konfuzio/document-validation-ui 0.1.10-dev.1 → 0.1.10-dev.10

package/src/assets/scss/categorize_modal.scss

@@ -1,45 +0,0 @@
-@import "./imports.scss";
-
-.categorize-modal {
-  .content {
-    h3 {
-      font-weight: 500;
-      font-size: 18px;
-      line-height: 28px;
-      color: $grey-darker;
-    }
-
-    p {
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 20px;
-      color: $text-strong;
-    }
-
-    .categorize-dropdown {
-      width: 100%;
-      border: 1px solid $grey-outline;
-      height: 40px;
-      cursor: pointer;
-      box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
-      border-radius: 8px;
-      margin-bottom: 4px;
-
-      &.dropdown-disabled {
-        cursor: not-allowed;
-      }
-    }
-
-    .category-description {
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 20px;
-      color: $text-lighter;
-    }
-
-    .submit-category {
-      margin-top: 16px;
-      width: 100%;
-    }
-  }
-}

package/src/assets/scss/splitting_confirmation_modal.scss

@@ -1,41 +0,0 @@
-@import "./imports.scss";
-
-.splitting-confirmation-modal {
-  .header {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding-bottom: 15px;
-    font-weight: 500;
-    font-size: 18px;
-  }
-
-  .content {
-    text-align: left;
-    font-weight: 400;
-    font-size: 14px;
-    color: $text-color;
-  }
-
-  .modal-card-foot {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-
-    .recommended {
-      font-weight: 600;
-      font-size: 11px;
-      background-color: rgba(255, 255, 255, 0.2);
-      padding: 2px 5px;
-      border-radius: 36px;
-    }
-
-    .button {
-      width: 100%;
-
-      &.is-primary {
-        font-weight: 500;
-      }
-    }
-  }
-}

package/src/components/DocumentAnnotations/CategorizeModal.vue

@@ -1,247 +0,0 @@
-<template>
-  <section class="categorize-modal">
-    <b-modal
-      ref="modal"
-      v-model="show"
-      :can-cancel="canCloseModal()"
-      class="modal-absolute modal-400 modal-no-footer"
-    >
-      <section class="modal-card-body scroll-hidden">
-        <div class="content">
-          <h3>{{ $t("categorize_document_title") }}</h3>
-          <p v-if="documentCategory">
-            {{ $t("categorized_as")
-            }}<strong>&nbsp;{{ documentCategory.name }}</strong
-            >.&nbsp;{{ $t("categorized_error") }}
-          </p>
-          <p v-else>
-            {{ $t("not_categorized") }}
-          </p>
-
-          <b-tooltip
-            multilined
-            :active="tooltipIsShown"
-            size="is-large"
-            position="is-bottom"
-            class="bottom-aligned"
-            :close-delay="5000"
-          >
-            <template #content>
-              <div ref="tooltipContent"></div>
-            </template>
-            <b-dropdown
-              v-model="selectedCategory"
-              aria-role="list"
-              :class="[
-                'categorize-dropdown',
-                projectHasSingleCategory() && 'dropdown-disabled',
-              ]"
-              :disabled="tooltipIsShown"
-            >
-              <template #trigger>
-                <div class="category-dropdown">
-                  <div>
-                    <span v-if="selectedCategory">{{
-                      selectedCategory.name
-                    }}</span>
-                    <span v-else-if="projectHasSingleCategory()">{{
-                      categories[0].name
-                    }}</span>
-                    <span v-else>{{ $t("choose_category") }}</span>
-                  </div>
-                </div>
-              </template>
-              <b-dropdown-item
-                v-for="categoryItem in categories"
-                :key="categoryItem.id"
-                aria-role="listitem"
-                :value="categoryItem"
-                @click="setSelectedCategory(categoryItem)"
-              >
-                <span>{{ categoryItem.name }}</span>
-              </b-dropdown-item>
-            </b-dropdown>
-          </b-tooltip>
-          <div v-if="selectedCategory" class="category-description">
-            {{
-              selectedCategory.description
-                ? selectedCategory.description
-                : $t("categorize_document_no_category_description")
-            }}
-          </div>
-          <div v-else class="category-description">
-            {{ $t("select_category") }}
-          </div>
-          <b-button
-            class="submit-category primary-button"
-            type="is-primary"
-            :disabled="!selectedCategory"
-            @click="submit"
-          >
-            {{ $t("submit") }}
-          </b-button>
-        </div>
-      </section>
-    </b-modal>
-  </section>
-</template>
-
-<script>
-/**
- * This component shows a modal to categorize a document
- */
-
-import { mapGetters, mapState } from "vuex";
-
-export default {
-  name: "CategorizeModal",
-  data() {
-    return {
-      show: false,
-      selectedCategory: null, // category selected in dropdown
-      documentCategory: null, // category associated to document
-      tooltipIsShown: false,
-    };
-  },
-  computed: {
-    ...mapState("category", ["categories"]),
-    ...mapState("document", [
-      "selectedDocument",
-      "categorizeModalIsActive",
-      "splittingSuggestions",
-      "publicView",
-    ]),
-    ...mapGetters("category", ["category", "projectHasSingleCategory"]),
-    ...mapGetters("document", [
-      "categorizationIsConfirmed",
-      "isDocumentReviewed",
-    ]),
-
-    singleCategoryInProject() {
-      // if only 1 category in the project, we don't enable the dropdown
-      return this.categories && this.categories.length === 1;
-    },
-  },
-  watch: {
-    selectedDocument(newValue) {
-      if (newValue) {
-        this.setDocumentValues();
-      }
-    },
-    categories(newCategories, oldCategories) {
-      if (newCategories && oldCategories === null) {
-        this.setDocumentValues();
-
-        if (newCategories.length === 1) {
-          this.setTooltipText();
-        }
-      }
-    },
-    show(newValue) {
-      this.$store.dispatch("display/setCategorizeModalIsActive", newValue);
-    },
-    categorizeModalIsActive(newValue) {
-      // Show modal after split suggestion modal
-      // if no category confirmed
-      if (newValue) {
-        this.show = newValue && !this.categorizationIsConfirmed;
-      }
-    },
-  },
-  mounted() {
-    this.setDocumentValues();
-
-    this.$nextTick(() => {
-      this.setTooltipText();
-    });
-
-    if (this.projectHasSingleCategory()) {
-      this.tooltipIsShown = true;
-    }
-  },
-  updated() {
-    this.setTooltipText();
-  },
-  methods: {
-    setDocumentValues() {
-      if (this.selectedDocument) {
-        let category;
-
-        // Check if the document has an extracted category
-        // or if it doesn't, but the project has only 1 category
-        if (this.selectedDocument.category) {
-          category = this.category(this.selectedDocument.category);
-          this.documentCategory = category;
-        } else if (this.projectHasSingleCategory()) {
-          category = this.category(this.categories[0].id);
-        } else {
-          category = category;
-        }
-
-        this.selectedCategory = category;
-        this.documentCategory = category;
-
-        // By default, if the document has no category, the categorize modal is shown
-        // But if there is a category, we also need to check if there are splitting suggestions or not
-        this.show =
-          (!category || (category && !this.splittingSuggestions)) &&
-          !this.categorizationIsConfirmed &&
-          !this.publicView &&
-          !this.isDocumentReviewed;
-      }
-    },
-    canCloseModal() {
-      return !!this.documentCategory && this.documentCategory.id !== null;
-    },
-    setSelectedCategory(category) {
-      this.selectedCategory = category;
-    },
-    submit() {
-      if (
-        (this.selectedCategory &&
-          this.documentCategory &&
-          this.selectedCategory.id !== this.documentCategory.id) ||
-        (this.selectedCategory && !this.documentCategory) ||
-        (this.selectedCategory && this.projectHasSingleCategory)
-      ) {
-        const updatedCategory = {
-          category: this.selectedCategory.id,
-          category_is_revised: true,
-        };
-
-        this.$store.dispatch("document/startRecalculatingAnnotations");
-
-        this.$store
-          .dispatch("document/updateDocument", updatedCategory)
-          .catch((error) => {
-            this.$store.dispatch("document/createErrorMessage", {
-              error,
-              serverErrorMessage: this.$t("server_error"),
-              defaultErrorMessage: this.$t("edit_error"),
-            });
-          })
-          .finally(() => {
-            this.$store.dispatch("document/endRecalculatingAnnotations");
-            this.$store.dispatch("display/setCategorizeModalIsActive", false);
-          });
-      } else {
-        // if same category, then just accept it
-        this.$store.dispatch("document/updateDocument", {
-          category_is_revised: true,
-        });
-      }
-      this.show = false;
-    },
-    setTooltipText() {
-      // Text set from innerHTML vs 'label' due to html tag in locales file string
-      if (this.projectHasSingleCategory() && this.show) {
-        this.$refs.tooltipContent.innerHTML = this.$t(
-          "single_category_in_project"
-        );
-      }
-    },
-  },
-};
-</script>
-
-<style scoped lang="scss" src="../../assets/scss/categorize_modal.scss"></style>

package/src/components/DocumentModals/SplittingSuggestionsModal.vue

@@ -1,132 +0,0 @@
-<template>
-  <section ref="splittingModal" class="splitting-confirmation-modal">
-    <b-modal
-      v-model="isModalActive"
-      class="modal-400"
-      :width="500"
-      :can-cancel="[]"
-    >
-      <section class="modal-card-body split-modal">
-        <div class="header">
-          <StarIcon />
-          <p class="modal-title">
-            {{
-              splittingSuggestions && splittingSuggestions.length > 0
-                ? $t("split_modal_title")
-                : $t("prepare_document")
-            }}
-          </p>
-        </div>
-        <div ref="bodyText" class="content"></div>
-      </section>
-      <footer class="modal-card-foot">
-        <b-button @click="closeModal">
-          {{ $t("do_it_later") }}
-        </b-button>
-        <b-button type="is-primary" @click="handleReviewNow">
-          {{ $t("review_now") }}
-          <span class="recommended">{{ recommended }}</span>
-        </b-button>
-      </footer>
-    </b-modal>
-  </section>
-</template>
-
-<script>
-import { mapGetters, mapState } from "vuex";
-import StarIcon from "../../assets/images/StarIcon";
-
-/**
- * This component shows a modal to inform the user about auto-splitting suggestions
- */
-export default {
-  name: "SplittingSuggestionsModal",
-  components: {
-    StarIcon,
-  },
-  data() {
-    return {
-      isModalActive: false,
-      recommended: this.$t("recommended"),
-    };
-  },
-  computed: {
-    ...mapState("document", ["splittingSuggestions", "selectedDocument"]),
-    ...mapState("edit", ["editMode"]),
-    ...mapGetters("document", ["waitingForSplittingConfirmation"]),
-  },
-  watch: {
-    splittingSuggestions(newValue) {
-      if (newValue) {
-        this.isModalActive = true;
-      }
-    },
-    editMode(newValue) {
-      if (!newValue) {
-        this.showModal();
-      }
-    },
-    isModalActive(newValue) {
-      if (newValue) {
-        this.$nextTick(() => {
-          if (
-            this.splittingSuggestions &&
-            this.splittingSuggestions.length > 0
-          ) {
-            this.$refs.bodyText.innerHTML = this.$t("split_modal_body", {
-              number_of_split_documents: this.splittingSuggestions.length,
-            });
-          } else {
-            this.$refs.bodyText.innerHTML = this.$t(
-              "split_modal_no_suggestions"
-            );
-          }
-        });
-      }
-    },
-  },
-  mounted() {
-    this.showModal();
-
-    this.$nextTick(() => {
-      if (this.recommended) {
-        this.recommended = this.recommended.toUpperCase();
-      }
-    });
-  },
-  methods: {
-    showModal() {
-      if (
-        this.splittingSuggestions &&
-        this.waitingForSplittingConfirmation(this.selectedDocument)
-      ) {
-        this.isModalActive = true;
-      }
-    },
-    closeModal() {
-      const updatedDocument = [
-        {
-          name: this.selectedDocument.data_file_name,
-          category: this.selectedDocument.category,
-          pages: this.selectedDocument.pages,
-        },
-      ];
-
-      this.$store.dispatch("edit/editDocument", updatedDocument);
-
-      this.$store.dispatch("display/setCategorizeModalIsActive", false);
-      this.isModalActive = false;
-    },
-    handleReviewNow() {
-      this.$store.dispatch("edit/enableEditMode");
-      this.isModalActive = false;
-    },
-  },
-};
-</script>
-
-<style
-  scoped
-  lang="scss"
-  src="../../assets/scss/splitting_confirmation_modal.scss"
-></style>