commit 5a14305cd9819ecaff459890c216db0f01a09bb6
parent 0e329e8156986d0edbc7af99033296d29136cc08
Author: Felicia Hummel <felicitus@felicitus.org>
Date: Tue, 2 Aug 2016 21:03:40 +0200
Merge pull request #702 from partkeepr/PartKeepr-509
Added thumbnail view, fixes #509
Diffstat:
1 file changed, 89 insertions(+), 51 deletions(-)
diff --git a/src/PartKeepr/FrontendBundle/Resources/public/js/Components/Part/PartsManager.js b/src/PartKeepr/FrontendBundle/Resources/public/js/Components/Part/PartsManager.js
@@ -25,8 +25,7 @@ Ext.define('PartKeepr.PartManager', {
selectedCategory: null,
- initComponent: function ()
- {
+ initComponent: function () {
/**
* Create the store with the default sorter "name ASC"
@@ -138,6 +137,71 @@ Ext.define('PartKeepr.PartManager', {
partManager: this
});
+ this.thumbnailViewTpl = new Ext.XTemplate(
+ '<tpl for=".">',
+ '<div class="dataview-multisort-item iclogo"><img src="{[values["@id"]]}/getImage?maxWidth=100&maxHeight=100"/></div>',
+ '</tpl>');
+
+ this.thumbnailView = Ext.create("Ext.view.View", {
+ tpl: this.thumbnailViewTpl,
+ componentCls: 'manufacturer-ic-logos',
+ itemSelector: 'div.dataview-multisort-item',
+ store: {
+ model: PartKeepr.PartBundle.Entity.PartAttachment
+ }
+ });
+
+ this.grid.store.on("load", function () {
+ this.thumbnailView.getStore().removeAll();
+
+ var data = this.grid.store.getData(),
+ i, j,
+ attachments, attachment;
+
+ for (i = 0; i < data.getCount(); i++) {
+ attachments = data.getAt(i).attachments().getData();
+
+ for (j = 0; j < attachments.getCount(); j++) {
+ attachment = attachments.getAt(j);
+ if (attachment.get("isImage")) {
+ this.thumbnailView.getStore().add(attachment)
+ }
+ }
+ }
+
+ var t = new Ext.Template(i18n("Displaying {0} image(s) from {1} part(s)"));
+ var q = t.apply([this.thumbnailView.getStore().getCount(), this.grid.store.getCount()]);
+ this.down("#thumbnailViewStatusMessage").setText(q);
+ }, this);
+
+ this.thumbnailPanel = Ext.create("Ext.panel.Panel", {
+ title: i18n("Thumbnail View"),
+ bbar: Ext.create("Ext.toolbar.Paging", {
+ store: this.grid.store,
+ enableOverflow: true,
+ dock: 'bottom',
+ displayInfo: false,
+ items: [{xtype: 'tbfill'},{
+ xtype: 'tbtext',
+ itemId: "thumbnailViewStatusMessage"
+ }
+ ]
+ }),
+ items: this.thumbnailView
+ });
+
+ this.tabPanel = Ext.create("Ext.tab.Panel", {
+ region: 'center',
+ items: [this.grid, this.thumbnailPanel]
+ });
+
+ this.thumbnailView.on("render", function () {
+ this.loadMask = Ext.create("Ext.LoadMask", {
+ store: this.grid.store,
+ target: this.thumbnailPanel
+ })
+ }, this);
+
if (this.compactLayout) {
// Create two border layouts: One for the center panel and one for the left panel. Each border layout
// has two columns each, containing Categories+Part Details and Part List+Part Filter Panel.
@@ -158,7 +222,7 @@ Ext.define('PartKeepr.PartManager', {
layout: 'border',
border: false,
region: 'center',
- items: [this.grid, this.filterPanel]
+ items: [this.tabPanel, this.filterPanel]
}
];
} else {
@@ -168,7 +232,7 @@ Ext.define('PartKeepr.PartManager', {
layout: 'border',
border: false,
region: 'center',
- items: [this.grid, this.filterPanel]
+ items: [this.tabPanel, this.filterPanel]
}, this.detailPanel
];
}
@@ -181,8 +245,7 @@ Ext.define('PartKeepr.PartManager', {
* @param {Ext.tree.View} tree The tree view
* @param {Ext.data.Model} record the selected record
*/
- onCategoryClick: function (tree, record)
- {
+ onCategoryClick: function (tree, record) {
this.selectedCategory = record;
var filter = Ext.create("Ext.util.Filter", {
@@ -201,18 +264,16 @@ Ext.define('PartKeepr.PartManager', {
this.store.addFilter(filter);
}
},
- getSelectedCategory: function ()
- {
+ getSelectedCategory: function () {
return this.selectedCategory;
},
/**
* Returns the ID for this node and all child nodes
*
- * @param {Ext.data.Model} The node
+ * @param {Ext.data.Model} node The node
* @return Array
*/
- getChildrenIds: function (node)
- {
+ getChildrenIds: function (node) {
var childNodes = [node];
if (node.hasChildNodes()) {
@@ -228,8 +289,7 @@ Ext.define('PartKeepr.PartManager', {
* of the selected part for a short time. We can't select the category
* as this would affect the parts grid.
*/
- onSyncCategory: function ()
- {
+ onSyncCategory: function () {
var r = this.grid.getSelectionModel().getSelection();
if (r.length != 1) {
@@ -251,8 +311,7 @@ Ext.define('PartKeepr.PartManager', {
*
* Prompts the user if he really wishes to delete the part. If yes, it calls deletePart.
*/
- onItemDelete: function ()
- {
+ onItemDelete: function () {
var r = this.grid.getSelectionModel().getLastSelected();
Ext.Msg.confirm(i18n("Delete Part"), sprintf(i18n("Do you really wish to delete the part %s?"), r.get("name")),
@@ -261,12 +320,8 @@ Ext.define('PartKeepr.PartManager', {
/**
* Creates a duplicate with the basic data only from the selected item. Loads the selected part and calls
* createPartDuplicate after the part was loaded.
- *
- * @param none
- * @return nothing
*/
- onDuplicateItemWithBasicData: function ()
- {
+ onDuplicateItemWithBasicData: function () {
var r = this.grid.getSelectionModel().getLastSelected();
this.loadPart(r.getId(), Ext.bind(this.createPartDuplicate, this));
@@ -274,12 +329,8 @@ Ext.define('PartKeepr.PartManager', {
/**
* Creates a full duplicate from the selected item. Loads the selected part and calls createPartDuplicate
* after the part was loaded.
- *
- * @param none
- * @return nothing
*/
- onDuplicateItemWithAllData: function ()
- {
+ onDuplicateItemWithAllData: function () {
var r = this.grid.getSelectionModel().getLastSelected();
this.loadPart(r.getId(), Ext.bind(this.createFullPartDuplicate, this));
@@ -288,8 +339,7 @@ Ext.define('PartKeepr.PartManager', {
* Creates a part duplicate from the given record and opens the editor window.
* @param rec The record to duplicate
*/
- createPartDuplicate: function (rec)
- {
+ createPartDuplicate: function (rec) {
var data = rec.getData();
var associationData = rec.getAssociationData();
@@ -314,8 +364,7 @@ Ext.define('PartKeepr.PartManager', {
* Creates a part duplicate from the given record and opens the editor window.
* @param rec The record to duplicate
*/
- createFullPartDuplicate: function (rec)
- {
+ createFullPartDuplicate: function (rec) {
var data = rec.getData();
var newItem = Ext.create("PartKeepr.PartBundle.Entity.Part");
@@ -337,8 +386,7 @@ Ext.define('PartKeepr.PartManager', {
* @todo We use the current selection of the grid. If for some reason the selection changes during the user is prompted,
* we delete the wrong part. Fix that to pass the selected item to the onItemDelete then to this function.
*/
- deletePart: function (btn)
- {
+ deletePart: function (btn) {
var r = this.grid.getSelectionModel().getLastSelected();
if (btn == "yes") {
@@ -350,8 +398,7 @@ Ext.define('PartKeepr.PartManager', {
/**
* Creates a new, empty part editor window
*/
- onItemAdd: function ()
- {
+ onItemAdd: function () {
var j = Ext.create("PartKeepr.PartEditorWindow", {
partMode: 'create'
});
@@ -377,26 +424,22 @@ Ext.define('PartKeepr.PartManager', {
/**
* Called when a part was edited. Refreshes the grid.
*/
- onEditPart: function (part)
- {
+ onEditPart: function (part) {
var j = Ext.create("PartKeepr.PartEditorWindow");
j.editor.on("partSaved", this.onPartSaved, this);
j.editor.editItem(part);
j.show();
},
- onNewPartSaved: function (record)
- {
+ onNewPartSaved: function () {
this.grid.getStore().reload();
},
- onPartSaved: function (record)
- {
+ onPartSaved: function (record) {
this.detail.setValues(record);
},
/**
* Called when a part was selected in the grid. Displays the details for this part.
*/
- onItemSelect: function ()
- {
+ onItemSelect: function () {
if (this.grid.getSelection().length > 1) {
this.detailPanel.collapse();
this.tree.syncButton.disable();
@@ -423,8 +466,7 @@ Ext.define('PartKeepr.PartManager', {
* @param {Integer} id The ID of the part to load
* @param {Function} handler The callback to call when the part was loaded
*/
- loadPart: function (id, handler)
- {
+ loadPart: function (id, handler) {
// @todo we have this method duplicated in PartEditor
PartKeepr.PartBundle.Entity.Part.load(id, {
@@ -435,8 +477,7 @@ Ext.define('PartKeepr.PartManager', {
/**
* Creates the store
*/
- createStore: function (config)
- {
+ createStore: function (config) {
Ext.Object.merge(config, {
autoLoad: true,
autoSync: false, // Do not change. If true, new (empty) records would be immediately commited to the database.
@@ -448,12 +489,10 @@ Ext.define('PartKeepr.PartManager', {
this.store = Ext.create('Ext.data.Store', config);
// Workaround for bug http://www.sencha.com/forum/showthread.php?133767-Store.sync()-does-not-update-dirty-flag&p=607093#post607093
- this.store.on('write', function (store, operation)
- {
+ this.store.on('write', function (store, operation) {
var success = operation.wasSuccessful();
if (success) {
- Ext.each(operation.records, function (record)
- {
+ Ext.each(operation.records, function (record) {
if (record.dirty) {
record.commit();
}
@@ -464,8 +503,7 @@ Ext.define('PartKeepr.PartManager', {
/**
* Returns the store
*/
- getStore: function ()
- {
+ getStore: function () {
return this.store;
}
});
