diff --git a/app/assets/stylesheets/chat.scss b/app/assets/stylesheets/chat.scss index 256c8f954..83123aae8 100644 --- a/app/assets/stylesheets/chat.scss +++ b/app/assets/stylesheets/chat.scss @@ -105,6 +105,26 @@ } } +.chat__channeltypefilter{ + padding: 3px 0px 3px; +} + +.chat__channeltypefilterbutton{ + background: transparent; + border: 0px; + font-size: 14px; + padding: 4px 8px 2px; + font-family: $monospace; + border-top-left-radius: 3px; + border-top-right-radius: 3px; + display: inline-block; + border-bottom: 1px solid $light-medium-gray; +} + +.chat__channeltypefilterbutton--active { + background: lighten($green, 18%); +} + .chat_chatconfig{ position: absolute; bottom: 0px; @@ -405,7 +425,7 @@ } .chatchannels__channelslist { - padding: 10px 0; + padding: 3px 0 10px; flex-grow: 1; overflow: scroll; padding-bottom: 25px; diff --git a/app/javascript/chat/actions.js b/app/javascript/chat/actions.js index 8d370bb46..365237747 100644 --- a/app/javascript/chat/actions.js +++ b/app/javascript/chat/actions.js @@ -72,13 +72,18 @@ export function conductModeration( .catch(failureCb); } -export function getChannels(query,retrievalID, props, paginationNumber, successCb, failureCb) { +export function getChannels(query,retrievalID, props, paginationNumber, additionalFilters, successCb, failureCb) { const client = algoliasearch(props.algoliaId, props.algoliaKey); const index = client.initIndex(props.algoliaIndex); +<<<<<<< HEAD + let filters = {...{ +======= index.search(query,{ +>>>>>>> b8d2c0033e7046bb5e13d456f89a2a6f328c209a hitsPerPage: 30 + paginationNumber, page: paginationNumber - }) + }, ...additionalFilters}; + index.search(query, filters) .then(function(content) { let channels = content.hits if (retrievalID === null || content.hits.filter(e => e.id === retrievalID).length === 1) { diff --git a/app/javascript/chat/chat.jsx b/app/javascript/chat/chat.jsx index 2a8b09023..3d92dd9ba 100644 --- a/app/javascript/chat/chat.jsx +++ b/app/javascript/chat/chat.jsx @@ -28,6 +28,7 @@ export default class Chat extends Component { showAlert: false, chatChannels, filterQuery: '', + channelTypeFilter: 'all', channelsLoaded: false, channelPaginationNum: 0, fetchingPaginatedChannels: false, @@ -67,7 +68,8 @@ export default class Chat extends Component { notificationsPermission: getNotificationState(), }); if (this.state.showChannelsList) { - getChannels('', this.state.activeChannelId, this.props, this.state.channelPaginationNum, this.loadChannels); + const filters = this.state.channelTypeFilter === 'all' ? {} : {filters: 'channel_type:'+this.state.channelTypeFilter}; + getChannels('', this.state.activeChannelId, this.props, this.state.channelPaginationNum, filters, this.loadChannels); } if (!this.state.isMobileDevice) { document.getElementById("messageform").focus(); @@ -301,11 +303,13 @@ export default class Chat extends Component { const target = e.target; if((target.scrollTop + target.offsetHeight + 1800) > target.scrollHeight) { this.setState({fetchingPaginatedChannels: true}) + const filters = this.state.channelTypeFilter === 'all' ? {} : {filters: 'channel_type:'+this.state.channelTypeFilter}; getChannels( this.state.filterQuery, this.state.activeChannelId, this.props, this.state.channelPaginationNum, + filters, this.loadPaginatedChannels); } } @@ -472,6 +476,14 @@ export default class Chat extends Component { this.setState({ chatChannels: newChannelsObj }); }; + triggerChannelTypeFilter = e => { + const type = e.target.dataset.channelType; + this.setState({channelTypeFilter: type}) + const filters = type === 'all' ? {} : {filters: 'channel_type:'+type}; + console.log(filters) + getChannels(this.state.filterQuery, null, this.props, 0, filters, this.loadChannels); + } + handleFailure = err => { console.error(err); }; @@ -505,7 +517,8 @@ export default class Chat extends Component { }; triggerChannelFilter = e => { - getChannels(e.target.value, null, this.props, 0, this.loadChannels); + const filters = this.state.channelTypeFilter === 'all' ? {} : {filters: 'channel_type:'+this.state.channelTypeFilter}; + getChannels(e.target.value, null, this.props, 0, filters, this.loadChannels); } toggleExpand = () => { @@ -530,6 +543,17 @@ export default class Chat extends Component { {notificationsButton} +
+ + + +