1<div ng-controller="qwDocEditorController as dec" class="doc-editor">
2
3  <mn-element-cargo
4     depot="actions"
5     ng-if="dec.options.selected_bucket">
6    <div class="header-controls">
7      <a
8       ui-sref="app.admin.buckets.documents.control.list({bucket: dec.options.selected_bucket, statsHostname: 'all'})"      
9       class="resp-hide-sml">
10        CLASSIC <span class="resp-hide-xsml">EDITOR</span>
11      </a>
12
13      <a ng-click="dec.createBlankDoc()"
14       ng-show="dec.rbac.cluster.bucket[dec.options.selected_bucket].data.write">
15        ADD <span class="resp-hide-xsml">DOCUMENT</span>
16      </a>
17    </div>
18  </mn-element-cargo>
19
20<!-- row of controls for the query ***************************************** -->
21  <form name="searchForm">
22  <div class="controls resp-sml">
23    <div class="column">
24      <label>Bucket</label>
25      <ui-select
26         on-select="dec.bucketChanged($item)"
27         ng-model="dec.options.selected_bucket"
28         theme="selectize"
29         class="cbui-select">
30        <ui-select-match class="ui-select-match">
31          {{$select.selected}}
32        </ui-select-match>
33        <ui-select-choices
34           class="ui-select-choices"
35           repeat="bucket in dec.buckets | filter: $select.search">
36          <span class="select-item ellipsis" ng-bind-html="bucket | highlight: $select.search"></span>
37        </ui-select-choices>
38      </ui-select>
39    </div>
40    <div class="column">
41      <div>
42        <label class="inline">Limit</label>
43        <span
44           class="fa-stack icon-info"
45           uib-tooltip-html="'How many documents to retrieve at once (max 200).'"
46           tooltip-placement="top"
47           tooltip-append-to-body="true"
48           tooltip-trigger="'mouseenter'">
49          <span class="icon fa-circle-thin fa-stack-2x"></span>
50          <span class="icon fa-info fa-stack-1x"></span>
51        </span>
52      </div>
53      <input
54         type="number"
55         min="1"
56         max="200"
57         required ng-disabled="dec.options.doc_id.length"
58         ng-submit="dec.retrieveDocs()"
59         ng-model="dec.options.limit" class="input-short-1">
60    </div>
61    <div class="column">
62      <div>
63        <label class="inline">Offset</label>
64        <span class="fa-stack icon-info"
65           uib-tooltip-html="'Start showing documents after this many in the entire set.'"
66           tooltip-placement="top" tooltip-append-to-body="true" tooltip-trigger="'mouseenter'">
67            <span class="icon fa-circle-thin fa-stack-2x"></span>
68            <span class="icon fa-info fa-stack-1x"></span>
69        </span>
70      </div>
71      <input
72         type="number"
73         min="0"
74         required
75         ng-disabled="dec.options.doc_id.length"
76         ng-submit="dec.retrieveDocs()"
77         ng-model="dec.options.offset"
78         class="input-short-1">
79    </div>
80    <div class="column flex-grow-2">
81      <label class="inline">Document ID</label>
82      <span class="fa-stack icon-info"
83          uib-tooltip-html="'Find the document with this ID or leave blank to retrieve documents based on limit and offset.'"
84          tooltip-placement="top"
85          tooltip-append-to-body="true"
86          tooltip-trigger="'mouseenter'">
87        <span class="icon fa-circle-thin fa-stack-2x"></span>
88        <span class="icon fa-info fa-stack-1x"></span>
89      </span>
90      <input type="text"
91         ng-model="dec.options.doc_id"
92         ng-submit="dec.retrieveDocs()"
93         ng-disabled="(dec.options.where_clause.length > 0)"
94         placeholder="enter document ID or leave blank"
95         class="width-12">
96    </div>
97    <div class="column margin-top-half flex-grow-2">
98      <label class="inline">Where</label>
99      <span
100         class="fa-stack icon-info"
101         uib-tooltip-html="'Show only documents that satisfy this N1QL WHERE clause. Only available on nodes running query service for indexed buckets.'"
102         tooltip-placement="top"
103         tooltip-append-to-body="true"
104         tooltip-trigger="'mouseenter'">
105        <span class="icon fa-circle-thin fa-stack-2x"></span>
106        <span class="icon fa-info fa-stack-1x"></span>
107      </span>
108      <input
109         type="text"
110         ng-model="dec.options.where_clause"
111         ng-submit="dec.retrieveDocs()"
112         ng-disabled="!dec.use_n1ql() || (dec.options.doc_id.length > 0)"
113         class="width-12"
114         placeholder="e.g., 'meta().id = &quot;some_id&quot; and type = &quot;a_type&quot;'">
115    </div>
116    <div style="display:none;" class="resp-show-sml margin-top-half width-12"></div>
117    <button
118       ng-disabled="searchForm.$invalid || !dec.options.selected_bucket"
119       ng-click="dec.retrieveDocs()"
120       class="fix-width-3">
121        Retrieve Docs
122      <span ng-if="dec.options.queryBusy" class="icon-button">
123        <span class="icon fa-spinner fa-spin fa-pulse"></span>
124      </span>
125    </button>
126  </div>
127  </form>
128
129<!-- row for result query text, toggle, & next/previous buttons *********** -->
130  <div
131     ng-if="dec.options.selected_bucket && dec.options.current_query.length > 0"
132     class="row resp-sml margin-bottom-half">
133    <div class="text-small resp-margin-sml">
134      <strong><span ng-if="dec.options.current_result.length">{{dec.options.current_result.length}}</span> Results for</strong> <em>{{dec.options.current_query}}</em>
135    </div>
136    <div class="row text-small resp-margin-sml">
137      simple
138      <label for="show_tables" class="toggle-control">
139        <input
140           type="checkbox" id="show_tables"
141           ng-model="dec.options.show_tables"
142           ng-enabled="true">
143        <span class="toggle-control-body"></span>
144      </label>
145      spreadsheet
146    </div>
147    <div class="text-right nowrap">
148      <button
149         ng-click="dec.prevBatch()"
150         class="outline tight text-small"
151         ng-disabled="dec.options.offset <= 0 || dec.options.doc_id">
152        < Prev Batch
153      </button>
154      <button
155         ng-click="dec.nextBatch()"
156         class="outline tight text-small"
157         ng-disabled="dec.options.doc_id || dec.options.current_result.length == 0">
158        Next Batch >
159      </button>
160    </div>
161  </div>
162
163<!-- results (documents or status messages) ***************************** -->
164  <div ng-if="dec.options.queryBusy">Retrieving results...</div>
165  <div ng-if="dec.options.show_scrollbars">
166    <div
167       class="row"
168       ng-if="dec.options.selected_bucket && dec.options.current_query.length > 0">
169      <div class="doc-editor-results show-scrollbar">
170        <qw-json-table-editor
171           ng-if="!dec.options.queryBusy"
172           data="dec.options.current_result"
173           controller="dec">
174      </div>
175    </div>
176  </div>
177  <div ng-if="!dec.options.show_scrollbars">
178    <div
179       class="row"
180       ng-if="dec.options.selected_bucket && dec.options.current_query.length > 0">
181      <div class="doc-editor-results">
182        <qw-json-table-editor
183           ng-if="!dec.options.queryBusy"
184           data="dec.options.current_result"
185           controller="dec">
186      </div>
187      <div
188         class="scroll-shadow-horizontal"
189         ng-if="dec.options.current_result.length > 0">
190      </div>
191    </div>
192    <div
193      ng-if="dec.options.selected_bucket && dec.options.current_query.length > 0 && !dec.options.queryBusy"
194      class="scroll-shadow-bottom">
195    </div>
196  </div>
197</div>
198