@konfuzio/document-validation-ui 0.1.1

package/src/components/DocumentTopBar/DocumentDatasetStatus.vue

@@ -0,0 +1,103 @@
+<template>
+  <b-dropdown class="dataset-status-chooser">
+    <template #trigger>
+      <div class="dataset-status-drop-down">
+        <div class="icon">
+          <StatusIcon />
+        </div>
+        <div class="dataset-status-info">
+          <p class="dataset-status-title">
+            {{ $t("status") }}
+          </p>
+          <div class="dataset-status-name">
+            {{ datasetStatus === 0 ? $t("set_status") : handleStatus() }}
+          </div>
+        </div>
+        <div class="caret">
+          <b-icon icon="angle-down" size="is-small" class="caret" />
+        </div>
+      </div>
+    </template>
+
+    <p class="dropdown-menu-title">
+      {{ $t("status") }}
+    </p>
+
+    <b-dropdown-item
+      v-for="(status, index) in statusList"
+      :key="index"
+      class="dropdown-item"
+      aria-role="listitem"
+      :disabled="disable(status)"
+      @click="handleChangeStatus(index)"
+    >
+      {{ status }}
+    </b-dropdown-item>
+  </b-dropdown>
+</template>
+
+<script>
+import StatusIcon from "../../assets/images/StatusImg";
+
+export default {
+  name: "DatasetStatus",
+  components: {
+    StatusIcon,
+  },
+  props: {
+    datasetStatus: {
+      type: Number,
+    },
+  },
+  data() {
+    return {
+      statusList: [
+        this.$t("preparation"),
+        this.$t("training"),
+        this.$t("test"),
+        this.$t("excluded"),
+      ],
+      currentStatus: null,
+    };
+  },
+  methods: {
+    handleChangeStatus(index) {
+      const updatedDatasetStatus = {
+        dataset_status: index + 1,
+      };
+
+      this.$store
+        .dispatch("document/updateDocument", updatedDatasetStatus)
+        .then((response) => {
+          if (response) {
+            this.currentStatus = this.statusList[index];
+          }
+        })
+        .catch((error) => {
+          this.$store.dispatch("document/createErrorMessage", {
+            error,
+            serverErrorMessage: this.$t("server_error"),
+            defaultErrorMessage: this.$t("edit_error"),
+          });
+        });
+    },
+    handleStatus() {
+      if (!this.currentStatus) {
+        return this.statusList[this.datasetStatus - 1];
+      }
+      return this.currentStatus;
+    },
+    disable(status) {
+      if (this.datasetStatus === this.statusList.indexOf(status) + 1) {
+        return true;
+      }
+    },
+  },
+};
+</script>
+
+<style
+  scoped
+  lang="scss"
+  src="../../assets/scss/document_dataset_status.scss"
+></style>

package/src/components/DocumentTopBar/DocumentHandover.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="handover-container">
+    <b-button
+      :label="$t('handover')"
+      type="is-primary"
+      aria-controls="handover"
+      class="handover-btn"
+      @click="open = true"
+    />
+
+    <div class="handover-collapse">
+      <b-collapse
+        :open="open"
+        aria-id="handover"
+        class="is-bottom"
+      >
+        <div class="notification">
+          <div class="content">
+            <div class="header container">
+              <p class="title">
+                {{ $t("handover_document") }}
+              </p>
+              <div
+                type="button"
+                class="close-icon-container modal-btn"
+                @click="open = false"
+              >
+                <b-icon
+                  icon="xmark"
+                  class="close-btn"
+                  size="is-small"
+                />
+              </div>
+            </div>
+            <div class="input-container">
+              <section
+                :class="['input-section container', invalidEmail && 'invalid']"
+              >
+                <b-field type="input">
+                  <b-input
+                    id="input"
+                    v-model="selected"
+                    :placeholder="$t('type_email')"
+                    autocomplete="off"
+                    @input="invalidEmail = false"
+                  />
+                </b-field>
+                <b-loading
+                  v-if="isLoading"
+                  v-model="isLoading"
+                  :is-full-page="isFullPage"
+                >
+                  <b-icon
+                    icon="spinner"
+                    class="fa-spin loading-icon-size spinner"
+                  />
+                </b-loading>
+                <b-button
+                  v-else
+                  :label="$t('handover')"
+                  class="handover-btn-menu"
+                  @click.prevent="handleHandover"
+                />
+              </section>
+              <div
+                v-if="invalidEmail"
+                class="invalid-email-msg"
+              >
+                <p>{{ $t("invalid_email") }}</p>
+              </div>
+            </div>
+            <div class="members-section">
+              <div class="members-title">
+                <h3 class="title">
+                  {{ $t("members") }}
+                </h3>
+              </div>
+              <div :class="['member-list', scroll && 'scroll']">
+                <div
+                  v-for="member in members"
+                  :key="member.id"
+                >
+                  <div class="member container">
+                    <p class="email">
+                      {{ member.email }}
+                    </p>
+                    <b-button
+                      :label="$t('select')"
+                      class="select-btn"
+                      @click="handleSelect(member.id, member.email)"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </b-collapse>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DocumentHandover",
+  data() {
+    return {
+      isComponentModalActive: false,
+      open: false,
+      // TODO: bring list of members from the backend when endpoint is ready
+      members: [
+        { id: 1, email: "ch@konfuzio.com" },
+        { id: 2, email: "fz@helm-nagel.com" },
+        { id: 3, email: "ana@helm-nagel.com" },
+        { id: 4, email: "ch@konfuzio.com" },
+        { id: 5, email: "fz@helm-nagel.com" },
+        { id: 6, email: "ana@helm-nagel.com" }
+      ],
+      isFullPage: false,
+      isLoading: false,
+      selected: null,
+      scroll: false,
+      invalidEmail: false,
+      regex:
+        /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i
+    };
+  },
+  computed: {
+    // TODO: map members from store
+  },
+
+  updated() {
+    if (this.members.length > 3) {
+      this.scroll = true;
+    }
+  },
+  methods: {
+    emailValidation(email) {
+      return email.toLowerCase().match(this.regex);
+    },
+    isMember() {
+      const found = this.members.find(member => member.email === this.selected);
+
+      if (found) {
+        return true;
+      }
+
+      return false;
+    },
+    handleSelect(id, email) {
+      const inputField = document.getElementById("input");
+
+      if (id) {
+        inputField.value = email;
+        this.selected = email;
+      }
+    },
+    handleHandover() {
+      if (!this.selected) {
+        return;
+      }
+
+      if (!this.emailValidation(this.selected)) {
+        this.invalidEmail = true;
+        return;
+      }
+
+      this.invalidEmail = false;
+      this.isLoading = true;
+
+      // TODO: dispatch to store to set the new owner of the doc
+      let assignee;
+
+      // Check if the user is already a member of the project or new member
+      if (this.isMember()) {
+        assignee = { assignee: `${this.selected}` };
+      } else {
+        assignee = { email: `${this.selected}`, role: "annotator" };
+      }
+
+      setTimeout(() => {
+        this.isLoading = false;
+        // this.snackbar();
+        this.selected = null;
+      }, 2000);
+    },
+    snackbar() {
+      this.$buefy.snackbar.open({
+        message: `
+        ${this.$t("document_successfully_handed")} ${this.selected}`,
+        actionText: null
+      });
+    }
+  }
+};
+</script>
+
+<style
+  scoped
+  lang="scss"
+  src="../../assets/scss/document_handover.scss"
+></style>

package/src/components/DocumentTopBar/DocumentName.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="document-name-component">
+    <div class="document-icon">
+      <ServerImage
+        :height="'22px'"
+        :image-url="`${selectedDocument.thumbnail_url}?${selectedDocument.downloaded_at}`"
+      >
+        <b-skeleton width="15px" height="22px" :rounded="false" />
+      </ServerImage>
+    </div>
+    <span class="file-name-section">
+      <span
+        :class="['document-name', isEditable ? 'is-editable' : '']"
+        :contenteditable="isEditable"
+        @input="handleInput"
+        @paste="handlePaste"
+        @keydown.enter="handleSave"
+        @blur="handleSave"
+        >{{ textContent }}</span
+      >
+    </span>
+    <div
+      v-if="
+        !publicView && showEditBtn && !editMode && !recalculatingAnnotations
+      "
+      class="edit-btn btn"
+      @click="handleEdit"
+    >
+      {{ $t("edit") }}
+    </div>
+    <div
+      v-if="showSaveBtn && !editMode"
+      class="save-btn btn"
+      @click="handleSave"
+    >
+      {{ $t("save") }}
+    </div>
+    <div v-if="saving" class="message-container">
+      <span class="loading-container">
+        <b-notification :closable="false" class="loading-background">
+          <b-loading v-model="saving" :is-full-page="isFullPage">
+            <b-icon icon="spinner" class="fa-spin loading-icon-size spinner" />
+          </b-loading>
+        </b-notification>
+      </span>
+      <span>{{ $t("autosaving") }}</span>
+    </div>
+    <div v-if="changed" class="message-container">
+      <span v-if="saved" class="cloud-icon"><FileNameSaved /></span>
+      <span v-else class="cloud-icon"><FileNameNotSaved /></span>
+      <span>{{ saved ? $t("saved") : $t("not_saved") }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import ServerImage from "../../assets/images/ServerImage";
+import FileNameSaved from "../../assets/images/FileNameSavedImage";
+import FileNameNotSaved from "../../assets/images/FileNameNotSavedImage";
+import { mapState } from "vuex";
+
+export default {
+  name: "DocumentName",
+  components: {
+    ServerImage,
+    FileNameSaved,
+    FileNameNotSaved,
+  },
+  props: {
+    dataFileName: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      isEditable: false,
+      showEditBtn: true,
+      showSaveBtn: false,
+      fileExtension: null,
+      fileName: null,
+      oldFileName: null,
+      saving: false,
+      isFullPage: false,
+      changed: false,
+      saved: false,
+    };
+  },
+  computed: {
+    ...mapState("document", [
+      "selectedDocument",
+      "publicView",
+      "recalculatingAnnotations",
+    ]),
+    ...mapState("display", ["optimalResolution"]),
+    ...mapState("edit", ["editMode"]),
+    textContent() {
+      if (this.isEditable) {
+        return this.oldFileName;
+      } else if (this.fileName) {
+        return this.shortFilenameIfNeeded(
+          `${this.fileName}.${this.fileExtension}`
+        );
+      } else {
+        return this.shortFilenameIfNeeded(this.dataFileName);
+      }
+    },
+  },
+  updated() {
+    const contentEditable = document.querySelector(".document-name");
+    if (this.isEditable && contentEditable) {
+      contentEditable.focus();
+      this.handleCaretPlacing(contentEditable);
+    }
+
+    if (this.changed) {
+      const that = this;
+      setTimeout(function () {
+        that.saved = false;
+        that.changed = false;
+        that.showEditBtn = true;
+        this.showSaveBtn = false;
+      }, 4000);
+    }
+  },
+  methods: {
+    shortFilenameIfNeeded(filename) {
+      if (filename && (filename.length >= 70 || !this.optimalResolution)) {
+        return (
+          filename.substr(0, 20) +
+          "..." +
+          filename.substr(filename.length - 10, filename.length)
+        );
+      }
+      return filename;
+    },
+    handleFileName() {
+      // Save the file name and the extension in different variables
+      this.fileName = this.dataFileName.split(".").slice(0, -1).join(".");
+
+      this.fileExtension = this.dataFileName.split(".").at(-1);
+    },
+    handleEdit() {
+      // Split file name and extension to only edit name
+      this.handleFileName();
+
+      this.isEditable = true;
+      this.showEditBtn = false;
+      this.showSaveBtn = true;
+      this.oldFileName = this.fileName;
+    },
+    handleCaretPlacing(contentEditable) {
+      let range, selection;
+      if (document.createRange) {
+        range = document.createRange(); //Create a range (a range is a like the selection but invisible)
+        range.selectNodeContents(contentEditable); //Select the entire contents of the element with the range
+        range.collapse(false); //collapse the range to the end point. false means collapse to end rather than the start
+        selection = window.getSelection(); //get the selection object (allows you to change selection)
+        selection.removeAllRanges(); //remove any selections already made
+        selection.addRange(range); //make the range you have just created the visible selection
+      } else if (document.selection) {
+        range = document.body.createTextRange(); //Create a range (a range is a like the selection but invisible)
+        range.moveToElementText(contentEditable); //Select the entire contents of the element with the range
+        range.collapse(false); //collapse the range to the end point. false means collapse to end rather than the start
+        range.select(); //Select the range (make it the visible selection
+      }
+    },
+    handlePaste(event) {
+      // TODO: modify to only paste plain text
+      event.preventDefault();
+    },
+    handleInput(event) {
+      const input = event.target.textContent;
+
+      // Set the new file name to the new input value
+      if (input === "") {
+        // If the user deletes the name:
+        this.fileName = "untitled";
+      } else {
+        this.fileName = input.trim();
+      }
+    },
+    handleSave(event) {
+      this.isEditable = false;
+
+      event.target.textContent = this.fileName;
+
+      const updatedFileName = {
+        data_file_name: `${this.fileName}.${this.fileExtension}`,
+      };
+
+      this.showSaveBtn = false;
+      this.saving = true;
+
+      this.$store
+        .dispatch("document/updateDocument", updatedFileName)
+        .then((response) => {
+          // Check if the response is successful or not
+          if (response) {
+            // if successful, set the old name to be the new name
+            this.changed = true;
+            this.oldFileName = this.fileName;
+            this.saved = true;
+          }
+        })
+        .catch((error) => {
+          this.changed = true;
+          event.target.textContent = this.oldFileName;
+          this.fileName = this.oldFileName;
+        })
+        .finally(() => {
+          this.saving = false;
+        });
+
+      // Remove focus from contenteditable
+      const contentNotEditable = document.querySelector(".document-name");
+      if (contentNotEditable) {
+        contentNotEditable.blur();
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss" src="../../assets/scss/document_name.scss"></style>

package/src/components/DocumentTopBar/DocumentTopBar.vue

@@ -0,0 +1,144 @@
+<template>
+  <div ref="documentTopBar" class="document-top-bar-component">
+    <div
+      v-if="selectedDocument && selectedDocument.pages.length > 0 && !loading"
+      class="document-top-bar"
+    >
+      <div class="left-bar-components">
+        <DocumentCategory
+          v-if="categories && !editMode && !recalculatingAnnotations"
+        />
+        <DocumentDatasetStatus
+          v-if="showDatasetDropdown && !editMode && !recalculatingAnnotations"
+          :dataset-status="selectedDocument.dataset_status"
+        />
+      </div>
+
+      <DocumentName :data-file-name="selectedDocument.data_file_name" />
+
+      <div class="right-bar-components">
+        <div
+          v-if="!editMode && (!publicView || !selectedDocument.is_reviewed)"
+          class="keyboard-actions-info"
+        >
+          <KeyboardActionsDescription />
+        </div>
+
+        <div
+          v-if="!editMode && (publicView || selectedDocument.is_reviewed)"
+          class="read-only-info"
+        >
+          <b-tooltip
+            type="is-dark"
+            :animated="false"
+            position="is-bottom"
+            class="right-aligned width-184"
+          >
+            <span v-if="publicView && !selectedDocument.is_reviewed">
+              {{ $t("lite_mode") }}
+            </span>
+            <span v-else class="doc-reviewed">
+              {{ $t("reviewed_mode") }}
+            </span>
+            <b-icon
+              :class="[
+                'info-icon is-small',
+                selectedDocument.is_reviewed && 'info-reviewed',
+              ]"
+              icon="circle-info"
+            />
+            <template #content>
+              <div
+                v-if="!selectedDocument.is_reviewed"
+                class="read-only-details"
+              >
+                {{ $t("limited_functionalities") }}
+              </div>
+              <div v-else class="read-only-details">
+                {{ $t("document_reviewed") }}
+              </div>
+            </template>
+          </b-tooltip>
+        </div>
+
+        <div class="top-bar-buttons">
+          <DocumentTopBarButtons />
+        </div>
+
+        <div v-if="showHandoverButton && !editMode" class="handover">
+          <DocumentHandover />
+        </div>
+      </div>
+    </div>
+    <div v-else class="loading-top-bar">
+      <b-skeleton position="is-centered" width="25%" height="60%" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+import DocumentDatasetStatus from "./DocumentDatasetStatus";
+import DocumentCategory from "../../components/DocumentCategory";
+import DocumentName from "./DocumentName";
+import DocumentHandover from "./DocumentHandover";
+import DocumentTopBarButtons from "./DocumentTopBarButtons";
+import KeyboardActionsDescription from "./KeyboardActionsDescription";
+
+/**
+ * This component has different functionalities
+ * based on Dashboard View or Edit Mode
+ */
+
+export default {
+  name: "DocumentTopBar",
+  components: {
+    DocumentCategory,
+    DocumentDatasetStatus,
+    DocumentName,
+    DocumentHandover,
+    DocumentTopBarButtons,
+    KeyboardActionsDescription,
+  },
+  data() {
+    return {
+      categoryError: false,
+      showDatasetDropdown: false,
+      showHandoverButton: false,
+    };
+  },
+  computed: {
+    ...mapState("document", [
+      "selectedDocument",
+      "publicView",
+      "loading",
+      "recalculatingAnnotations",
+    ]),
+    ...mapState("category", ["categories"]),
+    ...mapState("edit", ["editMode"]),
+  },
+  created() {
+    window.addEventListener("resize", this.handleResize);
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.handleResize);
+  },
+  mounted() {
+    if (this.$refs.documentTopBar) {
+      this.setComponentWidth(this.$refs.documentTopBar.offsetWidth);
+    }
+  },
+  methods: {
+    setComponentWidth(width) {
+      // set width for the error messages to match the width
+      // and avoid going over the Dashboard
+      this.$store.dispatch("document/setErrorMessageWidth", width);
+    },
+    handleResize() {
+      this.setComponentWidth(this.$refs.documentTopBar.offsetWidth);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss" src="../../assets/scss/document_top_bar.scss"></style>