https://scotlandsgardens.org/framework/public/js/tg_many_2_many_section.js?v=2.21

1function tg_many_2_many_section(options){
2    var pub = this;
3
4    var priv = {};
5
6    pub.settings = {
7        key: 'unique_key',
8        title:'Title',
9        description : 'Description',
10        add: '',                       // update end point
11        get: '',                       // the data source end point
12        remove: '',                    // remove
13        relation: '',
14        relation_primary_key: '',       // this is for the selected values,
15        after_init: null,                 // after_init the function executed after priv.init
16        classes: '',
17    };
18
19    pub.container = null;
20    pub.badge = null;           // the badge you pass back for the header
21    priv.id = null;             // the id of the entity you are editing
22
23    pub.primary_key = null;     // the primary key of the entity you are editing set by the tg_data_view
24    pub.entity = null;
25
26    pub.entity_key = null;      // aka table name the key in tg_data_view set by the tg_data_view
27    pub.templates = null;       // template functions for the fields to render templates
28    priv.data = null;           // the row data
29
30    pub.selected = null;        // selected items
31    pub.selectable_items = null;// all the items you can select
32    pub.select = null;          // the select object
33    pub.container_id = '';
34
35    pub.get_id = function(){
36        return pub.container_id;
37    };
38
39    priv.init = function (options){
40        $.extend(pub.settings, options || {});
41        priv.local = get_local(pub.settings.key);

42        pub.container = $('<div>');
43        pub.badge = $('<span class="badge"><span class="span_number"></span><span class="caret"></span></span>');
44        pub.badge.on('click', function(){
45            $(this).next('.collapse-header').trigger('click');
46        });
47
48        if(typeof pub.settings.after_init === 'function'){
49            pub.settings.after_init(pub);
50        }
51
52    };
53
54    pub.load = function(){
55        priv.id = pub.entity[pub.primary_key];
56        var d = { id: priv.id, relation_name: pub.settings.relation };
57        $.when(
58            action({
59                url: pub.settings.get,
60                data: d,
61                onsuccess:function(res){
62                    pub.selected = res.data;
63                },
64            }),
65            priv.load_selectable_items()
66        ).then(function(){
67            if(!pub.select){
68                pub.select = new tg_selectable_list({
69                    id_column: pub.settings.relation_primary_key,
70                    selectable_items: pub.selectable_items,
71                    selected: pub.selected,
72                    on_select:function(the_button){
73                        return priv.add_relation(the_button);
74                    },
75                    on_unselect:function(the_button){
76                        return priv.remove_relation(the_button);
77                    }
78                });
79
80                pub.container.append(pub.select.get());
81            }
82
83            pub.select.value( pub.selected );
84            //pub.badge.find('.span_number').text(pub.selected.length);
85        });
86    };
87
88    priv.add_relation = function(the_button){
89
90        var data = { id: priv.id, relation_id: the_button.data('id'), relation_name: pub.settings.relation };
91        var rs = true;
92        var promise = $.Deferred();
93
94        if(typeof pub.settings.before_add_relation === 'function'){
95            rs = pub.settings.before_add_relation(data, pub);
96        }
97
98        $.when( rs ).then(
99            function(){
100                action({
101                    url: pub.settings.add,
102                    data: data,
103                    onsuccess:function(res){
104                        promise.resolve();
105                    }
106                });
107            },
108            function(){
109                //pub.select();
110                promise.reject();
111            }
112
113        );
114
115        return promise;
116    };
117
118    priv.remove_relation = function(the_button){
119
120        var data = { id: priv.id, relation_id: the_button.data('id'), relation_name: pub.settings.relation };
121        var promise = action({
122            url: pub.settings.remove,
123            data: data,
124            onsuccess:function(res){
125
126            },
127        });
128        return promise;
129    };
130
131    priv.load_selectable_items = function(){
132        if(priv.local && priv.local.selectable_items){
133            pub.selectable_items = priv.local.selectable_items;
134            return $.when();
135        } else {
136            var promise = action({
137                url: pub.settings.list,
138                data: { id: priv.id, relation_name: pub.settings.relation },
139                onsuccess:function(res){
140                    priv.local = {};
141                    pub.selectable_items = priv.local.selectable_items = res.data;
142                    priv.flush_local();
143                },
144            });
145            return promise;
146        }
147    }
148
149    priv.flush_local = function flush_local(){
150        set_local(pub.settings.key, priv.local);
151    }
152
153    pub.set_entity = function(entity){
154        pub.entity = entity;
155
156    };
157
158    pub.set_primary_key = function(v){
159        pub.primary_key = v;
160    };
161
162    pub.is_open = function(){
163        if(pub.$collapsible.attr('aria-expanded') == 'true'){
164            return true;
165        }
166        return false;
167    };
168
169    priv.init(options);
170}