@konfuzio/document-validation-ui 0.1.1 → 0.1.2-pre-release-1

package/src/assets/scss/document_dataset_status.scss

@@ -1,46 +0,0 @@
-@import "./imports.scss";
-
-.dataset-status-chooser {
-  margin-left: 0 !important;
-  cursor: pointer;
-
-  .dataset-status-drop-down {
-    display: flex;
-    height: 100%;
-    align-items: center;
-    padding: 0 8px 0 16px;
-
-    .caret,
-    .icon {
-      text-align: center;
-      margin-right: 8px;
-    }
-
-    .dataset-status-info {
-      min-width: 100px;
-      width: 100px;
-
-      .dataset-status-title {
-        font-size: 12px;
-        color: $grey;
-      }
-
-      .dataset-status-name {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
-  }
-
-  .dropdown-menu-title {
-    padding-left: 16px;
-    font-weight: 400;
-    font-size: 12px;
-  }
-
-  p {
-    font-size: 12px;
-    color: $grey;
-  }
-}

package/src/assets/scss/document_handover.scss

@@ -1,200 +0,0 @@
-@import "./imports.scss";
-
-.handover-container {
-  .handover-btn {
-    font-size: 14px;
-    font-weight: 500;
-
-    &:hover {
-      background-color: $darker-green;
-    }
-
-    &:focus {
-      box-shadow: none;
-    }
-  }
-
-  .handover-collapse {
-    position: absolute !important;
-    right: 20px;
-    top: 52px;
-    max-width: 435px;
-    max-height: 264px;
-    margin: 0;
-
-    .collapse-content {
-      .notification {
-        background-color: $white;
-        border: 1px solid $subtle-grey;
-        box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
-          0px 4px 6px -2px rgba(16, 24, 40, 0.03);
-        padding: 0;
-
-        .content {
-          .container {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-          }
-
-          .header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            border-bottom: 1px solid $subtle-grey;
-            padding: 15px;
-
-            .title {
-              margin: 0 !important;
-              color: $dark-blue;
-              font-size: 14px;
-            }
-          }
-
-          .input-container {
-            .input-section {
-              margin-top: 7px;
-              padding-left: 15px;
-              padding-right: 15px;
-              font-size: 14px;
-
-              ::placeholder {
-                font-size: 14px;
-                font-weight: 400;
-                color: $grey;
-              }
-
-              .handover-btn-menu {
-                height: 40px;
-                width: 97px;
-                background-color: $dark-blue;
-                color: $white;
-                font-size: 14px;
-                border: 0;
-
-                &:focus {
-                  box-shadow: none;
-                  border: 0;
-                }
-              }
-
-              .field {
-                margin: 0 !important;
-                padding-right: 8px;
-
-                .validation-message {
-                  display: none;
-                }
-
-                .control {
-                  width: 298px;
-                  height: 40px;
-
-                  .input {
-                    border-color: $subtlest-grey;
-                    font-size: 14px;
-                    height: 40px;
-
-                    &:focus {
-                      box-shadow: none !important;
-                    }
-                  }
-                }
-              }
-
-              .loading-overlay.is-active {
-                position: relative;
-                height: 40px;
-                width: 97px;
-                border-radius: 4px;
-                background-color: $dark-blue;
-
-                .spinner {
-                  color: $white;
-                }
-              }
-            }
-
-            &.invalid {
-              .input {
-                border-color: $red !important;
-              }
-            }
-
-            .invalid-email-msg {
-              color: $red;
-              margin: 8px 15px 20px 15px;
-            }
-          }
-
-          .members-section {
-            margin: 15px;
-            margin-right: 0;
-
-            .members-title {
-              display: flex !important;
-              margin-bottom: 10px;
-
-              .title {
-                color: $grey !important;
-                font-size: 12px !important;
-                font-weight: 400 !important;
-                margin-bottom: 0 !important;
-              }
-            }
-
-            .member-list {
-              max-height: 110px;
-              padding-right: 15px;
-
-              &.scroll {
-                overflow: auto;
-              }
-
-              .member {
-                padding-bottom: 7px;
-
-                .email {
-                  margin-bottom: 0 !important;
-                  color: $grey-darker;
-                }
-
-                .select-btn {
-                  height: 32px;
-                  color: $dark-blue;
-                  font-weight: 500;
-                  font-size: 14px;
-
-                  &:hover {
-                    background-color: $grey-hover;
-                  }
-
-                  &:focus {
-                    box-shadow: none;
-                    border-color: $grey-outline;
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-
-    .close-icon-container {
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-
-      .close-btn {
-        &.error-icon {
-          color: $grey;
-        }
-
-        &.snackbar-icon {
-          color: $white;
-        }
-      }
-    }
-  }
-}

package/src/components/DocumentTopBar/DocumentDatasetStatus.vue

@@ -1,103 +0,0 @@
-<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

@@ -1,202 +0,0 @@
-<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>