Merge pull request #218 from foodcoop-adam/article-dialog

Edit article user-interface update

app/assets/stylesheets/bootstrap_and_overrides.css.less

@@ -251,3 +251,40 @@ tr.unavailable {
 .modal form {
   margin: 0;
 }
+
+// multiple-column layout in forms (landscape tablet and wider only)
+@media (min-width: 768px) {
+  .form-horizontal .fold-line {
+    .control-group {
+      float: left;
+    }
+    .control-group + .control-group {
+      .control-label {
+        width: auto;
+        margin: 0 10px;
+      }
+      .controls {
+        float: left;
+        margin-left: 0;
+      }
+      // fix margin somehow off
+      // XXX there must be a better way
+      margin-bottom: 0;
+      .help-block {
+	margin-top: 0;
+        margin-bottom: 20px;
+      }
+    }
+    .control-group:last-child {
+      float: none;
+      .controls {
+        float: none;
+      }
+    }
+  }
+}
+// allow to have indicator text instead of input with same markup
+.control-text {
+  margin-top: 5px;
+}
+ 

app/views/articles/_form.html.haml

@@ -7,20 +7,51 @@
   .modal-body
     = f.input :availability
     = f.input :name
-    = f.input :origin
+    .fold-line
-    = f.input :manufacturer
+      = f.input :unit_quantity, label: Article.human_attribute_name(:unit),
-    = f.input :unit
+          input_html: {class: 'input-mini', title: Article.human_attribute_name(:unit_quantity)}
+      = f.input :unit, label: '×'.html_safe,
+           input_html: {class: 'input-mini', title: Article.human_attribute_name(:unit)}
+
     = f.input :note
     = f.association :article_category
+    / TODO labels
 
-    = f.input :price
+    .fold-line
-    = f.input :unit_quantity
+      = f.input :price do
+        .input-prepend
+          %span.add-on= t 'number.currency.format.unit'
+          = f.input_field :price, class: 'input-mini'
+      = f.input :tax do
+        .input-append
+          = f.input_field :tax, class: 'input-mini'
+          %span.add-on %
+    .fold-line
+      = f.input :deposit do
+        .input-prepend
+          %span.add-on= t 'number.currency.format.unit'
+          = f.input_field :deposit, class: 'input-mini'
+      .control-group
+        %label.control-label{for: 'article_fc_price'}
+          = Article.human_attribute_name(:fc_price)
+        .controls.control-text#article_fc_price
+          = number_to_currency(@article.fc_price) rescue nil
+
+    = f.input :origin
+    = f.input :manufacturer
     = f.input :order_number
-    = f.input :tax, :wrapper => :append do
-      = f.input_field :tax
-      %span.add-on %
-    = f.input :deposit
   .modal-footer
     = link_to t('ui.close'), '#', class: 'btn', data: {dismiss: 'modal'}
     = f.submit class: 'btn btn-primary'
 
+:javascript
+  var form = $('form.edit_article, form.new_article');
+  $('#article_price, #article_tax, #article_deposit', form).on('change keyup', function() {
+    var price = parseFloat($('#article_price', form).val());
+    var tax = parseFloat($('#article_tax', form).val());
+    var deposit = parseFloat($('#article_deposit', form).val());
+    // Article#gross_price and Article#fc_price
+    var gross_price = (price + deposit) * (tax / 100 + 1);
+    var fc_price = gross_price  * (#{FoodsoftConfig[:price_markup].to_f} / 100 + 1);
+    $('#article_fc_price').html($.isNumeric(fc_price) ? I18n.l("currency", fc_price) : '…');
+  });

config/locales/en.yml

@@ -1339,7 +1339,7 @@ en:
       default_message: Errors were found. Please check the form.
     hints:
       article:
-        unit: ! 'For example: KG or 1L or 500g'
+        unit: e.g. KG or 1L or 500g
       message:
         private: Message doesn’t show in Foodsoft mail inbox
       order_article: