diff --git a/AppBuilder/core b/AppBuilder/core index 9c645df2..24cab350 160000 --- a/AppBuilder/core +++ b/AppBuilder/core @@ -1 +1 @@ -Subproject commit 9c645df2f06fb745e3ea0e43e7fd3764da9cd82b +Subproject commit 24cab35009a9f79ab20fe6e9f8cddfac1664f68e diff --git a/AppBuilder/platform/plugins/included/index.js b/AppBuilder/platform/plugins/included/index.js index 6dfee297..cf689457 100644 --- a/AppBuilder/platform/plugins/included/index.js +++ b/AppBuilder/platform/plugins/included/index.js @@ -2,8 +2,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"; +import viewLabel from "./view_label/FNAbviewlabel.js"; -const AllPlugins = [viewTab, viewList, viewImage, viewText]; +const AllPlugins = [viewTab, viewList, viewLabel, viewImage, viewText]; export default { load: (AB) => { diff --git a/AppBuilder/platform/plugins/included/view_label/FNAbviewLabelComponent.js b/AppBuilder/platform/plugins/included/view_label/FNAbviewLabelComponent.js new file mode 100644 index 00000000..754413a9 --- /dev/null +++ b/AppBuilder/platform/plugins/included/view_label/FNAbviewLabelComponent.js @@ -0,0 +1,83 @@ +export default function FNAbviewLabelComponent({ + // AB, + ABViewComponentPlugin, +}) { + return class ABViewLabelComponent extends ABViewComponentPlugin { + constructor(baseView, idBase, ids) { + super( + baseView, + idBase || `ABViewLabel_${baseView.id}`, + Object.assign( + { + template: "", + }, + ids, + ), + ); + } + + /** + * @method ui + * return the Webix UI definition for this component. + * @return {object} Webix UI definition + */ + ui() { + const baseView = this.view + baseView.text = baseView.text || this.view.settings.text + this.settings = this.view.settings + + const _ui = super.ui([ + this.uiFormatting({ + view: "label", + label: baseView.text || "*", + align: this.settings.alignment, + type: { + height: "auto", + }, + }), + ]); + + delete _ui.type; + + return _ui; + } + /** + * @method uiFormatting + * a common routine to properly update the displayed label + * UI with the css formatting for the given .settings + * @param {obj} _ui the current webix.ui definition + * @return {obj} a properly formatted webix.ui definition + */ + uiFormatting(ui) { + // add different css settings based upon it's format + // type. + this.settings = this.view.settings + switch (parseInt(this.settings.format)) { + // normal + case 0: + ui.css = "ab-component-label ab-ellipses-text"; + break; + + // title + case 1: + ui.css = "ab-component-header ab-ellipses-text"; + break; + + // description + case 2: + ui.css = "ab-component-description ab-ellipses-text"; + break; + } + + return ui; + } + /** + * @method onShow + * called when the component is shown. + * perform any additional initialization here. + */ + onShow() { + super.onShow(); + } + }; +} diff --git a/AppBuilder/platform/plugins/included/view_label/FNAbviewlabel.js b/AppBuilder/platform/plugins/included/view_label/FNAbviewlabel.js new file mode 100644 index 00000000..afecaaa5 --- /dev/null +++ b/AppBuilder/platform/plugins/included/view_label/FNAbviewlabel.js @@ -0,0 +1,167 @@ +import FNAbviewLabelComponent from "./FNAbviewLabelComponent.js"; + + +// FNViewLabel Web +// A web side import for an ABView. +// +export default function FNViewLabel({ + /*AB,*/ + ABViewWidgetPlugin, + ABViewPlugin, + ABViewComponentPlugin, +}) { + const ABViewLabelComponent = FNAbviewLabelComponent({ ABViewComponentPlugin }); + + + // Define the default values for this components settings: + // when a new instance of your widget is created, these values will be + // the default settings + const ABViewLabelComponentDefaults = { + text: "", // {string} + format: 0, + alignment: "left", + }; + + // Define the Default Values for this ABView + // These are used by the platform and ABDesigner to display the view. + const ABViewDefaults = { + key: "label", // {string} unique key for this view + icon: "font", // {string} fa-[icon] reference for this view + labelKey: "Label", // {string} the multilingual label key for the class label + }; + + class ABViewLabelCore extends ABViewWidgetPlugin { + constructor(values, application, parent, defaultValues) { + super(values, application, parent, defaultValues || ABViewDefaults); + } + + /** + * @method common + * return the common values for this view. + * @return {obj} common values + */ + static common() { + return ABViewDefaults; + } + + /** + * @method defaultValues + * return the default values for this view. + * @return {obj} default values + */ + static defaultValues() { + return ABViewLabelComponentDefaults; + } + + /** + * @method toObj() + * properly compile the current state of this ABView instance + * into the values needed for saving to the DB. + * @return {json} + */ + toObj() { + // NOTE: ABView auto translates/untranslates "label" + // add in any additional fields here: + this.unTranslate(this, this, ["text"]); + + var obj = super.toObj(); + obj.views = []; + return obj; + } + /** + * @method fromValues() + * + * initialze this object with the given set of values. + * @param {obj} values + */ + fromValues(values) { + super.fromValues(values); // <-- this performs the translations + this.settings = this.settings || {}; + + // if this is being instantiated on a read from the Property UI, + // .text is coming in under .settings.label + this.text = values.text || values.settings.text || "*text"; + + this.settings.format = + this.settings.format || ABViewLabelPropertyComponentDefaults.format; + this.settings.alignment = + this.settings.alignment || + ABViewLabelPropertyComponentDefaults.alignment; + + // we are not allowed to have sub views: + this._views = []; + + // convert from "0" => 0 + this.settings.format = parseInt(this.settings.format); + + // NOTE: ABView auto translates/untranslates "label" + // add in any additional fields here: + this.translate(this, this, ["label", "text"]); + } + + /** + * @method componentList + * return the list of components available on this view to display in the editor. + */ + componentList() { + // other components cannot be placed inside + return []; + } + //// Allow external interface to manipulate our settings: + /** + * @method formatNormal + * display text in the normal format. + */ + formatNormal() { + this.settings.format = 0; + } + + /** + * @method formatTitle + * display text as a Title. + */ + formatTitle() { + this.settings.format = 1; + } + + /** + * @method formatDescription + * display text as a description. + */ + formatDescription() { + this.settings.format = 2; + } + warningsEval() { + super.warningsEval(); + + if (!this.text) { + this.warningsMessage("has no text value set."); + } + } + } + + return class ABViewLabel extends ABViewLabelCore { + constructor(...params) { + super(...params); + } + + /** + * @method getPluginKey + * return the plugin key for this view. + * @return {string} plugin key + */ + static getPluginKey() { + return "label"; + } + + /** + * @method component() + * return a UI component based upon this view. + * @return {obj} UI component + */ + component(parentId) { + return new ABViewLabelComponent(this, parentId); + } + }; +} + diff --git a/AppBuilder/platform/plugins/included/view_text/FNAbviewtext.js b/AppBuilder/platform/plugins/included/view_text/FNAbviewtext.js index 9f4ebcab..7d7426a2 100644 --- a/AppBuilder/platform/plugins/included/view_text/FNAbviewtext.js +++ b/AppBuilder/platform/plugins/included/view_text/FNAbviewtext.js @@ -68,7 +68,7 @@ export default function FNAbviewtext({ /** * @method toObj() * - * properly compile the current state of this ABViewLabel instance + * properly compile the current state of this ABViewText instance * into the values needed for saving. * * @return {json} diff --git a/AppBuilder/platform/views/ABViewLabel.js b/AppBuilder/platform/views/ABViewLabel.js deleted file mode 100644 index 6577b850..00000000 --- a/AppBuilder/platform/views/ABViewLabel.js +++ /dev/null @@ -1,25 +0,0 @@ -const ABViewLabelCore = require("../../core/views/ABViewLabelCore"); -const ABViewLabelComponent = require("./viewComponent/ABViewLabelComponent"); - -module.exports = class ABViewLabel extends ABViewLabelCore { - constructor(values, application, parent, defaultValues) { - super(values, application, parent, defaultValues); - } - - /** - * @method component() - * return a UI component based upon this view. - * @return {obj} UI component - */ - component() { - return new ABViewLabelComponent(this); - } - - warningsEval() { - super.warningsEval(); - - if (!this.text) { - this.warningsMessage("has no text value set."); - } - } -}; diff --git a/AppBuilder/platform/views/viewComponent/ABViewLabelComponent.js b/AppBuilder/platform/views/viewComponent/ABViewLabelComponent.js deleted file mode 100644 index 1ed8766d..00000000 --- a/AppBuilder/platform/views/viewComponent/ABViewLabelComponent.js +++ /dev/null @@ -1,57 +0,0 @@ -const ABViewComponent = require("./ABViewComponent").default; - -module.exports = class ABViewLabelComponent extends ABViewComponent { - constructor(baseView, idBase, ids) { - super(baseView, idBase || `ABViewLabel_${baseView.id}`, ids); - } - - ui() { - const baseView = this.view; - - const _ui = super.ui([ - this.uiFormatting({ - view: "label", - // css: 'ab-component-header ab-ellipses-text', - label: baseView.text || "*", - align: this.settings.alignment, - type: { - height: "auto", - }, - }), - ]); - - delete _ui.type; - - return _ui; - } - - /** - * @method uiFormatting - * a common routine to properly update the displayed label - * UI with the css formatting for the given .settings - * @param {obj} _ui the current webix.ui definition - * @return {obj} a properly formatted webix.ui definition - */ - uiFormatting(ui) { - // add different css settings based upon it's format - // type. - switch (parseInt(this.settings.format)) { - // normal - case 0: - ui.css = "ab-component-label ab-ellipses-text"; - break; - - // title - case 1: - ui.css = "ab-component-header ab-ellipses-text"; - break; - - // description - case 2: - ui.css = "ab-component-description ab-ellipses-text"; - break; - } - - return ui; - } -};