mirror of
https://github.com/apache/zeppelin
synced 2026-05-24 09:38:26 +00:00
notes list in custom homepage isn't working
This commit is contained in:
soralee
parent
7e045728e0
commit
58d08f8daa
5 changed files with 182 additions and 21 deletions
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
|
|
@ -69,34 +69,19 @@ That's it! Open your browser and navigate to Apache Zeppelin and see your custom
|
|||
If you want to display the list of notes on your custom Apache Zeppelin homepage all
|
||||
you need to do is use our %angular support.
|
||||
|
||||
Add the following code to a paragraph in you home page and run it... Voila! You have your notes list.
|
||||
Add the following code to a paragraph in your Apache Zeppelin note and run it.
|
||||
|
||||
```javascript
|
||||
println(
|
||||
"""%angular
|
||||
<div class="col-md-4" ng-controller="HomeCtrl as home">
|
||||
<h4>Notebooks</h4>
|
||||
<div>
|
||||
<h5><a href="" data-toggle="modal" data-target="#noteNameModal" style="text-decoration: none;">
|
||||
<i style="font-size: 15px;" class="icon-notebook"></i> Create new note</a></h5>
|
||||
<ul style="list-style-type: none;">
|
||||
<li ng-repeat="note in home.notes.list track by $index"><i style="font-size: 10px;" class="icon-doc"></i>
|
||||
<a style="text-decoration: none;" href="#/notebook/{{"{{note.id"}}}}>{{"{{noteName(note)"}}}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div ng-include="'app/home/customer/customHome.html'"></div>
|
||||
""")
|
||||
```
|
||||
|
||||
After running the note you will see output similar to this one:
|
||||
<img src="/assets/themes/zeppelin/img/screenshots/homepage_notebook_list.png" />
|
||||
After running the paragraph, you will see output similar to this one:
|
||||
|
||||
The main trick here relays in linking the ```<div>``` to the controller:
|
||||
<img src="/assets/themes/zeppelin/img/screenshots/homepage_custom_notebook_list.png" />
|
||||
|
||||
That's it! Voila! You have your notes list.
|
||||
|
||||
```javascript
|
||||
<div class="col-md-4" ng-controller="HomeCtrl as home">
|
||||
```
|
||||
|
||||
Once we have ```home``` as our controller variable in our ```<div></div>```
|
||||
we can use ```home.notes.list``` to get access to the note list.
|
||||
|
|
|
|||
62
zeppelin-web/src/app/home/customer/customHome.controller.js
Normal file
62
zeppelin-web/src/app/home/customer/customHome.controller.js
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
/*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
'use strict';
|
||||
(function() {
|
||||
|
||||
angular.module('zeppelinWebApp').controller('CustomHomeCtrl', CustomHomeCtrl);
|
||||
|
||||
CustomHomeCtrl.$inject = [
|
||||
'$scope',
|
||||
'noteListDataFactory',
|
||||
'websocketMsgSrv',
|
||||
'$rootScope',
|
||||
'arrayOrderingSrv',
|
||||
'noteActionSrv'
|
||||
];
|
||||
|
||||
function CustomHomeCtrl($scope, noteListDataFactory, websocketMsgSrv, $rootScope, arrayOrderingSrv,
|
||||
noteActionSrv) {
|
||||
var vm = this;
|
||||
vm.notes = noteListDataFactory;
|
||||
vm.websocketMsgSrv = websocketMsgSrv;
|
||||
vm.arrayOrderingSrv = arrayOrderingSrv;
|
||||
|
||||
$scope.isReloading = false;
|
||||
|
||||
$scope.reloadNoteList = function() {
|
||||
websocketMsgSrv.reloadAllNotesFromRepo();
|
||||
$scope.isReloadingNotes = true;
|
||||
};
|
||||
|
||||
$scope.toggleFolderNode = function(node) {
|
||||
node.hidden = !node.hidden;
|
||||
};
|
||||
|
||||
$scope.renameNote = function(node) {
|
||||
noteActionSrv.renameNote(node.id, node.path);
|
||||
};
|
||||
|
||||
$scope.renameFolder = function(node) {
|
||||
noteActionSrv.renameFolder(node.id);
|
||||
};
|
||||
|
||||
$scope.removeNote = function(noteId) {
|
||||
noteActionSrv.removeNote(noteId, false);
|
||||
};
|
||||
|
||||
$scope.clearAllParagraphOutput = function(noteId) {
|
||||
noteActionSrv.clearAllParagraphOutput(noteId);
|
||||
};
|
||||
}
|
||||
})();
|
||||
113
zeppelin-web/src/app/home/customer/customHome.html
Normal file
113
zeppelin-web/src/app/home/customer/customHome.html
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
<!--
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
-->
|
||||
|
||||
|
||||
<script type="text/ng-template" id="custom_notebook_folder_renderer.html">
|
||||
<div ng-if="node.children == null"
|
||||
ng-mouseenter="showNoteButton=true"
|
||||
ng-mouseleave="showNoteButton=false">
|
||||
<a style="text-decoration: none;" href="#/notebook/{{node.id}}">
|
||||
<i style="font-size: 10px;" class="icon-doc"/> {{node.name}}
|
||||
</a>
|
||||
<a style="text-decoration: none;">
|
||||
<i style="font-size: 13px; margin-left: 10px; cursor: pointer; text-decoration: none;"
|
||||
class="fa fa-pencil" ng-show="showNoteButton" ng-click="renameNote(node)"
|
||||
tooltip-placement="bottom" tooltip="Rename note">
|
||||
</i>
|
||||
</a>
|
||||
<a style="text-decoration: none;">
|
||||
<i style="font-size: 13px; margin-left: 2px; cursor: pointer; text-decoration: none;"
|
||||
class="fa fa-eraser" ng-show="showNoteButton" ng-click="clearAllParagraphOutput(node.id)"
|
||||
tooltip-placement="bottom" tooltip="Clear output">
|
||||
</i>
|
||||
</a>
|
||||
<a style="text-decoration: none;">
|
||||
<i style="font-size: 13px; margin-left: 2px; cursor: pointer; text-decoration: none;"
|
||||
class="fa fa-trash-o" ng-show="showNoteButton" ng-click="removeNote(node.id)"
|
||||
tooltip-placement="bottom" tooltip="Remove note">
|
||||
</i>
|
||||
</a>
|
||||
</div>
|
||||
<div ng-if="node.children != null">
|
||||
<div ng-mouseenter="showFolderButton=true"
|
||||
ng-mouseleave="showFolderButton=false">
|
||||
<a style="text-decoration: none; cursor: pointer;" ng-click="toggleFolderNode(node)">
|
||||
<i style="font-size: 10px;" ng-class="node.hidden ? 'icon-folder' : 'icon-folder-alt'" /> {{node.name}}
|
||||
</a>
|
||||
<a style="text-decoration: none;">
|
||||
<i style="font-size: 13px; margin-left: 10px; cursor: pointer; text-decoration: none;"
|
||||
class="fa fa-pencil" ng-show="showFolderButton" ng-click="renameFolder(node)"
|
||||
tooltip-placement="bottom" tooltip="Rename folder">
|
||||
</i>
|
||||
</a>
|
||||
</div>
|
||||
<div ng-if="!node.hidden">
|
||||
<ul style="list-style-type: none; padding-left:15px;">
|
||||
<li ng-repeat="node in node.children" ng-include="'custom_notebook_folder_renderer.html'" />
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<div ng-controller="CustomHomeCtrl as home">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<h4>Notebook
|
||||
<i ng-class="isReloadingNotes ? 'fa fa-refresh fa-spin' : 'fa fa-refresh'"
|
||||
ng-style="!isReloadingNotes && {'cursor': 'pointer'}" style="font-size: 13px;"
|
||||
ng-click="reloadNoteList();"
|
||||
tooltip-placement="bottom" tooltip="Reload notes from storage">
|
||||
</i>
|
||||
</h4>
|
||||
|
||||
<h5><a href="" data-toggle="modal" data-target="#noteImportModal" style="text-decoration: none;">
|
||||
<i style="font-size: 15px;" class="fa fa-upload"></i> Import note</a></h5>
|
||||
<h5><a href="" data-toggle="modal" data-target="#noteNameModal" style="text-decoration: none;">
|
||||
<i style="font-size: 15px;" class="icon-notebook"></i> Create new note</a></h5>
|
||||
<ul id="notebook-names">
|
||||
<li class="filter-names" ng-include="'components/filterNoteNames/filter-note-names.html'"></li>
|
||||
<li ng-repeat="note in home.notes.list | filter:query.q | orderBy:home.arrayOrderingSrv.noteListOrdering track by $index">
|
||||
<i style="font-size: 10px;" class="icon-doc"></i>
|
||||
<a style="text-decoration: none;" href="#/notebook/{{note.id}}">{{node.name}}</a>
|
||||
</li>
|
||||
<div ng-if="!query || query.name === ''">
|
||||
<li ng-repeat="node in home.notes.root.children | orderBy:home.arrayOrderingSrv.noteListOrdering track by $index" ng-include="'custom_notebook_folder_renderer.html'" />
|
||||
</div>
|
||||
<div ng-if="query && query.name !== ''">
|
||||
<li ng-repeat="note in home.notes.flatList | filter:query.q | orderBy:home.arrayOrderingSrv.noteListOrdering track by $index">
|
||||
<i style="font-size: 10px;" class="icon-doc"></i>
|
||||
<a style="text-decoration: none;" href="#/notebook/{{note.id}}">{{node.name}}</a>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<br/><br/><br/>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Load notebook -->
|
||||
<div ng-show="home.notebookHome" id="{{currentParagraph.id}}_paragraphColumn_main"
|
||||
ng-repeat="currentParagraph in home.note.paragraphs"
|
||||
ng-controller="ParagraphCtrl"
|
||||
ng-init="init(currentParagraph, home.note)"
|
||||
ng-class="columnWidthClass(currentParagraph.config.colWidth)"
|
||||
class="paragraph-col">
|
||||
<div id="{{currentParagraph.id}}_paragraphColumn"
|
||||
ng-if="currentParagraph.result"
|
||||
ng-include src="'app/notebook/paragraph/paragraph.html'"
|
||||
ng-class="{'paragraph-space box paragraph-margin': !asIframe, 'focused': paragraphFocused}"
|
||||
ng-hide="currentParagraph.config.tableHide && home.viewOnly">
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -15,6 +15,7 @@
|
|||
import './app/app.js';
|
||||
import './app/app.controller.js';
|
||||
import './app/home/home.controller.js';
|
||||
import './app/home/customer/customHome.controller.js'
|
||||
import './app/handsontable/handsonHelper.js';
|
||||
import './app/notebook/notebook.controller.js';
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue