Verified Commit 7628460f authored by Kaspar Vollenweider's avatar Kaspar Vollenweider
Browse files

new autocomplete search without autocomplete_rails gem

parent d097e213
$(() => {
$('input[data-autocomplete]').each((_index, input) => {
$(input).autocomplete({
source: $(input).data('autocomplete'),
close: handleCloseAutosuggest,
focus: handleAutosuggestFocus,
})
// $(() => {
// $('input[data-autocomplete]').each((_index, input) => {
// $(input).autocomplete({
// source: $(input).data('autocomplete'),
// close: handleCloseAutosuggest,
// focus: handleAutosuggestFocus,
// })
// Select all text in input, for easier deleting of all content if desired
$(input).on('focus', ({ target }) => $(target).select())
})
})
// // Select all text in input, for easier deleting of all content if desired
// $(input).on('focus', ({ target }) => $(target).select())
// })
// })
const handleCloseAutosuggest = ({ target }) => {
// if autocomplete placed value in field and closed submit the form
......
/**
* Autocomplete init for https://github.com/devbridge/jQuery-Autocomplete search autocompletes
* Autocomplete init for search autocompletes
*
* https://github.com/devbridge/jQuery-Autocomplete
*/
$(() => {
$('.search-field')
$('.search-field-autocomplete').each((_index, field) => {
const searchField = $(field)
const { autocomplete } = searchField.data()
const delimitor = autocomplete.includes('?') ? '&' : '?'
const baseUrl = `${autocomplete}${delimitor}term=`
searchField.devbridgeAutocomplete({
minChars: 2,
groupBy: 'category',
lookup: (query, done) => {
$.get(baseUrl + query, (suggestions) => done({ suggestions }), 'json')
},
onSelect: () => searchField.closest('form').trigger('submit'),
})
})
})
......@@ -12,50 +12,6 @@ fieldset {
}
}
.li-search-form {
padding: 0 5px 5px;
form {
display: flex;
width: 100%;
}
.search-field {
border: 1px solid $input-border;
border-radius: 4px 0 0 4px;
color: $gray;
display: inline-block;
flex: 0 0 80%;
font-size: 12px;
line-height: 1.4;
outline: none;
padding: 6px 12px;
&:focus {
@extend .form-control, :focus;
}
}
.search-submit {
background-color: $btn-default-bg;
border: 1px solid $btn-default-border;
border-radius: 0 4px 4px 0;
border-width: 1px 1px 1px 0;
color: $btn-default-color;
flex: 0 0 20%;
&:hover {
@extend .btn, :hover;
@extend .btn-default, :hover;
}
&:active {
@extend .btn-default, :active;
@extend .btn, :active;
}
}
}
.field-wrapper-inline {
display: inline-block;
margin: 5px;
......
li.search-form {
padding: 0 5px 5px;
position: relative;
z-index: 50;
form {
display: flex;
width: 100%;
}
.search-field-autocomplete {
border: 1px solid $input-border;
border-radius: 4px 0 0 4px;
color: $gray;
display: block;
flex: 0 0 80%;
font-size: 12px;
line-height: 1.4;
outline: none;
padding: 6px 12px;
}
input[type='submit'] {
background-color: $btn-default-bg;
border: 1px solid $btn-default-border;
border-radius: 0 4px 4px 0;
border-width: 1px 1px 1px 0;
color: $btn-default-color;
display: block;
flex: 0 0 20%;
}
}
.autocomplete-suggestions {
background: #fff;
border: 1px solid #999;
border-radius: 0 0 4px 4px;
overflow: auto;
}
.autocomplete-suggestion {
font-size: 12px;
line-height: 1.4;
overflow: hidden;
padding: 6px 12px 6px 15px;
white-space: nowrap;
}
.autocomplete-selected {
background: #c9c9c9;
}
.autocomplete-suggestions strong {
color: #3583d1;
font-weight: normal;
}
.autocomplete-group {
color: #666;
font-style: italic;
font-weight: bold;
padding: 6px 12px 6px 5px;
}
.autocomplete-group strong {
border-bottom: 1px solid #666;
display: block;
}
......@@ -30,6 +30,7 @@ class AssignmentsController < ApplicationController
def volunteer_search
authorize Assignment
@q = policy_scope(Assignment).ransack volunteer_contact_full_name_cont: params[:term]
@q.sorts = ['period_end desc', 'period_start desc']
@assignments = @q.result distinct: true
respond_to do |format|
format.json
......@@ -39,6 +40,7 @@ class AssignmentsController < ApplicationController
def client_search
authorize Assignment
@q = policy_scope(Assignment).ransack client_contact_full_name_cont: params[:term]
@q.sorts = ['period_end desc', 'period_start desc']
@assignments = @q.result distinct: true
respond_to do |format|
format.json
......
......@@ -24,6 +24,7 @@ class ClientsController < ApplicationController
def search
authorize Client
@q = policy_scope(Client).ransack contact_full_name_cont: params[:term]
@q.sorts = ['acceptance asc']
@clients = @q.result distinct: true
respond_to do |format|
format.json
......
......@@ -18,6 +18,7 @@ class GroupOffersController < ApplicationController
def search
authorize GroupOffer
@q = policy_scope(GroupOffer).ransack search_volunteer_cont: params[:term]
@q.sorts = ['active desc', 'created_at desc']
@group_offers = @q.result distinct: true
respond_to do |format|
format.json
......@@ -39,8 +40,9 @@ class GroupOffersController < ApplicationController
end
def search_volunteer
@q = policy_scope(Volunteer.candidates_for_group_offer(@group_offer))
.ransack(contact_full_name_cont: params[:term])
@q = policy_scope(
Volunteer.candidates_for_group_offer(@group_offer)
).ransack(contact_full_name_cont: params[:term])
@volunteers = @q.result distinct: true
respond_to do |format|
format.json
......
......@@ -17,6 +17,7 @@ class UsersController < ApplicationController
def search
authorize User
@q = User.ransack full_name_cont: params[:term]
@q.sorts = ['role asc']
@users = @q.result distinct: true
respond_to do |format|
format.json
......
......@@ -17,6 +17,7 @@ class VolunteersController < ApplicationController
def search
authorize Volunteer
@q = policy_scope(Volunteer).ransack contact_full_name_cont: params[:term]
@q.sorts = ['acceptance asc']
@volunteers = @q.result distinct: true
respond_to do |format|
format.json
......
nav.navbar.section-navigation.hidden-print
hr
ul.list-unstyled
li.li-search-form
li.search-form
= search_form_for @q do |f|
= f.search_field :volunteer_contact_full_name_cont, class: 'search-field',
data: { autocomplete: volunteer_search_assignments_path }, autofocus: true,
= f.search_field :volunteer_contact_full_name_cont,
class: 'search-field-autocomplete',
data: { autocomplete: volunteer_search_assignments_path },
autofocus: true,
placeholder: 'Freiwillige Suchen'
= f.submit 'Freiwillige Suchen', class: 'search-submit'
= f.submit 'Freiwillige Suchen', class: 'btn btn-default'
ul.list-unstyled
li.li-search-form
li.search-form
= search_form_for @q do |f|
= f.search_field :client_contact_full_name_cont, class: 'search-field',
data: { autocomplete: client_search_assignments_path }, autofocus: true,
= f.search_field :client_contact_full_name_cont,
class: 'search-field-autocomplete',
data: { autocomplete: client_search_assignments_path },
placeholder: 'Klient/innen Suchen'
= f.submit 'Klient/innen Suchen', class: 'search-submit'
= f.submit 'Klient/innen Suchen'
ul.list-inline
li= clear_filter_button
= custom_filter_dropdown('Status',
......
json.array!(@assignments) do |assignment|
json.id assignment.client.id
json.label assignment.client.contact.full_name
json.value assignment.client.contact.full_name
json.data do
json.category assignment.active? ? 'Tandem Aktiv' : 'Tandem Inaktiv'
end
context_info = if assignment.active? && assignment.period_start
" - Einsatzstart: #{l(assignment.period_start)}"
elsif !assignment.active? && assignment.period_end
" - Einsatzende: #{l(assignment.period_start)}"
end
json.value "#{assignment.client.contact.full_name}#{context_info}"
end
json.array!(@assignments) do |assignment|
json.id assignment.volunteer.id
json.label assignment.volunteer.contact.full_name
json.value assignment.volunteer.contact.full_name
json.data do
json.category assignment.active? ? 'Tandem Aktiv' : 'Tandem Inaktiv'
end
context_info = if assignment.active? && assignment.period_start
" - Einsatzstart: #{l(assignment.period_start)}"
elsif !assignment.active? && assignment.period_end
" - Einsatzende: #{l(assignment.period_start)}"
end
json.value "#{assignment.volunteer.contact.full_name}#{context_info}"
end
......@@ -2,10 +2,14 @@ nav.navbar.section-navigation.hidden-print
hr
ul.list-unstyled
li.li-search-form
li.search-form
= search_form_for @q do |f|
= f.search_field :contact_full_name_cont, class: 'search-field', data: { autocomplete: search_clients_path }, autofocus: true
= f.submit 'Suchen', class: 'search-submit'
= f.search_field :contact_full_name_cont,
class: 'search-field-autocomplete',
data: { autocomplete: search_clients_path },
autofocus: true
= f.submit 'Suchen'
ul.list-inline
li= button_link 'Klient/in erfassen', new_client_path, dimension: :sm
- if policy(ClientNotification).index?
......
json.array!(@clients) do |client|
json.id client.id
json.label client.contact.full_name
json.data do
json.category client.t_enum(:acceptance)
end
json.value client.contact.full_name
end
......@@ -70,10 +70,10 @@
h2 Freiwillige hinzufügen
ul.list-unstyled.m-t-20
li.li-search-form
li.search-form
= search_form_for @q, url: edit_group_offer_path(@group_offer) do |f|
= f.search_field :contact_full_name_cont, class: 'search-field', data: { autocomplete: search_volunteer_group_offer_path(@group_offer) }, autofocus: true
= f.submit 'Suchen', class: 'search-submit'
= f.submit 'Suchen'
= render 'volunteers/columns', volunteers: @volunteers, group_offer_redirect: :edit
br
......
......@@ -3,12 +3,15 @@ h1= t_title
nav.navbar.section-navigation#filters
hr
ul.list-unstyled
li.li-search-form
li.search-form
= search_form_for @q do |f|
= f.search_field :search_volunteer_cont, class: 'search-field',
data: { autocomplete: search_group_offers_path }, autofocus: true,
= f.search_field :search_volunteer_cont,
class: 'search-field-autocomplete',
data: { autocomplete: search_group_offers_path },
autofocus: true,
placeholder: 'Nach Freiwillige suchen'
= f.submit 'Suchen', class: 'search-submit'
= f.submit 'Suchen'
ul.list-inline
- if policy(GroupOffer).new?
li= button_link t_title(:new), new_group_offer_path, dimension: 'sm'
......@@ -16,7 +19,9 @@ nav.navbar.section-navigation#filters
li= button_link t('.group_offer_categories'), group_offer_categories_path, dimension: 'sm'
li= button_link icon_span(:xlsx), url_for(format: :xlsx, q: search_parameters), dimension: 'sm'
li= link_to icon_span(:print), url_for(print: :true, q: search_parameters), { class: 'btn btn-default btn-sm', target: '_blank' }
hr
ul.list-inline
li= clear_filter_button
= custom_filter_dropdown('Standort', *Department.name_asc.filterable)
......@@ -31,6 +36,7 @@ nav.navbar.section-navigation#filters
{ q: :offer_type_eq, text: 'Intern', value: 'internal_offer'})
= button_link 'Beendete Einsätze',
terminated_index_group_assignments_path, dimension: :sm
hr
= bootstrap_paginate(@group_offers)
......
json.array!(@group_offers) do |group_offer|
json.id group_offer.id
json.volunteers group_offer.volunteer_contacts.pluck(:full_name).select { |name| name.match(/#{params[:term]}/i) }
json.label group_offer.volunteer_contacts.pluck(:full_name).select { |name| name.match(/#{params[:term]}/i) }.join('; ') + \
" – #{group_offer.title}"
json.value group_offer.volunteer_contacts.pluck(:full_name).select { |name| name.match(/#{params[:term]}/i) }
json.data do
json.category group_offer.active? ? 'Gruppenangebot Aktiv' : 'Gruppenangebot Inaktiv'
end
volunteers = group_offer.volunteer_contacts.pluck(:full_name).select do |name|
name.match(/#{params[:term]}/i)
end.join('; ')
json.value "#{volunteers} – #{group_offer.title}"
end
json.array!(@volunteers) do |volunteer|
json.id volunteer.id
json.label volunteer.contact.full_name
json.data volunteer.id
json.value volunteer.contact.full_name
end
......@@ -98,10 +98,13 @@ h2= @group_offer.title
h2 Freiwillige hinzufügen
ul.list-unstyled.m-t-20
li.li-search-form
li.search-form
= search_form_for @q, url: group_offer_path(@group_offer) do |f|
= f.search_field :contact_full_name_cont, class: 'search-field', data: { autocomplete: search_volunteer_group_offer_path(@group_offer) }, autofocus: true
= f.submit 'Suchen', class: 'search-submit'
= f.search_field :contact_full_name_cont,
class: 'search-field-autocomplete',
data: { autocomplete: search_volunteer_group_offer_path(@group_offer) },
autofocus: true
= f.submit 'Suchen'
= render 'volunteers/columns', volunteers: @volunteers
br
......
......@@ -5,12 +5,13 @@ nav.navbar.section-navigation class=('section-navigation-top' if top_nav)
hr
- if top_nav
ul.list-unstyled
li.li-search-form
li.search-form
= search_form_for @q do |f|
= f.search_field :full_name_cont, class: 'search-field',
data: { autocomplete: search_users_path }, autofocus: true,
= f.search_field :full_name_cont, class: 'search-field-autocomplete',
data: { autocomplete: search_users_path },
autofocus: true,
placeholder: 'Nach Benutzer/innen Name oder E-Mail suchen'
= f.submit 'Suchen', class: 'search-submit'
= f.submit 'Suchen'
ul.list-inline
li= clear_filter_button
= list_filter_dropdown(:role, User::ROLES)
......
json.array!(@users) do |user|
json.id user.id
json.label "#{user.full_name}; #{user.email} - #{t("role.#{user.role}")}"
json.value user.full_name
json.data do
json.category t("role.#{user.role}")
end
json.value "#{user.full_name}; #{user.email} - #{t("role.#{user.role}")}"
end
......@@ -3,10 +3,14 @@ nav.navbar.section-navigation
hr
ul.list-unstyled
li.li-search-form
li.search-form
= search_form_for @q do |f|
= f.search_field :contact_full_name_cont, class: 'search-field', data: { autocomplete: search_volunteers_path }, autofocus: true
= f.submit 'Suchen', class: 'search-submit'
= f.search_field :contact_full_name_cont,
class: 'search-field-autocomplete',
data: { autocomplete: search_volunteers_path },
autofocus: true
= f.submit 'Suchen'
ul.list-inline
li= button_link t_title(:new), new_volunteer_path, dimension: 'sm'
- if policy(Volunteer).superadmin_privileges?
......
json.array!(@volunteers) do |volunteer|
json.id volunteer.id
json.label volunteer.contact.full_name
json.data do
json.category volunteer.t_enum(:acceptance)
end
json.value volunteer.contact.full_name
end
......@@ -350,6 +350,7 @@ de:
client:
<<: [*id-generic_keys, *id-client-acceptance]
acceptance: Prozess
acceptances: *id-client-acceptance
actual_activities: Aktuelle Tätigkeiten
age_request: Alter Freiwillige/r
cost_unit: Kostenträger
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment