akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

chore: Migrate remaining components

Browse Source
This commit is contained in:
Fayaz Ahmed
2024-07-10 16:05:45 +05:30
parent 28d9c2615d
commit 0c969bf318
10 changed files with 94 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/components/CustomAttribute.vue
+15 -11
View File
@@ -14,7 +14,7 @@
<span
class="w-full inline-flex gap-1.5 items-start font-medium whitespace-nowrap text-sm mb-0"
:class="
$v.editedValue.$error
v$.editedValue.$error
? 'text-red-400 dark:text-red-500'
: 'text-slate-800 dark:text-slate-100'
"
@@ -48,8 +48,8 @@
:type="inputType"
class="!h-8 ltr:!rounded-r-none rtl:!rounded-l-none !mb-0 !text-sm"
autofocus="true"
:class="{ error: $v.editedValue.$error }"
@blur="$v.editedValue.$touch"
:class="{ error: v$.editedValue.$error }"
@blur="v$.editedValue.$touch"
@keyup.enter="onUpdate"
/>
<div>
@@ -142,6 +142,7 @@ import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue';
import HelperTextPopup from 'dashboard/components/ui/HelperTextPopup.vue';
import { isValidURL } from '../helper/URLHelper';
import customAttributeMixin from '../mixins/customAttributeMixin';
import { useVuelidate } from '@vuelidate/core';
const DATE_FORMAT = 'yyyy-MM-dd';
@@ -167,6 +168,9 @@ export default {
attributeKey: { type: String, required: true },
contactId: { type: Number, default: null },
},
setup() {
return { v$: useVuelidate() };
},
data() {
return {
isEditing: false,
@@ -225,13 +229,13 @@ export default {
return this.isAttributeTypeLink ? 'url' : this.attributeType;
},
shouldShowErrorMessage() {
return this.$v.editedValue.$error;
return this.v$.editedValue.$error;
},
errorMessage() {
if (this.$v.editedValue.url) {
if (this.v$.editedValue.url) {
return this.$t('CUSTOM_ATTRIBUTES.VALIDATIONS.INVALID_URL');
}
if (!this.$v.editedValue.regexValidation) {
if (!this.v$.editedValue.regexValidation) {
return this.regexCue
? this.regexCue
: this.$t('CUSTOM_ATTRIBUTES.VALIDATIONS.INVALID_INPUT');
@@ -246,7 +250,7 @@ export default {
},
contactId() {
// Fix to solve validation not resetting when contactId changes in contact page
this.$v.$reset();
this.v$.$reset();
},
},
@@ -287,7 +291,7 @@ export default {
}
},
onClickAway() {
this.$v.$reset();
this.v$.$reset();
this.isEditing = false;
},
onEdit() {
@@ -307,8 +311,8 @@ export default {
this.attributeType === 'date'
? parseISO(this.editedValue)
: this.editedValue;
this.$v.$touch();
if (this.$v.$invalid) {
this.v$.$touch();
if (this.v$.$invalid) {
return;
}
this.isEditing = false;
@@ -316,7 +320,7 @@ export default {
},
onDelete() {
this.isEditing = false;
this.$v.$reset();
this.v$.$reset();
this.$emit('delete', this.attributeKey);
},
onCopy() {
app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
+16 -12
View File
@@ -1,16 +1,16 @@
<template>
<div>
<div v-if="toEmails">
<div class="input-group small" :class="{ error: $v.toEmailsVal.$error }">
<div class="input-group small" :class="{ error: v$.toEmailsVal.$error }">
<label class="input-group-label">
{{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.TO') }}
</label>
<div class="rounded-none flex-1 min-w-0 m-0 whitespace-nowrap">
<woot-input
v-model.trim="$v.toEmailsVal.$model"
v-model.trim="v$.toEmailsVal.$model"
type="text"
class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
:class="{ error: $v.toEmailsVal.$error }"
:class="{ error: v$.toEmailsVal.$error }"
:placeholder="$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.PLACEHOLDER')"
@blur="onBlur"
/>
@@ -18,16 +18,16 @@
</div>
</div>
<div class="input-group-wrap">
<div class="input-group small" :class="{ error: $v.ccEmailsVal.$error }">
<div class="input-group small" :class="{ error: v$.ccEmailsVal.$error }">
<label class="input-group-label">
{{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.LABEL') }}
</label>
<div class="rounded-none flex-1 min-w-0 m-0 whitespace-nowrap">
<woot-input
v-model.trim="$v.ccEmailsVal.$model"
v-model.trim="v$.ccEmailsVal.$model"
class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
type="text"
:class="{ error: $v.ccEmailsVal.$error }"
:class="{ error: v$.ccEmailsVal.$error }"
:placeholder="$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.PLACEHOLDER')"
@blur="onBlur"
/>
@@ -41,21 +41,21 @@
{{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.ADD_BCC') }}
</woot-button>
</div>
<span v-if="$v.ccEmailsVal.$error" class="message">
<span v-if="v$.ccEmailsVal.$error" class="message">
{{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.ERROR') }}
</span>
</div>
<div v-if="showBcc" class="input-group-wrap">
<div class="input-group small" :class="{ error: $v.bccEmailsVal.$error }">
<div class="input-group small" :class="{ error: v$.bccEmailsVal.$error }">
<label class="input-group-label">
{{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.LABEL') }}
</label>
<div class="rounded-none flex-1 min-w-0 m-0 whitespace-nowrap">
<woot-input
v-model.trim="$v.bccEmailsVal.$model"
v-model.trim="v$.bccEmailsVal.$model"
type="text"
class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
:class="{ error: $v.bccEmailsVal.$error }"
:class="{ error: v$.bccEmailsVal.$error }"
:placeholder="
$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.PLACEHOLDER')
"
@@ -63,7 +63,7 @@
/>
</div>
</div>
<span v-if="$v.bccEmailsVal.$error" class="message">
<span v-if="v$.bccEmailsVal.$error" class="message">
{{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.ERROR') }}
</span>
</div>
@@ -72,6 +72,7 @@
<script>
import { validEmailsByComma } from './helpers/emailHeadHelper';
import { useVuelidate } from '@vuelidate/core';
export default {
props: {
@@ -88,6 +89,9 @@ export default {
default: '',
},
},
setup() {
return { v$: useVuelidate() };
},
data() {
return {
showBcc: false,
@@ -140,7 +144,7 @@ export default {
this.showBcc = true;
},
onBlur() {
this.$v.$touch();
this.v$.$touch();
this.$emit('update:bccEmails', this.bccEmailsVal);
this.$emit('update:ccEmails', this.ccEmailsVal);
this.$emit('update:toEmails', this.toEmailsVal);
app/javascript/dashboard/mixins/automations/methodsMixin.js
+7 -2
View File
@@ -1,5 +1,7 @@
import languages from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
import countries from 'shared/constants/countries';
import { useVuelidate } from '@vuelidate/core';
import {
generateCustomAttributeTypes,
getActionOptions,
@@ -19,6 +21,9 @@ import {
import { mapGetters } from 'vuex';
export default {
setup() {
return { v$: useVuelidate() };
},
computed: {
...mapGetters({
agents: 'agents/getAgents',
@@ -151,8 +156,8 @@ export default {
}
},
submitAutomation() {
this.$v.$touch();
if (this.$v.$invalid) return;
this.v$.$touch();
if (this.v$.$invalid) return;
const automation = generateAutomationPayload(this.automation);
this.$emit('saveAutomation', automation, this.mode);
},
app/javascript/dashboard/routes/dashboard/settings/labels/validationMixin.js
+9 -4
View File
@@ -1,14 +1,19 @@
import { useVuelidate } from '@vuelidate/core';
export default {
setup() {
return { v$: useVuelidate() };
},
computed: {
getLabelTitleErrorMessage() {
let errorMessage = '';
if (!this.$v.title.$error) {
if (!this.v$.title.$error) {
errorMessage = '';
} else if (!this.$v.title.required) {
} else if (!this.v$.title.required) {
errorMessage = this.$t('LABEL_MGMT.FORM.NAME.REQUIRED_ERROR');
} else if (!this.$v.title.minLength) {
} else if (!this.v$.title.minLength) {
errorMessage = this.$t('LABEL_MGMT.FORM.NAME.MINIMUM_LENGTH_ERROR');
} else if (!this.$v.title.validLabelCharacters) {
} else if (!this.v$.title.validLabelCharacters) {
errorMessage = this.$t('LABEL_MGMT.FORM.NAME.VALID_ERROR');
}
return errorMessage;
app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue
+7 -3
View File
@@ -3,7 +3,7 @@
<form class="flex flex-wrap mx-0" @submit.prevent="onSubmit">
<woot-input
v-model="name"
:class="{ error: $v.name.$error }"
:class="{ error: v$.name.$error }"
class="w-full"
:styles="{
borderRadius: '12px',
@@ -13,7 +13,7 @@
:label="$t('SLA.FORM.NAME.LABEL')"
:placeholder="$t('SLA.FORM.NAME.PLACEHOLDER')"
:error="getSlaNameErrorMessage"
@input="$v.name.$touch"
@input="v$.name.$touch"
/>
<woot-input
v-model="description"
@@ -73,6 +73,7 @@ import { convertSecondsToTimeUnit } from '@chatwoot/utils';
import validationMixin from './validationMixin';
import validations from './validations';
import SlaTimeInput from './SlaTimeInput.vue';
import { useVuelidate } from '@vuelidate/core';
export default {
components: {
@@ -89,6 +90,9 @@ export default {
required: true,
},
},
setup() {
return { v$: useVuelidate() };
},
data() {
return {
name: '',
@@ -125,7 +129,7 @@ export default {
}),
isSubmitDisabled() {
return (
this.$v.name.$invalid ||
this.v$.name.$invalid ||
this.isSlaTimeInputsInvalid ||
this.uiFlags.isUpdating
);
app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue
+7 -3
View File
@@ -2,7 +2,7 @@
<div class="flex items-center w-full gap-3">
<woot-input
v-model="thresholdTime"
:class="{ error: $v.thresholdTime.$error }"
:class="{ error: v$.thresholdTime.$error }"
class="flex-grow"
:styles="{
borderRadius: '12px',
@@ -36,6 +36,7 @@
<script>
import validationMixin from './validationMixin';
import validations from './validations';
import { useVuelidate } from '@vuelidate/core';
export default {
mixins: [validationMixin],
@@ -57,6 +58,9 @@ export default {
default: '',
},
},
setup() {
return { v$: useVuelidate() };
},
data() {
return {
thresholdTime: this.threshold || '',
@@ -90,8 +94,8 @@ export default {
this.$emit('unit', this.thresholdUnitValue);
},
onThresholdTimeChange() {
this.$v.thresholdTime.$touch();
const isInvalid = this.$v.thresholdTime.$invalid;
this.v$.thresholdTime.$touch();
const isInvalid = this.v$.thresholdTime.$invalid;
this.$emit('isInValid', isInvalid);
this.$emit('input', Number(this.thresholdTime));
},
app/javascript/dashboard/routes/dashboard/settings/sla/validationMixin.js
+9 -5
View File
@@ -1,11 +1,15 @@
import { useVuelidate } from '@vuelidate/core';
export default {
setup() {
return { v$: useVuelidate() };
},
computed: {
getSlaNameErrorMessage() {
let errorMessage = '';
if (this.$v.name.$error) {
if (!this.$v.name.required) {
if (this.v$.name.$error) {
if (!this.v$.name.required) {
errorMessage = this.$t('SLA.FORM.NAME.REQUIRED_ERROR');
} else if (!this.$v.name.minLength) {
} else if (!this.v$.name.minLength) {
errorMessage = this.$t('SLA.FORM.NAME.MINIMUM_LENGTH_ERROR');
}
}
@@ -13,8 +17,8 @@ export default {
},
getThresholdTimeErrorMessage() {
let errorMessage = '';
if (this.$v.thresholdTime.$error) {
if (!this.$v.thresholdTime.numeric || !this.$v.thresholdTime.minValue) {
if (this.v$.thresholdTime.$error) {
if (!this.v$.thresholdTime.numeric || !this.v$.thresholdTime.minValue) {
errorMessage = this.$t(
'SLA.FORM.THRESHOLD_TIME.INVALID_FORMAT_ERROR'
);
app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue
+7 -2
View File
@@ -14,7 +14,7 @@
</div>
<div class="w-full">
<div v-if="$v.selectedAgents.$error">
<div v-if="v$.selectedAgents.$error">
<p class="error-message">
{{ $t('TEAMS_SETTINGS.ADD.AGENT_VALIDATION_ERROR') }}
</p>
@@ -38,6 +38,7 @@ import alertMixin from 'shared/mixins/alertMixin';
import router from '../../../../index';
import PageHeader from '../../SettingsSubPageHeader.vue';
import AgentSelector from '../AgentSelector.vue';
import { useVuelidate } from '@vuelidate/core';
export default {
components: {
@@ -59,6 +60,10 @@ export default {
},
},
setup() {
return { v$: useVuelidate() };
},
data() {
return {
selectedAgents: [],
@@ -90,7 +95,7 @@ export default {
methods: {
updateSelectedAgents(newAgentList) {
this.$v.selectedAgents.$touch();
this.v$.selectedAgents.$touch();
this.selectedAgents = [...newAgentList];
},
selectAllAgents() {
app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue
+6 -4
View File
@@ -14,7 +14,7 @@
</div>
<div class="w-full">
<div v-if="$v.selectedAgents.$error">
<div v-if="v$.selectedAgents.$error">
<p class="error-message">
{{ $t('TEAMS_SETTINGS.ADD.AGENT_VALIDATION_ERROR') }}
</p>
@@ -39,10 +39,10 @@
import { mapGetters } from 'vuex';
import Spinner from 'shared/components/Spinner.vue';
import alertMixin from 'shared/mixins/alertMixin';
import router from '../../../../index';
import PageHeader from '../../SettingsSubPageHeader.vue';
import AgentSelector from '../AgentSelector.vue';
import { useVuelidate } from '@vuelidate/core';
export default {
components: {
@@ -65,7 +65,9 @@ export default {
},
},
},
setup() {
return { v$: useVuelidate() };
},
data() {
return {
selectedAgents: [],
@@ -115,7 +117,7 @@ export default {
methods: {
updateSelectedAgents(newAgentList) {
this.$v.selectedAgents.$touch();
this.v$.selectedAgents.$touch();
this.selectedAgents = [...newAgentList];
},
async addAgents() {
app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue
+11 -7
View File
@@ -4,20 +4,20 @@
<form class="mx-0 flex flex-wrap" @submit.prevent="handleSubmit">
<woot-input
v-model.trim="title"
:class="{ error: $v.title.$error }"
:class="{ error: v$.title.$error }"
class="w-full"
:label="$t('TEAMS_SETTINGS.FORM.NAME.LABEL')"
:placeholder="$t('TEAMS_SETTINGS.FORM.NAME.PLACEHOLDER')"
@input="$v.title.$touch"
@input="v$.title.$touch"
/>
<woot-input
v-model.trim="description"
:class="{ error: $v.description.$error }"
:class="{ error: v$.description.$error }"
class="w-full"
:label="$t('TEAMS_SETTINGS.FORM.DESCRIPTION.LABEL')"
:placeholder="$t('TEAMS_SETTINGS.FORM.DESCRIPTION.PLACEHOLDER')"
@input="$v.description.$touch"
@input="v$.description.$touch"
/>
<div class="w-full flex items-center gap-2">
@@ -29,7 +29,7 @@
<div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
<div class="w-full">
<woot-submit-button
:disabled="$v.title.$invalid || submitInProgress"
:disabled="v$.title.$invalid || submitInProgress"
:button-text="submitButtonText"
:loading="submitInProgress"
/>
@@ -43,6 +43,7 @@
<script>
import WootSubmitButton from '../../../../components/buttons/FormSubmitButton.vue';
import validations from './helpers/validations';
import { useVuelidate } from '@vuelidate/core';
export default {
components: {
@@ -67,6 +68,9 @@ export default {
default: '',
},
},
setup() {
return { v$: useVuelidate() };
},
data() {
const formData = this.formData || {};
const {
@@ -84,8 +88,8 @@ export default {
validations,
methods: {
handleSubmit() {
this.$v.$touch();
if (this.$v.$invalid) {
this.v$.$touch();
if (this.v$.$invalid) {
return;
}
this.onSubmit({