@konfuzio/document-validation-ui 0.1.1

package/src/components/DocumentAnnotations/CategorizeModal.vue

@@ -0,0 +1,159 @@
+<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">
+        <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-dropdown
+            v-model="selectedCategory"
+            aria-role="list"
+            class="categorize-dropdown"
+          >
+            <template #trigger>
+              <div class="category-dropdown">
+                <div>
+                  <span v-if="selectedCategory">{{
+                    selectedCategory.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>
+          <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"
+            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",
+  computed: {
+    ...mapState("category", ["categories"]),
+    ...mapState("document", ["selectedDocument"]),
+    ...mapGetters("category", ["category"]),
+    ...mapGetters("document", ["categorizationIsConfirmed"]),
+  },
+  data() {
+    return {
+      show: false,
+      selectedCategory: null, // category selected in dropdown
+      documentCategory: null, // category associated to document
+    };
+  },
+  watch: {
+    selectedDocument(newValue) {
+      if (newValue) {
+        this.setDocumentValues();
+      }
+    },
+    categories(newCategories, oldCategories) {
+      if (newCategories && oldCategories === null) {
+        this.setDocumentValues();
+      }
+    },
+  },
+  mounted() {
+    this.setDocumentValues();
+  },
+  methods: {
+    setDocumentValues() {
+      if (this.selectedDocument) {
+        const category = this.category(this.selectedDocument.category);
+        this.selectedCategory = category;
+        this.documentCategory = category;
+        this.show = !this.categorizationIsConfirmed;
+      }
+    },
+    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)
+      ) {
+        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");
+          });
+      } else {
+        // if same category, then just accept it
+        this.$store.dispatch("document/updateDocument", {
+          category_is_revised: true,
+        });
+      }
+      this.show = false;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss" src="../../assets/scss/categorize_modal.scss"></style>

package/src/components/DocumentAnnotations/ChooseLabelSetModal.vue

@@ -0,0 +1,155 @@
+<template>
+  <section class="choose-label-set-modal">
+    <b-modal
+      ref="modal"
+      v-model="show"
+      :can-cancel="['x', 'outside']"
+      class="modal-absolute modal-400 modal-no-footer"
+      :on-cancel="close"
+    >
+      <section class="modal-card-body">
+        <div class="content">
+          <h3>
+            {{
+              isMultipleAnnotations
+                ? $t("new_multi_ann_title")
+                : $t("new_ann_set_title")
+            }}
+          </h3>
+          <p>
+            {{
+              isMultipleAnnotations
+                ? $t("new_multi_ann_description")
+                : $t("new_ann_set_description")
+            }}
+          </p>
+          <b-dropdown
+            v-model="selectedLabelSet"
+            aria-role="list"
+            :disabled="labelSets.length === 0"
+            class="label-set-dropdown"
+          >
+            <template #trigger>
+              <div>
+                <div>
+                  <span v-if="selectedLabelSet">{{
+                    selectedLabelSet.name
+                  }}</span>
+                  <span v-else>{{ $t("select_label_set") }}</span>
+                </div>
+              </div>
+            </template>
+            <b-dropdown-item
+              v-for="labelSetItem in labelSets"
+              :key="labelSetItem.id"
+              aria-role="listitem"
+              :value="labelSetItem"
+              @click="setSelectedLabelSet(labelSetItem)"
+            >
+              <span>{{ labelSetItem.name }}</span>
+            </b-dropdown-item>
+          </b-dropdown>
+          <div v-if="selectedLabelSet" class="labels-list">
+            <div v-if="isMultipleAnnotations" class="labels-select">
+              <div v-for="label in labels" :key="label.id">
+                <b-checkbox v-model="label.selected">{{
+                  label.name
+                }}</b-checkbox>
+              </div>
+            </div>
+            <span v-for="(label, index) in labels" v-else :key="label.id">{{
+              `${label.name}${index + 1 !== labels.length ? ", " : ""}`
+            }}</span>
+          </div>
+          <b-button
+            class="submit-ann-set"
+            type="is-primary"
+            :disabled="!selectedLabelSet"
+            @click="submit"
+          >
+            {{ $t("continue") }}
+          </b-button>
+          <p
+            v-if="!isMultipleAnnotations && selectedLabelSet"
+            class="next-step-description"
+          >
+            {{ $t("new_ann_set_hint") }}
+          </p>
+        </div>
+      </section>
+    </b-modal>
+  </section>
+</template>
+
+<script>
+/**
+ * This component shows a modal to choose a label set from the project
+ */
+
+import { mapGetters, mapState } from "vuex";
+
+export default {
+  name: "CreateAnnotationSetModal",
+  computed: {
+    ...mapState("document", ["annotationSets"]),
+    ...mapGetters("project", ["labelSetsFilteredForAnnotationSetCreation"]),
+  },
+  props: {
+    isMultipleAnnotations: {
+      default: false,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      selectedLabelSet: null,
+      labelSets: [],
+      show: true,
+      labels: [],
+    };
+  },
+  mounted() {
+    this.$store.dispatch("project/fetchLabelSets").then((data) => {
+      this.labelSets = this.labelSetsFilteredForAnnotationSetCreation(
+        data,
+        this.annotationSets
+      );
+    });
+  },
+  methods: {
+    submit() {
+      // filter labels that were selected (by default all are selected so no issue if the feature is disabled)
+      const labelsFiltered = this.labels.filter((label) => label.selected);
+      this.selectedLabelSet.labels = this.selectedLabelSet.labels.filter(
+        (label) => {
+          return labelsFiltered.find((filtered) => filtered.id === label.id);
+        }
+      );
+
+      this.$emit("labelSet", this.selectedLabelSet);
+      this.close();
+    },
+    setSelectedLabelSet(labelSet) {
+      this.createLabelsList(labelSet.labels);
+      this.selectedLabelSet = labelSet;
+    },
+    close() {
+      this.$emit("close");
+    },
+    createLabelsList(labels) {
+      this.labels = labels.map((label) => {
+        return {
+          ...label,
+          selected: true,
+        };
+      });
+    },
+  },
+};
+</script>
+
+<style
+  scoped
+  lang="scss"
+  src="../../assets/scss/choose_label_set_modal.scss"
+></style>