feat: Support variables in canned response (#6077)

- Added the option to insert variables in canned responses.
- Populate variables on selecting a canned response.
- Show a warning if there are any undefined variables in the message before sending a message.
This commit is contained in:
Muhsin Keloth
2023-01-24 13:06:50 +05:30
committed by GitHub
parent cab409f3ef
commit d9a1154977
13 changed files with 479 additions and 31 deletions

View File

@@ -79,6 +79,7 @@
v-model="message"
class="message-editor"
:class="{ editor_warning: $v.message.$error }"
:enable-variables="true"
:placeholder="$t('NEW_CONVERSATION.FORM.MESSAGE.PLACEHOLDER')"
@toggle-canned-menu="toggleCannedMenu"
@blur="$v.message.$touch"

View File

@@ -21,13 +21,17 @@
<div class="medium-12 columns">
<label :class="{ error: $v.content.$error }">
{{ $t('CANNED_MGMT.ADD.FORM.CONTENT.LABEL') }}
<textarea
v-model.trim="content"
rows="5"
type="text"
:placeholder="$t('CANNED_MGMT.ADD.FORM.CONTENT.PLACEHOLDER')"
@input="$v.content.$touch"
/>
<label class="editor-wrap">
<woot-message-editor
v-model="content"
class="message-editor"
:class="{ editor_warning: $v.content.$error }"
:enable-variables="true"
:enable-canned-responses="false"
:placeholder="$t('CANNED_MGMT.ADD.FORM.CONTENT.PLACEHOLDER')"
@blur="$v.content.$touch"
/>
</label>
</label>
</div>
<div class="modal-footer">
@@ -56,12 +60,14 @@ import { required, minLength } from 'vuelidate/lib/validators';
import WootSubmitButton from '../../../../components/buttons/FormSubmitButton';
import Modal from '../../../../components/Modal';
import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor';
import alertMixin from 'shared/mixins/alertMixin';
export default {
components: {
WootSubmitButton,
Modal,
WootMessageEditor,
},
mixins: [alertMixin],
props: {
@@ -125,3 +131,11 @@ export default {
},
};
</script>
<style scoped lang="scss">
::v-deep {
.ProseMirror-menubar {
display: none;
}
}
</style>

View File

@@ -18,13 +18,17 @@
<div class="medium-12 columns">
<label :class="{ error: $v.content.$error }">
{{ $t('CANNED_MGMT.EDIT.FORM.CONTENT.LABEL') }}
<textarea
v-model.trim="content"
rows="5"
type="text"
:placeholder="$t('CANNED_MGMT.EDIT.FORM.CONTENT.PLACEHOLDER')"
@input="$v.content.$touch"
/>
<label class="editor-wrap">
<woot-message-editor
v-model="content"
class="message-editor"
:class="{ editor_warning: $v.content.$error }"
:enable-variables="true"
:enable-canned-responses="false"
:placeholder="$t('CANNED_MGMT.EDIT.FORM.CONTENT.PLACEHOLDER')"
@blur="$v.content.$touch"
/>
</label>
</label>
</div>
<div class="modal-footer">
@@ -51,7 +55,7 @@
<script>
/* eslint no-console: 0 */
import { required, minLength } from 'vuelidate/lib/validators';
import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor';
import WootSubmitButton from '../../../../components/buttons/FormSubmitButton';
import Modal from '../../../../components/Modal';
@@ -59,6 +63,7 @@ export default {
components: {
WootSubmitButton,
Modal,
WootMessageEditor,
},
props: {
id: { type: Number, default: null },
@@ -139,3 +144,10 @@ export default {
},
};
</script>
<style scoped lang="scss">
::v-deep {
.ProseMirror-menubar {
display: none;
}
}
</style>