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.resultSize()">{{dec.resultSize()}}</span>
135       Results for</strong> <em>{{dec.options.current_query}}</em>
136    </div>
137    <div class="row text-small resp-margin-sml">
138      simple
139      <label for="show_tables" class="toggle-control">
140        <input
141           type="checkbox" id="show_tables"
142           ng-model="dec.options.show_tables"
143           ng-enabled="true">
144        <span class="toggle-control-body"></span>
145      </label>
146      spreadsheet
147    </div>
148    <div class="text-right nowrap">
149      <button
150         ng-click="dec.prevBatch()"
151         class="outline tight text-small"
152         ng-disabled="dec.options.offset <= 0 || dec.options.doc_id">
153        < Prev Batch
154      </button>
155      <button
156         ng-click="dec.nextBatch()"
157         class="outline tight text-small"
158         ng-disabled="dec.options.doc_id || dec.options.current_result.length == 0">
159        Next Batch >
160      </button>
161    </div>
162  </div>
163
164<!-- results (documents or status messages) ***************************** -->
165  <div ng-if="dec.options.queryBusy">Retrieving results...</div>
166  <div>
167    <div
168       class="row"
169       ng-if="dec.options.selected_bucket && dec.options.current_query.length > 0">
170      <div class="doc-editor-results show-scrollbar">
171        <qw-json-table-editor
172           ng-if="!dec.options.queryBusy"
173           data="dec.options.current_result"
174           controller="dec">
175      </div>
176    </div>
177  </div>
178</div>
179