1<div ng-controller="qwImportController as ic" class="doc-editor">
2
3  <!-- row of controls for the query ----------------------------------------- -->
4  <form name="searchForm">
5    <div class="resp-med">
6
7      <input type="file" id="loadQuery" name="files"
8        style="display: none" accept=".txt,.json,.csv,.tsv">
9
10      <div class="column">
11        <button ng-click="ic.selectFile()" class="fix-width-3" ng-disabled="ic.options.importing">
12          Select File to Import <span ng-if="ic.options.queryBusy"
13            class="icon-button">
14        </button>
15        {{ic.status}}
16      </div>
17
18      <br>
19
20      <div class="row row-min">
21        <label>File Contents:</label>
22      </div>
23      <div class="wb-results-json wb-import-data-panel" ui-ace="ic.aceFileOptions" ng-model="ic.options.fileData"></div>
24
25      <br>
26
27      <div class="row row-min">
28        <span class="wb-history-controls"> 
29           <label>Found {{ic.options.docData.length}} records parsing as: &nbsp;</label> 
30           <ui-select on-select="ic.parseAs($item)" ng-model="ic.options.selectedFormat" 
31           theme="selectize" class="cbui-select" ng-disabled="ic.options.importing">
32             <ui-select-match class="ui-select-match">
33               {{$select.selected}}
34             </ui-select-match>
35             <ui-select-choices repeat="item in ic.formats">
36               <span class="select-item ellipsis" ng-bind-html="item"></span>
37             </ui-select-choices> </ui-select>
38         </span>
39      </div>
40
41      <br>
42
43      <div class="row row-min">
44        <label>Parsed Data:</label>
45          <div class="row text-small resp-margin-sml">JSON 
46          <label for="show_table" class="toggle-control">
47          <input type="checkbox" id="show_table" ng-model="ic.options.showTable" ng-change="ic.showTableChanged()">
48          <span class="toggle-control-body"></span>
49          </label>Table
50          </div>
51      </div>
52 
53
54      <div ng-if="ic.options.docData && ic.options.docData.length && ic.options.showTable"
55        class="wb-results-table wb-import-data-panel" qw-json-data-table="ic.options.docData"></div>
56      <div ng-if="ic.options.docData && ic.options.docData.length && !ic.options.showTable"
57        class="wb-results-json wb-import-data-panel" ui-ace="ic.aceFileOptions"
58        ng-model="ic.options.docJson"></div>
59      <div class="wb-results-json wb-import-data-panel" ui-ace="qc.aceOutputOptions"
60        ng-if="qc.isSelected(1) && (!qc.dataTooBig() || qc.showBigDatasets)"
61        ng-model="qc.lastResult().result"></div>
62      <div class="text-small wb-import-empty-panel" ng-if="!ic.options.docData || !ic.options.docData.length">No data</div>
63
64      <br>
65
66      <div class="row row-min">
67        <span class="wb-history-controls">
68          <label>Select Destination Bucket: &nbsp;</label> 
69          <ui-select ng-model="ic.options.selectedBucket" theme="selectize"
70            class="cbui-select" ng-disabled="ic.options.importing">
71            <ui-select-match class="ui-select-match">
72               {{$select.selected}} 
73            </ui-select-match> 
74            <ui-select-choices class="ui-select-choices" repeat="bucket in ic.buckets | filter: $select.search">
75              <span class="select-item ellipsis" ng-bind-html="bucket | highlight: $select.search"></span> 
76            </ui-select-choices> 
77          </ui-select>
78        </span>
79      </div>
80
81      <br>
82
83        <label>Import with Document ID:</label>
84
85      <div>
86        <input type="radio" id="guid" name="docId" ng-model="ic.options.useKey" ng-value="false">
87        <label for="guid">GUID</label>
88        </div>
89      <div>
90        <span class="wb-history-controls"> 
91        <input type="radio" id="field" name="docId" ng-model="ic.options.useKey" ng-value="true">
92        <label for="field" ng-disabled="!(ic.options.fields.length > 0)">Value of Field: </label> 
93        <ui-select ng-disabled="!ic.options.useKey || !(ic.options.fields.length > 0) || ic.options.importing"
94            ng-model="ic.options.selectedDocIDField" theme="selectize" class="cbui-select"> 
95           <ui-select-match class="ui-select-match">
96             {{$select.selected}} 
97           </ui-select-match> 
98           <ui-select-choices ng-enabled="ic.options.useKey" class="ui-select-choices" repeat="field in ic.options.fields">
99             <span ng-enabled="ic.options.useKey" class="select-item ellipsis" ng-bind-html="field"></span>
100           </ui-select-choices> 
101        </ui-select>
102        <span ng-if="ic.options.docData && ic.options.docData.length && ic.options.fields.length==0" tooltip-trigger="'mouseenter'" tooltip-append-to-body="true"
103          class="fa-warning icon orange-3 cursor-pointer" 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."></span>
104 
105        </span>
106      </div>
107      <br>
108
109
110      <div class="row row-min">
111      <span class="wb-history-controls">
112        <button ng-click="ic.doImport()" ng-disabled="!ic.options.docData.length || !ic.options.selectedBucket" class="fix-width-3">
113           <span ng-if="!ic.options.importing">Import Data</span>
114           <span ng-if="ic.options.importing">Cancel Import</span>
115          <span class="icon-button"></button>
116        {{ic.options.last_import_status}}
117        </span>
118      </div>
119      
120      <br>
121      
122      <div class="">
123       <div class="row row-min">
124        Note: importing data through the browser is inherently slower than using cbimport from the command-line. 
125        The cbimport command for the above data would be:
126       </div>
127       <div class="row row-min monospaced">
128        {{ic.getCbimport()}}
129       </div>
130      </div>
131    </div>
132</div>