Added a contacts tab to the mailing list edit page

putyourlightson · Sep 25, 2020 · b442920 · b442920
1 parent b45de54
commit b442920
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 21 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## 1.16.0 - Unreleased
 ### Added
 - Added a default contact to use for test emails to campaign types ([#166](https://github.com/putyourlightson/craft-campaign/issues/166)).
+- Added a contacts tab to the mailing list edit page ([#174](https://github.com/putyourlightson/craft-campaign/issues/174)).
 
 ### Changed
 - Pending contacts now persist so that verification links remain valid until they are purged ([#169](https://github.com/putyourlightson/craft-campaign/issues/169)).

diff --git a/src/resources/js/ContactEdit.js b/src/resources/js/ContactEdit.js
@@ -16,8 +16,8 @@ Campaign.ContactEdit = Garnish.Base.extend(
 
             if (confirm($this.attr('data-confirm'))) {
                 var data = {
-                    contactId: $this.closest('form').find('input[name=contactId]').val(),
-                    mailingListId: $row.attr('data-id'),
+                    contactId: $row.attr('data-contact-id'),
+                    mailingListId: $row.attr('data-mailing-list-id'),
                 };
 
                 Craft.postActionRequest($this.attr('data-action'), data, $.proxy(function(response, textStatus) {

diff --git a/src/templates/_includes/contact-mailing-list-subscribe-row.html b/src/templates/_includes/contact-mailing-list-subscribe-row.html
@@ -0,0 +1,17 @@
+{% set subscriptionStatus = contact.getMailingListSubscriptionStatus(mailingList.id) %}
+
+<tr data-contact-id="{{ contact.id }}" data-mailing-list-id="{{ mailingList.id }}">
+    <th><a href="{{ contact.cpEditUrl }}">{{ contact.email }}</a></th>
+    <td>
+        <label class="subscriptionStatus {{ subscriptionStatus }}">
+            {{ subscriptionStatus ? subscriptionStatus : 'none'|t('campaign') }}
+        </label>
+    </td>
+    <td class="thin">
+        <input type="button" class="btn small update-subscription subscribe {{ subscriptionStatus == 'subscribed' or subscriptionStatus == 'bounced' ? 'hidden' }}" value="{{ 'Subscribe'|t('campaign') }}" data-action="campaign/contacts/subscribe-mailing-list" data-confirm="{{ 'Are you sure you want to subscribe this contact to this mailing list?'|t('campaign') }}">
+        <input type="button" class="btn small update-subscription unsubscribe {{ subscriptionStatus != 'subscribed' or subscriptionStatus == 'bounced' ? 'hidden' }}" value="{{ 'Unsubscribe'|t('campaign') }}" data-action="campaign/contacts/unsubscribe-mailing-list" data-confirm="{{ 'Are you sure you want to unsubscribe this contact from this mailing list?'|t('campaign') }}">
+    </td>
+    <td class="thin">
+        <a class="delete icon update-subscription remove {{ subscriptionStatus == '' ? 'hidden' }}" title="{{ 'Remove from mailing list'|t('campaign') }}" role="button" data-action="campaign/contacts/remove-mailing-list" data-confirm="{{ 'Are you sure you want to remove this contact from this mailing list?'|t('campaign') }}"></a>
+    </td>
+</tr>
diff --git a/src/templates/contacts/_edit.html b/src/templates/contacts/_edit.html
@@ -77,22 +77,7 @@
                         </thead>
                         <tbody>
                             {% for mailingList in mailingLists %}
-                                {% set subscriptionStatus = contact.getMailingListSubscriptionStatus(mailingList.id) %}
-                                <tr data-id="{{ mailingList.id }}">
-                                    <th scope="row" data-title="{{ 'Title'|t('app') }}"><a href="{{ mailingList.cpEditUrl }}">{{ mailingList.title }}</a></th>
-                                    <td data-title="{{ 'Subscription Status'|t('campaign') }}">
-                                        <label class="subscriptionStatus {{ subscriptionStatus }}">
-                                            {{ subscriptionStatus ? subscriptionStatus : 'none'|t('campaign') }}
-                                        </label>
-                                    </td>
-                                    <td class="thin">
-                                        <input type="button" class="btn small update-subscription subscribe {{ subscriptionStatus == 'subscribed' or subscriptionStatus == 'bounced' ? 'hidden' }}" value="{{ 'Subscribe'|t('campaign') }}" data-action="campaign/contacts/subscribe-mailing-list" data-confirm="{{ 'Are you sure you want to subscribe this contact to this mailing list?'|t('campaign') }}">
-                                        <input type="button" class="btn small update-subscription unsubscribe {{ subscriptionStatus != 'subscribed' or subscriptionStatus == 'bounced' ? 'hidden' }}" value="{{ 'Unsubscribe'|t('campaign') }}" data-action="campaign/contacts/unsubscribe-mailing-list" data-confirm="{{ 'Are you sure you want to unsubscribe this contact from this mailing list?'|t('campaign') }}">
-                                    </td>
-                                    <td class="thin">
-                                        <a class="delete icon update-subscription remove {{ subscriptionStatus == '' ? 'hidden' }}" title="{{ 'Remove from mailing list'|t('campaign') }}" role="button" data-action="campaign/contacts/remove-mailing-list" data-confirm="{{ 'Are you sure you want to remove this contact from this mailing list?'|t('campaign') }}"></a>
-                                    </td>
-                                </tr>
+                                {% include 'campaign/_includes/contact-mailing-list-subscribe-row' %}
                             {% endfor %}
                         </tbody>
                     </table>

diff --git a/src/templates/mailinglists/_edit.html b/src/templates/mailinglists/_edit.html
@@ -9,11 +9,17 @@
     { label: mailingListType.name, url: url('campaign/mailinglists/' ~ mailingListType.handle) }
 ] %}
 
-{% set tabs = {'mailinglist': {'label': 'Mailing List'|t('campaign'), 'url': '#mailinglist'}} %}
+{% set tabs = {
+    'mailinglist': {'label': 'Mailing List'|t('campaign'), 'url': '#mailinglist'},
+} %}
 {% if mailingList.id %}
-    {% set tabs = tabs|merge({'report': {'label': 'Report', 'url': '#report'}}) %}
+    {% set tabs = tabs|merge({
+        'contacts': {'label': 'Contacts'|t('campaign'), 'url': '#contacts'},
+        'report': {'label': 'Report', 'url': '#report'}
+    }) %}
 {% endif %}
 
+{% do view.registerAssetBundle('putyourlightson\\campaign\\assets\\ContactEditAsset') %}
 {% do view.registerAssetBundle('putyourlightson\\campaign\\assets\\ReportsAsset') %}
 
 
@@ -67,6 +73,28 @@
         </div>
 
         {% if mailingList.id %}
+            <div id="contacts" class="hidden">
+                {% set contacts = craft.campaign.contacts.mailingListId(mailingList.id).all() %}
+
+                {% if contacts|length %}
+                    <table id="contacts" class="data fullwidth collapsible">
+                        <thead>
+                            <th scope="col">{{ "Email"|t('campaign') }}</th>
+                            <th scope="col">{{ "Subscription Status"|t('campaign') }}</th>
+                            <td class="thin"></td>
+                            <td class="thin"></td>
+                        </thead>
+                        <tbody>
+                            {% for contact in contacts %}
+                                {% include 'campaign/_includes/contact-mailing-list-subscribe-row' %}
+                            {% endfor %}
+                        </tbody>
+                    </table>
+                {% else %}
+                    <p>{{ "No contacts have been assigned to this mailing list."|t('campaign') }}</p>
+                {% endif %}
+            </div>
+
             <div id="report" class="hidden">
                 {% include 'campaign/reports/mailinglists/_includes/report' %}
             </div>
@@ -131,4 +159,4 @@ <h5 class="heading">{{ "Date Updated"|t('app') }}</h5>
     {% js %}
         window.slugGenerator = new Craft.SlugGenerator('#title', '#slug');
     {% endjs %}
-{% endif %}
+{% endif %}