knitkit 2.1.15 → 3.0.0

data/app/widgets/manage_profile/views/_contact_information_form.html.erb

@@ -1,192 +1,23 @@
-<%= form_tag build_widget_url(:update_contact_information), :remote => true, :html => {:id => 'contact_information_form'} do %>
-    <div class="form_settings" style="margin-left: 20px;">
-
-      <!-- *****Email Addresses***** -->
-
-      <h4 style='float: left; border-width: 0px 0px 1px; border-style: solid;'>Email Addresses</h4>
-      <h4 style='float: right; border-width: 0px 0px 1px; border-style: solid;'>Contact Type</h4>
-
-      <div style='clear:both;'></div>
-      </br>
-      <% @email_addresses.each_with_index do |e, i| %>
-          <p>
-            <span>Email Address <%= i + 1 %></span>
-            <%= text_field_tag "email_addresses[#{i}]", e.email_address %>
-            <%= select_tag("email_address_contact_purposes[#{i}]", options_for_select(@purpose_hash, :selected => e.contact.contact_purposes.first.internal_identifier), {:style => 'width: auto; float: right; margin: 5px 0px;'}) %>
-          </p>
-
-          <div style='clear:both;'></div>
-      <% end %>
-      <p><span>&nbsp;</span><a href="#" id="new_email_button"
-                               onclick="var state = document.getElementById('new_email_hide_show').style.display;
-                                       if (state == 'block') {
-                                               document.getElementById('new_email_hide_show').style.display = 'none';
-                                               document.getElementById('new_email_button').innerHTML = 'Add New Email Address (+)';
-                                               } else {
-                                               document.getElementById('new_email_hide_show').style.display = 'block';
-                                               document.getElementById('new_email_button').innerHTML = 'Add New Email Address (-)';
-                                               }
-                                       return false;
-                               ">Add (+)</a></p>
-
-      <div id='new_email_hide_show' style='display: none;'>
-        <p>
-          <span>New Email Address</span>
-          <%= text_field_tag "new_email_address" %>
-          <%= select_tag("new_email_address_contact_purpose", options_for_select(@purpose_hash,
-                                                                                 :selected => "default"),
-                         {:style => 'width: auto; float: right; margin: 5px 0px;'}) %>
-        </p>
-
-        <div style='clear:both;'></div>
-      </div>
-      </br>
-
-      <!-- *****Phone Numbers***** -->
-
-      <h4 style='float: left; border-width: 0px 0px 1px; border-style: solid;'>Phone Numbers</h4>
-
-      <div style='clear:both;'></div>
-      </br>
-      <% @phone_numbers.each_with_index do |p, i| %>
-          <p>
-            <span>Phone Number <%= i + 1 %></span>
-            <%= text_field_tag "phone_numbers[#{i}]", p.phone_number %>
-            <%= select_tag("phone_number_contact_purposes[#{i}]", options_for_select(@purpose_hash,
-                                                                                     :selected => p.contact.contact_purposes.first.internal_identifier),
-                           {:style => 'width: auto; float: right; margin: 5px 0px;'}) %>
-          </p>
-
-          <div style='clear:both;'></div>
-      <% end %>
-      <p><span>&nbsp;</span><a href="#" id="new_number_button"
-                               onclick="var state = document.getElementById('new_number_hide_show').style.display;
-                                       if (state == 'block') {
-                                               document.getElementById('new_number_hide_show').style.display = 'none';
-                                               document.getElementById('new_number_button').innerHTML = 'Add New Phone Number (+)';
-                                               } else {
-                                               document.getElementById('new_number_hide_show').style.display = 'block';
-                                               document.getElementById('new_number_button').innerHTML = 'Add New Phone Number (-)';
-                                               }
-                                       return false;
-                               ">Add (+)</a></p>
-
-      <div id='new_number_hide_show' style='display: none;'>
-        <p>
-          <span>New Phone Number</span>
-          <%= text_field_tag("new_phone_number") %>
-          <%= select_tag("new_phone_number_contact_purpose", options_for_select(@purpose_hash,
-                                                                                :selected => "default"),
-                         {:style => 'width: auto; float: right; margin: 5px 0px;'}) %>
-        </p>
-
-        <div style='clear:both;'></div>
-      </div>
-      </br>
-
-      <!-- *****Postal Addresses***** -->
-
-      <h4 style='float: left; border-width: 0px 0px 1px; border-style: solid;'>Addresses</h4>
-
-      <div style='clear:both;'></div>
-      </br>
-      <% @postal_addresses.each_with_index do |a, i| %>
-          <p>
-            <!-- left column -->
-
-          <div style="float: left; width: 21%;">
-            <span>Address <%= i + 1 %></span>
-          </div>
-
-          <!-- middle column -->
-          <div style="float: left; width: 54%;">
-            <%= text_field_tag "postal_addresses[#{i}][address_line_1]", a.address_line_1, {:style => 'margin-bottom: 4px;'} %>
-            <%= text_field_tag "postal_addresses[#{i}][address_line_2]", a.address_line_2, {:style => 'margin-bottom: 4px;'} %>
-
-            <!-- left sub-column -->
-            <div style="float: left; width: 50%;">
-              <%= text_field_tag "postal_addresses[#{i}][city]", a.city, {:style => 'width: auto; margin-bottom: 4px;'} %>
-              <%= text_field_tag "postal_addresses[#{i}][zip]", a.zip, {:style => 'width: auto; margin-bottom: 4px;'} %>
-            </div>
-
-            <!-- right sub-column -->
-            <div style="float: right; width: 50%; text-align: right;">
-              <%= select_tag("postal_addresses[#{i}][state_id]", options_for_select(@states_id,
-                                                                                    :selected => a.geo_zone_id),
-                             {:style => 'width: 125px; margin: 5px 0px;'}) %>
-              </br>
-              <%= select_tag("postal_addresses[#{i}][country_id]", options_for_select(@countries_id,
-                                                                                      :selected => a.geo_country_id),
-                             {:style => 'width: 125px; margin: 5px 0px;'}) %>
-            </div>
-          </div>
-
-          <!-- right column -->
-          <div style="float: left; width: 25%;">
-            <%= select_tag("postal_address_contact_purposes[#{i}]", options_for_select(@purpose_hash,
-                                                                                       :selected => a.contact.contact_purposes.first.internal_identifier),
-                           {:style => 'width: auto; float: right; margin: 5px 0px;'}) %>
-          </div>
-          <div style="clear: both;"></div>
-          </p>
-      <% end %>
-
-
-      <p><span>&nbsp;</span><a href="#" id="new_address_button"
-                               onclick="var state = document.getElementById('new_address_hide_show').style.display;
-                                       if (state == 'block') {
-                                               document.getElementById('new_address_hide_show').style.display = 'none';
-                                               document.getElementById('new_address_button').innerHTML = 'Add New Address (+)';
-                                               } else {
-                                               document.getElementById('new_address_hide_show').style.display = 'block';
-                                               document.getElementById('new_address_button').innerHTML = 'Add New Address (-)';
-                                               }
-                                       return false;
-                               ">Add (+)</a></p>
-
-      <div id='new_address_hide_show' style='display: none;'>
-        <p>
-          <!-- left column -->
-
-        <div style="float: left; width: 21%;">
-          <span>New Address</span>
-        </div>
-
-        <!-- middle column -->
-        <div style="float: left; width: 54%;">
-          <%= text_field_tag "new_postal_address[address_line_1]", "Address Line 1", {:style => 'margin-bottom: 4px;'} %>
-          <%= text_field_tag "new_postal_address[address_line_2]", "Address Line 2", {:style => 'margin-bottom: 4px;'} %>
-
-          <!-- left sub-column -->
-          <div style="float: left; width: 50%;">
-            <%= text_field_tag "new_postal_address[city]", "City", {:style => 'width: auto; margin-bottom: 4px;'} %>
-            <%= text_field_tag "new_postal_address[zip]", "Zipcode", {:style => 'width: auto; margin-bottom: 4px;'} %>
-          </div>
-
-          <!-- right sub-column -->
-          <div style="float: right; width: 50%; text-align: right;">
-            <%= select_tag("new_postal_address[state_id]", options_for_select(@states_id, :selected => "default", :disabled => "default"), {:style => 'width: 125px; margin: 5px 0px;'}) %>
-            </br>
-            <%= select_tag("new_postal_address[country_id]", options_for_select(@countries_id, :selected => "default", :disabled => "default"), {:style => 'width: 125px; margin: 5px 0px;'}) %>
-          </div>
-        </div>
-
-        <!-- right column -->
-        <div style="float: left; width: 25%;">
-          <%= select_tag("new_postal_address_contact_purpose", options_for_select(@purpose_hash, :selected => "default"),
-                         {:style => 'width: auto; float: right; margin: 5px 0px;'}) %>
-        </div>
-        <div style="clear: both;"></div>
-        </p>
-        <div style='clear:both;'></div>
-      </div>
-
-      <!-- Buttons -->
-
-      <p style="padding-top: 15px">
-        <%= submit_tag "Submit", :disable_with => "Please wait...", :class => "submit", :style => "margin: 0 0 0 120px;" %>
-        <input type="reset" class="submit" value="Reset" style="margin-left: 0;"/>
-      </p>
-
-    </div>
-<% end %>
+<ul class="nav nav-tabs" id="contactTabs">
+  <li><a href="#emailAddresses" data-toggle="tab">Email Addresses</a></li>
+  <li><a href="#phone" data-toggle="tab">Phone Numbers</a></li>
+  <li><a href="#address" data-toggle="tab">Addresses</a></li>
+</ul>
+
+<div class="tab-content">
+  <div class="tab-pane fade" id="emailAddresses">
+    <%= render :partial => 'email_address' %>
+  </div>
+  <div class="tab-pane fade" id="phone">
+    <%= render :partial => 'phone_number' %>
+  </div>
+  <div class="tab-pane fade" id="address">
+    <%= render :partial => 'address' %>
+  </div>
+</div>
+
+<script type="text/javascript">
+    jQuery(function () {
+        jQuery('#contactTabs a:first').tab('show')
+    });
+</script>

data/app/widgets/manage_profile/views/_email_address.html.erb

@@ -0,0 +1,163 @@
+<div style="margin-top:5px;" id="emailMessageArea"></div>
+<table class="table table-striped" id="emailsTable">
+  <thead>
+  <tr>
+    <th>Email Address</th>
+    <th>Contact Type</th>
+    <th>&nbsp;</th>
+  </tr>
+  </thead>
+  <tbody>
+  <% @email_addresses.each do |e| %>
+      <tr id="email<%= e.id %>">
+        <td><%= e.email_address %></td>
+        <td><%= e.contact.contact_purposes.first.description %></td>
+        <td>
+          <button type="button"
+                  class="emailDeleteBtn btn btn-danger"
+                  data-id="<%= e.id %>">Delete
+          </button>
+        </td>
+      </tr>
+  <% end %>
+  </tbody>
+</table>
+
+<button type="button" id="addEmailBtn" class="btn btn-success">Add Email</button>
+
+<div id="addEmailDiv" style="display:none;">
+  <%= form_tag build_widget_url(:add_email_address), :remote => true, :id => 'email_form', :role => 'form' do %>
+      <div class="form-group">
+
+        <%= label_tag :email_address %>
+        <%= text_field_tag :email_address, nil, class: 'form-control', required: true, :type => 'email' %>
+
+        <%= label_tag :contact_purpose  %>
+        <%= select_tag("contact_purpose", options_for_select(@purpose_hash, :selected => "default"), :class => "form-control") %>
+
+      </div>
+      <button id="submitEmailBtn" type="submit" class="btn btn-primary">Submit</button>
+      <button id="cancelEmailBtn" type="button" class="btn btn-default">Cancel</button>
+  <% end %>
+</div>
+
+<script type="text/javascript">
+
+    emailsPage = {
+        setup: function () {
+            jQuery('#addEmailBtn').click(function () {
+                var addBtn = jQuery(this);
+
+                addBtn.css('display', 'none');
+                jQuery('#addEmailDiv').css('display', '');
+            });
+
+            jQuery('#cancelEmailBtn').click(function () {
+                var addBtn = jQuery('#addEmailBtn');
+
+                addBtn.css('display', '');
+                jQuery('#addEmailDiv').css('display', 'none');
+            });
+
+            jQuery('#email_form').bind('ajax:success', function (e, response) {
+                var html = '';
+
+                if (response.success) {
+                    html = [
+                        '<div class="alert alert-success" >',
+                        '<button type="button" class="close" data-dismiss="alert">&times;</button>',
+                        response.message,
+                        '</div>'
+                    ].join('');
+
+                    var newRowHtml = [
+                        '<tr id="email' + response.email.id + '">',
+                        '<td>' + response.email.email_address + '</td>',
+                        '<td>' + response.email.contact_purpose + '</td>',
+                        '<td>',
+                        '<button type="button" class="emailDeleteBtn btn btn-danger" data-id="' + response.email.id + '" >Delete</button>',
+                        '</td>',
+                        '</tr>'
+                    ].join('');
+
+                    jQuery('#emailsTable > tbody:last').append(newRowHtml);
+
+                    var newDeleteBtn = jQuery('#emailsTable > tbody:last > tr:last > td:last > button');
+
+                    newDeleteBtn.confirmModal({
+                        confirmCallback: emailsPage.deleteEmail,
+                        confirmMessage   : 'Are you sure you want to remove this email ?'
+                    });
+
+                    jQuery('#addEmailBtn').css('display', '');
+                    jQuery('#addEmailDiv').css('display', 'none');
+                    jQuery('#email_form')[0].reset();
+                }
+                else {
+                    html = [
+                        '<div class="alert alert-danger" >',
+                        '<button type="button" class="close" data-dismiss="alert">&times;</button>',
+                        response.message,
+                        '</div>'
+                    ].join('');
+                }
+
+                jQuery('#emailMessageArea').html(html);
+            });
+
+            window['emailsPage'].bindDeleteBtn();
+        },
+
+        bindDeleteBtn: function () {
+            jQuery('.emailDeleteBtn').confirmModal({
+                confirmCallback: emailsPage.deleteEmail,
+                confirmMessage   : 'Are you sure you want to remove this email ?'
+            });
+        },
+
+        deleteEmail: function (link, data) {
+            var id = data.id;
+
+            jQuery.ajax({
+                url: '<%= build_widget_url(:remove_email_address) %>',
+                data: {email_address_id: id},
+                success: function (data) {
+                    if (data.success) {
+                        html = [
+                            '<div class="alert alert-success" >',
+                            '<button type="button" class="close" data-dismiss="alert">&times;</button>',
+                            data.message,
+                            '</div>'
+                        ].join('');
+
+                        jQuery('#emailMessageArea').html(html);
+
+                        jQuery('#email' + id).remove();
+                    }
+                    else {
+                        html = [
+                            '<div class="alert alert-danger" >',
+                            '<button type="button" class="close" data-dismiss="alert">&times;</button>',
+                            data.message,
+                            '</div>'
+                        ].join('');
+
+                        jQuery('#emailMessageArea').html(html);
+                    }
+                },
+                error: function () {
+                    html = [
+                        '<div class="alert alert-danger" >',
+                        '<button type="button" class="close" data-dismiss="alert">&times;</button>',
+                        'Could not remove email',
+                        '</div>'
+                    ].join('');
+
+                    jQuery('#emailMessageArea').html(html);
+                }
+            });
+        }
+    };
+
+    emailsPage.setup();
+</script>

data/app/widgets/manage_profile/views/_password_form.html.erb

@@ -1,20 +1,23 @@
-<%= form_tag build_widget_url(:update_password), :remote => true, :html => {:id => 'password_form'} do %>
-  <div class="form_settings" style="margin-left: 20px;">
-    <p>
-      <span>Old Password</span>
-      <%= password_field_tag :old_password %>
-    </p>
-    <p>
-      <span>New Password</span>
-      <%= password_field_tag :new_password %>
-    </p>
-    <p>
-      <span>Confirm Password</span>
-      <%= password_field_tag :password_confirmation %>
-    </p>
-    <p style="padding-top: 15px">
-      <%=  submit_tag "Submit", :disable_with => "Please wait...", :class => "submit", :style => "margin: 0 0 0 120px;" %>
-      <input type="reset" class="submit" value="Reset" style="margin-left: 0;" />
-    </p>
-  </div>
-<% end %>
+<%= form_tag build_widget_url(:update_password), :remote => true, :id => 'password_form', :role => 'form' do %>
+    <div class="form-group">
+      <label for="old_password">Old Password</label>
+      <%= password_field_tag :old_password, '', :class => 'form-control', :required => true %>
+    </div>
+    <div class="form-group">
+      <label for="new_password">New Password</label>
+      <%= password_field_tag :new_password, '', :class => 'form-control', :required => true %>
+      <span>Password must be at least 8 characters long and start and end with a letter</span>
+    </div>
+    <div class="form-group">
+      <label for="password_confirmation">Confirm Password</label>
+      <%= password_field_tag :password_confirmation, '', :class => 'form-control', :required => true %>
+    </div>
+
+    <%= submit_tag "Submit", :disable_with => "Please wait...", :class => "btn btn-lg btn-primary btn-block" %>
+<% end %>
+
+<script type="text/javascript">
+    jQuery('#password_form').bind('ajax:success', function (e, response) {
+        jQuery('#password_form')[0].reset();
+    });
+</script>

data/app/widgets/manage_profile/views/_phone_number.html.erb

@@ -0,0 +1,165 @@
+<div style="margin-top:5px;" id="phoneMessageArea"></div>
+<table class="table table-striped" id="phoneNumbersTable">
+  <thead>
+  <tr>
+    <th>Phone Number</th>
+    <th>Contact Type</th>
+    <th>&nbsp;</th>
+  </tr>
+  </thead>
+  <tbody>
+  <% @phone_numbers.each do |p| %>
+      <tr id="phone<%= p.id %>">
+        <td><%= p.phone_number %></td>
+        <td><%= p.contact.contact_purposes.first.description %></td>
+        <td>
+          <button type="button"
+                  class="phoneDeleteBtn btn btn-danger"
+                  data-id="<%= p.id %>">Delete
+          </button>
+        </td>
+      </tr>
+  <% end %>
+  </tbody>
+</table>
+
+<button type="button" id="addPhoneBtn" class="btn btn-success">Add Phone Number</button>
+
+<div id="addPhoneDiv" style="display:none;">
+  <%= form_tag build_widget_url(:add_phone_number), :remote => true, :id => 'phone_number_form', :role => 'form' do %>
+      <div class="form-group">
+        <%= label_tag :phone_number %>
+        <%= text_field_tag :phone_number, nil, class: 'form-control', required: true %>
+
+        <%= label_tag :contact_purpose  %>
+        <%= select_tag("contact_purpose", options_for_select(@purpose_hash, :selected => "default"), :class => "form-control") %>
+
+      </div>
+      <button id="submitPhoneBtn" type="submit" class="btn btn-primary">Submit</button>
+      <button id="cancelPhoneBtn" type="button" class="btn btn-default">Cancel</button>
+  <% end %>
+</div>
+
+<script type="text/javascript">
+
+    jQuery('#phone_number').mask("(999) 999-9999");
+
+    phonesPanel = {
+        setup: function () {
+            jQuery('#addPhoneBtn').click(function () {
+                var addBtn = jQuery(this);
+
+                addBtn.css('display', 'none');
+                jQuery('#addPhoneDiv').css('display', '');
+            });
+
+            jQuery('#cancelPhoneBtn').click(function () {
+                var addBtn = jQuery('#addPhoneBtn');
+
+                addBtn.css('display', '');
+                jQuery('#addPhoneDiv').css('display', 'none');
+            });
+
+            jQuery('#phone_number_form').bind('ajax:success', function (e, response) {
+                var html = '';
+
+                if (response.success) {
+                    html = [
+                        '<div class="alert alert-success" >',
+                        '<button type="button" class="close" data-dismiss="alert">&times;</button>',
+                        response.message,
+                        '</div>'
+                    ].join('');
+
+                    var newRowHtml = [
+                        '<tr id="phone' + response.phone.id + '">',
+                        '<td>' + response.phone.phone_number + '</td>',
+                        '<td>' + response.phone.contact_purpose + '</td>',
+                        '<td>',
+                        '<button type="button" class="phoneDeleteBtn btn btn-danger" data-id="' + response.phone.id + '" >Delete</button>',
+                        '</td>',
+                        '</tr>'
+                    ].join('');
+
+                    jQuery('#phoneNumbersTable > tbody:last').append(newRowHtml);
+
+                    var newDeleteBtn = jQuery('#phoneNumbersTable > tbody:last > tr:last > td:last > button');
+
+                    newDeleteBtn.confirmModal({
+                        confirmCallback: phonesPanel.deletePhone,
+                        confirmMessage   : 'Are you sure you want to remove this phone number ?'
+                    });
+
+
+                    jQuery('#addPhoneBtn').css('display', '');
+                    jQuery('#addPhoneDiv').css('display', 'none');
+                    jQuery('#phone_number_form')[0].reset();
+                }
+                else {
+                    html = [
+                        '<div class="alert alert-danger" >',
+                        '<button type="button" class="close" data-dismiss="alert">&times;</button>',
+                        response.message,
+                        '</div>'
+                    ].join('');
+                }
+
+                jQuery('#phoneMessageArea').html(html);
+            });
+
+            window['phonesPanel'].bindDeleteBtn();
+        },
+
+        bindDeleteBtn: function () {
+            jQuery('.phoneDeleteBtn').confirmModal({
+                confirmCallback: phonesPanel.deletePhone,
+                confirmMessage   : 'Are you sure you want to remove this phone number ?'
+            });
+        },
+
+        deletePhone: function (link, data) {
+            var id = data.id;
+
+            jQuery.ajax({
+                url: '<%= build_widget_url(:remove_phone_number) %>',
+                data: {phone_number_id: id},
+                success: function (data) {
+                    if (data.success) {
+                        html = [
+                            '<div class="alert alert-success" >',
+                            '<button type="button" class="close" data-dismiss="alert">&times;</button>',
+                            data.message,
+                            '</div>'
+                        ].join('');
+
+                        jQuery('#phoneMessageArea').html(html);
+
+                        jQuery('#phone' + id).remove();
+                    }
+                    else {
+                        html = [
+                            '<div class="alert alert-danger" >',
+                            '<button type="button" class="close" data-dismiss="alert">&times;</button>',
+                            data.message,
+                            '</div>'
+                        ].join('');
+
+                        jQuery('#phoneMessageArea').html(html);
+                    }
+                },
+                error: function () {
+                    html = [
+                        '<div class="alert alert-danger" >',
+                        '<button type="button" class="close" data-dismiss="alert">&times;</button>',
+                        'Could not remove phone number',
+                        '</div>'
+                    ].join('');
+
+                    jQuery('#phoneMessageArea').html(html);
+                }
+            });
+        }
+    };
+
+    phonesPanel.setup();
+</script>