New flow of label and entities creation (#76)

fix #68

frontend/components/commons/GlobalActions.vue

@@ -15,7 +15,6 @@
         :multi-label="isMultiLabelRecord"
         class="global-actions__select"
         :options="options"
-        @addNewLabel="onAddNewLabel"
         @selected="onSelectAnnotation($event)"
       ></FeedbackDropdownAll>
       <ReButton class="global-actions__button" @click="onValidate"
@@ -28,12 +27,28 @@
         Actions will apply to the
         <span>{{ selectedRecords.length }} records</span> selected
       </p>
+      <div class="new-label__container">
+        <reButton class="new-label__main-button button-secondary--outline" @click="newLabelVisible = true" v-if="!newLabelVisible"><svgicon name="plus" width="20" height="20" /> Create new label</reButton>
+        <div v-else class="new-label">
+            <input
+              autofocus
+              class="new-label__input"
+              v-model="newLabel"
+              type="text"
+              placeholder="New label"
+              @keyup.enter="addNewLabel(newLabel)"
+            />
+            <svgicon class="new-label__close" name="cross" @click="closeNewLabelVisible()" />
+            <reButton class="new-label__button button-primary--small" @click="addNewLabel(newLabel)" v-if="this.newLabel">Create</reButton>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 <script>
 import { mapActions } from "vuex";
 import "assets/icons/export";
+import "assets/icons/plus";
 
 export default {
   props: {
@@ -45,6 +60,8 @@ export default {
   data: () => ({
     allSelected: false,
     openExportModal: false,
+    newLabel: undefined,
+    newLabelVisible: false,
   }),
   computed: {
     selectedRecords() {
@@ -130,6 +147,10 @@ export default {
         records: records,
       });
     },
+    closeNewLabelVisible() {
+      this.newLabel = undefined;
+      this.newLabelVisible = false;
+    },
     async onDiscard() {
       await this.discard({
         dataset: this.dataset,
@@ -142,11 +163,21 @@ export default {
         records: this.selectedRecords,
       });
     },
-    async onAddNewLabel(newLabel) {
-      this.dataset.$dispatch("setLabels", {
-        dataset: this.dataset,
-        labels: [...new Set([...this.dataset.labels, newLabel])],
-      });
+    async addNewLabel(newLabel) {
+      if (this.isTextClassification) {
+        this.dataset.$dispatch("setLabels", {
+          dataset: this.dataset,
+          labels: [...new Set([...this.dataset.labels, newLabel])],
+        });
+      } else if (this.isTokenClassification) {
+          this.dataset.$dispatch("setEntities", {
+          dataset: this.dataset,
+          entities: [
+            ...new Set([...this.dataset.entities.map((ent) => ent.text), newLabel]),
+          ],
+        });
+      }
+      this.closeNewLabelVisible();
     },
   },
 };
@@ -157,6 +188,42 @@ export default {
   padding-top: 0;
   padding-bottom: 0;
 }
+.new-label {
+  width: 180px;
+  border-radius: 3px;
+  border: 2px solid $primary-color;
+  padding: 1em;
+  position: absolute;
+  top: -1em;
+  background: $lighter-color;
+  text-align: left;
+  &__close {
+    position: absolute;
+    top: 1em;
+    right: 1em;
+    cursor: pointer;
+  }
+  &__input {
+    border: 0;
+    outline: none;
+    padding-right: 2em;
+    width: 100%;
+  }
+  &__button {
+    margin-top: 2em;
+    margin-bottom: 0 !important;
+  }
+  &__main-button {
+    margin-bottom: 0 !important;
+  }
+  &__container {
+    text-align: right;
+    position: relative;
+    margin-right: 0;
+    margin-left: auto;
+    width: 180px;
+  }
+}
 .global-actions {
   display: flex;
   align-items: center;

frontend/components/core/ReButton.vue

@@ -123,6 +123,23 @@ export default {
     line-height: 30px;
     min-width: auto;
   }
+  &--outline {
+    @extend .button-secondary;
+    background: transparent;
+    border: 1px solid $line-smooth-color;
+    color: $secondary-color;
+    text-transform: none;
+    &:hover,
+    &:focus {
+      background: transparent;
+      border-color: darken($line-smooth-color, 10%);
+      color: darken($secondary-color, 10%);
+    }
+    &[disabled] {
+      background-color: transparent;
+      opacity: 0.6;
+    }
+  }
 }
 
 .button-tertiary {

frontend/components/text-classifier/FeedbackDropdownAll.vue

@@ -37,23 +37,6 @@
             </span>
           </li>
         </ul>
-        <div v-if="!filterSearch(options, searchText).length" class="selector__new-label">
-          <p v-if="!addnewLabelVisible" class="selector__new-label__button"
-            @click="openAddLabel()"
-          >
-            + New Label
-          </p>
-          <div v-if="addnewLabelVisible" class="selector__new-label__input">
-            <input
-              ref="addLabelInput"
-              v-model="newLabel"
-              type="text"
-              placeholder="New label"
-              @keyup.enter="addNewLabel(newLabel)"
-            />
-            <svgicon name="cross" @click="addnewLabelVisible = false" />
-          </div>
-        </div>
         <div v-if="multiLabel && filterSearch(options, searchText).length" class="filter__buttons">
           <ReButton class="button-tertiary--small button-tertiary--outline" @click="onVisibility(false)">
             Cancel
@@ -81,8 +64,6 @@ export default {
     searchText: undefined,
     showTooltipOnHover: false,
     selectedOptions: [],
-    newLabel: undefined,
-    addnewLabelVisible: false,
   }),
   filters: {
     truncate(string, value) {
@@ -93,33 +74,18 @@ export default {
     },
   },
   methods: {
-    openAddLabel() {
-      let text = this.searchText;
-      this.newLabel = text
-      this.addnewLabelVisible = true;
-      this.$nextTick(() => this.$refs.addLabelInput.focus());
-    },
-    addNewLabel(newLabel) {
-      if (!this.options.some(option => option === newLabel)) {
-        this.$emit('addNewLabel', newLabel)
-      }
-      this.addnewLabelVisible = false;
-    },
     onVisibility(value) {
       this.visible = value;
       this.searchText = undefined;
-      this.addnewLabelVisible = false;
     },
     selected(labels) {
       this.$emit('selected', labels);
-      this.addnewLabelVisible = false;
       this.visible = false;
       this.selectedOptions = [];
     },
     
     cleanSearchText() {
       this.searchText = undefined;
-      this.addnewLabelVisible = false;
     },
     filterSearch(options, text) {
       if (text === undefined) {
@@ -145,24 +111,6 @@ export default {
 <style lang="scss" scoped>
 // @import "@recognai/re-commons/src/assets/scss/components/tooltip.scss";
 .selector {
-  &__new-label {
-    &__button {
-      cursor: pointer;
-    }
-    &__input {
-      display: flex;
-      align-content: center;
-      input {
-        @include input-placeholder {
-          color: $font-secondary;
-        }
-      }
-      .svg-icon {
-        margin: auto;
-        cursor: pointer;
-      }
-    }
-  }
   &__option {
     display: block;
     padding: 0.5em 0;

frontend/components/text-classifier/RecordInputs.vue

@@ -38,6 +38,7 @@ export default {
 <style lang="scss" scoped>
 .record {
   white-space: pre-line;
+  display: block;
   &__key {
     font-weight: 600;
     margin-right: 0.5em;

frontend/components/token-classifier/EntitiesHeader.vue

@@ -26,24 +26,6 @@
         entitiesNumber === filteredEntities.length ? "Show less" : "Show all"
       }}</ReButton
     >
-    <p
-      v-if="!addnewSlotVisible && annotationMode"
-      class="entity__new"
-      @click="openAddSlot()"
-    >
-      + New Entity
-    </p>
-    <div v-if="addnewSlotVisible" class="entity__new__container">
-      <input
-        ref="addSlotInput"
-        v-model="newSlot"
-        class="entity__new__input"
-        type="text"
-        placeholder="New entity"
-        @keyup.enter="addEntity(newSlot)"
-      />
-      <svgicon name="cross" @click="addnewSlotVisible = false" />
-    </div>
   </div>
 </template>
 
@@ -69,9 +51,7 @@ export default {
   data: () => ({
     activeEntity: undefined,
     searchEntity: "",
-    newSlot: "",
     showEntitySelector: false,
-    addnewSlotVisible: false,
     entitiesNumber: 12,
   }),
   computed: {
@@ -101,19 +81,6 @@ export default {
         }
       }
     },
-    openAddSlot() {
-      this.addnewSlotVisible = true;
-      this.$nextTick(() => this.$refs.addSlotInput.focus());
-    },
-    async addEntity(entity) {
-      this.addnewSlotVisible = false;
-      this.dataset.$dispatch("setEntities", {
-        dataset: this.dataset,
-        entities: [
-          ...new Set([...this.dataset.entities.map((ent) => ent.text), entity]),
-        ],
-      });
-    },
   },
 };
 </script>
@@ -160,54 +127,6 @@ export default {
       display: none;
     }
   }
-  &__new {
-    margin: 0 0 0 0.5em;
-    display: inline-block;
-    color: $primary-color;
-    line-height: 25px;
-    &:hover {
-      color: darken($primary-color, 10%);
-    }
-    &__container {
-      margin-left: 0.5em;
-      position: relative;
-      display: inline-block;
-      .re-button {
-        margin-left: auto;
-        margin-right: 1em;
-        margin-bottom: 0.5em;
-        display: block;
-        color: $primary-color;
-        font-weight: bold;
-        &:hover,
-        &:focus {
-          text-decoration: none;
-          color: darken($primary-color, 10%);
-        }
-        &:after {
-          content: none !important;
-        }
-      }
-      .svg-icon {
-        cursor: pointer;
-        position: absolute;
-        right: 1em;
-        top: 0;
-        bottom: 0;
-        margin: auto;
-        color: $primary-color;
-        &:hover {
-          color: darken($primary-color, 10%);
-        }
-      }
-    }
-    &__input {
-      border: 1px solid $line-smooth-color;
-      min-height: 30px;
-      padding: 2px 10px;
-      outline: none;
-    }
-  }
 }
 // ner colors