[4.x] Entries Fieldtype: Tree View

resources/js/components/collections/View.vue

@@ -103,7 +103,6 @@
         <page-tree
             v-if="canUseStructureTree && view === 'tree'"
             ref="tree"
-            :has-collection="true"
             :collections="[handle]"
             :create-url="createUrl"
             :pages-url="structurePagesUrl"

resources/js/components/fieldtypes/relationship/RelationshipFieldtype.vue

@@ -24,6 +24,7 @@
         :search="canSearch"
         :read-only="isReadOnly"
         :taggable="taggable"
+        :tree="meta.tree"
         @focus="$emit('focus')"
         @blur="$emit('blur')"
         @input="update"

resources/js/components/inputs/relationship/RelationshipInput.vue

@@ -65,6 +65,7 @@
             <stack name="item-selector" v-if="isSelecting" @closed="isSelecting = false">
                 <item-selector
                     slot-scope="{ close }"
+                    :name="name"
                     :filters-url="filtersUrl"
                     :selections-url="selectionsUrl"
                     :site="site"
@@ -76,6 +77,7 @@
                     :search="search"
                     :exclusions="exclusions"
                     :type="config.type"
+                    :tree="tree"
                     @selected="selectionsUpdated"
                     @closed="close"
                 />
@@ -128,7 +130,8 @@ export default {
         columns: {
             type: Array,
             default: () => []
-        }
+        },
+        tree: Object,
     },
 
     components: {

resources/js/components/inputs/relationship/Selector.vue

@@ -7,7 +7,7 @@
         </div>
 
         <data-list
-            v-if="!initializing"
+            v-if="!initializing && view === 'list'"
             ref="dataList"
             :rows="items"
             :columns="columns"
@@ -19,9 +19,17 @@
             @selections-updated="selectionsUpdated"
         >
             <div slot-scope="{}" class="flex flex-col h-full">
-                <div class="bg-white bg-gray-200">
-                    <div class="p-2">
+                <div class="bg-white z-1">
+                    <div class="py-2 px-4 flex items-center justify-between">
                         <data-list-search class="h-8 min-w-[240px] w-full" ref="search" v-model="searchQuery" :placeholder="searchPlaceholder" />
+                        <div class="btn-group ml-4" v-if="canUseTree">
+                            <button class="btn flex items-center px-4" @click="view = 'tree'" :class="{'active': view === 'tree'}" v-tooltip="__('Tree')">
+                                <svg-icon name="light/structures" class="h-4 w-4"/>
+                            </button>
+                            <button class="btn flex items-center px-4" @click="view = 'list'" :class="{'active': view === 'list'}" v-tooltip="__('List')">
+                                <svg-icon name="assets-mode-table" class="h-4 w-4" />
+                            </button>
+                        </div>
                     </div>
                     <div>
                         <data-list-filters
@@ -97,19 +105,101 @@
 
             </div>
         </data-list>
+
+        <template v-if="!initializing && canUseTree && view === 'tree'">
+            <div class="flex flex-col h-full">
+                <div class="bg-white bg-gray-200 shadow px-4 py-2 z-1 h-13 flex items-center justify-end">
+                    <h1 class="flex-1 flex items-center text-xl">{{ tree.title }}</h1>
+                    <div class="btn-group ml-4">
+                        <button class="btn flex items-center px-4" @click="view = 'tree'" :class="{'active': view === 'tree'}" v-tooltip="__('Tree')">
+                            <svg-icon name="light/structures" class="h-4 w-4"/>
+                        </button>
+                        <button class="btn flex items-center px-4" @click="view = 'list'" :class="{'active': view === 'list'}" v-tooltip="__('List')">
+                            <svg-icon name="assets-mode-table" class="h-4 w-4" />
+                        </button>
+                    </div>
+                </div>
+
+                <div class="flex-1 flex flex-col min-h-0">
+                    <div class="flex flex-col h-full justify-start">
+                        <div class="flex-1 overflow-scroll bg-gray-200 p-4">
+                            <page-tree
+                                ref="tree"
+                                :pages-url="tree.url"
+                                :show-slugs="tree.showSlugs"
+                                :expects-root="tree.expectsRoot"
+                                :site="site"
+                                :preferences-prefix="`selector-field.${name}`"
+                                :editable="false"
+                            >
+                                <template #branch-action="{ branch, index }">
+                                    <div>
+                                        <input
+                                            type="checkbox"
+                                            class="mt-3 ml-3"
+                                            :value="branch.id"
+                                            :checked="isSelected(branch.id)"
+                                            :disabled="reachedSelectionLimit && !singleSelect && !isSelected(branch.id)"
+                                            :id="`checkbox-${branch.id}`"
+                                            @click="checkboxClicked(branch, index, $event)"
+                                        />
+                                    </div>
+                                </template>
+
+                                <template #branch-icon="{ branch }">
+                                    <svg-icon v-if="isRedirectBranch(branch)"
+                                        class="inline-block w-4 h-4 text-gray-500"
+                                        name="light/external-link"
+                                        v-tooltip="__('Redirect')" />
+                                </template>
+                            </page-tree>
+                        </div>
+
+                        <div class="p-4 border-t flex items-center justify-between bg-gray-200">
+                            <div class="text-sm text-gray-700"
+                                v-text="hasMaxSelections
+                                    ? __n(':count/:max selected', selections, { max: maxSelections })
+                                    : __n(':count item selected|:count items selected', selections)" />
+
+                            <div>
+                                <button
+                                    type="button"
+                                    class="btn"
+                                    @click="close">
+                                    {{ __('Cancel') }}
+                                </button>
+
+                                <button
+                                    v-if="! hasMaxSelections || maxSelections > 1"
+                                    type="button"
+                                    class="btn-primary ml-2"
+                                    @click="select">
+                                    {{ __('Select') }}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </template>
     </div>
 
 </template>
 
 <script>
 import HasFilters from '../../data-list/HasFilters';
+import PageTree from '../../structures/PageTree.vue';
 
 export default {
 
     mixins: [
         HasFilters,
     ],
 
+    components: {
+        PageTree,
+    },
+
     props: {
         filtersUrl: String,
         selectionsUrl: String,
@@ -120,14 +210,16 @@ export default {
         site: String,
         search: Boolean,
         type: String,
+        name: String,
         exclusions: {
             type: Array,
             default: () => []
         },
         initialColumns: {
             type: Array,
             default: () => []
-        }
+        },
+        tree: Object,
     },
 
     data() {
@@ -144,6 +236,8 @@ export default {
             selections: _.clone(this.initialSelections),
             columns: this.initialColumns,
             visibleColumns: this.initialColumns.filter(column => column.visible),
+            view: 'list',
+            lastItemClicked: null
         }
     },
 
@@ -163,11 +257,37 @@ export default {
 
         hasMaxSelections() {
             return (this.maxSelections === Infinity) ? false : Boolean(this.maxSelections);
+        },
+
+        reachedSelectionLimit() {
+            return this.selections.length === this.maxSelections;
+        },
+
+        singleSelect() {
+            return this.maxSelections === 1;
+        },
+
+        canUseTree() {
+            return !! this.tree;
+        },
+
+        initialView() {
+            if (!this.canUseTree) return 'list';
+
+            const fallback = this.canUseTree ? 'tree' : 'list';
+
+            return localStorage.getItem(this.viewLocalStorageKey) || fallback;
+        },
+
+        viewLocalStorageKey() {
+            return `statamic.selector.field.${this.name}`;
         }
 
     },
 
     mounted() {
+        this.view = this.initialView;
+
         this.getFilters().then(() => {
             this.autoApplyFilters(this.filters);
             this.initialRequest();
@@ -206,6 +326,10 @@ export default {
             }
         },
 
+        view(view) {
+            localStorage.setItem(this.viewLocalStorageKey, view);
+        },
+
     },
 
     methods: {
@@ -220,7 +344,7 @@ export default {
 
         initialRequest() {
             return this.request().then(() => {
-                if (this.search) this.$refs.search.focus();
+                if (this.search && this.view === 'list') this.$refs.search.focus();
             });
         },
 
@@ -311,6 +435,47 @@ export default {
             return this.visibleColumns.find(c => c.field === column);
         },
 
+        isRedirectBranch(branch) {
+            return branch.redirect != null;
+        },
+
+        isSelected(id) {
+            return this.selections.includes(id);
+        },
+
+        toggleSelection(id) {
+            const i = this.selections.indexOf(id);
+
+            if (i > -1) {
+                this.selections.splice(i, 1);
+
+                return;
+            }
+
+            if (this.singleSelect) {
+                this.selections.pop();
+            }
+
+            if (! this.reachedSelectionLimit) {
+                this.selections.push(id);
+            }
+        },
+
+        checkboxClicked(row, index, $event) {
+            if ($event.shiftKey && this.lastItemClicked !== null) {
+                this.selectRange(
+                    Math.min(this.lastItemClicked, index),
+                    Math.max(this.lastItemClicked, index)
+                );
+            } else {
+                this.toggleSelection(row.id, index)
+            }
+
+            if ($event.target.checked) {
+                this.lastItemClicked = index
+            }
+        },
+
     }
 
 }

resources/js/components/navigation/View.vue

@@ -48,7 +48,6 @@
 
         <page-tree
             ref="tree"
-            :has-collection="false"
             :pages-url="pagesUrl"
             :submit-url="submitUrl"
             :submit-parameters="{ data: submissionData }"

resources/js/components/structures/Branch.vue

@@ -1,7 +1,9 @@
 <template>
 
     <div class="flex">
-        <div class="page-move w-6" />
+        <slot name="branch-action" :branch="page">
+            <div class="page-move w-6" />
+        </slot>
         <div class="flex items-center flex-1 p-2 ml-2 text-xs leading-normal">
             <div class="flex items-center flex-1">
                 <div class="little-dot mr-2" :class="getStatusClass()" v-tooltip="getStatusTooltip()" />
@@ -24,7 +26,7 @@
                     <svg-icon name="micro/chevron-down-xs" class="h-1.5" />
                 </button>
 
-                <div v-if="page.collection" class="ml-4 flex items-center">
+                <div v-if="page.collection && editable" class="ml-4 flex items-center">
                     <svg-icon name="light/content-writing" class="w-4 h-4" />
                     <div class="ml-1">
                         <a :href="page.collection.create_url" v-text="__('Add')" />
@@ -37,7 +39,7 @@
             <div class="pr-2 flex items-center">
                 <slot name="branch-icon" :branch="page" />
 
-                <dropdown-list class="ml-4" v-if="!isRoot">
+                <dropdown-list class="ml-4" v-if="!isRoot && editable">
                     <slot name="branch-options"
                         :branch="page"
                         :depth="depth"
@@ -63,10 +65,10 @@ export default {
         root: Boolean,
         vm: Object,
         firstPageIsRoot: Boolean,
-        hasCollection: Boolean,
         isOpen: Boolean,
         hasChildren: Boolean,
-        showSlugs: Boolean
+        showSlugs: Boolean,
+        editable: Boolean,
     },
 
     data() {