add/remove policy data from subsection

cms/static/js/base.js

@@ -40,8 +40,16 @@ $(document).ready(function() {
     $('.add-policy-data').bind('click', addPolicyMetadata);
     $('.remove-policy-data').bind('click', removePolicyMetadata);
 
+    $('.sync-date').bind('click', syncReleaseDate);
+
 });
 
+function syncReleaseDate(e) {
+    e.preventDefault();
+    $("#start_date").val("");
+    $("#start_time").val("");
+}
+
 function addPolicyMetadata(e) {
     e.preventDefault();
     var template =$('#add-new-policy-element-template > li'); 
@@ -55,9 +63,10 @@ function removePolicyMetadata(e) {
     e.preventDefault();
     policy_name = $(this).data('policy-name');
     var _parent_el = $(this).parent('li:.policy-list-element');
-    //$(_parent_el).remove();
-
-    _parent_el.appendTo("#policy-to-delete");
+    if ($(_parent_el).hasClass("new-policy-list-element"))
+        _parent_el.remove();
+    else
+        _parent_el.appendTo("#policy-to-delete");
 }
 
 
@@ -129,7 +138,8 @@ function saveSubsection(e) {
     // 'null' presented to the server means 'remove'
     $("#policy-to-delete > li.policy-list-element").each(function(i, element) {
         name = $(element).children('.policy-list-name').val();
-        metadata[name] = null;
+        if (name != "")
+           metadata[name] = null;
     });
 
     // Piece back together the date/time UI elements into one date/time string

cms/static/sass/_base.scss

@@ -124,13 +124,15 @@ label {
 }
 
 .new-unit-item,
-.new-subsection-item {
+.new-subsection-item,
+.new-policy-item {
     @include grey-button;
     margin: 5px 8px;
     padding: 3px 10px 4px 10px;
     font-size: 10px;
 
     .new-folder-icon,
+    .new-policy-icon,
     .new-unit-icon {
         position: relative;
         top: 2px;

cms/static/sass/_graphics.scss

@@ -171,6 +171,14 @@
 	background: url(../img/new-unit-icon.png) right no-repeat;
 }
 
+.new-policy-icon {
+	display: inline-block;
+	width: 23px;
+	height: 12px;
+	margin-right: 8px;
+	background: url(../img/new-unit-icon.png) right no-repeat;
+}
+
 .textbook-icon {
 	display: inline-block;
 	width: 32px;

cms/templates/edit_subsection.html

@@ -19,29 +19,32 @@
   <div class="inner-wrapper">
     <div class="main-column">
       <article class="subsection-body window">
-	<div class="subsection-name-input">
-	  <label>Display Name:</label>
-	  <input type="text" value="${subsection.metadata['display_name']}" class="subsection-display-name-input" data-metadata-name="display_name"/>
-	</div>
-	<div>
-	  <label>Format:</label>
-	  <input type="text" value="${subsection.metadata['format'] if 'format' in subsection.metadata else ''}" class="unit-subtitle" data-metadata-name="format"/>
-	</div>
-	<div class="unit-list">
-	  <label>Units:</label>
-	  ${units.enum_units(subsection)}
-	</div>
-	<div class='wip-box'>
-	  <label>Policy:</label>
-	  <ol class='policy-list'>
-	  	% for policy_name in policy_metadata.keys():
-	  	<li class="policy-list-element">
-	  		<input type="text" class="policy-list-name" name="${policy_name}" value="${policy_name}" disabled />:&nbsp;<input type="text" class="policy-list-value" name="${policy_metadata[policy_name]}" value="${policy_metadata[policy_name]}" size="30"/><a href="#" class="delete-icon remove-policy-data"></a>
-	  	</li>
-	  	% endfor 
-	  	<a href="#" class="add-button add-policy-data">Add</a>
-	  </ol>
-	</div>					
+		<div class="subsection-name-input">
+		  <label>Display Name:</label>
+		  <input type="text" value="${subsection.metadata['display_name']}" class="subsection-display-name-input" data-metadata-name="display_name"/>
+		</div>
+		<div>
+		  <label>Format:</label>
+		  <input type="text" value="${subsection.metadata['format'] if 'format' in subsection.metadata else ''}" class="unit-subtitle" data-metadata-name="format"/>
+		</div>
+		<div class="unit-list">
+		  <label>Units:</label>
+		  ${units.enum_units(subsection)}
+		</div>
+		<div>
+		  <label>Policy:</label>
+		  <ol class='policy-list'>
+		  	% for policy_name in policy_metadata.keys():
+		  	<li class="policy-list-element">
+		  		<input type="text" class="policy-list-name" name="${policy_name}" value="${policy_name}" disabled size="15"/>:&nbsp;<input type="text" class="policy-list-value" name="${policy_metadata[policy_name]}" value="${policy_metadata[policy_name]}" size="40"/><a href="#" class="delete-icon remove-policy-data"></a>
+		  	</li>
+		  	% endfor 
+
+		    <a href="#" class="new-policy-item add-policy-data" >
+		      <span class="new-policy-icon"></span>New Policy Data
+		    </a>
+		  </ol>
+		</div>					
       </article>
     </div>
 
@@ -49,7 +52,7 @@
     </div>
 
     <div id="add-new-policy-element-template" style="display:none">
- 	  	<li class="policy-list-element"><input type="text" class="policy-list-name" autocomplete="off"/>:&nbsp;<input type="text" class="policy-list-value" size=30 autocomplete="off"/><a href="#" class="delete-icon remove-policy-data"></a></li>   	
+ 	  	<li class="policy-list-element new-policy-list-element"><input type="text" class="policy-list-name" autocomplete="off" size="15"/>:&nbsp;<input type="text" class="policy-list-value" size=40 autocomplete="off"/><a href="#" class="delete-icon remove-policy-data"></a></li>   	
     </div>
 
     <div class="sidebar">
@@ -66,7 +69,7 @@
 	      <input type="text" id="start_date" name="start_date" value="${start_date.strftime('%m/%d/%Y') if start_date is not None else ''}" placeholder="MM/DD/YYYY" class="date" size='15' autocomplete="off"/>
 	      <input type="text" id="start_time" name="start_time" value="${start_date.strftime('%H:%M') if start_date is not None else ''}" placeholder="HH:MM" class="time" size='10' autocomplete="off"/> 
 	    </div>
-	    % if start_date != parent_start_date and parent_start_date is not None:
+	    % if subsection.start != parent_item.start and subsection.start:
 	    <p class="notice">The date above differs from the release date of ${parent_item.display_name} – ${parent_start_date.strftime('%m/%d/%Y')} at ${parent_start_date.strftime('%H:%M')}. <a href="#" class="sync-date">Sync to ${parent_item.display_name}.</a></p>
 	    % endif
 	  </div>