Migrate Image View

AppBuilder/platform/plugins/included/index.js

@@ -1,8 +1,9 @@
+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";
 
-const AllPlugins = [viewTab, viewList, viewText];
+const AllPlugins = [viewTab, viewList, viewImage, viewText];
 
 export default {
    load: (AB) => {

AppBuilder/platform/plugins/included/view_image/FNAbviewimage.js

@@ -0,0 +1,117 @@
+import FNAbviewimageComponent from "./FNAbviewimageComponent.js";
+
+// FNAbviewimage Web
+// A web side import for an ABView.
+//
+export default function FNAbviewimage({
+   /*AB,*/
+   ABViewWidgetPlugin,
+   ABViewComponentPlugin,
+   ABViewContainer,
+}) {
+   const ABAbviewimageComponent = FNAbviewimageComponent({
+      ABViewComponentPlugin,
+   });
+
+   const ABViewImagePropertyComponentDefaults = {
+      filename: "",
+      width: 200,
+      height: 100,
+   };
+
+   const ABViewDefaults = {
+      key: "image", // {string} unique key for this view
+      icon: "picture-o", // {string} fa-[icon] reference for this view
+      labelKey: "Image", // {string} the multilingual label key for the class label
+   };
+
+   class ABViewImageCore extends ABViewWidgetPlugin {
+      constructor(values, application, parent, defaultValues) {
+         super(values, application, parent, defaultValues || ABViewDefaults);
+      }
+
+      static common() {
+         return ABViewDefaults;
+      }
+
+      static defaultValues() {
+         return ABViewImagePropertyComponentDefaults;
+      }
+
+      ///
+      /// Instance Methods
+      ///
+
+      /**
+       * @method componentList
+       * return the list of components available on this view to display in the editor.
+       */
+      componentList() {
+         return [];
+      }
+
+      /**
+       * @property datacollection
+       * return data source
+       * NOTE: this view doesn't track a DataCollection.
+       * @return {ABDataCollection}
+       */
+      get datacollection() {
+         return null;
+      }
+
+      /**
+       * @method fromValues()
+       *
+       * initialze this object with the given set of values.
+       * @param {obj} values
+       */
+      fromValues(values) {
+         super.fromValues(values);
+
+         // convert from "0" => 0
+         this.settings.width = parseInt(
+            this.settings.width || ABViewImagePropertyComponentDefaults.width
+         );
+         this.settings.height = parseInt(
+            this.settings.height || ABViewImagePropertyComponentDefaults.height
+         );
+      }
+   }
+
+   return class ABViewImage extends ABViewImageCore {
+      /**
+       * @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 ABAbviewimageComponent(this, parentId);
+      }
+
+      // constructor(values, application, parent, defaultValues) {
+      //    super(values, application, parent, defaultValues);
+      // }
+
+      //
+      //	Editor Related
+      //
+
+      warningsEval() {
+         super.warningsEval();
+
+         if (!this.settings.filename) {
+            this.warningsMessage(`has no image set`);
+         }
+      }
+   };
+}

AppBuilder/platform/plugins/included/view_image/FNAbviewimageComponent.js

@@ -0,0 +1,54 @@
+export default function FNAbviewimageComponent({
+   /*AB,*/
+   ABViewComponentPlugin,
+}) {
+   return class ABAbviewimageComponent extends ABViewComponentPlugin {
+      constructor(baseView, idBase, ids) {
+         super(
+            baseView,
+            idBase || `ABViewImage_${baseView.id}`,
+            Object.assign({ image: "" }, ids)
+         );
+      }
+
+      ui() {
+         const settings = this.settings;
+         const _ui = super.ui([
+            {
+               cols: [
+                  {
+                     id: this.ids.image,
+                     view: "template",
+                     template: "",
+                     height: settings.height,
+                     width: settings.width,
+                  },
+                  {},
+               ],
+            },
+         ]);
+
+         delete _ui.type;
+
+         return _ui;
+      }
+
+      async init(AB) {
+         await super.init(AB);
+
+         const $image = $$(this.ids.image);
+         if (!$image) return;
+
+         const settings = this.settings;
+
+         if (settings.filename)
+            $image.define(
+               "template",
+               `<img src="/file/${settings.filename}" height="${settings.height}" width="${settings.width}">`
+            );
+         else $image.define("template", "");
+
+         $image.refresh();
+      }
+   };
+}