@konfuzio/document-validation-ui 0.1.10-dev.4 → 0.1.10-dev.6

package/src/locales/de.json

@@ -57,17 +57,17 @@
   "reorder": "Sortieren",
   "rotate": "Rotieren",
   "edit_error": "Die Änderungen konnten nicht gespeichert werden. Bitte versuchen Sie es später erneut.",
-  "overview": "Übersicht",
   "select_pages": "Sie können nun Seiten drehen, neu sortieren und Dokumente splitten.",
   "edit_document": "Dokument bearbeiten (Early Access)",
   "edit_early_access": "Sie sind einer der Nutzer, die Zugang zu diesen Funktionalitäten vor dem offiziellen Erscheinungstermin erhalten.",
   "selected": "ausgewählt",
   "rotate_selected": "Ausgewählte Seite drehen",
   "edit_not_available": "Dokumente mit dem Status 'Vorbereitung', 'Training' oder 'Test' sowie Dokumente mit dem Status 'Geprüft' können nicht bearbeitet werden.",
-  "back_to_edit": "Zurück zum Bearbeiten Modus",
-  "split_document": "Dokument aufteilen",
+  "rotate_split_reorder": "Rotate, split or reorder",
+  "rename_and_categorize": "Rename and Categorize",
   "submit": "Senden",
-  "next": "Weiter",
+  "next": "Next: Rename and Categorize",
+  "back_to_annotations": "Back to annotation view",
   "select_label": "Label auswählen",
   "select_annotation_set": "Wähle Annotation Set",
   "accept": "Akzeptieren",
@@ -83,7 +83,7 @@
   "categorized_as": "Dieses Dokument ist kategorisiert als",
   "not_categorized": "Nicht kategorisiert. Bitte wählen Sie vor dem Annotieren eine Kategorie aus: ",
   "choose_category": "Wählen Sie bitte eine Kategorie",
-  "select_category": "Wählen Sie bitte die richtige Kategorie aus.",
+  "select_category": "Wählen Sie bitte die richtige Kategorie aus",
   "categorized_error": "Wenn dies nicht die richtige Kategorie ist, ändern Sie diese bitte und wir fahren mit der erneuten Extraktion fort.",
   "categorize_document_no_category_description": "Bitten Sie den Projektmanager, eine Beschreibung dieser Kategorie hinzuzufügen, um mehr über diese Kategorie zu erfahren.",
   "annotations_pending": "Ausstehende Annotationen",

package/src/locales/en.json

@@ -46,7 +46,8 @@
   "rotate_all": "Rotate all",
   "cancel": "Cancel",
   "apply": "Apply",
-  "next": "Next",
+  "next": "Next: Rename and Categorize",
+  "back_to_annotations": "Back to annotation view",
   "submit": "Submit",
   "data_being_extracted": "New data is being extracted",
   "analysing_document": "We are analysing your document.",
@@ -60,15 +61,14 @@
   "reorder": "Reorder",
   "rotate": "Rotate",
   "edit_error": "The changes couldn’t be saved, please try again later.",
-  "overview": "Overview",
   "select_pages": "You can now rotate pages, reorder and split documents.",
   "edit_document": "Edit document (Early Access)",
   "edit_early_access": "You are one of the users who have access to these functionalities before the release date.",
   "selected": "selected",
   "rotate_selected": "Rotate selected",
   "edit_not_available": "Editing is not possible for documents with a status of 'Preparation', 'Training' or 'Test', or documents that are 'Reviewed'",
-  "back_to_edit": "Back to edit",
-  "split_document": "Split document",
+  "rotate_split_reorder": "Rotate, split or reorder",
+  "rename_and_categorize": "Rename and Categorize",
   "select_label": "Select Label",
   "select_annotation_set": "Select Annotation Set",
   "document_error_title": "Document error",
@@ -83,7 +83,7 @@
   "categorized_as": "This document is currently categorized as",
   "not_categorized": "This document is currently not categorized. Please select a category before annotating: ",
   "choose_category": "Choose a category",
-  "select_category": "Select the correct category.",
+  "select_category": "Select the correct category",
   "categorized_error": "If this is not the correct category, please change it and we'll proceed with the re-extraction.",
   "categorize_document_no_category_description": "Ask the Project Manager to add a description of this Category to know more about this category.",
   "annotations_pending": "pending",

package/src/locales/es.json

@@ -46,7 +46,8 @@
   "rotate_all": "Rotar todas",
   "cancel": "Cancelar",
   "apply": "Aplicar",
-  "next": "Siguiente",
+  "next": "Siguiente: Cambiar nombre y categoría",
+  "back_to_annotations": "Volver a la vista de anotaciones",
   "submit": "Enviar",
   "data_being_extracted": "Se están extrayendo nuevos datos",
   "analysing_document": "Estamos analizando el documento.",
@@ -60,15 +61,14 @@
   "reorder": "Reordenar",
   "rotate": "Rotar",
   "edit_error": "No se han podido guardar los cambios, por favor, inténtelo de nuevo más tarde.",
-  "overview": "Vista general",
-  "select_pages": "Ahora puedes rotar, reordenar o dividir los documentos.",
+  "select_pages": "Ahora puede rotar, reordenar o dividir los documentos.",
   "edit_document": "Editar documento (Early Access)",
   "edit_early_access": "Eres uno de los usuarios que tiene acceso a estas funcionalidades antes de la fecha de lanzamiento.",
   "selected": "seleccionadas",
   "rotate_selected": "Rotar seleccionadas",
   "edit_not_available": "No es posible editar documentos con estado en 'Preparación', 'Entrenamiento' o 'Pruebas', así como documentos que han sido 'Revisados'",
-  "back_to_edit": "Volver a editar",
-  "split_document": "Dividir documento",
+  "rotate_split_reorder": "Rotar, dividir or reordenar",
+  "rename_and_categorize": "Cambiar nombre y categoría",
   "select_label": "Seleccionar etiqueta",
   "select_annotation_set": "Seleccionar grupo de etiquetas",
   "document_error_title": "Error en el documento",
@@ -83,12 +83,12 @@
   "categorized_as": "Este documento ha sido categorizado como",
   "not_categorized": "Este documento no ha sido categorizado. Por favor, seleccione una categoría antes de realizar anotaciones: ",
   "choose_category": "Seleccione una categoría",
-  "select_category": "Seleccione la categoría correcta.",
+  "select_category": "Seleccione la categoría correcta",
   "categorized_error": "Si esta no es la categoría correcta, por favor cámbiela y procederemos a realizar de nuevo la extracción.",
   "categorize_document_no_category_description": "Solicite a su Gestor de Proyecto que agregue una descripción a esta Categoría para saber más sobre ella.",
   "annotations_pending": "pendientes",
   "annotations_accepted": "aceptadas",
-  "mark_all_missing": "Marcas todas las anotaciones vacías como Faltantes",
+  "mark_all_missing": "Marcar todas las anotaciones vacías como Faltantes",
   "no_labels_to_choose": "Sin etiquetas",
   "accept_group": "Aceptar todas",
   "use_your_keyboard": "Use su teclado",
@@ -108,28 +108,28 @@
   "drag_drop_columns_multi_ann": "Arrastre y suelte las columnas para ordenar las etiquetas",
   "error_creating_multi_ann": "No todos los grupos de anotaciones fueron creados de manera exitosa.",
   "disabled_finish_review": "Solo es posible finalizar la revisión del documento si todas las anotaciones han sido revisadas, ya sea aceptadas o marcadas como faltantes.",
-  "no_multi_ann_labelset_model": "En este documento no hay grupos de etiquetas múltiples disponibles. Para más información, haz clic en <a href='https://help.konfuzio.com/tutorials/advanced-document-extraction/index.html#multiple-annotation-sets' target='_blank'>este enlace</a>.",
+  "no_multi_ann_labelset_model": "En este documento no hay grupos de etiquetas múltiples disponibles. Para más información, haga clic en <a href='https://help.konfuzio.com/tutorials/advanced-document-extraction/index.html#multiple-annotation-sets' target='_blank'>este enlace</a>.",
   "single_category_in_project": "Este proyecto solo tiene una categoría. Para poder modificarla, es necesario agregar esta nueva categoría al proyecto. Para más información, visita <a href='https://help.konfuzio.com/modules/categories/index.html#add-a-category' target='_blank'>este enlace</a>.",
-  "approved_annotations": "No es posible cambiar la categoría, ya que existen anotaciones aceptadas o creadas manualmente en este documento.",
+  "approved_annotations": "No es posible cambiar la categoría ya que existen anotaciones aceptadas o creadas manualmente en este documento.",
   "restore": "Restaurar",
   "split_modal_title": "Dividir el documento",
-  "split_modal_body": "Hemos escaneado tu documento y hemos encontrado <strong>{number_of_split_documents}</strong> documentos diferentes. <strong>Te recomendamos</strong> dividir el documento en esta etapa, ya que de lo contrario se perderá el progreso logrado debido a una nueva extracción de los datos del documento.",
+  "split_modal_body": "Hemos escaneado su documento y hemos encontrado <strong>{number_of_split_documents}</strong> documentos diferentes. <strong>Le recomendamos</strong> dividir el documento en esta etapa, ya que de lo contrario se perderá el progreso logrado debido a una nueva extracción de los datos del documento.",
   "do_it_later": "Lo haré luego",
   "review_now": "Revisar ahora",
   "recommended": "Recomendado",
   "smart_split": "División Inteligente",
   "smart_split_suggestions": "Nuestras sugerencias de División Inteligente están marcadas en color verde",
   "no_splitting_suggestions": "Este documento no tiene sugerencias de división",
-  "confirm_splitting": "¿Seguro que quieres confirmar los cambios?",
-  "splitting_warning": "Ten en cuenta que se perderán las anotaciones que hayas confirmado en el documento.",
+  "confirm_splitting": "¿Seguro que quiere confirmar los cambios?",
+  "splitting_warning": "Tenga en cuenta que se perderán las anotaciones que haya confirmado en el documento.",
   "no": "No",
   "yes": "Sí",
-  "split_modal_no_suggestions": "¿Necesitas dividir el documento? <strong>Te recomendamos</strong> hacerlo en este momento, o de lo contrario se perderán los cambios realizados.",
+  "split_modal_no_suggestions": "¿Necesita dividir el documento? <strong>Te recomendamos</strong> hacerlo en este momento, o de lo contrario se perderán los cambios realizados.",
   "missing_from_document": "Falta en el documento",
-  "edit_label": "Edit label",
-  "delete_label": "Delete label",
-  "table": "Table",
-  "new_multi_ann_description": "Selecciona un modelo de datos de los existentes, luego deselecciona las etiquetas que no existen en este documento.",
+  "edit_label": "Editar etiqueta",
+  "delete_label": "Eliminar etiqueta",
+  "table": "Tabla",
+  "new_multi_ann_description": "Seleccione un modelo de datos de los existentes, luego deseleccione las etiquetas que no existen en este documento.",
   "new_multi_ann_title": "Crear múltiples anotaciones",
-  "prepare_document": "Prepara el documento"
+  "prepare_document": "Prepare el documento"
 }

package/src/store/document.js

@@ -502,17 +502,6 @@ const getters = {
     );
   },
 
-  documentHasNoCorrectAnnotations: (state) => () => {
-    if (
-      state.annotations &&
-      state.annotations.filter((ann) => ann.is_correct).length > 0
-    ) {
-      return false;
-    } else {
-      return true;
-    }
-  },
-
   /**
    * If automatic splitting is enabled for the project
    */
@@ -746,12 +735,25 @@ const actions = {
       });
 
     if (!state.publicView) {
-      dispatch("fetchMissingAnnotations");
+      await dispatch("fetchMissingAnnotations");
 
       await dispatch("project/fetchCurrentUser", null, {
         root: true,
       });
 
+      // Check if we first open the document dashboard or the edit mode
+      if (
+        !state.selectedDocument.category ||
+        (!state.selectedDocument.category_is_revised &&
+          !getters.documentHasCorrectAnnotations() &&
+          state.missingAnnotations.length === 0)
+      ) {
+        dispatch("edit/enableEditMode", null, {
+          root: true,
+        });
+        dispatch("edit/setRenameAndCategorize", true, { root: true });
+      }
+
       if (projectId) {
         await dispatch("category/fetchCategories", projectId, {
           root: true,

package/src/store/edit.js

@@ -9,19 +9,37 @@ const HTTP = myImports.HTTP;
 
 const state = {
   editMode: false,
-  splitOverview: false,
+  renameAndCategorize: false,
   isMultipleSelection: false,
   pagesForPostprocess: [],
   selectedPages: [],
   updatedDocument: [],
   showEditConfirmationModal: false,
-  documentBeingSplit: false,
+  submitEditChanges: false,
 };
 
 const getters = {
   isPageSelected: (state) => (id) => {
     return state.selectedPages.find((page) => page.id === id);
   },
+
+  documentShouldBePostprocessed: (state, _, rootState) => {
+    const foundRotatedPage = state.pagesForPostprocess.find(
+      (page) => page.angle !== 0
+    );
+
+    let foundReorderedPage;
+
+    state.pagesForPostprocess.map((page) => {
+      foundReorderedPage = rootState.document.selectedDocument.pages.find(
+        (p) => p.id === page.id && p.number !== page.number
+      );
+    });
+
+    return (
+      state.updatedDocument.length > 1 || foundRotatedPage || foundReorderedPage
+    );
+  },
 };
 
 const actions = {
@@ -31,11 +49,11 @@ const actions = {
 
   disableEditMode: ({ commit }) => {
     commit("SET_EDIT_MODE", false);
-    commit("SET_SPLIT_OVERVIEW", false);
+    commit("SET_RENAME_AND_CATEGORIZE", false);
   },
 
-  setSplitOverview: ({ commit }, overview) => {
-    commit("SET_SPLIT_OVERVIEW", overview);
+  setRenameAndCategorize: ({ commit }, value) => {
+    commit("SET_RENAME_AND_CATEGORIZE", value);
   },
 
   setPagesForPostprocess: ({ commit }, pages) => {
@@ -46,8 +64,8 @@ const actions = {
     commit("SET_UPDATED_DOCUMENT", updatedDocument);
   },
 
-  setDocumentBeingSplit: ({ commit }, value) => {
-    commit("SET_DOCUMENT_BEING_SPLIT", value);
+  setSubmitEditChanges: ({ commit }, value) => {
+    commit("SET_SUBMIT_EDIT_CHANGES", value);
   },
 
   selectPage: ({ state, commit }, page) => {
@@ -187,8 +205,6 @@ const actions = {
       root: true,
     });
 
-    commit("SET_DOCUMENT_BEING_SPLIT", true);
-
     const oldId = rootState.document.documentId;
 
     return new Promise((resolve, reject) => {
@@ -201,7 +217,7 @@ const actions = {
             const newId = response.data[0].id;
             dispatch("document/setSplittingSuggestions", null, { root: true });
 
-            commit("SET_DOCUMENT_BEING_SPLIT", false);
+            commit("SET_SUBMIT_EDIT_CHANGES", false);
 
             if (newId !== oldId) {
               if (getURLQueryParam("document") || getURLPath("docs")) {
@@ -239,8 +255,8 @@ const mutations = {
     state.editMode = option;
   },
 
-  SET_SPLIT_OVERVIEW: (state, overview) => {
-    state.splitOverview = overview;
+  SET_RENAME_AND_CATEGORIZE: (state, value) => {
+    state.renameAndCategorize = value;
   },
 
   SET_PAGES_FOR_POSTPROCESS: (state, pages) => {
@@ -259,8 +275,8 @@ const mutations = {
   SET_SHOW_EDIT_CONFIRMATION_MODAL: (state, value) => {
     state.showEditConfirmationModal = value;
   },
-  SET_DOCUMENT_BEING_SPLIT: (state, value) => {
-    state.documentBeingSplit = value;
+  SET_SUBMIT_EDIT_CHANGES: (state, value) => {
+    state.submitEditChanges = value;
   },
 };
 

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>