From eaf756c02c5bc2f42ee897b5077ebfbb10387468 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Thu, 14 Aug 2014 15:21:33 +0100
Subject: [PATCH] CRM-15109 - Fix deleting custom records and update UX to 4.5
 conventions

---
 CRM/Contact/Page/View/CustomData.php          |  5 +-
 templates/CRM/Contact/Form/Contact.tpl        | 17 +++++++
 .../CRM/Contact/Form/Edit/CustomData.tpl      | 47 ++----------------
 templates/CRM/Custom/Form/CustomData.tpl      | 16 ++++--
 templates/CRM/Custom/Page/CustomDataView.tpl  | 49 +++++++++----------
 5 files changed, 62 insertions(+), 72 deletions(-)

diff --git a/CRM/Contact/Page/View/CustomData.php b/CRM/Contact/Page/View/CustomData.php
index 2406084a6a..07a89e8277 100644
--- a/CRM/Contact/Page/View/CustomData.php
+++ b/CRM/Contact/Page/View/CustomData.php
@@ -128,9 +128,12 @@ class CRM_Contact_Page_View_CustomData extends CRM_Core_Page {
         'style'
       );
 
-      if ($displayStyle === 'Tab with table' && $this->_multiRecordDisplay != 'single') {
+      if ($this->_multiRecordDisplay != 'single') {
         $id = "custom_{$this->_groupId}";
         $this->ajaxResponse['tabCount'] = CRM_Contact_BAO_Contact::getCountComponent($id, $this->_contactId, $groupTree[$this->_groupId]['table_name']);
+      }
+
+      if ($displayStyle === 'Tab with table' && $this->_multiRecordDisplay != 'single') {
         $ctype = CRM_Core_DAO::getFieldValue('CRM_Contact_DAO_Contact',
           $this->_contactId,
           'contact_type'
diff --git a/templates/CRM/Contact/Form/Contact.tpl b/templates/CRM/Contact/Form/Contact.tpl
index 8923334e01..732830e129 100644
--- a/templates/CRM/Contact/Form/Contact.tpl
+++ b/templates/CRM/Contact/Form/Contact.tpl
@@ -108,6 +108,7 @@
 
   <script type="text/javascript" >
   CRM.$(function($) {
+    var $form = $("#{/literal}{$form.formName}{literal}");
     var action = "{/literal}{$action}{literal}";
 
     $('.crm-accordion-body').each( function() {
@@ -235,6 +236,22 @@
       return true;
     });
     {/literal}{/if}{literal}
+
+    // Handle delete of multi-record custom data
+    $form.on('click', '.crm-custom-value-del', function(e) {
+      e.preventDefault();
+      var $el = $(this),
+        msg = '{/literal}{ts escape="js"}The record will be deleted immediately. This action cannot be undone.{/ts}{literal}';
+      CRM.confirm({title: $el.attr('title'), message: msg})
+        .on('crmConfirm:yes', function() {
+          var url = CRM.url('civicrm/ajax/customvalue');
+          var request = $.post(url, $el.data('post'));
+          CRM.status({success: '{/literal}{ts escape="js"}Record Deleted{/ts}{literal}'}, request);
+          var addClass = '.add-more-link-' + $el.data('post').groupID;
+          $el.closest('div.crm-custom-accordion').remove();
+          $('div' + addClass).last().show();
+        });
+    });
   });
 
 </script>
diff --git a/templates/CRM/Contact/Form/Edit/CustomData.tpl b/templates/CRM/Contact/Form/Edit/CustomData.tpl
index d0ea6b03dc..ba1c641c18 100644
--- a/templates/CRM/Contact/Form/Edit/CustomData.tpl
+++ b/templates/CRM/Contact/Form/Edit/CustomData.tpl
@@ -24,13 +24,12 @@
  +--------------------------------------------------------------------+
 *}
 
-<script type="text/javascript">var showTab = Array();</script>
 {foreach from=$groupTree item=cd_edit key=group_id}
   {if $cd_edit.is_multiple eq 1}
     {assign var=tableID value=$cd_edit.table_id}
     {assign var=divName value=$group_id|cat:"_$tableID"}
     <div></div>
-    <div id="{$cd_edit.name|cat:'_$divName'}"
+    <div
      class="crm-accordion-wrapper crm-custom-accordion {if $cd_edit.collapse_display and !$skipTitle}collapsed{/if}">
   {else}
     <div id="{$cd_edit.name}"
@@ -44,17 +43,11 @@
       {if $cd_edit.is_multiple eq 1}
         {if $cd_edit.table_id}
           <table class="no-border">
-            <tr id="statusmessg_{$group_id|cat:"_$tableID"}" class="hiddenElement">
-              <td><span class="success-status"></span></td>
-            </tr>
             <tr>
-              <div class="crm-submit-buttons">
-                <a href="#"
-                   onclick="showDelete( {$tableID}, '{$cd_edit.name}_{$group_id|cat:"_$tableID"}', {$group_id}, {$contactId} ); return false;"
-                   class="button delete-button" title="{ts 1=$cv_edit.title}Delete this %1 record{/ts}">
-                  <span><div class="icon delete-icon"></div>{ts}Delete{/ts}</span>
-                </a>
-              </div>
+              <a href="#" class="crm-hover-button crm-custom-value-del" title="{ts 1=$cd_edit.title}Delete %1{/ts}"
+               data-post='{ldelim}"valueID": "{$tableID}", "groupID": "{$group_id}", "contactId": "{$contactId}", "key": "{crmKey name='civicrm/ajax/customvalue'}"{rdelim}'>
+                <span class="icon delete-icon"></span> {ts}Delete{/ts}
+              </a>
               <!-- crm-submit-buttons -->
             </tr>
           </table>
@@ -69,35 +62,5 @@
   {/foreach}
 
   {include file="CRM/common/customData.tpl"}
-  <script type="text/javascript">
-    {literal}
-
-    function hideStatus(valueID, groupID) {
-      cj('#statusmessg_' + groupID + '_' + valueID).hide();
-    }
-
-    function showDelete(valueID, elementID, groupID, contactID) {
-      var confirmMsg = '{/literal}{ts escape='js'}Are you sure you want to delete this record?{/ts}{literal} &nbsp; <a href="#" onclick="deleteCustomValue( ' + valueID + ',\'' + elementID + '\',' + groupID + ',' + contactID + ' ); return false;" style="text-decoration: underline;">{/literal}{ts escape='js'}Yes{/ts}{literal}</a>&nbsp;&nbsp;&nbsp;<a href="#" onclick="hideStatus( ' + valueID + ', ' + groupID + ' ); return false;" style="text-decoration: underline;">{/literal}{ts escape='js'}No{/ts}{literal}</a>';
-      cj('tr#statusmessg_' + groupID + '_' + valueID).show().children().find('span').html(confirmMsg);
-    }
-
-    function deleteCustomValue(valueID, elementID, groupID, contactID) {
-      var postUrl = {/literal}"{crmURL p='civicrm/ajax/customvalue' h=0 }"{literal},
-      request = cj.ajax({
-        type: "POST",
-        data: "valueID=" + valueID + "&groupID=" + groupID + "&contactId=" + contactID + "&key={/literal}{crmKey name='civicrm/ajax/customvalue'}{literal}",
-        url: postUrl,
-        success: function (html) {
-          cj('#' + elementID).hide();
-          hideStatus(valueID, groupID);
-          var element = cj('.ui-tabs-nav #tab_custom_' + groupID + ' a');
-          cj(element).html(cj(element).attr('title') + ' (' + html + ') ');
-        }
-      });
-      CRM.status({success: '{/literal}{ts escape="js"}Record Deleted{/ts}{literal}'}, request);
-    }
-
-    {/literal}
-  </script>
 
   {include file="CRM/Form/attachmentjs.tpl"}
diff --git a/templates/CRM/Custom/Form/CustomData.tpl b/templates/CRM/Custom/Form/CustomData.tpl
index 0960fae327..1a4677d58f 100644
--- a/templates/CRM/Custom/Form/CustomData.tpl
+++ b/templates/CRM/Custom/Form/CustomData.tpl
@@ -38,7 +38,12 @@
     <div class="messages help">{$cd_edit.help_post}</div>
   {/if}
   {if $cd_edit.is_multiple and ( ( $cd_edit.max_multiple eq '' )  or ( $cd_edit.max_multiple > 0 and $cd_edit.max_multiple > $cgCount ) ) }
-    <div id="add-more-link-{$cgCount}" class="add-more-link-{$group_id}-{$cgCount}"><a href="#" onclick="CRM.buildCustomData('{$cd_edit.extends}',{if $cd_edit.subtype}'{$cd_edit.subtype}'{else}'{$cd_edit.extends_entity_column_id}'{/if}, '', {$cgCount}, {$group_id}, true ); return false;">{ts 1=$cd_edit.title}Add another %1 record{/ts}</a></div>
+    <div id="add-more-link-{$cgCount}" class="add-more-link-{$group_id} add-more-link-{$group_id}-{$cgCount}">
+      <a href="#" class="crm-hover-button" onclick="CRM.buildCustomData('{$cd_edit.extends}',{if $cd_edit.subtype}'{$cd_edit.subtype}'{else}'{$cd_edit.extends_entity_column_id}'{/if}, '', {$cgCount}, {$group_id}, true ); return false;">
+        <span class="icon ui-icon-circle-plus"></span>
+        {ts 1=$cd_edit.title}Another %1 record{/ts}
+      </a>
+    </div>
   {/if}
 {else}
   {foreach from=$groupTree item=cd_edit key=group_id name=custom_sets}
@@ -61,7 +66,7 @@
      <div class="custom-group custom-group-{$cd_edit.name} crm-accordion-wrapper {if $cd_edit.collapse_display and !$skipTitle}collapsed{/if}">
       {if !$skipTitle}
       <div class="crm-accordion-header">
-        {$cd_edit.title}
+        {$cd_edit.title} {$cgCount}
        </div><!-- /.crm-accordion-header -->
       {/if}
       <div class="crm-accordion-body">
@@ -86,7 +91,12 @@
           <em>{ts 1=$cd_edit.title}Click "Edit Contact" to add more %1 records{/ts}</em>
         </div>
       {else}
-        <div id="add-more-link-{$cgCount}"><a href="#" onclick="CRM.buildCustomData('{$cd_edit.extends}',{if $cd_edit.subtype}'{$cd_edit.subtype}'{else}'{$cd_edit.extends_entity_column_id}'{/if}, '', {$cgCount}, {$group_id}, true ); return false;">{ts 1=$cd_edit.title}Add another %1 record{/ts}</a></div>       
+        <div id="add-more-link-{$cgCount}">
+          <a href="#" class="crm-hover-button" onclick="CRM.buildCustomData('{$cd_edit.extends}',{if $cd_edit.subtype}'{$cd_edit.subtype}'{else}'{$cd_edit.extends_entity_column_id}'{/if}, '', {$cgCount}, {$group_id}, true ); return false;">
+            <span class="icon ui-icon-circle-plus"></span>
+            {ts 1=$cd_edit.title}Another %1 record{/ts}
+          </a>
+        </div>
       {/if}
     {/if}
     {/if}
diff --git a/templates/CRM/Custom/Page/CustomDataView.tpl b/templates/CRM/Custom/Page/CustomDataView.tpl
index 28474618b5..66783eaf8f 100644
--- a/templates/CRM/Custom/Page/CustomDataView.tpl
+++ b/templates/CRM/Custom/Page/CustomDataView.tpl
@@ -25,6 +25,7 @@
 *}
 {* Custom Data view mode*}
 {assign var="showEdit" value=1}
+{assign var="rowCount" value=1}
 {foreach from=$viewCustomData item=customValues key=customGroupId}
   {foreach from=$customValues item=cd_edit key=cvID}
 {if $multiRecordDisplay neq 'single'}
@@ -49,16 +50,16 @@
           <div class="crm-accordion-wrapper {if $cd_edit.collapse_display eq 0 or $skipTitle} {else}collapsed{/if}">
             {if !$skipTitle}
               <div class="crm-accordion-header">
-                {$cd_edit.title}
+                {$cd_edit.title} {$rowCount}
               </div>
             {/if}
             <div class="crm-accordion-body">
               {if $groupId and $cvID and $editCustomData}
                 <div class="crm-submit-buttons">
-                  <a href="#"
-                     onclick="showDelete( {$cvID}, '{$cd_edit.name}_{$index}', {$customGroupId}, {$contactId} ); return false;"
-                     class="button delete-button" title="{ts 1=$cd_edit.title}Delete this %1 record{/ts}">
-                    <span><div class="icon delete-icon"></div>{ts}Delete{/ts}</span>
+                  <a href="#" class="crm-hover-button crm-custom-value-del"
+                     data-post='{ldelim}"valueID": "{$cvID}", "groupID": "{$customGroupId}", "contactId": "{$contactId}", "key": "{crmKey name='civicrm/ajax/customvalue'}"{rdelim}'
+                     title="{ts 1=$cd_edit.title|cat:" `$rowCount`"}Delete %1{/ts}">
+                    <span class="icon delete-icon"></span> {ts}Delete{/ts}
                   </a>
                 </div>
               {/if}
@@ -115,6 +116,7 @@
                   </tr>
                 </table>
               {/foreach}
+              {assign var="rowCount" value=$rowCount+1}
             </div>
             <!-- end of body -->
             <div class="clear"></div>
@@ -186,28 +188,23 @@
 {if $groupId}
   <script type="text/javascript">
     {literal}
-    function hideStatus(valueID, groupID) {
-      cj('#statusmessg_' + groupID + '_' + valueID).hide();
-    }
-    function showDelete(valueID, elementID, groupID, contactID) {
-      var confirmMsg = '{/literal}{ts escape='js'}Are you sure you want to delete this record?{/ts}{literal} &nbsp; <a href="#" onclick="deleteCustomValue( ' + valueID + ',\'' + elementID + '\',' + groupID + ',' + contactID + ' ); return false;" style="text-decoration: underline;">{/literal}{ts escape='js'}Yes{/ts}{literal}</a>&nbsp;&nbsp;&nbsp;<a href="#" onclick="hideStatus( ' + valueID + ', ' + groupID + ' ); return false;" style="text-decoration: underline;">{/literal}{ts escape='js'}No{/ts}{literal}</a>';
-      cj('tr#statusmessg_' + groupID + '_' + valueID).show().children().find('span').html(confirmMsg);
-    }
-    function deleteCustomValue(valueID, elementID, groupID, contactID) {
-      var postUrl = {/literal}"{crmURL p='civicrm/ajax/customvalue' h=0 }"{literal},
-      request = cj.ajax({
-        type: "POST",
-        data: "valueID=" + valueID + "&groupID=" + groupID + "&contactId=" + contactID + "&key={/literal}{crmKey name='civicrm/ajax/customvalue'}{literal}",
-        url: postUrl,
-        success: function (html) {
-          cj('#' + elementID).hide();
-          hideStatus(valueID, groupID);
-          var element = cj('.ui-tabs-nav #tab_custom_' + groupID + ' a');
-          cj(element).html(cj(element).attr('title') + ' (' + html + ') ');
-        }
+    CRM.$(function($) {
+      // Handle delete of multi-record custom data
+      $('#crm-container')
+        .off('.customValueDel')
+        .on('click.customValueDel', '.crm-custom-value-del', function(e) {
+          e.preventDefault();
+          var $el = $(this),
+            msg = '{/literal}{ts escape="js"}The record will be deleted immediately. This action cannot be undone.{/ts}{literal}';
+          CRM.confirm({title: $el.attr('title'), message: msg})
+            .on('crmConfirm:yes', function() {
+              var url = CRM.url('civicrm/ajax/customvalue');
+              var request = $.post(url, $el.data('post'))
+                .done(CRM.refreshParent($el));
+              CRM.status({success: '{/literal}{ts escape="js"}Record Deleted{/ts}{literal}'}, request);
+            });
+        });
       });
-      CRM.status({success: '{/literal}{ts escape="js"}Record Deleted{/ts}{literal}'}, request);
-    }
     {/literal}
   </script>
 {/if}
-- 
2.25.1