channels/twitter style search terms
This commit is contained in:
parent
fb99b5cb08
commit
41c26ea736
8 changed files with 107 additions and 82 deletions
|
@ -121,8 +121,8 @@ class Index extends App.ControllerContent
|
||||||
channel = App.Channel.find(id)
|
channel = App.Channel.find(id)
|
||||||
content = $( App.view('twitter/account_edit')(channel: channel) )
|
content = $( App.view('twitter/account_edit')(channel: channel) )
|
||||||
|
|
||||||
groupSelection = (selected_id, el, prefix) ->
|
createGroupSelection = (selected_id, prefix) ->
|
||||||
selection = App.UiElement.select.render(
|
return App.UiElement.select.render(
|
||||||
name: "#{prefix}::group_id"
|
name: "#{prefix}::group_id"
|
||||||
multiple: false
|
multiple: false
|
||||||
limit: 100
|
limit: 100
|
||||||
|
@ -130,30 +130,46 @@ class Index extends App.ControllerContent
|
||||||
relation: 'Group'
|
relation: 'Group'
|
||||||
nulloption: true
|
nulloption: true
|
||||||
default: selected_id
|
default: selected_id
|
||||||
|
class: 'form-control--small'
|
||||||
)
|
)
|
||||||
el.find('.js-groups').html(selection)
|
|
||||||
|
|
||||||
placeholderAdd = (value = '', group_id) ->
|
addSearchTerm = () =>
|
||||||
placeholder = content.find('.js-searchTermPlaceholder').clone()
|
@searchTerms.push
|
||||||
placeholder.removeClass('hidden').removeClass('js-searchTermPlaceholder')
|
term: ""
|
||||||
placeholder.find('input').val(value)
|
group_id: ""
|
||||||
placeholder.find('input').attr('name', 'search::term')
|
renderSearchTerms()
|
||||||
groupSelection(group_id, placeholder, 'search')
|
content.find('.js-searchTermList [name="search::term"]').last().focus()
|
||||||
content.find('.js-searchTermList').append(placeholder)
|
|
||||||
|
removeSearchTerm = (event) =>
|
||||||
|
index = $(event.currentTarget).attr('data-index')
|
||||||
|
@searchTerms.splice(index, 1)
|
||||||
|
renderSearchTerms()
|
||||||
|
|
||||||
|
renderSearchTerms = () =>
|
||||||
|
return if !@searchTerms
|
||||||
|
|
||||||
|
content.find('.js-searchTermList').empty()
|
||||||
|
|
||||||
|
for item, i in @searchTerms
|
||||||
|
content.find('.js-searchTermList').append App.view('twitter/search_term')
|
||||||
|
term: item.term
|
||||||
|
index: i
|
||||||
|
|
||||||
|
select = createGroupSelection(item.group_id, 'search')
|
||||||
|
content.find(".js-termGroup[data-index=\"#{i}\"]").replaceWith select
|
||||||
|
|
||||||
if channel.options && channel.options.sync && channel.options.sync.search
|
if channel.options && channel.options.sync && channel.options.sync.search
|
||||||
for item in channel.options.sync.search
|
@searchTerms = channel.options.sync.search
|
||||||
placeholderAdd(item.term, item.group_id, 'search')
|
else
|
||||||
|
@searchTerms = []
|
||||||
|
|
||||||
content.find('.js-searchTermAdd').on('click', ->
|
renderSearchTerms()
|
||||||
placeholderAdd('', '')
|
|
||||||
)
|
|
||||||
content.find('.js-searchTerm').on('click', '.js-searchTermRemove',(e) ->
|
|
||||||
$(e.target).closest('.js-searchTermItem').remove()
|
|
||||||
)
|
|
||||||
|
|
||||||
groupSelection(channel.options.sync.mentions.group_id, content.find('.js-mention'), 'mentions')
|
content.find('.js-searchTermAdd').click(addSearchTerm)
|
||||||
groupSelection(channel.options.sync.direct_messages.group_id, content.find('.js-directMessage'), 'direct_messages')
|
content.find('.js-searchTermList').on('click', '.js-searchTermRemove', removeSearchTerm)
|
||||||
|
|
||||||
|
content.find('.js-mentionsGroup').replaceWith createGroupSelection(channel.options.sync.mentions.group_id, 'mentions')
|
||||||
|
content.find('.js-directMessagesGroup').replaceWith createGroupSelection(channel.options.sync.direct_messages.group_id, 'direct_messages')
|
||||||
|
|
||||||
modal = new App.ControllerModal(
|
modal = new App.ControllerModal(
|
||||||
head: 'Twitter Account'
|
head: 'Twitter Account'
|
||||||
|
|
|
@ -16,27 +16,25 @@
|
||||||
<%- @Icon('checkbox-checked', 'icon-checked') %>
|
<%- @Icon('checkbox-checked', 'icon-checked') %>
|
||||||
</label>
|
</label>
|
||||||
<td><%- @Tdate(day) %>
|
<td><%- @Tdate(day) %>
|
||||||
<td><input class="form-control form-control--small js-summary <% if !meta.active: %>is-disabled<% end %>" type="text" name="public_holidays::<%= day %>::summary" value="<%= meta.summary %>" required/>
|
<td class="settings-list-control-cell"><input class="form-control form-control--small js-summary <% if !meta.active: %>is-disabled<% end %>" type="text" name="public_holidays::<%= day %>::summary" value="<%= meta.summary %>" required/>
|
||||||
<td>
|
<td class="settings-list-row-control">
|
||||||
<div class="settings-list-rowControls">
|
<% if !meta.feed: %>
|
||||||
<% if !meta.feed: %>
|
<div class="btn btn--text js-remove">
|
||||||
<div class="btn btn--text js-remove">
|
<%- @Icon('trash') %> <%- @T('Remove') %>
|
||||||
<%- @Icon('trash') %> <%- @T('Remove') %>
|
</div>
|
||||||
</div>
|
<% end %>
|
||||||
<% end %>
|
|
||||||
</div>
|
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
||||||
<tr class="settings-list-controlRow">
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<td class="js-datePicker">
|
<td class="settings-list-control-cell js-datePicker">
|
||||||
<!-- not supported right now by ff
|
<!-- not supported right now by ff
|
||||||
<input class="form-control form-control--small" type="date" placeholder="<%- @T('Date') %>"/>
|
<input class="form-control form-control--small" type="date" placeholder="<%- @T('Date') %>"/>
|
||||||
-->
|
-->
|
||||||
<td>
|
<td class="settings-list-control-cell">
|
||||||
<input class="form-control form-control--small js-summary" type="text" placeholder="<%- @T('Description') %>"/>
|
<input class="form-control form-control--small js-summary" type="text" placeholder="<%- @T('Description') %>"/>
|
||||||
<td>
|
<td class="settings-list-row-control">
|
||||||
<div class="btn btn--text js-add">
|
<div class="btn btn--text btn--create js-add">
|
||||||
<%- @Icon('plus-small') %> <%- @T('Add') %>
|
<%- @Icon('plus-small') %> <%- @T('Add') %>
|
||||||
</div>
|
</div>
|
||||||
</tbody>
|
</tbody>
|
||||||
|
|
|
@ -7,9 +7,7 @@
|
||||||
</label>
|
</label>
|
||||||
<td><%- @Tdate(@placeholderDate) %>
|
<td><%- @Tdate(@placeholderDate) %>
|
||||||
<td><input class="form-control form-control--small js-summary" type="text" name="<%= @placeholderSummary %>" value="<%= @placeholderSummary %>" required/>
|
<td><input class="form-control form-control--small js-summary" type="text" name="<%= @placeholderSummary %>" value="<%= @placeholderSummary %>" required/>
|
||||||
<td>
|
<td class="settings-list-row-control">
|
||||||
<div class="settings-list-rowControls">
|
<div class="btn btn--text js-remove">
|
||||||
<div class="btn btn--text js-remove">
|
<%- @Icon('trash') %> <%- @T('Remove') %>
|
||||||
<%- @Icon('trash') %> <%- @T('Remove') %>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
|
@ -27,11 +27,9 @@
|
||||||
<label class="inline-label">
|
<label class="inline-label">
|
||||||
<%= chat.max_queue %>
|
<%= chat.max_queue %>
|
||||||
</label>
|
</label>
|
||||||
<td>
|
<td class="settings-list-row-control">
|
||||||
<div class="settings-list-rowControls">
|
<div class="btn btn--text js-remove">
|
||||||
<div class="btn btn--text js-remove">
|
<%- @Icon('trash') %> <%- @T('Remove') %>
|
||||||
<%- @Icon('trash') %> <%- @T('Remove') %>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<% end %>
|
<% end %>
|
||||||
<tr>
|
<tr>
|
||||||
|
|
|
@ -3,30 +3,32 @@
|
||||||
|
|
||||||
<h3><%- @T('Search Terms') %></h3>
|
<h3><%- @T('Search Terms') %></h3>
|
||||||
<p class="description"><%- @T('Tweets containing search terms are automatically turned into tickets.') %></p>
|
<p class="description"><%- @T('Tweets containing search terms are automatically turned into tickets.') %></p>
|
||||||
<div class="js-searchTerm">
|
|
||||||
<div class="js-searchTermItem js-searchTermPlaceholder hidden">
|
|
||||||
<input name="" value=""> -> <div class="js-groups"></div>
|
|
||||||
<div class="btn btn--text js-searchTermRemove">
|
|
||||||
<%- @Icon('trash') %> <%- @T('Remove') %>
|
|
||||||
</div>
|
|
||||||
<hr>
|
|
||||||
</div>
|
|
||||||
<div class="js-searchTermList"></div>
|
|
||||||
<div class="btn btn--text js-searchTermAdd">
|
|
||||||
<%- @Icon('plus-small') %> <%- @T('Add') %>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="js-mention">
|
<table class="settings-list">
|
||||||
<h3><%- @T('Mentions Group') %></h3>
|
<thead>
|
||||||
<p class="description"><%- @T('Choose which group %s will get added to.', 'mentions') %></p>
|
<tr>
|
||||||
<div class="js-groups"></div>
|
<th><%- @T('Search Term') %>
|
||||||
</div>
|
<th><%- @T('Group') %>
|
||||||
|
<th><%- @T('Action') %>
|
||||||
|
</thead>
|
||||||
|
<tbody class="js-searchTermList">
|
||||||
|
<tr>
|
||||||
|
<td colspan="3">
|
||||||
|
<%- @T('Empty') %>
|
||||||
|
</tbody>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<td colspan="3" class="settings-list-action-cell js-searchTermAdd">
|
||||||
|
<%- @Icon('plus-small') %>
|
||||||
|
</tfoot>
|
||||||
|
</table>
|
||||||
|
|
||||||
<div class="js-directMessage">
|
<h3><%- @T('Mentions Group') %></h3>
|
||||||
<h3><%- @T('Direct Messages Group') %></h3>
|
<p class="description"><%- @T('Choose which group %s will get added to.', 'mentions') %></p>
|
||||||
<p class="description"><%- @T('Choose which group %s will get added to.', 'direct messages') %></p>
|
<div class="js-mentionsGroup"></div>
|
||||||
<div class="js-groups"></div>
|
|
||||||
</div>
|
<h3><%- @T('Direct Messages Group') %></h3>
|
||||||
|
<p class="description"><%- @T('Choose which group %s will get added to.', 'direct messages') %></p>
|
||||||
|
<div class="js-directMessagesGroup"></div>
|
||||||
|
|
||||||
</fieldset>
|
</fieldset>
|
|
@ -0,0 +1,7 @@
|
||||||
|
<tr>
|
||||||
|
<td class="settings-list-control-cell"><input name="search::term" value="<%= @term %>" class="form-control form-control--small">
|
||||||
|
<td class="settings-list-control-cell"><div class="js-termGroup" data-index="<%= @index %>"></div>
|
||||||
|
<td class="settings-list-row-control">
|
||||||
|
<div class="btn btn--text js-searchTermRemove" data-index="<%= @index %>">
|
||||||
|
<%- @Icon('trash') %> <%- @T('Remove') %>
|
||||||
|
</div>
|
|
@ -317,7 +317,7 @@ pre code.hljs {
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
margin-top: -1px; // more negative margin top looks bad on the btn--quad plus in overviews
|
margin-top: -3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.btn--icon--last .icon {
|
&.btn--icon--last .icon {
|
||||||
|
@ -424,6 +424,7 @@ pre code.hljs {
|
||||||
}
|
}
|
||||||
|
|
||||||
&.btn--positive,
|
&.btn--positive,
|
||||||
|
&.btn--create,
|
||||||
&.btn--success {
|
&.btn--success {
|
||||||
color: white;
|
color: white;
|
||||||
background: hsl(145,51%,45%);
|
background: hsl(145,51%,45%);
|
||||||
|
@ -441,6 +442,10 @@ pre code.hljs {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.btn--text {
|
||||||
|
color: $supergood-color;
|
||||||
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
fill: white;
|
fill: white;
|
||||||
}
|
}
|
||||||
|
@ -521,6 +526,10 @@ pre code.hljs {
|
||||||
|
|
||||||
&.btn--quad {
|
&.btn--quad {
|
||||||
padding: 10px 12px 9px;
|
padding: 10px 12px 9px;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
margin-top: -1px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.btn--split--first {
|
&.btn--split--first {
|
||||||
|
@ -6808,20 +6817,13 @@ output {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn.btn--text:not(.btn--secondary) {
|
|
||||||
color: hsl(60,1%,61%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn .icon {
|
|
||||||
fill: hsl(60,1%,61%);
|
|
||||||
}
|
|
||||||
|
|
||||||
th:not(:last-child),
|
th:not(:last-child),
|
||||||
td:not(:last-child) {
|
td:not(:last-child) {
|
||||||
border-right: none;
|
border-right: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
tr:not(:last-child) td {
|
tr:not(:last-child) td,
|
||||||
|
& > tbody:not(:last-child) tr td {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -6838,11 +6840,13 @@ output {
|
||||||
border-top-right-radius: 4px;
|
border-top-right-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
& > tbody > tr:last-child > td:first-child {
|
& > tbody:last-child > tr:last-child > td:first-child,
|
||||||
|
& > tfoot:last-child > tr:last-child > td:first-child {
|
||||||
border-bottom-left-radius: 4px;
|
border-bottom-left-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
& > tbody > tr:last-child > td:last-child {
|
& > tbody:last-child > tr:last-child > td:last-child,
|
||||||
|
& > tfoot:last-child > tr:last-child > td:last-child {
|
||||||
border-bottom-right-radius: 4px;
|
border-bottom-right-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -6870,9 +6874,11 @@ output {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings-list-controlRow {
|
.settings-list-control-cell {
|
||||||
td {
|
padding: 5px;
|
||||||
padding: 5px;
|
|
||||||
|
& ~ .settings-list-row-control {
|
||||||
|
padding-bottom: 7px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Binary file not shown.
Loading…
Reference in a new issue