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.docs.upsert">
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  <div class="controls resp-sml margin-0">
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>
41  <form name="searchForm">
42  <div class="controls resp-sml">
43    <div class="column">
44      <div>
45        <label class="inline">Limit</label>
46        <span
47           class="fa-stack icon-info"
48           uib-tooltip-html="'How many documents to retrieve at once (max 200).'"
49           tooltip-placement="top"
50           tooltip-append-to-body="true"
51           tooltip-trigger="'mouseenter'">
52          <span class="icon fa-circle-thin fa-stack-2x"></span>
53          <span class="icon fa-info fa-stack-1x"></span>
54        </span>
55      </div>
56      <input
57         type="number"
58         min="1"
59         max="200"
60         required ng-disabled="dec.options.doc_id.length"
61         ng-submit="dec.retrieveDocs()"
62         ng-model="dec.options.limit" class="input-short-1">
63    </div>
64    <div class="column">
65      <div>
66        <label class="inline">Offset</label>
67        <span class="fa-stack icon-info"
68           uib-tooltip-html="'Start showing documents after this many in the entire set.'"
69           tooltip-placement="top" tooltip-append-to-body="true" tooltip-trigger="'mouseenter'">
70            <span class="icon fa-circle-thin fa-stack-2x"></span>
71            <span class="icon fa-info fa-stack-1x"></span>
72        </span>
73      </div>
74      <input
75         type="number"
76         min="0"
77         required
78         ng-disabled="dec.options.doc_id.length"
79         ng-submit="dec.retrieveDocs()"
80         ng-model="dec.options.offset"
81         class="input-short-1">
82    </div>
83    <div class="column flex-grow-2">
84      <label class="inline">Document ID</label>
85      <span class="fa-stack icon-info"
86          uib-tooltip-html="'Find the document with this ID or leave blank to retrieve documents based on limit and offset.'"
87          tooltip-placement="top"
88          tooltip-append-to-body="true"
89          tooltip-trigger="'mouseenter'">
90        <span class="icon fa-circle-thin fa-stack-2x"></span>
91        <span class="icon fa-info fa-stack-1x"></span>
92      </span>
93      <input type="text"
94         ng-model="dec.options.doc_id"
95         ng-submit="dec.retrieveDocs()"
96         ng-disabled="(dec.options.where_clause.length > 0)"
97         placeholder="enter document ID or leave blank"
98         class="width-12">
99    </div>
100    <div class="column margin-top-half flex-grow-2">
101      <label class="inline">Where</label>
102      <span
103         class="fa-stack icon-info"
104         uib-tooltip-html="'Show only documents that satisfy this N1QL WHERE clause. Only available on nodes running query service for indexed buckets.'"
105         tooltip-placement="top"
106         tooltip-append-to-body="true"
107         tooltip-trigger="'mouseenter'">
108        <span class="icon fa-circle-thin fa-stack-2x"></span>
109        <span class="icon fa-info fa-stack-1x"></span>
110      </span>
111      <input
112         type="text"
113         ng-model="dec.options.where_clause"
114         ng-submit="dec.retrieveDocs()"
115         ng-disabled="!dec.use_n1ql() || (dec.options.doc_id.length > 0)"
116         class="width-12"
117         placeholder="e.g., 'meta().id = &quot;some_id&quot; and type = &quot;a_type&quot;'">
118    </div>
119    <div style="display:none;" class="resp-show-sml margin-top-half width-12"></div>
120    <button
121       ng-disabled="searchForm.$invalid || !dec.options.selected_bucket"
122       ng-click="dec.retrieveDocs()"
123       class="fix-width-3">
124        Retrieve Docs
125      <span ng-if="dec.options.queryBusy" class="icon-button">
126        <span class="icon fa-spinner fa-spin fa-pulse"></span>
127      </span>
128    </button>
129    </div>
130  </form>
131  </div>
132
133<!-- row for result query text, toggle, & next/previous buttons *********** -->
134  <div
135     ng-if="dec.options.selected_bucket && dec.options.current_query.length > 0"
136     class="row resp-sml margin-bottom-half">
137    <div class="text-small resp-margin-sml">
138      <strong><span ng-if="dec.resultSize()">{{dec.resultSize()}}</span>
139       Results for</strong> <em>{{dec.options.current_query}}</em>
140    </div>
141    <div class="row text-small resp-margin-sml">
142      simple
143      <label for="show_tables" class="toggle-control">
144        <input
145           type="checkbox" id="show_tables"
146           ng-model="dec.options.show_tables"
147           ng-enabled="true">
148        <span class="toggle-control-body"></span>
149      </label>
150      spreadsheet
151    </div>
152    <div class="text-right nowrap">
153      <button
154         ng-click="dec.prevBatch()"
155         class="outline tight text-small"
156         ng-disabled="dec.options.offset <= 0 || dec.options.doc_id">
157        < Prev Batch
158      </button>
159      <button
160         ng-click="dec.nextBatch()"
161         class="outline tight text-small"
162         ng-disabled="dec.options.doc_id || dec.options.current_result.length == 0">
163        Next Batch >
164      </button>
165    </div>
166  </div>
167
168<!-- results (documents or status messages) ***************************** -->
169  <div ng-if="dec.options.queryBusy">Retrieving results...</div>
170  <div>
171    <div
172       class="row"
173       ng-if="dec.options.selected_bucket && dec.options.current_query.length > 0">
174      <div class="doc-editor-results show-scrollbar">
175        <qw-json-table-editor
176           ng-if="!dec.options.queryBusy"
177           data="dec.options.current_result"
178           controller="dec">
179      </div>
180    </div>
181  </div>
182</div>
183