[wip] move ghosting, widget operations skipping, breadcrumb operations stub

Author: myovchev

modules/@apostrophecms/area/ui/apos/components/AposAreaWidget.vue

@@ -76,7 +76,15 @@
             />
           </li>
         </ol>
-        <!-- TODO add support for breadcrumb aside horizontal controls -->
+        <!-- FIXME Bring widget controls data from the widget config -->
+        <ol
+          class="apos-area-widget__breadcrumbs"
+          style="margin-left: 10px;"
+        >
+          <li class="apos-area-widget__breadcrumb">
+            Look 'ma, horizontal controls!
+          </li>
+        </ol>
       </div>
       <div
         v-if="!controlsDisabled"
@@ -832,7 +840,8 @@ export default {
   .apos-area-widget__label {
     position: absolute;
     top: 0;
-    right: 0;
+    left: 0; // switch the root label position from right to left
+    // right: 0;
     display: flex;
     transform: translateY(-100%);
     transition: opacity 300ms ease;

modules/@apostrophecms/area/ui/apos/components/AposWidgetControls.vue

@@ -141,7 +141,10 @@ export default {
         }))
       );
 
-      return controls;
+      return controls.filter(control => (
+        !this.widgetSkipControlsMap.get(control.action) &&
+          !this.widgetSkipControlsMap.get(control.name)
+      ));
     },
     widgetSecondaryControls() {
       const controls = [];
@@ -179,7 +182,10 @@ export default {
       // Custom widget operations displayed in the secondary controls
       controls.push(...this.widgetSecondaryOperations);
 
-      return controls;
+      return controls.filter(control => (
+        !this.widgetSkipControlsMap.get(control.action) &&
+          !this.widgetSkipControlsMap.get(control.name)
+      ));
     },
     widgetRemoveControl() {
       return {
@@ -194,17 +200,25 @@ export default {
         action: 'remove'
       };
     },
+    widgetSkipControlsMap() {
+      return new Map(
+        (this.moduleOptions.skipOperations || [])
+          .map(operation => [ operation, true ])
+      );
+    },
     widgetPrimaryOperations() {
       return this.getOperations({ secondaryLevel: false });
     },
     widgetSecondaryOperations() {
       return this.getOperations({ secondaryLevel: true });
+    },
+    moduleOptions() {
+      return apos.modules[apos.area.widgetManagers[this.modelValue.type]] ?? {};
     }
   },
   methods: {
     getOperations({ secondaryLevel }) {
-      const moduleOptions = apos.modules[apos.area.widgetManagers[this.modelValue.type]];
-      const { widgetOperations = [] } = moduleOptions || {};
+      const { widgetOperations = [] } = this.moduleOptions;
       return widgetOperations.filter(operation => {
         if (operation.if) {
           if (!checkIfConditions(this.modelValue, operation.if)) {

modules/@apostrophecms/layout-widget/index.js

@@ -2,6 +2,8 @@ module.exports = {
   extend: '@apostrophecms/widget-type',
   options: {
     label: 'apostrophe:layout',
+    initialModal: false,
+    skipOperations: [ 'edit' ],
     columns: 12,
     minSpan: 2,
     defaultSpan: 4,

modules/@apostrophecms/layout-widget/ui/apos/components/AposAreaLayoutEditor.vue

@@ -200,33 +200,39 @@ export default {
       return this.layoutModes.device.data || 'desktop';
     }
   },
-  watch: {
-    layoutManageMode(newMode, oldMode) {
-      if (newMode === 'view' && oldMode !== 'view') {
-        this.layoutSort();
-      }
-    }
-  },
   mounted() {
     if (!this.hasLayoutMeta) {
       this.onCreateProvision();
     }
   },
   methods: {
     // Sort by the desktop order so that the auto-layout works correctly.
-    layoutSort() {
-      const sorted = this.layoutColumnWidgets.sort((a, b) => {
-        return (a.desktop.order || 0) - (b.desktop.order || 0);
-      });
+    // FIXME: not working, not supported by the backend somehow.
+    layoutSortAll() {
+      // const sorted = this.next.filter(w => w.type === this.layoutColumnWidgetName);
 
-      // FIXME: this doesn't work, the array is never updated in the DB.
-      this.next = [ this.layoutMeta, ...sorted ].filter(Boolean);
-    },
-    onResizeEnd(patchArr) {
-      if (!patchArr?.length) {
-        return;
-      }
-      this.layoutPatchMany(patchArr);
+      // sorted.sort((a, b) => {
+      //   return (a.desktop.order || 0) - (b.desktop.order || 0);
+      // });
+
+      // if (this.docId === window.apos.adminBar.contextId) {
+      // No need to clone - the event handler will do that.
+      // const patch = {
+      //   $pullAllById: {
+      //     [`@${this.id}.items`]: [
+      //       sorted.map(w => w._id)
+      //     ]
+      //   },
+      //   $push: {
+      //     [`@${this.id}.items`]: {
+      //       $each: [ ...sorted ]
+      //     }
+      //   }
+      // };
+      // apos.bus.$emit('context-edited', patch);
+      // }
+
+      // this.next = [ this.layoutMeta, ...sorted ];
     },
     onCreateProvision() {
       if (!this.layoutMetaWidgetName) {
@@ -255,6 +261,12 @@ export default {
       this.insert(insert);
       return insert;
     },
+    onResizeEnd(patchArr) {
+      if (!patchArr?.length) {
+        return;
+      }
+      this.layoutPatchMany(patchArr);
+    },
     onAddFitItem(patchArr) {
       const widgetName = this.layoutColumnWidgetName;
       if (!widgetName) {
@@ -265,13 +277,15 @@ export default {
       });
       this.onAddItem(insert);
       this.layoutPatchMany(patchArr);
+      this.layoutSortAll();
     },
     onRemoveItem({ _id, patches }) {
       const index = this.next.findIndex(w => w._id === _id);
       if (index !== -1 && this.next[index].type === this.layoutColumnWidgetName) {
         this.remove(index);
       }
       this.layoutPatchMany(patches);
+      this.layoutSortAll();
     },
     layoutPatchDevice({
       _id, device, patch