Migrate ABViewCarousel

AppBuilder/platform/ABClassManager.js

@@ -11,6 +11,10 @@ import ABViewEditorPlugin from "./plugins/ABViewEditorPlugin.js";
 // some views need to reference ABViewContainer,
 import ABViewContainer from "./views/ABViewContainer.js";
 
+// view property helpers used by plugins
+import ABViewPropertyFilterData from "./views/viewProperties/ABViewPropertyFilterData";
+import ABViewPropertyLinkPage from "./views/viewProperties/ABViewPropertyLinkPage";
+
 // MIGRATION: ABViewManager is depreciated.  Use ABClassManager instead.
 import ABViewManager from "./ABViewManager.js";
 
@@ -62,6 +66,8 @@ export function getPluginAPI() {
       ABViewPropertiesPlugin,
       ABViewEditorPlugin,
       ABViewContainer,
+      ABViewPropertyFilterData,
+      ABViewPropertyLinkPage,
       //  ABFieldPlugin,
       //  ABViewPlugin,
    };

AppBuilder/platform/plugins/included/index.js

@@ -6,6 +6,7 @@ import viewText from "./view_text/FNAbviewtext.js";
 import viewImage from "./view_image/FNAbviewimage.js";
 import viewDataSelect from "./view_data-select/FNAbviewdataselect.js";
 import viewPdfImporter from "./view_pdfImporter/FNAbviewpdfimporter.js";
+import viewCarousel from "./view_carousel/FNAbviewcarousel.js";
 
 const AllPlugins = [
    viewTab,
@@ -15,6 +16,7 @@ const AllPlugins = [
    viewImage,
    viewDataSelect,
    viewPdfImporter,
+   viewCarousel,
 ];
 
 export default {

AppBuilder/platform/plugins/included/view_carousel/FNAbviewcarousel.js

@@ -0,0 +1,190 @@
+import FNAbviewcarouselComponent from "./FNAbviewcarouselComponent.js";
+
+// FNAbviewcarousel Web
+// A web side import for an ABView.
+//
+export default function FNAbviewcarousel({
+   /*AB,*/
+   ABViewWidgetPlugin,
+   ABViewComponentPlugin,
+   ABViewPropertyFilterData,
+   ABViewPropertyLinkPage,
+}) {
+   const ABAbviewcarouselComponent = FNAbviewcarouselComponent({
+      ABViewComponentPlugin,
+   });
+
+   const ABViewCarouselPropertyComponentDefaults = {
+      dataviewID: null, // uuid of ABDatacollection
+      field: null, // uuid
+
+      width: 460,
+      height: 275,
+      showLabel: true,
+      hideItem: false,
+      hideButton: false,
+      navigationType: "corner", // "corner" || "side"
+      filterByCursor: false,
+
+      detailsPage: null, // uuid
+      detailsTab: null, // uuid
+      editPage: null, // uuid
+      editTab: null, // uuid
+   };
+
+   const ABViewDefaults = {
+      key: "carousel", // {string} unique key for this view
+      icon: "clone", // {string} fa-[icon] reference for this view
+      labelKey: "Carousel", // {string} the multilingual label key for the class label
+   };
+
+   function parseIntOrDefault(_this, key) {
+      if (typeof _this.settings[key] != "undefined") {
+         _this.settings[key] = parseInt(_this.settings[key]);
+      } else {
+         _this.settings[key] = ABViewCarouselPropertyComponentDefaults[key];
+      }
+   }
+
+   function parseOrDefault(_this, key) {
+      try {
+         _this.settings[key] = JSON.parse(_this.settings[key]);
+      } catch (e) {
+         _this.settings[key] = ABViewCarouselPropertyComponentDefaults[key];
+      }
+   }
+
+   class ABViewCarouselCore extends ABViewWidgetPlugin {
+      constructor(values, application, parent, defaultValues) {
+         super(values, application, parent, defaultValues || ABViewDefaults);
+      }
+
+      static common() {
+         return ABViewDefaults;
+      }
+
+      static defaultValues() {
+         return ABViewCarouselPropertyComponentDefaults;
+      }
+
+      ///
+      /// Instance Methods
+      ///
+
+      /**
+       * @method fromValues()
+       *
+       * initialze this object with the given set of values.
+       * @param {obj} values
+       */
+      fromValues(values) {
+         super.fromValues(values);
+
+         // convert from "0" => 0
+         parseIntOrDefault(this, "width");
+         parseIntOrDefault(this, "height");
+
+         // json
+         parseOrDefault(this, "showLabel");
+         parseOrDefault(this, "hideItem");
+         parseOrDefault(this, "hideButton");
+
+         this.settings.navigationType =
+            this.settings.navigationType ||
+            ABViewCarouselPropertyComponentDefaults.navigationType;
+
+         parseOrDefault(this, "filterByCursor");
+      }
+
+      /**
+       * @method componentList
+       * return the list of components available on this view to display in the editor.
+       */
+      componentList() {
+         return [];
+      }
+
+      get imageField() {
+         let dc = this.datacollection;
+         if (!dc) return null;
+
+         let obj = dc.datasource;
+         if (!obj) return null;
+
+         return obj.fieldByID(this.settings.field);
+      }
+   }
+
+   return class ABViewCarousel extends ABViewCarouselCore {
+      /**
+       * @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 ABAbviewcarouselComponent(this, parentId);
+      }
+
+      constructor(values, application, parent, defaultValues) {
+         super(values, application, parent, defaultValues);
+      }
+
+      ///
+      /// Instance Methods
+      ///
+
+      /**
+       * @method fromValues()
+       *
+       * initialze this object with the given set of values.
+       * @param {obj} values
+       */
+      fromValues(values) {
+         super.fromValues(values);
+
+         // filter property
+         this.filterHelper.fromSettings(this.settings.filter);
+      }
+
+      get idBase() {
+         return `ABViewCarousel_${this.id}`;
+      }
+
+      get filterHelper() {
+         if (this.__filterHelper == null)
+            this.__filterHelper = new ABViewPropertyFilterData(
+               this.AB,
+               this.idBase
+            );
+
+         return this.__filterHelper;
+      }
+
+      get linkPageHelper() {
+         if (this.__linkPageHelper == null)
+            this.__linkPageHelper = new ABViewPropertyLinkPage();
+
+         return this.__linkPageHelper;
+      }
+
+      warningsEval() {
+         super.warningsEval();
+
+         let field = this.imageField;
+         if (!field) {
+            this.warningsMessage(
+               `can't resolve image field[${this.settings.field}]`
+            );
+         }
+      }
+   };
+}