fix: formatted supply amount component added, supply format issues fixed

src/components/SupplyAmount/SupplyAmount.vue

@@ -0,0 +1,15 @@
+<template>
+    <FormRow>
+        <template v-slot:label> {{ $t(label) }}: </template>
+        <template v-slot:inputs>
+            <div class="display-value">
+                {{ relativeValue }}
+            </div>
+        </template>
+    </FormRow>
+</template>
+
+<script lang="ts">
+import { SupplyAmountTs } from './SupplyAmountTs';
+export default class SupplyAmount extends SupplyAmountTs {}
+</script>

src/components/SupplyAmount/SupplyAmountTs.ts

@@ -0,0 +1,51 @@
+/*
+ * Copyright 2020 NEM (https://nem.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and limitations under the License.
+ *
+ */
+// @ts-ignore
+import FormRow from '@/components/FormRow/FormRow.vue';
+import { Formatters } from '@/core/utils/Formatters';
+// child components
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+@Component({
+    components: {
+        FormRow,
+    },
+})
+export class SupplyAmountTs extends Vue {
+    /**
+     * Supply Absolute Value
+     * @type {number}
+     */
+    @Prop({ default: 0 }) supply: number;
+
+    /**
+     * Divisibility Value
+     * @type {number}
+     */
+    @Prop({ default: 0 }) divisibility: number;
+
+    /**
+     * Form label
+     * @type {string}
+     */
+    @Prop({ default: 'supply' }) label: string;
+
+    /// region computed properties getter/setter
+    public get relativeValue(): string {
+        return Formatters.formatNumber(this.supply / Math.pow(10, this.divisibility), this.divisibility);
+    }
+    /// end-region computed properties getter/setter
+}

src/components/SupplyInput/SupplyInputTs.ts

@@ -43,7 +43,7 @@ export class SupplyInputTs extends Vue {
      * Form label
      * @type {string}
      */
-    @Prop({ default: 'supply' }) label: string;
+    @Prop({ default: 'supply_absolute' }) label: string;
 
     /**
      * Validation rules

src/components/TableRow/TableRowTs.ts

@@ -135,11 +135,6 @@ export class TableRowTs extends Vue {
     protected get visibleRowValues() {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const { hiddenData, ...visible } = this.rowValues;
-        if (this.$route.fullPath === '/mosaicList') {
-            visible.supply = (visible.supply.replace(/\D/g, '') / Math.pow(10, visible.divisibility))
-                .toString()
-                .replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-        }
         return visible;
     }
 }

src/core/utils/Formatters.ts

@@ -17,17 +17,17 @@ import { Address } from 'symbol-sdk';
 import { decode } from 'utf8';
 
 export class Formatters {
-    public static formatNumber = (number: number): string => {
+    public static formatNumber = (number: number, fractionDigits = 0): string => {
         if (number <= 1) {
             return `${number}`;
         }
         if (number === Number(number.toFixed(0))) {
-            return number.toLocaleString('en-US', { minimumFractionDigits: 0 });
+            return number.toLocaleString('en-US', { minimumFractionDigits: fractionDigits });
         }
 
         const stringOfNumber = `${number}`;
         const minimumFractionDigits = stringOfNumber.length - stringOfNumber.indexOf('.') - 1;
-        return number.toLocaleString('en-US', { minimumFractionDigits });
+        return number.toLocaleString('en-US', { minimumFractionDigits: fractionDigits || minimumFractionDigits });
     };
 
     public static formatAddress = function (address: string): string {

src/services/AssetTableService/MosaicTableService.ts

@@ -18,6 +18,7 @@ import { AssetTableService, TableField } from './AssetTableService';
 import { MosaicModel } from '@/core/database/entities/MosaicModel';
 import { MosaicService } from '@/services/MosaicService';
 import { NetworkConfigurationModel } from '@/core/database/entities/NetworkConfigurationModel';
+import { Formatters } from '@/core/utils/Formatters';
 
 export class MosaicTableService extends AssetTableService {
     constructor(
@@ -65,7 +66,7 @@ export class MosaicTableService extends AssetTableService {
                 return {
                     hexId: mosaicInfo.mosaicIdHex,
                     name: mosaicInfo.name || 'N/A',
-                    supply: mosaicInfo.supply.toLocaleString(),
+                    supply: Formatters.formatNumber(mosaicInfo.supply / Math.pow(10, mosaicInfo.divisibility), mosaicInfo.divisibility),
                     balance: (mosaicInfo.balance || 0) / Math.pow(10, mosaicInfo.divisibility),
                     expiration: expiration,
                     divisibility: mosaicInfo.divisibility,

src/views/forms/FormMosaicDefinitionTransaction/FormMosaicDefinitionTransaction.vue

@@ -9,6 +9,8 @@
 
                 <DivisibilityInput v-model="formItems.divisibility" />
 
+                <SupplyAmount v-if="!isAggregate" :supply="formItems.supply" :divisibility="formItems.divisibility" />
+
                 <DurationInput
                     v-show="!formItems.permanent"
                     v-model="formItems.duration"

src/views/forms/FormMosaicDefinitionTransaction/FormMosaicDefinitionTransactionTs.ts

@@ -38,6 +38,8 @@ import SupplyInput from '@/components/SupplyInput/SupplyInput.vue';
 // @ts-ignore
 import DivisibilityInput from '@/components/DivisibilityInput/DivisibilityInput.vue';
 // @ts-ignore
+import SupplyAmount from '@/components/SupplyAmount/SupplyAmount.vue';
+// @ts-ignore
 import DurationInput from '@/components/DurationInput/DurationInput.vue';
 // @ts-ignore
 import ModalTransactionConfirmation from '@/views/modals/ModalTransactionConfirmation/ModalTransactionConfirmation.vue';
@@ -56,6 +58,7 @@ import RentalFee from '@/components/RentalFees/RentalFee.vue';
         SignerSelector,
         SupplyInput,
         DivisibilityInput,
+        SupplyAmount,
         DurationInput,
         ModalTransactionConfirmation,
         MaxFeeAndSubmit,

src/views/forms/FormMosaicSupplyChangeTransaction/FormMosaicSupplyChangeTransactionTs.ts

@@ -43,6 +43,7 @@ import MaxFeeAndSubmit from '@/components/MaxFeeAndSubmit/MaxFeeAndSubmit.vue';
 import { MosaicModel } from '@/core/database/entities/MosaicModel';
 // @ts-ignore
 import MosaicSelector from '@/components/MosaicSelector/MosaicSelector.vue';
+import { Formatters } from '@/core/utils/Formatters';
 
 @Component({
     components: {
@@ -146,7 +147,7 @@ export class FormMosaicSupplyChangeTransactionTs extends FormTransactionBase {
             return;
         }
         const relative = currentMosaicInfo.supply / Math.pow(10, currentMosaicInfo.divisibility);
-        return isNaN(relative) ? null : relative.toLocaleString();
+        return isNaN(relative) ? null : Formatters.formatNumber(relative, this.currentMosaicInfo.divisibility);
     }
 
     /**
@@ -179,7 +180,7 @@ export class FormMosaicSupplyChangeTransactionTs extends FormTransactionBase {
             return;
         }
         const relative = this.newMosaicAbsoluteSupply / Math.pow(10, this.currentMosaicInfo.divisibility);
-        return isNaN(relative) ? null : relative.toLocaleString();
+        return isNaN(relative) ? null : Formatters.formatNumber(relative, this.currentMosaicInfo.divisibility);
     }
 
     /**