WIP: use metric-segment for folder picker

This commit is contained in:
Daniel Lee
2017-05-31 23:25:07 +02:00
parent 6c736e002a
commit d081f85289
2 changed files with 23 additions and 6 deletions

View File

@@ -1,6 +1,8 @@
<div class="gf-form">
<label class="gf-form-label width-7">Folder</label>
<div class="gf-form-select-wrapper">
<select ng-model="ctrl.selectedFolder" class='gf-form-input' ng-options="f.id as f.title for f in ctrl.folders" ng-change="ctrl.folderChanged()"></select>
<div class="dropdown">
<metric-segment segment="ctrl.selectedFolderSegment"
get-options="ctrl.getOptions()"
on-change="ctrl.folderChanged()"></metric-segment>
</div>
</div>

View File

@@ -8,12 +8,14 @@ export class FolderPickerCtrl {
dashboard: any;
folders: Folder[];
selectedFolder: number;
selectedFolderSegment: any;
/** @ngInject */
constructor(private backendSrv, private $scope, $sce) {
this.get(this.dashboard.id);
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.folders = [{id: 0, title: 'Root', type: 'dash-folder'}];
this.get(this.dashboard.id);
}
get(dashboardId: number) {
@@ -22,12 +24,25 @@ export class FolderPickerCtrl {
};
return this.backendSrv.search(params).then(result => {
this.folders = [{id: 0, title: '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);
});
}
getOptions() {
return Promise.resolve(this.folders.map(folder => {
return this.uiSegmentSrv.newSegment(folder.title);
}));
}
folderChanged() {
this.dashboard.parentId = this.selectedFolder;
const selected = _.find(this.folders, {title: this.selectedFolderSegment.value});
this.dashboard.parentId = selected.id;
}
}