Refine the catalogue update capability

Fixes #196
stamp-web · Sep 21, 2023 · 4412730 · 4412730
1 parent 359948b
commit 4412730
Show file tree

Hide file tree

Showing 7 changed files with 3,039 additions and 17,158 deletions.
diff --git a/README.md b/README.md
@@ -94,13 +94,15 @@ The following is a list of test statistics for the project by date and commit
 
 | Date       | Commit                                                                                                    | Number of Tests | Code Coverage |
 |------------|-----------------------------------------------------------------------------------------------------------|-----------------|---------------|
-| 2022-01-15 | [8ac447f](https://github.com/stamp-web/stamp-web-aurelia/commit/8ac447f580f29d1f0f8dd23e284c6f25448cf1d7) | 83 | 12.05%        |
-| 2022-01-15 | [081fe3f](https://github.com/stamp-web/stamp-web-aurelia/commit/081fe3f31d5962c10777f4017e2c7a5dbe26e12e) | 86 | 12.20%        |
-| 2022-01-15 | [38899a3](https://github.com/stamp-web/stamp-web-aurelia/commit/38899a32d69cd5c62ade7341a83708d4a8e1e726) | 94 | 13.29%  |      |
-| 2022-01-25 | [c17f067](https://github.com/stamp-web/stamp-web-aurelia/commit/c17f06784332adff83e0a2594a705de26285d30a) | 98 | 18.35% |
-| 2022-06-08 | [a798ac3](https://github.com/stamp-web/stamp-web-aurelia/commit/a798ac36ac61a06258729173d8fa5cacf6a0ff24) | 102 | 18.41% |
-| 2022-06-08 | [e64d964](https://github.com/stamp-web/stamp-web-aurelia/commit/e64d964202e6b9930dda0712837682a71ad0d1db) | 104 | 18.59% |
-| 2023-01-04 | | 107 | 18.80% | 
+| 2022-01-15 | [8ac447f](https://github.com/stamp-web/stamp-web-aurelia/commit/8ac447f580f29d1f0f8dd23e284c6f25448cf1d7) | 83              | 12.05%        |
+| 2022-01-15 | [081fe3f](https://github.com/stamp-web/stamp-web-aurelia/commit/081fe3f31d5962c10777f4017e2c7a5dbe26e12e) | 86              | 12.20%        |
+| 2022-01-15 | [38899a3](https://github.com/stamp-web/stamp-web-aurelia/commit/38899a32d69cd5c62ade7341a83708d4a8e1e726) | 94              | 13.29%        |
+| 2022-01-25 | [c17f067](https://github.com/stamp-web/stamp-web-aurelia/commit/c17f06784332adff83e0a2594a705de26285d30a) | 98              | 18.35%        |
+| 2022-06-08 | [a798ac3](https://github.com/stamp-web/stamp-web-aurelia/commit/a798ac36ac61a06258729173d8fa5cacf6a0ff24) | 102             | 18.41%        |
+| 2022-06-08 | [e64d964](https://github.com/stamp-web/stamp-web-aurelia/commit/e64d964202e6b9930dda0712837682a71ad0d1db) | 104             | 18.59%        |
+| 2023-01-04 | [359948b](https://github.com/stamp-web/stamp-web-aurelia/commit/359948b689f088ec8c8554044cab96c24ffe1a77) | 107             | 18.80%        | 
+| 2023-09-21 | | 123 | 20.27%        |
+
 ## Optimizing for Browsers
 
 To optimize the build for the latest browsers the command

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/resources/elements/stamps/stamp-replacement-table.html b/src/resources/elements/stamps/stamp-replacement-table.html
@@ -53,30 +53,30 @@
                 <td>${ stamp.countryRef | byName:'countries' }</td>
                 <td class="d-none d-lg-table-cell">${ stamp.rate + ' ' + stamp.description }</td>
                 <td class="col-number">
-                    <input if.bind="editingRow === $index" type="text" class="form-control replacement-number-input" tabindex="0" value.bind="editingCatalogueNumber.number">
-                    <span if.bind="editingRow !== $index">
+                    <input if.bind="model.editingRow === $index" type="text" class="form-control replacement-number-input" tabindex="0" value.bind="editingCatalogueNumber.number">
+                    <span if.bind="model.editingRow !== $index">
                         ${ getReplacementCatalogueNumber(stamp).number }
                     </span>
                 </td>
                 <td class="col-condition">
-                    <span class="condition-edit" if.bind="editingRow === $index">
+                    <span class="condition-edit" if.bind="model.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">
+                    <span if.bind="model.editingRow !== $index">
                         ${ getReplacementCatalogueNumber(stamp).condition|asEnum:'Condition'|t }
                     </span>
                 </td>
                 <td class="col-catalogue-value">
-                    <span class="value-edit" if.bind="editingRow === $index">
+                    <span class="value-edit" if.bind="model.editingRow === $index">
                         <input type="text" class="form-control replacement-value-input" disabled.bind="editingCatalogueNumber.unknown"
                                keydown.delegate="advanceToNextRow($event)" tabindex="0" value.bind="editingCatalogueNumber.value | asNumber:true">
-                        <input type="checkbox" tabindex="1000" checked.bind="editingCatalogueNumber.unknown" click.trigger="changeUnknown(stamp)">
+                        <input type="checkbox" tabindex="0" checked.bind="editingCatalogueNumber.unknown" click.trigger="changeUnknown()">
 					    <span>${'editor.no-value-short'|t}</span>
                     </span>
-                    <span if.bind="editingRow !== $index">
+                    <span if.bind="model.editingRow !== $index">
                         <span show.bind="getReplacementCatalogueNumber(stamp).unknown" class="unknown">
                             ${'table.catalogue-value-unknown'|t}
                         </span>
@@ -97,11 +97,11 @@
 
     </div>
     <div class="stamp-replacement-footer">
-        <button type="button" class="btn btn-primary ${editCount < 1 ? 'disabled': ''}" disabled.bind="editCount < 1" click.delegate="saveAll()">${'actions.save'|t}
+        <button type="button" class="btn btn-primary ${model.editCount < 1 ? 'disabled': ''}" disabled.bind="model.editCount < 1" click.delegate="saveAll()">${'actions.save'|t}
         </button>
         <div class="filtering-message">
-            <label>${ 'footer.filtering-total'|t}</label> <span class="badge ${!filteredStamps.length ? 'badge-default': 'badge-primary'}">${filteredStamps.length}</span>
-            <label>${ 'footer.modified-total'|t}</label> <span class="badge ${!editCount ? 'badge-default': 'badge-success'}">${editCount}</span>
+            <label>${ 'footer.filtering-total'|t}</label> <span>${filteredStamps.length}</span>
+            <label>${ 'footer.modified-total'|t}</label> <span>${model.editCount}</span>
         </div>
     </div>
 </template>
diff --git a/src/resources/elements/stamps/stamp-replacement-table.js b/src/resources/elements/stamps/stamp-replacement-table.js
@@ -32,22 +32,22 @@ const defaultImagePath = "https://drake-server.ddns.net/Thumbnails/";
 const logger = LogManager.getLogger('stamp-replacement-table');
 
 @customElement('stamp-replacement-table')
-@bindable( {
+@bindable({
     name: 'stamps',
     defaultValue: []
 })
 export class StampReplacementTable {
 
     model = {
         filterCatalogueRef: -1,
-        replacementCatalogueRef: -1
+        replacementCatalogueRef: -1,
+        editCount: 0,
+        editingRow: -1
     };
     catalogues = [];
     filteredStamps = [];
-    editingRow = -1;
     conditions = Condition.symbols();
     editingCatalogueNumber;
-    editCount = 0;
 
 
     static inject() {
@@ -64,23 +64,28 @@ export class StampReplacementTable {
     }
 
     stampsChanged(newList, oldList) {
-        if( newList !== oldList ) {
+        if (newList !== oldList) {
             this.filterStamps();
         }
     }
 
     editingRowChanged(newIndex) {
-        this.editingCatalogueNumber = this.getReplacementCatalogueNumber( this.filteredStamps[newIndex]);
+        // index may be empty
+        if (this.model.editingRow < 0 || _.isEmpty(this.filteredStamps)) {
+            return;
+        }
+        let stamp = this.filteredStamps[newIndex];
+        this.editingCatalogueNumber = this.getReplacementCatalogueNumber(stamp);
         logger.debug(this.editingCatalogueNumber);
-        if( this.editingCatalogueNumber ) {
-            this._setupEditSubscribers(this.filteredStamps[newIndex], this.editingCatalogueNumber);
+        if (this.editingCatalogueNumber) {
+            this._setupEditSubscribers(stamp, this.editingCatalogueNumber);
         }
-        _.debounce( () => {
+        _.debounce(() => {
             $('.replacement-number-input').focus();
         }, 250)();
     }
 
-    attached( ) {
+    attached() {
         this.loading = true;
         let cataloguePromise = this.catalogueService.find(this.catalogueService.getDefaultSearchOptions());
         let prefPromise = this.prefService.find(this.prefService.getDefaultSearchOptions());
@@ -93,7 +98,7 @@ export class StampReplacementTable {
 
         this._editSubscribers = [];
         this._modelSubscribers = [];
-        this._modelSubscribers.push(this.bindingEngine.propertyObserver(this, 'editingRow').subscribe(this.editingRowChanged.bind(this)));
+        this._modelSubscribers.push(this.bindingEngine.propertyObserver(this.model, 'editingRow').subscribe(this.editingRowChanged.bind(this)));
     }
 
     _processCatalogues(results) {
@@ -105,64 +110,67 @@ export class StampReplacementTable {
         this.thumbnailPath = LocationHelper.resolvePath(path, defaultImagePath);
     }
 
-    detached( ) {
+    detached() {
         this._modelSubscribers.forEach(sub => {
             sub.dispose();
         });
         this._clearEditSubscribers();
     }
 
 
-
-    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);
+    filterStamps() {
+        this.filteredStamps = [];
+        this.model.editCount = 0;
+        this.model.editingRow = -1;
+        //_.debounce(() => {
+        _.each(this.stamps, stamp => {
+            let index = _.findIndex(stamp.catalogueNumbers, (_cn) => {
+                return _cn.catalogueRef === this.model.filterCatalogueRef;
+            });
+            if (index > -1) {
+                let s = _.cloneDeep(stamp);
                 let cn = s.catalogueNumbers[index];
-                self._storeOriginalValues(cn);
-                cn.catalogueRef = self.model.replacementCatalogueRef;
+                this._storeOriginalValues(cn);
+                cn.catalogueRef = this.model.replacementCatalogueRef;
                 cn.replacing = true;
-                self.filteredStamps.push( s );
+                this.filteredStamps.push(s);
             }
         });
-        if( this.filteredStamps.length > 0 ) {
-            _.debounce(() => {
-                this.editingRow = 0;
-            })();
+        if (this.filteredStamps.length > 0) {
+            this.model.editingRow = 0;
         }
+        // })();
+
     }
 
     select($index) {
-        this.editingRow = $index;
+        this.model.editingRow = $index;
     }
 
     getCurrencyCode(cn) {
-        if( cn ) {
-            if( !cn.currencyCode ) {
-                cn.currencyCode = _.find( this.catalogues, { id: cn.catalogueRef }).code;
+        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});
+        return _.find(stamp.catalogueNumbers, {replacing: true});
     }
 
     @computedFrom('model.filterCatalogueRef', 'model.replacementCatalogueRef')
     get filterReady() {
-        return ( this.model.filterCatalogueRef >= 0 && this.model.replacementCatalogueRef >= 0 );
+        return (this.model.filterCatalogueRef >= 0 && this.model.replacementCatalogueRef >= 0);
     }
 
 
     getImagePath(stamp) {
         let path = '';
-        if( !stamp.wantList && !_.isEmpty(stamp.stampOwnerships && _.first(stamp.stampOwnerships).img)) {
+        if (!stamp.wantList && !_.isEmpty(stamp.stampOwnerships && _.first(stamp.stampOwnerships).img)) {
             let img = _.first(stamp.stampOwnerships).img;
-            if( img && img !== '' ) {
+            if (img && img !== '') {
                 var index = img.lastIndexOf('/');
                 img = img.substring(0, index + 1) + "thumb-" + img.substring(index + 1);
                 path = this.thumbnailPath + img;
@@ -184,24 +192,30 @@ export class StampReplacementTable {
     }
 
     advanceToNextRow($event) {
-        if( $event.keyCode === KeyCodes.VK_TAB && this.editingRow < this.filteredStamps.length - 2) {
-            this.select(this.editingRow + 1);
+        if ($event.keyCode === KeyCodes.VK_TAB && this.model.editingRow < this.filteredStamps.length - 1) {
+            this.select(this.model.editingRow + 1);
             return false;
         }
         return true;
     }
 
     saveAll() {
-        let modified = _.filter(this.filteredStamps, { __modified__: true});
+        let modified = _.filter(this.filteredStamps, {__modified__: true});
         let savePromises = [];
         _.each(modified, (stamp) => {
             savePromises.push(this.stampsService.save(stamp));
         });
         Promise.all(savePromises).then(result => {
-            if( result ) {
+            if (result) {
                 _.each(result, s => { //eslint-disable-line no-unused-vars
-                    this.filterStamps();
+                    let index = _.findIndex(this.stamps, (s2) => {
+                        return s2.id === s.id;
+                    });
+                    if (index > -1) {
+                        this.stamps[index] = s;
+                    }
                 });
+                this.filterStamps();
             }
         });
     }
@@ -213,34 +227,38 @@ export class StampReplacementTable {
         this._editSubscribers.push(this.bindingEngine.propertyObserver(cn, 'condition').subscribe(this._checkForModifiedStamp.bind(this)));
     }
 
-    changeUnknown(stamp) {
-        let cn = this.getReplacementCatalogueNumber(stamp);
-        cn.unknown = (!cn.unknown && true);
-        this._checkForModifiedStamp(stamp, cn);
+    changeUnknown() {
+        _.defer(() => {
+            if (this.model.editingRow > -1) {
+                let stamp = this.filteredStamps[this.model.editingRow];
+                let cn = this.getReplacementCatalogueNumber(stamp);
+                cn.unknown = (!cn.unknown && true);
+                this._checkForModifiedStamp();
+            }
+        });
+
     }
 
-     _clearEditSubscribers() {
-        if( this._editSubscribers ) {
+    _clearEditSubscribers() {
+        if (this._editSubscribers) {
             this._editSubscribers.forEach(sub => {
                 sub.dispose();
             });
         }
         this._editSubscribers = [];
     }
 
-    _checkForModifiedStamp(stamp, cn) {
-        if( !stamp ) {
-            stamp = this.filteredStamps[this.editingRow];
-        }
-        if( !cn) {
-            cn = this.getReplacementCatalogueNumber(stamp);
+    _checkForModifiedStamp() {
+        if (this.model.editingRow < 0) {
+            return;
         }
+        let stamp = this.filteredStamps[this.model.editingRow];
+        let cn = this.getReplacementCatalogueNumber(stamp);
         let currentModified = stamp.__modified__;
         let modified = this._markedAsModified(stamp, cn);
-        if( modified !== currentModified ) {
-            this.editCount += (modified) ? 1 : -1;
+        if (modified !== currentModified) {
+            this.model.editCount += (modified) ? 1 : -1;
         }
-
     }
 
     _storeOriginalValues(cn) {
@@ -254,20 +272,19 @@ export class StampReplacementTable {
     }
 
     _markedAsModified(stamp, cn) {
-        stamp.__modified__ = ( cn.__orig__.number !== cn.number ||
+        stamp.__modified__ = (cn.__orig__.number !== cn.number ||
             cn.__orig__.condition !== cn.condition ||
             cn.__orig__.value !== cn.value ||
-            cn.__orig__.unknown !== cn.unknown );
-        return (stamp.__modified__ );
+            cn.__orig__.unknown !== cn.unknown);
+        return (stamp.__modified__);
     }
 
     setAsModified(stamp) {
         stamp.__modified__ = true;
-        this.editCount++;
+        this.model.editCount++;
     }
 
 
-
 }
 
 /**

diff --git a/src/resources/elements/stamps/stamp-replacement-table.scss b/src/resources/elements/stamps/stamp-replacement-table.scss
@@ -150,10 +150,10 @@ stamp-replacement-table {
             position:      absolute;
             top:           50%;
             transform:     translate(0, -50%);
-            //            line-height: calc(4rem - #{2 * $theme-padding-thin});
             padding-right: $theme-padding-thick;
             font-size:     $theme-font-size-sm;
-            .badge {
+
+            label + span:first-of-type {
                 margin-right: $theme-margin-base;
             }
         }