Revamp catalogue number replacement

* Removed Upgrade route * Upgrade Catalogue is now a list mode * Catalogue Replace table now is editable * get in Enum will convert to numeric value (handle string binding) * GridMode/listMode is now displayMode with Strings #64
stamp-web · May 29, 2016 · b60212d · b60212d
1 parent ec5dadf
commit b60212d
Show file tree

Hide file tree

Showing 12 changed files with 194 additions and 167 deletions.
diff --git a/locales/en/stamp-web.json b/locales/en/stamp-web.json
@@ -2,6 +2,7 @@
     "nav": {
         "manage": "Manage",
         "settings": "Manage settings",
+        "settings-short": "Settings",
         "stamps": "Stamps",
         "upgrade": "Upgrade",
         "title": "Stamp Web",
@@ -13,6 +14,7 @@
         "clear-all": "Clear all selected stamps"
     },
     "footer": {
+        "filtering-total": "Stamps matching filter criteria:",
         "totalSelected": "Selected",
         "total": "Total"
     },
@@ -66,6 +68,7 @@
         "defects-select": "Select defects",
         "description": "Description",
         "details-title": "Details",
+        "filtering-catalogue": "Filtering Catalogue",
         "grade": "Grade",
         "grade-select": "Select grade",
         "hide": "close",
@@ -80,6 +83,7 @@
         "purchase-total": "Total purchase",
         "purchased": "Purchased",
         "rate": "Denomination",
+        "replacement-catalogue": "Replacement Catalogue",
         "seller": "Seller",
         "seller-select": "Select a seller",
         "stamp-collection": "Stamp collection",
@@ -154,6 +158,7 @@
     },
     "actions": {
         "add-cn": "Add a new catalogue number",
+        "apply": "Apply",
         "purchase": "Enter purchase information for selected stamps",
         "cancel": "Cancel",
         "cancel-changes" : "Cancel edit",
@@ -164,7 +169,11 @@
         "save": "Save",
         "save-and-new": "Save and new",
         "save-changes" : "Save edit",
-        "page-size": "Size"
+        "page-size": "Size",
+        "show-as-grid": "Show as a grid",
+        "show-as-table": "Show as a table",
+        "show-as-upgrade": "Update catalogue numbers to a new catalogue",
+        "show-reference-cataloguenumbers": "Show reference catalogue numbers"
     },
     "paging-toolbar": {
         "page": "Page"

diff --git a/src/app.js b/src/app.js
@@ -42,8 +42,7 @@ export class App {
                 title: this.i18n.tr('nav.stamps')
             },
             {route: 'manage', moduleId: './views/manage/manage-list', nav: true, title: this.i18n.tr('nav.manage')},
-            {route: 'settings', moduleId: './views/preferences/user-settings', nav: false, title: 'Settings'},
-            {route: 'upgrade', name: 'upgrade', moduleId: './views/catalogues/catalogue-upgrade', nav: true, title: this.i18n.tr('nav.upgrade')}
+            {route: 'settings', moduleId: './views/preferences/user-settings', nav: false, title: this.i18n.tr('nav.settings-short')}
         ]);
         this.router = router;
     }

diff --git a/src/components/catalogue-numbers/cn-details.js b/src/components/catalogue-numbers/cn-details.js
@@ -142,9 +142,7 @@ export class CatalogueNumberDetailsComponent extends EventManaged {
 
     loadCatalogues() {
         var self = this;
-        this.catalogueService.find({
-            $orderby: 'issue desc'
-        }).then(results => {
+        this.catalogueService.find(this.catalogueService.getDefaultSearchOptions()).then(results => {
             self.catalogues = results.models;
             self.loading = false;
         });

diff --git a/src/components/stamps/stamp-replacement-table.html b/src/components/stamps/stamp-replacement-table.html
@@ -2,19 +2,78 @@
     <require from="../../value-converters/as-enum"></require>
     <require from="../../value-converters/as-currency-formatted"></require>
     <require from="../../value-converters/by-name"></require>
+    <require from="../../widgets/select-picker/select-picker"></require>
+
     <require from="resources/styles/components/stamps/stamp-replacement-table.css"></require>
+
     <div class="stamp-replacement-table-wrapper">
+        <div>
+            <div class="form-group form-group-sm">
+                <label for="filter-catalogueRef" class="col-sm-3 control-label">${'editor.filtering-catalogue'|t}</label>
+                <div class="col-sm-9">
+                    <select-picker items.bind="catalogues" disabled.bind="loading" value.two-way="model.filterCatalogueRef"
+                                   config.bind="{ id: 'filter-catalogueRef', tabIndex: 0, labelProperty: 'displayName', valueProperty: 'id', caption: 'editor.catalogue-select' }">
+                    </select-picker>
+                </div>
+            </div>
+            <div class="form-group form-group-sm">
+                <label for="replacement-catalogueRef" class="col-sm-3 control-label">${'editor.replacement-catalogue'|t}</label>
+                <div class="col-sm-9">
+                    <select-picker items.bind="catalogues" disabled.bind="loading" value.two-way="model.replacementCatalogueRef"
+                                   config.bind="{ id: 'replacement-catalogueRef', tabIndex: 0, labelProperty: 'displayName', valueProperty: 'id', caption: 'editor.catalogue-select' }">
+                    </select-picker>
+                </div>
+            </div>
+            <div>
+                <button type="button" class="btn btn-sm btn-primary ${filterReady ? '' : 'disabled'}" disabled.bind="!filterReady" click.delegate="filterStamps()">${'actions.apply'|t}</button>
+                <button type="button" class="btn btn-sm" click.delegate="saveAll()">${'actions.save'|t}</button>
+                <span class="filtering-message">
+                    <label>${ 'footer.filtering-total'|t}</label>
+                    ${filteredStamps.length}
+                </span>
+            </div>
+        </div>
+
         <table class="table table-condensed table-hover">
             <thead>
             <tr>
                 <th>${'table.country'|t}</th>
                 <th>${'table.description'|t}</th>
+                <th>${'table.catalogue-number'|t}</th>
+                <th>${'table.condition'|t}</th>
+                <th>${'table.catalogue-value'|t}</th>
             </tr>
             </thead>
             <tbody>
-            <tr repeat.for="stamp of stamps">
+            <tr repeat.for="stamp of filteredStamps" click.trigger="select($event, $index)">
                 <td class="col-md-3">${ stamp.countryRef | byName:'countries' }</td>
                 <td class="col-md-4">${ stamp.rate + ' ' + stamp.description }</td>
+                <td class="col-md-1">
+                    <span if.bind="editingRow === $index">
+                        <input type="text" class="form-control replacement-number-input" tabindex="0" value.bind="editingCatalogueNumber.number">
+                    </span>
+                    <span if.bind="editingRow !== $index">
+                        ${ getReplacementCatalogueNumber(stamp).number }
+                    </span>
+                </td>
+                <td class="col-md-1">
+                    <span if.bind="editingRow === $index">
+                        <select-picker items.bind="conditions" disabled.bind="loading" value.two-way="editingCatalogueNumber.condition"
+                            config.bind="{ id: 'replacement-condition', tabIndex: 0, labelProperty: 'description', valueProperty: 'ordinal', filterSearch: false, caption: 'editor.condition-select' }">
+                        </select-picker>
+                    </span>
+                    <span if.bind="editingRow !== $index">
+                        ${ getReplacementCatalogueNumber(stamp).condition|asEnum:'Condition'|t }
+                    </span>
+                </td>
+                <td class="col-md-1">
+                    <span if.bind="editingRow === $index">
+                        <input type="text" class="form-control replacement-value-input" tabindex="0" value.bind="editingCatalogueNumber.value">
+                    </span>
+                    <span if.bind="editingRow !== $index">
+                        ${ getReplacementCatalogueNumber(stamp).value|asCurrencyFormatted:getCurrencyCode(getReplacementCatalogueNumber(stamp)) }
+                    </span>
+                </td>
             </tr>
             </tbody>
         </table>

diff --git a/src/components/stamps/stamp-replacement-table.js b/src/components/stamps/stamp-replacement-table.js
@@ -13,9 +13,17 @@
  See the License for the specific language governing permissions and
  limitations under the License.
  */
-import {customElement, bindable} from 'aurelia-framework';
+import {customElement, bindable, computedFrom, LogManager} from 'aurelia-framework';
+import {BindingEngine} from 'aurelia-binding';
+import {Stamps} from '../../services/stamps';
+import {Catalogues} from '../../services/catalogues';
+import {Condition} from '../../util/common-models';
 
-// import dataTable from 'datatables'; // eslint-disable-line no-unused-vars
+import _ from 'lodash';
+import $ from 'jquery';
+
+
+const logger = LogManager.getLogger('stamp-replacement-table');
 
 @customElement('stamp-replacement-table')
 @bindable( {
@@ -24,32 +32,97 @@ import {customElement, bindable} from 'aurelia-framework';
 })
 export class StampReplacementTable {
 
-    //_dataTable;
+    model = {
+        filterCatalogueRef: -1,
+        replacementCatalogueRef: -1
+    };
+    catalogues = [];
+    filteredStamps = [];
+    editingRow = -1;
+    conditions = Condition.symbols();
+    editingCatalogueNumber;
+
 
     static inject() {
-        return [Element];
+        return [Element, BindingEngine, Catalogues, Stamps];
     }
 
-    constructor(element) {
+    constructor(element, bindingEngine, catalogues, stamps) {
         this.element = element;
+        this.bindingEngine = bindingEngine;
+        this.catalogueService = catalogues;
+        this.stampsService = stamps;
+    }
+
+    stampsChanged(newList, oldList) {
+        if( newList !== oldList ) {
+            this.filterStamps();
+        }
+    }
+
+    editingRowChanged(newIndex) {
+        this.editingCatalogueNumber = this.getReplacementCatalogueNumber( this.filteredStamps[newIndex]);
+        logger.debug(this.editingCatalogueNumber);
+        _.debounce( () => {
+            $('.replacement-number-input').focus();
+        }, 250)();
     }
 
     attached( ) {
-        /*this._dataTable = $(this.element).find('table').dataTable({
-            data: this.stamps,
-            info: false,
-            paging: false,
-            scrollX: false,
-            scrollY: '100%',
-            scrollCollapse: true,
-            searching: false
-        }); */
+        this.loading = true;
+        this.catalogueService.find(this.catalogueService.getDefaultSearchOptions()).then(results => {
+            this.catalogues = results.models;
+            this.loading = false;
+        });
+        this._modelSubscribers = [];
+        this._modelSubscribers.push(this.bindingEngine.propertyObserver(this, 'editingRow').subscribe(this.editingRowChanged.bind(this)));
     }
 
     detached( ) {
-        /*if( this._dataTable) {
-            this._dataTable.api().destroy();
-        }*/
+        this._modelSubscribers.forEach(sub => {
+            sub.dispose();
+        });
+    }
+
+    filterStamps( ) {
+        this.filteredStamps.splice(0, this.filteredStamps.length);
+        let self = this;
+        _.each( this.stamps, stamp => {
+            let index = _.findIndex( stamp.catalogueNumbers, { catalogueRef: self.model.filterCatalogueRef});
+            if( index >= 0 ) {
+                let s = _.clone(stamp, true);
+                s.catalogueNumbers[index].catalogueRef = self.model.replacementCatalogueRef;
+                s.catalogueNumbers[index].replacing = true;
+                self.filteredStamps.push( s );
+            }
+        });
+        if( this.filteredStamps.length > 0 ) {
+            _.debounce( context => {
+                context.editingRow = 0;
+            })(this);
+        }
+    }
+
+    select($event, $index) {
+        this.editingRow = $index;
+    }
+
+    getCurrencyCode(cn) {
+        if( cn ) {
+            if( !cn.currencyCode ) {
+                cn.currencyCode = _.find( this.catalogues, { id: cn.catalogueRef }).code;
+            }
+            return cn.currencyCode;
+        }
+    }
+
+    getReplacementCatalogueNumber(stamp) {
+        return _.find( stamp.catalogueNumbers, {replacing: true});
+    }
+
+    @computedFrom('model.filterCatalogueRef', 'model.replacementCatalogueRef')
+    get filterReady() {
+        return ( this.model.filterCatalogueRef >= 0 && this.model.replacementCatalogueRef >= 0 );
     }
 
 }
diff --git a/src/components/stamps/stamp-replacement-table.less b/src/components/stamps/stamp-replacement-table.less
@@ -10,5 +10,13 @@ stamp-replacement-table {
         width: 100%;
         height: 100%;
         overflow-y: auto;
+        tr {
+            height: 39px;
+        }
+    }
+
+    .form-control {
+        height: 28px;
+        font-size: @font-size-small;
     }
 }
diff --git a/src/util/common-models.js b/src/util/common-models.js
@@ -89,7 +89,7 @@ export class Enum {
         let self = this;
         let symbol;
         this.keys().forEach( k => {
-            if( self[k].ordinal === ordinal ) {
+            if( self[k].ordinal === +ordinal ) {
                 symbol = self[k];
             }
         });

diff --git a/src/views/catalogues/catalogue-upgrade.html b/src/views/catalogues/catalogue-upgrade.html