Skip to content
This repository has been archived by the owner on Nov 9, 2017. It is now read-only.

Commit

Permalink
WIP: custom autocomplete list
Browse files Browse the repository at this point in the history
  • Loading branch information
Alex Eng committed Dec 5, 2013
1 parent f13c448 commit b08ba75
Show file tree
Hide file tree
Showing 2 changed files with 75 additions and 94 deletions.
70 changes: 15 additions & 55 deletions zanata-war/src/main/java/org/zanata/action/VersionGroupHome.java
View file
Expand Up @@ -101,9 +101,13 @@ public class VersionGroupHome extends SlugHome<HIterationGroup> {

@Getter
@Setter
// locale id
// localeId of new language
private String newLanguage;

@Getter
@Setter
private String languageQuery;

@Getter
@Setter
// Slug of project [space] version
Expand Down Expand Up @@ -162,23 +166,23 @@ public void setStatus(char initial) {
getInstance().setStatus(EntityStatus.valueOf(initial));
}

public List<HLocale> suggestLocales(final String query) {
public List<HLocale> suggestLocales() {
List<HLocale> localeList = localeServiceImpl.getSupportedLocales();

Collection<HLocale> filtered =
Collections2.filter(localeList, new Predicate<HLocale>() {
@Override
public boolean apply(@Nullable HLocale input) {
if (StringUtils.isEmpty(query)) {
if (StringUtils.isEmpty(languageQuery)) {
return !getInstance().getActiveLocales().contains(
input);
}
return !getInstance().getActiveLocales()
.contains(input)
&& (input.getLocaleId().getId()
.startsWith(query) || input
.startsWith(languageQuery) || input
.retrieveDisplayName().toLowerCase()
.contains(query.toLowerCase()));
.contains(languageQuery.toLowerCase()));
}
});

Expand Down Expand Up @@ -219,14 +223,14 @@ public boolean apply(@Nullable HPerson input) {

@Restrict("#{s:hasPermission(versionGroupHome.instance, 'update')}")
public void addLanguage() {
if (!validateLanguageName("newLanguage")) {
return; // not success
if (StringUtils.isEmpty(newLanguage)) {
return;
}
HLocale locale =
localeServiceImpl.getByLocaleId(new LocaleId(newLanguage));
HLocale locale = localeServiceImpl.getByLocaleId(newLanguage);

getInstance().getActiveLocales().add(locale);
super.update();
this.newLanguage = "";
newLanguage = "";

addMessage(
StatusMessage.Severity.INFO,
Expand All @@ -237,7 +241,7 @@ public void addLanguage() {
/**
* Use FlashScopeBean to store message in page. Multiple ajax requests for
* re-rendering statistics after updating will clear FacesMessages.
*
*
* @param severity
* @param message
*/
Expand Down Expand Up @@ -382,50 +386,6 @@ public void validateSuppliedId() {
// start
}

public boolean validateLanguageName(String componentId) {
// Check that locale Id is syntactically valid
LocaleId localeId;
if (StringUtils.isEmpty(newLanguage)) {
return false;
}

try {
localeId = new LocaleId(newLanguage);
} catch (IllegalArgumentException iaex) {
FacesMessages.instance().addToControl(
componentId,
zanataMessages
.getMessage("jsf.language.validation.Invalid"));
return false;
}

// check if locale enabled in server
if (!localeServiceImpl.localeSupported(localeId)) {
FacesMessages.instance().addToControl(
componentId,
zanataMessages
.getMessage("jsf.language.validation.NotSupport"),
localeId);
return false;
}

// check for already added language
for (HLocale locale : getInstanceActiveLocales()) {
if (locale.getLocaleId().equals(localeId)) {
FacesMessages
.instance()
.addToControl(
componentId,
zanataMessages
.getMessage("jsf.LanguageAlreadyInGroup"),
localeId);
return false;
}
}

return true;
}

public boolean validateVersion(String componentId) {
newVersion = newVersion.trim();
if (StringUtils.isEmpty(newVersion)
Expand Down
99 changes: 60 additions & 39 deletions zanata-war/src/main/webapp/WEB-INF/layout/version-group/settings-tab.xhtml
View file
Expand Up @@ -23,28 +23,45 @@

function focusLanguageInput() {
setTimeout(function () {
jQuery("[id='#{rich:clientId('new--language')}Input']").value = "";
jQuery("[id='#{rich:clientId('new--language')}Input']").focus();
}, 50);
}

function focusVersionInput() {
setTimeout(function () {
jQuery("[id='#{rich:clientId('new--version')}Input']").value = "";
jQuery("[id='#{rich:clientId('new--version')}Input']").focus();
}, 50);
}

function focusMaintainerInput() {
setTimeout(function () {
jQuery("[id='#{rich:clientId('new--maintainer')}Input']").value = "";
jQuery("[id='#{rich:clientId('new--maintainer')}Input']").focus();
}, 50);
}

function fillInputField(autocomplete, value) {
jQuery("[id='#{rich:clientId('new--version')}Input']").focus();
function addLanguage(selectedItem, event) {
if (event.type == "click") {
addNewLanguage(selectedItem.children[0].value);
}
else if (event.type == "keyup") {

}
}
</script>

<a4j:jsFunction name="addNewLanguage" render="settings-languages-form"
oncomplete="refreshStatistics();focusLanguageInput()"
action="#{versionGroupHome.addLanguage()}">
<a4j:param name="val" assignTo="#{versionGroupHome.newLanguage}"/>
</a4j:jsFunction>

<a4j:jsFunction name="assignLanguageQuery" render="suggest-language-list">
<a4j:param name="val" assignTo="#{versionGroupHome.languageQuery}"/>
</a4j:jsFunction>

</script>
<h1>#{messages['Settings']}</h1>

<div class="tabs--vertical js-tabs">
Expand Down Expand Up @@ -133,12 +150,12 @@
#{messages['jsf.Languages']}
</h2>
<h:form id="settings-languages-form" styleClass="l--push-bottom-0">
<ul class="list--slat l--push-top-half">
<ul class="list--slat list--highlight l--push-top-half">
<ui:repeat value="#{versionGroupHome.getInstanceActiveLocales()}"
var="locale">
<li class="reveal">#{locale.localeId}
<span class="txt--meta">-#{locale.retrieveDisplayName()}</span>
<a4j:commandLink oncomplete="refreshStatistics()"
<li class="reveal">#{locale.retrieveDisplayName()}<span
class="txt--understated l--push-left-quarter">[#{locale.localeId}]</span>
<a4j:commandLink oncomplete="refreshStatistics()" execute="@this"
action="#{versionGroupHome.removeLanguage(locale)}"
styleClass="l--float-right txt--danger reveal__target"
render="settings-languages-form">
Expand All @@ -151,38 +168,42 @@
#{messages['jsf.AddALanguage']}
</label>

<div class="g--tight">
<div class="g__item w--7-10">
<s:decorate template="../field.xhtml" enclose="true"
id="newLanguageField">
<rich:autocomplete mode="cachedAjax" var="suggestLocale"
styleClass="auto-complete" id="new--language"
autocompleteMethod="#{versionGroupHome.suggestLocales}"
fetchValue="#{suggestLocale.localeId}" layout="list"
value="#{versionGroupHome.newLanguage}"
popupClass="auto-complete-list" minChars="0">
<rich:placeholder value="#{messages['jsf.AddALanguage']}"
styleClass="form__placeholder"/>
<a4j:ajax event="change"
listener="#{versionGroupHome.validateLanguageName(component.id)}"
execute="@this" render="newLanguageField">
<a4j:attachQueue ignoreDupResponses="true"
requestDelay="500"/>
</a4j:ajax>
#{suggestLocale.localeId}
<span class="txt--meta">
-#{suggestLocale.retrieveDisplayName()}
</span>
</rich:autocomplete>
</s:decorate>
</div>
<div class="g__item w--3-10">
<a4j:commandButton styleClass="button--full"
action="#{versionGroupHome.addLanguage()}"
value="#{messages['Add']}"
oncomplete="refreshStatistics();focusLanguageInput()"
render="settings-languages-form"/>
</div>
<rich:autocomplete mode="cachedAjax" var="suggestLocale"
styleClass="auto-complete" id="new--language"
autocompleteMethod="#{versionGroupHome.suggestLocales}"
layout="list"
fetchValue="#{suggestLocale.retrieveDisplayName()} [#{suggestLocale.localeId}]"
popupClass="auto-complete-list" minChars="0">
<rich:placeholder value="#{messages['jsf.AddALanguage']}"
styleClass="form__placeholder"/>

<h:inputHidden value="#{suggestLocale.localeId}"/>
#{suggestLocale.retrieveDisplayName()}<span
class="txt--understated l--push-left-quarter">[#{suggestLocale.localeId}]</span>
</rich:autocomplete>
</li>
<li>
<div class="autocomplete">
<h:inputText onkeyup="assignLanguageQuery(this.value)"
styleClass="l--push-v-0 autocomplete__input">
<rich:placeholder value="#{messages['jsf.AddALanguage']}"
styleClass="form__placeholder"/>
</h:inputText>
<a4j:outputPanel id="suggest-language-list">
<ul
class="list--no-bullets bg--pop-highest l--push-v-0 autocomplete__results">
<ui:repeat value="#{versionGroupHome.suggestLocales()}"
var="suggestLocale">
<li class="l--pad-all-quarter autocomplete__result"
onclick="addLanguage(this, event)"
onkeyup="addLanguage(this, event)">
<h:inputHidden value="#{suggestLocale.localeId}"/>
#{suggestLocale.retrieveDisplayName()}<span
class="txt--understated l--push-left-quarter">[#{suggestLocale.localeId}]</span>
</li>
</ui:repeat>
</ul>
</a4j:outputPanel>
</div>
</li>
</ul>
Expand Down

0 comments on commit b08ba75

Please sign in to comment.