Progress on categories page.
Project: http://git-wip-us.apache.org/repos/asf/roller/repo Commit: http://git-wip-us.apache.org/repos/asf/roller/commit/700682ac Tree: http://git-wip-us.apache.org/repos/asf/roller/tree/700682ac Diff: http://git-wip-us.apache.org/repos/asf/roller/diff/700682ac Branch: refs/heads/bootstrap-ui Commit: 700682ac120db830925b1ba09fa62e0b2c6cf9f9 Parents: a5ec43b Author: Dave Johnson <[email protected]> Authored: Sat Dec 26 14:33:58 2015 -0500 Committer: Dave Johnson <[email protected]> Committed: Sat Dec 26 14:33:58 2015 -0500 ---------------------------------------------------------------------- .../webapp/WEB-INF/jsps/editor/Categories.jsp | 274 ++++++++++++++----- .../WEB-INF/jsps/editor/CategoriesSidebar.jsp | 89 ++++-- .../main/webapp/WEB-INF/jsps/editor/Entries.jsp | 12 +- 3 files changed, 284 insertions(+), 91 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/roller/blob/700682ac/app/src/main/webapp/WEB-INF/jsps/editor/Categories.jsp ---------------------------------------------------------------------- diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/Categories.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/Categories.jsp index 2c56a93..b45ccfd 100644 --- a/app/src/main/webapp/WEB-INF/jsps/editor/Categories.jsp +++ b/app/src/main/webapp/WEB-INF/jsps/editor/Categories.jsp @@ -17,89 +17,237 @@ --%> <%@ include file="/WEB-INF/jsps/taglibs-struts2.jsp" %> -<%-- JavaScript for categories table --%> +<%-- JavaScript for categories table --%> <script> -function onMove() -{ - if ( confirm("<s:text name='categoriesForm.move.confirm' />") ) - { - document.categories.method.value = "moveSelected"; - document.categories.submit(); + function onMove() { + if (confirm("<s:text name='categoriesForm.move.confirm' />")) { + document.categories.method.value = "moveSelected"; + document.categories.submit(); + } } -} </script> <p class="subtitle"> - <s:text name="categoriesForm.subtitle" > - <s:param value="weblog" /> + <s:text name="categoriesForm.subtitle"> + <s:param value="weblog"/> </s:text> </p> <p class="pagetip"> - <s:text name="categoriesForm.rootPrompt" /> + <s:text name="categoriesForm.rootPrompt"/> </p> - <%-- Form is a table of categories each with checkbox --%> <s:form action="categories!move"> - <s:hidden name="salt" /> - <s:hidden name="weblog" /> - <s:hidden name="categoryId" /> + <s:hidden name="salt"/> + <s:hidden name="weblog"/> + <s:hidden name="categoryId"/> + + <table class="rollertable table table-striped" width="100%"> - <table class="rollertable"> - <tr class="rollertable"> - <th class="rollertable" width="15%"><s:text name="generic.name" /></th> - <th class="rollertable" width="40%"><s:text name="generic.description" /></th> - <th class="rollertable" width="31%"><s:text name="categoriesForm.imageUrl" /></th> - <th class="rollertable" width="7%"><s:text name="generic.edit" /></th> - <th class="rollertable" width="7%"><s:text name="categoriesForm.remove" /></th> + <th width="30%"><s:text name="generic.name"/></th> + <th width="50%"><s:text name="generic.description"/></th> + <th width="10%"><s:text name="generic.edit"/></th> + <th width="10%"><s:text name="categoriesForm.remove"/></th> </tr> - + <s:if test="AllCategories != null && !AllCategories.isEmpty"> - - <%-- Categories --%> - <s:iterator id="category" value="AllCategories" status="rowstatus"> - <s:if test="#rowstatus.odd == true"> - <tr class="rollertable_odd"> - </s:if> - <s:else> - <tr class="rollertable_even"> - </s:else> - - <td class="rollertable"><s:property value="#category.name" /></td> - - <td class="rollertable"><s:property value="#category.description" /></td> - - <td class="rollertable"><s:property value="#category.image" /></td> - - <td class="rollertable" align="center"> - <s:url var="editUrl" action="categoryEdit"> - <s:param name="weblog" value="%{actionWeblog.handle}" /> - <s:param name="bean.id" value="#category.id" /> - </s:url> - <s:a href="%{editUrl}"><img src='<s:url value="/images/page_white_edit.png"/>' border="0" alt="icon" /></s:a> - </td> - - <td class="rollertable" align="center"> - <s:if test="AllCategories.size() > 1"> - <s:url var="removeUrl" action="categoryRemove"> - <s:param name="weblog" value="%{actionWeblog.handle}" /> - <s:param name="removeId" value="#category.id" /> - </s:url> - <s:a href="%{removeUrl}"><img src='<s:url value="/images/delete.png"/>' border="0" alt="icon" /></s:a> - </s:if> - </td> - - </tr> - </s:iterator> - + + <s:iterator id="category" value="AllCategories" status="rowstatus"> + <tr> + <td><s:property value="#category.name"/></td> + + <td><s:property value="#category.description"/></td> + + <td align="center"> + + <s:set name="categoryId" value="#category.id" /> + <s:set name="categoryName" value="#category.name" /> + <s:set name="categoryDesc" value="#category.description" /> + <s:set name="categoryImage" value="#category.image" /> + <a href="#" onclick="showCategoryEditModal( + '<s:property value="categoryId" />', + '<s:property value="categoryName"/>', + '<s:property value="categoryDesc"/>', + '<s:property value="categoryImage"/>' )"> + <span class="glyphicon glyphicon-edit"></span> + </a> + + </td> + + <td class="rollertable" align="center"> + <s:if test="AllCategories.size() > 1"> + + <s:set name="categoryId" value="#category.id" /> + <s:set name="categoryName" value="#category.name" /> + <s:set name="categoryInUse" value="#category.inUse.toString()" /> + <a href="#" onclick="showCategoryDeleteModal( + '<s:property value="categoryId" />', + '<s:property value="categoryName" />', + '<s:property value="categoryInUse"/>' )" > + <span class="glyphicon glyphicon-trash"></span> + </a> + + </s:if> + </td> + + </tr> + </s:iterator> + </s:if> + <s:else> <tr> - <td style="vertical-align:middle" colspan="6"><s:text name="categoriesForm.noresults" /></td> + <td style="vertical-align:middle" colspan="6"><s:text name="categoriesForm.noresults"/></td> </tr> </s:else> - + </table> - + </s:form> + + +<%-- ============================================================= --%> +<%-- add/edit category modal --%> + +<div id="category-edit-modal" class="modal fade category-edit-modal" tabindex="-1" role="dialog"> + + <div class="modal-dialog modal-lg"> + + <div class="modal-content"> + + <s:set var="mainAction">categoryEdit</s:set> + + <div class="modal-header"> + <h3><s:text name="categoryForm.edit.title" /></h3> + <p class="pagetip"> + <s:text name="categoryForm.requiredFields"> + <s:param><s:text name="generic.name"/></s:param> + </s:text> + </p> + </div> + + <s:form action="categoryEdit!save" theme="bootstrap" cssClass="form-horizontal"> + <s:hidden name="salt"/> + <s:hidden name="weblog"/> + <s:hidden name="bean.id"/> + + <div class="modal-body"> + <s:textfield name="bean.name" label="%{getText('generic.name')}" maxlength="255"/> + <s:textfield name="bean.description" label="%{getText('generic.description')}"/> + <s:textfield name="bean.image" label="%{getText('categoryForm.image')}"/> + </div> + + <div class="modal-footer"> + <s:submit cssClass="btn btn-primary" + value="%{getText('generic.save')}" action="%{#mainAction}!save"/> + <button type="button" class="btn" data-dismiss="modal"> + <s:text name="generic.cancel" /> + </button> + </div> + </s:form> + + </div> + </div> +</div> + +<script> + function showCategoryEditModal( id, name, desc, image ) { + $('#categoryEdit_bean_id').val(id); + $('#categoryEdit_bean_name').val(name); + $('#categoryEdit_bean_description').val(desc); + $('#categoryEdit_bean_image').val(image); + $('#category-edit-modal').modal({show: true}); + } + + <%-- + (function() { + $('form > input').keyup(function() { + + var empty = false; + $('form > input').each(function() { + if ($(this).val() == '') { + empty = true; + } + }); + + if (empty) { + $('#register').attr('disabled', 'disabled'); + } else { + $('#register').removeAttr('disabled'); + } + }); + })() + --%> + +</script> + + +<%-- ============================================================= --%> +<%-- delete confirmation modal --%> + +<div id="delete-category-modal" class="modal fade delete-category-modal" tabindex="-1" role="dialog"> + + <div class="modal-dialog modal-lg"> + + <div class="modal-content"> + + <div class="modal-header"> + <h3> + <s:text name="categoryDeleteOK.removeCategory"/>: + <span id="category-name"></span> + </h3> + </div> + + <s:form action="categoryRemove!remove" theme="bootstrap" cssClass="form-horizontal"> + <s:hidden name="salt"/> + <s:hidden name="weblog"/> + <s:hidden name="removeId"/> + + <div class="modal-body"> + + <div id="category-in-use" class="alert alert-danger" role="alert" style="display:none"> + <p> + <s:text name="categoryDeleteOK.warningCatInUse"/> + <s:text name="categoryDeleteOK.youMustMoveEntries"/> + </p> + <s:text name="categoryDeleteOK.moveToWhere"/> + <s:select name="targetCategoryId" list="allCategories" listKey="id" listValue="name"/> + </div> + + <div id="category-empty" style="display:none"> + <p><s:text name="categoryDeleteOK.noEntriesInCat"/></p> + </div> + + <p> <strong><s:text name="categoryDeleteOK.areYouSure"/></strong> </p> + </div> + + <div class="modal-footer"> + <s:submit cssClass="btn" + value="%{getText('generic.yes')}"/> + <button type="button" class="btn btn-default btn-primary" data-dismiss="modal"> + <s:text name="generic.no" /> + </button> + </div> + + </s:form> + + </div> + </div> +</div> + +<script> + function showCategoryDeleteModal( id, name, inUse ) { + $('#categoryRemove_removeId').val(id); + $('#categoryEdit_bean_name').val(name); + $('#category-name').html(name); + if ( inUse ) { + $('#category-in-use').css('display','block'); + $('#category-emtpy').css('display', 'none'); + } else { + $('#category-in-use').css('display', 'none'); + $('#category-emtpy').css('display', 'block'); + } + $('#delete-category-modal').modal({show: true}); + } +</script> http://git-wip-us.apache.org/repos/asf/roller/blob/700682ac/app/src/main/webapp/WEB-INF/jsps/editor/CategoriesSidebar.jsp ---------------------------------------------------------------------- diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/CategoriesSidebar.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/CategoriesSidebar.jsp index 261e89c..2aa0d4e 100644 --- a/app/src/main/webapp/WEB-INF/jsps/editor/CategoriesSidebar.jsp +++ b/app/src/main/webapp/WEB-INF/jsps/editor/CategoriesSidebar.jsp @@ -17,26 +17,77 @@ --%> <%@ include file="/WEB-INF/jsps/taglibs-struts2.jsp" %> -<div class="sidebarFade"> - <div class="menu-tr"> - <div class="menu-tl"> - - <div class="sidebarInner"> - <h3><s:text name="mainPage.actions" /></h3> - <hr size="1" noshade="noshade" /> - - <p> - <%-- Add Category link --%> - <img src='<s:url value="/images/folder_add.png"/>' border="0"alt="icon" /> - <s:url var="addCategory" action="categoryAdd"> - <s:param name="weblog" value="%{actionWeblog.handle}" /> - </s:url> - <s:a href="%{addCategory}"><s:text name="categoriesForm.addCategory" /></s:a> - </p> - - <br /> +<h3><s:text name="mainPage.actions"/></h3> +<hr size="1" noshade="noshade"/> + +<p> + <s:set name="categoryId" value="#bean.id"/> + <s:set name="categoryName" value="#post.name"/> + <s:set name="categoryDesc" value="#post.description"/> + <s:set name="categoryImage" value="#post.image"/> + <a href="#" onclick="showCategoryAddModal()"> + <span class="glyphicon glyphicon-plus"></span> + <s:text name="categoriesForm.addCategory"/> + </a> +</p> + + +<div id="category-add-modal" class="modal fade category-add-modal" tabindex="-1" role="dialog"> + + <div class="modal-dialog modal-lg"> + + <div class="modal-content"> + + <div class="modal-header"> + <h3> <s:text name="categoryForm.add.title"/> </h3> </div> - + + <div class="modal-body"> + <s:form id="categoryAddForm" theme="bootstrap" cssClass="form-horizontal"> + <s:hidden name="salt"/> + <s:hidden name="weblog"/> + <s:textfield name="bean.name" label="%{getText('generic.name')}" maxlength="255"/> + <s:textfield name="bean.description" label="%{getText('generic.description')}"/> + <s:textfield name="bean.image" label="%{getText('categoryForm.image')}"/> + </s:form> + </div> + + <div class="modal-footer"> + <button onclick="submitNewCategory()" class="btn btn-primary"> + <s:text name="generic.save" /> + </button> + <button type="button" class="btn" data-dismiss="modal"> + <s:text name="generic.cancel" /> + </button> + </div> + </div> </div> </div> + +<script> + function showCategoryAddModal( postId, postTitle ) { + $('#category-add-modal').modal({show: true}); + } + function submitNewCategory() { + + // if name is empty reject and show error message + if ( $("#categoryAdd_bean_name").val().trim() == "" ) { + alert("Name is required"); + return; + } + + // post category via Ajax + $.ajax({ + url: "categoryAdd!save", + data: $("#categoryAddForm").serialize(), + context: document.body + }).done(function(data) { + alert("Done"); + }); + + // if post failed, then show error messages + + // else dismiss modal + } +</script> http://git-wip-us.apache.org/repos/asf/roller/blob/700682ac/app/src/main/webapp/WEB-INF/jsps/editor/Entries.jsp ---------------------------------------------------------------------- diff --git a/app/src/main/webapp/WEB-INF/jsps/editor/Entries.jsp b/app/src/main/webapp/WEB-INF/jsps/editor/Entries.jsp index 682964a..3dbc294 100644 --- a/app/src/main/webapp/WEB-INF/jsps/editor/Entries.jsp +++ b/app/src/main/webapp/WEB-INF/jsps/editor/Entries.jsp @@ -46,7 +46,7 @@ </s:if> </ul> </nav> - + <%-- ============================================================= --%> <%-- Entry table--%> @@ -103,10 +103,6 @@ </td> <td> - <s:url var="deleteUrl" action="entryRemoveViaList"> - <s:param name="weblog" value="%{actionWeblog.handle}" /> - <s:param name="removeId" value="#post.id" /> - </s:url> <s:set name="postId" value="#post.id" /> <s:set name="postTitle" value="#post.title" /> <a href="#" @@ -184,7 +180,7 @@ <s:set var="deleteAction">entryRemoveViaList!remove</s:set> - <s:form action="%{#deleteAction}" theme="bootstrap"> + <s:form action="%{#deleteAction}" theme="bootstrap" cssClass="form-horizontal"> <s:hidden name="salt"/> <s:hidden name="weblog"/> <s:hidden name="removeId" id="removeId"/> @@ -196,7 +192,7 @@ </div> </div> - <div class="modal-header"> + <div class="modal-body"> <div class="form-group"> <label class="col-sm-3 control-label"> @@ -241,5 +237,3 @@ $('#delete-entry-modal').modal({show: true}); } </script> - -
