Filters in backend are now dynamic.feature-ui-improvements

If JavaScript is activated in the users browser, filterable tables are
filtered immediatly.

1 files changed, 72 insertions, 70 deletions

diff --git a/ratatoeskr/templates/src/systemtemplates/articles.html b/ratatoeskr/templates/src/systemtemplates/articles.html
index 764ac40..558ed48 100644
--- a/ratatoeskr/templates/src/systemtemplates/articles.html
+++ b/ratatoeskr/templates/src/systemtemplates/articles.html
@@ -3,74 +3,76 @@
 	<ste:default_error />
 	<ste:default_success />
 	
-	<form action="$rel_path_to_root/backend/content/articles" method="get" accept-charset="UTF-8">
-		<div>
-			<strong><ste:get_translation for="filter" />:</strong>
-			<ste:get_translation for="filter_urlname" /> <input type="text" name="filter_urlname" value="<ste:escape>$filter_urlname</ste:escape>" />
-			<ste:get_translation for="filter_tag" /> <input type="text" name="filter_tag" value="<ste:escape>$filter_tag</ste:escape>" />
-			<ste:get_translation for="filter_section" /> <input type="text" name="filter_section" value="<ste:escape>$filter_section</ste:escape>" />
-			<input type="hidden" name="sort_$sorting[dir]" value="$sorting[by]" />
-			<input type="submit" />
-		</div>
-	</form>
-	
-	<form action="$rel_path_to_root/backend/content/articles?$filterquery?{$filterquery|&|}$sortquery" method="post">
-		<table class="fullwidth listtab">
-			<thead><tr>
-				<th>&nbsp;</th>
-				<th>
-					<ste:get_translation for="urlname" />
-					<a href="$rel_path_to_root/backend/content/articles??{$filterquery|${filterquery}&|}sort_asc=urlname"><img src="$rel_path_to_root/ratatoeskr/cms_style/images/sortarrow_up_?{$sort_asc_urlname|filled|outline}.png" alt="<ste:get_translation for='sort_asc' />" /></a>
-					<a href="$rel_path_to_root/backend/content/articles??{$filterquery|${filterquery}&|}sort_desc=urlname"><img src="$rel_path_to_root/ratatoeskr/cms_style/images/sortarrow_down_?{$sort_desc_urlname|filled|outline}.png" alt="<ste:get_translation for='sort_desc' />" /></a>
-				</th>
-				<th><ste:get_translation for="available_languages" /></th>
-				<th>
-					<ste:get_translation for="date_time" />
-					<a href="$rel_path_to_root/backend/content/articles??{$filterquery|${filterquery}&|}sort_asc=date"><img src="$rel_path_to_root/ratatoeskr/cms_style/images/sortarrow_up_?{$sort_asc_date|filled|outline}.png" alt="<ste:get_translation for='sort_asc' />" /></a>
-					<a href="$rel_path_to_root/backend/content/articles??{$filterquery|${filterquery}&|}sort_desc=date"><img src="$rel_path_to_root/ratatoeskr/cms_style/images/sortarrow_down_?{$sort_desc_date|filled|outline}.png" alt="<ste:get_translation for='sort_desc' />" /></a>
-				</th>
-				<th><ste:get_translation for="tags" /></th>
-				<th>
-					<ste:get_translation for="section" />
-					<a href="$rel_path_to_root/backend/content/articles??{$filterquery|${filterquery}&|}sort_asc=section"><img src="$rel_path_to_root/ratatoeskr/cms_style/images/sortarrow_up_?{$sort_asc_section|filled|outline}.png" alt="<ste:get_translation for='sort_asc' />" /></a>
-					<a href="$rel_path_to_root/backend/content/articles??{$filterquery|${filterquery}&|}sort_desc=section"><img src="$rel_path_to_root/ratatoeskr/cms_style/images/sortarrow_down_?{$sort_desc_section|filled|outline}.png" alt="<ste:get_translation for='sort_desc' />" /></a>
-				</th>
-			</tr></thead>
-			<tbody>
-				<ste:set var="articles_n"><ste:arraylen array="articles" /></ste:set>
-				<ste:if>~{$articles_n|gt|0}
-					<ste:then>
-						<ste:foreach array="articles" value="article">
-							<tr>
-								<td><input type="checkbox" name="article_multiselect[]" value="$article[urlname]" /></td>
-								<td><a href="$rel_path_to_root/backend/content/write/$article[urlname]">$article[urlname]</a></td>
-								<td>
-									<ste:foreach array="article[languages]" value="lang" counter="i">
-										?{~{$i|eq|0}||, }<a href="$rel_path_to_root/backend/content/write/$article[urlname]/$lang">$lang</a>
-									</ste:foreach>
-								</td>
-								<td><ste:date timestamp="$article[date]">%Y-%m-%d %H:%M:%S</ste:date></td>
-								<td>
-									<ste:foreach array="article[tags]" value="tag" counter="i">
-										?{~{$i|eq|0}||, } <ste:escape>$tag</ste:escape>
-									</ste:foreach>
-								</td>
-								<td><ste:escape>$article[section][name]</ste:escape></td>
-							</tr>
-						</ste:foreach>
-					</ste:then>
-					<ste:else>
-						<tr><td colspan="6" style="text-align: center;"><em><ste:get_translation for="no_articles" /></em></td></tr>
-					</ste:else>
-				</ste:if>
-			</tbody>
-		</table>
-		<div>
-			<input type="submit" name="delete" value="<ste:get_translation for='delete' />" />
-			<select name="really_delete">
-				<option value="no" selected="selected"><ste:get_translation for="no" /></option>
-				<option value="yes"><ste:get_translation for="yes" /></option>
-			</select>
-		</div>
-	</form>
+	<div id="articlestable">
+		<form action="$rel_path_to_root/backend/content/articles" method="get" accept-charset="UTF-8" class="filter">
+			<div>
+				<strong><ste:get_translation for="filter" />:</strong>
+				<ste:get_translation for="filter_urlname" /> <input type="text" name="filter_urlname" value="<ste:escape>$filter_urlname</ste:escape>" />
+				<ste:get_translation for="filter_tag" /> <input type="text" name="filter_tag" value="<ste:escape>$filter_tag</ste:escape>" />
+				<ste:get_translation for="filter_section" /> <input type="text" name="filter_section" value="<ste:escape>$filter_section</ste:escape>" />
+				<input type="hidden" name="sort_$sorting[dir]" value="$sorting[by]" />
+				<input type="submit" />
+			</div>
+		</form>
+		
+		<form action="$rel_path_to_root/backend/content/articles?$filterquery?{$filterquery|&|}$sortquery" method="post">
+			<table class="fullwidth listtab">
+				<thead><tr>
+					<th>&nbsp;</th>
+					<th>
+						<ste:get_translation for="urlname" />
+						<a href="$rel_path_to_root/backend/content/articles??{$filterquery|${filterquery}&|}sort_asc=urlname"><img src="$rel_path_to_root/ratatoeskr/cms_style/images/sortarrow_up_?{$sort_asc_urlname|filled|outline}.png" alt="<ste:get_translation for='sort_asc' />" /></a>
+						<a href="$rel_path_to_root/backend/content/articles??{$filterquery|${filterquery}&|}sort_desc=urlname"><img src="$rel_path_to_root/ratatoeskr/cms_style/images/sortarrow_down_?{$sort_desc_urlname|filled|outline}.png" alt="<ste:get_translation for='sort_desc' />" /></a>
+					</th>
+					<th><ste:get_translation for="available_languages" /></th>
+					<th>
+						<ste:get_translation for="date_time" />
+						<a href="$rel_path_to_root/backend/content/articles??{$filterquery|${filterquery}&|}sort_asc=date"><img src="$rel_path_to_root/ratatoeskr/cms_style/images/sortarrow_up_?{$sort_asc_date|filled|outline}.png" alt="<ste:get_translation for='sort_asc' />" /></a>
+						<a href="$rel_path_to_root/backend/content/articles??{$filterquery|${filterquery}&|}sort_desc=date"><img src="$rel_path_to_root/ratatoeskr/cms_style/images/sortarrow_down_?{$sort_desc_date|filled|outline}.png" alt="<ste:get_translation for='sort_desc' />" /></a>
+					</th>
+					<th><ste:get_translation for="tags" /></th>
+					<th>
+						<ste:get_translation for="section" />
+						<a href="$rel_path_to_root/backend/content/articles??{$filterquery|${filterquery}&|}sort_asc=section"><img src="$rel_path_to_root/ratatoeskr/cms_style/images/sortarrow_up_?{$sort_asc_section|filled|outline}.png" alt="<ste:get_translation for='sort_asc' />" /></a>
+						<a href="$rel_path_to_root/backend/content/articles??{$filterquery|${filterquery}&|}sort_desc=section"><img src="$rel_path_to_root/ratatoeskr/cms_style/images/sortarrow_down_?{$sort_desc_section|filled|outline}.png" alt="<ste:get_translation for='sort_desc' />" /></a>
+					</th>
+				</tr></thead>
+				<tbody>
+					<ste:set var="articles_n"><ste:arraylen array="articles" /></ste:set>
+					<ste:if>~{$articles_n|gt|0}
+						<ste:then>
+							<ste:foreach array="articles" value="article">
+								<tr>
+									<td><input type="checkbox" name="article_multiselect[]" value="$article[urlname]" /></td>
+									<td><a href="$rel_path_to_root/backend/content/write/$article[urlname]">$article[urlname]</a></td>
+									<td>
+										<ste:foreach array="article[languages]" value="lang" counter="i">
+											?{~{$i|eq|0}||, }<a href="$rel_path_to_root/backend/content/write/$article[urlname]/$lang">$lang</a>
+										</ste:foreach>
+									</td>
+									<td><ste:date timestamp="$article[date]">%Y-%m-%d %H:%M:%S</ste:date></td>
+									<td>
+										<ste:foreach array="article[tags]" value="tag" counter="i">
+											?{~{$i|eq|0}||, } <ste:escape>$tag</ste:escape>
+										</ste:foreach>
+									</td>
+									<td><ste:escape>$article[section][name]</ste:escape></td>
+								</tr>
+							</ste:foreach>
+						</ste:then>
+						<ste:else>
+							<tr><td colspan="6" style="text-align: center;"><em><ste:get_translation for="no_articles" /></em></td></tr>
+						</ste:else>
+					</ste:if>
+				</tbody>
+			</table>
+			<div>
+				<input type="submit" name="delete" value="<ste:get_translation for='delete' />" />
+				<select name="really_delete">
+					<option value="no" selected="selected"><ste:get_translation for="no" /></option>
+					<option value="yes"><ste:get_translation for="yes" /></option>
+				</select>
+			</div>
+		</form>
+	</div>
 </ste:block>