Ben/data select plugin

AppBuilder/platform/plugins/included/index.js

@@ -1,9 +1,10 @@
-import viewImage from "./view_image/FNAbviewimage.js";
-import viewText from "./view_text/FNAbviewtext.js";
 import viewList from "./view_list/FNAbviewlist.js";
 import viewTab from "./view_tab/FNAbviewtab.js";
+import viewText from "./view_text/FNAbviewtext.js";
+import viewImage from "./view_image/FNAbviewimage.js";
+import viewDataSelect from "./view_data-select/FNAbviewdataselect.js";
 
-const AllPlugins = [viewTab, viewList, viewImage, viewText];
+const AllPlugins = [viewTab, viewList, viewText, viewImage, viewDataSelect];
 
 export default {
    load: (AB) => {

AppBuilder/platform/plugins/included/view_data-select/FNAbviewdataselect.js

@@ -0,0 +1,102 @@
+import FNAbviewdataselectComponent from "./FNAbviewdataselectComponent.js";
+
+// FNAbviewdataselect Web
+// A web side import for an ABView.
+//
+export default function FNAbviewdataselect({
+   /*AB,*/
+   ABViewWidgetPlugin,
+   ABViewComponentPlugin,
+   ABViewContainer,
+}) {
+   const ABAbviewdataselectComponent = FNAbviewdataselectComponent({
+      ABViewComponentPlugin,
+   });
+
+   const ABViewDataSelectPropertyComponentDefaults = {
+      dataviewID: null, // uuid of ABDatacollection
+   };
+
+   const ABViewDefaults = {
+      key: "data-select", // {string} unique key for this view
+      icon: "chevron-circle-down", // {string} fa-[icon] reference for this view
+      labelKey: "Data Select", // {string} the multilingual label key for the class label
+   };
+
+   class ABViewDataSelectCore extends ABViewWidgetPlugin {
+      constructor(values, application, parent, defaultValues) {
+         super(values, application, parent, defaultValues ?? ABViewDefaults);
+      }
+
+      static common() {
+         return ABViewDefaults;
+      }
+
+      static defaultValues() {
+         return ABViewDataSelectPropertyComponentDefaults;
+      }
+
+      ///
+      /// Instance Methods
+      ///
+
+      /**
+       * @method fromValues()
+       *
+       * initialze this object with the given set of values.
+       * @param {obj} values
+       */
+      fromValues(values) {
+         super.fromValues(values);
+      }
+
+      /**
+       * @method componentList
+       * return the list of components available on this view to display in the editor.
+       */
+      componentList() {
+         return [];
+      }
+   }
+
+   return class ABViewDataSelect extends ABViewDataSelectCore {
+      /**
+       * @method getPluginKey
+       * return the plugin key for this view.
+       * @return {string} plugin key
+       */
+      static getPluginKey() {
+         return this.common().key;
+      }
+
+      /**
+       * @method component()
+       * return a UI component based upon this view.
+       * @return {obj} UI component
+       */
+      component(parentId) {
+         return new ABAbviewdataselectComponent(this, parentId);
+      }
+
+      warningsEval() {
+         super.warningsEval();
+
+         let DC = this.datacollection;
+         if (!DC) {
+            this.warningsMessage(
+               `can't resolve it's datacollection[${this.settings.dataviewID}]`
+            );
+         } else {
+            if (this.settings.viewType == "connected") {
+               const object = DC.datasource;
+               const [field] = object.fields(
+                  (f) => f.columnName === this.settings.field
+               );
+               if (!field) {
+                  this.warningsMessage(`can't resolve field reference`);
+               }
+            }
+         }
+      }
+   };
+}

AppBuilder/platform/plugins/included/view_data-select/FNAbviewdataselectComponent.js

@@ -0,0 +1,58 @@
+export default function FNAbviewdataselectComponent({
+   /*AB,*/
+   ABViewComponentPlugin,
+}) {
+   return class ABAbviewdataselectComponent extends ABViewComponentPlugin {
+      constructor(baseView, idbase, ids) {
+         super(
+            baseView,
+            idbase || `ABViewDataSelect_${baseView.id}`,
+            Object.assign(
+               {
+                  select: "",
+               },
+               ids
+            )
+         );
+      }
+
+      ui() {
+         const _ui = super.ui([
+            {
+               view: "combo",
+               id: this.ids.select,
+               on: {
+                  onChange: (n, o) => {
+                     if (n !== o) this.cursorChange(n);
+                  },
+               },
+            },
+         ]);
+         delete _ui.type;
+
+         return _ui;
+      }
+
+      async onShow() {
+         super.onShow();
+         const dc = this.datacollection;
+         if (!dc) return;
+         await dc.waitReady();
+         const labelField = this.AB.definitionByID(
+            this.settings.labelField
+         )?.columnName;
+         const options = dc
+            .getData()
+            .map((o) => ({ id: o.id, value: o[labelField] }))
+            .sort((a, b) => (a.value > b.value ? 1 : -1));
+         const $select = $$(this.ids.select);
+         $select.define("options", options);
+         $select.refresh();
+         $select.setValue(dc.getCursor().id);
+      }
+
+      cursorChange(n) {
+         this.datacollection.setCursor(n);
+      }
+   };
+}