SearchPanel.js (7414B)
1 Ext.define("PartKeepr.Components.OctoPart.SearchPanel", { 2 extend: "Ext.panel.Panel", 3 layout: 'border', 4 grid: null, 5 store: null, 6 searchBar: null, 7 xtype: 'octopartSearchPanel', 8 9 initComponent: function () 10 { 11 this.store = Ext.create("Ext.data.Store", { 12 fields: [ 13 {name: 'title', type: 'string'}, 14 {name: 'url', type: 'string'}, 15 {name: 'mpn', type: 'string'}, 16 {name: 'numOffers', type: 'int'}, 17 {name: 'numDatasheets', type: 'int'}, 18 {name: 'numSpecs', type: 'int'} 19 ], 20 proxy: { 21 type: 'ajax', 22 startParam: '', 23 limitParam: '', 24 url: "", 25 reader: { 26 type: 'json', 27 totalProperty: 'hits', 28 rootProperty: 'results', 29 transform: this.checkForErrors 30 } 31 }, 32 autoLoad: false 33 }); 34 35 this.grid = Ext.create({ 36 xtype: 'grid', 37 region: 'center', 38 columns: [ 39 { 40 text: i18n("Manufacturer"), 41 dataIndex: 'manufacturer', 42 flex: 1 43 }, 44 { 45 text: i18n("Title"), 46 dataIndex: 'title', 47 flex: 2 48 }, { 49 text: i18n("MPN"), 50 dataIndex: 'mpn', 51 flex: 1 52 }, { 53 text: i18n("Offers"), 54 dataIndex: 'numOffers', 55 flex: 1 56 }, { 57 text: i18n("Datasheets"), 58 dataIndex: 'numDatasheets', 59 flex: 1 60 }, { 61 text: i18n("Parameters"), 62 dataIndex: 'numSpecs', 63 flex: 1 64 }, { 65 text: i18n("Details…"), 66 dataIndex: 'url', 67 renderer: function (v) 68 { 69 return '<span class="web-icon fugue-icon globe-small"/></span><a href="' + v + '" target="_blank">' + i18n( 70 "Details…") + "</a>"; 71 } 72 } 73 ], 74 store: this.store 75 }); 76 77 this.addButton = Ext.create("Ext.button.Button", { 78 iconCls: 'fugue-icon blueprint--plus', 79 text: i18n("Add Data"), 80 disabled: true, 81 itemId: 'add', 82 handler: this.onAddClick, 83 scope: this 84 }); 85 86 this.grid.addDocked(Ext.create("Ext.toolbar.Toolbar", { 87 dock: 'bottom', 88 enableOverflow: true, 89 items: [{ 90 xtype: 'checkbox', 91 itemId: "importDistributors", 92 checked: PartKeepr.getApplication().getUserPreference("partkeepr.octopart.importDistributors", true), 93 boxLabel: i18n("Distributors") 94 }, { 95 xtype: 'checkbox', 96 itemId: "importParameters", 97 checked: PartKeepr.getApplication().getUserPreference("partkeepr.octopart.importParameters", true), 98 boxLabel: i18n("Parameters") 99 }, { 100 xtype: 'checkbox', 101 itemId: "importBestDatasheet", 102 checked: PartKeepr.getApplication().getUserPreference("partkeepr.octopart.importBestDatasheet", true), 103 boxLabel: i18n("Best Datasheet") 104 }, { 105 xtype: 'checkbox', 106 itemId: "importCADModels", 107 checked: PartKeepr.getApplication().getUserPreference("partkeepr.octopart.importCADModels", true), 108 boxLabel: i18n("CAD Models") 109 }, { 110 xtype: 'checkbox', 111 itemId: "importReferenceDesigns", 112 checked: PartKeepr.getApplication().getUserPreference("partkeepr.octopart.importReferenceDesigns", true), 113 boxLabel: i18n("Reference Designs") 114 }, { 115 xtype: 'checkbox', 116 itemId: "importImages", 117 checked: PartKeepr.getApplication().getUserPreference("partkeepr.octopart.importImages", true), 118 boxLabel: i18n("Images") 119 }] 120 })); 121 122 this.grid.addDocked(Ext.create("Ext.toolbar.Paging", { 123 store: this.store, 124 enableOverflow: true, 125 dock: 'bottom', 126 displayInfo: false, 127 grid: this.grid, 128 items: this.addButton 129 })); 130 131 132 133 this.searchBar = Ext.create("Ext.form.field.Text", { 134 region: 'north', 135 height: 30, 136 emptyText: i18n("Enter Search Terms"), 137 listeners: { 138 specialkey: function (field, e) 139 { 140 if (e.getKey() === e.ENTER) 141 { 142 this.startSearch(field.getValue()); 143 } 144 145 }, 146 scope: this 147 } 148 }); 149 150 this.items = [this.grid, this.searchBar]; 151 152 this.grid.on("itemdblclick", this.onItemDblClick, this); 153 this.grid.on('selectionchange', 154 this.onSelectChange, 155 this); 156 157 this.store.on("load", this.checkForApiError, this); 158 159 this.callParent(arguments); 160 161 }, 162 onAddClick: function () 163 { 164 var record = this.grid.getSelection()[0]; 165 this.applyData(record); 166 }, 167 onSelectChange: function (selModel, selections) 168 { 169 this.addButton.setDisabled(selections.length === 0); 170 }, 171 setPart: function (part) 172 { 173 this.part = part; 174 }, 175 onItemDblClick: function (grid, record) 176 { 177 this.applyData(record); 178 }, 179 applyData: function (record) 180 { 181 var j = Ext.create("PartKeepr.Components.OctoPart.DataApplicator"); 182 183 j.setPart(this.part); 184 185 j.setImport("distributors", this.down("#importDistributors").getValue()); 186 j.setImport("parameters", this.down("#importParameters").getValue()); 187 j.setImport("bestDatasheet", this.down("#importBestDatasheet").getValue()); 188 j.setImport("cadModels", this.down("#importCADModels").getValue()); 189 j.setImport("referenceDesigns", this.down("#importReferenceDesigns").getValue()); 190 j.setImport("images", this.down("#importImages").getValue()); 191 192 j.loadData(record.get("uid")); 193 194 j.on("refreshData", function () 195 { 196 this.fireEvent("refreshData"); 197 }, this); 198 }, 199 startSearch: function (query) 200 { 201 this.store.getProxy().setUrl( 202 PartKeepr.getBasePath() + '/api/octopart/query/?q=' + encodeURIComponent(query) 203 ); 204 this.store.load(); 205 this.searchBar.setValue(query); 206 }, 207 checkForErrors: function (data) 208 { 209 if (data.results.length == 0 && data.errors && data.errors.length > 0) { 210 Ext.Msg.alert(i18n("Octopart Error"), data.errors.map(e => e.message).join()); 211 } 212 213 return data; 214 }, 215 checkForApiError: function (store, records, successful, eOpts ) 216 { 217 if (!successful) { 218 Ext.Msg.alert(i18n("Octopart Error"), "PartKeepr cannot access the Octopart API"); 219 } 220 } 221 });