[PLA-1480] fix negative number (#66)

enjin · Dec 12, 2023 · 3fe4c34 · 3fe4c34
1 parent 70712de
commit 3fe4c34
Show file tree

Hide file tree

Showing 16 changed files with 198 additions and 28 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,10 +3,11 @@
     "scripts": {
         "serve": "vite",
         "serve-laravel": "vite -c vite.config.laravel.ts",
+        "vue-tsc": "vue-tsc",
         "dev": "vite build --mode staging",
         "dev-laravel": "vite build -c vite.config.laravel.ts --mode staging",
-        "prod": "vite build",
-        "prod-laravel": "vite build -c vite.config.laravel.ts",
+        "prod": "vue-tsc && vite build",
+        "prod-laravel": "vue-tsc && vite build -c vite.config.laravel.ts",
         "lint": "eslint ./resources/js --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore --cache",
         "lint:fix": "eslint ./resources/js --ext.vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore --fix --cache",
         "pretty:check": "prettier --check ./resources/js",
@@ -64,6 +65,7 @@
         "vue": "^3.3.4",
         "vue-loader": "^17.2.2",
         "vue-router": "^4.2.2",
+        "vue-tsc": "^1.8.25",
         "vue3-popper": "^1.5.0",
         "yup": "^1.0.2"
     }

diff --git a/resources/js/components/FormInput.vue b/resources/js/components/FormInput.vue
@@ -37,7 +37,8 @@
                             `block flex-1 flex-shrink-0 border-0 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary text-sm leading-6 overflow-hidden transition-all disabled:bg-gray-100 ${inputClass}`,
                         ]"
                         :placeholder="placeholder"
-                        @input="emit('inputChange', $event)"
+                        oninput="validity.valid||(value=value.replace(/\D+/g, ''))"
+                        @input="inputChange"
                         @keyup.enter="emit('submit')"
                         @focusout="hasFocus && emit('submit')"
                     />
@@ -94,6 +95,10 @@ const props = withDefaults(
 
 const emit = defineEmits(['update:modelValue', 'inputChange', 'submit']);
 
+const inputChange = (e: Event) => {
+    emit('inputChange', e);
+};
+
 const localModelValue = computed({
     get() {
         return props.modelValue;
@@ -105,3 +110,12 @@ const localModelValue = computed({
     },
 });
 </script>
+<style scoped>
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    margin: 0;
+}
+</style>
diff --git a/resources/js/components/FormSelect.vue b/resources/js/components/FormSelect.vue
@@ -30,7 +30,7 @@
                         @after-leave="query = ''"
                     >
                         <ComboboxOptions
-                            class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm z-30"
+                            class="absolute mt-1 max-h-60 overflow-auto rounded-md bg-white text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm z-30 py-1 w-full"
                         >
                             <div
                                 v-if="filteredOptions.length === 0 && query !== ''"

diff --git a/resources/js/components/batch/forms/BatchMintForm.vue b/resources/js/components/batch/forms/BatchMintForm.vue
@@ -171,7 +171,6 @@
                                 name="mintUnitPrice"
                                 label="Unit Price"
                                 description="Leave as null if you want to keep the same unitPrice. You can also put a value if you want to change the unitPrice. Please note you can only increase it and a deposit to the difference of every token previously minted will also be needed."
-                                type="number"
                                 :prefix="currencySymbol"
                             />
                         </div>

diff --git a/resources/js/components/fueltank/DispatchRuleForm.vue b/resources/js/components/fueltank/DispatchRuleForm.vue
@@ -51,6 +51,7 @@
                                     class="col-span-1"
                                     v-model="collectionId"
                                     name="collectionId"
+                                    type="number"
                                     placeholder="Collection ID"
                                 />
                                 <TokenIdInput class="col-span-1" v-model="tokenId" placeholder="Token ID" />
@@ -79,11 +80,11 @@
                             </template>
                             <template #inputs="{ inputs, index }">
                                 <div class="flex-1">
-                                    <input
+                                    <FormInput
                                         v-model="inputs.collection"
-                                        :dusk="`input__collection-id-${index + 1}`"
+                                        :name="`collection-${index + 1}`"
                                         type="number"
-                                        class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6"
+                                        :dusk="`input__collection-id-${index + 1}`"
                                     />
                                 </div>
                             </template>

diff --git a/resources/js/components/pages/Collections.vue b/resources/js/components/pages/Collections.vue
@@ -7,6 +7,7 @@
                         <div class="relative rounded-md shadow-sm">
                             <FormInput
                                 v-model="searchInput"
+                                type="number"
                                 name="searchInput"
                                 label="Collection ID"
                                 placeholder="Search by collection ID"
@@ -218,11 +219,6 @@ const getCollection = async () => {
         collections.value = DTOFactory.forCollection(res);
     } catch (e) {
         collections.value.items = [];
-        if (snackbarErrors(e)) return;
-        snackbar.error({
-            title: 'Collection',
-            text: 'Error while fetching collection',
-        });
     } finally {
         isLoading.value = false;
     }

diff --git a/resources/js/components/pages/Tokens.vue b/resources/js/components/pages/Tokens.vue
@@ -10,6 +10,7 @@
                                     v-model="searchCollectionInput"
                                     name="searchInput"
                                     label="Collection ID"
+                                    type="number"
                                     placeholder="Search by collection ID"
                                     @input-change="searchCollectionChange"
                                 />

diff --git a/resources/js/components/pages/create/CreateCollection.vue b/resources/js/components/pages/create/CreateCollection.vue
@@ -118,12 +118,12 @@
                         </template>
                         <template #inputs="{ inputs, index }">
                             <div class="flex-1">
-                                <input
-                                    v-model="inputs.collectionId"
-                                    :dusk="`input__collection-id-${index + 1}`"
-                                    type="number"
-                                    class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6"
-                                />
+                                <FormInput
+                                        v-model="inputs.collectionId"
+                                        type="number"
+                                        :name="`collection-${index + 1}`"
+                                        :dusk="`input__collection-id-${index + 1}`"
+                                    />
                             </div>
                             <div class="flex-1">
                                 <TokenIdInput

diff --git a/resources/js/components/pages/create/CreateFuelTank.vue b/resources/js/components/pages/create/CreateFuelTank.vue
@@ -103,6 +103,7 @@
                                         class="col-span-1"
                                         v-model="collectionId"
                                         name="collectionId"
+                                        type="number"
                                         placeholder="Collection ID"
                                     />
                                     <TokenIdInput class="col-span-1" v-model="tokenId" placeholder="Token ID" />

diff --git a/resources/js/components/pages/create/CreateListing.vue b/resources/js/components/pages/create/CreateListing.vue
@@ -71,6 +71,7 @@
                                             v-model="takeCollectionId"
                                             name="takeCollectionId"
                                             placeholder="Collection ID"
+                                            type="number"
                                         />
                                         <TokenIdInput
                                             class="col-span-1"

diff --git a/resources/js/components/pages/create/CreateToken.vue b/resources/js/components/pages/create/CreateToken.vue
@@ -54,7 +54,6 @@
                                     name="unitPrice"
                                     label="Unit Price"
                                     description="Leave as null if you want to keep the same unitPrice. You can also put a value if you want to change the unitPrice. Please note you can only increase it and a deposit to the difference of every token previously minted will also be needed."
-                                    type="number"
                                     :prefix="currencySymbol"
                                     required
                                     tooltip="The backing of the token necessary for it to exist in the blockchain, not to be mistaken by the reserve value, once the token is burned, the Unit Price returns to the creator and not the holder."
@@ -288,6 +287,7 @@ const validation = yup.object({
     tokenId: stringRequiredSchema,
     recipient: addressRequiredSchema,
     initialSupply: numberRequiredSchema.typeError('Initial Supply must be a number').min(1),
+    unitPrice: numberRequiredSchema.typeError('Unit Price must be a number').min(0),
     capType: stringRequiredSchema,
     capAmount: yup.number().when('capType', {
         is: TokenCapType.SUPPLY,

diff --git a/resources/js/components/slideovers/common/DetailsTransactionSlideover.vue b/resources/js/components/slideovers/common/DetailsTransactionSlideover.vue
@@ -170,7 +170,6 @@ import { ref, computed, watch } from 'vue';
 import { TransactionApi } from '~/api/transaction';
 import Address from '~/components/Address.vue';
 import Btn from '~/components/Btn.vue';
-import CopyTextIcon from '~/components/CopyTextIcon.vue';
 import LoadingCircle from '~/components/LoadingCircle.vue';
 import SignTransaction from '~/components/SignTransaction.vue';
 import TransactionResultChip from '~/components/TransactionResultChip.vue';