Navigation Blueprints

resources/js/components/navigation/View.vue

@@ -9,7 +9,7 @@
                 <h1 class="flex-1" v-text="title" />
 
                 <dropdown-list class="mr-1">
-                    <dropdown-item :text="__('Configure Navigation')" :redirect="editUrl" />
+                    <slot name="twirldown" />
                 </dropdown-list>
 
                 <a @click="$refs.tree.cancel" class="text-2xs text-blue mr-2 underline" v-if="isDirty" v-text="__('Discard changes')" />
@@ -29,11 +29,11 @@
                             :class="{ 'flex items-center pr-2': hasCollections }"
                             @click="addLink"
                         >
-                            {{ __('Add Link') }}
+                            {{ __('Add Nav Item') }}
                             <svg-icon name="chevron-down-xs" class="w-2 ml-2" v-if="hasCollections" />
                         </button>
                     </template>
-                    <dropdown-item :text="__('Link to URL')" @click="linkPage()" />
+                    <dropdown-item :text="__('Add Nav Item')" @click="linkPage()" />
                     <dropdown-item :text="__('Link to Entry')" @click="linkEntries()" />
                 </dropdown-list>
 
@@ -51,13 +51,14 @@
             :has-collection="false"
             :pages-url="pagesUrl"
             :submit-url="submitUrl"
+            :submit-parameters="{ data: submissionData }"
             :max-depth="maxDepth"
             :expects-root="expectsRoot"
             :site="site"
             :preferences-prefix="preferencesPrefix"
             @edit-page="editPage"
             @changed="changed = true; targetParent = null;"
-            @saved="changed = false"
+            @saved="treeSaved"
             @canceled="changed = false"
         >
             <template #empty>
@@ -102,6 +103,10 @@
             </template>
 
             <template #branch-options="{ branch, removeBranch, orphanChildren, vm, depth }">
+                <dropdown-item
+                    v-if="isEntryBranch(branch)"
+                    :text="__('Edit Entry')"
+                    :redirect="branch.edit_url" />
                 <dropdown-item
                     v-if="depth < maxDepth"
                     :text="__('Add child link to URL')"
@@ -127,14 +132,27 @@
 
         <page-editor
             v-if="editingPage"
-            :initial-title="editingPage.page.title"
-            :initial-url="editingPage.page.url"
+            :site="site"
+            :id="editingPage.page.id"
+            :entry="editingPage.page.entry"
+            :editEntryUrl="editingPage.page.entry ? editingPage.page.edit_url : null"
+            :publish-info="publishInfo[editingPage.page.id]"
+            :blueprint="blueprint"
+            :handle="handle"
+            @publish-info-updated="updatePublishInfo"
+            @localized-fields-updated="updateLocalizedFields"
             @closed="closePageEditor"
             @submitted="updatePage"
         />
 
         <page-editor
             v-if="creatingPage"
+            creating
+            :site="site"
+            :blueprint="blueprint"
+            :handle="handle"
+            @publish-info-updated="updatePendingCreatedPagePublishInfo"
+            @localized-fields-updated="updatePendingCreatedPageLocalizedFields"
             @closed="closePageCreator"
             @submitted="pageCreated"
         />
@@ -156,6 +174,7 @@ import PageEditor from '../structures/PageEditor.vue';
 import PageSelector from '../structures/PageSelector.vue';
 import RemovePageConfirmation from './RemovePageConfirmation.vue';
 import SiteSelector from '../SiteSelector.vue';
+import uniqid from 'uniqid';
 
 export default {
 
@@ -178,7 +197,8 @@ export default {
         maxDepth: { type: Number, default: Infinity, },
         expectsRoot: { type: Boolean, required: true },
         site: { type: String, required: true },
-        sites: { type: Array, required: true }
+        sites: { type: Array, required: true },
+        blueprint: { type: Object, required: true }
     },
 
     data() {
@@ -192,6 +212,7 @@ export default {
             pageBeingDeleted: null,
             pageDeletionConfirmCallback: null,
             preferencesPrefix: `navs.${this.handle}`,
+            publishInfo: {},
         }
     },
 
@@ -215,6 +236,12 @@ export default {
 
         hasCollections() {
             return this.collections.length > 0;
+        },
+
+        submissionData() {
+            return _.mapObject(this.publishInfo, value => {
+                return _.pick(value, ['entry', 'values', 'localizedFields', 'new']);
+            });
         }
 
     },
@@ -248,11 +275,26 @@ export default {
         },
 
         entriesSelected(pages) {
+            pages = pages.map(page => ({
+                ...page,
+                id: uniqid(),
+                entry: page.id,
+                entry_title: page.title,
+                title: null
+            }));
+
+            pages.forEach(page => {
+                this.publishInfo = {...this.publishInfo, [page.id]: {
+                    entry: page.entry,
+                    new: true,
+                }};
+            });
+
             this.$refs.tree.addPages(pages, this.targetParent);
         },
 
         isEntryBranch(branch) {
-            return !!branch.id;
+            return !!branch.entry;
         },
 
         isLinkBranch(branch) {
@@ -263,19 +305,16 @@ export default {
             return !this.isEntryBranch(branch) && !this.isLinkBranch(branch);
         },
 
-        editPage(page, vm, store, $event) {
-            if (page.id) {
-                const url = page.edit_url;
-                $event.metaKey ? window.open(url) : window.location = url;
-            } else {
-                this.editingPage = { page, vm, store };
-            }
+        editPage(page, vm, store) {
+            this.editingPage = { page, vm, store };
         },
 
-        updatePage(page) {
-            this.editingPage.page.url = page.url;
-            this.editingPage.page.title = page.title;
+        updatePage(values) {
+            this.editingPage.page.url = values.url;
+            this.editingPage.page.title = values.title;
+            this.editingPage.page.values = values;
             this.$refs.tree.pageUpdated(this.editingPage.store);
+            this.publishInfo[this.editingPage.page.id].values = values;
 
             this.editingPage = false;
         },
@@ -285,20 +324,31 @@ export default {
         },
 
         openPageCreator() {
-            this.creatingPage = true;
+            this.creatingPage = { info: null };
         },
 
         closePageCreator() {
             this.creatingPage = false;
         },
 
-        pageCreated(page) {
-            this.closePageCreator();
-            this.$refs.tree.addPages([{
-                title: page.title,
-                url: page.url,
+        pageCreated(values) {
+            const page = {
+                id: uniqid(),
+                title: values.title,
+                url: values.url,
                 children: []
-            }], this.targetParent);
+            };
+
+            this.$set(this.publishInfo, page.id, {
+                ...this.creatingPage.info,
+                values,
+                entry: null,
+                new: true,
+            });
+
+            this.$refs.tree.addPages([page], this.targetParent);
+
+            this.closePageCreator();
         },
 
         deleteTreeBranch(branch, removeFromUi, orphanChildren) {
@@ -314,6 +364,43 @@ export default {
 
         siteSelected(site) {
             window.location = site.url;
+        },
+
+        updatePublishInfo(info) {
+            this.publishInfo = { ...this.publishInfo, [this.editingPage.page.id]: info };
+        },
+
+        updatePendingCreatedPagePublishInfo(info) {
+            this.creatingPage.info = info;
+        },
+
+        updateLocalizedFields(fields) {
+            this.publishInfo[this.editingPage.page.id].localizedFields = fields;
+        },
+
+        updatePendingCreatedPageLocalizedFields(fields) {
+            this.creatingPage.info.localizedFields = fields;
+        },
+
+        treeSaved(response) {
+            this.changed = false;
+
+            this.replaceGeneratedIds(response.data.generatedIds);
+        },
+
+        replaceGeneratedIds(ids) {
+            for (let [oldId, newId] of Object.entries(ids)) {
+                // Replace the ID in the publishInfo so if the tree is saved again, its
+                // data will be submitted using the real ID, and now the temp JS one.
+                this.$set(this.publishInfo, newId, { ...this.publishInfo[oldId], new: false });
+                this.$delete(this.publishInfo, oldId);
+
+                // Replace the ID in the branch within the tree.
+                // Same as above, but in the tree itself.
+                let branch = this.$refs.tree.getNodeByBranchId(oldId);
+                branch.id = newId;
+                this.$refs.tree.pageUpdated(branch._vm.store);
+            }
         }
 
     }

resources/js/components/publish/Field.vue

@@ -8,7 +8,12 @@
     <div slot-scope="{ meta, value, loading: loadingMeta }" :class="classes">
         <div class="field-inner">
             <label class="publish-field-label" :class="{'font-bold': config.bold}" :for="fieldId">
-                <span :class="{'font-mono bg-grey-20 py-px px-sm text-xs': showHandle, 'cursor-pointer': canToggleLabel }" v-text="labelText" />
+                <span :class="{
+                    'font-mono bg-grey-20 py-px px-sm text-xs': showHandle,
+                    'cursor-pointer': canToggleLabel,
+                    'text-grey-60': syncable && isSynced
+                    }"
+                v-text="labelText" />
                 <i class="required ml-sm" v-if="config.required">*</i>
                 <avatar v-if="isLocked" :user="lockingUser" class="w-4 rounded-full -mt-px ml-1 mr-1" v-tooltip="lockingUser.name" />
                 <span v-if="isReadOnly && !isSection" class="text-grey-50 font-normal text-2xs mx-sm">
@@ -22,7 +27,7 @@
                     class="outline-none"
                     @click="$emit('desynced')"
                 >
-                    <svg-icon name="hyperlink" class="h-4 ml-sm w-4 text-grey-60"
+                    <svg-icon name="hyperlink" class="h-4 w-4 ml-.5 mt-sm text-grey-60"
                         v-tooltip.top="__('messages.field_synced_with_origin')" />
                 </button>
 
@@ -32,7 +37,7 @@
                     class="outline-none"
                     @click="$emit('synced')"
                 >
-                    <svg-icon name="hyperlink-broken" class="h-4 ml-sm w-4 text-grey-60"
+                    <svg-icon name="hyperlink-broken" class="h-4 w-4 ml-.5 mt-sm text-grey-60"
                         v-tooltip.top="__('messages.field_desynced_from_origin')" />
                 </button>
             </label>

resources/js/components/publish/Fields.vue

@@ -11,7 +11,7 @@
             :meta="meta[field.handle]"
             :errors="errors[field.handle]"
             :read-only="readOnly"
-            :syncable="syncable"
+            :syncable="isSyncableField(field)"
             :can-toggle-label="canToggleLabels"
             :name-prefix="namePrefix"
             @input="$emit('updated', field.handle, $event)"
@@ -45,6 +45,7 @@ export default {
         },
         readOnly: Boolean,
         syncable: Boolean,
+        syncableFields: Array,
         canToggleLabels: Boolean,
         namePrefix: String,
     },
@@ -67,6 +68,18 @@ export default {
             return this.state.errors;
         }
 
+    },
+
+    methods: {
+
+        isSyncableField(field) {
+            if (! this.syncable) return false;
+
+            if (! this.syncableFields) return true;
+
+            return this.syncableFields.includes(field.handle);
+        }
+
     }
 
 }

resources/js/components/structures/Branch.vue

@@ -9,11 +9,11 @@
                 <a
                     @click="$emit('edit', $event)"
                     :class="{ 'text-sm font-medium': isTopLevel }"
-                    v-text="page.title || page.url" />
+                    v-text="title" />
 
                 <button
                     v-if="hasChildren"
-                    class="p-1 text-grey-60 hover:text-grey-70 transition duration-100 outline-none"
+                    class="p-1 text-grey-60 hover:text-grey-70 transition duration-100 outline-none flex"
                     :class="{ '-rotate-90': !isOpen }"
                     @click="$emit('toggle-open')"
                 >
@@ -94,6 +94,10 @@ export default {
 
         isText() {
             return this.page.title && !this.page.url;
+        },
+
+        title() {
+            return this.page.title || this.page.entry_title || this.page.url;
         }
 
     },