1<div ng-controller="qwImportController as ic">
2  <form name="searchForm">
3    <div class="import-wrapper"> <!-- wraps the 2 cols of main pg components --->
4      <div class="width-4 import-col1">
5        <p class="text-small">
6          Select a tab/comma delimited or JSON list/lines file to import. See tooltip for format info.
7          <span
8             class="fa-stack icon-info"
9             uib-tooltip-html="'This import UI supports the following formats: <ul><li>comma-delimited (CSV)</li><li>tab-delimited (TSV)</li><li>JSON List - a JSON list, each element of which will be a separate imported document</li><li>JSON lines - one JSON document per line in the file</li></ul>'"
10             tooltip-placement="auto top"
11             tooltip-append-to-body="true"
12             tooltip-trigger="'mouseenter'">
13             <span class="icon fa-circle-thin fa-stack-2x"></span>
14             <span class="icon fa-info fa-stack-1x"></span>
15          </span>
16        </p>
17        <div class="row flex-left margin-bottom-2">
18          <span>
19            <input
20               type="file"
21               id="loadQuery"
22               name="files"
23               style="display: none"
24               accept=".txt,.json,.csv,.tsv">
25            <button
26               ng-click="ic.selectFile()"
27               class="outline margin-right-1"
28               ng-disabled="ic.options.importing">
29              Select File to Import...
30              <span ng-if="ic.options.queryBusy" class="icon-button"></span>
31            </button>
32          </span>
33          <div class="text-smaller">
34            {{ic.options.status}}
35            <span
36              ng-if="ic.options.status == 'loading data file'"
37              class="loading">
38            </span>
39          </div>
40        </div>
41        <div class="formrow">
42          <div class="row">
43            <label>Parse File As</label>
44            <span
45               class="text-normal text-smaller green-1"
46               ng-class="ic.options.docData.length > 0 ? 'green-1' : 'red-1'">
47              found {{ic.options.docData.length}} records
48            </span>
49          </div>
50          <ui-select
51             on-select="ic.parseAs($item)"
52             ng-model="ic.options.selectedFormat"
53             theme="selectize"
54             class="cbui-select"
55             ng-disabled="ic.options.importing">
56            <ui-select-match class="ui-select-match">
57              {{$select.selected}}
58            </ui-select-match>
59            <ui-select-choices repeat="item in ic.formats">
60              <span class="select-item ellipsis" ng-bind-html="item"></span>
61            </ui-select-choices> </ui-select>
62        </div>
63
64        <div class="formrow">
65          <label>Destination Bucket</label>
66          <ui-select
67             ng-model="ic.options.selectedBucket"
68             theme="selectize"
69             class="cbui-select"
70             ng-disabled="ic.options.importing">
71            <ui-select-match class="ui-select-match">
72               {{$select.selected}}
73            </ui-select-match>
74            <ui-select-choices
75               class="ui-select-choices"
76               repeat="bucket in ic.buckets | filter: $select.search">
77              <span
78                 class="select-item ellipsis"
79                 ng-bind-html="bucket | highlight: $select.search"></span>
80            </ui-select-choices>
81          </ui-select>
82        </div>
83
84        <div class="formrow">
85          <label>Import With Document ID
86            <span
87             class="fa-stack icon-info"
88             uib-tooltip-html="'Every document stored in Couchbase requires a unique Document ID. For the ID, you can select an automatically generated UUID, or a field from the data. If you choose a field, it much have a distinct value for every document. Any duplicate ID values will cause later documents to overwrite earlier ones with the same ID value.'"
89             tooltip-placement="auto top"
90             tooltip-append-to-body="true"
91             tooltip-trigger="'mouseenter'">
92             <span class="icon fa-circle-thin fa-stack-2x"></span>
93             <span class="icon fa-info fa-stack-1x"></span>
94           </span>
95          </label>
96          <div>
97            <input type="radio" id="guid" name="docId" ng-model="ic.options.useKey" ng-value="false">
98            <label for="guid">UUID</label>
99          </div>
100          <div>
101            <input type="radio" id="field" name="docId" ng-model="ic.options.useKey" ng-value="true">
102            <label for="field" ng-disabled="!(ic.options.fields.length > 0)">Value of Field: </label>
103            <ui-select
104               ng-disabled="!ic.options.useKey || !(ic.options.fields.length > 0) || ic.options.importing"
105               ng-model="ic.options.selectedDocIDField"
106               theme="selectize"
107               class="cbui-select">
108              <ui-select-match class="ui-select-match">
109                {{$select.selected}}
110              </ui-select-match>
111              <ui-select-choices ng-enabled="ic.options.useKey" class="ui-select-choices" repeat="field in ic.options.fields">
112                <span ng-enabled="ic.options.useKey" class="select-item ellipsis" ng-bind-html="field"></span>
113              </ui-select-choices>
114            </ui-select>
115            <span
116               ng-if="ic.options.docData && ic.options.docData.length && ic.options.fields.length==0"
117               tooltip-trigger="'mouseenter'"
118               tooltip-append-to-body="true"
119               class="fa-warning icon orange-3 cursor-pointer"
120               uib-tooltip="To use as a document ID, the field must be present in all documents. No common (non-object/non-array) fields were found.">
121             </span>
122          </div>
123        </div>
124      </div>
125
126      <div class="width-8">
127        <div class="import-clinote">
128          <p class="text-small">
129            For faster performance, or datasets greater than 100MB, use the
130            command-line tool <span class="monospaced bold">cbimport</span>.
131          </p>
132          <textarea class="monospaced">{{ic.getCbimport()}}</textarea>
133          <p class="text-fine margin-bottom-2">
134            command generated from your file, destination, and ID selections on the left
135          </p>
136        </div>
137
138        <div class="row row-min margin-bottom-half margin-top-neg-half resp-hide-sml">
139          <label>File Contents</label>
140          <span class="pills">
141          <a ng-click="ic.selectTab(1)"
142             ng-class="{selected: ic.isSelected(1)}">Raw File</a>
143          <a ng-click="ic.selectTab(2)"
144             ng-class="{selected: ic.isSelected(2)}">Parsed Table</a>
145          <a ng-click="ic.selectTab(3)"
146             ng-class="{selected: ic.isSelected(3)}">Parsed JSON</a>
147          </span>
148        </div>
149
150        <div class="importdata-parsedwrapper resp-hide-sml">
151          <div
152             ng-if="ic.isSelected(1)"
153             class="wb-results-json"
154             ui-ace="ic.aceFileOptions"
155             ng-model="ic.options.fileData"></div>
156          <div
157             ng-if="ic.isSelected(2)"
158             class="wb-results-table import-table-panel"
159             qw-json-data-table="ic.options.docData"></div>
160          <div
161             ng-if="ic.isSelected(3)"
162             class="wb-results-json"
163             ui-ace="ic.aceFileOptions"
164             ng-model="ic.options.docJson"></div>
165        </div>
166      </div>
167    </div>
168    <footer class="footer-import">
169      <div class="text-center">
170        <button
171           ng-click="ic.doImport()"
172           ng-disabled="!ic.options.docData.length || !ic.options.selectedBucket || !ic.validQueryService()"
173           class="fix-width-3">
174           <span ng-if="!ic.options.importing">Import Data</span>
175           <span ng-if="ic.options.importing">Cancel Import</span>
176        </button>
177        <br>
178        <div class="width-12">{{ic.options.last_import_status}}</div>
179      </div>
180    </footer>
181  </form>
182</div>
183