Doclist portlet - ContentUpdateBean to replace content of existing item. Web script updates to support content update and launch Edit Properties web client dialog. Doclist header background gradient.

git-svn-id: https://svn.alfresco.com/repos/alfresco-enterprise/alfresco/HEAD/root@6068 c4b6b30b-aa2e-2d43-bbcb-ca4b014f7261
2025-08-07 17:49:17 +00:00 · 2007-06-22 14:28:10 +00:00
parent 6bc01211dd
commit 99f7d0f92a
7 changed files with 332 additions and 13 deletions
--- a/config/alfresco/templates/client/doclist_preview_panel.ftl
+++ b/config/alfresco/templates/client/doclist_preview_panel.ftl
@@ -18,16 +18,24 @@
         <table width="100%" cellpadding="0" cellspacing="0">
            <tr>
 <#if node.isLocked >
-               <td class="docAction docActionLocked">(Locked)</td>
+               <td class="docAction docActionCheckout docActionLocked">(Locked)</td>
 <#elseif hasAspect(node, "cm:workingcopy") == 1>
               <td class="docAction docActionCheckin" <#if node.hasPermission("CheckIn")>onclick='event.cancelBubble=true;MyDocs.checkinItem("${node.name}", "${node.nodeRef}");'</#if>>Check In</td>
 <#else>
               <td class="docAction docActionCheckout" <#if node.hasPermission("CheckOut")>onclick='event.cancelBubble=true;MyDocs.checkoutItem("${node.name}", "${node.nodeRef}");'</#if>>Check Out</td>
 </#if>
-               <td class="docAction docActionEditDetails">Edit Details</td>
+<#if node.isLocked >
+               <td class="docAction docActionEditDetails docActionLocked">Edit Details</td>
+<#else>
+               <td class="docAction docActionEditDetails" onclick="window.open('${url.context}/command/ui/editcontentprops?container=plain&amp;noderef=${node.nodeRef}', '_blank');">Edit Details</td>
+</#if>
            </tr>
            <tr>
-               <td class="docAction docActionUpdate">Update</td>
+<#if node.isLocked >
+               <td class="docAction docActionUpdate docActionLocked">Update</td>
+<#else>
+               <td class="docAction docActionUpdate" onclick="event.cancelBubble=true;MyDocs.updateItem(this, '${node.nodeRef}');">Update</td>
+</#if>
               <td class="docAction docActionViewContent" onclick="window.open('${url.context}${node.downloadUrl}', '_blank');">View Content</td>
            </tr>
            <tr>
--- a/config/alfresco/templates/webscripts/org/alfresco/portlets/doclist.get.html.ftl
+++ b/config/alfresco/templates/webscripts/org/alfresco/portlets/doclist.get.html.ftl
@@ -42,8 +42,8 @@

 <table border=0 cellspacing=0 cellpadding=0 class="docTable">
 <tr>
-   <td height=40>
-      <table border=0 cellspacing=8 cellpadding=0 width=100%>
+   <td height="30" class="docHeader">
+      <table border="0" cellspacing="6" cellpadding="0" width="100%">
         <tr>
            <th><a id="docFilter0" class="docfilterLink <#if filter=0>docfilterLinkSelected</#if>" href="#" onclick="MyDocs.filter(0); return false;">All Items</a></th>
            <th><a id="docFilter1" class="docfilterLink <#if filter=1>docfilterLinkSelected</#if>" href="#" onclick="MyDocs.filter(1); return false;">Word Documents</a></th>
@@ -58,7 +58,13 @@
   </td>
 </tr>
 <tr><td>
+   <div id="docUpdatePanel">
+      <#-- Url encode the path value, and encode any single quotes to generate valid string -->
+      <input class="docFormItem" type="button" value="OK" onclick='MyDocs.updateOK(this, "${path?url?replace("'","_%_")}");'>
+      <input class="docFormItem" type="button" value="Cancel" onclick="MyDocs.closePopupPanel();">
+   </div>
   <div id="docPanelOverlay"></div>
+   <div id="docPanelOverlayAjax"></div>
   <div id="docPanel">
      <#-- populated via an AJAX call to 'doclistpanel' webscript -->
      <#-- resolved path, filter and home.noderef required as arguments -->
@@ -85,7 +91,7 @@ a.docfilterLink:link, a.docfilterLink:visited
 {
   color: #8EA1B3;
   font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
-   font-size: 13px;
+   font-size: 12px;
   font-weight: bold;
   text-decoration: none;
   padding-left: 4px;
@@ -122,6 +128,15 @@ a.docfilterLinkSelected:link, a.docfilterLinkSelected:visited
 }

 #docPanelOverlay
+{
+   background-color: #fff;
+   position: absolute;
+   height: 320px;
+   width: 716px;
+   overflow: hidden;
+}
+
+#docPanelOverlayAjax
 {
   background-color: #fff;
   background-image: url(${url.context}/images/icons/ajax_anim.gif);
@@ -139,6 +154,20 @@ a.docfilterLinkSelected:link, a.docfilterLinkSelected:visited
   border-top: 1px solid #F8FCFD;
   border-bottom: 1px solid #CCD4DB;
 }
+.docRowOdd
+{
+   background-color: #EEF7FB;
+}
+.docRowEven
+{
+   background-color: #F8FCFD;
+}
+
+.docHeader
+{
+   background-image: url(${url.context}/images/parts/doclist_headerbg.png);
+}
+

 .docFooter
 {
@@ -259,9 +288,7 @@ a.docfilterLinkSelected:link, a.docfilterLinkSelected:visited

 .docActionLocked
 {
-   background-image: url(${url.context}/images/icons/doclist_action_locked.png);
-   border-bottom: none;
-   border-right: none;
+   background-image: url(${url.context}/images/icons/doclist_action_locked.png) !important;
   cursor: default !important;
 }

@@ -314,4 +341,26 @@ a.refreshViewLink:link, a.refreshViewLink:visited, a.refreshViewLink:hover
   text-decoration: none;
 }

+#docUpdatePanel
+{
+   position: absolute;
+   border: 1px solid #CCD4DB;
+   background-color: #EEF7FB;
+   width: 24em;
+   height: 5em;
+   padding: 8px;
+   margin: 8px;
+   display: none;
+   z-index: 1;
+   -moz-border-radius: 5px;
+}
+
+.docFormItem
+{
+   margin: 4px;
+   padding: 2px;
+   background-color: #F8FCFD;
+   border: 1px solid #CCD4DB;
+}
+
 </STYLE>
--- a/config/alfresco/templates/webscripts/org/alfresco/portlets/doclistpanel.get.html.ftl
+++ b/config/alfresco/templates/webscripts/org/alfresco/portlets/doclistpanel.get.html.ftl
@@ -16,7 +16,7 @@
           (filter=3 && d.mimetype="application/pdf") ||
           (filter=4 && (dateCompare(d.properties["cm:modified"],date,weekms) == 1 || dateCompare(d.properties["cm:created"], date, weekms) == 1))>
      <#assign count=count+1>
-      <div class="docRow">
+      <div class="docRow docRow${(count % 2 = 0)?string("Odd", "wEven")}">
         <div class="docIcon">
            <a href="${url.context}${d.url}" target="new"><img class="docIconImage" alt="" width="16" height="16" src="${url.context}${d.icon16?replace(".gif",".png")}" border=0></a>
         </div>
--- a/source/java/org/alfresco/web/bean/ajax/ContentUpdateBean.java
+++ b/source/java/org/alfresco/web/bean/ajax/ContentUpdateBean.java
@@ -0,0 +1,157 @@
+/*
+ * Copyright (C) 2005-2007 Alfresco Software Limited.
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; either version 2
+ * of the License, or (at your option) any later version.
+
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+
+ * As a special exception to the terms and conditions of version 2.0 of 
+ * the GPL, you may redistribute this Program in connection with Free/Libre 
+ * and Open Source Software ("FLOSS") applications as described in Alfresco's 
+ * FLOSS exception.  You should have recieved a copy of the text describing 
+ * the FLOSS exception, and it is also available here: 
+ * http://www.alfresco.com/legal/licensing
+ */
+package org.alfresco.web.bean.ajax;
+
+import java.io.File;
+import java.io.Serializable;
+import java.net.URLDecoder;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+import java.util.StringTokenizer;
+
+import javax.faces.context.ExternalContext;
+import javax.faces.context.FacesContext;
+import javax.faces.context.ResponseWriter;
+import javax.servlet.http.HttpServletRequest;
+
+import org.alfresco.model.ContentModel;
+import org.alfresco.repo.content.MimetypeMap;
+import org.alfresco.repo.content.filestore.FileContentReader;
+import org.alfresco.service.ServiceRegistry;
+import org.alfresco.service.cmr.model.FileInfo;
+import org.alfresco.service.cmr.repository.ContentReader;
+import org.alfresco.service.cmr.repository.ContentWriter;
+import org.alfresco.service.cmr.repository.NodeRef;
+import org.alfresco.service.namespace.QName;
+import org.alfresco.util.TempFileProvider;
+import org.alfresco.web.app.servlet.BaseServlet;
+import org.alfresco.web.app.servlet.ajax.InvokeCommand;
+import org.alfresco.web.bean.repository.Repository;
+import org.alfresco.web.forms.XMLUtil;
+import org.apache.commons.fileupload.FileItem;
+import org.apache.commons.fileupload.disk.DiskFileItemFactory;
+import org.apache.commons.fileupload.servlet.ServletFileUpload;
+import org.apache.commons.io.FilenameUtils;
+import org.apache.commons.logging.Log;
+import org.apache.commons.logging.LogFactory;
+import org.w3c.dom.Document;
+import org.w3c.dom.Element;
+import org.w3c.dom.Node;
+
+/**
+ * Bean managing the ajax servlet upload of a multi-part form containing file content
+ * to replace the content of a node within the repository. 
+ * 
+ * @author Mike Hatfield
+ */
+public class ContentUpdateBean
+{
+   private static Log logger = LogFactory.getLog(ContentUpdateBean.class);
+   
+   /**
+    * Ajax method to update file content. A multi-part form is required as the input.
+    * 
+    * "return-page" = javascript to execute on return from the upload request
+    * "nodeRef" = the nodeRef of the item to update the content of
+    * 
+    * @throws Exception
+    */
+   @InvokeCommand.ResponseMimetype(value=MimetypeMap.MIMETYPE_HTML)
+   public void updateFile() throws Exception
+   {
+      FacesContext fc = FacesContext.getCurrentInstance();
+      ExternalContext externalContext = fc.getExternalContext();
+      HttpServletRequest request = (HttpServletRequest)externalContext.getRequest();
+      
+      ServletFileUpload upload = new ServletFileUpload(new DiskFileItemFactory());
+      upload.setHeaderEncoding("UTF-8");
+      
+      List<FileItem> fileItems = upload.parseRequest(request);
+      String strNodeRef = null;
+      String strFilename = null;
+      String strReturnPage = null;
+      File file = null;
+      
+      for (FileItem item : fileItems)
+      {
+         if (item.isFormField() && item.getFieldName().equals("return-page"))
+         {
+            strReturnPage = item.getString();
+         }
+         else if (item.isFormField() && item.getFieldName().equals("nodeRef"))
+         {
+            strNodeRef = item.getString();
+         }
+         else
+         {
+            strFilename = FilenameUtils.getName(item.getName());
+            file = TempFileProvider.createTempFile("alfresco", ".upload");
+            item.write(file);
+         }
+      }
+      
+      if (logger.isDebugEnabled())
+         logger.debug("Ajax content update request: " + strFilename + " to nodeRef: " + strNodeRef + " return page: " + strReturnPage);
+      
+      try
+      {
+         if (file != null && strNodeRef != null && strNodeRef.length() != 0)
+         {
+            NodeRef nodeRef = new NodeRef(strNodeRef);
+            if (nodeRef != null)
+            {
+               ServiceRegistry services = Repository.getServiceRegistry(fc);
+               
+               // get a writer for the content and put the file
+               ContentWriter writer = services.getContentService().getWriter(nodeRef, ContentModel.PROP_CONTENT, true);
+               writer.putContent(file);
+            }
+         }
+      }
+      catch (Exception e)
+      {
+         strReturnPage = strReturnPage.replace("${UPLOAD_ERROR}", e.getMessage());
+      }
+
+      Document result = XMLUtil.newDocument();
+      Element htmlEl = result.createElement("html");
+      result.appendChild(htmlEl);
+      Element bodyEl = result.createElement("body");
+      htmlEl.appendChild(bodyEl);
+
+      Element scriptEl = result.createElement("script");
+      bodyEl.appendChild(scriptEl);
+      scriptEl.setAttribute("type", "text/javascript");
+      Node scriptText = result.createTextNode(strReturnPage);
+      scriptEl.appendChild(scriptText);
+
+      if (logger.isDebugEnabled())
+         logger.debug("Content update request complete.");
+      
+      ResponseWriter out = fc.getResponseWriter();
+      XMLUtil.print(result, out);
+   }
+}
--- a/source/web/WEB-INF/faces-config-beans.xml
+++ b/source/web/WEB-INF/faces-config-beans.xml
@@ -3829,6 +3829,15 @@
      <managed-bean-scope>request</managed-bean-scope>
   </managed-bean>

+   <managed-bean>
+      <description>
+         Bean that accepts Content updates for the repository
+      </description>
+      <managed-bean-name>ContentUpdateBean</managed-bean-name>
+      <managed-bean-class>org.alfresco.web.bean.ajax.ContentUpdateBean</managed-bean-class>
+      <managed-bean-scope>request</managed-bean-scope>
+   </managed-bean>
+
   <managed-bean>
      <description>
         Bean backing ajax calls for the MySpaces portlet
--- a/source/web/images/parts/doclist_headerbg.png
+++ b/source/web/images/parts/doclist_headerbg.png
--- a/source/web/scripts/ajax/doclist.js
+++ b/source/web/scripts/ajax/doclist.js
@@ -14,8 +14,9 @@ var MyDocs = {
   {
      if ($('docPanel'))
      {
+         $('docPanelOverlay').setStyle('opacity', 0);
         // show AJAX loading overlay
-         $('docPanelOverlay').setStyle('visibility', 'visible');
+         $('docPanelOverlayAjax').setStyle('visibility', 'visible');
         $('docPanel').setStyle('visibility', 'hidden');
         // fire off the ajax request to populate the doc list - the 'doclistpanel' webscript
         // is responsible for rendering just the contents of the main panel div
@@ -40,7 +41,7 @@ var MyDocs = {
                  $('docPanel').setHTML("Sorry, data currently unavailable.");
                  
                  // hide the ajax wait panel and show the main doc panel
-                  $('docPanelOverlay').setStyle('visibility', 'hidden');
+                  $('docPanelOverlayAjax').setStyle('visibility', 'hidden');
                  $('docPanel').setStyle('visibility', 'visible');
               }
            }
@@ -53,7 +54,7 @@ var MyDocs = {
      MyDocs.parseDocPanels();
      // hide the ajax wait panel and show the main doc panel
      $('docPanel').setStyle('visibility', 'visible');
-      $('docPanelOverlay').setStyle('visibility', 'hidden');
+      $('docPanelOverlayAjax').setStyle('visibility', 'hidden');
   },

   parseDocPanels: function()
@@ -452,6 +453,8 @@ var MyDocs = {
    */
   filter: function(filter)
   {
+      if (this.popupPanel != null) return;
+
      $$('.docfilterLink').each(function(filterLink, i)
      {
         if (i == filter)
@@ -558,7 +561,100 @@ var MyDocs = {
         }, 
         "noderef=" + noderef
      );
+   },
+
+   /**
+    * Display the Update File pop-up panel
+    */
+   updateItem: function(actionEl, nodeRef)
+   {
+      if (this.popupPanel != null) return;
+      
+      this.fxOverlay = $("docPanelOverlay").effect('opacity', {duration: MyDocs.ANIM_LENGTH});
+      
+      var panel = $("docUpdatePanel");
+      panel.setStyle("opacity", 0);
+      panel.setStyle("display", "inline");
+      Alfresco.Dom.smartAlignElement(panel, actionEl);
+      // make into a dragable panel
+      new Drag.Move(panel);
+      
+      // Generate a file upload element
+      // To perform the actual upload, the element is moved to a hidden iframe
+      // from which the upload is performed - this is required as javascript cannot
+      // set the important properties on a file upload element for security reasons.
+      // <input size="35" style="width:100%" type="file" value="" id="_upload" name="_upload">
+      if (this.fileInput == null)
+      {
+         var fileInput = $(document.createElement("input"));
+         fileInput.type = "file";
+         fileInput.name = "_upload";
+         fileInput.size = "35";
+         fileInput.setStyle("width", "100%");
+         fileInput.addClass("docFormItem");
+         fileInput.injectTop(panel);
+         this.fileInput = fileInput;
+      }
+      
+      var anim = new Fx.Styles(panel, {duration: MyDocs.ANIM_LENGTH, transition: Fx.Transitions.linear});
+      anim.start({'opacity': 1});
+      this.fxOverlay.start(0.5);
+      
+      this.popupPanel = panel;
+      this.popupPanel.nodeRef = nodeRef;
+   },
+   
+   /**
+    * OK button click handler for the Update Content pop-up panel
+    */
+   updateOK: function(actionEl, nodeRef)
+   {
+      if (this.fileInput.value.length > 0)
+      {
+         // call the upload help to perform the upload
+         handleUploadHelper(this.fileInput,
+                         "1",   // TODO: generate unique ID? (parent space noderef?)
+                         MyDocs.updateCompleteHandler,
+                         getContextPath(),
+                         "/ajax/invoke/ContentUpdateBean.updateFile",
+                         {nodeRef: this.popupPanel.nodeRef});
+         this.fileInput = null;
+      }      
+      this.closePopupPanel();
+   },
+   
+   /**
+    * Callback function executed after the upload of a new file is complete
+    */
+   updateCompleteHandler: function(id, path, fileName, error)
+   {
+      if (error == null)
+      {
+         MyDocs.start();
+      }
+      else
+      {
+         alert("ERROR: " + error);
+      }
+      if (this.fxOverlay)
+      {
+         this.fxOverlay.start(0);
+      }
+   },
+
+   /**
+    * Cancel button click handler for various pop-up panels
+    */
+   closePopupPanel: function()
+   {
+      if (this.popupPanel != null)
+      {
+         this.popupPanel.setStyle("display", "none");
+         this.popupPanel = null;
+      }
+      this.fxOverlay.start(0);
   }
+   
 };

 window.addEvent('load', MyDocs.start);