KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Review changes

Browse source
This commit is contained in:
fayazara 2022-12-14 15:13:30 +05:30
parent ea2f265baa
commit 4ac2b31f42
9 changed files with 98 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/javascript/dashboard/i18n/locale/en/search.json
View file

@ -11,7 +11,9 @@
"CONVERSATIONS": "CONVERSATIONS",
"MESSAGES": "MESSAGES"
},
"EMPTY_STATE": "No results found for this query",
"PLACEHOLDER_KEYBINDING": "/ to focus"
"EMPTY_STATE": "No %{item} found for query '%{query}'",
"PLACEHOLDER_KEYBINDING": "/ to focus",
"INPUT_PLACEHOLDER": "Search message content, contact name, email or phone or conversations",
"BOT_LABEL": "Bot"
}
}

55
app/javascript/dashboard/routes/dashboard/search/components/ReadMore.vue Normal file
View file

@ -0,0 +1,55 @@
<template>
<div class="read-more">
<div ref="content" :class="{ content: applyReadMore }">
<slot />
<woot-button
size="tiny"
variant="smooth"
color-scheme="primary"
class="read-more-button"
>
Read more
</woot-button>
</div>
</div>
</template>
<script>
export default {
props: {
applyReadMore: {
type: Boolean,
default: false,
},
},
};
</script>
<style lang="scss" scoped>
.content {
max-height: 100px;
overflow: hidden;
position: relative;
}
.content::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 100%);
z-index: 4;
}
.read-more-button {
max-width: max-content;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
z-index: 5;
}
</style>

7
app/javascript/dashboard/routes/dashboard/search/components/SearchHeader.vue
View file

@ -8,7 +8,7 @@
<input
ref="searchInput"
type="search"
placeholder="Search message content, contact name, email or phone or conversations"
:placeholder="$t('SEARCH.INPUT_PLACEHOLDER')"
:value="searchQuery"
@input="debounceSearch"
/>
@ -43,7 +43,10 @@ export default {
}, 500);
},
focusSearch(e) {
if (e.key === '/') this.$refs.searchInput.focus();
if (e.key === '/') {
e.preventDefault();
this.$refs.searchInput.focus();
}
},
},
};

5
app/javascript/dashboard/routes/dashboard/search/components/SearchResultContactsList.vue
View file

@ -2,6 +2,7 @@
<search-result-section
:title="$t('SEARCH.SECTION.CONTACTS')"
:empty="!contacts.length"
:query="query"
>
<ul class="search-list">
<li v-for="contact in contacts" :key="contact.id">
@ -24,6 +25,10 @@ export default {
type: Array,
default: () => [],
},
query: {
type: String,
default: '',
},
},
};
</script>

5
app/javascript/dashboard/routes/dashboard/search/components/SearchResultConversationsList.vue
View file

@ -2,6 +2,7 @@
<search-result-section
:title="$t('SEARCH.SECTION.CONVERSATIONS')"
:empty="!conversations.length"
:query="query"
>
<ul class="search-list">
<li v-for="conversation in conversations" :key="conversation.id">
@ -24,6 +25,10 @@ export default {
type: Array,
default: () => [],
},
query: {
type: String,
default: '',
},
},
};
</script>

4
app/javascript/dashboard/routes/dashboard/search/components/SearchResultMessageItem.vue
View file

@ -39,12 +39,12 @@ export default {
getThumbnail() {
return this.message.sender && this.message.sender.thumbnail
? this.message.sender.thumbnail
: '';
: this.$t('SEARCH.BOT_LABEL');
},
getName() {
return this.message && this.message.sender && this.message.sender.name
? this.message.sender.name
: '';
: this.$t('SEARCH.BOT_LABEL');
},
},
};

5
app/javascript/dashboard/routes/dashboard/search/components/SearchResultMessagesList.vue
View file

@ -2,6 +2,7 @@
<search-result-section
:title="$t('SEARCH.SECTION.MESSAGES')"
:empty="!messages.length"
:query="query"
>
<ul class="search-list">
<li v-for="message in messages" :key="message.id">
@ -24,6 +25,10 @@ export default {
type: Array,
default: () => [],
},
query: {
type: String,
default: '',
},
},
};
</script>

17
app/javascript/dashboard/routes/dashboard/search/components/SearchResultSection.vue
View file

@ -5,9 +5,9 @@
</div>
<slot />
<div v-if="empty" class="empty">
<fluent-icon icon="info" size="32px" class="icon" />
<fluent-icon icon="info" size="24px" class="icon" />
<p class="empty-state__text">
{{ $t('SEARCH.EMPTY_STATE') }}
{{ $t('SEARCH.EMPTY_STATE', { item: titleCase, query }) }}
</p>
</div>
</section>
@ -24,6 +24,15 @@ export default {
type: Boolean,
default: false,
},
query: {
type: String,
default: '',
},
},
computed: {
titleCase() {
return this.title.toLowerCase();
},
},
};
</script>
@ -43,13 +52,13 @@ export default {
z-index: 50;
border-bottom-width: 1px;
border-top-width: 1px;
border-color: #dbdbdb;
border-color: var(--s-100);
border-style: solid;
border-left: 0;
border-right: 0;
p {
font-size: var(--font-size-small);
color: var(--b-600);
color: var(--s-500);
margin: 0;
}
}

4
app/javascript/dashboard/routes/dashboard/search/components/SearchView.vue
View file

@ -11,14 +11,17 @@
<search-result-contacts-list
v-if="filterContacts"
:contacts="contacts"
:query="query"
/>
<search-result-messages-list
v-if="filterMessages"
:messages="messages"
:query="query"
/>
<search-result-conversations-list
v-if="filterConversations"
:conversations="conversations"
:query="query"
/>
</div>
</div>
@ -122,6 +125,7 @@ export default {
},
methods: {
search(q) {
this.query = q;
this.$store.dispatch('conversationSearch/fullSearch', { q });
},
},