feat: Advanced Search Backend (#12917)
## Description
Implements comprehensive search functionality with advanced filtering
capabilities for Chatwoot (Linear: CW-5956).
This PR adds:
1. **Time-based filtering** for contacts and conversations (SQL-based
search)
2. **Advanced message search** with multiple filters
(OpenSearch/Elasticsearch-based)
- **`from` filter**: Filter messages by sender (format: `contact:42` or
`agent:5`)
- **`inbox_id` filter**: Filter messages by specific inbox
- **Time range filters**: Filter messages using `since` and `until`
parameters (Unix timestamps in seconds)
- **90-day limit enforcement**: Automatically limits searches to the
last 90 days to prevent performance issues
The implementation extends the existing `Enterprise::SearchService`
module for advanced features and adds time filtering to the base
`SearchService` for SQL-based searches.
## API Documentation
### Base URL
All search endpoints follow this pattern:
```
GET /api/v1/accounts/{account_id}/search/{resource}
```
### Authentication
All requests require authentication headers:
```
api_access_token: YOUR_ACCESS_TOKEN
```
---
## 1. Search All Resources
**Endpoint:** `GET /api/v1/accounts/{account_id}/search`
Returns results from all searchable resources (contacts, conversations,
messages, articles).
### Parameters
| Parameter | Type | Description | Required |
|-----------|------|-------------|----------|
| `q` | string | Search query | Yes |
| `page` | integer | Page number (15 items per page) | No |
| `since` | integer | Unix timestamp (contacts/conversations only) | No
|
| `until` | integer | Unix timestamp (contacts/conversations only) | No
|
### Example Request
```bash
curl -X GET "https://app.chatwoot.com/api/v1/accounts/1/search?q=customer" \
-H "api_access_token: YOUR_ACCESS_TOKEN"
```
### Example Response
```json
{
"payload": {
"contacts": [...],
"conversations": [...],
"messages": [...],
"articles": [...]
}
}
```
---
## 2. Search Contacts
**Endpoint:** `GET /api/v1/accounts/{account_id}/search/contacts`
Search contacts by name, email, phone number, or identifier with
optional time filtering.
### Parameters
| Parameter | Type | Description | Required |
|-----------|------|-------------|----------|
| `q` | string | Search query | Yes |
| `page` | integer | Page number (15 items per page) | No |
| `since` | integer | Unix timestamp - filter by last_activity_at | No |
| `until` | integer | Unix timestamp - filter by last_activity_at | No |
### Example Requests
**Basic search:**
```bash
curl -X GET "https://app.chatwoot.com/api/v1/accounts/1/search/contacts?q=john" \
-H "api_access_token: YOUR_ACCESS_TOKEN"
```
**Search contacts active in the last 7 days:**
```bash
SINCE=$(date -v-7d +%s)
curl -X GET "https://app.chatwoot.com/api/v1/accounts/1/search/contacts?q=john&since=${SINCE}" \
-H "api_access_token: YOUR_ACCESS_TOKEN"
```
**Search contacts active between 30 and 7 days ago:**
```bash
SINCE=$(date -v-30d +%s)
UNTIL=$(date -v-7d +%s)
curl -X GET "https://app.chatwoot.com/api/v1/accounts/1/search/contacts?q=john&since=${SINCE}&until=${UNTIL}" \
-H "api_access_token: YOUR_ACCESS_TOKEN"
```
### Example Response
```json
{
"payload": {
"contacts": [
{
"id": 42,
"email": "john@example.com",
"name": "John Doe",
"phone_number": "+1234567890",
"identifier": "user_123",
"additional_attributes": {},
"created_at": 1701234567
}
]
}
}
```
---
## 3. Search Conversations
**Endpoint:** `GET /api/v1/accounts/{account_id}/search/conversations`
Search conversations by display ID, contact name, email, phone number,
or identifier with optional time filtering.
### Parameters
| Parameter | Type | Description | Required |
|-----------|------|-------------|----------|
| `q` | string | Search query | Yes |
| `page` | integer | Page number (15 items per page) | No |
| `since` | integer | Unix timestamp - filter by last_activity_at | No |
| `until` | integer | Unix timestamp - filter by last_activity_at | No |
### Example Requests
**Basic search:**
```bash
curl -X GET "https://app.chatwoot.com/api/v1/accounts/1/search/conversations?q=billing" \
-H "api_access_token: YOUR_ACCESS_TOKEN"
```
**Search conversations active in the last 24 hours:**
```bash
SINCE=$(date -v-1d +%s)
curl -X GET "https://app.chatwoot.com/api/v1/accounts/1/search/conversations?q=billing&since=${SINCE}" \
-H "api_access_token: YOUR_ACCESS_TOKEN"
```
**Search conversations from last month:**
```bash
SINCE=$(date -v-30d +%s)
UNTIL=$(date +%s)
curl -X GET "https://app.chatwoot.com/api/v1/accounts/1/search/conversations?q=billing&since=${SINCE}&until=${UNTIL}" \
-H "api_access_token: YOUR_ACCESS_TOKEN"
```
### Example Response
```json
{
"payload": {
"conversations": [
{
"id": 123,
"display_id": 45,
"inbox_id": 1,
"status": "open",
"messages": [...],
"meta": {...}
}
]
}
}
```
---
## 4. Search Messages (Advanced)
**Endpoint:** `GET /api/v1/accounts/{account_id}/search/messages`
Advanced message search with multiple filters powered by
OpenSearch/Elasticsearch.
### Prerequisites
- OpenSearch/Elasticsearch must be running (`OPENSEARCH_URL` env var
configured)
- Account must have `advanced_search` feature flag enabled
- Messages must be indexed in OpenSearch
### Parameters
| Parameter | Type | Description | Required |
|-----------|------|-------------|----------|
| `q` | string | Search query | Yes |
| `page` | integer | Page number (15 items per page) | No |
| `from` | string | Filter by sender: `contact:{id}` or `agent:{id}` |
No |
| `inbox_id` | integer | Filter by specific inbox ID | No |
| `since` | integer | Unix timestamp - searches from this time (max 90
days ago) | No |
| `until` | integer | Unix timestamp - searches until this time | No |
### Important Notes
- **90-Day Limit**: If `since` is not provided, searches default to the
last 90 days
- If `since` exceeds 90 days, returns `422` error: "Search is limited to
the last 90 days"
- All time filters use message `created_at` timestamp
### Example Requests
**Basic message search:**
```bash
curl -X GET "https://app.chatwoot.com/api/v1/accounts/1/search/messages?q=refund" \
-H "api_access_token: YOUR_ACCESS_TOKEN"
```
**Search messages from a specific contact:**
```bash
curl -X GET "https://app.chatwoot.com/api/v1/accounts/1/search/messages?q=refund&from=contact:42" \
-H "api_access_token: YOUR_ACCESS_TOKEN"
```
**Search messages from a specific agent:**
```bash
curl -X GET "https://app.chatwoot.com/api/v1/accounts/1/search/messages?q=refund&from=agent:5" \
-H "api_access_token: YOUR_ACCESS_TOKEN"
```
**Search messages in a specific inbox:**
```bash
curl -X GET "https://app.chatwoot.com/api/v1/accounts/1/search/messages?q=refund&inbox_id=3" \
-H "api_access_token: YOUR_ACCESS_TOKEN"
```
**Search messages from the last 7 days:**
```bash
SINCE=$(date -v-7d +%s)
curl -X GET "https://app.chatwoot.com/api/v1/accounts/1/search/messages?q=refund&since=${SINCE}" \
-H "api_access_token: YOUR_ACCESS_TOKEN"
```
**Search messages between specific dates:**
```bash
SINCE=$(date -v-30d +%s)
UNTIL=$(date -v-7d +%s)
curl -X GET "https://app.chatwoot.com/api/v1/accounts/1/search/messages?q=refund&since=${SINCE}&until=${UNTIL}" \
-H "api_access_token: YOUR_ACCESS_TOKEN"
```
**Combine all filters:**
```bash
SINCE=$(date -v-14d +%s)
curl -X GET "https://app.chatwoot.com/api/v1/accounts/1/search/messages?q=refund&from=contact:42&inbox_id=3&since=${SINCE}" \
-H "api_access_token: YOUR_ACCESS_TOKEN"
```
**Attempt to search beyond 90 days (returns error):**
```bash
SINCE=$(date -v-120d +%s)
curl -X GET "https://app.chatwoot.com/api/v1/accounts/1/search/messages?q=refund&since=${SINCE}" \
-H "api_access_token: YOUR_ACCESS_TOKEN"
```
### Example Response (Success)
```json
{
"payload": {
"messages": [
{
"id": 789,
"content": "I need a refund for my purchase",
"message_type": "incoming",
"created_at": 1701234567,
"conversation_id": 123,
"inbox_id": 3,
"sender": {
"id": 42,
"type": "contact"
}
}
]
}
}
```
### Example Response (90-day limit exceeded)
```json
{
"error": "Search is limited to the last 90 days"
}
```
**Status Code:** `422 Unprocessable Entity`
---
## 5. Search Articles
**Endpoint:** `GET /api/v1/accounts/{account_id}/search/articles`
Search help center articles by title or content.
### Parameters
| Parameter | Type | Description | Required |
|-----------|------|-------------|----------|
| `q` | string | Search query | Yes |
| `page` | integer | Page number (15 items per page) | No |
### Example Request
```bash
curl -X GET "https://app.chatwoot.com/api/v1/accounts/1/search/articles?q=installation" \
-H "api_access_token: YOUR_ACCESS_TOKEN"
```
### Example Response
```json
{
"payload": {
"articles": [
{
"id": 456,
"title": "Installation Guide",
"slug": "installation-guide",
"portal_slug": "help",
"account_id": 1,
"category_name": "Getting Started",
"status": "published",
"updated_at": 1701234567
}
]
}
}
```
---
## Technical Implementation
### SQL-Based Search (Contacts, Conversations, Articles)
- Uses PostgreSQL `ILIKE` queries by default
- Optional GIN index support via `search_with_gin` feature flag for
better performance
- Time filtering uses `last_activity_at` for contacts/conversations
- Returns paginated results (15 per page)
### Advanced Search (Messages)
- Powered by OpenSearch/Elasticsearch via Searchkick gem
- Requires `OPENSEARCH_URL` environment variable
- Requires `advanced_search` account feature flag
- Enforces 90-day lookback limit via
`Limits::MESSAGE_SEARCH_TIME_RANGE_LIMIT_DAYS`
- Validates inbox access permissions before filtering
- Returns paginated results (15 per page)
---
## Type of change
- [x] New feature (non-breaking change which adds functionality)
- [x] Enhancement (improves existing functionality)
---
## How Has This Been Tested?
### Unit Tests
- **Contact Search Tests**: 3 new test cases for time filtering
(`since`, `until`, combined)
- **Conversation Search Tests**: 3 new test cases for time filtering
- **Message Search Tests**: 10+ test cases covering:
- Individual filters (`from`, `inbox_id`, time range)
- Combined filters
- Permission validation for inbox access
- Feature flag checks
- 90-day limit enforcement
- Error handling for exceeded time limits
### Test Commands
```bash
# Run all search controller tests
bundle exec rspec spec/controllers/api/v1/accounts/search_controller_spec.rb
# Run search service tests (includes enterprise specs)
bundle exec rspec spec/services/search_service_spec.rb
```
### Manual Testing Setup
A rake task is provided to create 50,000 test messages across multiple
inboxes:
```bash
# 1. Create test data
bundle exec rake search:setup_test_data
# 2. Start OpenSearch
mise elasticsearch-start
# 3. Reindex messages
rails runner "Message.search_index.import Message.all"
# 4. Enable feature flag
rails runner "Account.first.enable_features('advanced_search')"
# 5. Test via API or Rails console
```
---
## Checklist
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [x] I have made corresponding changes to the documentation (this PR
description)
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
---
## Additional Notes
### Requirements
- **OpenSearch/Elasticsearch**: Required for advanced message search
- Set `OPENSEARCH_URL` environment variable
- Example: `export OPENSEARCH_URL=http://localhost:9200`
- **Feature Flags**:
- `advanced_search`: Account-level flag for message advanced search
- `search_with_gin` (optional): Account-level flag for GIN-based SQL
search
### Performance Considerations
- 90-day limit prevents expensive long-range queries on large datasets
- GIN indexes recommended for high-volume search on SQL-based resources
- OpenSearch/Elasticsearch provides faster full-text search for messages
### Breaking Changes
- None. All new parameters are optional and backward compatible.
### Frontend Integration
- Frontend PR tracking advanced search UI will consume these endpoints
- Time range pickers should convert JavaScript `Date` to Unix timestamps
(seconds)
- Date conversion: `Math.floor(date.getTime() / 1000)`
### Error Handling
- Invalid `from` parameter format is silently ignored (filter not
applied)
- Time range exceeding 90 days returns `422` with error message
- Missing `q` parameter returns `422` (existing behavior)
- Unauthorized inbox access is filtered out (no error, just excluded
from results)
---------
Co-authored-by: iamsivin <iamsivin@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
This commit is contained in:
Vinay Keerthi
@@ -1,7 +1,8 @@
|
||||
<script setup>
|
||||
import { ref, useTemplateRef, onMounted, watch, nextTick, computed } from 'vue';
|
||||
import { computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
|
||||
import ReadMore from './ReadMore.vue';
|
||||
import { useExpandableContent } from 'shared/composables/useExpandableContent';
|
||||
|
||||
const props = defineProps({
|
||||
author: {
|
||||
@@ -18,6 +19,12 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
const { highlightContent } = useMessageFormatter();
|
||||
|
||||
const { contentElement, showReadMore, showReadLess, toggleExpanded } =
|
||||
useExpandableContent();
|
||||
|
||||
const messageContent = computed(() => {
|
||||
// We perform search on either content or email subject or transcribed text
|
||||
if (props.message.content) {
|
||||
@@ -30,33 +37,19 @@ const messageContent = computed(() => {
|
||||
return email.subject;
|
||||
}
|
||||
|
||||
const audioAttachment = props.message.attachments.find(
|
||||
const audioAttachment = props.message.attachments?.find(
|
||||
attachment => attachment.file_type === 'audio'
|
||||
);
|
||||
return audioAttachment?.transcribed_text || '';
|
||||
});
|
||||
|
||||
const { highlightContent } = useMessageFormatter();
|
||||
|
||||
const messageContainer = useTemplateRef('messageContainer');
|
||||
const isOverflowing = ref(false);
|
||||
|
||||
const setOverflow = () => {
|
||||
const wrap = messageContainer.value;
|
||||
if (wrap) {
|
||||
const message = wrap.querySelector('.message-content');
|
||||
isOverflowing.value = message.offsetHeight > 150;
|
||||
}
|
||||
};
|
||||
|
||||
const escapeHtml = html => {
|
||||
var text = document.createTextNode(html);
|
||||
var p = document.createElement('p');
|
||||
p.appendChild(text);
|
||||
return p.innerText;
|
||||
const wrapper = document.createElement('p');
|
||||
wrapper.textContent = html;
|
||||
return wrapper.textContent;
|
||||
};
|
||||
|
||||
const prepareContent = () => {
|
||||
const highlightedContent = computed(() => {
|
||||
const content = messageContent.value || '';
|
||||
const escapedText = escapeHtml(content);
|
||||
return highlightContent(
|
||||
@@ -64,50 +57,59 @@ const prepareContent = () => {
|
||||
props.searchTerm,
|
||||
'searchkey--highlight'
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
watch(() => {
|
||||
return messageContainer.value;
|
||||
}, setOverflow);
|
||||
|
||||
nextTick(setOverflow);
|
||||
const authorText = computed(() => {
|
||||
const author = props.author || '';
|
||||
const wroteText = t('SEARCH.WROTE');
|
||||
return author ? `${author} ${wroteText} ` : '';
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<blockquote ref="messageContainer" class="message border-l-2 border-n-weak">
|
||||
<p class="header">
|
||||
<strong class="text-n-slate-11">
|
||||
{{ author }}
|
||||
</strong>
|
||||
{{ $t('SEARCH.WROTE') }}
|
||||
</p>
|
||||
<ReadMore :shrink="isOverflowing" @expand="isOverflowing = false">
|
||||
<div v-dompurify-html="prepareContent()" class="message-content" />
|
||||
</ReadMore>
|
||||
</blockquote>
|
||||
<div
|
||||
ref="contentElement"
|
||||
class="break-words grid items-center text-n-slate-11 text-sm leading-relaxed"
|
||||
:class="showReadMore ? 'grid-cols-[1fr_auto]' : 'grid-cols-1'"
|
||||
>
|
||||
<div
|
||||
class="min-w-0"
|
||||
:class="{
|
||||
'overflow-hidden whitespace-nowrap text-ellipsis': showReadMore,
|
||||
}"
|
||||
>
|
||||
<span v-if="authorText" class="text-n-slate-11 font-medium leading-4">{{
|
||||
authorText
|
||||
}}</span>
|
||||
<span
|
||||
v-dompurify-html="highlightedContent"
|
||||
class="message-content text-n-slate-12 [&_.searchkey--highlight]:text-n-slate-12 [&_.searchkey--highlight]:font-semibold"
|
||||
/>
|
||||
<button
|
||||
v-if="showReadLess"
|
||||
class="text-sm text-n-slate-11 underline cursor-pointer bg-transparent border-0 p-0 hover:text-n-slate-12 font-medium ltr:ml-0.5 rtl:mr-0.5"
|
||||
@click.prevent="toggleExpanded(false)"
|
||||
>
|
||||
{{ t('SEARCH.READ_LESS') }}
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
v-if="showReadMore"
|
||||
class="text-sm text-n-slate-11 underline cursor-pointer bg-transparent border-0 p-0 hover:text-n-slate-12 font-medium justify-self-end ltr:ml-0.5 rtl:mr-0.5"
|
||||
@click.prevent="toggleExpanded(true)"
|
||||
>
|
||||
{{ t('SEARCH.READ_MORE') }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.message {
|
||||
@apply py-0 px-2 mt-2;
|
||||
.message-content::v-deep p {
|
||||
@apply inline;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.message-content::v-deep p,
|
||||
.message-content::v-deep li::marker {
|
||||
@apply text-n-slate-11 mb-1;
|
||||
}
|
||||
|
||||
.header {
|
||||
@apply text-n-slate-11 mb-1;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
@apply break-words text-n-slate-11;
|
||||
}
|
||||
|
||||
.message-content::v-deep .searchkey--highlight {
|
||||
@apply text-n-slate-12 text-sm font-semibold;
|
||||
.message-content::v-deep br {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
<script setup>
|
||||
import NextButton from 'dashboard/components-next/button/Button.vue';
|
||||
|
||||
defineProps({
|
||||
shrink: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
defineEmits(['expand']);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
:class="{
|
||||
'max-h-[100px] overflow-hidden relative': shrink,
|
||||
}"
|
||||
>
|
||||
<slot />
|
||||
<div
|
||||
v-if="shrink"
|
||||
class="absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t to-transparent from-n-background flex items-end justify-center pb-2"
|
||||
>
|
||||
<NextButton
|
||||
:label="$t('SEARCH.READ_MORE')"
|
||||
icon="i-lucide-chevrons-down"
|
||||
blue
|
||||
xs
|
||||
faded
|
||||
class="backdrop-filter backdrop-blur-[2px]"
|
||||
@click.prevent="$emit('expand')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,116 @@
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { LocalStorage } from 'shared/helpers/localStorage';
|
||||
import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
|
||||
|
||||
import Icon from 'dashboard/components-next/icon/Icon.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
|
||||
const emit = defineEmits(['selectSearch', 'clearAll']);
|
||||
|
||||
const MAX_RECENT_SEARCHES = 3;
|
||||
const recentSearches = ref([]);
|
||||
|
||||
const loadRecentSearches = () => {
|
||||
const stored = LocalStorage.get(LOCAL_STORAGE_KEYS.RECENT_SEARCHES) || [];
|
||||
recentSearches.value = Array.isArray(stored) ? stored : [];
|
||||
};
|
||||
|
||||
const saveRecentSearches = () => {
|
||||
LocalStorage.set(LOCAL_STORAGE_KEYS.RECENT_SEARCHES, recentSearches.value);
|
||||
};
|
||||
|
||||
const addRecentSearch = query => {
|
||||
if (!query || query.trim().length < 2) return;
|
||||
|
||||
const trimmedQuery = query.trim();
|
||||
|
||||
const existingIndex = recentSearches.value.findIndex(
|
||||
search => search.toLowerCase() === trimmedQuery.toLowerCase()
|
||||
);
|
||||
|
||||
if (existingIndex !== -1) {
|
||||
recentSearches.value.splice(existingIndex, 1);
|
||||
}
|
||||
|
||||
recentSearches.value.unshift(trimmedQuery);
|
||||
|
||||
if (recentSearches.value.length > MAX_RECENT_SEARCHES) {
|
||||
recentSearches.value = recentSearches.value.slice(0, MAX_RECENT_SEARCHES);
|
||||
}
|
||||
|
||||
saveRecentSearches();
|
||||
};
|
||||
|
||||
const clearRecentSearches = () => {
|
||||
recentSearches.value = [];
|
||||
LocalStorage.remove(LOCAL_STORAGE_KEYS.RECENT_SEARCHES);
|
||||
};
|
||||
|
||||
const hasRecentSearches = computed(() => recentSearches.value?.length > 0);
|
||||
|
||||
const onSelectSearch = query => {
|
||||
emit('selectSearch', query);
|
||||
};
|
||||
|
||||
const onClearAll = () => {
|
||||
clearRecentSearches();
|
||||
emit('clearAll');
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
addRecentSearch,
|
||||
loadRecentSearches,
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
loadRecentSearches();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="hasRecentSearches" class="px-4 pb-4 w-full pt-2">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<Icon icon="i-lucide-rotate-ccw" class="text-n-slate-10 size-4" />
|
||||
<h3 class="text-base font-medium text-n-slate-10">
|
||||
{{ $t('SEARCH.RECENT_SEARCHES') }}
|
||||
</h3>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
xs
|
||||
slate
|
||||
ghost
|
||||
class="!text-n-slate-10 hover:!text-n-slate-12"
|
||||
@mousedown.prevent
|
||||
@click="onClearAll"
|
||||
>
|
||||
{{ $t('SEARCH.CLEAR_ALL') }}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-4 items-start">
|
||||
<button
|
||||
v-for="(search, index) in recentSearches"
|
||||
:key="search"
|
||||
type="button"
|
||||
class="w-full flex items-center gap-2.5 text-left text-base text-n-slate-12 rounded-lg transition-all duration-150 group p-0"
|
||||
@mousedown.prevent
|
||||
@click="onSelectSearch(search)"
|
||||
>
|
||||
<Icon
|
||||
icon="i-lucide-search"
|
||||
class="text-n-slate-10 group-hover:text-n-slate-11 transition-colors duration-150 size-4"
|
||||
/>
|
||||
<span class="flex-1 truncate">{{ search }}</span>
|
||||
<span
|
||||
class="text-xs text-n-slate-8 opacity-0 group-hover:opacity-100 transition-opacity duration-150"
|
||||
>
|
||||
{{ index === 0 ? $t('SEARCH.MOST_RECENT') : '' }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<template v-else />
|
||||
</template>
|
||||
@@ -0,0 +1,239 @@
|
||||
<script setup>
|
||||
import { ref, computed, defineModel, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useToggle } from '@vueuse/core';
|
||||
import { vOnClickOutside } from '@vueuse/components';
|
||||
import { debounce } from '@chatwoot/utils';
|
||||
import { useMapGetter } from 'dashboard/composables/store.js';
|
||||
import { searchContacts } from 'dashboard/components-next/NewConversation/helpers/composeConversationHelper';
|
||||
import { useCamelCase } from 'dashboard/composables/useTransformKeys';
|
||||
import { fetchContactDetails } from '../helpers/searchHelper';
|
||||
|
||||
import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
|
||||
const props = defineProps({
|
||||
label: { type: String, required: true },
|
||||
});
|
||||
|
||||
const emit = defineEmits(['change']);
|
||||
|
||||
const FROM_TYPE = {
|
||||
CONTACT: 'contact',
|
||||
AGENT: 'agent',
|
||||
};
|
||||
|
||||
const MENU_ACTIONS_SELECT = 'select';
|
||||
|
||||
const modelValue = defineModel({ type: String, default: null });
|
||||
|
||||
const { t } = useI18n();
|
||||
const [showDropdown, toggleDropdown] = useToggle();
|
||||
|
||||
const searchQuery = ref('');
|
||||
const searchedContacts = ref([]);
|
||||
const isSearching = ref(false);
|
||||
const selectedContact = ref(null);
|
||||
|
||||
const agentsList = useMapGetter('agents/getVerifiedAgents');
|
||||
|
||||
const createMenuItem = (item, type, isAgent = false) => {
|
||||
const transformed = useCamelCase(item, { deep: true });
|
||||
const value = `${type}:${transformed.id}`;
|
||||
return {
|
||||
label: transformed.name,
|
||||
value,
|
||||
action: MENU_ACTIONS_SELECT,
|
||||
type,
|
||||
thumbnail: {
|
||||
name: transformed.name,
|
||||
src: isAgent ? transformed.avatarUrl : transformed.thumbnail,
|
||||
},
|
||||
...(isAgent
|
||||
? {}
|
||||
: { description: transformed.email || transformed.phoneNumber }),
|
||||
isSelected: modelValue.value === value,
|
||||
};
|
||||
};
|
||||
|
||||
const agentsSection = computed(() => {
|
||||
const agents =
|
||||
agentsList.value?.map(agent =>
|
||||
createMenuItem(agent, FROM_TYPE.AGENT, true)
|
||||
) || [];
|
||||
return searchQuery.value
|
||||
? agents.filter(agent =>
|
||||
agent.label.toLowerCase().includes(searchQuery.value.toLowerCase())
|
||||
)
|
||||
: agents;
|
||||
});
|
||||
|
||||
const contactsSection = computed(
|
||||
() =>
|
||||
searchedContacts.value?.map(contact =>
|
||||
createMenuItem(contact, FROM_TYPE.CONTACT)
|
||||
) || []
|
||||
);
|
||||
|
||||
const menuSections = computed(() => [
|
||||
{
|
||||
title: t('SEARCH.FILTERS.CONTACTS'),
|
||||
items: contactsSection.value,
|
||||
isLoading: isSearching.value,
|
||||
emptyState: t('SEARCH.FILTERS.NO_CONTACTS'),
|
||||
},
|
||||
{
|
||||
title: t('SEARCH.FILTERS.AGENTS'),
|
||||
items: agentsSection.value,
|
||||
emptyState: t('SEARCH.FILTERS.NO_AGENTS'),
|
||||
},
|
||||
]);
|
||||
|
||||
const selectedLabel = computed(() => {
|
||||
if (!modelValue.value) return props.label;
|
||||
|
||||
const [type, id] = modelValue.value.split(':');
|
||||
const numericId = Number(id);
|
||||
|
||||
if (type === FROM_TYPE.CONTACT) {
|
||||
if (selectedContact.value?.id === numericId) {
|
||||
return `${props.label}: ${selectedContact.value.name}`;
|
||||
}
|
||||
const contact = searchedContacts.value?.find(c => c.id === numericId);
|
||||
if (contact) return `${props.label}: ${contact.name}`;
|
||||
} else if (type === FROM_TYPE.AGENT) {
|
||||
const agent = agentsList.value?.find(a => a.id === numericId);
|
||||
if (agent) return `${props.label}: ${agent.name}`;
|
||||
}
|
||||
|
||||
return `${props.label}: ${numericId}`;
|
||||
});
|
||||
|
||||
const debouncedSearch = debounce(async query => {
|
||||
if (!query) {
|
||||
searchedContacts.value = selectedContact.value
|
||||
? [selectedContact.value]
|
||||
: [];
|
||||
isSearching.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const contacts = await searchContacts({
|
||||
keys: ['name', 'email', 'phone_number'],
|
||||
query,
|
||||
});
|
||||
|
||||
// Add selected contact to top if not already in results
|
||||
const allContacts = selectedContact.value
|
||||
? [
|
||||
selectedContact.value,
|
||||
...contacts.filter(c => c.id !== selectedContact.value.id),
|
||||
]
|
||||
: contacts;
|
||||
|
||||
searchedContacts.value = allContacts;
|
||||
} catch {
|
||||
// Ignore error
|
||||
} finally {
|
||||
isSearching.value = false;
|
||||
}
|
||||
}, 300);
|
||||
|
||||
const performSearch = query => {
|
||||
searchQuery.value = query;
|
||||
if (query) {
|
||||
searchedContacts.value = selectedContact.value
|
||||
? [selectedContact.value]
|
||||
: [];
|
||||
isSearching.value = true;
|
||||
}
|
||||
debouncedSearch(query);
|
||||
};
|
||||
|
||||
const onToggleDropdown = () => {
|
||||
if (!showDropdown.value) {
|
||||
// Reset search when opening dropdown
|
||||
searchQuery.value = '';
|
||||
searchedContacts.value = selectedContact.value
|
||||
? [selectedContact.value]
|
||||
: [];
|
||||
}
|
||||
toggleDropdown();
|
||||
};
|
||||
|
||||
const handleAction = item => {
|
||||
if (modelValue.value === item.value) {
|
||||
modelValue.value = null;
|
||||
selectedContact.value = null;
|
||||
} else {
|
||||
modelValue.value = item.value;
|
||||
|
||||
if (item.type === FROM_TYPE.CONTACT) {
|
||||
const [, id] = item.value.split(':');
|
||||
selectedContact.value = {
|
||||
id: Number(id),
|
||||
name: item.label,
|
||||
thumbnail: item.thumbnail?.src,
|
||||
};
|
||||
} else {
|
||||
selectedContact.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
toggleDropdown(false);
|
||||
emit('change');
|
||||
};
|
||||
|
||||
const resolveContactName = async () => {
|
||||
if (!modelValue.value) return;
|
||||
|
||||
const [type, id] = modelValue.value.split(':');
|
||||
if (type !== FROM_TYPE.CONTACT) return;
|
||||
|
||||
const numericId = Number(id);
|
||||
if (selectedContact.value?.id === numericId) return;
|
||||
|
||||
const contact = await fetchContactDetails(numericId);
|
||||
if (contact) {
|
||||
selectedContact.value = {
|
||||
id: contact.id,
|
||||
name: contact.name,
|
||||
thumbnail: contact.thumbnail,
|
||||
};
|
||||
if (!searchedContacts.value.some(c => c.id === contact.id)) {
|
||||
searchedContacts.value.push(selectedContact.value);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
watch(() => modelValue.value, resolveContactName, { immediate: true });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-on-click-outside="() => toggleDropdown(false)"
|
||||
class="relative flex items-center group min-w-0 max-w-full"
|
||||
>
|
||||
<Button
|
||||
sm
|
||||
:variant="showDropdown ? 'faded' : 'ghost'"
|
||||
slate
|
||||
:label="selectedLabel"
|
||||
trailing-icon
|
||||
icon="i-lucide-chevron-down"
|
||||
class="!px-2 max-w-full"
|
||||
@click="onToggleDropdown"
|
||||
/>
|
||||
<DropdownMenu
|
||||
v-if="showDropdown"
|
||||
:menu-sections="menuSections"
|
||||
show-search
|
||||
disable-local-filtering
|
||||
:is-searching="isSearching"
|
||||
class="mt-1 ltr:left-0 rtl:right-0 top-full w-64 max-h-80 overflow-y-auto"
|
||||
@search="performSearch"
|
||||
@action="handleAction"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,271 @@
|
||||
<script setup>
|
||||
import { computed, ref, defineModel } from 'vue';
|
||||
import { useToggle } from '@vueuse/core';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { vOnClickOutside } from '@vueuse/components';
|
||||
import {
|
||||
subDays,
|
||||
subMonths,
|
||||
subYears,
|
||||
startOfDay,
|
||||
endOfDay,
|
||||
format,
|
||||
getUnixTime,
|
||||
fromUnixTime,
|
||||
} from 'date-fns';
|
||||
import { DATE_RANGE_TYPES } from '../helpers/searchHelper';
|
||||
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
|
||||
|
||||
const emit = defineEmits(['change']);
|
||||
const modelValue = defineModel({
|
||||
type: Object,
|
||||
default: () => ({ type: null, from: null, to: null }),
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
const [showDropdown, toggleDropdown] = useToggle();
|
||||
|
||||
const customFrom = ref('');
|
||||
const customTo = ref('');
|
||||
const rangeType = ref(DATE_RANGE_TYPES.BETWEEN);
|
||||
|
||||
// Calculate min date (90 days ago) for date inputs
|
||||
const minDate = computed(() => format(subDays(new Date(), 90), 'yyyy-MM-dd'));
|
||||
const maxDate = computed(() => format(new Date(), 'yyyy-MM-dd'));
|
||||
|
||||
// Check if both custom date inputs have values
|
||||
const hasCustomDates = computed(() => customFrom.value && customTo.value);
|
||||
|
||||
const DATE_FILTER_ACTIONS = {
|
||||
PRESET: 'preset',
|
||||
SELECT: 'select',
|
||||
};
|
||||
|
||||
const PRESET_RANGES = computed(() => [
|
||||
{
|
||||
label: t('SEARCH.DATE_RANGE.LAST_7_DAYS'),
|
||||
value: DATE_RANGE_TYPES.LAST_7_DAYS,
|
||||
days: 7,
|
||||
},
|
||||
{
|
||||
label: t('SEARCH.DATE_RANGE.LAST_30_DAYS'),
|
||||
value: DATE_RANGE_TYPES.LAST_30_DAYS,
|
||||
days: 30,
|
||||
},
|
||||
{
|
||||
label: t('SEARCH.DATE_RANGE.LAST_60_DAYS'),
|
||||
value: DATE_RANGE_TYPES.LAST_60_DAYS,
|
||||
days: 60,
|
||||
},
|
||||
{
|
||||
label: t('SEARCH.DATE_RANGE.LAST_90_DAYS'),
|
||||
value: DATE_RANGE_TYPES.LAST_90_DAYS,
|
||||
days: 90,
|
||||
},
|
||||
]);
|
||||
|
||||
const computeDateRange = config => {
|
||||
const end = endOfDay(new Date());
|
||||
let start;
|
||||
|
||||
if (config.days) {
|
||||
start = startOfDay(subDays(end, config.days));
|
||||
} else if (config.months) {
|
||||
start = startOfDay(subMonths(end, config.months));
|
||||
} else {
|
||||
start = startOfDay(subYears(end, config.years));
|
||||
}
|
||||
|
||||
return { type: config.value, from: getUnixTime(start), to: getUnixTime(end) };
|
||||
};
|
||||
|
||||
const selectedValue = computed(() => {
|
||||
const { from, to, type } = modelValue.value || {};
|
||||
if (!from && !to && !type) return '';
|
||||
return type || DATE_RANGE_TYPES.CUSTOM;
|
||||
});
|
||||
|
||||
const menuItems = computed(() =>
|
||||
PRESET_RANGES.value.map(item => ({
|
||||
...item,
|
||||
action: DATE_FILTER_ACTIONS.PRESET,
|
||||
isSelected: selectedValue.value === item.value,
|
||||
}))
|
||||
);
|
||||
|
||||
const applySelection = ({ type, from, to }) => {
|
||||
const newValue = { type, from, to };
|
||||
modelValue.value = newValue;
|
||||
emit('change', newValue);
|
||||
};
|
||||
|
||||
const clearFilter = () => {
|
||||
applySelection({ type: null, from: null, to: null });
|
||||
customFrom.value = '';
|
||||
customTo.value = '';
|
||||
toggleDropdown(false);
|
||||
};
|
||||
|
||||
const handlePresetAction = item => {
|
||||
if (selectedValue.value === item.value) {
|
||||
clearFilter();
|
||||
return;
|
||||
}
|
||||
customFrom.value = '';
|
||||
customTo.value = '';
|
||||
applySelection(computeDateRange(item));
|
||||
toggleDropdown(false);
|
||||
};
|
||||
|
||||
const applyCustomRange = () => {
|
||||
const customFromDate = customFrom.value
|
||||
? startOfDay(new Date(customFrom.value))
|
||||
: null;
|
||||
const customToDate = customTo.value
|
||||
? endOfDay(new Date(customTo.value))
|
||||
: null;
|
||||
|
||||
// Only BETWEEN mode - require both dates
|
||||
if (customFromDate && customToDate) {
|
||||
applySelection({
|
||||
type: DATE_RANGE_TYPES.BETWEEN,
|
||||
from: getUnixTime(customFromDate),
|
||||
to: getUnixTime(customToDate),
|
||||
});
|
||||
toggleDropdown(false);
|
||||
}
|
||||
};
|
||||
|
||||
const clearCustomRange = () => {
|
||||
customFrom.value = '';
|
||||
customTo.value = '';
|
||||
};
|
||||
|
||||
const formatDate = timestamp => format(fromUnixTime(timestamp), 'MMM d, yyyy'); // (e.g., "Jan 15, 2024")
|
||||
|
||||
const selectedLabel = computed(() => {
|
||||
const prefix = t('SEARCH.DATE_RANGE.TIME_RANGE');
|
||||
if (!selectedValue.value) return prefix;
|
||||
|
||||
// Check if it's a preset
|
||||
const preset = PRESET_RANGES.value.find(p => p.value === selectedValue.value);
|
||||
if (preset) return `${prefix}: ${preset.label}`;
|
||||
|
||||
// Custom range - only BETWEEN mode with both dates
|
||||
const { from, to } = modelValue.value;
|
||||
if (from && to) return `${prefix}: ${formatDate(from)} - ${formatDate(to)}`;
|
||||
|
||||
return `${prefix}: ${t('SEARCH.DATE_RANGE.CUSTOM_RANGE')}`;
|
||||
});
|
||||
|
||||
const CUSTOM_RANGE_TYPES = [DATE_RANGE_TYPES.BETWEEN, DATE_RANGE_TYPES.CUSTOM];
|
||||
|
||||
const onToggleDropdown = () => {
|
||||
if (!showDropdown.value) {
|
||||
const { type, from, to } = modelValue.value || {};
|
||||
|
||||
rangeType.value = CUSTOM_RANGE_TYPES.includes(type)
|
||||
? type
|
||||
: DATE_RANGE_TYPES.BETWEEN;
|
||||
|
||||
if (CUSTOM_RANGE_TYPES.includes(type)) {
|
||||
try {
|
||||
customFrom.value = from ? format(fromUnixTime(from), 'yyyy-MM-dd') : '';
|
||||
customTo.value = to ? format(fromUnixTime(to), 'yyyy-MM-dd') : '';
|
||||
} catch {
|
||||
customFrom.value = '';
|
||||
customTo.value = '';
|
||||
}
|
||||
} else {
|
||||
customFrom.value = '';
|
||||
customTo.value = '';
|
||||
}
|
||||
}
|
||||
toggleDropdown();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-on-click-outside="() => toggleDropdown(false)"
|
||||
class="relative flex items-center group min-w-0 max-w-full"
|
||||
>
|
||||
<Button
|
||||
sm
|
||||
slate
|
||||
:variant="showDropdown ? 'faded' : 'solid'"
|
||||
:label="selectedLabel"
|
||||
class="group-hover:bg-n-alpha-2 max-w-full"
|
||||
trailing-icon
|
||||
icon="i-lucide-chevron-down"
|
||||
@click="onToggleDropdown()"
|
||||
/>
|
||||
<DropdownMenu
|
||||
v-if="showDropdown"
|
||||
:menu-items="menuItems"
|
||||
class="mt-1 ltr:left-0 rtl:right-0 top-full w-64"
|
||||
@action="handlePresetAction"
|
||||
>
|
||||
<template #footer>
|
||||
<div class="h-px bg-n-strong" />
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex items-center justify-between gap-2 px-1 h-9">
|
||||
<span class="text-sm text-n-slate-11">
|
||||
{{ t('SEARCH.DATE_RANGE.CUSTOM_RANGE') }}
|
||||
</span>
|
||||
<span class="text-sm text-n-slate-12">
|
||||
{{ t('SEARCH.DATE_RANGE.CREATED_BETWEEN') }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<input
|
||||
v-model="customFrom"
|
||||
type="date"
|
||||
:min="minDate"
|
||||
:max="customTo || maxDate"
|
||||
class="!w-full !mb-0 !rounded-lg !bg-n-alpha-black2 !outline-n-strong -outline-offset-1 !px-3 !py-2 !text-sm text-n-slate-12 !h-8"
|
||||
/>
|
||||
|
||||
<div class="flex items-center gap-3 h-5 px-1">
|
||||
<div class="flex-1 h-px bg-n-weak" />
|
||||
<span class="text-sm text-n-slate-11">
|
||||
{{ t('SEARCH.DATE_RANGE.AND') }}
|
||||
</span>
|
||||
<div class="flex-1 h-px bg-n-weak" />
|
||||
</div>
|
||||
|
||||
<input
|
||||
v-model="customTo"
|
||||
type="date"
|
||||
:min="customFrom || minDate"
|
||||
:max="maxDate"
|
||||
class="!w-full !mb-0 !rounded-lg !bg-n-alpha-black2 !outline-n-strong -outline-offset-1 !px-3 !py-2 !text-sm text-n-slate-12 !h-8"
|
||||
/>
|
||||
|
||||
<div class="flex items-center gap-2 mt-2">
|
||||
<Button
|
||||
sm
|
||||
slate
|
||||
faded
|
||||
:label="t('SEARCH.DATE_RANGE.CLEAR_FILTER')"
|
||||
:disabled="!hasCustomDates"
|
||||
class="flex-1 justify-center"
|
||||
@click="clearCustomRange"
|
||||
/>
|
||||
<Button
|
||||
sm
|
||||
solid
|
||||
color="blue"
|
||||
:label="t('SEARCH.DATE_RANGE.APPLY')"
|
||||
:disabled="!hasCustomDates"
|
||||
class="flex-1 justify-center"
|
||||
@click="applyCustomRange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,104 @@
|
||||
<script setup>
|
||||
import { computed, defineModel } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import SearchDateRangeSelector from './SearchDateRangeSelector.vue';
|
||||
import SearchContactAgentSelector from './SearchContactAgentSelector.vue';
|
||||
import SearchInboxSelector from './SearchInboxSelector.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
|
||||
const emit = defineEmits(['updateFilters']);
|
||||
const { t } = useI18n();
|
||||
|
||||
const filters = defineModel({
|
||||
type: Object,
|
||||
default: () => ({
|
||||
from: null, // Contact id and Agent id
|
||||
in: null, // Inbox id
|
||||
dateRange: { type: null, from: null, to: null },
|
||||
}),
|
||||
});
|
||||
|
||||
const hasActiveFilters = computed(
|
||||
() =>
|
||||
filters.value.from ||
|
||||
filters.value.in ||
|
||||
filters.value.dateRange?.type ||
|
||||
filters.value.dateRange?.from ||
|
||||
filters.value.dateRange?.to
|
||||
);
|
||||
|
||||
const onFilterChange = () => {
|
||||
emit('updateFilters', filters.value);
|
||||
};
|
||||
|
||||
const clearAllFilters = () => {
|
||||
filters.value = {
|
||||
from: null,
|
||||
in: null,
|
||||
dateRange: { type: null, from: null, to: null },
|
||||
};
|
||||
onFilterChange();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col lg:flex-row items-start lg:items-center gap-3 p-4 w-full min-w-0"
|
||||
>
|
||||
<div class="flex items-center gap-3 min-w-0 max-w-full">
|
||||
<Button
|
||||
v-if="hasActiveFilters"
|
||||
sm
|
||||
slate
|
||||
solid
|
||||
:label="t('SEARCH.DATE_RANGE.CLEAR_FILTER')"
|
||||
icon="i-lucide-x"
|
||||
class="flex-shrink-0 lg:hidden"
|
||||
@click="clearAllFilters"
|
||||
/>
|
||||
|
||||
<SearchDateRangeSelector
|
||||
v-model="filters.dateRange"
|
||||
class="min-w-0 max-w-full"
|
||||
@change="onFilterChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="w-px h-4 bg-n-weak flex-shrink-0 hidden lg:block" />
|
||||
|
||||
<div class="flex items-center gap-1.5 min-w-0 flex-1 max-w-full">
|
||||
<span class="text-sm text-n-slate-10 flex-shrink-0 whitespace-nowrap">
|
||||
{{ t('SEARCH.FILTERS.FILTER_MESSAGE') }}
|
||||
</span>
|
||||
|
||||
<div class="min-w-0">
|
||||
<SearchContactAgentSelector
|
||||
v-model="filters.from"
|
||||
:label="$t('SEARCH.FILTERS.FROM')"
|
||||
@change="onFilterChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="w-px h-3 bg-n-weak rounded-lg flex-shrink-0" />
|
||||
|
||||
<div class="min-w-0">
|
||||
<SearchInboxSelector
|
||||
v-model="filters.in"
|
||||
:label="$t('SEARCH.FILTERS.IN')"
|
||||
@change="onFilterChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
v-if="hasActiveFilters"
|
||||
sm
|
||||
slate
|
||||
solid
|
||||
:label="t('SEARCH.DATE_RANGE.CLEAR_FILTER')"
|
||||
icon="i-lucide-x"
|
||||
class="flex-shrink-0 hidden lg:inline-flex"
|
||||
@click="clearAllFilters"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,48 +1,34 @@
|
||||
<script setup>
|
||||
import { ref, useTemplateRef, onMounted, onUnmounted, watch } from 'vue';
|
||||
import { debounce } from '@chatwoot/utils';
|
||||
import { ref, watch, useTemplateRef, defineModel } from 'vue';
|
||||
import { FEATURE_FLAGS } from 'dashboard/featureFlags';
|
||||
import { INSTALLATION_TYPES } from 'dashboard/constants/installationTypes';
|
||||
import { ROLES } from 'dashboard/constants/permissions';
|
||||
|
||||
import SearchInput from './SearchInput.vue';
|
||||
import SearchFilters from './SearchFilters.vue';
|
||||
import Policy from 'dashboard/components/policy.vue';
|
||||
|
||||
const props = defineProps({
|
||||
initialQuery: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
initialQuery: { type: String, default: '' },
|
||||
});
|
||||
|
||||
const emit = defineEmits(['search']);
|
||||
const emit = defineEmits(['search', 'filterChange']);
|
||||
|
||||
const filters = defineModel('filters', { type: Object, default: () => ({}) });
|
||||
|
||||
const searchInputRef = useTemplateRef('searchInputRef');
|
||||
const searchQuery = ref(props.initialQuery);
|
||||
const isInputFocused = ref(false);
|
||||
|
||||
const searchInput = useTemplateRef('searchInput');
|
||||
|
||||
const handler = e => {
|
||||
if (e.key === '/' && document.activeElement.tagName !== 'INPUT') {
|
||||
e.preventDefault();
|
||||
searchInput.value.focus();
|
||||
} else if (e.key === 'Escape' && document.activeElement.tagName === 'INPUT') {
|
||||
e.preventDefault();
|
||||
searchInput.value.blur();
|
||||
const onSearch = query => {
|
||||
if (query?.trim() && searchInputRef.value) {
|
||||
searchInputRef.value.addToRecentSearches(query.trim());
|
||||
}
|
||||
emit('search', query);
|
||||
};
|
||||
|
||||
const debouncedEmit = debounce(
|
||||
value =>
|
||||
emit('search', value.length > 1 || value.match(/^[0-9]+$/) ? value : ''),
|
||||
500
|
||||
);
|
||||
|
||||
const onInput = e => {
|
||||
searchQuery.value = e.target.value;
|
||||
debouncedEmit(searchQuery.value);
|
||||
};
|
||||
|
||||
const onFocus = () => {
|
||||
isInputFocused.value = true;
|
||||
};
|
||||
|
||||
const onBlur = () => {
|
||||
isInputFocused.value = false;
|
||||
const onSelectRecentSearch = query => {
|
||||
searchQuery.value = query;
|
||||
onSearch(query);
|
||||
};
|
||||
|
||||
watch(
|
||||
@@ -54,51 +40,30 @@ watch(
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
searchInput.value.focus();
|
||||
document.addEventListener('keydown', handler);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('keydown', handler);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="input-container rounded-xl transition-[border-bottom] duration-[0.2s] ease-[ease-in-out] relative flex items-center py-2 px-4 h-14 gap-2 border border-solid bg-n-alpha-black2"
|
||||
:class="{
|
||||
'border-n-brand': isInputFocused,
|
||||
'border-n-weak': !isInputFocused,
|
||||
}"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<fluent-icon
|
||||
icon="search"
|
||||
class="icon"
|
||||
aria-hidden="true"
|
||||
:class="{
|
||||
'text-n-blue-text': isInputFocused,
|
||||
'text-n-slate-10': !isInputFocused,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
ref="searchInput"
|
||||
type="search"
|
||||
class="reset-base outline-none w-full m-0 bg-transparent border-transparent shadow-none text-n-slate-12 dark:text-n-slate-12 active:border-transparent active:shadow-none hover:border-transparent hover:shadow-none focus:border-transparent focus:shadow-none"
|
||||
:placeholder="$t('SEARCH.INPUT_PLACEHOLDER')"
|
||||
:value="searchQuery"
|
||||
@focus="onFocus"
|
||||
@blur="onBlur"
|
||||
@input="onInput"
|
||||
/>
|
||||
<woot-label
|
||||
:title="$t('SEARCH.PLACEHOLDER_KEYBINDING')"
|
||||
:show-close="false"
|
||||
small
|
||||
class="!m-0 whitespace-nowrap !bg-n-slate-3 dark:!bg-n-solid-3 !border-n-weak dark:!border-n-strong"
|
||||
/>
|
||||
<div class="flex flex-col gap-2">
|
||||
<SearchInput
|
||||
ref="searchInputRef"
|
||||
v-model="searchQuery"
|
||||
@search="onSearch"
|
||||
@select-recent-search="onSelectRecentSearch"
|
||||
>
|
||||
<Policy
|
||||
:permissions="ROLES"
|
||||
:installation-types="[
|
||||
INSTALLATION_TYPES.ENTERPRISE,
|
||||
INSTALLATION_TYPES.CLOUD,
|
||||
]"
|
||||
:feature-flag="FEATURE_FLAGS.ADVANCED_SEARCH"
|
||||
class="w-full"
|
||||
>
|
||||
<SearchFilters
|
||||
v-model="filters"
|
||||
@update-filters="$emit('filterChange', $event)"
|
||||
/>
|
||||
</Policy>
|
||||
</SearchInput>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,125 @@
|
||||
<script setup>
|
||||
import { ref, computed, defineModel } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useToggle } from '@vueuse/core';
|
||||
import { vOnClickOutside } from '@vueuse/components';
|
||||
import { useMapGetter } from 'dashboard/composables/store.js';
|
||||
import { useCamelCase } from 'dashboard/composables/useTransformKeys';
|
||||
import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
|
||||
const props = defineProps({
|
||||
label: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['change']);
|
||||
const modelValue = defineModel({
|
||||
type: [String, Number],
|
||||
default: null,
|
||||
});
|
||||
|
||||
const MENU_ITEM_TYPES = {
|
||||
INBOX: 'inbox',
|
||||
};
|
||||
|
||||
const MENU_ACTIONS = {
|
||||
SELECT: 'select',
|
||||
};
|
||||
|
||||
const { t } = useI18n();
|
||||
const [showDropdown, toggleDropdown] = useToggle();
|
||||
|
||||
const searchQuery = ref('');
|
||||
|
||||
const inboxesList = useMapGetter('inboxes/getInboxes');
|
||||
|
||||
const inboxesSection = computed(() => {
|
||||
const inboxes = inboxesList.value?.map(inbox => {
|
||||
const transformedInbox = useCamelCase(inbox, { deep: true });
|
||||
return {
|
||||
label: transformedInbox.name,
|
||||
value: transformedInbox.id,
|
||||
action: MENU_ACTIONS.SELECT,
|
||||
type: MENU_ITEM_TYPES.INBOX,
|
||||
thumbnail: {
|
||||
name: transformedInbox.name,
|
||||
src: transformedInbox.avatarUrl,
|
||||
},
|
||||
isSelected: modelValue.value === transformedInbox.id,
|
||||
};
|
||||
});
|
||||
|
||||
if (!searchQuery.value) return inboxes;
|
||||
|
||||
return inboxes.filter(inbox =>
|
||||
inbox.label.toLowerCase().includes(searchQuery.value.toLowerCase())
|
||||
);
|
||||
});
|
||||
|
||||
const menuSections = computed(() => {
|
||||
return [
|
||||
{
|
||||
title: t('SEARCH.FILTERS.INBOXES'),
|
||||
items: inboxesSection.value,
|
||||
emptyState: t('SEARCH.FILTERS.NO_INBOXES'),
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
const selectedLabel = computed(() => {
|
||||
if (!modelValue.value) return props.label;
|
||||
|
||||
// Find the selected inbox
|
||||
const inbox = inboxesList.value?.find(i => i.id === modelValue.value);
|
||||
if (inbox) return `${props.label}: ${inbox.name}`;
|
||||
|
||||
return `${props.label}: ${modelValue.value}`;
|
||||
});
|
||||
|
||||
const handleAction = item => {
|
||||
if (modelValue.value === item.value) {
|
||||
modelValue.value = null;
|
||||
} else {
|
||||
modelValue.value = item.value;
|
||||
}
|
||||
toggleDropdown(false);
|
||||
emit('change');
|
||||
};
|
||||
|
||||
const onToggleDropdown = () => {
|
||||
if (!showDropdown.value) {
|
||||
searchQuery.value = '';
|
||||
}
|
||||
toggleDropdown();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-on-click-outside="() => toggleDropdown(false)"
|
||||
class="relative flex items-center group min-w-0 max-w-full"
|
||||
>
|
||||
<Button
|
||||
sm
|
||||
:variant="showDropdown ? 'faded' : 'ghost'"
|
||||
slate
|
||||
:label="selectedLabel"
|
||||
trailing-icon
|
||||
icon="i-lucide-chevron-down"
|
||||
class="!px-2 max-w-full"
|
||||
@click="onToggleDropdown"
|
||||
/>
|
||||
<DropdownMenu
|
||||
v-if="showDropdown"
|
||||
:menu-sections="menuSections"
|
||||
show-search
|
||||
disable-local-filtering
|
||||
class="mt-1 ltr:right-0 rtl:left-0 top-full w-64 max-h-80 overflow-y-auto"
|
||||
@search="searchQuery = $event"
|
||||
@action="handleAction"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,136 @@
|
||||
<script setup>
|
||||
import { ref, useTemplateRef, onMounted, onUnmounted } from 'vue';
|
||||
import { debounce } from '@chatwoot/utils';
|
||||
import RecentSearches from './RecentSearches.vue';
|
||||
|
||||
const emit = defineEmits(['search', 'selectRecentSearch']);
|
||||
|
||||
const searchQuery = defineModel({
|
||||
type: String,
|
||||
default: '',
|
||||
});
|
||||
const isInputFocused = ref(false);
|
||||
const showRecentSearches = ref(false);
|
||||
const searchInput = useTemplateRef('searchInput');
|
||||
const recentSearchesRef = useTemplateRef('recentSearchesRef');
|
||||
|
||||
const handler = e => {
|
||||
if (e.key === '/' && document.activeElement.tagName !== 'INPUT') {
|
||||
e.preventDefault();
|
||||
searchInput.value.focus();
|
||||
} else if (e.key === 'Escape' && document.activeElement.tagName === 'INPUT') {
|
||||
e.preventDefault();
|
||||
searchInput.value.blur();
|
||||
}
|
||||
};
|
||||
|
||||
const debouncedEmit = debounce(
|
||||
value =>
|
||||
emit('search', value.length > 1 || value.match(/^[0-9]+$/) ? value : ''),
|
||||
500
|
||||
);
|
||||
|
||||
const onInput = () => {
|
||||
debouncedEmit(searchQuery.value);
|
||||
|
||||
if (searchQuery.value.trim()) {
|
||||
showRecentSearches.value = false;
|
||||
} else if (isInputFocused.value) {
|
||||
showRecentSearches.value = true;
|
||||
}
|
||||
};
|
||||
|
||||
const onFocus = () => {
|
||||
isInputFocused.value = true;
|
||||
if (!searchQuery.value.trim()) {
|
||||
showRecentSearches.value = true;
|
||||
}
|
||||
};
|
||||
|
||||
const onBlur = () => {
|
||||
isInputFocused.value = false;
|
||||
showRecentSearches.value = false;
|
||||
};
|
||||
|
||||
const onSelectRecentSearch = query => {
|
||||
searchQuery.value = query;
|
||||
emit('selectRecentSearch', query);
|
||||
showRecentSearches.value = false;
|
||||
searchInput.value.focus();
|
||||
};
|
||||
|
||||
const addToRecentSearches = query => {
|
||||
if (recentSearchesRef.value) {
|
||||
recentSearchesRef.value.addRecentSearch(query);
|
||||
}
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
addToRecentSearches,
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
searchInput.value.focus();
|
||||
document.addEventListener('keydown', handler);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('keydown', handler);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="rounded-xl transition-[border-bottom] duration-[0.2s] ease-[ease-in-out] relative flex items-start flex-col border border-solid bg-n-solid-1 divide-y divide-n-strong"
|
||||
:class="{
|
||||
'border-n-brand': isInputFocused,
|
||||
'border-n-strong': !isInputFocused,
|
||||
}"
|
||||
>
|
||||
<div class="flex items-center w-full h-[3.25rem] px-4 gap-2">
|
||||
<div class="flex items-center">
|
||||
<fluent-icon
|
||||
icon="search"
|
||||
class="icon"
|
||||
aria-hidden="true"
|
||||
:class="{
|
||||
'text-n-blue-text': isInputFocused,
|
||||
'text-n-slate-10': !isInputFocused,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
ref="searchInput"
|
||||
v-model="searchQuery"
|
||||
type="search"
|
||||
class="reset-base outline-none w-full m-0 bg-transparent border-transparent shadow-none text-n-slate-12 dark:text-n-slate-12 active:border-transparent active:shadow-none hover:border-transparent hover:shadow-none focus:border-transparent focus:shadow-none placeholder:text-n-slate-10 text-base"
|
||||
:placeholder="$t('SEARCH.INPUT_PLACEHOLDER')"
|
||||
@focus="onFocus"
|
||||
@blur="onBlur"
|
||||
@input="onInput"
|
||||
/>
|
||||
<span class="text-sm text-n-slate-10 flex-shrink-0">
|
||||
{{ $t('SEARCH.PLACEHOLDER_KEYBINDING') }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<slot />
|
||||
|
||||
<div
|
||||
class="transition-all duration-200 ease-out grid overflow-hidden w-full !border-t-0"
|
||||
:class="
|
||||
showRecentSearches
|
||||
? 'grid-rows-[1fr] opacity-100'
|
||||
: 'grid-rows-[0fr] opacity-0'
|
||||
"
|
||||
>
|
||||
<div class="overflow-hidden w-full">
|
||||
<RecentSearches
|
||||
ref="recentSearchesRef"
|
||||
@select-search="onSelectRecentSearch"
|
||||
@clear-all="showRecentSearches = false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,7 +1,10 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import Icon from 'next/icon/Icon.vue';
|
||||
import { frontendURL } from 'dashboard/helper/URLHelper';
|
||||
import { dynamicTime } from 'shared/helpers/timeHelper';
|
||||
import { ARTICLE_STATUSES } from 'dashboard/helper/portalHelper';
|
||||
|
||||
import CardLayout from 'dashboard/components-next/CardLayout.vue';
|
||||
import MessageFormatter from 'shared/helpers/MessageFormatter';
|
||||
|
||||
const props = defineProps({
|
||||
@@ -13,6 +16,8 @@ const props = defineProps({
|
||||
content: { type: String, default: '' },
|
||||
portalSlug: { type: String, required: true },
|
||||
accountId: { type: [String, Number], default: 0 },
|
||||
status: { type: String, default: '' },
|
||||
updatedAt: { type: Number, default: 0 },
|
||||
});
|
||||
|
||||
const MAX_LENGTH = 300;
|
||||
@@ -23,6 +28,11 @@ const navigateTo = computed(() => {
|
||||
);
|
||||
});
|
||||
|
||||
const updatedAtTime = computed(() => {
|
||||
if (!props.updatedAt) return '';
|
||||
return dynamicTime(props.updatedAt);
|
||||
});
|
||||
|
||||
const truncatedContent = computed(() => {
|
||||
if (!props.content) return props.description || '';
|
||||
|
||||
@@ -34,36 +44,62 @@ const truncatedContent = computed(() => {
|
||||
? `${plainText.substring(0, MAX_LENGTH)}...`
|
||||
: plainText;
|
||||
});
|
||||
|
||||
const statusTextColor = computed(() => {
|
||||
switch (props.status) {
|
||||
case ARTICLE_STATUSES.ARCHIVED:
|
||||
return 'text-n-slate-12';
|
||||
case ARTICLE_STATUSES.DRAFT:
|
||||
return 'text-n-amber-11';
|
||||
default:
|
||||
return 'text-n-teal-11';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<router-link
|
||||
:to="navigateTo"
|
||||
class="flex items-start p-2 rounded-xl cursor-pointer hover:bg-n-slate-2"
|
||||
>
|
||||
<div
|
||||
class="flex items-center justify-center w-6 h-6 mt-0.5 rounded bg-n-slate-3"
|
||||
<router-link :to="navigateTo">
|
||||
<CardLayout
|
||||
layout="col"
|
||||
class="[&>div]:justify-start [&>div]:gap-2 [&>div]:px-4 [&>div]:pt-4 [&>div]:pb-5 [&>div]:items-start hover:bg-n-slate-2 dark:hover:bg-n-solid-3"
|
||||
>
|
||||
<Icon icon="i-lucide-library-big" class="text-n-slate-10" />
|
||||
</div>
|
||||
<div class="ltr:ml-2 rtl:mr-2 min-w-0 flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<h5 class="text-sm font-medium truncate min-w-0 text-n-slate-12">
|
||||
{{ title }}
|
||||
</h5>
|
||||
<span
|
||||
v-if="category"
|
||||
class="text-xs font-medium whitespace-nowrap capitalize bg-n-slate-3 px-1 py-0.5 rounded text-n-slate-10"
|
||||
<div class="min-w-0 flex-1 flex flex-col items-start gap-2 w-full">
|
||||
<div class="flex items-center min-w-0 justify-between gap-2 w-full">
|
||||
<div class="flex items-center gap-2">
|
||||
<h5
|
||||
class="text-sm font-medium leading-4 truncate min-w-0 text-n-slate-12"
|
||||
>
|
||||
{{ title }}
|
||||
</h5>
|
||||
<div v-if="category" class="w-px h-4 bg-n-strong mx-2" />
|
||||
<span
|
||||
v-if="category"
|
||||
class="text-xs inline-flex items-center font-medium rounded-md whitespace-nowrap capitalize bg-n-alpha-2 px-1.5 h-6 text-n-slate-12"
|
||||
>
|
||||
{{ category }}
|
||||
</span>
|
||||
<span
|
||||
v-if="status"
|
||||
class="text-xs inline-flex items-center font-medium rounded-md whitespace-nowrap capitalize bg-n-alpha-2 px-2 h-6"
|
||||
:class="statusTextColor"
|
||||
>
|
||||
{{ status }}
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
v-if="updatedAtTime"
|
||||
class="text-sm font-normal min-w-0 truncate text-n-slate-11"
|
||||
>
|
||||
{{ updatedAtTime }}
|
||||
</span>
|
||||
</div>
|
||||
<p
|
||||
v-if="truncatedContent"
|
||||
class="text-sm leading-6 text-n-slate-11 line-clamp-2"
|
||||
>
|
||||
{{ category }}
|
||||
</span>
|
||||
{{ truncatedContent }}
|
||||
</p>
|
||||
</div>
|
||||
<p
|
||||
v-if="truncatedContent"
|
||||
class="mt-1 text-sm text-n-slate-11 line-clamp-2"
|
||||
>
|
||||
{{ truncatedContent }}
|
||||
</p>
|
||||
</div>
|
||||
</CardLayout>
|
||||
</router-link>
|
||||
</template>
|
||||
|
||||
@@ -34,18 +34,19 @@ const accountId = useMapGetter('getCurrentAccountId');
|
||||
:show-title="showTitle"
|
||||
:is-fetching="isFetching"
|
||||
>
|
||||
<ul v-if="articles.length" class="space-y-1.5 list-none">
|
||||
<ul v-if="articles.length" class="space-y-3 list-none">
|
||||
<li v-for="article in articles" :key="article.id">
|
||||
<SearchResultArticleItem
|
||||
:id="article.id"
|
||||
:title="article.title"
|
||||
:description="article.description"
|
||||
:content="article.content"
|
||||
:portal-slug="article.portal_slug"
|
||||
:portal-slug="article.portalSlug"
|
||||
:locale="article.locale"
|
||||
:account-id="accountId"
|
||||
:category="article.category_name"
|
||||
:category="article.categoryName"
|
||||
:status="article.status"
|
||||
:updated-at="article.updatedAt"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -1,8 +1,12 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { frontendURL } from 'dashboard/helper/URLHelper';
|
||||
import countries from 'shared/constants/countries';
|
||||
import { dynamicTime } from 'shared/helpers/timeHelper';
|
||||
|
||||
import CardLayout from 'dashboard/components-next/CardLayout.vue';
|
||||
import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
|
||||
import Flag from 'dashboard/components-next/flag/Flag.vue';
|
||||
|
||||
const props = defineProps({
|
||||
id: {
|
||||
@@ -29,38 +33,122 @@ const props = defineProps({
|
||||
type: [String, Number],
|
||||
default: 0,
|
||||
},
|
||||
additionalAttributes: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
updatedAt: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
|
||||
const navigateTo = computed(() => {
|
||||
return frontendURL(`accounts/${props.accountId}/contacts/${props.id}`);
|
||||
});
|
||||
|
||||
const countriesMap = computed(() => {
|
||||
return countries.reduce((acc, country) => {
|
||||
acc[country.code] = country;
|
||||
acc[country.id] = country;
|
||||
return acc;
|
||||
}, {});
|
||||
});
|
||||
|
||||
const updatedAtTime = computed(() => {
|
||||
if (!props.updatedAt) return '';
|
||||
return dynamicTime(props.updatedAt);
|
||||
});
|
||||
|
||||
const countryDetails = computed(() => {
|
||||
const { country, countryCode, city } = props.additionalAttributes;
|
||||
|
||||
if (!country && !countryCode) return null;
|
||||
|
||||
const activeCountry =
|
||||
countriesMap.value[country] || countriesMap.value[countryCode];
|
||||
|
||||
if (!activeCountry) return null;
|
||||
|
||||
return {
|
||||
countryCode: activeCountry.id,
|
||||
city: city ? `${city},` : null,
|
||||
name: activeCountry.name,
|
||||
};
|
||||
});
|
||||
|
||||
const formattedLocation = computed(() => {
|
||||
if (!countryDetails.value) return '';
|
||||
|
||||
return [countryDetails.value.city, countryDetails.value.name]
|
||||
.filter(Boolean)
|
||||
.join(' ');
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<router-link
|
||||
:to="navigateTo"
|
||||
class="flex items-start p-2 rounded-xl cursor-pointer hover:bg-n-slate-2"
|
||||
>
|
||||
<Avatar
|
||||
:name="name"
|
||||
:src="thumbnail"
|
||||
:size="24"
|
||||
rounded-full
|
||||
class="mt-0.5"
|
||||
/>
|
||||
<div class="ml-2 rtl:mr-2 min-w-0 rtl:ml-0">
|
||||
<h5 class="text-sm name truncate min-w-0 text-n-slate-12">
|
||||
{{ name }}
|
||||
</h5>
|
||||
<p
|
||||
class="grid items-center m-0 gap-1 text-sm grid-cols-[minmax(0,1fr)_auto_auto]"
|
||||
>
|
||||
<span v-if="email" class="truncate text-n-slate-12" :title="email">
|
||||
{{ email }}
|
||||
</span>
|
||||
<span v-if="phone" class="text-n-slate-10">•</span>
|
||||
<span v-if="phone" class="text-n-slate-12">{{ phone }}</span>
|
||||
</p>
|
||||
</div>
|
||||
<router-link :to="navigateTo">
|
||||
<CardLayout
|
||||
layout="row"
|
||||
class="[&>div]:justify-start [&>div]:px-4 [&>div]:py-3 [&>div]:items-start hover:bg-n-slate-2 dark:hover:bg-n-solid-3"
|
||||
>
|
||||
<Avatar
|
||||
:name="name"
|
||||
:src="thumbnail"
|
||||
:size="24"
|
||||
rounded-full
|
||||
class="mt-1 flex-shrink-0"
|
||||
/>
|
||||
<div class="min-w-0 flex flex-col items-start gap-1.5 w-full">
|
||||
<div class="flex items-center min-w-0 justify-between gap-2 w-full">
|
||||
<h5 class="text-sm font-medium truncate min-w-0 text-n-slate-12 py-1">
|
||||
{{ name }}
|
||||
</h5>
|
||||
<span
|
||||
v-if="updatedAtTime"
|
||||
class="text-sm font-normal min-w-0 truncate text-n-slate-11"
|
||||
>
|
||||
{{ $t('SEARCH.UPDATED_AT', { time: updatedAtTime }) }}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="grid items-center gap-3 m-0 text-sm overflow-hidden min-w-0 grid-cols-[minmax(0,max-content)_auto_minmax(0,max-content)_auto_minmax(0,max-content)]"
|
||||
>
|
||||
<span
|
||||
v-if="email"
|
||||
class="truncate text-n-slate-11 min-w-0"
|
||||
:title="email"
|
||||
>
|
||||
{{ email }}
|
||||
</span>
|
||||
|
||||
<div v-if="email && phone" class="w-px h-3 bg-n-slate-6 rounded" />
|
||||
|
||||
<span
|
||||
v-if="phone"
|
||||
:title="phone"
|
||||
class="truncate text-n-slate-11 min-w-0"
|
||||
>
|
||||
{{ phone }}
|
||||
</span>
|
||||
|
||||
<div
|
||||
v-if="(email || phone) && countryDetails"
|
||||
class="w-px h-3 bg-n-slate-6 rounded"
|
||||
/>
|
||||
|
||||
<span
|
||||
v-if="countryDetails"
|
||||
class="truncate text-n-slate-11 flex items-center gap-1 min-w-0"
|
||||
>
|
||||
<Flag
|
||||
:country="countryDetails.countryCode"
|
||||
class="size-3 shrink-0"
|
||||
/>
|
||||
<span class="truncate min-w-0">{{ formattedLocation }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardLayout>
|
||||
</router-link>
|
||||
</template>
|
||||
|
||||
@@ -34,15 +34,17 @@ const accountId = useMapGetter('getCurrentAccountId');
|
||||
:show-title="showTitle"
|
||||
:is-fetching="isFetching"
|
||||
>
|
||||
<ul v-if="contacts.length" class="space-y-1.5 list-none">
|
||||
<ul v-if="contacts.length" class="space-y-3 list-none">
|
||||
<li v-for="contact in contacts" :key="contact.id">
|
||||
<SearchResultContactItem
|
||||
:id="contact.id"
|
||||
:name="contact.name"
|
||||
:email="contact.email"
|
||||
:phone="contact.phone_number"
|
||||
:phone="contact.phoneNumber"
|
||||
:additional-attributes="contact.additionalAttributes"
|
||||
:account-id="accountId"
|
||||
:thumbnail="contact.thumbnail"
|
||||
:updated-at="contact.lastActivityAt"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
import { frontendURL } from 'dashboard/helper/URLHelper.js';
|
||||
import { dynamicTime } from 'shared/helpers/timeHelper';
|
||||
import InboxName from 'dashboard/components/widgets/InboxName.vue';
|
||||
import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
|
||||
import { useInbox } from 'dashboard/composables/useInbox';
|
||||
import { getInboxIconByType } from 'dashboard/helper/inbox';
|
||||
|
||||
import CardLayout from 'dashboard/components-next/CardLayout.vue';
|
||||
import Icon from 'dashboard/components-next/icon/Icon.vue';
|
||||
|
||||
const props = defineProps({
|
||||
id: {
|
||||
@@ -41,6 +43,8 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
const { inbox } = useInbox(props.inbox?.id);
|
||||
|
||||
const navigateTo = computed(() => {
|
||||
const params = {};
|
||||
if (props.messageId) {
|
||||
@@ -52,7 +56,10 @@ const navigateTo = computed(() => {
|
||||
);
|
||||
});
|
||||
|
||||
const createdAtTime = dynamicTime(props.createdAt);
|
||||
const createdAtTime = computed(() => {
|
||||
if (!props.createdAt) return '';
|
||||
return dynamicTime(props.createdAt);
|
||||
});
|
||||
|
||||
const infoItems = computed(() => [
|
||||
{
|
||||
@@ -75,58 +82,76 @@ const infoItems = computed(() => [
|
||||
const visibleInfoItems = computed(() =>
|
||||
infoItems.value.filter(item => item.show)
|
||||
);
|
||||
|
||||
const inboxName = computed(() => props.inbox?.name);
|
||||
|
||||
const inboxIcon = computed(() => {
|
||||
if (!inbox.value) return null;
|
||||
const { channelType, medium } = inbox.value;
|
||||
return getInboxIconByType(channelType, medium);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<router-link
|
||||
:to="navigateTo"
|
||||
class="flex p-2 rounded-xl cursor-pointer hover:bg-n-slate-2"
|
||||
>
|
||||
<Avatar
|
||||
name="chats"
|
||||
:size="24"
|
||||
icon-name="i-lucide-messages-square"
|
||||
class="[&>span]:rounded"
|
||||
/>
|
||||
<div class="flex-grow min-w-0 ml-2">
|
||||
<div class="flex items-center min-w-0 justify-between gap-1 mb-1">
|
||||
<div class="flex">
|
||||
<woot-label
|
||||
class="!bg-n-slate-3 dark:!bg-n-solid-3 !border-n-weak dark:!border-n-strong m-0"
|
||||
:title="`#${id}`"
|
||||
:show-close="false"
|
||||
small
|
||||
/>
|
||||
<div
|
||||
class="flex items-center justify-center h-5 ml-1 rounded bg-n-slate-3 dark:bg-n-solid-3 w-fit rtl:ml-0 rtl:mr-1"
|
||||
>
|
||||
<InboxName
|
||||
:inbox="inbox"
|
||||
class="mx-2 bg-n-slate-3 dark:bg-n-solid-3 text-n-slate-11 dark:text-n-slate-11"
|
||||
<router-link :to="navigateTo">
|
||||
<CardLayout
|
||||
layout="col"
|
||||
class="[&>div]:justify-start [&>div]:gap-2 [&>div]:px-4 [&>div]:py-3 [&>div]:items-start hover:bg-n-slate-2 dark:hover:bg-n-solid-3"
|
||||
>
|
||||
<div
|
||||
class="flex items-center min-w-0 justify-between gap-2 w-full h-7 mb-1"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex items-center gap-1.5 flex-shrink-0">
|
||||
<Icon
|
||||
icon="i-lucide-hash"
|
||||
class="flex-shrink-0 text-n-slate-11 size-4"
|
||||
/>
|
||||
<span class="text-n-slate-12 text-sm leading-4">
|
||||
{{ id }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="inboxName" class="w-px h-3 bg-n-strong" />
|
||||
<div v-if="inboxName" class="flex items-center gap-1.5 flex-shrink-0">
|
||||
<div
|
||||
v-if="inboxIcon"
|
||||
class="flex items-center justify-center flex-shrink-0 rounded-full bg-n-alpha-2 size-4"
|
||||
>
|
||||
<Icon
|
||||
:icon="inboxIcon"
|
||||
class="flex-shrink-0 text-n-slate-11 size-2.5"
|
||||
/>
|
||||
</div>
|
||||
<span class="text-sm leading-4 text-n-slate-12">
|
||||
{{ inboxName }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="text-xs font-normal min-w-0 truncate text-n-slate-11 dark:text-n-slate-11"
|
||||
v-if="createdAtTime"
|
||||
class="text-sm font-normal min-w-0 truncate text-n-slate-11"
|
||||
>
|
||||
{{ createdAtTime }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-x-2 gap-y-1.5">
|
||||
<h5
|
||||
v-for="item in visibleInfoItems"
|
||||
:key="item.label"
|
||||
class="m-0 text-sm min-w-0 text-n-slate-12 dark:text-n-slate-12 truncate"
|
||||
<div class="flex flex-wrap gap-x-2 gap-y-1.5 items-center">
|
||||
<template
|
||||
v-for="(item, index) in visibleInfoItems"
|
||||
:key="`info-${index}`"
|
||||
>
|
||||
<span
|
||||
class="text-xs font-normal text-n-slate-11 dark:text-n-slate-11"
|
||||
>
|
||||
{{ $t(item.label) }}:
|
||||
</span>
|
||||
{{ item.value }}
|
||||
</h5>
|
||||
<h5 class="m-0 text-sm min-w-0 text-n-slate-12 truncate">
|
||||
<span class="text-sm leading-4 font-normal text-n-slate-11">
|
||||
{{ $t(item.label) + ':' }}
|
||||
</span>
|
||||
{{ item.value }}
|
||||
</h5>
|
||||
<div
|
||||
v-if="index < visibleInfoItems.length - 1"
|
||||
class="w-px h-3 bg-n-strong"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
<slot />
|
||||
</div>
|
||||
</CardLayout>
|
||||
</router-link>
|
||||
</template>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script setup>
|
||||
import { defineProps, computed } from 'vue';
|
||||
import { useMapGetter } from 'dashboard/composables/store.js';
|
||||
|
||||
import SearchResultSection from './SearchResultSection.vue';
|
||||
import SearchResultConversationItem from './SearchResultConversationItem.vue';
|
||||
|
||||
@@ -28,7 +29,7 @@ const accountId = useMapGetter('getCurrentAccountId');
|
||||
const conversationsWithSubject = computed(() => {
|
||||
return props.conversations.map(conversation => ({
|
||||
...conversation,
|
||||
mail_subject: conversation.additional_attributes?.mail_subject || '',
|
||||
mailSubject: conversation.additionalAttributes?.mailSubject || '',
|
||||
}));
|
||||
});
|
||||
</script>
|
||||
@@ -41,7 +42,7 @@ const conversationsWithSubject = computed(() => {
|
||||
:show-title="showTitle"
|
||||
:is-fetching="isFetching"
|
||||
>
|
||||
<ul v-if="conversations.length" class="space-y-1.5 list-none">
|
||||
<ul v-if="conversations.length" class="space-y-3 list-none">
|
||||
<li
|
||||
v-for="conversation in conversationsWithSubject"
|
||||
:key="conversation.id"
|
||||
@@ -52,8 +53,8 @@ const conversationsWithSubject = computed(() => {
|
||||
:email="conversation.contact.email"
|
||||
:account-id="accountId"
|
||||
:inbox="conversation.inbox"
|
||||
:created-at="conversation.created_at"
|
||||
:email-subject="conversation.mail_subject"
|
||||
:created-at="conversation.createdAt"
|
||||
:email-subject="conversation.mailSubject"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -0,0 +1,169 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { frontendURL } from 'dashboard/helper/URLHelper.js';
|
||||
import { dynamicTime } from 'shared/helpers/timeHelper';
|
||||
import { getInboxIconByType } from 'dashboard/helper/inbox';
|
||||
import { useInbox } from 'dashboard/composables/useInbox';
|
||||
import { ATTACHMENT_TYPES } from 'dashboard/components-next/message/constants.js';
|
||||
|
||||
import CardLayout from 'dashboard/components-next/CardLayout.vue';
|
||||
import Icon from 'dashboard/components-next/icon/Icon.vue';
|
||||
import FileChip from 'next/message/chips/File.vue';
|
||||
import AudioChip from 'next/message/chips/Audio.vue';
|
||||
import TranscribedText from './TranscribedText.vue';
|
||||
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
inboxId: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
isPrivate: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
accountId: {
|
||||
type: [String, Number],
|
||||
default: '',
|
||||
},
|
||||
createdAt: {
|
||||
type: [String, Date, Number],
|
||||
default: '',
|
||||
},
|
||||
messageId: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
attachments: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const { inbox } = useInbox(props.inboxId);
|
||||
|
||||
const navigateTo = computed(() => {
|
||||
const params = {};
|
||||
if (props.messageId) {
|
||||
params.messageId = props.messageId;
|
||||
}
|
||||
return frontendURL(
|
||||
`accounts/${props.accountId}/conversations/${props.id}`,
|
||||
params
|
||||
);
|
||||
});
|
||||
|
||||
const createdAtTime = computed(() => {
|
||||
if (!props.createdAt) return '';
|
||||
return dynamicTime(props.createdAt);
|
||||
});
|
||||
|
||||
const inboxName = computed(() => inbox.value?.name);
|
||||
|
||||
const inboxIcon = computed(() => {
|
||||
if (!inbox.value) return null;
|
||||
const { channelType, medium } = inbox.value;
|
||||
return getInboxIconByType(channelType, medium);
|
||||
});
|
||||
|
||||
const fileAttachments = computed(() => {
|
||||
return props.attachments.filter(
|
||||
attachment => attachment.fileType !== ATTACHMENT_TYPES.AUDIO
|
||||
);
|
||||
});
|
||||
|
||||
const audioAttachments = computed(() => {
|
||||
return props.attachments.filter(
|
||||
attachment => attachment.fileType === ATTACHMENT_TYPES.AUDIO
|
||||
);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<router-link :to="navigateTo">
|
||||
<CardLayout
|
||||
layout="col"
|
||||
class="[&>div]:justify-start [&>div]:gap-2 [&>div]:px-4 [&>div]:py-3 [&>div]:items-start hover:bg-n-slate-2 dark:hover:bg-n-solid-3"
|
||||
>
|
||||
<div
|
||||
class="flex items-center min-w-0 justify-between gap-2 w-full h-7 mb-1"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex items-center gap-1.5 flex-shrink-0">
|
||||
<Icon
|
||||
icon="i-lucide-hash"
|
||||
class="flex-shrink-0 text-n-slate-11 size-4"
|
||||
/>
|
||||
<span class="text-n-slate-12 text-sm leading-4">
|
||||
{{ id }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="inboxName" class="w-px h-3 bg-n-strong" />
|
||||
<div v-if="inboxName" class="flex items-center gap-1.5 flex-shrink-0">
|
||||
<div
|
||||
v-if="inboxIcon"
|
||||
class="flex items-center justify-center flex-shrink-0 rounded-full bg-n-alpha-2 size-4"
|
||||
>
|
||||
<Icon
|
||||
:icon="inboxIcon"
|
||||
class="flex-shrink-0 text-n-slate-11 size-2.5"
|
||||
/>
|
||||
</div>
|
||||
<span class="text-sm leading-4 text-n-slate-12">
|
||||
{{ inboxName }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="isPrivate" class="w-px h-3 bg-n-strong" />
|
||||
<div
|
||||
v-if="isPrivate"
|
||||
class="flex items-center text-n-amber-11 gap-1.5 flex-shrink-0"
|
||||
>
|
||||
<Icon icon="i-lucide-lock-keyhole" class="flex-shrink-0 size-3.5" />
|
||||
<span class="text-sm leading-4">
|
||||
{{ $t('SEARCH.PRIVATE') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
v-if="createdAtTime"
|
||||
class="text-sm font-normal min-w-0 truncate text-n-slate-11"
|
||||
>
|
||||
{{ createdAtTime }}
|
||||
</span>
|
||||
</div>
|
||||
<slot />
|
||||
<div v-if="audioAttachments.length" class="mt-1.5 space-y-4 w-full">
|
||||
<div
|
||||
v-for="attachment in audioAttachments"
|
||||
:key="attachment.id"
|
||||
class="w-full"
|
||||
>
|
||||
<AudioChip
|
||||
class="bg-n-alpha-2 dark:bg-n-alpha-2 text-n-slate-12"
|
||||
:attachment="attachment"
|
||||
:show-transcribed-text="false"
|
||||
@click.prevent
|
||||
/>
|
||||
<div v-if="attachment.transcribedText" class="pt-2">
|
||||
<TranscribedText :text="attachment.transcribedText" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="fileAttachments.length"
|
||||
class="flex gap-2 flex-wrap items-center mt-1.5"
|
||||
>
|
||||
<FileChip
|
||||
v-for="attachment in fileAttachments"
|
||||
:key="attachment.id"
|
||||
:attachment="attachment"
|
||||
class="!h-8"
|
||||
@click.stop
|
||||
/>
|
||||
</div>
|
||||
</CardLayout>
|
||||
</router-link>
|
||||
</template>
|
||||
@@ -2,7 +2,7 @@
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useMapGetter } from 'dashboard/composables/store.js';
|
||||
|
||||
import SearchResultConversationItem from './SearchResultConversationItem.vue';
|
||||
import SearchResultMessageItem from './SearchResultMessageItem.vue';
|
||||
import SearchResultSection from './SearchResultSection.vue';
|
||||
import MessageContent from './MessageContent.vue';
|
||||
|
||||
@@ -43,21 +43,23 @@ const getName = message => {
|
||||
:show-title="showTitle"
|
||||
:is-fetching="isFetching"
|
||||
>
|
||||
<ul v-if="messages.length" class="space-y-1.5 list-none">
|
||||
<ul v-if="messages.length" class="space-y-3 list-none">
|
||||
<li v-for="message in messages" :key="message.id">
|
||||
<SearchResultConversationItem
|
||||
:id="message.conversation_id"
|
||||
<SearchResultMessageItem
|
||||
:id="message.conversationId"
|
||||
:account-id="accountId"
|
||||
:inbox="message.inbox"
|
||||
:created-at="message.created_at"
|
||||
:inbox-id="message.inboxId"
|
||||
:created-at="message.createdAt"
|
||||
:message-id="message.id"
|
||||
:is-private="message.private"
|
||||
:attachments="message.attachments"
|
||||
>
|
||||
<MessageContent
|
||||
:author="getName(message)"
|
||||
:message="message"
|
||||
:search-term="query"
|
||||
/>
|
||||
</SearchResultConversationItem>
|
||||
</SearchResultMessageItem>
|
||||
</li>
|
||||
</ul>
|
||||
</SearchResultSection>
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
import Icon from 'dashboard/components-next/icon/Icon.vue';
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
@@ -28,9 +30,12 @@ const titleCase = computed(() => props.title.toLowerCase());
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="mx-0 my-2">
|
||||
<div v-if="showTitle" class="sticky top-0 p-2 z-50 mb-0.5 bg-n-background">
|
||||
<h3 class="text-sm text-n-slate-12">{{ title }}</h3>
|
||||
<section class="mx-0 mb-3">
|
||||
<div
|
||||
v-if="showTitle"
|
||||
class="sticky top-0 pt-2 py-3 z-50 bg-gradient-to-b from-n-background from-80% to-transparent mb-3 -mx-1.5 px-1.5"
|
||||
>
|
||||
<h3 class="text-sm text-n-slate-11">{{ title }}</h3>
|
||||
</div>
|
||||
<slot />
|
||||
<woot-loading-state
|
||||
@@ -39,9 +44,12 @@ const titleCase = computed(() => props.title.toLowerCase());
|
||||
/>
|
||||
<div
|
||||
v-if="empty && !isFetching"
|
||||
class="flex items-center justify-center px-4 py-6 m-2 rounded-xl bg-n-slate-2 dark:bg-n-solid-1"
|
||||
class="flex items-start justify-center px-4 py-6 rounded-xl bg-n-slate-2 dark:bg-n-solid-1"
|
||||
>
|
||||
<fluent-icon icon="info" size="16px" class="text-n-slate-11" />
|
||||
<Icon
|
||||
icon="i-lucide-info"
|
||||
class="text-n-slate-11 size-4 flex-shrink-0 mt-[3px]"
|
||||
/>
|
||||
<p class="mx-2 my-0 text-center text-n-slate-11">
|
||||
{{ $t('SEARCH.EMPTY_STATE', { item: titleCase, query }) }}
|
||||
</p>
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import { computed, watch, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import TabBar from 'dashboard/components-next/tabbar/TabBar.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
|
||||
const props = defineProps({
|
||||
tabs: {
|
||||
@@ -14,6 +17,8 @@ const props = defineProps({
|
||||
|
||||
const emit = defineEmits(['tabChange']);
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const activeTab = ref(props.selectedTab);
|
||||
|
||||
watch(
|
||||
@@ -25,24 +30,35 @@ watch(
|
||||
}
|
||||
);
|
||||
|
||||
const onTabChange = index => {
|
||||
const tabBarTabs = computed(() => {
|
||||
return props.tabs.map(tab => ({
|
||||
label: tab.name,
|
||||
count: tab.showBadge ? tab.count : null,
|
||||
}));
|
||||
});
|
||||
|
||||
const onTabChange = selectedTab => {
|
||||
const index = props.tabs.findIndex(tab => tab.name === selectedTab.label);
|
||||
activeTab.value = index;
|
||||
emit('tabChange', props.tabs[index].key);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mt-1 border-b border-n-weak">
|
||||
<woot-tabs :index="activeTab" :border="false" @change="onTabChange">
|
||||
<woot-tabs-item
|
||||
v-for="(item, index) in tabs"
|
||||
:key="item.key"
|
||||
:index="index"
|
||||
:name="item.name"
|
||||
:count="item.count"
|
||||
:show-badge="item.showBadge"
|
||||
is-compact
|
||||
/>
|
||||
</woot-tabs>
|
||||
<div class="flex items-center justify-between mt-7 mb-4">
|
||||
<TabBar
|
||||
:tabs="tabBarTabs"
|
||||
:initial-active-tab="activeTab"
|
||||
@tab-changed="onTabChange"
|
||||
/>
|
||||
|
||||
<Button
|
||||
:label="t('SEARCH.SORT_BY.RELEVANCE')"
|
||||
sm
|
||||
link
|
||||
slate
|
||||
class="hover:!no-underline pointer-events-none lg:inline-flex hidden"
|
||||
icon="i-lucide-arrow-up-down"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -4,6 +4,8 @@ import { useMapGetter, useStore } from 'dashboard/composables/store.js';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { useTrack } from 'dashboard/composables';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useCamelCase } from 'dashboard/composables/useTransformKeys';
|
||||
import { generateURLParams, parseURLParams } from '../helpers/searchHelper';
|
||||
import {
|
||||
ROLES,
|
||||
CONVERSATION_PERMISSIONS,
|
||||
@@ -47,7 +49,7 @@ const articleRecords = useMapGetter('conversationSearch/getArticleRecords');
|
||||
const uiFlags = useMapGetter('conversationSearch/getUIFlags');
|
||||
|
||||
const addTypeToRecords = (records, type) =>
|
||||
records.value.map(item => ({ ...item, type }));
|
||||
records.value.map(item => ({ ...useCamelCase(item, { deep: true }), type }));
|
||||
|
||||
const mappedContacts = computed(() =>
|
||||
addTypeToRecords(contactRecords, 'contact')
|
||||
@@ -64,6 +66,11 @@ const mappedArticles = computed(() =>
|
||||
|
||||
const isSelectedTabAll = computed(() => selectedTab.value === 'all');
|
||||
|
||||
const searchResultSectionClass = computed(() => ({
|
||||
'mt-4': isSelectedTabAll.value,
|
||||
'mt-0.5': !isSelectedTabAll.value,
|
||||
}));
|
||||
|
||||
const sliceRecordsIfAllTab = items =>
|
||||
isSelectedTabAll.value ? items.value.slice(0, 5) : items.value;
|
||||
|
||||
@@ -227,30 +234,55 @@ const showViewMore = computed(() => ({
|
||||
articles: mappedArticles.value?.length > 5 && isSelectedTabAll.value,
|
||||
}));
|
||||
|
||||
const filters = ref({
|
||||
from: null,
|
||||
in: null,
|
||||
dateRange: { type: null, from: null, to: null },
|
||||
});
|
||||
|
||||
const clearSearchResult = () => {
|
||||
pages.value = { contacts: 1, conversations: 1, messages: 1, articles: 1 };
|
||||
store.dispatch('conversationSearch/clearSearchResults');
|
||||
};
|
||||
|
||||
const buildSearchPayload = (basePayload = {}, searchType = 'message') => {
|
||||
const payload = { ...basePayload };
|
||||
|
||||
// Only include filters if advanced search is enabled
|
||||
if (isFeatureFlagEnabled(FEATURE_FLAGS.ADVANCED_SEARCH)) {
|
||||
// Date filters apply to all search types
|
||||
if (filters.value.dateRange.from) {
|
||||
payload.since = filters.value.dateRange.from;
|
||||
}
|
||||
if (filters.value.dateRange.to) {
|
||||
payload.until = filters.value.dateRange.to;
|
||||
}
|
||||
|
||||
// Only messages support 'from' and 'inboxId' filters
|
||||
if (searchType === 'message') {
|
||||
if (filters.value.from) payload.from = filters.value.from;
|
||||
if (filters.value.in) payload.inboxId = filters.value.in;
|
||||
}
|
||||
}
|
||||
|
||||
return payload;
|
||||
};
|
||||
|
||||
const updateURL = () => {
|
||||
// Update route with tab as URL parameter and query as query parameter
|
||||
const params = { accountId: route.params.accountId };
|
||||
const queryParams = {};
|
||||
const params = {
|
||||
accountId: route.params.accountId,
|
||||
...(selectedTab.value !== 'all' && { tab: selectedTab.value }),
|
||||
};
|
||||
|
||||
// Only add tab param if not 'all'
|
||||
if (selectedTab.value !== 'all') {
|
||||
params.tab = selectedTab.value;
|
||||
}
|
||||
const queryParams = {
|
||||
...(query.value?.trim() && { q: query.value.trim() }),
|
||||
...generateURLParams(
|
||||
filters.value,
|
||||
isFeatureFlagEnabled(FEATURE_FLAGS.ADVANCED_SEARCH)
|
||||
),
|
||||
};
|
||||
|
||||
if (query.value?.trim()) {
|
||||
queryParams.q = query.value.trim();
|
||||
}
|
||||
|
||||
router.replace({
|
||||
name: 'search',
|
||||
params,
|
||||
query: queryParams,
|
||||
});
|
||||
router.replace({ name: 'search', params, query: queryParams });
|
||||
};
|
||||
|
||||
const onSearch = q => {
|
||||
@@ -259,7 +291,13 @@ const onSearch = q => {
|
||||
updateURL();
|
||||
if (!q) return;
|
||||
useTrack(CONVERSATION_EVENTS.SEARCH_CONVERSATION);
|
||||
store.dispatch('conversationSearch/fullSearch', { q, page: 1 });
|
||||
|
||||
const searchPayload = buildSearchPayload({ q, page: 1 });
|
||||
store.dispatch('conversationSearch/fullSearch', searchPayload);
|
||||
};
|
||||
|
||||
const onFilterChange = () => {
|
||||
onSearch(query.value);
|
||||
};
|
||||
|
||||
const onBack = () => {
|
||||
@@ -280,12 +318,16 @@ const loadMore = () => {
|
||||
};
|
||||
|
||||
if (uiFlags.value.isFetching || selectedTab.value === 'all') return;
|
||||
|
||||
const tab = selectedTab.value;
|
||||
pages.value[tab] += 1;
|
||||
store.dispatch(SEARCH_ACTIONS[tab], {
|
||||
q: query.value,
|
||||
page: pages.value[tab],
|
||||
});
|
||||
|
||||
const payload = buildSearchPayload(
|
||||
{ q: query.value, page: pages.value[tab] },
|
||||
tab
|
||||
);
|
||||
|
||||
store.dispatch(SEARCH_ACTIONS[tab], payload);
|
||||
};
|
||||
|
||||
const onTabChange = tab => {
|
||||
@@ -295,6 +337,13 @@ const onTabChange = tab => {
|
||||
|
||||
onMounted(() => {
|
||||
store.dispatch('conversationSearch/clearSearchResults');
|
||||
store.dispatch('agents/get');
|
||||
|
||||
const parsedFilters = parseURLParams(
|
||||
route.query,
|
||||
isFeatureFlagEnabled(FEATURE_FLAGS.ADVANCED_SEARCH)
|
||||
);
|
||||
filters.value = parsedFilters;
|
||||
|
||||
// Auto-execute search if query parameter exists
|
||||
if (route.query.q) {
|
||||
@@ -321,9 +370,14 @@ onUnmounted(() => {
|
||||
/>
|
||||
</div>
|
||||
<section class="flex flex-col flex-grow w-full h-full overflow-hidden">
|
||||
<div class="w-full max-w-4xl mx-auto">
|
||||
<div class="w-full max-w-5xl mx-auto z-[60]">
|
||||
<div class="flex flex-col w-full px-4">
|
||||
<SearchHeader :initial-query="query" @search="onSearch" />
|
||||
<SearchHeader
|
||||
v-model:filters="filters"
|
||||
:initial-query="query"
|
||||
@search="onSearch"
|
||||
@filter-change="onFilterChange"
|
||||
/>
|
||||
<SearchTabs
|
||||
v-if="query"
|
||||
:tabs="tabs"
|
||||
@@ -333,7 +387,7 @@ onUnmounted(() => {
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow w-full h-full overflow-y-auto">
|
||||
<div class="w-full max-w-4xl mx-auto px-4 pb-6">
|
||||
<div class="w-full max-w-5xl mx-auto px-4 pb-6">
|
||||
<div v-if="showResultsSection">
|
||||
<Policy
|
||||
:permissions="[...ROLES, CONTACT_PERMISSIONS]"
|
||||
@@ -345,6 +399,7 @@ onUnmounted(() => {
|
||||
:contacts="contacts"
|
||||
:query="query"
|
||||
:show-title="isSelectedTabAll"
|
||||
class="mt-0.5"
|
||||
/>
|
||||
<NextButton
|
||||
v-if="showViewMore.contacts"
|
||||
@@ -367,6 +422,7 @@ onUnmounted(() => {
|
||||
:messages="messages"
|
||||
:query="query"
|
||||
:show-title="isSelectedTabAll"
|
||||
:class="searchResultSectionClass"
|
||||
/>
|
||||
<NextButton
|
||||
v-if="showViewMore.messages"
|
||||
@@ -389,6 +445,7 @@ onUnmounted(() => {
|
||||
:conversations="conversations"
|
||||
:query="query"
|
||||
:show-title="isSelectedTabAll"
|
||||
:class="searchResultSectionClass"
|
||||
/>
|
||||
<NextButton
|
||||
v-if="showViewMore.conversations"
|
||||
@@ -413,6 +470,7 @@ onUnmounted(() => {
|
||||
:articles="articles"
|
||||
:query="query"
|
||||
:show-title="isSelectedTabAll"
|
||||
:class="searchResultSectionClass"
|
||||
/>
|
||||
<NextButton
|
||||
v-if="showViewMore.articles"
|
||||
@@ -425,7 +483,7 @@ onUnmounted(() => {
|
||||
/>
|
||||
</Policy>
|
||||
|
||||
<div v-if="showLoadMore" class="flex justify-center mt-4 mb-6">
|
||||
<div v-if="showLoadMore" class="flex justify-center mt-3 mb-6">
|
||||
<NextButton
|
||||
v-if="!isSelectedTabAll"
|
||||
:label="t(`SEARCH.LOAD_MORE`)"
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
<script setup>
|
||||
import { useExpandableContent } from 'shared/composables/useExpandableContent';
|
||||
|
||||
defineProps({
|
||||
text: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
|
||||
const { contentElement, showReadMore, showReadLess, toggleExpanded } =
|
||||
useExpandableContent({ useResizeObserverForCheck: true });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span class="py-2 text-xs font-medium">
|
||||
{{ $t('SEARCH.TRANSCRIPT') }}
|
||||
</span>
|
||||
<div
|
||||
class="text-n-slate-11 pt-1 text-sm rounded-lg w-full break-words grid items-center"
|
||||
:class="showReadMore ? 'grid-cols-[1fr_auto]' : 'grid-cols-1'"
|
||||
>
|
||||
<div
|
||||
ref="contentElement"
|
||||
class="min-w-0"
|
||||
:class="{ 'overflow-hidden line-clamp-1': showReadMore }"
|
||||
>
|
||||
{{ text }}
|
||||
<button
|
||||
v-if="showReadLess"
|
||||
class="text-sm text-n-slate-11 underline cursor-pointer bg-transparent border-0 p-0 hover:text-n-slate-12 font-medium ltr:ml-0.5 rtl:mr-0.5"
|
||||
@click.prevent.stop="toggleExpanded(false)"
|
||||
>
|
||||
{{ $t('SEARCH.READ_LESS') }}
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
v-if="showReadMore"
|
||||
class="text-sm text-n-slate-11 underline cursor-pointer bg-transparent border-0 p-0 hover:text-n-slate-12 font-medium justify-self-end ltr:ml-0.5 rtl:mr-0.5"
|
||||
@click.prevent.stop="toggleExpanded(true)"
|
||||
>
|
||||
{{ $t('SEARCH.READ_MORE') }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,75 @@
|
||||
import ContactAPI from 'dashboard/api/contacts';
|
||||
|
||||
export const DATE_RANGE_TYPES = {
|
||||
LAST_7_DAYS: 'last_7_days',
|
||||
LAST_30_DAYS: 'last_30_days',
|
||||
LAST_60_DAYS: 'last_60_days',
|
||||
LAST_90_DAYS: 'last_90_days',
|
||||
CUSTOM: 'custom',
|
||||
BETWEEN: 'between',
|
||||
};
|
||||
|
||||
export const generateURLParams = (
|
||||
{ from, in: inboxId, dateRange },
|
||||
isAdvancedSearchEnabled = true
|
||||
) => {
|
||||
const params = {};
|
||||
|
||||
// Only include filter params if advanced search is enabled
|
||||
if (isAdvancedSearchEnabled) {
|
||||
if (from) params.from = from;
|
||||
if (inboxId) params.inbox_id = inboxId;
|
||||
|
||||
if (dateRange?.type) {
|
||||
const { type, from: dateFrom, to: dateTo } = dateRange;
|
||||
params.range = type;
|
||||
|
||||
if (dateFrom) params.since = dateFrom;
|
||||
if (dateTo) params.until = dateTo;
|
||||
}
|
||||
}
|
||||
|
||||
return params;
|
||||
};
|
||||
|
||||
export const parseURLParams = (query, isAdvancedSearchEnabled = true) => {
|
||||
// If advanced search is disabled, return empty filters
|
||||
if (!isAdvancedSearchEnabled) {
|
||||
return {
|
||||
from: null,
|
||||
in: null,
|
||||
dateRange: {
|
||||
type: null,
|
||||
from: null,
|
||||
to: null,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
const { from, inbox_id, since, until, range } = query;
|
||||
|
||||
let type = range;
|
||||
if (!type && (since || until)) {
|
||||
type = DATE_RANGE_TYPES.BETWEEN;
|
||||
}
|
||||
|
||||
return {
|
||||
from: from || null,
|
||||
in: inbox_id ? Number(inbox_id) : null,
|
||||
dateRange: {
|
||||
type,
|
||||
from: since ? Number(since) : null,
|
||||
to: until ? Number(until) : null,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export const fetchContactDetails = async id => {
|
||||
try {
|
||||
const response = await ContactAPI.show(id);
|
||||
return response.data.payload;
|
||||
} catch (error) {
|
||||
// error
|
||||
return null;
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,379 @@
|
||||
import ContactAPI from 'dashboard/api/contacts';
|
||||
import {
|
||||
DATE_RANGE_TYPES,
|
||||
generateURLParams,
|
||||
parseURLParams,
|
||||
fetchContactDetails,
|
||||
} from '../searchHelper';
|
||||
|
||||
// Mock ContactAPI
|
||||
vi.mock('dashboard/api/contacts', () => ({
|
||||
default: {
|
||||
show: vi.fn(),
|
||||
},
|
||||
}));
|
||||
|
||||
describe('#generateURLParams', () => {
|
||||
it('returns empty object when no parameters provided', () => {
|
||||
expect(generateURLParams({})).toEqual({});
|
||||
});
|
||||
|
||||
it('generates params with from parameter', () => {
|
||||
const result = generateURLParams({ from: 'agent:123' });
|
||||
expect(result).toEqual({ from: 'agent:123' });
|
||||
});
|
||||
|
||||
it('generates params with inbox_id parameter', () => {
|
||||
const result = generateURLParams({ in: 456 });
|
||||
expect(result).toEqual({ inbox_id: 456 });
|
||||
});
|
||||
|
||||
it('generates params with all basic parameters', () => {
|
||||
const result = generateURLParams({
|
||||
from: 'contact:789',
|
||||
in: 123,
|
||||
});
|
||||
expect(result).toEqual({
|
||||
from: 'contact:789',
|
||||
inbox_id: 123,
|
||||
});
|
||||
});
|
||||
|
||||
describe('with date range', () => {
|
||||
it('generates params with date range type only', () => {
|
||||
const result = generateURLParams({
|
||||
dateRange: { type: DATE_RANGE_TYPES.LAST_7_DAYS },
|
||||
});
|
||||
expect(result).toEqual({
|
||||
range: 'last_7_days',
|
||||
});
|
||||
});
|
||||
|
||||
it('generates params with BETWEEN date range', () => {
|
||||
const result = generateURLParams({
|
||||
dateRange: {
|
||||
type: DATE_RANGE_TYPES.BETWEEN,
|
||||
from: 1640995200,
|
||||
to: 1672531199,
|
||||
},
|
||||
});
|
||||
expect(result).toEqual({
|
||||
range: 'between',
|
||||
since: 1640995200,
|
||||
until: 1672531199,
|
||||
});
|
||||
});
|
||||
|
||||
it('generates params with CUSTOM date range', () => {
|
||||
const result = generateURLParams({
|
||||
dateRange: {
|
||||
type: DATE_RANGE_TYPES.CUSTOM,
|
||||
from: 1640995200,
|
||||
to: 1672531199,
|
||||
},
|
||||
});
|
||||
expect(result).toEqual({
|
||||
range: 'custom',
|
||||
since: 1640995200,
|
||||
until: 1672531199,
|
||||
});
|
||||
});
|
||||
|
||||
it('handles date range with missing from/to values', () => {
|
||||
const result = generateURLParams({
|
||||
dateRange: {
|
||||
type: DATE_RANGE_TYPES.BETWEEN,
|
||||
from: null,
|
||||
to: undefined,
|
||||
},
|
||||
});
|
||||
expect(result).toEqual({
|
||||
range: 'between',
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('generates params with all parameters combined', () => {
|
||||
const result = generateURLParams({
|
||||
from: 'agent:456',
|
||||
in: 789,
|
||||
dateRange: {
|
||||
type: DATE_RANGE_TYPES.BETWEEN,
|
||||
from: 1640995200,
|
||||
to: 1672531199,
|
||||
},
|
||||
});
|
||||
expect(result).toEqual({
|
||||
from: 'agent:456',
|
||||
inbox_id: 789,
|
||||
range: 'between',
|
||||
since: 1640995200,
|
||||
until: 1672531199,
|
||||
});
|
||||
});
|
||||
|
||||
describe('when advanced search is disabled', () => {
|
||||
it('returns empty object when isAdvancedSearchEnabled is false', () => {
|
||||
const result = generateURLParams(
|
||||
{
|
||||
from: 'agent:123',
|
||||
in: 456,
|
||||
dateRange: {
|
||||
type: DATE_RANGE_TYPES.BETWEEN,
|
||||
from: 1640995200,
|
||||
to: 1672531199,
|
||||
},
|
||||
},
|
||||
false
|
||||
);
|
||||
expect(result).toEqual({});
|
||||
});
|
||||
|
||||
it('strips all filter params when feature flag is disabled', () => {
|
||||
const result = generateURLParams(
|
||||
{
|
||||
from: 'contact:789',
|
||||
in: 123,
|
||||
},
|
||||
false
|
||||
);
|
||||
expect(result).toEqual({});
|
||||
});
|
||||
|
||||
it('strips date range params when feature flag is disabled', () => {
|
||||
const result = generateURLParams(
|
||||
{
|
||||
dateRange: {
|
||||
type: DATE_RANGE_TYPES.LAST_7_DAYS,
|
||||
from: 1640995200,
|
||||
to: 1672531199,
|
||||
},
|
||||
},
|
||||
false
|
||||
);
|
||||
expect(result).toEqual({});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('#parseURLParams', () => {
|
||||
it('returns default values for empty query', () => {
|
||||
const result = parseURLParams({});
|
||||
expect(result).toEqual({
|
||||
from: null,
|
||||
in: null,
|
||||
dateRange: {
|
||||
type: undefined,
|
||||
from: null,
|
||||
to: null,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it('parses from parameter', () => {
|
||||
const result = parseURLParams({ from: 'agent:123' });
|
||||
expect(result).toEqual({
|
||||
from: 'agent:123',
|
||||
in: null,
|
||||
dateRange: {
|
||||
type: undefined,
|
||||
from: null,
|
||||
to: null,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it('parses inbox_id parameter as number', () => {
|
||||
const result = parseURLParams({ inbox_id: '456' });
|
||||
expect(result).toEqual({
|
||||
from: null,
|
||||
in: 456,
|
||||
dateRange: {
|
||||
type: undefined,
|
||||
from: null,
|
||||
to: null,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it('parses explicit range parameter', () => {
|
||||
const result = parseURLParams({
|
||||
range: 'last_7_days',
|
||||
since: '1640995200',
|
||||
until: '1672531199',
|
||||
});
|
||||
expect(result).toEqual({
|
||||
from: null,
|
||||
in: null,
|
||||
dateRange: {
|
||||
type: 'last_7_days',
|
||||
from: 1640995200,
|
||||
to: 1672531199,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
describe('inferred date range types', () => {
|
||||
it('infers BETWEEN type when both since and until are present', () => {
|
||||
const result = parseURLParams({
|
||||
since: '1640995200',
|
||||
until: '1672531199',
|
||||
});
|
||||
expect(result).toEqual({
|
||||
from: null,
|
||||
in: null,
|
||||
dateRange: {
|
||||
type: 'between',
|
||||
from: 1640995200,
|
||||
to: 1672531199,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it('prioritizes explicit range over inferred type', () => {
|
||||
const result = parseURLParams({
|
||||
range: 'custom',
|
||||
since: '1640995200',
|
||||
until: '1672531199',
|
||||
});
|
||||
expect(result).toEqual({
|
||||
from: null,
|
||||
in: null,
|
||||
dateRange: {
|
||||
type: 'custom',
|
||||
from: 1640995200,
|
||||
to: 1672531199,
|
||||
},
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('parses all parameters combined', () => {
|
||||
const result = parseURLParams({
|
||||
from: 'contact:789',
|
||||
inbox_id: '123',
|
||||
range: 'between',
|
||||
since: '1640995200',
|
||||
until: '1672531199',
|
||||
});
|
||||
expect(result).toEqual({
|
||||
from: 'contact:789',
|
||||
in: 123,
|
||||
dateRange: {
|
||||
type: 'between',
|
||||
from: 1640995200,
|
||||
to: 1672531199,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
describe('when advanced search is disabled', () => {
|
||||
it('returns empty filters when isAdvancedSearchEnabled is false', () => {
|
||||
const result = parseURLParams(
|
||||
{
|
||||
from: 'agent:123',
|
||||
inbox_id: '456',
|
||||
range: 'between',
|
||||
since: '1640995200',
|
||||
until: '1672531199',
|
||||
},
|
||||
false
|
||||
);
|
||||
expect(result).toEqual({
|
||||
from: null,
|
||||
in: null,
|
||||
dateRange: {
|
||||
type: null,
|
||||
from: null,
|
||||
to: null,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it('ignores all filter params from URL when feature flag is disabled', () => {
|
||||
const result = parseURLParams(
|
||||
{
|
||||
from: 'contact:789',
|
||||
inbox_id: '123',
|
||||
},
|
||||
false
|
||||
);
|
||||
expect(result).toEqual({
|
||||
from: null,
|
||||
in: null,
|
||||
dateRange: {
|
||||
type: null,
|
||||
from: null,
|
||||
to: null,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it('ignores date range params from URL when feature flag is disabled', () => {
|
||||
const result = parseURLParams(
|
||||
{
|
||||
range: 'last_7_days',
|
||||
since: '1640995200',
|
||||
until: '1672531199',
|
||||
},
|
||||
false
|
||||
);
|
||||
expect(result).toEqual({
|
||||
from: null,
|
||||
in: null,
|
||||
dateRange: {
|
||||
type: null,
|
||||
from: null,
|
||||
to: null,
|
||||
},
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('#fetchContactDetails', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it('returns contact data on successful API call', async () => {
|
||||
const mockContactData = {
|
||||
id: 123,
|
||||
name: 'John Doe',
|
||||
email: 'john@example.com',
|
||||
};
|
||||
|
||||
ContactAPI.show.mockResolvedValue({
|
||||
data: {
|
||||
payload: mockContactData,
|
||||
},
|
||||
});
|
||||
|
||||
const result = await fetchContactDetails(123);
|
||||
expect(result).toEqual(mockContactData);
|
||||
expect(ContactAPI.show).toHaveBeenCalledWith(123);
|
||||
});
|
||||
|
||||
it('returns null on API error', async () => {
|
||||
ContactAPI.show.mockRejectedValue(new Error('API Error'));
|
||||
|
||||
const result = await fetchContactDetails(123);
|
||||
expect(result).toBeNull();
|
||||
expect(ContactAPI.show).toHaveBeenCalledWith(123);
|
||||
});
|
||||
|
||||
it('handles different contact ID types', async () => {
|
||||
const mockContactData = { id: 456, name: 'Jane Doe' };
|
||||
ContactAPI.show.mockResolvedValue({
|
||||
data: { payload: mockContactData },
|
||||
});
|
||||
|
||||
// Test with string ID
|
||||
await fetchContactDetails('456');
|
||||
expect(ContactAPI.show).toHaveBeenCalledWith('456');
|
||||
|
||||
// Test with number ID
|
||||
await fetchContactDetails(456);
|
||||
expect(ContactAPI.show).toHaveBeenCalledWith(456);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user