chore: Remove unused files in contact (#10570)
This commit is contained in:
Sivin Varghese
@@ -106,10 +106,15 @@ const onImport = async file => {
|
||||
try {
|
||||
await store.dispatch('contacts/import', file);
|
||||
contactImportDialogRef.value?.dialogRef.close();
|
||||
useAlert(t('IMPORT_CONTACTS.SUCCESS_MESSAGE'));
|
||||
useAlert(
|
||||
t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.SUCCESS_MESSAGE')
|
||||
);
|
||||
useTrack(CONTACTS_EVENTS.IMPORT_SUCCESS);
|
||||
} catch (error) {
|
||||
useAlert(error.message ?? t('IMPORT_CONTACTS.ERROR_MESSAGE'));
|
||||
useAlert(
|
||||
error.message ??
|
||||
t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.ERROR_MESSAGE')
|
||||
);
|
||||
useTrack(CONTACTS_EVENTS.IMPORT_FAILURE);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,407 +0,0 @@
|
||||
<script>
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
import FilterInputBox from '../FilterInput/Index.vue';
|
||||
import languages from './advancedFilterItems/languages';
|
||||
import countries from 'shared/constants/countries.js';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { filterAttributeGroups } from './advancedFilterItems';
|
||||
import { useFilter } from 'shared/composables/useFilter';
|
||||
import * as OPERATORS from 'dashboard/components/widgets/FilterInput/FilterOperatorTypes.js';
|
||||
import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
|
||||
import { validateConversationOrContactFilters } from 'dashboard/helper/validations.js';
|
||||
import { useTrack } from 'dashboard/composables';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FilterInputBox,
|
||||
},
|
||||
props: {
|
||||
onClose: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
initialFilterTypes: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
initialAppliedFilters: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
activeFolderName: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
isFolderView: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ['applyFilter', 'updateFolder'],
|
||||
setup() {
|
||||
const { setFilterAttributes } = useFilter({
|
||||
filteri18nKey: 'FILTER',
|
||||
attributeModel: 'conversation_attribute',
|
||||
});
|
||||
return {
|
||||
setFilterAttributes,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: true,
|
||||
appliedFilters: this.initialAppliedFilters,
|
||||
activeFolderNewName: this.activeFolderName,
|
||||
filterTypes: this.initialFilterTypes,
|
||||
filterAttributeGroups,
|
||||
filterGroups: [],
|
||||
allCustomAttributes: [],
|
||||
attributeModel: 'conversation_attribute',
|
||||
filtersFori18n: 'FILTER',
|
||||
validationErrors: {},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
getAppliedConversationFilters: 'getAppliedConversationFilters',
|
||||
}),
|
||||
filterModalHeaderTitle() {
|
||||
return !this.isFolderView
|
||||
? this.$t('FILTER.TITLE')
|
||||
: this.$t('FILTER.EDIT_CUSTOM_FILTER');
|
||||
},
|
||||
filterModalSubTitle() {
|
||||
return !this.isFolderView
|
||||
? this.$t('FILTER.SUBTITLE')
|
||||
: this.$t('FILTER.CUSTOM_VIEWS_SUBTITLE');
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
const { filterGroups, filterTypes } = this.setFilterAttributes();
|
||||
|
||||
this.filterTypes = [...this.filterTypes, ...filterTypes];
|
||||
this.filterGroups = filterGroups;
|
||||
|
||||
this.$store.dispatch('campaigns/get');
|
||||
if (this.getAppliedConversationFilters.length) {
|
||||
this.appliedFilters = [];
|
||||
this.appliedFilters = [...this.getAppliedConversationFilters];
|
||||
} else if (!this.isFolderView) {
|
||||
this.appliedFilters.push({
|
||||
attribute_key: 'status',
|
||||
filter_operator: 'equal_to',
|
||||
values: '',
|
||||
query_operator: 'and',
|
||||
attribute_model: 'standard',
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getOperatorTypes(key) {
|
||||
switch (key) {
|
||||
case 'list':
|
||||
return OPERATORS.OPERATOR_TYPES_1;
|
||||
case 'text':
|
||||
return OPERATORS.OPERATOR_TYPES_3;
|
||||
case 'number':
|
||||
return OPERATORS.OPERATOR_TYPES_1;
|
||||
case 'link':
|
||||
return OPERATORS.OPERATOR_TYPES_1;
|
||||
case 'date':
|
||||
return OPERATORS.OPERATOR_TYPES_4;
|
||||
case 'checkbox':
|
||||
return OPERATORS.OPERATOR_TYPES_1;
|
||||
default:
|
||||
return OPERATORS.OPERATOR_TYPES_1;
|
||||
}
|
||||
},
|
||||
customAttributeInputType(key) {
|
||||
switch (key) {
|
||||
case 'date':
|
||||
return 'date';
|
||||
case 'text':
|
||||
return 'plain_text';
|
||||
case 'list':
|
||||
return 'search_select';
|
||||
case 'checkbox':
|
||||
return 'search_select';
|
||||
default:
|
||||
return 'plain_text';
|
||||
}
|
||||
},
|
||||
getAttributeModel(key) {
|
||||
const type = this.filterTypes.find(filter => filter.attributeKey === key);
|
||||
return type.attributeModel;
|
||||
},
|
||||
getInputType(key, operator) {
|
||||
if (key === 'created_at' || key === 'last_activity_at')
|
||||
if (operator === 'days_before') return 'plain_text';
|
||||
const type = this.filterTypes.find(filter => filter.attributeKey === key);
|
||||
return type?.inputType;
|
||||
},
|
||||
getOperators(key) {
|
||||
const type = this.filterTypes.find(filter => filter.attributeKey === key);
|
||||
return type?.filterOperators;
|
||||
},
|
||||
statusFilterItems() {
|
||||
return {
|
||||
open: {
|
||||
TEXT: this.$t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.open.TEXT'),
|
||||
},
|
||||
resolved: {
|
||||
TEXT: this.$t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.resolved.TEXT'),
|
||||
},
|
||||
pending: {
|
||||
TEXT: this.$t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.pending.TEXT'),
|
||||
},
|
||||
snoozed: {
|
||||
TEXT: this.$t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.snoozed.TEXT'),
|
||||
},
|
||||
all: {
|
||||
TEXT: this.$t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.all.TEXT'),
|
||||
},
|
||||
};
|
||||
},
|
||||
getDropdownValues(type) {
|
||||
const statusFilters = this.statusFilterItems();
|
||||
const allCustomAttributes = this.$store.getters[
|
||||
'attributes/getAttributesByModel'
|
||||
](this.attributeModel);
|
||||
|
||||
const isCustomAttributeCheckbox = allCustomAttributes.find(attr => {
|
||||
return (
|
||||
attr.attribute_key === type &&
|
||||
attr.attribute_display_type === 'checkbox'
|
||||
);
|
||||
});
|
||||
|
||||
if (isCustomAttributeCheckbox) {
|
||||
return [
|
||||
{
|
||||
id: true,
|
||||
name: this.$t('FILTER.ATTRIBUTE_LABELS.TRUE'),
|
||||
},
|
||||
{
|
||||
id: false,
|
||||
name: this.$t('FILTER.ATTRIBUTE_LABELS.FALSE'),
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
const isCustomAttributeList = allCustomAttributes.find(attr => {
|
||||
return (
|
||||
attr.attribute_key === type && attr.attribute_display_type === 'list'
|
||||
);
|
||||
});
|
||||
|
||||
if (isCustomAttributeList) {
|
||||
return allCustomAttributes
|
||||
.find(attr => attr.attribute_key === type)
|
||||
.attribute_values.map(item => {
|
||||
return {
|
||||
id: item,
|
||||
name: item,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
switch (type) {
|
||||
case 'status':
|
||||
return [
|
||||
...Object.keys(statusFilters).map(status => {
|
||||
return {
|
||||
id: status,
|
||||
name: statusFilters[status].TEXT,
|
||||
};
|
||||
}),
|
||||
];
|
||||
case 'assignee_id':
|
||||
return this.$store.getters['agents/getAgents'];
|
||||
case 'contact':
|
||||
return this.$store.getters['contacts/getContacts'];
|
||||
case 'inbox_id':
|
||||
return this.$store.getters['inboxes/getInboxes'];
|
||||
case 'team_id':
|
||||
return this.$store.getters['teams/getTeams'];
|
||||
case 'campaign_id':
|
||||
return this.$store.getters['campaigns/getAllCampaigns'].map(i => {
|
||||
return {
|
||||
id: i.id,
|
||||
name: i.title,
|
||||
};
|
||||
});
|
||||
case 'labels':
|
||||
return this.$store.getters['labels/getLabels'].map(i => {
|
||||
return {
|
||||
id: i.title,
|
||||
name: i.title,
|
||||
};
|
||||
});
|
||||
case 'browser_language':
|
||||
return languages;
|
||||
case 'country_code':
|
||||
return countries;
|
||||
default:
|
||||
return undefined;
|
||||
}
|
||||
},
|
||||
appendNewFilter() {
|
||||
if (this.isFolderView) {
|
||||
this.setQueryOperatorOnLastQuery();
|
||||
} else {
|
||||
this.appliedFilters.push({
|
||||
attribute_key: 'status',
|
||||
filter_operator: 'equal_to',
|
||||
values: '',
|
||||
query_operator: 'and',
|
||||
});
|
||||
}
|
||||
},
|
||||
setQueryOperatorOnLastQuery() {
|
||||
const lastItemIndex = this.appliedFilters.length - 1;
|
||||
this.appliedFilters[lastItemIndex] = {
|
||||
...this.appliedFilters[lastItemIndex],
|
||||
query_operator: 'and',
|
||||
};
|
||||
this.$nextTick(() => {
|
||||
this.appliedFilters.push({
|
||||
attribute_key: 'status',
|
||||
filter_operator: 'equal_to',
|
||||
values: '',
|
||||
query_operator: 'and',
|
||||
});
|
||||
});
|
||||
},
|
||||
removeFilter(index) {
|
||||
if (this.appliedFilters.length <= 1) {
|
||||
useAlert(this.$t('FILTER.FILTER_DELETE_ERROR'));
|
||||
} else {
|
||||
this.appliedFilters.splice(index, 1);
|
||||
}
|
||||
},
|
||||
submitFilterQuery() {
|
||||
this.validationErrors = validateConversationOrContactFilters(
|
||||
this.appliedFilters
|
||||
);
|
||||
if (Object.keys(this.validationErrors).length === 0) {
|
||||
this.$store.dispatch(
|
||||
'setConversationFilters',
|
||||
JSON.parse(JSON.stringify(this.appliedFilters))
|
||||
);
|
||||
this.$emit('applyFilter', this.appliedFilters);
|
||||
useTrack(CONVERSATION_EVENTS.APPLY_FILTER, {
|
||||
applied_filters: this.appliedFilters.map(filter => ({
|
||||
key: filter.attribute_key,
|
||||
operator: filter.filter_operator,
|
||||
query_operator: filter.query_operator,
|
||||
})),
|
||||
});
|
||||
}
|
||||
},
|
||||
updateSavedCustomViews() {
|
||||
this.$emit('updateFolder', this.appliedFilters, this.activeFolderNewName);
|
||||
},
|
||||
resetFilter(index, currentFilter) {
|
||||
this.appliedFilters[index].filter_operator = this.filterTypes.find(
|
||||
filter => filter.attributeKey === currentFilter.attribute_key
|
||||
).filterOperators[0].value;
|
||||
this.appliedFilters[index].values = '';
|
||||
},
|
||||
showUserInput(operatorType) {
|
||||
if (operatorType === 'is_present' || operatorType === 'is_not_present')
|
||||
return false;
|
||||
return true;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<woot-modal-header :header-title="filterModalHeaderTitle">
|
||||
<p class="text-slate-600 dark:text-slate-200">
|
||||
{{ filterModalSubTitle }}
|
||||
</p>
|
||||
</woot-modal-header>
|
||||
<div class="p-8">
|
||||
<div v-if="isFolderView">
|
||||
<label class="input-label" :class="{ error: !activeFolderNewName }">
|
||||
{{ $t('FILTER.FOLDER_LABEL') }}
|
||||
<input
|
||||
v-model="activeFolderNewName"
|
||||
type="text"
|
||||
class="bg-white folder-input border-slate-75 dark:border-slate-600 dark:bg-slate-900 text-slate-900 dark:text-slate-100"
|
||||
/>
|
||||
<span v-if="!activeFolderNewName" class="message">
|
||||
{{ $t('FILTER.EMPTY_VALUE_ERROR') }}
|
||||
</span>
|
||||
</label>
|
||||
<label class="mb-1">
|
||||
{{ $t('FILTER.FOLDER_QUERY_LABEL') }}
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="p-4 mb-4 border border-solid rounded-lg bg-slate-25 dark:bg-slate-900 border-slate-50 dark:border-slate-700/50"
|
||||
>
|
||||
<FilterInputBox
|
||||
v-for="(filter, i) in appliedFilters"
|
||||
:key="i"
|
||||
v-model="appliedFilters[i]"
|
||||
:filter-groups="filterGroups"
|
||||
:input-type="
|
||||
getInputType(
|
||||
appliedFilters[i].attribute_key,
|
||||
appliedFilters[i].filter_operator
|
||||
)
|
||||
"
|
||||
:operators="getOperators(appliedFilters[i].attribute_key)"
|
||||
:dropdown-values="getDropdownValues(appliedFilters[i].attribute_key)"
|
||||
:show-query-operator="i !== appliedFilters.length - 1"
|
||||
:show-user-input="showUserInput(appliedFilters[i].filter_operator)"
|
||||
grouped-filters
|
||||
:error-message="
|
||||
validationErrors[`filter_${i}`]
|
||||
? $t(`CONTACTS_FILTER.ERRORS.VALUE_REQUIRED`)
|
||||
: ''
|
||||
"
|
||||
@reset-filter="resetFilter(i, appliedFilters[i])"
|
||||
@remove-filter="removeFilter(i)"
|
||||
/>
|
||||
<div class="mt-4">
|
||||
<woot-button
|
||||
icon="add"
|
||||
color-scheme="success"
|
||||
variant="smooth"
|
||||
size="small"
|
||||
@click="appendNewFilter"
|
||||
>
|
||||
{{ $t('FILTER.ADD_NEW_FILTER') }}
|
||||
</woot-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
|
||||
<woot-button class="button clear" @click.prevent="onClose">
|
||||
{{ $t('FILTER.CANCEL_BUTTON_LABEL') }}
|
||||
</woot-button>
|
||||
<woot-button
|
||||
v-if="isFolderView"
|
||||
:disabled="!activeFolderNewName"
|
||||
@click="updateSavedCustomViews"
|
||||
>
|
||||
{{ $t('FILTER.UPDATE_BUTTON_LABEL') }}
|
||||
</woot-button>
|
||||
<woot-button v-else @click="submitFilterQuery">
|
||||
{{ $t('FILTER.SUBMIT_BUTTON_LABEL') }}
|
||||
</woot-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.folder-input {
|
||||
@apply w-[50%];
|
||||
}
|
||||
</style>
|
||||
@@ -1,46 +1,5 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import {
|
||||
validateConversationOrContactFilters,
|
||||
validateAutomation,
|
||||
} from '../validations';
|
||||
|
||||
describe('validateConversationOrContactFilters', () => {
|
||||
it('should return no errors for valid filters', () => {
|
||||
const validFilters = [
|
||||
{ attribute_key: 'name', filter_operator: 'contains', values: 'John' },
|
||||
{ attribute_key: 'email', filter_operator: 'is_present' },
|
||||
];
|
||||
const errors = validateConversationOrContactFilters(validFilters);
|
||||
expect(errors).toEqual({});
|
||||
});
|
||||
|
||||
it('should return errors for invalid filters', () => {
|
||||
const invalidFilters = [
|
||||
{ attribute_key: '', filter_operator: 'contains', values: 'John' },
|
||||
{ attribute_key: 'email', filter_operator: '' },
|
||||
{ attribute_key: 'age', filter_operator: 'equals' },
|
||||
];
|
||||
const errors = validateConversationOrContactFilters(invalidFilters);
|
||||
expect(errors).toEqual({
|
||||
filter_0: 'ATTRIBUTE_KEY_REQUIRED',
|
||||
filter_1: 'FILTER_OPERATOR_REQUIRED',
|
||||
filter_2: 'VALUE_REQUIRED',
|
||||
});
|
||||
});
|
||||
|
||||
it('should validate days_before operator correctly', () => {
|
||||
const filters = [
|
||||
{ attribute_key: 'date', filter_operator: 'days_before', values: '0' },
|
||||
{ attribute_key: 'date', filter_operator: 'days_before', values: '999' },
|
||||
{ attribute_key: 'date', filter_operator: 'days_before', values: '500' },
|
||||
];
|
||||
const errors = validateConversationOrContactFilters(filters);
|
||||
expect(errors).toEqual({
|
||||
filter_0: 'VALUE_MUST_BE_BETWEEN_1_AND_998',
|
||||
filter_1: 'VALUE_MUST_BE_BETWEEN_1_AND_998',
|
||||
});
|
||||
});
|
||||
});
|
||||
import { validateAutomation } from '../validations';
|
||||
|
||||
describe('validateAutomation', () => {
|
||||
it('should return no errors for a valid automation', () => {
|
||||
|
||||
@@ -65,29 +65,6 @@ export const validateSingleFilter = filter => {
|
||||
return null;
|
||||
};
|
||||
|
||||
/**
|
||||
* Validates filters for conversations or contacts.
|
||||
*
|
||||
* @param {Array} filters - An array of filter objects to validate.
|
||||
* @param {string} filters[].attribute_key - The key of the attribute to filter on.
|
||||
* @param {string} filters[].filter_operator - The operator to use for filtering.
|
||||
* @param {string|number} [filters[].values] - The value(s) to filter by (required for most operators).
|
||||
*
|
||||
* @returns {Object} An object containing any validation errors, keyed by filter index.
|
||||
*/
|
||||
export const validateConversationOrContactFilters = filters => {
|
||||
const errors = {};
|
||||
|
||||
filters.forEach((filter, index) => {
|
||||
const error = validateSingleFilter(filter);
|
||||
if (error) {
|
||||
errors[`filter_${index}`] = error;
|
||||
}
|
||||
});
|
||||
|
||||
return errors;
|
||||
};
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
// ---------------------- Automation Validation ---------------------
|
||||
// ------------------------------------------------------------------
|
||||
|
||||
@@ -57,46 +57,6 @@
|
||||
"TITLE": "Edit contact",
|
||||
"DESC": "Edit contact details"
|
||||
},
|
||||
"CREATE_CONTACT": {
|
||||
"BUTTON_LABEL": "New Contact",
|
||||
"TITLE": "Create new contact",
|
||||
"DESC": "Add basic information details about the contact."
|
||||
},
|
||||
"IMPORT_CONTACTS": {
|
||||
"BUTTON_LABEL": "Import",
|
||||
"TITLE": "Import Contacts",
|
||||
"DESC": "Import contacts through a CSV file.",
|
||||
"DOWNLOAD_LABEL": "Download a sample csv.",
|
||||
"FORM": {
|
||||
"LABEL": "CSV File",
|
||||
"SUBMIT": "Import",
|
||||
"CANCEL": "Cancel"
|
||||
},
|
||||
"SUCCESS_MESSAGE": "You will be notified via email when the import is complete.",
|
||||
"ERROR_MESSAGE": "There was an error, please try again"
|
||||
},
|
||||
"EXPORT_CONTACTS": {
|
||||
"BUTTON_LABEL": "Export",
|
||||
"TITLE": "Export Contacts",
|
||||
"DESC": "Export contacts to a CSV file.",
|
||||
"SUCCESS_MESSAGE": "Export is in progress. You will be notified on email when the export file is ready to download.",
|
||||
"ERROR_MESSAGE": "There was an error, please try again",
|
||||
"CONFIRM": {
|
||||
"TITLE": "Export Contacts",
|
||||
"MESSAGE": "Are you sure you want to export all contacts?",
|
||||
"FILTERED_MESSAGE": "Are you sure you want to export all the filtered contacts?",
|
||||
"YES": "Yes, Export",
|
||||
"NO": "No, Cancel"
|
||||
}
|
||||
},
|
||||
"DELETE_NOTE": {
|
||||
"CONFIRM": {
|
||||
"TITLE": "Confirm Deletion",
|
||||
"MESSAGE": "Are you want sure to delete this note?",
|
||||
"YES": "Yes, Delete it",
|
||||
"NO": "No, Keep it"
|
||||
}
|
||||
},
|
||||
"DELETE_CONTACT": {
|
||||
"BUTTON_LABEL": "Delete Contact",
|
||||
"TITLE": "Delete contact",
|
||||
@@ -224,79 +184,14 @@
|
||||
}
|
||||
},
|
||||
"CONTACTS_PAGE": {
|
||||
"HEADER": "Contacts",
|
||||
"FIELDS": "Contact fields",
|
||||
"SEARCH_BUTTON": "Search",
|
||||
"SEARCH_INPUT_PLACEHOLDER": "Search for contacts",
|
||||
"FILTER_CONTACTS": "Filter",
|
||||
"FILTER_CONTACTS_SAVE": "Save filter",
|
||||
"FILTER_CONTACTS_DELETE": "Delete filter",
|
||||
"FILTER_CONTACTS_EDIT": "Edit segment",
|
||||
"LIST": {
|
||||
"LOADING_MESSAGE": "Loading contacts...",
|
||||
"404": "No contacts matches your search 🔍",
|
||||
"NO_CONTACTS": "There are no available contacts",
|
||||
"TABLE_HEADER": {
|
||||
"NAME": "Name",
|
||||
"PHONE_NUMBER": "Phone Number",
|
||||
"CONVERSATIONS": "Conversations",
|
||||
"LAST_ACTIVITY": "Last Activity",
|
||||
"CREATED_AT": "Created At",
|
||||
"COUNTRY": "Country",
|
||||
"CITY": "City",
|
||||
"SOCIAL_PROFILES": "Social Profiles",
|
||||
"COMPANY": "Company",
|
||||
"EMAIL_ADDRESS": "Email Address"
|
||||
},
|
||||
"VIEW_DETAILS": "View details"
|
||||
}
|
||||
},
|
||||
"CONTACT_PROFILE": {
|
||||
"BACK_BUTTON": "Contacts",
|
||||
"LOADING": "Loading contact profile..."
|
||||
},
|
||||
"REMINDER": {
|
||||
"ADD_BUTTON": {
|
||||
"BUTTON": "Add",
|
||||
"TITLE": "Shift + Enter to create a task"
|
||||
},
|
||||
"FOOTER": {
|
||||
"DUE_DATE": "Due date",
|
||||
"LABEL_TITLE": "Set type"
|
||||
}
|
||||
},
|
||||
"NOTES": {
|
||||
"FETCHING_NOTES": "Fetching notes...",
|
||||
"NOT_AVAILABLE": "There are no notes created for this contact",
|
||||
"HEADER": {
|
||||
"TITLE": "Notes"
|
||||
},
|
||||
"LIST": {
|
||||
"LABEL": "added a note"
|
||||
},
|
||||
"ADD": {
|
||||
"BUTTON": "Add",
|
||||
"PLACEHOLDER": "Add a note",
|
||||
"TITLE": "Shift + Enter to create a note"
|
||||
},
|
||||
"CONTENT_HEADER": {
|
||||
"DELETE": "Delete note"
|
||||
}
|
||||
},
|
||||
"EVENTS": {
|
||||
"HEADER": {
|
||||
"TITLE": "Activities"
|
||||
},
|
||||
"BUTTON": {
|
||||
"PILL_BUTTON_NOTES": "notes",
|
||||
"PILL_BUTTON_EVENTS": "events",
|
||||
"PILL_BUTTON_CONVO": "conversations"
|
||||
"SOCIAL_PROFILES": "Social Profiles"
|
||||
}
|
||||
}
|
||||
},
|
||||
"CUSTOM_ATTRIBUTES": {
|
||||
"ADD_BUTTON_TEXT": "Add attributes",
|
||||
"BUTTON": "Add custom attribute",
|
||||
"NOT_AVAILABLE": "There are no custom attributes available for this contact.",
|
||||
"COPY_SUCCESSFUL": "Copied to clipboard successfully",
|
||||
"SHOW_MORE": "Show all attributes",
|
||||
"SHOW_LESS": "Show less attributes",
|
||||
|
||||
@@ -1,109 +0,0 @@
|
||||
<script>
|
||||
import Modal from 'dashboard/components/Modal.vue';
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { required, minLength } from '@vuelidate/validators';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Modal,
|
||||
},
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isCreating: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ['create', 'cancel', 'update:show'],
|
||||
setup() {
|
||||
return { v$: useVuelidate() };
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
attributeValue: '',
|
||||
attributeName: '',
|
||||
};
|
||||
},
|
||||
validations: {
|
||||
attributeName: {
|
||||
required,
|
||||
minLength: minLength(2),
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
localShow: {
|
||||
get() {
|
||||
return this.show;
|
||||
},
|
||||
set(value) {
|
||||
this.$emit('update:show', value);
|
||||
},
|
||||
},
|
||||
attributeNameError() {
|
||||
if (this.v$.attributeName.$error) {
|
||||
return this.$t('CUSTOM_ATTRIBUTES.FORM.NAME.ERROR');
|
||||
}
|
||||
return '';
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
addCustomAttribute() {
|
||||
this.$emit('create', {
|
||||
attributeValue: this.attributeValue,
|
||||
attributeName: this.attributeName || '',
|
||||
});
|
||||
this.reset();
|
||||
this.$emit('cancel');
|
||||
},
|
||||
onClose() {
|
||||
this.reset();
|
||||
this.$emit('cancel');
|
||||
},
|
||||
reset() {
|
||||
this.attributeValue = '';
|
||||
this.attributeName = '';
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal v-model:show="localShow" :on-close="onClose">
|
||||
<woot-modal-header
|
||||
:header-title="$t('CUSTOM_ATTRIBUTES.ADD.TITLE')"
|
||||
:header-content="$t('CUSTOM_ATTRIBUTES.ADD.DESC')"
|
||||
/>
|
||||
<form class="w-full" @submit.prevent="addCustomAttribute">
|
||||
<woot-input
|
||||
v-model="attributeName"
|
||||
:class="{ error: v$.attributeName.$error }"
|
||||
class="w-full"
|
||||
:error="attributeNameError"
|
||||
:label="$t('CUSTOM_ATTRIBUTES.FORM.NAME.LABEL')"
|
||||
:placeholder="$t('CUSTOM_ATTRIBUTES.FORM.NAME.PLACEHOLDER')"
|
||||
@blur="v$.attributeName.$touch"
|
||||
@input="v$.attributeName.$touch"
|
||||
/>
|
||||
<woot-input
|
||||
v-model="attributeValue"
|
||||
class="w-full"
|
||||
:label="$t('CUSTOM_ATTRIBUTES.FORM.VALUE.LABEL')"
|
||||
:placeholder="$t('CUSTOM_ATTRIBUTES.FORM.VALUE.PLACEHOLDER')"
|
||||
/>
|
||||
<div class="flex items-center justify-end gap-2 px-0 py-2">
|
||||
<woot-button
|
||||
:is-disabled="v$.attributeName.$invalid || isCreating"
|
||||
:is-loading="isCreating"
|
||||
>
|
||||
{{ $t('CUSTOM_ATTRIBUTES.FORM.CREATE') }}
|
||||
</woot-button>
|
||||
<woot-button variant="clear" @click.prevent="onClose">
|
||||
{{ $t('CUSTOM_ATTRIBUTES.FORM.CANCEL') }}
|
||||
</woot-button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
</template>
|
||||
@@ -1,131 +0,0 @@
|
||||
<script>
|
||||
import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EmojiOrIcon,
|
||||
},
|
||||
props: {
|
||||
label: { type: String, required: true },
|
||||
icon: { type: String, default: '' },
|
||||
emoji: { type: String, default: '' },
|
||||
value: { type: [String, Number], default: '' },
|
||||
showEdit: { type: Boolean, default: false },
|
||||
},
|
||||
emits: ['update'],
|
||||
data() {
|
||||
return {
|
||||
isEditing: false,
|
||||
editedValue: this.value,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
focusInput() {
|
||||
this.$refs.inputfield.focus();
|
||||
},
|
||||
onEdit() {
|
||||
this.isEditing = true;
|
||||
this.$nextTick(() => {
|
||||
this.focusInput();
|
||||
});
|
||||
},
|
||||
onUpdate() {
|
||||
this.isEditing = false;
|
||||
this.$emit('update', this.editedValue);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="contact-attribute">
|
||||
<div class="title-wrap">
|
||||
<h4 class="text-sm title">
|
||||
<div class="title--icon">
|
||||
<EmojiOrIcon :icon="icon" :emoji="emoji" />
|
||||
</div>
|
||||
{{ label }}
|
||||
</h4>
|
||||
</div>
|
||||
<div v-show="isEditing">
|
||||
<div class="mb-2 w-full flex items-center">
|
||||
<input
|
||||
ref="inputfield"
|
||||
v-model="editedValue"
|
||||
type="text"
|
||||
class="!h-8 ltr:rounded-r-none rtl:rounded-l-none !mb-0 !text-sm"
|
||||
autofocus="true"
|
||||
@keyup.enter="onUpdate"
|
||||
/>
|
||||
<div>
|
||||
<woot-button
|
||||
size="small"
|
||||
icon="ion-checkmark"
|
||||
class="rounded-l-none rtl:rounded-r-none"
|
||||
@click="onUpdate"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-show="!isEditing"
|
||||
class="value--view"
|
||||
:class="{ 'is-editable': showEdit }"
|
||||
>
|
||||
<p class="value">
|
||||
{{ value || '---' }}
|
||||
</p>
|
||||
<woot-button
|
||||
v-if="showEdit"
|
||||
variant="clear link"
|
||||
size="small"
|
||||
color-scheme="secondary"
|
||||
icon="edit"
|
||||
class-names="edit-button"
|
||||
@click="onEdit"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.contact-attribute {
|
||||
margin-bottom: var(--space-small);
|
||||
}
|
||||
.title-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: var(--space-mini);
|
||||
}
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
}
|
||||
.title--icon {
|
||||
width: var(--space-two);
|
||||
}
|
||||
.edit-button {
|
||||
display: none;
|
||||
}
|
||||
.value--view {
|
||||
display: flex;
|
||||
|
||||
&.is-editable:hover {
|
||||
.value {
|
||||
background: var(--color-background);
|
||||
}
|
||||
.edit-button {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.value {
|
||||
display: inline-block;
|
||||
min-width: var(--space-mega);
|
||||
border-radius: var(--border-radius-small);
|
||||
word-break: break-all;
|
||||
margin: 0 var(--space-smaller) 0 var(--space-normal);
|
||||
padding: var(--space-micro) var(--space-smaller);
|
||||
}
|
||||
</style>
|
||||
@@ -1,115 +0,0 @@
|
||||
<script>
|
||||
import Attribute from './ContactAttribute.vue';
|
||||
|
||||
export default {
|
||||
components: { Attribute },
|
||||
props: {
|
||||
contact: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
emits: ['update', 'createAttribute'],
|
||||
|
||||
computed: {
|
||||
additionalAttributes() {
|
||||
return this.contact.additional_attributes || {};
|
||||
},
|
||||
company() {
|
||||
const { company = {} } = this.contact;
|
||||
return company;
|
||||
},
|
||||
customAttributes() {
|
||||
const { custom_attributes: customAttributes = {} } = this.contact;
|
||||
return customAttributes;
|
||||
},
|
||||
customAttributekeys() {
|
||||
return Object.keys(this.customAttributes).filter(key => {
|
||||
const value = this.customAttributes[key];
|
||||
return value !== null && value !== undefined;
|
||||
});
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onEmailUpdate(value) {
|
||||
this.$emit('update', { email: value });
|
||||
},
|
||||
onPhoneUpdate(value) {
|
||||
this.$emit('update', { phone_number: value });
|
||||
},
|
||||
onLocationUpdate(value) {
|
||||
this.$emit('update', { location: value });
|
||||
},
|
||||
handleCustomCreate() {
|
||||
this.$emit('createAttribute');
|
||||
},
|
||||
onCustomAttributeUpdate(key, value) {
|
||||
this.$emit('update', { custom_attributes: { [key]: value } });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="contact-fields">
|
||||
<h3 class="text-lg title">
|
||||
{{ $t('CONTACTS_PAGE.FIELDS') }}
|
||||
</h3>
|
||||
<Attribute
|
||||
:label="$t('CONTACT_PANEL.EMAIL_ADDRESS')"
|
||||
icon="mail"
|
||||
emoji=""
|
||||
:value="contact.email"
|
||||
show-edit
|
||||
@update="onEmailUpdate"
|
||||
/>
|
||||
<Attribute
|
||||
:label="$t('CONTACT_PANEL.PHONE_NUMBER')"
|
||||
icon="call"
|
||||
emoji=""
|
||||
:value="contact.phone_number"
|
||||
show-edit
|
||||
@update="onPhoneUpdate"
|
||||
/>
|
||||
<Attribute
|
||||
v-if="additionalAttributes.location"
|
||||
:label="$t('CONTACT_PANEL.LOCATION')"
|
||||
icon="map"
|
||||
emoji="🌍"
|
||||
:value="additionalAttributes.location"
|
||||
show-edit
|
||||
@update="onLocationUpdate"
|
||||
/>
|
||||
<div
|
||||
v-for="attribute in customAttributekeys"
|
||||
:key="attribute"
|
||||
class="custom-attribute--row"
|
||||
>
|
||||
<Attribute
|
||||
:label="attribute"
|
||||
icon="chevron-right"
|
||||
:value="customAttributes[attribute]"
|
||||
show-edit
|
||||
@update="value => onCustomAttributeUpdate(attribute, value)"
|
||||
/>
|
||||
</div>
|
||||
<woot-button
|
||||
size="small"
|
||||
variant="link"
|
||||
icon="add"
|
||||
@click="handleCustomCreate"
|
||||
>
|
||||
{{ $t('CUSTOM_ATTRIBUTES.ADD.TITLE') }}
|
||||
</woot-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.contact-fields {
|
||||
margin-top: var(--space-medium);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-bottom: var(--space-normal);
|
||||
}
|
||||
</style>
|
||||
@@ -1,106 +0,0 @@
|
||||
<script>
|
||||
import EditContact from 'dashboard/routes/dashboard/conversation/contact/EditContact.vue';
|
||||
import NewConversation from 'dashboard/routes/dashboard/conversation/contact/NewConversation.vue';
|
||||
import AddCustomAttribute from 'dashboard/modules/contact/components/AddCustomAttribute.vue';
|
||||
import ContactIntro from './ContactIntro.vue';
|
||||
import ContactFields from './ContactFields.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AddCustomAttribute,
|
||||
ContactFields,
|
||||
ContactIntro,
|
||||
EditContact,
|
||||
NewConversation,
|
||||
},
|
||||
props: {
|
||||
contact: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showCustomAttributeModal: false,
|
||||
showEditModal: false,
|
||||
showConversationModal: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
enableNewConversation() {
|
||||
return this.contact && this.contact.id;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
toggleCustomAttributeModal() {
|
||||
this.showCustomAttributeModal = !this.showCustomAttributeModal;
|
||||
},
|
||||
toggleEditModal() {
|
||||
this.showEditModal = !this.showEditModal;
|
||||
},
|
||||
toggleConversationModal() {
|
||||
this.showConversationModal = !this.showConversationModal;
|
||||
},
|
||||
createCustomAttribute(data) {
|
||||
const { id } = this.contact;
|
||||
const { attributeValue, attributeName } = data;
|
||||
const updatedFields = {
|
||||
id,
|
||||
custom_attributes: {
|
||||
[attributeName]: attributeValue,
|
||||
},
|
||||
};
|
||||
this.updateContact(updatedFields);
|
||||
},
|
||||
updateField(data) {
|
||||
const { id } = this.contact;
|
||||
const updatedFields = {
|
||||
id,
|
||||
...data,
|
||||
};
|
||||
this.updateContact(updatedFields);
|
||||
},
|
||||
updateContact(contactItem) {
|
||||
this.$store.dispatch('contacts/update', contactItem);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="panel">
|
||||
<ContactIntro
|
||||
:contact="contact"
|
||||
@message="toggleConversationModal"
|
||||
@edit="toggleEditModal"
|
||||
/>
|
||||
<ContactFields
|
||||
:contact="contact"
|
||||
@update="updateField"
|
||||
@create-attribute="toggleCustomAttributeModal"
|
||||
/>
|
||||
<EditContact
|
||||
v-if="showEditModal"
|
||||
:show="showEditModal"
|
||||
:contact="contact"
|
||||
@cancel="toggleEditModal"
|
||||
/>
|
||||
<NewConversation
|
||||
v-if="enableNewConversation"
|
||||
:show="showConversationModal"
|
||||
:contact="contact"
|
||||
@cancel="toggleConversationModal"
|
||||
/>
|
||||
<AddCustomAttribute
|
||||
:show="showCustomAttributeModal"
|
||||
@cancel="toggleCustomAttributeModal"
|
||||
@create="createCustomAttribute"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.panel {
|
||||
padding: var(--space-normal) var(--space-normal);
|
||||
}
|
||||
</style>
|
||||
@@ -1,50 +0,0 @@
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import NoteList from './components/NoteList.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
NoteList,
|
||||
},
|
||||
props: {
|
||||
contactId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({ uiFlags: 'contactNotes/getUIFlags' }),
|
||||
notes() {
|
||||
return this.$store.getters['contactNotes/getAllNotesByContact'](
|
||||
this.contactId
|
||||
);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.fetchContactNotes();
|
||||
},
|
||||
methods: {
|
||||
fetchContactNotes() {
|
||||
const { contactId } = this;
|
||||
if (contactId) this.$store.dispatch('contactNotes/get', { contactId });
|
||||
},
|
||||
onAdd(content) {
|
||||
const { contactId } = this;
|
||||
this.$store.dispatch('contactNotes/create', { content, contactId });
|
||||
},
|
||||
onDelete(noteId) {
|
||||
const { contactId } = this;
|
||||
this.$store.dispatch('contactNotes/delete', { noteId, contactId });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NoteList
|
||||
:is-fetching="uiFlags.isFetching"
|
||||
:notes="notes"
|
||||
@add="onAdd"
|
||||
@delete="onDelete"
|
||||
/>
|
||||
</template>
|
||||
@@ -1,62 +0,0 @@
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
|
||||
import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
|
||||
|
||||
const emit = defineEmits(['add']);
|
||||
|
||||
const noteContent = ref('');
|
||||
|
||||
const buttonDisabled = computed(() => noteContent.value === '');
|
||||
|
||||
const onAdd = () => {
|
||||
if (noteContent.value !== '') {
|
||||
emit('add', noteContent.value);
|
||||
}
|
||||
noteContent.value = '';
|
||||
};
|
||||
|
||||
const keyboardEvents = {
|
||||
'$mod+Enter': {
|
||||
action: () => onAdd(),
|
||||
allowOnFocusedInput: true,
|
||||
},
|
||||
};
|
||||
useKeyboardEvents(keyboardEvents);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col flex-grow p-4 mb-2 overflow-hidden bg-white border border-solid rounded-md shadow-sm border-slate-75 dark:border-slate-700 dark:bg-slate-900 text-slate-700 dark:text-slate-100"
|
||||
>
|
||||
<WootMessageEditor
|
||||
v-model="noteContent"
|
||||
class="input--note"
|
||||
:placeholder="$t('NOTES.ADD.PLACEHOLDER')"
|
||||
:enable-suggestions="false"
|
||||
/>
|
||||
<div class="flex justify-end w-full">
|
||||
<woot-button
|
||||
color-scheme="warning"
|
||||
:title="$t('NOTES.ADD.TITLE')"
|
||||
:is-disabled="buttonDisabled"
|
||||
@click="onAdd"
|
||||
>
|
||||
{{ $t('NOTES.ADD.BUTTON') }} {{ '(⌘⏎)' }}
|
||||
</woot-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.input--note {
|
||||
&::v-deep .ProseMirror-menubar {
|
||||
padding: 0;
|
||||
margin-top: var(--space-minus-small);
|
||||
}
|
||||
|
||||
&::v-deep .ProseMirror-woot-style {
|
||||
max-height: 22.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,139 +0,0 @@
|
||||
<script>
|
||||
import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
|
||||
import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
|
||||
import { dynamicTime } from 'shared/helpers/timeHelper';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Thumbnail,
|
||||
},
|
||||
props: {
|
||||
id: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
note: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
user: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
createdAt: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
emits: ['delete'],
|
||||
setup() {
|
||||
const { formatMessage } = useMessageFormatter();
|
||||
return {
|
||||
formatMessage,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showDeleteModal: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
readableTime() {
|
||||
return dynamicTime(this.createdAt);
|
||||
},
|
||||
noteAuthor() {
|
||||
return this.user || {};
|
||||
},
|
||||
noteAuthorName() {
|
||||
return this.noteAuthor.name || this.$t('APP_GLOBAL.DELETED_USER');
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
toggleDeleteModal() {
|
||||
this.showDeleteModal = !this.showDeleteModal;
|
||||
},
|
||||
onDelete() {
|
||||
this.$emit('delete', this.id);
|
||||
},
|
||||
confirmDeletion() {
|
||||
this.onDelete();
|
||||
this.closeDelete();
|
||||
},
|
||||
closeDelete() {
|
||||
this.showDeleteModal = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col flex-grow p-4 mb-2 overflow-hidden bg-white border border-solid rounded-md shadow-sm border-slate-75 dark:border-slate-700 dark:bg-slate-900 text-slate-700 dark:text-slate-100 note-wrap"
|
||||
>
|
||||
<div class="flex items-end justify-between gap-1 text-xs">
|
||||
<div class="flex items-center">
|
||||
<Thumbnail
|
||||
:title="noteAuthorName"
|
||||
:src="noteAuthor.thumbnail"
|
||||
:username="noteAuthorName"
|
||||
size="20px"
|
||||
/>
|
||||
<div class="my-0 mx-1 p-0.5 flex flex-row gap-1">
|
||||
<span class="font-medium text-slate-800 dark:text-slate-100">
|
||||
{{ noteAuthorName }}
|
||||
</span>
|
||||
<span class="text-slate-700 dark:text-slate-100">
|
||||
{{ $t('NOTES.LIST.LABEL') }}
|
||||
</span>
|
||||
<span class="font-medium text-slate-700 dark:text-slate-100">
|
||||
{{ readableTime }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex invisible actions">
|
||||
<woot-button
|
||||
v-tooltip="$t('NOTES.CONTENT_HEADER.DELETE')"
|
||||
variant="smooth"
|
||||
size="tiny"
|
||||
icon="delete"
|
||||
color-scheme="secondary"
|
||||
@click="toggleDeleteModal"
|
||||
/>
|
||||
</div>
|
||||
<woot-delete-modal
|
||||
v-if="showDeleteModal"
|
||||
v-model:show="showDeleteModal"
|
||||
:on-close="closeDelete"
|
||||
:on-confirm="confirmDeletion"
|
||||
:title="$t('DELETE_NOTE.CONFIRM.TITLE')"
|
||||
:message="$t('DELETE_NOTE.CONFIRM.MESSAGE')"
|
||||
:confirm-text="$t('DELETE_NOTE.CONFIRM.YES')"
|
||||
:reject-text="$t('DELETE_NOTE.CONFIRM.NO')"
|
||||
/>
|
||||
</div>
|
||||
<p
|
||||
v-dompurify-html="formatMessage(note || '')"
|
||||
class="mt-4 note__content"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// For RTL direction view
|
||||
.app-rtl--wrapper {
|
||||
.note__content {
|
||||
::v-deep {
|
||||
p {
|
||||
unicode-bidi: plaintext;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.note-wrap:hover {
|
||||
.actions {
|
||||
@apply visible;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,61 +0,0 @@
|
||||
<script>
|
||||
import AddNote from './AddNote.vue';
|
||||
import ContactNote from './ContactNote.vue';
|
||||
import Spinner from 'shared/components/Spinner.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AddNote,
|
||||
ContactNote,
|
||||
Spinner,
|
||||
},
|
||||
|
||||
props: {
|
||||
notes: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
isFetching: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ['add', 'edit', 'delete'],
|
||||
|
||||
methods: {
|
||||
onAddNote(value) {
|
||||
this.$emit('add', value);
|
||||
},
|
||||
onEditNote(value) {
|
||||
this.$emit('edit', value);
|
||||
},
|
||||
onDeleteNote(value) {
|
||||
this.$emit('delete', value);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<AddNote @add="onAddNote" />
|
||||
<ContactNote
|
||||
v-for="note in notes"
|
||||
:id="note.id"
|
||||
:key="note.id"
|
||||
:note="note.content"
|
||||
:user="note.user"
|
||||
:created-at="note.created_at"
|
||||
@edit="onEditNote"
|
||||
@delete="onDeleteNote"
|
||||
/>
|
||||
|
||||
<div v-if="isFetching" class="text-center p-4 text-base">
|
||||
<Spinner size="" />
|
||||
<span>{{ $t('NOTES.FETCHING_NOTES') }}</span>
|
||||
</div>
|
||||
<div v-else-if="!notes.length" class="text-center p-4 text-base">
|
||||
<span>{{ $t('NOTES.NOT_AVAILABLE') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,140 +0,0 @@
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
options: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
emits: ['add'],
|
||||
data() {
|
||||
return {
|
||||
content: '',
|
||||
date: '',
|
||||
label: '',
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
buttonDisabled() {
|
||||
return this.content && this.date === '';
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
resetValue() {
|
||||
this.content = '';
|
||||
this.date = '';
|
||||
},
|
||||
|
||||
optionSelected(event) {
|
||||
this.label = event.target.value;
|
||||
},
|
||||
|
||||
onAdd() {
|
||||
const task = {
|
||||
content: this.content,
|
||||
date: this.date,
|
||||
label: this.label,
|
||||
};
|
||||
this.$emit('add', task);
|
||||
this.resetValue();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="wrap">
|
||||
<div class="input-select-wrap">
|
||||
<textarea
|
||||
v-model="content"
|
||||
class="input--reminder"
|
||||
@keydown.enter.shift.exact="onAdd"
|
||||
/>
|
||||
<div class="select-wrap">
|
||||
<div class="select">
|
||||
<div class="input-group">
|
||||
<i class="ion-android-calendar input-group-label" />
|
||||
<input
|
||||
v-model="date"
|
||||
type="text"
|
||||
:placeholder="$t('REMINDER.FOOTER.DUE_DATE')"
|
||||
class="input-group-field"
|
||||
/>
|
||||
</div>
|
||||
<div class="task-wrap">
|
||||
<select class="task__type" @change="optionSelected($event)">
|
||||
<option value="" disabled selected>
|
||||
{{ $t('REMINDER.FOOTER.LABEL_TITLE') }}
|
||||
</option>
|
||||
<option
|
||||
v-for="option in options"
|
||||
:key="option.id"
|
||||
:value="option.id"
|
||||
>
|
||||
{{ option.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<woot-button
|
||||
size="tiny"
|
||||
color-scheme="primary"
|
||||
class-names="add-button"
|
||||
:title="$t('REMINDER.ADD_BUTTON.TITLE')"
|
||||
:is-disabled="buttonDisabled"
|
||||
@click="onAdd"
|
||||
>
|
||||
{{ $t('REMINDER.ADD_BUTTON.BUTTON') }}
|
||||
</woot-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrap {
|
||||
display: flex;
|
||||
margin-bottom: var(--space-smaller);
|
||||
width: 100%;
|
||||
|
||||
.input-select-wrap {
|
||||
padding: var(--space-small) var(--space-small);
|
||||
width: 100%;
|
||||
|
||||
.input--reminder {
|
||||
font-size: var(--font-size-mini);
|
||||
margin-bottom: var(--space-small);
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.select-wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.select {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 0;
|
||||
font-size: var(--font-size-mini);
|
||||
|
||||
.input-group-field {
|
||||
height: var(--space-medium);
|
||||
font-size: var(--font-size-micro);
|
||||
}
|
||||
}
|
||||
|
||||
.task-wrap {
|
||||
.task__type {
|
||||
margin: 0 0 0 var(--space-smaller);
|
||||
height: var(--space-medium);
|
||||
width: fit-content;
|
||||
padding: 0 var(--space-two) 0 var(--space-smaller);
|
||||
font-size: var(--font-size-micro);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,175 +0,0 @@
|
||||
<script>
|
||||
import AccordionItem from 'dashboard/components/Accordion/AccordionItem.vue';
|
||||
import ContactConversations from 'dashboard/routes/dashboard/conversation/ContactConversations.vue';
|
||||
import ContactInfo from 'dashboard/routes/dashboard/conversation/contact/ContactInfo.vue';
|
||||
import ContactLabel from 'dashboard/routes/dashboard/contacts/components/ContactLabels.vue';
|
||||
import CustomAttributes from 'dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue';
|
||||
import Draggable from 'vuedraggable';
|
||||
import { useUISettings } from 'dashboard/composables/useUISettings';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AccordionItem,
|
||||
ContactConversations,
|
||||
ContactInfo,
|
||||
ContactLabel,
|
||||
CustomAttributes,
|
||||
Draggable,
|
||||
},
|
||||
props: {
|
||||
contact: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
onClose: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
showAvatar: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
showCloseButton: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const {
|
||||
updateUISettings,
|
||||
isContactSidebarItemOpen,
|
||||
contactSidebarItemsOrder,
|
||||
toggleSidebarUIState,
|
||||
} = useUISettings();
|
||||
|
||||
return {
|
||||
updateUISettings,
|
||||
isContactSidebarItemOpen,
|
||||
contactSidebarItemsOrder,
|
||||
toggleSidebarUIState,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dragEnabled: true,
|
||||
contactSidebarItems: [],
|
||||
dragging: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
hasContactAttributes() {
|
||||
const { custom_attributes: customAttributes } = this.contact;
|
||||
return customAttributes && Object.keys(customAttributes).length;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.contactSidebarItems = this.contactSidebarItemsOrder;
|
||||
},
|
||||
methods: {
|
||||
onDragEnd() {
|
||||
this.dragging = false;
|
||||
this.updateUISettings({
|
||||
contact_sidebar_items_order: this.contactSidebarItems,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="relative w-1/4 h-full min-h-screen overflow-y-auto text-sm bg-white dark:bg-slate-900 border-slate-50 dark:border-slate-800/50"
|
||||
:class="showAvatar ? 'border-l border-solid ' : 'border-r border-solid'"
|
||||
>
|
||||
<ContactInfo
|
||||
:show-close-button="showCloseButton"
|
||||
:show-avatar="showAvatar"
|
||||
:contact="contact"
|
||||
close-icon-name="dismiss"
|
||||
@panel-close="onClose"
|
||||
@toggle-panel="onClose"
|
||||
/>
|
||||
<div class="list-group">
|
||||
<Draggable
|
||||
:list="contactSidebarItems"
|
||||
:disabled="!dragEnabled"
|
||||
ghost-class="ghost"
|
||||
item-key="name"
|
||||
@start="dragging = true"
|
||||
@end="onDragEnd"
|
||||
>
|
||||
<template #item="{ element }">
|
||||
<div :key="element.name" class="list-group-item">
|
||||
<div v-if="element.name === 'contact_attributes'">
|
||||
<AccordionItem
|
||||
:title="$t('CONVERSATION_SIDEBAR.ACCORDION.CONTACT_ATTRIBUTES')"
|
||||
:is-open="isContactSidebarItemOpen('is_ct_custom_attr_open')"
|
||||
compact
|
||||
@toggle="
|
||||
value => toggleSidebarUIState('is_ct_custom_attr_open', value)
|
||||
"
|
||||
>
|
||||
<CustomAttributes
|
||||
:contact-id="contact.id"
|
||||
attribute-type="contact_attribute"
|
||||
attribute-from="contact_panel"
|
||||
:custom-attributes="contact.custom_attributes"
|
||||
:empty-state-message="
|
||||
$t('CONTACT_PANEL.SIDEBAR_SECTIONS.NO_RECORDS_FOUND')
|
||||
"
|
||||
/>
|
||||
</AccordionItem>
|
||||
</div>
|
||||
<div v-if="element.name === 'contact_labels'">
|
||||
<AccordionItem
|
||||
:title="$t('CONTACT_PANEL.SIDEBAR_SECTIONS.CONTACT_LABELS')"
|
||||
:is-open="isContactSidebarItemOpen('is_ct_labels_open')"
|
||||
@toggle="
|
||||
value => toggleSidebarUIState('is_ct_labels_open', value)
|
||||
"
|
||||
>
|
||||
<ContactLabel :contact-id="contact.id" class="contact-labels" />
|
||||
</AccordionItem>
|
||||
</div>
|
||||
<div v-if="element.name === 'previous_conversation'">
|
||||
<AccordionItem
|
||||
:title="
|
||||
$t('CONTACT_PANEL.SIDEBAR_SECTIONS.PREVIOUS_CONVERSATIONS')
|
||||
"
|
||||
:is-open="isContactSidebarItemOpen('is_ct_prev_conv_open')"
|
||||
compact
|
||||
@toggle="
|
||||
value => toggleSidebarUIState('is_ct_prev_conv_open', value)
|
||||
"
|
||||
>
|
||||
<ContactConversations
|
||||
v-if="contact.id"
|
||||
:contact-id="contact.id"
|
||||
conversation-id=""
|
||||
/>
|
||||
</AccordionItem>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Draggable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep {
|
||||
.contact--profile {
|
||||
@apply pb-3 mb-4;
|
||||
}
|
||||
}
|
||||
|
||||
.list-group {
|
||||
.list-group-item {
|
||||
@apply bg-white dark:bg-slate-900;
|
||||
}
|
||||
}
|
||||
|
||||
.conversation--details {
|
||||
@apply py-0 px-4;
|
||||
}
|
||||
</style>
|
||||
@@ -1,85 +0,0 @@
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
import LabelSelector from 'dashboard/components/widgets/LabelSelector.vue';
|
||||
|
||||
export default {
|
||||
components: { LabelSelector },
|
||||
props: {
|
||||
contactId: {
|
||||
type: [String, Number],
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
savedLabels() {
|
||||
const availableContactLabels = this.$store.getters[
|
||||
'contactLabels/getContactLabels'
|
||||
](this.contactId);
|
||||
return this.allLabels.filter(({ title }) =>
|
||||
availableContactLabels.includes(title)
|
||||
);
|
||||
},
|
||||
|
||||
...mapGetters({
|
||||
allLabels: 'labels/getLabels',
|
||||
}),
|
||||
},
|
||||
|
||||
watch: {
|
||||
contactId(newContactId, prevContactId) {
|
||||
if (newContactId && newContactId !== prevContactId) {
|
||||
this.fetchLabels(newContactId);
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
const { contactId } = this;
|
||||
this.fetchLabels(contactId);
|
||||
},
|
||||
|
||||
methods: {
|
||||
async onUpdateLabels(selectedLabels) {
|
||||
try {
|
||||
await this.$store.dispatch('contactLabels/update', {
|
||||
contactId: this.contactId,
|
||||
labels: selectedLabels,
|
||||
});
|
||||
} catch (error) {
|
||||
useAlert(this.$t('CONTACT_PANEL.LABELS.CONTACT.ERROR'));
|
||||
}
|
||||
},
|
||||
|
||||
addItem(value) {
|
||||
const result = this.savedLabels.map(item => item.title);
|
||||
result.push(value.title);
|
||||
this.onUpdateLabels(result);
|
||||
},
|
||||
|
||||
removeItem(value) {
|
||||
const result = this.savedLabels
|
||||
.map(label => label.title)
|
||||
.filter(label => label !== value);
|
||||
this.onUpdateLabels(result);
|
||||
},
|
||||
|
||||
async fetchLabels(contactId) {
|
||||
if (!contactId) {
|
||||
return;
|
||||
}
|
||||
this.$store.dispatch('contactLabels/get', contactId);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<LabelSelector
|
||||
:all-labels="allLabels"
|
||||
:saved-labels="savedLabels"
|
||||
@add="addItem"
|
||||
@remove="removeItem"
|
||||
/>
|
||||
</template>
|
||||
@@ -1,368 +0,0 @@
|
||||
<script>
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
import FilterInputBox from '../../../../components/widgets/FilterInput/Index.vue';
|
||||
import countries from 'shared/constants/countries.js';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { filterAttributeGroups } from '../contactFilterItems';
|
||||
import { useFilter } from 'shared/composables/useFilter';
|
||||
import * as OPERATORS from 'dashboard/components/widgets/FilterInput/FilterOperatorTypes.js';
|
||||
import { CONTACTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
|
||||
import { validateConversationOrContactFilters } from 'dashboard/helper/validations.js';
|
||||
import { useTrack } from 'dashboard/composables';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FilterInputBox,
|
||||
},
|
||||
props: {
|
||||
onClose: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
initialFilterTypes: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
initialAppliedFilters: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
isSegmentsView: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
activeSegmentName: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
emits: ['applyFilter', 'clearFilters', 'updateSegment'],
|
||||
setup() {
|
||||
const { setFilterAttributes } = useFilter({
|
||||
filteri18nKey: 'CONTACTS_FILTER',
|
||||
attributeModel: 'contact_attribute',
|
||||
});
|
||||
return {
|
||||
setFilterAttributes,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: true,
|
||||
appliedFilters: this.initialAppliedFilters,
|
||||
activeSegmentNewName: this.activeSegmentName,
|
||||
filterTypes: this.initialFilterTypes,
|
||||
filterGroups: [],
|
||||
allCustomAttributes: [],
|
||||
filterAttributeGroups,
|
||||
attributeModel: 'contact_attribute',
|
||||
filtersFori18n: 'CONTACTS_FILTER',
|
||||
validationErrors: {},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
getAppliedContactFilters: 'contacts/getAppliedContactFilters',
|
||||
}),
|
||||
hasAppliedFilters() {
|
||||
return this.getAppliedContactFilters.length;
|
||||
},
|
||||
filterModalHeaderTitle() {
|
||||
return !this.isSegmentsView
|
||||
? this.$t('CONTACTS_FILTER.TITLE')
|
||||
: this.$t('CONTACTS_FILTER.EDIT_CUSTOM_SEGMENT');
|
||||
},
|
||||
filterModalSubTitle() {
|
||||
return !this.isSegmentsView
|
||||
? this.$t('CONTACTS_FILTER.SUBTITLE')
|
||||
: this.$t('CONTACTS_FILTER.CUSTOM_VIEWS_SUBTITLE');
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
const { filterGroups, filterTypes } = this.setFilterAttributes();
|
||||
this.filterTypes = [...this.filterTypes, ...filterTypes];
|
||||
this.filterGroups = filterGroups;
|
||||
|
||||
if (this.getAppliedContactFilters.length && !this.isSegmentsView) {
|
||||
this.appliedFilters = [...this.getAppliedContactFilters];
|
||||
} else if (!this.isSegmentsView) {
|
||||
this.appliedFilters.push({
|
||||
attribute_key: 'name',
|
||||
filter_operator: 'equal_to',
|
||||
values: '',
|
||||
query_operator: 'and',
|
||||
attribute_model: 'standard',
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getOperatorTypes(key) {
|
||||
switch (key) {
|
||||
case 'list':
|
||||
return OPERATORS.OPERATOR_TYPES_1;
|
||||
case 'text':
|
||||
return OPERATORS.OPERATOR_TYPES_3;
|
||||
case 'number':
|
||||
return OPERATORS.OPERATOR_TYPES_1;
|
||||
case 'link':
|
||||
return OPERATORS.OPERATOR_TYPES_1;
|
||||
case 'date':
|
||||
return OPERATORS.OPERATOR_TYPES_4;
|
||||
case 'checkbox':
|
||||
return OPERATORS.OPERATOR_TYPES_1;
|
||||
default:
|
||||
return OPERATORS.OPERATOR_TYPES_1;
|
||||
}
|
||||
},
|
||||
customAttributeInputType(key) {
|
||||
switch (key) {
|
||||
case 'date':
|
||||
return 'date';
|
||||
case 'text':
|
||||
return 'plain_text';
|
||||
case 'list':
|
||||
return 'search_select';
|
||||
case 'checkbox':
|
||||
return 'search_select';
|
||||
default:
|
||||
return 'plain_text';
|
||||
}
|
||||
},
|
||||
getAttributeModel(key) {
|
||||
const type = this.filterTypes.find(filter => filter.attributeKey === key);
|
||||
return type.attributeModel;
|
||||
},
|
||||
getInputType(key, operator) {
|
||||
if (key === 'created_at' || key === 'last_activity_at')
|
||||
if (operator === 'days_before') return 'plain_text';
|
||||
const type = this.filterTypes.find(filter => filter.attributeKey === key);
|
||||
return type?.inputType;
|
||||
},
|
||||
getOperators(key) {
|
||||
const type = this.filterTypes.find(filter => filter.attributeKey === key);
|
||||
return type?.filterOperators;
|
||||
},
|
||||
getDropdownValues(type) {
|
||||
const allCustomAttributes = this.$store.getters[
|
||||
'attributes/getAttributesByModel'
|
||||
](this.attributeModel);
|
||||
const isCustomAttributeCheckbox = allCustomAttributes.find(attr => {
|
||||
return (
|
||||
attr.attribute_key === type &&
|
||||
attr.attribute_display_type === 'checkbox'
|
||||
);
|
||||
});
|
||||
if (isCustomAttributeCheckbox || type === 'blocked') {
|
||||
return [
|
||||
{
|
||||
id: true,
|
||||
name: this.$t('FILTER.ATTRIBUTE_LABELS.TRUE'),
|
||||
},
|
||||
{
|
||||
id: false,
|
||||
name: this.$t('FILTER.ATTRIBUTE_LABELS.FALSE'),
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
const isCustomAttributeList = allCustomAttributes.find(attr => {
|
||||
return (
|
||||
attr.attribute_key === type && attr.attribute_display_type === 'list'
|
||||
);
|
||||
});
|
||||
|
||||
if (isCustomAttributeList) {
|
||||
return allCustomAttributes
|
||||
.find(attr => attr.attribute_key === type)
|
||||
.attribute_values.map(item => {
|
||||
return {
|
||||
id: item,
|
||||
name: item,
|
||||
};
|
||||
});
|
||||
}
|
||||
switch (type) {
|
||||
case 'country_code':
|
||||
return countries;
|
||||
default:
|
||||
return undefined;
|
||||
}
|
||||
},
|
||||
appendNewFilter() {
|
||||
if (this.isSegmentsView) {
|
||||
this.setQueryOperatorOnLastQuery();
|
||||
} else {
|
||||
this.appliedFilters.push({
|
||||
attribute_key: 'name',
|
||||
filter_operator: 'equal_to',
|
||||
values: '',
|
||||
query_operator: 'and',
|
||||
});
|
||||
}
|
||||
},
|
||||
setQueryOperatorOnLastQuery() {
|
||||
const lastItemIndex = this.appliedFilters.length - 1;
|
||||
this.appliedFilters[lastItemIndex] = {
|
||||
...this.appliedFilters[lastItemIndex],
|
||||
query_operator: 'and',
|
||||
};
|
||||
this.$nextTick(() => {
|
||||
this.appliedFilters.push({
|
||||
attribute_key: 'name',
|
||||
filter_operator: 'equal_to',
|
||||
values: '',
|
||||
query_operator: 'and',
|
||||
});
|
||||
});
|
||||
},
|
||||
removeFilter(index) {
|
||||
if (this.appliedFilters.length <= 1) {
|
||||
useAlert(this.$t('CONTACTS_FILTER.FILTER_DELETE_ERROR'));
|
||||
} else {
|
||||
this.appliedFilters.splice(index, 1);
|
||||
}
|
||||
},
|
||||
submitFilterQuery() {
|
||||
this.validationErrors = validateConversationOrContactFilters(
|
||||
this.appliedFilters
|
||||
);
|
||||
if (Object.keys(this.validationErrors).length === 0) {
|
||||
this.$store.dispatch(
|
||||
'contacts/setContactFilters',
|
||||
JSON.parse(JSON.stringify(this.appliedFilters))
|
||||
);
|
||||
this.$emit('applyFilter', this.appliedFilters);
|
||||
useTrack(CONTACTS_EVENTS.APPLY_FILTER, {
|
||||
applied_filters: this.appliedFilters.map(filter => ({
|
||||
key: filter.attribute_key,
|
||||
operator: filter.filter_operator,
|
||||
query_operator: filter.query_operator,
|
||||
})),
|
||||
});
|
||||
}
|
||||
},
|
||||
updateSegment() {
|
||||
this.$emit(
|
||||
'updateSegment',
|
||||
this.appliedFilters,
|
||||
this.activeSegmentNewName
|
||||
);
|
||||
},
|
||||
resetFilter(index, currentFilter) {
|
||||
this.appliedFilters[index].filter_operator = this.filterTypes.find(
|
||||
filter => filter.attributeKey === currentFilter.attribute_key
|
||||
).filterOperators[0].value;
|
||||
this.appliedFilters[index].values = '';
|
||||
},
|
||||
showUserInput(operatorType) {
|
||||
if (operatorType === 'is_present' || operatorType === 'is_not_present')
|
||||
return false;
|
||||
return true;
|
||||
},
|
||||
clearFilters() {
|
||||
this.$emit('clearFilters');
|
||||
this.onClose();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<woot-modal-header :header-title="filterModalHeaderTitle">
|
||||
<p class="text-slate-600 dark:text-slate-200">
|
||||
{{ filterModalSubTitle }}
|
||||
</p>
|
||||
</woot-modal-header>
|
||||
<div class="p-8">
|
||||
<div v-if="isSegmentsView">
|
||||
<label class="input-label" :class="{ error: !activeSegmentNewName }">
|
||||
{{ $t('CONTACTS_FILTER.SEGMENT_LABEL') }}
|
||||
<input
|
||||
v-model="activeSegmentNewName"
|
||||
type="text"
|
||||
class="bg-white folder-input border-slate-75 dark:border-slate-600 dark:bg-slate-900 text-slate-900 dark:text-slate-100"
|
||||
/>
|
||||
<span v-if="!activeSegmentNewName" class="message">
|
||||
{{ $t('CONTACTS_FILTER.EMPTY_VALUE_ERROR') }}
|
||||
</span>
|
||||
</label>
|
||||
<label class="input-label">
|
||||
{{ $t('CONTACTS_FILTER.SEGMENT_QUERY_LABEL') }}
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="p-4 mb-4 border border-solid rounded-lg bg-slate-25 dark:bg-slate-900 border-slate-50 dark:border-slate-700/50"
|
||||
>
|
||||
<FilterInputBox
|
||||
v-for="(filter, i) in appliedFilters"
|
||||
:key="i"
|
||||
v-model="appliedFilters[i]"
|
||||
:filter-groups="filterGroups"
|
||||
grouped-filters
|
||||
:input-type="
|
||||
getInputType(
|
||||
appliedFilters[i].attribute_key,
|
||||
appliedFilters[i].filter_operator
|
||||
)
|
||||
"
|
||||
:operators="getOperators(appliedFilters[i].attribute_key)"
|
||||
:dropdown-values="getDropdownValues(appliedFilters[i].attribute_key)"
|
||||
:show-query-operator="i !== appliedFilters.length - 1"
|
||||
:show-user-input="showUserInput(appliedFilters[i].filter_operator)"
|
||||
:error-message="
|
||||
validationErrors[`filter_${i}`]
|
||||
? $t(`CONTACTS_FILTER.ERRORS.VALUE_REQUIRED`)
|
||||
: ''
|
||||
"
|
||||
@reset-filter="resetFilter(i, appliedFilters[i])"
|
||||
@remove-filter="removeFilter(i)"
|
||||
/>
|
||||
<div class="flex items-center gap-2 mt-4">
|
||||
<woot-button
|
||||
icon="add"
|
||||
color-scheme="success"
|
||||
variant="smooth"
|
||||
size="small"
|
||||
@click="appendNewFilter"
|
||||
>
|
||||
{{ $t('CONTACTS_FILTER.ADD_NEW_FILTER') }}
|
||||
</woot-button>
|
||||
<woot-button
|
||||
v-if="hasAppliedFilters && !isSegmentsView"
|
||||
icon="subtract"
|
||||
color-scheme="alert"
|
||||
variant="smooth"
|
||||
size="small"
|
||||
@click="clearFilters"
|
||||
>
|
||||
{{ $t('CONTACTS_FILTER.CLEAR_ALL_FILTERS') }}
|
||||
</woot-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
|
||||
<woot-button class="button clear" @click.prevent="onClose">
|
||||
{{ $t('CONTACTS_FILTER.CANCEL_BUTTON_LABEL') }}
|
||||
</woot-button>
|
||||
<woot-button
|
||||
v-if="isSegmentsView"
|
||||
:disabled="!activeSegmentNewName"
|
||||
@click="updateSegment"
|
||||
>
|
||||
{{ $t('CONTACTS_FILTER.UPDATE_BUTTON_LABEL') }}
|
||||
</woot-button>
|
||||
<woot-button v-else @click="submitFilterQuery">
|
||||
{{ $t('CONTACTS_FILTER.SUBMIT_BUTTON_LABEL') }}
|
||||
</woot-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.folder-input {
|
||||
@apply w-[50%];
|
||||
}
|
||||
</style>
|
||||
@@ -1,190 +0,0 @@
|
||||
<script setup>
|
||||
import { h, ref, computed, defineEmits } from 'vue';
|
||||
import {
|
||||
useVueTable,
|
||||
createColumnHelper,
|
||||
getCoreRowModel,
|
||||
} from '@tanstack/vue-table';
|
||||
import { dynamicTime } from 'shared/helpers/timeHelper';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import Spinner from 'shared/components/Spinner.vue';
|
||||
import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
|
||||
|
||||
// Table components
|
||||
import Table from 'dashboard/components/table/Table.vue';
|
||||
import NameCell from './ContactsTable/NameCell.vue';
|
||||
import EmailCell from './ContactsTable/EmailCell.vue';
|
||||
import TelCell from './ContactsTable/TelCell.vue';
|
||||
import CountryCell from './ContactsTable/CountryCell.vue';
|
||||
import ProfilesCell from './ContactsTable/ProfilesCell.vue';
|
||||
|
||||
const props = defineProps({
|
||||
contacts: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
showSearchEmptyState: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isLoading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['onSortChange']);
|
||||
const { t } = useI18n();
|
||||
|
||||
const tableData = computed(() => {
|
||||
if (props.isLoading) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return props.contacts.map(item => {
|
||||
// Note: The attributes used here is in snake case
|
||||
// as it simplier the sort attribute calculation
|
||||
const additional = item.additional_attributes || {};
|
||||
const { last_activity_at: lastActivityAt } = item;
|
||||
const { created_at: createdAt } = item;
|
||||
return {
|
||||
...item,
|
||||
profiles: additional.social_profiles || {},
|
||||
last_activity_at: lastActivityAt ? dynamicTime(lastActivityAt) : null,
|
||||
created_at: createdAt ? dynamicTime(createdAt) : null,
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
const defaulSpanRender = cellProps =>
|
||||
h(
|
||||
'span',
|
||||
{
|
||||
class: cellProps.getValue() ? '' : 'text-slate-300 dark:text-slate-700',
|
||||
},
|
||||
cellProps.getValue() ? cellProps.getValue() : '---'
|
||||
);
|
||||
|
||||
const columnHelper = createColumnHelper();
|
||||
const columns = [
|
||||
columnHelper.accessor('name', {
|
||||
header: t('CONTACTS_PAGE.LIST.TABLE_HEADER.NAME'),
|
||||
cell: cellProps => h(NameCell, cellProps),
|
||||
size: 250,
|
||||
}),
|
||||
columnHelper.accessor('email', {
|
||||
header: t('CONTACTS_PAGE.LIST.TABLE_HEADER.EMAIL_ADDRESS'),
|
||||
cell: cellProps => h(EmailCell, { email: cellProps.getValue() }),
|
||||
size: 250,
|
||||
}),
|
||||
columnHelper.accessor('phone_number', {
|
||||
header: t('CONTACTS_PAGE.LIST.TABLE_HEADER.PHONE_NUMBER'),
|
||||
size: 200,
|
||||
cell: cellProps =>
|
||||
h(TelCell, {
|
||||
phoneNumber: cellProps.getValue(),
|
||||
defaultCountry: cellProps.row.original.country_code,
|
||||
}),
|
||||
}),
|
||||
columnHelper.accessor('company_name', {
|
||||
header: t('CONTACTS_PAGE.LIST.TABLE_HEADER.COMPANY'),
|
||||
size: 200,
|
||||
cell: defaulSpanRender,
|
||||
}),
|
||||
columnHelper.accessor('city', {
|
||||
header: t('CONTACTS_PAGE.LIST.TABLE_HEADER.CITY'),
|
||||
cell: defaulSpanRender,
|
||||
size: 200,
|
||||
}),
|
||||
columnHelper.accessor('country', {
|
||||
header: t('CONTACTS_PAGE.LIST.TABLE_HEADER.COUNTRY'),
|
||||
size: 200,
|
||||
cell: cellProps =>
|
||||
h(CountryCell, {
|
||||
countryCode: cellProps.row.original.country_code,
|
||||
country: cellProps.getValue(),
|
||||
}),
|
||||
}),
|
||||
columnHelper.accessor('profiles', {
|
||||
header: t('CONTACTS_PAGE.LIST.TABLE_HEADER.SOCIAL_PROFILES'),
|
||||
size: 200,
|
||||
enableSorting: false,
|
||||
cell: cellProps =>
|
||||
h(ProfilesCell, {
|
||||
profiles: cellProps.getValue(),
|
||||
}),
|
||||
}),
|
||||
columnHelper.accessor('last_activity_at', {
|
||||
header: t('CONTACTS_PAGE.LIST.TABLE_HEADER.LAST_ACTIVITY'),
|
||||
size: 200,
|
||||
cell: defaulSpanRender,
|
||||
}),
|
||||
columnHelper.accessor('created_at', {
|
||||
header: t('CONTACTS_PAGE.LIST.TABLE_HEADER.CREATED_AT'),
|
||||
size: 200,
|
||||
cell: defaulSpanRender,
|
||||
}),
|
||||
];
|
||||
|
||||
// type ColumnSort = {
|
||||
// id: string
|
||||
// desc: boolean
|
||||
// }
|
||||
// type SortingState = ColumnSort[]
|
||||
const sortingState = ref([{ last_activity_at: 'desc' }]);
|
||||
|
||||
const table = useVueTable({
|
||||
get data() {
|
||||
return tableData.value;
|
||||
},
|
||||
columns,
|
||||
enableMultiSort: false,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
state: {
|
||||
get sorting() {
|
||||
return sortingState.value;
|
||||
},
|
||||
},
|
||||
onSortingChange: updater => {
|
||||
// onSortingChange returns a callback that allows us to trigger the sort when we need
|
||||
// See more docs here: https://tanstack.com/table/latest/docs/api/features/sorting#onsortingchange
|
||||
// IMO, I don't like this API, but it's what we have for now. Would be great if we could just listen the the changes
|
||||
// to the sorting state and emit the event when it changes
|
||||
// But we can easily wrap this later as a separate composable
|
||||
const updatedSortState = updater(sortingState.value);
|
||||
// we pick the first item from the array, as we are not using multi-sorting
|
||||
const [sort] = updatedSortState;
|
||||
|
||||
if (sort) {
|
||||
sortingState.value = updatedSortState;
|
||||
emit('onSortChange', { [sort.id]: sort.desc ? 'desc' : 'asc' });
|
||||
} else {
|
||||
// If the sorting is empty, we reset to the default sorting
|
||||
sortingState.value = [{ last_activity_at: 'desc' }];
|
||||
emit('onSortChange', {});
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="flex-1 h-full overflow-auto bg-white dark:bg-slate-900">
|
||||
<section class="overflow-x-auto">
|
||||
<Table fixed :table="table" type="compact" />
|
||||
</section>
|
||||
|
||||
<EmptyState
|
||||
v-if="showSearchEmptyState"
|
||||
:title="$t('CONTACTS_PAGE.LIST.404')"
|
||||
/>
|
||||
<EmptyState
|
||||
v-else-if="!isLoading && !contacts.length"
|
||||
:title="$t('CONTACTS_PAGE.LIST.NO_CONTACTS')"
|
||||
/>
|
||||
<div v-if="isLoading" class="flex items-center justify-center text-base">
|
||||
<Spinner />
|
||||
<span>{{ $t('CONTACTS_PAGE.LIST.LOADING_MESSAGE') }}</span>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -1,36 +0,0 @@
|
||||
<script setup>
|
||||
import BaseCell from 'dashboard/components/table/BaseCell.vue';
|
||||
import { computed } from 'vue';
|
||||
import { getCountryFlag } from 'dashboard/helper/flag';
|
||||
|
||||
const props = defineProps({
|
||||
countryCode: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
country: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
|
||||
const countryFlag = computed(() => {
|
||||
if (!props.countryCode) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return getCountryFlag(props.countryCode);
|
||||
});
|
||||
|
||||
const formattedCountryName = computed(() => {
|
||||
if (!props.country) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return `${countryFlag.value} ${props.country}`;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BaseCell :content="formattedCountryName" />
|
||||
</template>
|
||||
@@ -1,22 +0,0 @@
|
||||
<script setup>
|
||||
import BaseCell from 'dashboard/components/table/BaseCell.vue';
|
||||
defineProps({
|
||||
email: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BaseCell>
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
class="text-woot-500 dark:text-woot-500"
|
||||
:href="`mailto:${email}`"
|
||||
>
|
||||
{{ email }}
|
||||
</a>
|
||||
</BaseCell>
|
||||
</template>
|
||||
@@ -1,52 +0,0 @@
|
||||
<script setup>
|
||||
import BaseCell from 'dashboard/components/table/BaseCell.vue';
|
||||
import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
|
||||
import { useMapGetter } from 'dashboard/composables/store';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { inject } from 'vue';
|
||||
|
||||
defineProps({
|
||||
row: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
const openContactInfoPanel = inject('openContactInfoPanel');
|
||||
const isRTL = useMapGetter('accounts/isRTL');
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BaseCell>
|
||||
<woot-button
|
||||
variant="clear"
|
||||
class="!px-0"
|
||||
@click="() => openContactInfoPanel(row.original.id)"
|
||||
>
|
||||
<div class="items-center flex" :class="{ 'flex-row-reverse': isRTL }">
|
||||
<Thumbnail
|
||||
size="32px"
|
||||
:src="row.original.thumbnail"
|
||||
:username="row.original.name"
|
||||
:status="row.original.availability_status"
|
||||
/>
|
||||
<div class="items-start flex flex-col my-0 mx-2">
|
||||
<h6 class="overflow-hidden text-base whitespace-nowrap text-ellipsis">
|
||||
<router-link
|
||||
:to="`/app/accounts/${route.params.accountId}/contacts/${row.original.id}`"
|
||||
class="text-sm font-medium m-0 capitalize"
|
||||
>
|
||||
{{ row.original.name }}
|
||||
</router-link>
|
||||
</h6>
|
||||
<button
|
||||
class="button clear small link text-slate-600 dark:text-slate-200"
|
||||
>
|
||||
{{ $t('CONTACTS_PAGE.LIST.VIEW_DETAILS') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</woot-button>
|
||||
</BaseCell>
|
||||
</template>
|
||||
@@ -1,33 +0,0 @@
|
||||
<script setup>
|
||||
import BaseCell from 'dashboard/components/table/BaseCell.vue';
|
||||
import { computed } from 'vue';
|
||||
import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
|
||||
|
||||
const props = defineProps({
|
||||
profiles: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const filteredProfiles = computed(() =>
|
||||
Object.keys(props.profiles).filter(profile => props.profiles[profile])
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BaseCell class="flex gap-2 items-center text-slate-300 dark:text-slate-400">
|
||||
<template v-if="filteredProfiles.length">
|
||||
<a
|
||||
v-for="profile in filteredProfiles"
|
||||
:key="profile"
|
||||
:href="`https://${profile}.com/${profiles[profile]}`"
|
||||
target="_blank"
|
||||
class="hover:text-slate-500"
|
||||
rel="noopener noreferrer nofollow"
|
||||
>
|
||||
<FluentIcon class="size-4" :icon="`brand-${profile}`" />
|
||||
</a>
|
||||
</template>
|
||||
</BaseCell>
|
||||
</template>
|
||||
@@ -1,40 +0,0 @@
|
||||
<script setup>
|
||||
import BaseCell from 'dashboard/components/table/BaseCell.vue';
|
||||
import { computed } from 'vue';
|
||||
import { parsePhoneNumber } from 'libphonenumber-js';
|
||||
|
||||
const props = defineProps({
|
||||
phoneNumber: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
defaultCountry: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
|
||||
const formattedNumber = computed(() => {
|
||||
if (!props.phoneNumber) {
|
||||
return '';
|
||||
}
|
||||
|
||||
try {
|
||||
const parsedNumber = parsePhoneNumber(
|
||||
props.phoneNumber,
|
||||
props.defaultCountry
|
||||
);
|
||||
|
||||
if (parsedNumber) {
|
||||
return parsedNumber.formatInternational();
|
||||
}
|
||||
return props.phoneNumber;
|
||||
} catch (error) {
|
||||
return props.phoneNumber;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BaseCell :content="formattedNumber" />
|
||||
</template>
|
||||
@@ -1,475 +0,0 @@
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
|
||||
import ContactsHeader from './Header.vue';
|
||||
import ContactsTable from './ContactsTable.vue';
|
||||
import ContactInfoPanel from './ContactInfoPanel.vue';
|
||||
import CreateContact from 'dashboard/routes/dashboard/conversation/contact/CreateContact.vue';
|
||||
import TableFooter from 'dashboard/components/widgets/TableFooter.vue';
|
||||
import ImportContacts from './ImportContacts.vue';
|
||||
import ContactsAdvancedFilters from './ContactsAdvancedFilters.vue';
|
||||
import contactFilterItems from '../contactFilterItems';
|
||||
import filterQueryGenerator from '../../../../helper/filterQueryGenerator';
|
||||
import AddCustomViews from 'dashboard/routes/dashboard/customviews/AddCustomViews.vue';
|
||||
import DeleteCustomViews from 'dashboard/routes/dashboard/customviews/DeleteCustomViews.vue';
|
||||
import { CONTACTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
|
||||
import countries from 'shared/constants/countries.js';
|
||||
import { generateValuesForEditCustomViews } from 'dashboard/helper/customViewsHelper';
|
||||
import { useTrack } from 'dashboard/composables';
|
||||
|
||||
const DEFAULT_PAGE = 1;
|
||||
const FILTER_TYPE_CONTACT = 1;
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ContactsHeader,
|
||||
ContactsTable,
|
||||
TableFooter,
|
||||
ContactInfoPanel,
|
||||
CreateContact,
|
||||
ImportContacts,
|
||||
ContactsAdvancedFilters,
|
||||
AddCustomViews,
|
||||
DeleteCustomViews,
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
openContactInfoPanel: this.openContactInfoPanel,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
label: { type: String, default: '' },
|
||||
segmentsId: {
|
||||
type: [String, Number],
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchQuery: '',
|
||||
showCreateModal: false,
|
||||
showImportModal: false,
|
||||
selectedContactId: '',
|
||||
sortConfig: { last_activity_at: 'desc' },
|
||||
showFiltersModal: false,
|
||||
contactFilterItems: contactFilterItems.map(filter => ({
|
||||
...filter,
|
||||
attributeName: this.$t(
|
||||
`CONTACTS_FILTER.ATTRIBUTES.${filter.attributeI18nKey}`
|
||||
),
|
||||
})),
|
||||
segmentsQuery: {},
|
||||
filterType: FILTER_TYPE_CONTACT,
|
||||
showAddSegmentsModal: false,
|
||||
showDeleteSegmentsModal: false,
|
||||
appliedFilter: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
records: 'contacts/getContacts',
|
||||
uiFlags: 'contacts/getUIFlags',
|
||||
meta: 'contacts/getMeta',
|
||||
segments: 'customViews/getContactCustomViews',
|
||||
getAppliedContactFilters: 'contacts/getAppliedContactFilters',
|
||||
}),
|
||||
showEmptySearchResult() {
|
||||
const hasEmptyResults = !!this.searchQuery && this.records.length === 0;
|
||||
return hasEmptyResults;
|
||||
},
|
||||
hasAppliedFilters() {
|
||||
return this.getAppliedContactFilters.length;
|
||||
},
|
||||
hasActiveSegments() {
|
||||
return this.activeSegment && this.segmentsId !== 0;
|
||||
},
|
||||
isContactAndLabelDashboard() {
|
||||
return (
|
||||
this.$route.name === 'contacts_dashboard' ||
|
||||
this.$route.name === 'contacts_labels_dashboard'
|
||||
);
|
||||
},
|
||||
pageTitle() {
|
||||
if (this.hasActiveSegments) {
|
||||
return this.activeSegment.name;
|
||||
}
|
||||
if (this.label) {
|
||||
return `#${this.label}`;
|
||||
}
|
||||
return this.$t('CONTACTS_PAGE.HEADER');
|
||||
},
|
||||
selectedContact() {
|
||||
if (this.selectedContactId) {
|
||||
const contact = this.records.find(
|
||||
item => this.selectedContactId === item.id
|
||||
);
|
||||
return contact;
|
||||
}
|
||||
return undefined;
|
||||
},
|
||||
showContactViewPane() {
|
||||
return this.selectedContactId !== '';
|
||||
},
|
||||
wrapClass() {
|
||||
return this.showContactViewPane ? 'w-[75%]' : 'w-full';
|
||||
},
|
||||
pageParameter() {
|
||||
const selectedPageNumber = Number(this.$route.query?.page);
|
||||
return !Number.isNaN(selectedPageNumber) &&
|
||||
selectedPageNumber >= DEFAULT_PAGE
|
||||
? selectedPageNumber
|
||||
: DEFAULT_PAGE;
|
||||
},
|
||||
activeSegment() {
|
||||
if (this.segmentsId) {
|
||||
const [firstValue] = this.segments.filter(
|
||||
view => view.id === Number(this.segmentsId)
|
||||
);
|
||||
return firstValue;
|
||||
}
|
||||
return undefined;
|
||||
},
|
||||
activeSegmentName() {
|
||||
return this.activeSegment?.name;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
label() {
|
||||
this.fetchContacts(DEFAULT_PAGE);
|
||||
if (this.hasAppliedFilters) {
|
||||
this.clearFilters();
|
||||
}
|
||||
},
|
||||
activeSegment() {
|
||||
if (this.hasActiveSegments) {
|
||||
const payload = this.activeSegment.query;
|
||||
this.fetchSavedFilteredContact(payload, DEFAULT_PAGE);
|
||||
}
|
||||
if (this.hasAppliedFilters && this.$route.name === 'contacts_dashboard') {
|
||||
this.fetchFilteredContacts(DEFAULT_PAGE);
|
||||
} else {
|
||||
this.fetchContacts(DEFAULT_PAGE);
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.fetchContacts(this.pageParameter);
|
||||
},
|
||||
methods: {
|
||||
updatePageParam(page) {
|
||||
window.history.pushState({}, null, `${this.$route.path}?page=${page}`);
|
||||
},
|
||||
getSortAttribute() {
|
||||
let sortAttr = Object.keys(this.sortConfig).reduce((acc, sortKey) => {
|
||||
const sortOrder = this.sortConfig[sortKey];
|
||||
if (sortOrder) {
|
||||
const sortOrderSign = sortOrder === 'asc' ? '' : '-';
|
||||
return `${sortOrderSign}${sortKey}`;
|
||||
}
|
||||
return acc;
|
||||
}, '');
|
||||
if (!sortAttr) {
|
||||
this.sortConfig = { last_activity_at: 'desc' };
|
||||
sortAttr = '-last_activity_at';
|
||||
}
|
||||
return sortAttr;
|
||||
},
|
||||
fetchContacts(page) {
|
||||
if (this.isContactAndLabelDashboard) {
|
||||
this.updatePageParam(page);
|
||||
let value = '';
|
||||
if (this.searchQuery.charAt(0) === '+') {
|
||||
value = this.searchQuery.substring(1);
|
||||
} else {
|
||||
value = this.searchQuery;
|
||||
}
|
||||
const requestParams = {
|
||||
page,
|
||||
sortAttr: this.getSortAttribute(),
|
||||
label: this.label,
|
||||
};
|
||||
if (!value) {
|
||||
this.$store.dispatch('contacts/get', requestParams);
|
||||
} else {
|
||||
this.$store.dispatch('contacts/search', {
|
||||
search: encodeURIComponent(value),
|
||||
...requestParams,
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
fetchSavedFilteredContact(payload, page) {
|
||||
if (this.hasActiveSegments) {
|
||||
this.updatePageParam(page);
|
||||
this.$store.dispatch('contacts/filter', {
|
||||
queryPayload: payload,
|
||||
page,
|
||||
});
|
||||
}
|
||||
},
|
||||
fetchFilteredContacts(page) {
|
||||
if (this.hasAppliedFilters) {
|
||||
const payload = this.segmentsQuery;
|
||||
this.updatePageParam(page);
|
||||
this.$store.dispatch('contacts/filter', {
|
||||
queryPayload: payload,
|
||||
page,
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
onInputSearch(event) {
|
||||
const newQuery = event.target.value;
|
||||
const refetchAllContacts = !!this.searchQuery && newQuery === '';
|
||||
this.searchQuery = newQuery;
|
||||
if (refetchAllContacts) {
|
||||
this.fetchContacts(DEFAULT_PAGE);
|
||||
}
|
||||
},
|
||||
onSearchSubmit() {
|
||||
this.selectedContactId = '';
|
||||
if (this.searchQuery) {
|
||||
this.fetchContacts(DEFAULT_PAGE);
|
||||
}
|
||||
},
|
||||
onPageChange(page) {
|
||||
this.selectedContactId = '';
|
||||
if (this.segmentsId !== 0) {
|
||||
const payload = this.activeSegment.query;
|
||||
this.fetchSavedFilteredContact(payload, page);
|
||||
}
|
||||
if (this.hasAppliedFilters) {
|
||||
this.fetchFilteredContacts(page);
|
||||
} else {
|
||||
this.fetchContacts(page);
|
||||
}
|
||||
},
|
||||
openContactInfoPanel(contactId) {
|
||||
this.selectedContactId = contactId;
|
||||
this.showContactInfoPanelPane = true;
|
||||
},
|
||||
closeContactInfoPanel() {
|
||||
this.selectedContactId = '';
|
||||
this.showContactInfoPanelPane = false;
|
||||
},
|
||||
onToggleCreate() {
|
||||
this.showCreateModal = !this.showCreateModal;
|
||||
},
|
||||
onToggleSaveFilters() {
|
||||
this.showAddSegmentsModal = true;
|
||||
},
|
||||
onCloseAddSegmentsModal() {
|
||||
this.showAddSegmentsModal = false;
|
||||
},
|
||||
onToggleDeleteFilters() {
|
||||
this.showDeleteSegmentsModal = true;
|
||||
},
|
||||
onCloseDeleteSegmentsModal() {
|
||||
this.showDeleteSegmentsModal = false;
|
||||
},
|
||||
onToggleImport() {
|
||||
this.showImportModal = !this.showImportModal;
|
||||
},
|
||||
onSortChange(params) {
|
||||
this.sortConfig = params;
|
||||
this.fetchContacts(this.meta.currentPage);
|
||||
|
||||
const sortBy =
|
||||
Object.entries(params).find(pair => Boolean(pair[1])) || [];
|
||||
|
||||
useTrack(CONTACTS_EVENTS.APPLY_SORT, {
|
||||
appliedOn: sortBy[0],
|
||||
order: sortBy[1],
|
||||
});
|
||||
},
|
||||
onToggleFilters() {
|
||||
if (this.hasActiveSegments) {
|
||||
this.initializeSegmentToFilterModal(this.activeSegment);
|
||||
}
|
||||
this.showFiltersModal = true;
|
||||
},
|
||||
closeAdvanceFiltersModal() {
|
||||
this.showFiltersModal = false;
|
||||
this.appliedFilter = [];
|
||||
},
|
||||
onApplyFilter(payload) {
|
||||
this.closeContactInfoPanel();
|
||||
this.segmentsQuery = filterQueryGenerator(payload);
|
||||
this.$store.dispatch('contacts/filter', {
|
||||
queryPayload: filterQueryGenerator(payload),
|
||||
});
|
||||
this.showFiltersModal = false;
|
||||
},
|
||||
onUpdateSegment(payload, segmentName) {
|
||||
const payloadData = {
|
||||
...this.activeSegment,
|
||||
name: segmentName,
|
||||
query: filterQueryGenerator(payload),
|
||||
};
|
||||
this.$store.dispatch('customViews/update', payloadData);
|
||||
this.closeAdvanceFiltersModal();
|
||||
},
|
||||
clearFilters() {
|
||||
this.$store.dispatch('contacts/clearContactFilters');
|
||||
this.fetchContacts(this.pageParameter);
|
||||
},
|
||||
onExportSubmit() {
|
||||
let query = { payload: [] };
|
||||
|
||||
if (this.hasActiveSegments) {
|
||||
query = this.activeSegment.query;
|
||||
} else if (this.hasAppliedFilters) {
|
||||
query = filterQueryGenerator(this.getAppliedContactFilters);
|
||||
}
|
||||
|
||||
try {
|
||||
this.$store.dispatch('contacts/export', {
|
||||
...query,
|
||||
label: this.label,
|
||||
});
|
||||
useAlert(this.$t('EXPORT_CONTACTS.SUCCESS_MESSAGE'));
|
||||
} catch (error) {
|
||||
useAlert(error.message || this.$t('EXPORT_CONTACTS.ERROR_MESSAGE'));
|
||||
}
|
||||
},
|
||||
setParamsForEditSegmentModal() {
|
||||
// Here we are setting the params for edit segment modal to show the existing values.
|
||||
|
||||
// For custom attributes we get only attribute key.
|
||||
// So we are mapping it to find the input type of the attribute to show in the edit segment modal.
|
||||
const params = {
|
||||
countries: countries,
|
||||
filterTypes: contactFilterItems,
|
||||
allCustomAttributes:
|
||||
this.$store.getters['attributes/getAttributesByModel'](
|
||||
'contact_attribute'
|
||||
),
|
||||
};
|
||||
return params;
|
||||
},
|
||||
initializeSegmentToFilterModal(activeSegment) {
|
||||
// Here we are setting the params for edit segment modal.
|
||||
// To show the existing values. when we click on edit segment button.
|
||||
|
||||
// Here we get the query from the active segment.
|
||||
// And we are mapping the query to the actual values.
|
||||
// To show in the edit segment modal by the help of generateValuesForEditCustomViews helper.
|
||||
const query = activeSegment?.query?.payload;
|
||||
if (!Array.isArray(query)) return;
|
||||
|
||||
this.appliedFilter.push(
|
||||
...query.map(filter => ({
|
||||
attribute_key: filter.attribute_key,
|
||||
attribute_model: filter.attribute_model,
|
||||
filter_operator: filter.filter_operator,
|
||||
values: Array.isArray(filter.values)
|
||||
? generateValuesForEditCustomViews(
|
||||
filter,
|
||||
this.setParamsForEditSegmentModal()
|
||||
)
|
||||
: [],
|
||||
query_operator: filter.query_operator,
|
||||
custom_attribute_type: filter.custom_attribute_type,
|
||||
}))
|
||||
);
|
||||
},
|
||||
openSavedItemInSegment() {
|
||||
const lastItemInSegments = this.segments[this.segments.length - 1];
|
||||
const lastItemId = lastItemInSegments.id;
|
||||
this.$router.push({
|
||||
name: 'contacts_segments_dashboard',
|
||||
params: { id: lastItemId },
|
||||
});
|
||||
},
|
||||
openLastItemAfterDeleteInSegment() {
|
||||
if (this.segments.length > 0) {
|
||||
this.openSavedItemInSegment();
|
||||
} else {
|
||||
this.$router.push({ name: 'contacts_dashboard' });
|
||||
this.fetchContacts(DEFAULT_PAGE);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-row w-full">
|
||||
<div class="flex flex-col h-full" :class="wrapClass">
|
||||
<ContactsHeader
|
||||
:search-query="searchQuery"
|
||||
:header-title="pageTitle"
|
||||
:segments-id="segmentsId"
|
||||
this-selected-contact-id=""
|
||||
@on-input-search="onInputSearch"
|
||||
@on-toggle-create="onToggleCreate"
|
||||
@on-toggle-filter="onToggleFilters"
|
||||
@on-search-submit="onSearchSubmit"
|
||||
@on-toggle-import="onToggleImport"
|
||||
@on-export-submit="onExportSubmit"
|
||||
@on-toggle-save-filter="onToggleSaveFilters"
|
||||
@on-toggle-delete-filter="onToggleDeleteFilters"
|
||||
@on-toggle-edit-filter="onToggleFilters"
|
||||
/>
|
||||
<ContactsTable
|
||||
:contacts="records"
|
||||
:show-search-empty-state="showEmptySearchResult"
|
||||
:is-loading="uiFlags.isFetching"
|
||||
:active-contact-id="selectedContactId"
|
||||
@on-sort-change="onSortChange"
|
||||
/>
|
||||
<TableFooter
|
||||
class="border-t border-slate-75 dark:border-slate-700/50"
|
||||
:current-page="Number(meta.currentPage)"
|
||||
:total-count="meta.count"
|
||||
:page-size="15"
|
||||
@page-change="onPageChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<AddCustomViews
|
||||
v-if="showAddSegmentsModal"
|
||||
:custom-views-query="segmentsQuery"
|
||||
:filter-type="filterType"
|
||||
:open-last-saved-item="openSavedItemInSegment"
|
||||
@close="onCloseAddSegmentsModal"
|
||||
/>
|
||||
<DeleteCustomViews
|
||||
v-if="showDeleteSegmentsModal"
|
||||
v-model:show="showDeleteSegmentsModal"
|
||||
:active-custom-view="activeSegment"
|
||||
:custom-views-id="segmentsId"
|
||||
:active-filter-type="filterType"
|
||||
:open-last-item-after-delete="openLastItemAfterDeleteInSegment"
|
||||
@close="onCloseDeleteSegmentsModal"
|
||||
/>
|
||||
|
||||
<ContactInfoPanel
|
||||
v-if="showContactViewPane"
|
||||
:contact="selectedContact"
|
||||
:on-close="closeContactInfoPanel"
|
||||
/>
|
||||
<CreateContact :show="showCreateModal" @cancel="onToggleCreate" />
|
||||
<woot-modal v-model:show="showImportModal" :on-close="onToggleImport">
|
||||
<ImportContacts v-if="showImportModal" :on-close="onToggleImport" />
|
||||
</woot-modal>
|
||||
<woot-modal
|
||||
v-model:show="showFiltersModal"
|
||||
:on-close="closeAdvanceFiltersModal"
|
||||
size="medium"
|
||||
>
|
||||
<ContactsAdvancedFilters
|
||||
v-if="showFiltersModal"
|
||||
:on-close="closeAdvanceFiltersModal"
|
||||
:initial-filter-types="contactFilterItems"
|
||||
:initial-applied-filters="appliedFilter"
|
||||
:active-segment-name="activeSegmentName"
|
||||
:is-segments-view="hasActiveSegments"
|
||||
@apply-filter="onApplyFilter"
|
||||
@update-segment="onUpdateSegment"
|
||||
@clear-filters="clearFilters"
|
||||
/>
|
||||
</woot-modal>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,230 +0,0 @@
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { useAdmin } from 'dashboard/composables/useAdmin';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
headerTitle: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
searchQuery: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
segmentsId: {
|
||||
type: [String, Number],
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
emits: [
|
||||
'onToggleSaveFilter',
|
||||
'onToggleEditFilter',
|
||||
'onToggleDeleteFilter',
|
||||
'onToggleCreate',
|
||||
'onToggleFilter',
|
||||
'onToggleImport',
|
||||
'onExportSubmit',
|
||||
'onSearchSubmit',
|
||||
'onInputSearch',
|
||||
],
|
||||
setup() {
|
||||
const { isAdmin } = useAdmin();
|
||||
return {
|
||||
isAdmin,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showCreateModal: false,
|
||||
showImportModal: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
searchButtonClass() {
|
||||
return this.searchQuery !== ''
|
||||
? 'opacity-100 translate-x-0 visible'
|
||||
: '-translate-x-px opacity-0 invisible';
|
||||
},
|
||||
...mapGetters({
|
||||
getAppliedContactFilters: 'contacts/getAppliedContactFilters',
|
||||
}),
|
||||
hasAppliedFilters() {
|
||||
return this.getAppliedContactFilters.length;
|
||||
},
|
||||
hasActiveSegments() {
|
||||
return this.segmentsId !== 0;
|
||||
},
|
||||
exportDescription() {
|
||||
return this.hasAppliedFilters
|
||||
? this.$t('EXPORT_CONTACTS.CONFIRM.FILTERED_MESSAGE')
|
||||
: this.$t('EXPORT_CONTACTS.CONFIRM.MESSAGE');
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onToggleSegmentsModal() {
|
||||
this.$emit('onToggleSaveFilter');
|
||||
},
|
||||
onToggleEditSegmentsModal() {
|
||||
this.$emit('onToggleEditFilter');
|
||||
},
|
||||
onToggleDeleteSegmentsModal() {
|
||||
this.$emit('onToggleDeleteFilter');
|
||||
},
|
||||
toggleCreate() {
|
||||
this.$emit('onToggleCreate');
|
||||
},
|
||||
toggleFilter() {
|
||||
this.$emit('onToggleFilter');
|
||||
},
|
||||
toggleImport() {
|
||||
this.$emit('onToggleImport');
|
||||
},
|
||||
async submitExport() {
|
||||
const ok =
|
||||
await this.$refs.confirmExportContactsDialog.showConfirmation();
|
||||
|
||||
if (ok) {
|
||||
this.$emit('onExportSubmit');
|
||||
}
|
||||
},
|
||||
submitSearch() {
|
||||
this.$emit('onSearchSubmit');
|
||||
},
|
||||
inputSearch(event) {
|
||||
this.$emit('onInputSearch', event);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header
|
||||
class="bg-white border-b dark:bg-slate-900 border-slate-50 dark:border-slate-800"
|
||||
>
|
||||
<div class="flex justify-between w-full px-4 py-2">
|
||||
<div class="flex flex-col items-center w-full gap-2 md:flex-row">
|
||||
<div class="flex justify-between w-full gap-2">
|
||||
<div
|
||||
class="flex items-center justify-center max-w-full min-w-[6.25rem]"
|
||||
>
|
||||
<woot-sidemenu-icon />
|
||||
<h1
|
||||
class="m-0 mx-2 my-0 overflow-hidden text-xl text-slate-900 dark:text-slate-100 whitespace-nowrap text-ellipsis"
|
||||
>
|
||||
{{ headerTitle }}
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
class="max-w-[400px] min-w-[100px] flex items-center relative mx-2"
|
||||
>
|
||||
<div class="flex items-center absolute h-full left-2.5">
|
||||
<fluent-icon
|
||||
icon="search"
|
||||
class="h-5 text-sm leading-9 text-slate-700 dark:text-slate-200"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
:placeholder="$t('CONTACTS_PAGE.SEARCH_INPUT_PLACEHOLDER')"
|
||||
class="!pl-9 !pr-[3.75rem] !text-sm !w-full !h-[2.375rem] !m-0 border-slate-100 dark:border-slate-600"
|
||||
:value="searchQuery"
|
||||
@keyup.enter="submitSearch"
|
||||
@input="inputSearch"
|
||||
/>
|
||||
<woot-button
|
||||
:is-loading="false"
|
||||
class="absolute h-8 px-2 py-0 ml-2 transition-transform duration-100 ease-linear clear right-1"
|
||||
:class-names="searchButtonClass"
|
||||
@click="submitSearch"
|
||||
>
|
||||
{{ $t('CONTACTS_PAGE.SEARCH_BUTTON') }}
|
||||
</woot-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
<div v-if="hasActiveSegments" class="flex gap-2">
|
||||
<woot-button
|
||||
class="clear [&>span]:hidden xs:[&>span]:block"
|
||||
color-scheme="secondary"
|
||||
icon="edit"
|
||||
@click="onToggleEditSegmentsModal"
|
||||
>
|
||||
{{ $t('CONTACTS_PAGE.FILTER_CONTACTS_EDIT') }}
|
||||
</woot-button>
|
||||
<woot-button
|
||||
class="clear [&>span]:hidden xs:[&>span]:block"
|
||||
color-scheme="alert"
|
||||
icon="delete"
|
||||
@click="onToggleDeleteSegmentsModal"
|
||||
>
|
||||
{{ $t('CONTACTS_PAGE.FILTER_CONTACTS_DELETE') }}
|
||||
</woot-button>
|
||||
</div>
|
||||
<div v-if="!hasActiveSegments" class="relative">
|
||||
<div
|
||||
v-if="hasAppliedFilters"
|
||||
class="absolute w-2 h-2 rounded-full top-1 right-3 bg-slate-500 dark:bg-slate-500"
|
||||
/>
|
||||
<woot-button
|
||||
class="clear [&>span]:hidden xs:[&>span]:block"
|
||||
color-scheme="secondary"
|
||||
data-testid="create-new-contact"
|
||||
icon="filter"
|
||||
@click="toggleFilter"
|
||||
>
|
||||
{{ $t('CONTACTS_PAGE.FILTER_CONTACTS') }}
|
||||
</woot-button>
|
||||
</div>
|
||||
|
||||
<woot-button
|
||||
v-if="hasAppliedFilters && !hasActiveSegments"
|
||||
class="clear [&>span]:hidden xs:[&>span]:block"
|
||||
color-scheme="alert"
|
||||
variant="clear"
|
||||
icon="save"
|
||||
@click="onToggleSegmentsModal"
|
||||
>
|
||||
{{ $t('CONTACTS_PAGE.FILTER_CONTACTS_SAVE') }}
|
||||
</woot-button>
|
||||
<woot-button
|
||||
class="clear [&>span]:hidden xs:[&>span]:block"
|
||||
color-scheme="success"
|
||||
icon="person-add"
|
||||
data-testid="create-new-contact"
|
||||
@click="toggleCreate"
|
||||
>
|
||||
{{ $t('CREATE_CONTACT.BUTTON_LABEL') }}
|
||||
</woot-button>
|
||||
|
||||
<woot-button
|
||||
v-if="isAdmin"
|
||||
color-scheme="info"
|
||||
icon="upload"
|
||||
class="clear [&>span]:hidden xs:[&>span]:block"
|
||||
@click="toggleImport"
|
||||
>
|
||||
{{ $t('IMPORT_CONTACTS.BUTTON_LABEL') }}
|
||||
</woot-button>
|
||||
|
||||
<woot-button
|
||||
v-if="isAdmin"
|
||||
color-scheme="info"
|
||||
icon="download"
|
||||
class="clear [&>span]:hidden xs:[&>span]:block"
|
||||
@click="submitExport"
|
||||
>
|
||||
{{ $t('EXPORT_CONTACTS.BUTTON_LABEL') }}
|
||||
</woot-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<woot-confirm-modal
|
||||
ref="confirmExportContactsDialog"
|
||||
:title="$t('EXPORT_CONTACTS.CONFIRM.TITLE')"
|
||||
:description="exportDescription"
|
||||
:confirm-label="$t('EXPORT_CONTACTS.CONFIRM.YES')"
|
||||
:cancel-label="$t('EXPORT_CONTACTS.CONFIRM.NO')"
|
||||
/>
|
||||
</header>
|
||||
</template>
|
||||
@@ -1,96 +0,0 @@
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
import { CONTACTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
|
||||
import Modal from '../../../../components/Modal.vue';
|
||||
import { useTrack } from 'dashboard/composables';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Modal,
|
||||
},
|
||||
props: {
|
||||
onClose: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: true,
|
||||
file: '',
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
uiFlags: 'contacts/getUIFlags',
|
||||
}),
|
||||
csvUrl() {
|
||||
return '/downloads/import-contacts-sample.csv';
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
useTrack(CONTACTS_EVENTS.IMPORT_MODAL_OPEN);
|
||||
},
|
||||
methods: {
|
||||
async uploadFile() {
|
||||
try {
|
||||
if (!this.file) return;
|
||||
await this.$store.dispatch('contacts/import', this.file);
|
||||
this.onClose();
|
||||
useAlert(this.$t('IMPORT_CONTACTS.SUCCESS_MESSAGE'));
|
||||
useTrack(CONTACTS_EVENTS.IMPORT_SUCCESS);
|
||||
} catch (error) {
|
||||
useAlert(error.message || this.$t('IMPORT_CONTACTS.ERROR_MESSAGE'));
|
||||
useTrack(CONTACTS_EVENTS.IMPORT_FAILURE);
|
||||
}
|
||||
},
|
||||
handleFileUpload() {
|
||||
this.file = this.$refs.file.files[0];
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal v-model:show="show" :on-close="onClose">
|
||||
<div class="flex flex-col h-auto overflow-auto">
|
||||
<woot-modal-header :header-title="$t('IMPORT_CONTACTS.TITLE')">
|
||||
<p>
|
||||
{{ $t('IMPORT_CONTACTS.DESC') }}
|
||||
<a :href="csvUrl" download="import-contacts-sample">{{
|
||||
$t('IMPORT_CONTACTS.DOWNLOAD_LABEL')
|
||||
}}</a>
|
||||
</p>
|
||||
</woot-modal-header>
|
||||
<div class="flex flex-col p-8">
|
||||
<div class="w-full">
|
||||
<label>
|
||||
<span>{{ $t('IMPORT_CONTACTS.FORM.LABEL') }}</span>
|
||||
<input
|
||||
id="file"
|
||||
ref="file"
|
||||
type="file"
|
||||
accept="text/csv"
|
||||
@change="handleFileUpload"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
|
||||
<div class="w-full">
|
||||
<woot-button
|
||||
:disabled="uiFlags.isCreating || !file"
|
||||
:loading="uiFlags.isCreating"
|
||||
@click="uploadFile"
|
||||
>
|
||||
{{ $t('IMPORT_CONTACTS.FORM.SUBMIT') }}
|
||||
</woot-button>
|
||||
<button class="button clear" @click.prevent="onClose">
|
||||
{{ $t('IMPORT_CONTACTS.FORM.CANCEL') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
@@ -1,126 +0,0 @@
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
id: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
isCompleted: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
date: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
emits: ['completed', 'edit', 'delete'],
|
||||
|
||||
methods: {
|
||||
onClick() {
|
||||
this.$emit('completed', this.isCompleted);
|
||||
},
|
||||
onEdit() {
|
||||
this.$emit('edit', this.id);
|
||||
},
|
||||
onDelete() {
|
||||
this.$emit('delete', this.id);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="reminder-wrap">
|
||||
<div class="status-wrap">
|
||||
<input :checked="isCompleted" type="radio" @click="onClick" />
|
||||
</div>
|
||||
<div class="wrap">
|
||||
<p class="content">
|
||||
{{ text }}
|
||||
</p>
|
||||
<div class="footer">
|
||||
<div class="meta">
|
||||
<woot-label
|
||||
:title="date"
|
||||
description="date"
|
||||
icon="ion-android-calendar"
|
||||
color-scheme="secondary"
|
||||
/>
|
||||
<woot-label
|
||||
:title="label"
|
||||
description="label"
|
||||
color-scheme="secondary"
|
||||
/>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<woot-button
|
||||
variant="smooth"
|
||||
size="small"
|
||||
icon="edit"
|
||||
color-scheme="secondary"
|
||||
class="action-button"
|
||||
@click="onEdit"
|
||||
/>
|
||||
<woot-button
|
||||
variant="smooth"
|
||||
size="small"
|
||||
icon="ion-trash-b"
|
||||
color-scheme="secondary"
|
||||
class="action-button"
|
||||
@click="onDelete"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.reminder-wrap {
|
||||
display: flex;
|
||||
margin-bottom: var(--space-smaller);
|
||||
|
||||
.status-wrap {
|
||||
padding: var(--space-small) var(--space-smaller);
|
||||
margin-top: var(--space-smaller);
|
||||
}
|
||||
|
||||
.wrap {
|
||||
padding: var(--space-small);
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.meta {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: none;
|
||||
|
||||
.action-button {
|
||||
margin-right: var(--space-small);
|
||||
height: var(--space-medium);
|
||||
width: var(--space-medium);
|
||||
}
|
||||
}
|
||||
|
||||
.reminder-wrap:hover {
|
||||
.actions {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,73 +0,0 @@
|
||||
<script>
|
||||
export default {
|
||||
emits: ['notes', 'events', 'conversation'],
|
||||
|
||||
methods: {
|
||||
onClickNotes() {
|
||||
this.$emit('notes');
|
||||
},
|
||||
|
||||
onClickEvents() {
|
||||
this.$emit('events');
|
||||
},
|
||||
|
||||
onClickConversation() {
|
||||
this.$emit('conversation');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="wrap">
|
||||
<div class="header">
|
||||
<h5 class="text-lg text-black-900 dark:text-slate-200">
|
||||
{{ $t('EVENTS.HEADER.TITLE') }}
|
||||
</h5>
|
||||
</div>
|
||||
<div class="button-wrap">
|
||||
<woot-button
|
||||
variant="hollow"
|
||||
size="tiny"
|
||||
color-scheme="secondary"
|
||||
class-names="pill-button"
|
||||
@click="onClickNotes"
|
||||
>
|
||||
{{ $t('EVENTS.BUTTON.PILL_BUTTON_NOTES') }}
|
||||
</woot-button>
|
||||
<woot-button
|
||||
variant="hollow"
|
||||
size="tiny"
|
||||
color-scheme="secondary"
|
||||
class-names="pill-button"
|
||||
@click="onClickEvents"
|
||||
>
|
||||
{{ $t('EVENTS.BUTTON.PILL_BUTTON_EVENTS') }}
|
||||
</woot-button>
|
||||
<woot-button
|
||||
variant="hollow"
|
||||
size="tiny"
|
||||
color-scheme="secondary"
|
||||
class-names="pill-button"
|
||||
@click="onClickConversation"
|
||||
>
|
||||
{{ $t('EVENTS.BUTTON.PILL_BUTTON_CONVO') }}
|
||||
</woot-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrap {
|
||||
width: 100%;
|
||||
padding: var(--space-normal);
|
||||
|
||||
.button-wrap {
|
||||
display: flex;
|
||||
|
||||
.pill-button {
|
||||
margin-right: var(--space-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,133 +0,0 @@
|
||||
<!-- Unused file deprecated -->
|
||||
<script>
|
||||
import { dynamicTime } from 'shared/helpers/timeHelper';
|
||||
export default {
|
||||
props: {
|
||||
eventType: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
eventPath: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
eventBody: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
timeStamp: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
emits: ['more'],
|
||||
|
||||
computed: {
|
||||
readableTime() {
|
||||
return dynamicTime(this.timeStamp);
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick() {
|
||||
this.$emit('more');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="timeline-card-wrap">
|
||||
<div class="icon-chatbox">
|
||||
<i class="ion-chatboxes" />
|
||||
</div>
|
||||
<div class="card-wrap">
|
||||
<div class="header">
|
||||
<div class="text-wrap">
|
||||
<h6 class="text-sm">
|
||||
{{ eventType }}
|
||||
</h6>
|
||||
<span class="event-path">{{ 'on' }} {{ eventPath }}</span>
|
||||
</div>
|
||||
<div class="date-wrap">
|
||||
<span>{{ readableTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment-wrap">
|
||||
<p class="comment">
|
||||
{{ eventBody }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="icon-more" @click="onClick">
|
||||
<i class="ion-android-more-vertical" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.timeline-card-wrap {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
color: var(--color-body);
|
||||
padding: var(--space-small);
|
||||
|
||||
.icon-chatbox {
|
||||
width: var(--space-large);
|
||||
height: var(--space-large);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
justify-content: center;
|
||||
border: 1px solid var(--color-border);
|
||||
background-color: var(--color-background);
|
||||
|
||||
.ion-chatboxes {
|
||||
font-size: var(--font-size-default);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.card-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
padding: var(--space-smaller) var(--space-normal) 0;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.text-wrap {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.event-path {
|
||||
font-size: var(--font-size-mini);
|
||||
margin-left: var(--space-smaller);
|
||||
}
|
||||
|
||||
.date-wrap {
|
||||
font-size: var(--font-size-micro);
|
||||
}
|
||||
}
|
||||
|
||||
.comment-wrap {
|
||||
border: 1px solid var(--color-border-light);
|
||||
|
||||
.comment {
|
||||
padding: var(--space-small);
|
||||
font-size: var(--font-size-mini);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-more {
|
||||
.ion-android-more-vertical {
|
||||
font-size: var(--font-size-medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,46 +0,0 @@
|
||||
import { shallowMount } from '@vue/test-utils';
|
||||
import AddReminder from '../AddReminder.vue';
|
||||
|
||||
let wrapper;
|
||||
|
||||
describe('AddReminder', () => {
|
||||
beforeEach(() => {
|
||||
wrapper = shallowMount(AddReminder, {
|
||||
mocks: {
|
||||
$t: x => x,
|
||||
$store: { getters: {}, state: {} },
|
||||
},
|
||||
stubs: { WootButton: { template: '<button />' } },
|
||||
});
|
||||
});
|
||||
|
||||
it('tests resetValue', () => {
|
||||
const resetValue = vi.spyOn(wrapper.vm, 'resetValue');
|
||||
wrapper.vm.content = 'test';
|
||||
wrapper.vm.date = '08/11/2022';
|
||||
wrapper.vm.resetValue();
|
||||
expect(wrapper.vm.content).toEqual('');
|
||||
expect(wrapper.vm.date).toEqual('');
|
||||
expect(resetValue).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('tests optionSelected', () => {
|
||||
const optionSelected = vi.spyOn(wrapper.vm, 'optionSelected');
|
||||
wrapper.vm.label = '';
|
||||
wrapper.vm.optionSelected({ target: { value: 'test' } });
|
||||
expect(wrapper.vm.label).toEqual('test');
|
||||
expect(optionSelected).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('tests onAdd', () => {
|
||||
const onAdd = vi.spyOn(wrapper.vm, 'onAdd');
|
||||
wrapper.vm.label = 'label';
|
||||
wrapper.vm.content = 'content';
|
||||
wrapper.vm.date = '08/11/2022';
|
||||
wrapper.vm.onAdd();
|
||||
expect(onAdd).toHaveBeenCalled();
|
||||
expect(wrapper.emitted().add[0]).toEqual([
|
||||
{ content: 'content', date: '08/11/2022', label: 'label' },
|
||||
]);
|
||||
});
|
||||
});
|
||||
@@ -1,67 +0,0 @@
|
||||
<script>
|
||||
import MessageFormatter from 'shared/helpers/MessageFormatter.js';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
customAttributes: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
listOfAttributes() {
|
||||
return Object.keys(this.customAttributes).filter(key => {
|
||||
const value = this.customAttributes[key];
|
||||
return value !== null && value !== undefined && value !== '';
|
||||
});
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
valueWithLink(attribute) {
|
||||
const parsedAttribute = this.parseAttributeToString(attribute);
|
||||
const messageFormatter = new MessageFormatter(parsedAttribute);
|
||||
return messageFormatter.formattedMessage;
|
||||
},
|
||||
parseAttributeToString(attribute) {
|
||||
switch (typeof attribute) {
|
||||
case 'string':
|
||||
return attribute;
|
||||
case 'object':
|
||||
return JSON.stringify(attribute);
|
||||
default:
|
||||
return `${attribute}`;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="custom-attributes--panel">
|
||||
<div
|
||||
v-for="attribute in listOfAttributes"
|
||||
:key="attribute"
|
||||
class="custom-attribute--row"
|
||||
>
|
||||
<div class="custom-attribute--row__attribute">
|
||||
{{ attribute }}
|
||||
</div>
|
||||
<div>
|
||||
<span v-dompurify-html="valueWithLink(customAttributes[attribute])" />
|
||||
</div>
|
||||
</div>
|
||||
<p v-if="!listOfAttributes.length">
|
||||
{{ $t('CUSTOM_ATTRIBUTES.NOT_AVAILABLE') }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.custom-attributes--panel {
|
||||
margin-bottom: var(--space-normal);
|
||||
}
|
||||
|
||||
.custom-attribute--row__attribute {
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
@@ -1,62 +0,0 @@
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import ContactForm from './ContactForm.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ContactForm,
|
||||
},
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ['cancel', 'update:show'],
|
||||
computed: {
|
||||
...mapGetters({
|
||||
uiFlags: 'contacts/getUIFlags',
|
||||
}),
|
||||
localShow: {
|
||||
get() {
|
||||
return this.show;
|
||||
},
|
||||
set(value) {
|
||||
this.$emit('update:show', value);
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onCancel() {
|
||||
this.$emit('cancel');
|
||||
},
|
||||
onSuccess() {
|
||||
this.$emit('cancel');
|
||||
},
|
||||
async onSubmit(contactItem) {
|
||||
await this.$store.dispatch('contacts/create', contactItem);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<woot-modal
|
||||
v-model:show="localShow"
|
||||
:on-close="onCancel"
|
||||
modal-type="right-aligned"
|
||||
>
|
||||
<div class="flex flex-col h-auto overflow-auto">
|
||||
<woot-modal-header
|
||||
:header-title="$t('CREATE_CONTACT.TITLE')"
|
||||
:header-content="$t('CREATE_CONTACT.DESC')"
|
||||
/>
|
||||
<ContactForm
|
||||
:in-progress="uiFlags.isCreating"
|
||||
:on-submit="onSubmit"
|
||||
@success="onSuccess"
|
||||
@cancel="onCancel"
|
||||
/>
|
||||
</div>
|
||||
</woot-modal>
|
||||
</template>
|
||||
Reference in New Issue
Block a user