Skip to content

Commit

Permalink
Merge pull request #1811 from akvo/issue/1751-filter-id
Browse files Browse the repository at this point in the history 
[#1751] add filtering on ID for project typeaheads
  • Loading branch information
@KasperBrandt
KasperBrandt committed Sep 18, 2015
2 parents 28aeb5b + 2c7f4f0 commit d079b28
Show file tree
Hide file tree
Showing 4 changed files with 112 additions and 38 deletions.
2 changes: 1 addition & 1 deletion akvo/rest/serializers/typeahead.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ class Meta:
fields = (
'id',
'name',
# 'long_name',
'long_name',
)


Expand Down
2 changes: 1 addition & 1 deletion akvo/rest/views/typeahead.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ def typeahead_reporting_organisation(request):

@api_view(['GET'])
def typeahead_project(request):
projects = Project.objects.published()
projects = Project.objects.all().exclude(title='')
return Response(
rejig(projects, TypeaheadProjectSerializer(projects, many=True))
)
Expand Down
73 changes: 55 additions & 18 deletions akvo/rsr/static/scripts-src/myrsr-admin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -834,10 +834,38 @@ function removePartial(node) {
setSectionCompletionPercentage(findAncestor(parentParent, "formStep"));
}

function buildReactComponents(typeaheadOptions, typeaheadCallback, displayOption, selector, childClass, valueId, label, help, filterOption) {
function buildReactComponents(typeaheadOptions, typeaheadCallback, displayOption, selector, childClass, valueId, label, help, filterOption, inputType) {
var Typeahead, TypeaheadLabel, TypeaheadContainer, selectorTypeahead, selectorClass, inputClass, typeaheadInput;
Typeahead = ReactTypeahead.Typeahead;

if (inputType === 'project') {
typeaheadOptions.forEach(function(o) {
o.filterOption = o.id + ' ' + o.title;
o.displayOption = o.title + ' (ID: ' + o.id + ')';
});
filterOption = 'filterOption';
displayOption = 'displayOption';
} else if (inputType === 'org') {
typeaheadOptions.forEach(function(o) {
var newName = getDisplayOption(o.name, o.long_name);

o.filterOption = o.name + ' ' + o.long_name;
o.displayOption = newName;
});
filterOption = 'filterOption';
displayOption = 'displayOption';
}

function getDisplayOption(short, long) {
if (short === long) {
return short;
}
if (!long) {
return short
}
return short + ' (' + long + ')';
}

inputClass = selector + " form-control " + childClass;

selectorClass = document.querySelector('.' + selector);
Expand Down Expand Up @@ -885,7 +913,7 @@ function buildReactComponents(typeaheadOptions, typeaheadCallback, displayOption

savedResult = typeaheadOptions[i];

typeaheadInput.value = savedResult[filterOption];
typeaheadInput.value = savedResult[displayOption];
typeaheadInput.setAttribute('value', savedResult.id);
typeaheadInput.setAttribute('saved-value', savedResult.id);
}
Expand Down Expand Up @@ -1007,7 +1035,7 @@ function loadAsync(url, retryCount, retryLimit, callback) {
}
}

function processResponse(response, selector, childClass, valueId, label, help, filterOption) {
function processResponse(response, selector, childClass, valueId, label, help, filterOption, inputType) {
var typeaheadOptions = response.results;
var typeaheadCallback = function(option) {
var el;
Expand All @@ -1019,12 +1047,12 @@ function processResponse(response, selector, childClass, valueId, label, help, f
return option[filterOption];
};

buildReactComponents(typeaheadOptions, typeaheadCallback, displayOption, selector, childClass, valueId, label, help, filterOption);
buildReactComponents(typeaheadOptions, typeaheadCallback, displayOption, selector, childClass, valueId, label, help, filterOption, inputType);
}

function getCallback(selector, childClass, valueId, label, help, filterOption) {
function getCallback(selector, childClass, valueId, label, help, filterOption, inputType) {
var output = function(response) {
processResponse(response, selector, childClass, valueId, label, help, filterOption);
processResponse(response, selector, childClass, valueId, label, help, filterOption, inputType);
};

return output;
Expand Down Expand Up @@ -1213,48 +1241,57 @@ function getOnClick(pName, parentElement) {
}

function updateTypeaheads() {
var els, filterOption, labelText, helpText, API;
var els, filterOption, labelText, helpText, API, inputType;

els1 = document.querySelectorAll('.related-project-input');
labelText = defaultValues.related_project_label;
helpText = defaultValues.related_project_helptext;
filterOption = 'title';
API = projectsAPIUrl;
inputType = 'project';

updateTypeahead(els1, filterOption, labelText, helpText, API);
updateTypeahead(els1, filterOption, labelText, helpText, API, inputType);

els = document.querySelectorAll('.reportingOrganisation-input');
labelText = defaultValues.reporting_org_label;
helpText = defaultValues.reporting_org_helptext;
filterOption = 'name';
API = reportingOrgsAPIUrl;
inputType = 'org';

updateTypeahead(els, filterOption, labelText, helpText, API);
updateTypeahead(els, filterOption, labelText, helpText, API, inputType);

els = document.querySelectorAll('.partner-input');
labelText = defaultValues.reporting_org_label;
helpText = defaultValues.reporting_org_helptext;
labelText = defaultValues.partner_label;
helpText = defaultValues.partner_helptext;
filterOption = 'name';
API = orgsAPIUrl;
inputType = 'org';


updateTypeahead(els, filterOption, labelText, helpText, API);
updateTypeahead(els, filterOption, labelText, helpText, API, inputType);

els = document.querySelectorAll('.transaction-provider-org-input');
labelText = defaultValues.provider_org_label;
helpText = defaultValues.provider_org_helptext;
filterOption = 'name';
API = orgsAPIUrl;
inputType = 'org';

updateTypeahead(els, filterOption, labelText, helpText, API);

updateTypeahead(els, filterOption, labelText, helpText, API, inputType);

els = document.querySelectorAll('.transaction-receiver-org-input');
labelText = defaultValues.recipient_org_label;
helpText = defaultValues.recipient_org_helptext;
filterOption = 'name';
API = orgsAPIUrl;
inputType = 'org';


updateTypeahead(els, filterOption, labelText, helpText, API, inputType);

updateTypeahead(els, filterOption, labelText, helpText, API);
function updateTypeahead(els, filterOption, labelText, helpText, API) {
function updateTypeahead(els, filterOption, labelText, helpText, API, inputType) {
for (var i = 0; i < els.length; i++) {
var el = els[i];

Expand Down Expand Up @@ -1283,14 +1320,14 @@ function updateTypeaheads() {
valueId = el.getAttribute('data-value');
}

var cb = getLoadAsync(childSelector, childClass, valueId, label, help, filterOption);
var cb = getLoadAsync(childSelector, childClass, valueId, label, help, filterOption, inputType);
cb();
}
}

function getLoadAsync(childSelector, childClass, valueId, label, help, filterOption) {
function getLoadAsync(childSelector, childClass, valueId, label, help, filterOption, inputType) {
var output = function() {
loadAsync(API, 0, MAX_RETRIES, getCallback(childSelector, childClass, valueId, label, help, filterOption));
loadAsync(API, 0, MAX_RETRIES, getCallback(childSelector, childClass, valueId, label, help, filterOption, inputType));
};

return output;
Expand Down
73 changes: 55 additions & 18 deletions akvo/rsr/static/scripts-src/myrsr-admin.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -834,10 +834,38 @@ function removePartial(node) {
setSectionCompletionPercentage(findAncestor(parentParent, "formStep"));
}

function buildReactComponents(typeaheadOptions, typeaheadCallback, displayOption, selector, childClass, valueId, label, help, filterOption) {
function buildReactComponents(typeaheadOptions, typeaheadCallback, displayOption, selector, childClass, valueId, label, help, filterOption, inputType) {
var Typeahead, TypeaheadLabel, TypeaheadContainer, selectorTypeahead, selectorClass, inputClass, typeaheadInput;
Typeahead = ReactTypeahead.Typeahead;

if (inputType === 'project') {
typeaheadOptions.forEach(function(o) {
o.filterOption = o.id + ' ' + o.title;
o.displayOption = o.title + ' (ID: ' + o.id + ')';
});
filterOption = 'filterOption';
displayOption = 'displayOption';
} else if (inputType === 'org') {
typeaheadOptions.forEach(function(o) {
var newName = getDisplayOption(o.name, o.long_name);

o.filterOption = o.name + ' ' + o.long_name;
o.displayOption = newName;
});
filterOption = 'filterOption';
displayOption = 'displayOption';
}

function getDisplayOption(short, long) {
if (short === long) {
return short;
}
if (!long) {
return short
}
return short + ' (' + long + ')';
}

inputClass = selector + " form-control " + childClass;

selectorClass = document.querySelector('.' + selector);
Expand Down Expand Up @@ -885,7 +913,7 @@ function buildReactComponents(typeaheadOptions, typeaheadCallback, displayOption

savedResult = typeaheadOptions[i];

typeaheadInput.value = savedResult[filterOption];
typeaheadInput.value = savedResult[displayOption];
typeaheadInput.setAttribute('value', savedResult.id);
typeaheadInput.setAttribute('saved-value', savedResult.id);
}
Expand Down Expand Up @@ -1007,7 +1035,7 @@ function loadAsync(url, retryCount, retryLimit, callback) {
}
}

function processResponse(response, selector, childClass, valueId, label, help, filterOption) {
function processResponse(response, selector, childClass, valueId, label, help, filterOption, inputType) {
var typeaheadOptions = response.results;
var typeaheadCallback = function(option) {
var el;
Expand All @@ -1019,12 +1047,12 @@ function processResponse(response, selector, childClass, valueId, label, help, f
return option[filterOption];
};

buildReactComponents(typeaheadOptions, typeaheadCallback, displayOption, selector, childClass, valueId, label, help, filterOption);
buildReactComponents(typeaheadOptions, typeaheadCallback, displayOption, selector, childClass, valueId, label, help, filterOption, inputType);
}

function getCallback(selector, childClass, valueId, label, help, filterOption) {
function getCallback(selector, childClass, valueId, label, help, filterOption, inputType) {
var output = function(response) {
processResponse(response, selector, childClass, valueId, label, help, filterOption);
processResponse(response, selector, childClass, valueId, label, help, filterOption, inputType);
};

return output;
Expand Down Expand Up @@ -1213,48 +1241,57 @@ function getOnClick(pName, parentElement) {
}

function updateTypeaheads() {
var els, filterOption, labelText, helpText, API;
var els, filterOption, labelText, helpText, API, inputType;

els1 = document.querySelectorAll('.related-project-input');
labelText = defaultValues.related_project_label;
helpText = defaultValues.related_project_helptext;
filterOption = 'title';
API = projectsAPIUrl;
inputType = 'project';

updateTypeahead(els1, filterOption, labelText, helpText, API);
updateTypeahead(els1, filterOption, labelText, helpText, API, inputType);

els = document.querySelectorAll('.reportingOrganisation-input');
labelText = defaultValues.reporting_org_label;
helpText = defaultValues.reporting_org_helptext;
filterOption = 'name';
API = reportingOrgsAPIUrl;
inputType = 'org';

updateTypeahead(els, filterOption, labelText, helpText, API);
updateTypeahead(els, filterOption, labelText, helpText, API, inputType);

els = document.querySelectorAll('.partner-input');
labelText = defaultValues.reporting_org_label;
helpText = defaultValues.reporting_org_helptext;
labelText = defaultValues.partner_label;
helpText = defaultValues.partner_helptext;
filterOption = 'name';
API = orgsAPIUrl;
inputType = 'org';


updateTypeahead(els, filterOption, labelText, helpText, API);
updateTypeahead(els, filterOption, labelText, helpText, API, inputType);

els = document.querySelectorAll('.transaction-provider-org-input');
labelText = defaultValues.provider_org_label;
helpText = defaultValues.provider_org_helptext;
filterOption = 'name';
API = orgsAPIUrl;
inputType = 'org';

updateTypeahead(els, filterOption, labelText, helpText, API);

updateTypeahead(els, filterOption, labelText, helpText, API, inputType);

els = document.querySelectorAll('.transaction-receiver-org-input');
labelText = defaultValues.recipient_org_label;
helpText = defaultValues.recipient_org_helptext;
filterOption = 'name';
API = orgsAPIUrl;
inputType = 'org';


updateTypeahead(els, filterOption, labelText, helpText, API, inputType);

updateTypeahead(els, filterOption, labelText, helpText, API);
function updateTypeahead(els, filterOption, labelText, helpText, API) {
function updateTypeahead(els, filterOption, labelText, helpText, API, inputType) {
for (var i = 0; i < els.length; i++) {
var el = els[i];

Expand Down Expand Up @@ -1283,14 +1320,14 @@ function updateTypeaheads() {
valueId = el.getAttribute('data-value');
}

var cb = getLoadAsync(childSelector, childClass, valueId, label, help, filterOption);
var cb = getLoadAsync(childSelector, childClass, valueId, label, help, filterOption, inputType);
cb();
}
}

function getLoadAsync(childSelector, childClass, valueId, label, help, filterOption) {
function getLoadAsync(childSelector, childClass, valueId, label, help, filterOption, inputType) {
var output = function() {
loadAsync(API, 0, MAX_RETRIES, getCallback(childSelector, childClass, valueId, label, help, filterOption));
loadAsync(API, 0, MAX_RETRIES, getCallback(childSelector, childClass, valueId, label, help, filterOption, inputType));
};

return output;
Expand Down

0 comments on commit d079b28

Please sign in to comment.