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 file to import.
7        </p>
8        <div class="row flex-left margin-bottom-2">
9          <span>
10            <input
11               type="file"
12               id="loadQuery"
13               name="files"
14               style="display: none"
15               accept=".txt,.json,.csv,.tsv">
16            <button
17               ng-click="ic.selectFile()"
18               class="outline margin-right-1"
19               ng-disabled="ic.options.importing">
20              Select File to Import...
21              <span ng-if="ic.options.queryBusy" class="icon-button"></span>
22            </button>
23          </span>
24          <div class="text-smaller">
25            {{ic.status}}
26            <span
27              ng-if="ic.status == 'loading data file'"
28              class="loading">
29            </span>
30          </div>
31        </div>
32        <div class="formrow">
33          <div class="row">
34            <label>Parse File As</label>
35            <span
36               class="text-normal text-smaller green-1"
37               ng-class="ic.options.docData.length > 0 ? 'green-1' : 'red-1'">
38              found {{ic.options.docData.length}} records
39            </span>
40          </div>
41          <ui-select
42             on-select="ic.parseAs($item)"
43             ng-model="ic.options.selectedFormat"
44             theme="selectize"
45             class="cbui-select"
46             ng-disabled="ic.options.importing">
47            <ui-select-match class="ui-select-match">
48              {{$select.selected}}
49            </ui-select-match>
50            <ui-select-choices repeat="item in ic.formats">
51              <span class="select-item ellipsis" ng-bind-html="item"></span>
52            </ui-select-choices> </ui-select>
53        </div>
54
55        <div class="formrow">
56          <label>Destination Bucket</label>
57          <ui-select
58             ng-model="ic.options.selectedBucket"
59             theme="selectize"
60             class="cbui-select"
61             ng-disabled="ic.options.importing">
62            <ui-select-match class="ui-select-match">
63               {{$select.selected}}
64            </ui-select-match>
65            <ui-select-choices
66               class="ui-select-choices"
67               repeat="bucket in ic.buckets | filter: $select.search">
68              <span
69                 class="select-item ellipsis"
70                 ng-bind-html="bucket | highlight: $select.search"></span>
71            </ui-select-choices>
72          </ui-select>
73        </div>
74
75        <div class="formrow">
76          <label>Import With Document ID</label>
77          <div>
78            <input type="radio" id="guid" name="docId" ng-model="ic.options.useKey" ng-value="false">
79            <label for="guid">UUID</label>
80          </div>
81          <div>
82            <input type="radio" id="field" name="docId" ng-model="ic.options.useKey" ng-value="true">
83            <label for="field" ng-disabled="!(ic.options.fields.length > 0)">Value of Field: </label>
84            <ui-select
85               ng-disabled="!ic.options.useKey || !(ic.options.fields.length > 0) || ic.options.importing"
86               ng-model="ic.options.selectedDocIDField"
87               theme="selectize"
88               class="cbui-select">
89              <ui-select-match class="ui-select-match">
90                {{$select.selected}}
91              </ui-select-match>
92              <ui-select-choices ng-enabled="ic.options.useKey" class="ui-select-choices" repeat="field in ic.options.fields">
93                <span ng-enabled="ic.options.useKey" class="select-item ellipsis" ng-bind-html="field"></span>
94              </ui-select-choices>
95            </ui-select>
96            <span
97               ng-if="ic.options.docData && ic.options.docData.length && ic.options.fields.length==0"
98               tooltip-trigger="'mouseenter'"
99               tooltip-append-to-body="true"
100               class="fa-warning icon orange-3 cursor-pointer"
101               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.">
102             </span>
103          </div>
104        </div>
105      </div>
106
107      <div class="width-8">
108        <div class="import-clinote">
109          <p class="text-small">
110            For faster performance, or datasets greater than 100MB, use the
111            command-line tool <span class="monospaced bold">cbimport</span>.
112          </p>
113          <textarea class="monospaced">{{ic.getCbimport()}}</textarea>
114          <p class="text-fine margin-bottom-2">
115            command generated from your file, destination, and ID selections on the left
116          </p>
117        </div>
118
119        <div class="row row-min margin-bottom-half margin-top-neg-half resp-hide-sml">
120          <label>File Contents</label>
121          <span class="pills">
122          <a ng-click="ic.selectTab(1)"
123             ng-class="{selected: ic.isSelected(1)}">Raw File</a>
124          <a ng-click="ic.selectTab(2)"
125             ng-class="{selected: ic.isSelected(2)}">Parsed Table</a>
126          <a ng-click="ic.selectTab(3)"
127             ng-class="{selected: ic.isSelected(3)}">Parsed JSON</a>
128          </span>
129        </div>
130
131        <div class="importdata-parsedwrapper resp-hide-sml">
132          <div
133             ng-if="ic.isSelected(1)"
134             class="wb-results-json"
135             ui-ace="ic.aceFileOptions"
136             ng-model="ic.options.fileData"></div>
137          <div
138             ng-if="ic.isSelected(2)"
139             class="wb-results-table import-table-panel"
140             qw-json-data-table="ic.options.docData"></div>
141          <div
142             ng-if="ic.isSelected(3)"
143             class="wb-results-json"
144             ui-ace="ic.aceFileOptions"
145             ng-model="ic.options.docJson"></div>
146        </div>
147      </div>
148    </div>
149    <footer class="footer-import">
150      <div class="text-center">
151        <button
152           ng-click="ic.doImport()"
153           ng-disabled="!ic.options.docData.length || !ic.options.selectedBucket"
154           class="fix-width-3">
155           <span ng-if="!ic.options.importing">Import Data</span>
156           <span ng-if="ic.options.importing">Cancel Import</span>
157        </button>
158        <br>
159        <div class="width-12">{{ic.options.last_import_status}}</div>
160      </div>
161    </footer>
162  </form>
163</div>
164