Updating with new ui form elements
authorSteve Sutton <steve@gaslightmedia.com>
Wed, 31 Jul 2019 19:22:33 +0000 (15:22 -0400)
committerSteve Sutton <steve@gaslightmedia.com>
Wed, 31 Jul 2019 19:22:33 +0000 (15:22 -0400)
Using new ui elements for foundation 6

views/admin/messages/editHtmlEmail.html
views/admin/messages/editTemplate.html
views/admin/messages/search.html

index 5852876..d3cb2f2 100644 (file)
@@ -2,12 +2,6 @@
 {include file='admin/header.html'}
 <h3>Html Email</h3>
 
-{* UI for Delete Dialog *}
-{if !$newEntry}
-    {assign var="itemName" value="Message"}
-    {assign var="deleteUrl" value="{$thisUrl}?page={$thisPage}&option=deleteMessage&id={$message.fieldData.id}"}
-    {include file='admin/ui/deleteDialog.html'}
-{/if}
 {if $error}
     <div class="callout alert" data-closable>
         There was an error saving your data.
         </button>
     </div>
 {/if}
-<form action="{$thisUrl}?page={$thisPage}" method="post" style="max-width: 600px;">
-    <input type="hidden" name="option" value="updateHtmlEmail" />
-    {if !$newEntry}
-        <input type="hidden" name="id" value="{$message.fieldData.id}" />
-    {/if}
-
-    {* This is for the rest of UI elements *}
-    {assign var="data" value=$message}
-
-    {assign var="field" value="archived"}
-    {assign var="fieldLabel" value="Archived"}
-    {include file="admin/ui/f6-checkbox.html"}
-
-    {assign var="field" value="template_id"}
-    {assign var="fieldLabel" value="Template:"}
-    {include file="admin/ui/f6-select.html"}
-
-    {assign var="field" value="from_name"}
-    {assign var="fieldLabel" value="From Name:"}
-    {include file="admin/ui/f6-text.html"}
-
-    {assign var="field" value="from_email"}
-    {assign var="fieldLabel" value="From Email:"}
-    {include file="admin/ui/f6-text.html"}
-
-    {assign var="field" value="reply_to_email"}
-    {assign var="fieldLabel" value="Reply To:"}
-    {include file="admin/ui/f6-text.html"}
-
-    {assign var="field" value="subject"}
-    {assign var="fieldLabel" value="Subject:"}
-    {include file="admin/ui/f6-text.html"}
 
-    {assign var="field" value="message_body"}
-    {assign var="fieldLabel" value="Message Content:"}
-    {include file="admin/ui/f6-editor.html"}
-
-    {assign var="tData" value=$merge_tags}
-
-    <strong>Merge Tags</strong>
-    <p>The "merge tags" listed below may be used in the email message to include certain information about the Member or Contact. Be sure to include the "{" and "}" and "$" characters exactly as shown.</p>
-
-    <div class="grid-x grid-margin-x">
-        <div class="cell small-8">
-            {html_table loop=$tData cols=2 table_attr='border=0 style=width: 400px;' caption='Merge Tags Examples' td_attr=['align="left"','align="left"']}
-        </div>
-    </div>
+{* Form Start *}
+{$ui = [
+    'id'               => 'edit-email-message',
+    'action'           => "{$thisUrl}?page={$thisPage}",
+    'method'           => 'post',
+    'file'             => false,
+    'validate'         => true,
+    'validateFocusMsg' => true
+]}
+{include file='ui/f6/form-start.html'}
+
+<input type="hidden" name="option" value="updateHtmlEmail" />
+{if !$newEntry}
+    <input type="hidden" name="id" value="{$message.fieldData.id}" />
+{/if}
 
-    <div class="grid-x grid-margin-x">
-        <div class="cell small-12">
-            <input type="submit" class="button button-primary" value="Save" />
+{* This is for the rest of UI elements *}
+{$data = $message}
+
+<div class="grid-x grid-margin-x">
+
+    <fieldset class="fieldset cell small-12 medium-6">
+        <legend>Message Information</legend>
+
+        {* Archived *}
+        {$ui = [
+            'value'     => $data.fieldData.archived.value,
+            'field'     => 'archived',
+            'label'     => 'Archived',
+            'required'  => $data.fieldRequired.archived,
+            'errorText' => 'Archived is Required',
+            'dataError' => $data.fieldFail.archived
+        ]}
+        {include file='ui/f6/checkbox.html'}
+
+        {* Template *}
+        {$ui = [
+            'value'     => $data.fieldData.template_id.value,
+            'field'     => 'template_id',
+            'label'     => 'Template',
+            'list'      => $data.fieldData.template_id.list,
+            'l_label'   => 'name',
+            'l_value'   => 'value',
+            'l_blank'   => true,
+            'required'  => $data.fieldRequired.template_id,
+            'errorText' => 'Template is Required',
+            'dataError' => $data.fieldFail.template_id
+        ]}
+        {include file='ui/f6/select.html'}
+
+        {* From Name *}
+        {$ui = [
+            'value'       => $data.fieldData.from_name,
+            'field'       => 'from_name',
+            'label'       => 'From Name',
+            'required'    => $data.fieldRequired.from_name,
+            'errorText'   => 'From Name is Required',
+            'dataError'   => $data.fieldFail.from_name
+        ]}
+        {include file='ui/f6/text.html'}
+
+        {* From Email *}
+        {$ui = [
+            'value'       => $data.fieldData.from_email,
+            'field'       => 'from_email',
+            'label'       => 'From Email',
+            'pattern'     => 'email',
+            'required'    => $data.fieldRequired.from_email,
+            'errorText'   => 'From Email is Required to be a valid email',
+            'dataError'   => $data.fieldFail.from_email
+        ]}
+        {include file='ui/f6/text.html'}
+
+        {* Reply To *}
+        {$ui = [
+            'value'       => $data.fieldData.reply_to_email,
+            'field'       => 'reply_to_email',
+            'label'       => 'Reply To',
+            'pattern'     => 'email',
+            'required'    => $data.fieldRequired.reply_to_email,
+            'errorText'   => 'Reply To is Required to be a valid email',
+            'dataError'   => $data.fieldFail.reply_to_email
+        ]}
+        {include file='ui/f6/text.html'}
+
+        {* Subject *}
+        {$ui = [
+            'value'       => $data.fieldData.subject,
+            'field'       => 'subject',
+            'label'       => 'Subject',
+            'required'    => $data.fieldRequired.subject,
+            'errorText'   => 'Subject is Required',
+            'dataError'   => $data.fieldFail.subject
+        ]}
+        {include file='ui/f6/text.html'}
+
+    </fieldset>
+
+    <fieldset class="fieldset cell small-12 medium-6">
+        <legend>Merge Tags</legend>
+
+        {assign var="tData" value=$merge_tags}
+
+        <strong>Merge Tags</strong>
+        <p>The "merge tags" listed below may be used in the email message to include certain information about the Member or Contact. Be sure to include the "{" and "}" and "$" characters exactly as shown.</p>
+
+        <div class="grid-x grid-margin-x">
+            <div class="cell small-12">
+                {html_table loop=$tData cols=2 table_attr='border=0 style=width: 400px;' caption='Merge Tags Examples' td_attr=['align="left"','align="left"']}
+            </div>
         </div>
-    </div>
-
-</form>
 
+    </fieldset>
+
+    <fieldset class="fieldset cell small-12">
+        <legend>Message</legend>
+        {* Message Content *}
+        {$ui = [
+            'value'     => $data.fieldData.message_body,
+            'field'     => 'message_body',
+            'label'     => 'Message Content',
+            'height'    => '450',
+            'required'  => $data.fieldRequired.message_body,
+            'errorText' => 'Message Content is Required',
+            'dataError' => $data.fieldFail.message_body
+        ]}
+        {include file='ui/f6/editor.html'}
+
+
+        {* UI for Delete Dialog *}
+        {if !$newEntry}
+            {assign var="itemName" value="Message"}
+            {assign var="deleteUrl" value="{$thisUrl}?page={$thisPage}&option=deleteMessage&id={$message.fieldData.id}"}
+            {include file='admin/ui/deleteDialog.html'}
+        {/if}
+
+        {* Submit *}
+        {$ui = [
+            'class'  => 'primary',
+            'label'  => 'Save',
+            'submit' => true,
+            'id'     => 'save',
+            'cancel' => ''
+        ]}
+        {include file='ui/f6/submit.html'}
+
+    </fieldset>
+
+</div>
+
+{* Form End *}
+{include file='ui/f6/form-end.html'}
+
+<script>
+jQuery(document).ready(function($){
+    $(document).foundation();
+});
+</script>
 
 {include file='../../admin/footer.html'}
index 0bc6ded..833c96f 100644 (file)
@@ -2,12 +2,6 @@
 {include file='admin/header.html'}
 <h3>Html Email</h3>
 
-{* UI for Delete Dialog *}
-{if !$newEntry && $templateCount > 1}
-    {assign var="itemName" value="Template"}
-    {assign var="deleteUrl" value="{$thisUrl}?page={$thisPage}&option=deleteTemplate&id={$template.fieldData.id}"}
-    {include file='admin/ui/deleteDialog.html'}
-{/if}
 
 {if $error}
     <div class="callout alert" data-closable>
     </div>
 {/if}
 
-<form action="{$thisUrl}?page={$thisPage}" method="post" enctype="multipart/form-data" style="max-width: 600px;">
-    <input type="hidden" name="option" value="updateTemplate" />
-    {if !$newEntry}
-        <input type="hidden" name="id" value="{$template.fieldData.id}" />
-    {/if}
+{* Form Start *}
+{$ui = [
+    'id'               => 'edit-template',
+    'action'           => "{$thisUrl}?page={$thisPage}",
+    'method'           => 'post',
+    'file'             => true,
+    'validate'         => true,
+    'validateFocusMsg' => true
+]}
+{include file='ui/f6/form-start.html'}
 
-    {* This is for the rest of UI elements *}
-    {assign var="data" value=$template}
+{* This is for the rest of UI elements *}
+{$data = $template}
 
-    {assign var="field" value="name"}
-    {assign var="fieldLabel" value="Name:"}
-    {include file="admin/ui/f6-text.html"}
+<input type="hidden" name="option" value="updateTemplate" />
+{if !$newEntry}
+    <input type="hidden" name="id" value="{$template.fieldData.id}" />
+{/if}
 
-    {assign var="field" value="image"}
-    {assign var="fieldLabel" value="Header Image:"}
-    {include file="admin/ui/f6-image.html"}
+<div class="grid-x grid-margin-x">
 
-    {assign var="field" value="footer"}
-    {assign var="fieldLabel" value="Footer Content:"}
-    {include file="admin/ui/f6-editor.html"}
+    <fieldset class="fieldset cell small-12">
+        <legend>Message</legend>
 
-    <div class="grid-x grid-margin-x">
-        <div class="cell small-12">
-            <input type="submit" class="button button-primary" value="Save" />
-        </div>
-    </div>
+        {* Name *}
+        {$ui = [
+            'value'       => $data.fieldData.name,
+            'field'       => 'name',
+            'label'       => 'Name',
+            'required'    => $data.fieldRequired.name,
+            'errorText'   => 'Name is Required',
+            'dataError'   => $data.fieldFail.name
+        ]}
+        {include file='ui/f6/text.html'}
+
+        {* Header Image *}
+        {$ui = [
+            'value'     => $data.fieldData.image,
+            'field'     => 'image',
+            'label'     => 'Header Image',
+            'required'  => $data.fieldRequired.image,
+            'errorText' => 'Header Image is Required',
+            'dataError' => $data.fieldFail.image
+        ]}
+        {include file='ui/f6/image.html'}
+
+        {* Footer Content *}
+        {$ui = [
+            'value'     => $data.fieldData.footer,
+            'field'     => 'footer',
+            'label'     => 'Footer Content',
+            'height'    => '150',
+            'required'  => $data.fieldRequired.footer,
+            'errorText' => 'Footer Content is Required',
+            'dataError' => $data.fieldFail.footer
+        ]}
+        {include file='ui/f6/editor.html'}
+
+        {* UI for Delete Dialog *}
+        {if !$newEntry && $templateCount > 1}
+            {assign var="itemName" value="Template"}
+            {assign var="deleteUrl" value="{$thisUrl}?page={$thisPage}&option=deleteTemplate&id={$template.fieldData.id}"}
+            {include file='admin/ui/deleteDialog.html'}
+        {/if}
+
+        {* Submit *}
+        {$ui = [
+            'class'  => 'primary',
+            'label'  => 'Save',
+            'submit' => true,
+            'id'     => 'save',
+            'cancel' => ''
+        ]}
+        {include file='ui/f6/submit.html'}
+
+    </fieldset>
+
+</div>
+
+{* Form End *}
+{include file='ui/f6/form-end.html'}
 
-</form>
+<script>
+jQuery(document).ready(function($){
+    $(document).foundation();
+});
+</script>
 
 {include file='../../admin/footer.html'}
index e0ff341..3bb317a 100644 (file)
@@ -78,7 +78,7 @@
             <div class="cell small-12">
                 <div class="grid-x medium-grid-frame">
                     <div class="cell small-12 medium-6 medium-grid-container">
-                        <div class="grid-y grid-paddingxx">
+                        <div class="grid-y grid-padding-x">
                             <div class="cell small-12 medium-6">
                                 <fieldset class="fieldset">
                                     <legend>{$terms.term_member_cap} Info</legend>