Move frontend from core Arches archesproject/arches#11209

arches_references/arches_references/media/js/viewmodels/reference-select.js

@@ -0,0 +1,167 @@
+define([
+    'jquery',
+    'knockout',
+    'knockout-mapping',
+    'arches',
+    'viewmodels/widget',
+], function($, ko, koMapping, arches, WidgetViewModel) {
+    var NAME_LOOKUP = {};
+    var ReferenceSelectViewModel = function(params) {
+        var self = this;
+
+        params.configKeys = ['placeholder'];
+        this.multiple = !!ko.unwrap(params.node.config.multiValue);
+        this.displayName = ko.observable('');
+        this.selectionValue = ko.observable([]); // formatted version of this.value that select2 can use
+        this.activeLanguage = arches.activeLanguage;
+
+        WidgetViewModel.apply(this, [params]);
+
+        this.getPrefLabel = function(labels){
+            return koMapping.toJS(labels)?.find(
+                label => label.language_id === arches.activeLanguage && label.valuetype_id === 'prefLabel'
+            )?.value || arches.translations.unlabeledItem;
+        }; 
+
+        this.isLabel = function (value) {
+            return ['prefLabel', 'altLabel'].includes(value.valuetype_id);
+        };
+
+        this.displayValue = ko.computed(function() {
+            const val = self.value();
+            let name = null;
+            if (val) {
+                name = val.map(item => self.getPrefLabel(item.labels)).join(", ");
+            }
+            return name;
+        });
+
+        this.valueAndSelectionDiffer = function(value, selection) {
+            if (!(ko.unwrap(value) instanceof Array)) {
+                return true;
+            }
+            const valueUris = ko.unwrap(value).map(val=>ko.unwrap(val.uri));
+            return JSON.stringify(selection) !== JSON.stringify(valueUris);
+        };
+
+        this.selectionValue.subscribe(selection => {
+            if (selection) {
+                if (!(selection instanceof Array)) { selection = [selection]; }
+                if (self.valueAndSelectionDiffer(self.value, selection)) {
+                    const newItem = selection.map(uri => {
+                        return {
+                            "labels": NAME_LOOKUP[uri].labels,
+                            "listid": NAME_LOOKUP[uri]["listid"],
+                            "uri": uri
+                        };
+                    });
+                    self.value(newItem);
+                }
+            } else {
+                self.value(null);
+            }
+        });
+
+        this.value.subscribe(val => {
+            if (val?.length) {
+                self.selectionValue(val.map(item=>ko.unwrap(item.uri)));
+            } else {
+                self.selectionValue(null);
+            }
+        });
+
+        this.select2Config = {
+            value: self.selectionValue,
+            clickBubble: true,
+            multiple: this.multiple,
+            closeOnSelect: true,
+            placeholder: self.placeholder,
+            allowClear: true,
+            ajax: {
+                url: arches.urls.controlled_list(ko.unwrap(params.node.config.controlledList)),
+                dataType: 'json',
+                quietMillis: 250,
+                data: function(requestParams) {
+
+                    return {
+                        flat: true
+                    };
+                },
+                processResults: function(data) {
+                    const items = data.items; 
+                    items.forEach(item => {
+                        item["listid"] = item.id;
+                        item.id = item.uri;
+                        item.disabled = item.guide;
+                        item.labels = item.values.filter(val => self.isLabel(val));
+                    });
+                    return {
+                        "results": items,
+                        "pagination": {
+                            "more": false
+                        }
+                    };
+                }
+            },
+            templateResult: function(item) {
+                let indentation = '';
+                for (let i = 0; i < item.depth; i++) {
+                    indentation += '&nbsp;&nbsp;&nbsp;&nbsp;';
+                }
+
+                if (item.uri) {
+                    const text = self.getPrefLabel(item.labels) || arches.translations.searching + '...';
+                    NAME_LOOKUP[item.uri] = {"prefLabel": text, "labels": item.labels, "listid": item.controlled_list_id};
+                    return indentation + text;
+                }
+            },
+            templateSelection: function(item) {
+                if (!item.uri) { // option has a different shape when coming from initSelection vs templateResult
+                    return item.text; 
+                } else {
+                    return NAME_LOOKUP[item.uri]["prefLabel"];
+                }
+            },
+            escapeMarkup: function(markup) { return markup; },
+            initComplete: false,
+            initSelection: function(el, callback) {
+
+                const setSelectionData = function(data) {
+                    const valueData = koMapping.toJS(self.value());
+                    valueData.forEach(function(value) {
+                        NAME_LOOKUP[value.uri] = {
+                                "prefLabel": self.getPrefLabel(value.labels),
+                                "labels": value.labels,
+                                "listid": value.listid 
+                            };
+                    });
+
+                    if(!self.select2Config.initComplete){
+                        valueData.forEach(function(data) {
+                            const option = new Option(
+                                self.getPrefLabel(data.labels),
+                                data.uri,
+                                true, 
+                                true
+                            );
+                            $(el).append(option);
+                            self.selectionValue().push(data.uri);
+                        });
+                        self.select2Config.initComplete = true;
+                    }
+                    callback(valueData);
+                };
+
+                if (self.value()?.length) {
+                    setSelectionData();
+                } else {
+                    callback([]);
+                }
+
+            }
+        };
+
+    };
+
+    return ReferenceSelectViewModel;
+});

arches_references/arches_references/media/js/views/components/datatypes/reference.js

@@ -0,0 +1,54 @@
+define([
+    'knockout', 
+    'arches', 
+    'js-cookie',
+    'templates/views/components/datatypes/reference.htm',
+    'views/components/simple-switch',
+], function(ko, arches, Cookies, referenceDatatypeTemplate) {
+
+    const viewModel = function(params) {
+        const self = this;
+        this.search = params.search;
+
+        if (this.search) {
+            params.config = ko.observable({
+                controlledList:[],
+                placeholder: arches.translations.selectAnOption,
+                multiValue: true
+            });
+        }
+
+        this.controlledList = params.config.controlledList;
+        this.multiValue = params.config.multiValue;
+        this.controlledLists = ko.observable();
+        this.getControlledLists = async function() {
+            const response = await fetch(arches.urls.controlled_lists, {
+                method: 'GET',
+                credentials: 'include',
+                headers: {
+                    "X-CSRFToken": Cookies.get('csrftoken')
+                },
+            });
+            if (response.ok) {
+                return await response.json(); 
+            } else {
+                console.error('Failed to fetch controlled lists');
+            }
+        };
+
+        this.init = async function() {
+            const lists = await this.getControlledLists();
+            this.controlledLists(lists?.controlled_lists);
+        };
+
+        this.init();
+    };
+
+
+    ko.components.register('reference-datatype-config', {
+        viewModel: viewModel,
+        template: referenceDatatypeTemplate,
+    });
+
+    return name;
+});

arches_references/arches_references/media/js/views/components/plugins/controlled-list-manager.js

@@ -0,0 +1,14 @@
+import ko from 'knockout';
+import ControlledListManager from '@/arches/plugins/ControlledListManager.vue';
+import createVueApp from 'utils/create-vue-application';
+import ControlledListManagerTemplate from 'templates/views/components/plugins/controlled-list-manager.htm';
+
+
+ko.components.register('controlled-list-manager', {
+    viewModel: function() {
+        createVueApp(ControlledListManager).then((vueApp) => {
+            vueApp.mount('#controlled-list-manager-mounting-point');
+        });
+    },
+    template: ControlledListManagerTemplate,
+});

arches_references/arches_references/media/js/views/components/widgets/reference-select.js

@@ -0,0 +1,15 @@
+define([
+    'knockout',
+    'viewmodels/reference-select',
+    'templates/views/components/widgets/reference-select.htm',
+    'bindings/select2-query',
+], function(ko, ReferenceSelectViewModel, referenceSelectTemplate) {
+    const viewModel = function(params) {
+        ReferenceSelectViewModel.apply(this, [params]);
+    };
+
+    return ko.components.register('reference-select-widget', {
+        viewModel: viewModel,
+        template: referenceSelectTemplate,
+    });
+});