From 533f2d3d72a3377f396e53f323622ffba42a69cb Mon Sep 17 00:00:00 2001
From: Daniel Lee <dan.limerick@gmail.com>
Date: Thu, 1 Jun 2017 23:32:33 +0200
Subject: [PATCH] WIP: refactor folder-picker for dashlist

---
 public/app/core/components/search/search.ts   |  2 +-
 .../app/features/dashboard/dashnav/dashnav.ts |  4 +++
 .../dashboard/folder_picker/picker.ts         | 32 +++++++++++--------
 .../features/dashboard/partials/settings.html |  2 +-
 .../app/features/dashboard/save_as_modal.ts   |  4 +++
 public/app/plugins/panel/dashlist/editor.html |  5 +++
 public/app/plugins/panel/dashlist/module.ts   |  8 +++++
 7 files changed, 42 insertions(+), 15 deletions(-)

diff --git a/public/app/core/components/search/search.ts b/public/app/core/components/search/search.ts
index dcbf0991f3d..69c3584ad52 100644
--- a/public/app/core/components/search/search.ts
+++ b/public/app/core/components/search/search.ts
@@ -42,7 +42,7 @@ export class SearchCtrl {
     this.giveSearchFocus = 0;
     this.selectedIndex = -1;
     this.results = [];
-    this.query = { query: '', tag: [], starred: false };
+    this.query = { query: '', tag: [], starred: false, mode: 'tree' };
     this.currentSearchId = 0;
     this.ignoreClose = true;
 
diff --git a/public/app/features/dashboard/dashnav/dashnav.ts b/public/app/features/dashboard/dashnav/dashnav.ts
index e77c2bb3e09..25dd51494cf 100644
--- a/public/app/features/dashboard/dashnav/dashnav.ts
+++ b/public/app/features/dashboard/dashnav/dashnav.ts
@@ -135,6 +135,10 @@ export class DashNavCtrl {
       var uri = "data:application/json;charset=utf-8," + encodeURIComponent(html);
       var newWindow = window.open(uri);
     }
+
+    onFolderChange(parentId) {
+      this.dashboard.parentId = parentId;
+    }
 }
 
 export function dashNavDirective() {
diff --git a/public/app/features/dashboard/folder_picker/picker.ts b/public/app/features/dashboard/folder_picker/picker.ts
index 92ded3a5256..a378ac18b12 100644
--- a/public/app/features/dashboard/folder_picker/picker.ts
+++ b/public/app/features/dashboard/folder_picker/picker.ts
@@ -5,32 +5,34 @@ import appEvents from 'app/core/app_events';
 import _ from 'lodash';
 
 export class FolderPickerCtrl {
-  dashboard: any;
   folders: Folder[];
   selectedFolder: number;
   selectedFolderSegment: any;
+  onChange: any;
+  rootFolderName: string;
 
   /** @ngInject */
   constructor(private backendSrv, private $scope, private $sce, private uiSegmentSrv) {
-    this.selectedFolderSegment = this.uiSegmentSrv.newSegment({value: 'Root', selectMode: true});
-
-    this.selectedFolder = this.dashboard.meta.parentId;
-    this.get(this.dashboard.id);
+    this.selectedFolderSegment = this.uiSegmentSrv.newSegment({value: this.rootFolderName || 'Root', selectMode: true});
+    this.get();
   }
 
-  get(dashboardId: number) {
+  get() {
     var params = {
       type: 'dash-folder',
     };
 
     return this.backendSrv.search(params).then(result => {
-      this.folders = [{id: 0, title: 'Root', type: 'dash-folder'}];
+      this.folders = [{id: 0, title: this.rootFolderName || 'Root', type: 'dash-folder'}];
       this.folders.push(...result);
-      const selected = _.find(this.folders, {id: this.selectedFolder});
 
-      this.selectedFolderSegment.value = selected.title;
-      this.selectedFolderSegment.text = selected.title;
-      this.selectedFolderSegment.html = this.$sce.trustAsHtml(selected.title);
+      if (this.selectedFolder) {
+        const selected = _.find(this.folders, {id: this.selectedFolder});
+
+        this.selectedFolderSegment.value = selected.title;
+        this.selectedFolderSegment.text = selected.title;
+        this.selectedFolderSegment.html = this.$sce.trustAsHtml(selected.title);
+      }
     });
   }
 
@@ -43,7 +45,7 @@ export class FolderPickerCtrl {
   folderChanged() {
     const selected = _.find(this.folders, {title: this.selectedFolderSegment.value});
     if (selected) {
-      this.dashboard.parentId = selected.id;
+      this.onChange(selected.id);
     }
   }
 }
@@ -66,7 +68,11 @@ export function folderPicker() {
     controller: FolderPickerCtrl,
     bindToController: true,
     controllerAs: 'ctrl',
-    scope: { dashboard: "=" }
+    scope: {
+      selectedFolder: "<",
+      onChange: "<",
+      rootFolderName: "@"
+    }
   };
 }
 
diff --git a/public/app/features/dashboard/partials/settings.html b/public/app/features/dashboard/partials/settings.html
index b2e9b6bfd76..6ff00f4cf59 100644
--- a/public/app/features/dashboard/partials/settings.html
+++ b/public/app/features/dashboard/partials/settings.html
@@ -45,7 +45,7 @@
 				</div>
 			</div>
 
-      <folder-picker ng-if="!dashboardMeta.isFolder" dashboard="dashboard"></folder-picker>
+      <folder-picker ng-if="!dashboardMeta.isFolder" selected-folder="dashboard.meta.parentId" on-change="onFolderChange"></folder-picker>
 		</div>
 
     <div class="section">
diff --git a/public/app/features/dashboard/save_as_modal.ts b/public/app/features/dashboard/save_as_modal.ts
index 5c821eb1e2b..988c1324b44 100644
--- a/public/app/features/dashboard/save_as_modal.ts
+++ b/public/app/features/dashboard/save_as_modal.ts
@@ -66,6 +66,10 @@ export class SaveDashboardAsModalCtrl {
       this.save();
     }
   }
+
+  onFolderChange(parentId) {
+    this.clone.parentId = parentId;
+  }
 }
 
 export function saveDashboardAsDirective() {
diff --git a/public/app/plugins/panel/dashlist/editor.html b/public/app/plugins/panel/dashlist/editor.html
index d2159093476..2dc35808e99 100644
--- a/public/app/plugins/panel/dashlist/editor.html
+++ b/public/app/plugins/panel/dashlist/editor.html
@@ -22,6 +22,11 @@
       <input type="text" class="gf-form-input" placeholder="title query" ng-model="ctrl.panel.query" ng-change="ctrl.refresh()" ng-model-onblur>
     </div>
 
+    <div class="gf-form">
+      <span class="gf-form-label width-6">Folder</span>
+      <folder-picker on-change="ctrl.onFolderChange" root-folder-name="All"></folder-picker>
+    </div>
+
     <div class="gf-form">
       <span class="gf-form-label width-6">Tags</span>
       <bootstrap-tagsinput ng-model="ctrl.panel.tags" tagclass="label label-tag" placeholder="add tags" on-tags-updated="ctrl.refresh()">
diff --git a/public/app/plugins/panel/dashlist/module.ts b/public/app/plugins/panel/dashlist/module.ts
index 2c4f98fc205..093fab1d3cf 100644
--- a/public/app/plugins/panel/dashlist/module.ts
+++ b/public/app/plugins/panel/dashlist/module.ts
@@ -12,6 +12,7 @@ class DashListCtrl extends PanelCtrl {
   modes: any[];
 
   panelDefaults = {
+    folder: '',
     query: '',
     limit: 10,
     tags: [],
@@ -19,6 +20,7 @@ class DashListCtrl extends PanelCtrl {
     search: false,
     starred: true,
     headings: true,
+    folderId: 0
   };
 
   /** @ngInject */
@@ -87,6 +89,7 @@ class DashListCtrl extends PanelCtrl {
       limit: this.panel.limit,
       query: this.panel.query,
       tag: this.panel.tags,
+      folderId: this.panel.folderId
     };
 
     return this.backendSrv.search(params).then(result => {
@@ -123,6 +126,11 @@ class DashListCtrl extends PanelCtrl {
       });
     });
   }
+
+  onFolderChange(parentId) {
+    this.$scope.$parent.ctrl.panel.folderId = parentId;
+    this.$scope.$parent.ctrl.refresh();
+  }
 }
 
 export {DashListCtrl, DashListCtrl as PanelCtrl};