partkeepr

fork of partkeepr
git clone https://git.e1e0.net/partkeepr.git
Log | Files | Refs | Submodules | README | LICENSE

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 });