updated placeholder, selectors, allow adding component to property

clay · Dec 4, 2017 · 9b0727f · 9b0727f
1 parent a2df412
commit 9b0727f
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 15 deletions.
diff --git a/lib/component-data/actions.js b/lib/component-data/actions.js
@@ -300,7 +300,7 @@ function addComponentsToComponentList(store, data, {currentURI, parentURI, path,
  * @returns {Promise}
  */
 function addComponentsToComponentProp(store, data, {parentURI, path, components, clone}) {
-  const oldURI = data[path][refProp];
+  const oldURI = _.get(data, `${path}.${refProp}`);
 
   if (components.length > 1) {
     log.warn(`Attempting to add multiple components to a component prop: ${getComponentName(parentURI)} » ${path}. Only the first component (${_.head(components).name}) will be added!`, { action: 'addComponentsToComponentProp' });
@@ -309,7 +309,9 @@ function addComponentsToComponentProp(store, data, {parentURI, path, components,
   // only create the first one
   return create([_.head(components)], clone).then((newComponents) => {
     return store.dispatch('saveComponent', { uri: parentURI, data: { [path]: _.head(newComponents) } }).then(() => {
-      store.commit(REMOVE_COMPONENT, { uri: oldURI });
+      if (oldURI) {
+        store.commit(REMOVE_COMPONENT, { uri: oldURI });
+      }
       // return the LAST element added
       return find(`[${refAttr}="${_.head(newComponents)[refProp]}"]`);
     });

diff --git a/lib/decorators/selector.vue b/lib/decorators/selector.vue
@@ -199,7 +199,6 @@
         <ui-icon-button v-show="hasDuplicateComponent" type="secondary" color="primary" class="quick-bar-button quick-bar-dupe" icon="add_circle_outline" :tooltip="`Add ${componentLabel}`" @click.stop="duplicateComponent"></ui-icon-button>
         <ui-icon-button v-show="hasDuplicateComponentWithData" type="secondary" color="primary" class="quick-bar-button quick-bar-dupe" icon="add_circle" :tooltip="`Duplicate ${componentLabel}`" @click.stop="duplicateComponentWithData"></ui-icon-button>
         <ui-icon-button v-once v-show="hasAddComponent" type="secondary" color="primary" class="quick-bar-button quick-bar-add" icon="add" :tooltip="addComponentText" @click.stop="openAddComponentPane"></ui-icon-button>
-        <ui-icon-button v-once v-show="hasReplaceComponent" type="secondary" color="primary" class="quick-bar-button quick-bar-replace" icon="swap_vert" :tooltip="`Replace ${componentLabel}`"></ui-icon-button>
       </div>
     </aside>
   </transition>
@@ -248,10 +247,8 @@
         componentLabel: label(getComponentName(this.$options.uri)),
         parentField: this.$options.parentField,
         parentURI: this.$options.parentURI,
-        // note: only for components in LISTS! components in properties can be replaced but not removed (for now)
-        hasRemove: this.$options.parentField && this.$options.parentField.type === 'list' && this.$options.parentField.isEditable,
-        hasAddComponent: this.$options.parentField && this.$options.parentField.type === 'list' && this.$options.parentField.isEditable,
-        hasReplaceComponent: this.$options.parentField && this.$options.parentField.type === 'prop' && this.$options.parentField.isEditable
+        hasRemove: this.$options.parentField && this.$options.parentField.isEditable,
+        hasAddComponent: this.$options.parentField && this.$options.parentField.type === 'list' && this.$options.parentField.isEditable
       };
     },
     computed: {

diff --git a/lib/forms/overlay.vue b/lib/forms/overlay.vue
@@ -114,7 +114,6 @@
           <ui-icon-button v-if="hasDuplicateComponent" type="secondary" color="black" icon="add_circle_outline" :tooltip="`Add ${componentLabel}`" @click.stop="duplicateComponent"></ui-icon-button>
           <ui-icon-button v-if="hasDuplicateComponentWithData" type="secondary" color="black" icon="add_circle" :tooltip="`Duplicate ${componentLabel}`" @click.stop="duplicateComponentWithData"></ui-icon-button>
           <ui-icon-button v-if="hasAddComponent" type="secondary" color="black" icon="add" :tooltip="addComponentText" @click.stop="openAddComponentPane"></ui-icon-button>
-          <ui-icon-button v-if="hasReplaceComponent" type="secondary" color="black" icon="swap_vert" :tooltip="`Replace ${componentLabel}`"></ui-icon-button>
           <div class="form-close-divider"></div>
           <ui-icon-button color="black" type="secondary" icon="check" ariaLabel="Save Form" tooltip="Save (ESC)" @click.stop="save"></ui-icon-button>
         </div>
@@ -229,8 +228,7 @@
       },
       isCurrentlySelected: (state) => _.get(state, 'ui.currentForm.uri') === _.get(state, 'ui.currentSelection.uri'),
       hasRemove(state) {
-        // note: this only shows up if the component that contains this form is selected
-        return this.isCurrentlySelected && _.get(state, 'ui.currentSelection.parentField.type') === 'list' && _.get(state, 'ui.currentSelection.parentField.isEditable');
+        return this.isCurrentlySelected && _.get(state, 'ui.currentSelection.parentField.isEditable');
       },
       hasDuplicateComponent(state) {
         return this.isCurrentlySelected && _.get(state, 'ui.currentSelection.parentField.type') === 'list' && _.get(state, 'ui.currentSelection.parentField.isEditable') && !_.get(state, 'ui.metaKey');
@@ -239,13 +237,8 @@
         return this.isCurrentlySelected && _.get(state, 'ui.currentSelection.parentField.type') === 'list' && _.get(state, 'ui.currentSelection.parentField.isEditable') && _.get(state, 'ui.metaKey');
       },
       hasAddComponent(state) {
-        // note: this only shows up if the component that contains this form is selected
         return this.isCurrentlySelected && _.get(state, 'ui.currentSelection.parentField.type') === 'list' && _.get(state, 'ui.currentSelection.parentField.isEditable');
       },
-      hasReplaceComponent(state) {
-        // note: this only shows up if the component that contains this form is selected
-        return this.isCurrentlySelected && _.get(state, 'ui.currentSelection.parentField.type') === 'prop' && _.get(state, 'ui.currentSelection.parentField.isEditable');
-      },
       addComponentText(state) {
         if (this.hasAddComponent) {
           const schema = getSchema(_.get(state, 'ui.currentSelection.parentURI'), _.get(state, 'ui.currentSelection.parentField.path')),