VMO-4138 Unified Message Block

src/assets/messages.json

@@ -312,6 +312,7 @@
     "code-length": "Character Length",
     "code-validation": "Code validation",
     "codes": "Codes:",
+    "code": "Code",
     "collaborative-filtering-question": "Collaborative Filtering Question",
     "collaborative-filtering-rating": "Collaborative Filtering Rating",
     "combined-block-results": "Combined Block Results",
@@ -524,6 +525,7 @@
     "edit-tree-before-sending": "Edit tree before sending",
     "edit-validate-block": "Edit Validate Code Block",
     "edit-voice-content": "Edit Voice Content",
+    "edit-block-code": "Edit block code",
     "empty": "Empty",
     "empty-audio-library": "Empty audio library!",
     "empty-responses": "empty responses",
@@ -554,6 +556,8 @@
     "enter-clipboard-content": "Enter clipboard content...",
     "enter-confirmation-audio": "If using voice content, replace this with the filename of an audio file that you have uploaded to your audio library. This audio will be played back to the respondant after they have selected the choice. (You may leave this blank if the tree does not have voice content or if you wish to not play anything back to the contact)",
     "enter-date": "Enter date",
+    "enter-title": "Enter title",
+    "enter-block-code": "Enter block code",
     "enter-duration": "Enter duration",
     "enter-each-on-new-line": "Enter each on a new line",
     "enter-exit-label": "Enter Exit Label",
@@ -1139,6 +1143,8 @@
     "run-another-tree": "Run Another Tree",
     "runs-the-latest-version-of": "Runs the latest version of",
     "runs-the-latest-version-of ": "Runs the latest version of",
+    "record-audio": "Record Audio",
+    "upload-audio": "Upload Audio",
     "sat": "Sat",
     "saturday-day": "Saturday",
     "save": "Save",
@@ -1905,6 +1911,7 @@
     "code-length": "Longueur de caractères",
     "code-validation": "validation du code",
     "codes": "Codes:",
+    "code": "Code",
     "collaborative-filtering-question": "Question de filtrage collaboratif",
     "collaborative-filtering-rating": "Note de filtrage collaboratif",
     "combined-block-results": "Résultats combinés du bloc",
@@ -2116,6 +2123,7 @@
     "edit-tree-before-sending": "Modifier l'arbre avant d'envoyer",
     "edit-validate-block": "Modifier Valider le bloc de code",
     "edit-voice-content": "Modifier le contenu vocal",
+    "edit-block-code": "Modifier le code de bloc",
     "empty": "Vide",
     "empty-audio-library": "Bibliothèque audio vide!",
     "empty-responses": "réponses vides",
@@ -2145,6 +2153,8 @@
     "enter-clipboard-content": "Entrez le contenu Clipboard...",
     "enter-confirmation-audio": "Si vous utilisez le contenu vocal, le remplacer par le nom d'un fichier audio que vous avez téléchargé à votre bibliothèque audio. Ce audio sera lu au respondant après avoir sélectionné le choix. (Vous pouvez laisser ce champ vide si l'arbre n'a pas le contenu de la voix ou si vous souhaitez ne pas jouer quoi que ce soit de retour au contact)",
     "enter-date": "entrer la date",
+    "enter-title": "Entrer dans le titre",
+    "enter-block-code": "Entrer le code de bloc",
     "enter-duration": "Entrez la durée",
     "enter-each-on-new-line": "Entrez chaque sur une nouvelle ligne",
     "enter-exit-label": "Entrez sortie Étiquette",
@@ -2730,6 +2740,8 @@
     "run-another-tree": "Exécutez un autre arbre",
     "runs-the-latest-version-of": "Exécuter la dernière version de",
     "runs-the-latest-version-of ": "S'exécute la dernière version de",
+    "record-audio": "Enregistrement audio",
+    "upload-audio": "Télécharger audio",
     "sat": "Sam.",
     "saturday-day": "samedi",
     "save": "Sauvegarder",

src/components/common/AudioLibrarySearchField.vue

@@ -1,15 +1,6 @@
 <template>
   <div class="audio-library-search-field dropdown">
     <div class="input-group">
-      <span class="input-group-prepend">
-        <button
-          :class="{active: isEntireLibraryModeEnabled}"
-          class="btn btn-outline-secondary dropdown-toggle"
-          @click.prevent="toggleAudioLibrary">
-          <i class="glyphicon glyphicon-search" />
-        </button>
-      </span>
-
       <input
         v-model="rawQuery"
         type="text"
@@ -19,6 +10,15 @@
         @focus="activate"
         @blur="deactivate"
         @input="resetPagination">
+
+      <span class="input-group-append">
+        <button
+          :class="{active: isEntireLibraryModeEnabled}"
+          class="btn btn-primary dropdown-toggle"
+          @click.prevent="toggleAudioLibrary">
+          <i class="glyphicon glyphicon-search" />
+        </button>
+      </span>
     </div>
 
     <div

src/components/common/TextEditor.vue

@@ -1,11 +1,12 @@
 <template>
   <div>
-    <label v-if="label">{{ label }}</label>
+    <h6 v-if="label">{{ label }}</h6>
     <textarea
       class="form-control"
       :class="{ 'is-invalid': isInvalid }"
       :placeholder="placeholder"
       :value="value"
+      :rows="rows"
       @keydown="$emit('keydown', $event)"
       @input="$emit('input', $event.target.value)" />
     <slot />
@@ -33,6 +34,11 @@ export default {
       default: null,
       required: false,
     },
+    rows: {
+      type: Number,
+      required: false,
+      default: 1,
+    },
   },
   computed: {
     isInvalid() {

src/components/interaction-designer/block-editors/LabelEditor.vue

@@ -1,25 +1,36 @@
 <template>
-  <validation-message
-    #input-control="{ isValid }"
-    :message-key="`block/${block.uuid}/label`">
-    <div class="block-label">
-      <text-editor
-        v-model="label"
-        :label="'flow-builder.block-label' | trans"
-        :placeholder="'flow-builder.enter-block-label' | trans"
-        :valid-state="isValid" />
-    </div>
-  </validation-message>
+  <section class="mb-3">
+    <label class="text-primary">{{ 'flow-builder.title' | trans }}</label>
+    <validation-message
+      #input-control="{ isValid }"
+      :message-key="`block/${block.uuid}/label`">
+      <div class="d-flex">
+        <text-editor
+          v-model="blockLabel"
+          class="w-100"
+          :label="''"
+          :placeholder="'flow-builder.enter-title' | trans"
+          :valid-state="isValid" />
+        <span
+          class="btn btn-outline-primary btn-xs align-self-center ml-2"
+          @click="emitGearClickedEvent">
+          <font-awesome-icon
+            :icon="['fac', 'settings']"
+            class="fa-btn text-primary" />
+        </span>
+      </div>
+    </validation-message>
+  </section>
 </template>
 
 <script lang="ts">
+import {Component, Prop} from 'vue-property-decorator'
 import TextEditor from '@/components/common/TextEditor.vue'
+import ValidationMessage from '@/components/common/ValidationMessage.vue'
+import {mixins} from 'vue-class-component'
 import Lang from '@/lib/filters/lang'
-import {Component, Prop} from 'vue-property-decorator'
 import {IBlock} from '@floip/flow-runner'
 import {namespace} from 'vuex-class'
-import {mixins} from 'vue-class-component'
-import ValidationMessage from '@/components/common/ValidationMessage.vue'
 
 const flowVuexNamespace = namespace('flow')
 
@@ -29,17 +40,22 @@ const flowVuexNamespace = namespace('flow')
     ValidationMessage,
   },
 })
-export default class LabelEditor extends mixins(Lang) {
-  @Prop() block!: IBlock
+class LabelEditor extends mixins(Lang) {
+  @Prop() readonly block!: IBlock
 
-  get label(): IBlock['label'] {
+  get blockLabel(): IBlock['label'] {
     return this.block.label
   }
 
-  set label(value: IBlock['label']) {
+  set blockLabel(value: IBlock['label']) {
     this.block_setLabel({blockId: this.block.uuid, value})
   }
 
-  @flowVuexNamespace.Mutation block_setLabel!: ({blockId, value}: { blockId: IBlock['uuid'], value: IBlock['label'] }) => void
+  emitGearClickedEvent(): void {
+    this.$emit('gearClicked')
+  }
+
+  @flowVuexNamespace.Action block_setLabel!: ({blockId, value}: { blockId: IBlock['uuid'], value: IBlock['label'] }) => void
 }
+export default LabelEditor
 </script>

src/components/interaction-designer/block-editors/NameEditor.vue

@@ -1,58 +1,85 @@
 <template>
-  <validation-message
-    #input-control="{ isValid }"
-    :message-key="`block/${block.uuid}/name`">
-    <div class="block-name">
-      <text-editor
-        v-model="name"
-        :label="'flow-builder.block-name' | trans"
-        :placeholder="'flow-builder.enter-block-name' | trans"
-        :valid-state="isValid"
-        @keydown="filterName">
-        <small class="text-muted">
-          {{ 'flow-builder.only-accepts-word-characters' | trans }}
-        </small>
-      </text-editor>
-    </div>
-  </validation-message>
+  <div class="mt-3">
+    <validation-message
+      #input-control="{ isValid }"
+      :message-key="`block/${block.uuid}/name`">
+      <div v-if="editBlockName || isValid === false">
+        <h6>{{ 'flow-builder.edit-block-code' | trans }}</h6>
+        <div class="d-flex">
+          <text-editor
+            v-model="blockName"
+            class="w-100"
+            :label="''"
+            :placeholder="'flow-builder.enter-block-code' | trans"
+            :valid-state="isValid"
+            @keydown="filterName" />
+          <span
+            class="btn btn-primary btn-xs align-self-center ml-2"
+            @click="editBlockName = false">
+            <font-awesome-icon
+              :icon="['fas', 'check']"
+              class="fa-btn" />
+          </span>
+        </div>
+      </div>
+      <div v-else class="d-flex justify-content-between">
+        <div class="block-code align-self-center">
+          <h6 class="d-inline">{{'flow-builder.code' | trans}}:</h6>
+          <span> {{ blockName }} </span>
+        </div>
+        <span class="btn btn-primary btn-xs align-self-baseline ml-2" @click="editBlockName = true">
+          <font-awesome-icon
+            :icon="['far', 'edit']"
+            class="fa-btn" />
+        </span>
+      </div>
+    </validation-message>
+  </div>
 </template>
 
-<script lang="js">
-/* eslint-disable @typescript-eslint/explicit-module-boundary-types,@typescript-eslint/strict-boolean-expressions */
-import {mapMutations} from 'vuex'
-import TextEditor from '@/components/common/TextEditor'
-import {lang} from '@/lib/filters/lang'
-import ValidationMessage from '@/components/common/ValidationMessage'
+<script lang="ts">
+import {Component, Prop} from 'vue-property-decorator'
+import ValidationMessage from '@/components/common/ValidationMessage.vue'
+import {mixins} from 'vue-class-component'
+import Lang from '@/lib/filters/lang'
+import {IBlock} from '@floip/flow-runner'
+import {namespace} from 'vuex-class'
+import TextEditor from '@/components/common/TextEditor.vue'
 
-export default {
+const flowVuexNamespace = namespace('flow')
+
+@Component({
   components: {
     TextEditor,
     ValidationMessage,
   },
-  mixins: [lang],
-  props: {
-    block: {
-      type: Object,
-      required: true,
-    },
-  },
-  computed: {
-    name: {
-      get() {
-        return this.block.name
-      },
-      set(value) {
-        this.block_setName({blockId: this.block.uuid, value})
-      },
-    },
-  },
-  methods: {
-    ...mapMutations('flow', ['block_setName']),
-    filterName(e) {
-      if (e.key.match(/\W+|Enter/g)) {
-        e.preventDefault()
-      }
-    },
-  },
+})
+class NameEditor extends mixins(Lang) {
+  editBlockName = false
+
+  @Prop() readonly block!: IBlock
+
+  get blockName(): IBlock['name'] {
+    return this.block.name
+  }
+
+  set blockName(value: IBlock['name']) {
+    this.block_setName({blockId: this.block.uuid, value})
+  }
+
+  filterName(e: KeyboardEvent): void {
+    if (e.key.match(/\W+|Enter/g)) {
+      e.preventDefault()
+    }
+  }
+
+  @flowVuexNamespace.Mutation block_setName!: ({blockId, value}: {blockId: IBlock['uuid'], value: IBlock['name']}) => void
 }
+export default NameEditor
 </script>
+
+<style scoped>
+.block-code {
+  word-break: break-all;
+}
+</style>

src/components/interaction-designer/block-editors/SemanticLabelEditor.vue

@@ -5,7 +5,7 @@
     <div class="block-semantic-label">
       <text-editor
         v-model="semanticLabel"
-        :label="'flow-builder.block-semantic-label' | trans"
+        :label="'flow-builder.block-exit-semantic-label' | trans"
         :placeholder="'flow-builder.enter-block-semantic-label' | trans"
         :valid-state="isValid" />
     </div>
@@ -15,9 +15,9 @@
 <script lang="js">
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types,@typescript-eslint/strict-boolean-expressions */
 import {mapMutations} from 'vuex'
-import TextEditor from '@/components/common/TextEditor'
 import {lang} from '@/lib/filters/lang'
 import ValidationMessage from '@/components/common/ValidationMessage'
+import TextEditor from '@/components/common/TextEditor'
 
 export default {
   components: {

src/components/interaction-designer/block-types/ConsoleIO_PrintBlock.vue

@@ -5,9 +5,13 @@
     </h3>
 
     <fieldset :disabled="!isEditable">
+      <block-label-editor
+        :block="block"
+        @gearClicked="showSemanticLabel = !showSemanticLabel" />
+      <block-semantic-label-editor
+        v-if="showSemanticLabel"
+        :block="block" />
       <block-name-editor :block="block" />
-      <block-label-editor :block="block" />
-      <block-semantic-label-editor :block="block" />
 
       <resource-editor
         v-if="promptResource"
@@ -61,6 +65,8 @@ class ConsoleIO_PrintBlock extends mixins(Lang) {
 
   @Prop() readonly flow!: IFlow
 
+  showSemanticLabel = false
+
   get promptResource(): IResource {
     return this.resourcesByUuid[this.block.config.message]
   }