Add property "description" to common options #211

AbdallaElabd · 2017-01-10T12:07:30Z

Added a property "description" to components.
https://www.dropbox.com/s/qdkahwaoyt9ljuo/Screenshot%202017-01-10%2013.04.32.png?dl=0

travist · 2017-01-11T01:37:49Z

src/constants/commonOptions.js

@@ -19,6 +19,11 @@ module.exports = {
    placeholder: 'Placeholder',
    tooltip: 'The placeholder text that will appear when this field is empty.'
  },
+  description: {


Don't you also want to add this to the settings of the component? I like what you have added here. Thanks for your contribution.

I added an extra bit of HTML to display the description when rendering a component, it's in my other pull request on the ngFormio repo. formio/ngFormio@321d9a3#diff-cc84655aafd02adf5dd2a91991f14731

And regarding adding the description to the template of all components, we're overriding the templates ourselves in the project we're using FormIO in, but we could add it in the Display tab of all components in this PR, if that's what you mean.

Yes, I would like to see this as part of the standard form builder, so if you can provide a setting within the Display tab.

…table === true

…nEditable === true

# Conflicts: # src/directives/formBuilderDnd.js

AbdallaElabd · 2017-01-11T11:10:15Z

Also added a solution to this issue: #212

travist · 2017-01-11T14:03:04Z

src/directives/formBuilderDnd.js

@@ -31,7 +31,7 @@ module.exports = [

    $scope.addComponent = function(component, index) {
      // Only edit immediately for components that are not resource comps.
-      if (component.isNew && (!component.key || (component.key.indexOf('.') === -1))) {
+      if (component.isNew && !component.isNonEditable && (!component.key || (component.key.indexOf('.') === -1))) {


I don't like having negatives in variable names. I understand why you did this since you want reverse compatibility, but can we call this variable something like isStatic, which I suppose could be interpreted as "Configurations are static". I am open to suggestions.

Thanks for your contributions.

Actually I was trying to come up with a fix to this issue: #212
I think we could add an "isConfigurable" property to all component that default to true, unless set to false by the person registering the component.

… false

AbdallaElabd · 2017-01-12T15:50:30Z

dist/ngFormBuilder.js

@@ -2925,6 +2925,9 @@ module.exports = ['debounce', function(debounce) {
        $scope.formComponents = _.cloneDeep(formioComponents.components);
        _.each($scope.formComponents, function(component, key) {
          component.settings.isNew = true;
+          if (!component.settings.hasOwnProperty('isConfigurable')) {


This is where I default the value to true, if it's not provided by the person registering the component.

AbdallaElabd · 2017-01-12T15:54:07Z

dist/ngFormBuilder.js

@@ -3973,7 +3976,7 @@ app.run([
    });

    $templateCache.put('formio/formbuilder/editbuttons.html',
-      "<div class=\"component-btn-group\">\n  <div class=\"btn btn-xxs btn-danger component-settings-button\" style=\"z-index: 1000\" ng-click=\"removeComponent(component, formComponent.confirmRemove)\"><span class=\"glyphicon glyphicon-remove\"></span></div>\n  <div ng-if=\"::!hideMoveButton\" class=\"btn btn-xxs btn-default component-settings-button\" style=\"z-index: 1000\"><span class=\"glyphicon glyphicon glyphicon-move\"></span></div>\n  <div ng-if=\"::formComponent.views && !component.isNonEditable\" class=\"btn btn-xxs btn-default component-settings-button\" style=\"z-index: 1000\" ng-click=\"editComponent(component)\"><span class=\"glyphicon glyphicon-cog\"></span></div>\n</div>\n"
+      "<div class=\"component-btn-group\">\n  <div class=\"btn btn-xxs btn-danger component-settings-button\" style=\"z-index: 1000\" ng-click=\"removeComponent(component, formComponent.confirmRemove)\"><span class=\"glyphicon glyphicon-remove\"></span></div>\n  <div ng-if=\"::!hideMoveButton && component.isConfigurable\" class=\"btn btn-xxs btn-default component-settings-button\" style=\"z-index: 1000\"><span class=\"glyphicon glyphicon glyphicon-move\"></span></div>\n  <div ng-if=\"::formComponent.views && !component.isNonEditable\" class=\"btn btn-xxs btn-default component-settings-button\" style=\"z-index: 1000\" ng-click=\"editComponent(component)\"><span class=\"glyphicon glyphicon-cog\"></span></div>\n</div>\n"


Components with isConfigurable: false will not have an edit button.

travist · 2017-01-15T16:00:20Z

src/templates/editbuttons.html

-  <div ng-if="::!hideMoveButton" class="btn btn-xxs btn-default component-settings-button" style="z-index: 1000"><span class="glyphicon glyphicon glyphicon-move"></span></div>
-  <div ng-if="::formComponent.views" class="btn btn-xxs btn-default component-settings-button" style="z-index: 1000" ng-click="editComponent(component)"><span class="glyphicon glyphicon-cog"></span></div>
+  <div ng-if="::!hideMoveButton && component.isConfigurable" class="btn btn-xxs btn-default component-settings-button" style="z-index: 1000"><span class="glyphicon glyphicon glyphicon-move"></span></div>
+  <div ng-if="::formComponent.views && !component.isNonEditable" class="btn btn-xxs btn-default component-settings-button" style="z-index: 1000" ng-click="editComponent(component)"><span class="glyphicon glyphicon-cog"></span></div>


Shouldn't this be component.isConfigurable?

travist · 2017-01-16T16:32:12Z

I ended up bringing in the Description stuff into the next build, but left out the isConfigurable due to the risk. Please create a separate PR that includes just this capability.

Thanks!

Add description property to the list of common options

be9a70f

travist reviewed Jan 11, 2017

View reviewed changes

AbdallaElabd added 3 commits January 11, 2017 12:06

Disable auto-opening edit modal of added components if their isNonEdi…

5912a9e

…table === true

Disable auto-opening the edit modal of added components if their isNo…

ba2ae92

…nEditable === true

Merge remote-tracking branch 'origin/master'

e1f4e9c

# Conflicts: # src/directives/formBuilderDnd.js

AbdallaElabd added 2 commits January 11, 2017 12:42

fix: hide edit button if component is non-editable

4fc9a50

fix: correct the description's placeholder property

ed0b8b1

travist reviewed Jan 11, 2017

View reviewed changes

AbdallaElabd added 4 commits January 11, 2017 15:03

chore: update dist files

69c444a

chore: update dist files

dfe5241

fix: add isConfigurable that disables editing the component if set to…

8ea8b9f

… false

commit dist files

049a911

AbdallaElabd commented Jan 12, 2017

View reviewed changes

travist reviewed Jan 15, 2017

View reviewed changes

AbdallaElabd closed this Jan 18, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add property "description" to common options #211

Add property "description" to common options #211

AbdallaElabd commented Jan 10, 2017

travist Jan 11, 2017

AbdallaElabd Jan 11, 2017

AbdallaElabd Jan 11, 2017 •

edited

travist Jan 15, 2017

AbdallaElabd commented Jan 11, 2017

travist Jan 11, 2017

AbdallaElabd Jan 12, 2017 •

edited

AbdallaElabd Jan 12, 2017

AbdallaElabd Jan 12, 2017

travist Jan 15, 2017

travist commented Jan 16, 2017

Add property "description" to common options #211

Add property "description" to common options #211

Conversation

AbdallaElabd commented Jan 10, 2017

travist Jan 11, 2017

Choose a reason for hiding this comment

AbdallaElabd Jan 11, 2017

Choose a reason for hiding this comment

AbdallaElabd Jan 11, 2017 • edited

Choose a reason for hiding this comment

travist Jan 15, 2017

Choose a reason for hiding this comment

AbdallaElabd commented Jan 11, 2017

travist Jan 11, 2017

Choose a reason for hiding this comment

AbdallaElabd Jan 12, 2017 • edited

Choose a reason for hiding this comment

AbdallaElabd Jan 12, 2017

Choose a reason for hiding this comment

AbdallaElabd Jan 12, 2017

Choose a reason for hiding this comment

travist Jan 15, 2017

Choose a reason for hiding this comment

travist commented Jan 16, 2017

AbdallaElabd Jan 11, 2017 •

edited

AbdallaElabd Jan 12, 2017 •

edited