Add select2WatchNgModel directive

- Select2 components cannot handle ng-model correctly: they do not update if the ng-model change. Add a directive to watch the ng-model and update the component value
This commit is contained in:
Jean-Baptiste Bellet
2021-05-31 09:43:59 +02:00
parent 58a96c6500
commit 303bf5420e
3 changed files with 22 additions and 11 deletions

View File

@@ -0,0 +1,8 @@
angular.module("ofn.admin").directive "select2WatchNgModel", () ->
restrict: 'E'
scope: true
require: "ngModel"
link: (scope, element, attrs, ngModel) ->
ngModel.$render = () ->
newValue = ngModel.$viewValue;
element.children(".select2").select2("val", newValue)

View File

@@ -10,9 +10,10 @@
= text_field_tag "q[completed_at_lteq]", nil, class: 'datepicker', datepicker: 'q.completed_at_lteq', 'ng-model' => 'q.completed_at_lteq', :placeholder => t(:stop)
.field
= label_tag nil, t(:status)
= select_tag("q[state_eq]",
options_for_select(Spree::Order.state_machines[:state].states.collect {|s| [t("spree.order_state.#{s.name}"), s.value]}),
{include_blank: true, class: 'select2', 'ng-model' => 'q.state_eq'})
%select2-watch-ng-model{'ng-model': 'q.state_eq'}
= select_tag("q[state_eq]",
options_for_select(Spree::Order.state_machines[:state].states.collect {|s| [t("spree.order_state.#{s.name}"), s.value]}),
{include_blank: true, class: 'select2', 'ng-model' => 'q.state_eq'})
.four.columns
.field
= label_tag "q_number_cont", t(:order_number)
@@ -34,20 +35,22 @@
= t(:show_only_complete_orders)
.field
= label_tag nil, t(:shipping_method)
= select_tag("shipping_method_id",
%select2-watch-ng-model{'ng-model': 'q.shipping_method_id'}
= select_tag("q[shipping_method_id]",
options_for_select(Spree::ShippingMethod.managed_by(spree_current_user).collect {|s| [t("spree.shipping_method_names.#{s.name}"), s.id]}),
{include_blank: true, class: 'select2', 'ng-model': 'q.shipping_method_id'})
.field-block.alpha.eight.columns
= label_tag nil, t(:distributors)
= select_tag("q[distributor_id_in]",
options_for_select(Enterprise.is_distributor.managed_by(spree_current_user).map {|e| [e.name, e.id]}, params[:distributor_ids]),
{class: "select2 fullwidth", multiple: true, 'ng-model' => 'q.distributor_id_in'})
%select2-watch-ng-model{'ng-model': 'q.distributor_id_in'}
= select_tag("q[distributor_id_in]",
options_for_select(Enterprise.is_distributor.managed_by(spree_current_user).map {|e| [e.name, e.id]}, params[:distributor_ids]),
{class: "select2 fullwidth", multiple: true, 'ng-model' => 'q.distributor_id_in'})
.field-block.omega.eight.columns
= label_tag nil, t(:order_cycles)
= select_tag("q[order_cycle_id_in]",
options_for_select(OrderCycle.managed_by(spree_current_user).where('order_cycles.orders_close_at is not null').order('order_cycles.orders_close_at DESC').map {|oc| [oc.name, oc.id]}, params[:order_cycle_ids]),
{class: "select2 fullwidth", multiple: true, 'ng-model' => 'q.order_cycle_id_in'})
%select2-watch-ng-model{'ng-model': 'q.order_cycle_id_in'}
= select_tag("q[order_cycle_id_in]",
options_for_select(OrderCycle.managed_by(spree_current_user).where('order_cycles.orders_close_at is not null').order('order_cycles.orders_close_at DESC').map {|oc| [oc.name, oc.id]}, params[:order_cycle_ids]),
{class: "select2 fullwidth", multiple: true, 'ng-model' => 'q.order_cycle_id_in'})
.clearfix
.actions.filter-actions
%div

View File

@@ -8,7 +8,7 @@
= render partial: 'spree/admin/shared/order_sub_menu'
- content_for :main_ng_app_name do
= "admin.orders"
= "ofn.admin"
- content_for :main_ng_ctrl_name do
= "ordersCtrl"