[PLA-1762] form fixes (#107)

enjin · May 13, 2024 · dd58f21 · dd58f21
1 parent 49edaff
commit dd58f21
Show file tree

Hide file tree

Showing 26 changed files with 104 additions and 44 deletions.
diff --git a/config/enjin-platform-ui.php b/config/enjin-platform-ui.php
@@ -16,6 +16,7 @@
         'settings',
         'login',
         'register',
+        'marketplace',
         'forgot-password',
         'reset-password',
     ],

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -55,6 +55,7 @@
         "easymde": "^2.18.0",
         "eslint-plugin-import": "^2.27.5",
         "eventemitter3": "^5.0.0",
+        "lodash": "^4.17.21",
         "marked": "^12.0.1",
         "pinia": "^2.1.4",
         "pinia-plugin-persistedstate": "^3.1.0",

diff --git a/resources/js/components/FormSelect.vue b/resources/js/components/FormSelect.vue
@@ -19,6 +19,7 @@
                     >
                         <ComboboxInput
                             class="w-full py-2.5 pl-3 pr-10 text-sm leading-5 border-0 text-light-content-strong dark:text-dark-content-strong ring-1 ring-inset ring-light-stroke-strong dark:ring-dark-stroke-strong placeholder:text-light-content placeholder:dark:text-dark-content focus:ring-2 focus:ring-inset focus:ring-primary rounded-md transition-all disabled:bg-dark-surface-background/10 disabled:dark:bg-light-surface-background/10 bg-light-surface-background dark:bg-dark-surface-background"
+                            autocomplete="off"
                             @change="query = $event.target.value"
                             @click="openSelect"
                         />
@@ -99,10 +100,10 @@ import { useAppStore } from '~/store';
 
 const props = withDefaults(
     defineProps<{
+        modelValue: string | number | undefined;
         label?: string;
         description?: string;
         options: string[];
-        modelValue: string | number;
         name: string;
         required?: boolean;
         tooltip?: string;

diff --git a/resources/js/components/batch/forms/BatchMintForm.vue b/resources/js/components/batch/forms/BatchMintForm.vue
@@ -260,7 +260,7 @@ const mintTypes = [
     },
 ];
 const formRef: Ref<typeof Form | undefined> = ref();
-const account = ref(publicKeyToAddress(props.modelValue.account ?? '') ?? '');
+const account = ref(publicKeyToAddress(props.modelValue.account!)!);
 const createTokenId: Ref<TokenIdType> = ref(
     parseFormatedTokenId(props.modelValue.createParams?.tokenId ?? null) ?? {
         tokenId: '',
@@ -277,7 +277,7 @@ const initialSupply = ref(props.modelValue.createParams?.initialSupply ?? 1);
 const capAmount = ref(props.modelValue.createParams?.cap?.amount ?? undefined);
 const mintAmount = ref(props.modelValue.mintParams?.amount ?? 1);
 const isCurrency = ref(props.modelValue.createParams?.behavior?.isCurrency ?? false);
-const beneficiaryAddress = ref(props.modelValue.createParams?.behavior?.hasRoyalty?.beneficiary ?? '');
+const beneficiaryAddress = ref(props.modelValue.createParams?.behavior?.hasRoyalty?.beneficiary!);
 const beneficiaryPercentage = ref(props.modelValue.createParams?.behavior?.hasRoyalty?.percentage ?? 0);
 const listingForbidden = ref(props.modelValue.createParams?.listingForbidden ?? false);
 

diff --git a/resources/js/components/batch/forms/BatchTransferForm.vue b/resources/js/components/batch/forms/BatchTransferForm.vue
@@ -149,7 +149,7 @@ const transferTypes = [
     },
 ];
 const formRef = ref();
-const account = ref(publicKeyToAddress(props.modelValue.account ?? '') ?? '');
+const account = ref(publicKeyToAddress(props.modelValue.account!)!);
 const simpleTokenId = ref(
     parseFormatedTokenId(props.modelValue.simpleParams?.tokenId ?? null) ?? {
         tokenId: '',
@@ -166,7 +166,7 @@ const simpleAmount = ref(props.modelValue.simpleParams?.amount ?? 1);
 const operatorAmount = ref(props.modelValue.operatorParams?.amount ?? 1);
 const simpleKeepAlive = ref(props.modelValue.simpleParams?.keepAlive ?? false);
 const operatorKeepAlive = ref(props.modelValue.operatorParams?.keepAlive ?? false);
-const operatorSource = ref(props.modelValue.operatorParams?.source ?? '');
+const operatorSource = ref(props.modelValue.operatorParams?.source!);
 
 const validForm = computed(() => formRef.value.getMeta().valid);
 

diff --git a/resources/js/components/fueltank/DispatchRuleForm.vue b/resources/js/components/fueltank/DispatchRuleForm.vue
@@ -22,6 +22,10 @@
                             class="ml-1 w-4 h-4 cursor-pointer text-light-content dark:text-dark-content"
                         />
                     </Tooltip>
+                    <span v-if="required" class="text-red-500">&nbsp;*</span>
+                </div>
+                <div v-if="required && error" class="!my-0">
+                    <p class="text-red-500 text-sm">At least one rule is required</p>
                 </div>
                 <FormInput
                     v-if="props.ruleId"
@@ -36,7 +40,6 @@
                         v-model="selectedDispatchRule"
                         :options="availableDispatchRules"
                         label="Choose a dispatch rule"
-                        description=""
                         name="selectedDispatchRule"
                         class="flex-1"
                     />
@@ -288,13 +291,13 @@ import { ref, computed, watch, Ref } from 'vue';
 import { Form } from 'vee-validate';
 import * as yup from 'yup';
 import FormInput from '~/components/FormInput.vue';
-import { currencySymbolByNetwork, formatData, formatPriceToENJ, formatToken, parseFormatedTokenId } from '~/util';
+import { currencySymbolByNetwork, formatData, formatPriceToENJ, parseFormatedTokenId } from '~/util';
 import { TokenIdSelectType, TransactionMethods, DispatchRules } from '~/types/types.enums';
 import TokenIdInput from '~/components/TokenIdInput.vue';
 import FormList from '../FormList.vue';
 import { formatWhitelistedCallers, formatWhitelistedCollections } from '~/util';
 import { DispatchRulesValuesInterface } from '~/types/types.interface';
-import { numberNotRequiredSchema, stringNotRequiredSchema } from '~/util/schemas';
+import { addressNotRequiredSchema, numberNotRequiredSchema, stringNotRequiredSchema } from '~/util/schemas';
 import { useAppStore } from '~/store';
 import FormSelect from '../FormSelect.vue';
 import { PlusIcon } from '@heroicons/vue/20/solid';
@@ -310,6 +313,8 @@ const props = withDefaults(
         modelValue: DispatchRulesValuesInterface;
         isModal?: boolean;
         ruleId?: number;
+        required?: boolean;
+        error?: boolean;
     }>(),
     {
         isModal: false,
@@ -318,7 +323,7 @@ const props = withDefaults(
 
 const formRef = ref();
 const whitelistedCallers = ref(formatWhitelistedCallers(props.modelValue.whitelistedCallers) ?? [{ caller: '' }]);
-const collectionId = ref(props.modelValue.requireToken?.collectionId ?? '');
+const collectionId = ref(props.modelValue.requireToken?.collectionId!);
 const tokenId = ref(
     parseFormatedTokenId(props.modelValue.requireToken?.tokenId ?? null) ?? {
         tokenId: '',
@@ -349,12 +354,16 @@ const currencySymbol = computed(() => currencySymbolByNetwork(useAppStore().conf
 const validation = yup.object({
     whitelistedCallers: yup.array().of(
         yup.object({
-            caller: yup.string(),
+            caller: addressNotRequiredSchema,
         })
     ),
     collectionId: stringNotRequiredSchema,
     tokenId: stringNotRequiredSchema,
-    whitelistedCollections: stringNotRequiredSchema,
+    whitelistedCollections: yup.array().of(
+        yup.object({
+            collection: numberNotRequiredSchema,
+        })
+    ),
     maxFuelBurnPerTransaction: numberNotRequiredSchema.typeError('Max Fuel Burn Per Transaction must be a number'),
     userFuelAmount: numberNotRequiredSchema.typeError('User Fuel Amount must be a number'),
     userFuelresetPeriod: numberNotRequiredSchema.typeError('User Fuel Reset Period must be a number'),
@@ -405,27 +414,59 @@ const checkSelectedDispatchRule = (rule: DispatchRules) => {
 const removeSelectedDispatch = (rule: DispatchRules) => {
     const index = selectedDispatchRules.value.indexOf(rule);
     if (index > -1) {
+        clearSelectedDispatchRule(rule);
         selectedDispatchRules.value.splice(index, 1);
     }
 };
 
+const clearSelectedDispatchRule = (rule: DispatchRules) => {
+    switch (rule) {
+        case DispatchRules.WhitelistedCallers:
+            whitelistedCallers.value = [{ caller: '' }];
+            break;
+        case DispatchRules.RequireToken:
+            collectionId.value = '';
+            tokenId.value = { tokenId: '', tokenType: TokenIdSelectType.Integer };
+            break;
+        case DispatchRules.WhitelistedCollections:
+            whitelistedCollections.value = [{ collection: '' }];
+            break;
+        case DispatchRules.MaxFuelBurnPerTransaction:
+            maxFuelBurnPerTransaction.value = null;
+            break;
+        case DispatchRules.PermittedExtrinsic:
+            permittedExtrinsics.value = [];
+            break;
+        case DispatchRules.UserFuelBudget:
+            userFuelAmount.value = null;
+            userFuelresetPeriod.value = null;
+            break;
+        case DispatchRules.TankFuelBudget:
+            tankFuelAmount.value = null;
+            tankFuelresetPeriod.value = null;
+            break;
+    }
+};
+
 const hasChanged = computed(() =>
     formatData({
-        whitelistedCallers: whitelistedCallers.value.map((item: any) => item.caller),
-        requireToken: {
+        whitelistedCallers: whitelistedCallers.value.map((item: any) => item.caller).filter((item: string) => item),
+        requireToken: formatData({
             collectionId: collectionId.value,
-            tokenId: formatToken(tokenId.value),
-        },
-        whitelistedCollections: whitelistedCollections.value.map((item: any) => item.collection),
+            tokenId: tokenId.value.tokenId,
+        }),
+        whitelistedCollections: whitelistedCollections.value
+            .map((item: any) => item.collection)
+            .filter((item: number) => item),
         maxFuelBurnPerTransaction: maxFuelBurnPerTransaction.value,
-        userFuelBudget: {
+        userFuelBudget: formatData({
             amount: formatPriceToENJ(userFuelAmount.value),
             resetPeriod: userFuelresetPeriod.value,
-        },
-        tankFuelBudget: {
+        }),
+        tankFuelBudget: formatData({
             amount: formatPriceToENJ(tankFuelAmount.value),
             resetPeriod: tankFuelresetPeriod.value,
-        },
+        }),
         permittedExtrinsics: permittedExtrinsics.value,
     })
 );

diff --git a/resources/js/components/slideovers/beam/ClaimBeamSlideover.vue b/resources/js/components/slideovers/beam/ClaimBeamSlideover.vue
@@ -56,7 +56,7 @@ const props = withDefaults(
 const qrCodeRef = ref();
 
 const copyLink = () => {
-    navigator.clipboard.writeText(props.item?.qr.payload ?? '');
+    navigator.clipboard.writeText(props.item?.qr.payload!);
     snackbar.info({ title: 'Link copied to clipboard!' });
 };
 

diff --git a/resources/js/components/slideovers/beam/UpdateBeamSlideover.vue b/resources/js/components/slideovers/beam/UpdateBeamSlideover.vue
@@ -138,11 +138,11 @@ const checkChanges = () => {
         description: description.value !== props.item?.description ? description.value : null,
         image: image.value !== props.item?.image ? image.value : null,
         start:
-            new Date(start.value).toString() !== new Date(props.item?.start ?? '').toString()
+            new Date(start.value).toString() !== new Date(props.item?.start!).toString()
                 ? new Date(start.value).toString()
                 : null,
         end:
-            new Date(end.value).toString() !== new Date(props.item?.end ?? '').toString()
+            new Date(end.value).toString() !== new Date(props.item?.end!).toString()
                 ? new Date(end.value).toString()
                 : null,
         flags:

diff --git a/resources/js/components/slideovers/common/DetailsTransactionSlideover.vue b/resources/js/components/slideovers/common/DetailsTransactionSlideover.vue
@@ -277,7 +277,7 @@ const getTransaction = async () => {
         }
 
         isLoading.value = true;
-        const res = await TransactionApi.getTransaction(props.item?.id ?? '');
+        const res = await TransactionApi.getTransaction(props.item?.id!);
         transaction.value = DTOTransactionFactory.forTransaction(res);
         if (transaction.value.state === TransactionState.FINALIZED) {
             emit('update', transaction.value);

diff --git a/resources/js/components/slideovers/common/FreezeSlideover.vue b/resources/js/components/slideovers/common/FreezeSlideover.vue
@@ -130,7 +130,7 @@ const collectionId = ref(props.item?.collectionId);
 const freezeType = ref(props.item?.freezeType ?? FreezeType.COLLECTION);
 const tokenId = ref({
     tokenType: TokenIdSelectType.Integer,
-    tokenId: props.item?.tokenId ?? '',
+    tokenId: props.item?.tokenId!,
 });
 const collectionAccount = ref('');
 const freezeState = ref(FreezeStateType.TEMPORARY);

diff --git a/resources/js/components/slideovers/common/ThawSlideover.vue b/resources/js/components/slideovers/common/ThawSlideover.vue
@@ -120,7 +120,7 @@ const collectionId = ref(props.item?.collectionId);
 const freezeType = ref(props.item?.freezeType ?? FreezeType.COLLECTION);
 const tokenId = ref({
     tokenType: TokenIdSelectType.Integer,
-    tokenId: props.item?.tokenId ?? '',
+    tokenId: props.item?.tokenId!,
 });
 const collectionAccount = ref('');
 const tokenAccount = ref('');

diff --git a/resources/js/components/slideovers/fueltank/AccountsFuelTankSlideover.vue b/resources/js/components/slideovers/fueltank/AccountsFuelTankSlideover.vue
@@ -212,7 +212,7 @@ const accounts: Ref<{
     items: [],
     cursor: null,
 });
-const tankId = ref(props.item?.tankId ?? '');
+const tankId = ref(props.item?.tankId!);
 const idempotencyKey = ref('');
 const formRef = ref();
 const paginatorRef = ref();
@@ -321,7 +321,7 @@ const closeSlide = () => {
 
 const getAccounts = async () => {
     try {
-        const res = await FuelTankApi.getAccounts(addressToPublicKey(tankId.value) ?? '');
+        const res = await FuelTankApi.getAccounts(addressToPublicKey(tankId.value)!);
         accounts.value = DTOFactory.forAccounts(res);
     } catch (e) {
         // Do nothing

diff --git a/resources/js/components/slideovers/fueltank/ConsumptionFuelTankSlideover.vue b/resources/js/components/slideovers/fueltank/ConsumptionFuelTankSlideover.vue
@@ -126,7 +126,7 @@ const setConsumption = async () => {
         isLoading.value = true;
         const res = await FuelTankApi.setConsumption(
             formatData({
-                tankId: addressToPublicKey(tankId.value ?? ''),
+                tankId: addressToPublicKey(tankId.value!),
                 ruleSetId: ruleSetId.value,
                 userId: userId.value,
                 totalConsumed: totalConsumed.value,

diff --git a/resources/js/components/slideovers/fueltank/DispatchFuelTankSlideover.vue b/resources/js/components/slideovers/fueltank/DispatchFuelTankSlideover.vue
@@ -25,6 +25,7 @@
                             name="ruleSetId"
                             label="Rule Set ID"
                             description="The rule set index."
+                            type="number"
                             required
                         />
                         <FormSelect
@@ -40,6 +41,7 @@
                             name="query"
                             label="Query"
                             description="The GraphQL query. It's required to query the 'id' and 'encodedData' from the result."
+                            required
                         />
                         <FormList
                             v-model="variables"
@@ -172,7 +174,7 @@ const validation = yup.object({
     tankId: stringRequiredSchema,
     ruleSetId: stringRequiredSchema,
     call: stringRequiredSchema,
-    query: stringNotRequiredSchema,
+    query: stringRequiredSchema,
     variables: yup.array().of(
         yup.object({
             key: stringNotRequiredSchema,
@@ -200,7 +202,7 @@ const dispatchFuelTank = async () => {
         isLoading.value = true;
         const res = await FuelTankApi.dispatch(
             formatData({
-                tankId: addressToPublicKey(tankId.value ?? ''),
+                tankId: addressToPublicKey(tankId.value!),
                 ruleSetId: ruleSetId.value,
                 dispatch: {
                     call: call.value,

diff --git a/resources/js/components/slideovers/fueltank/FreezeFuelTankSlideover.vue b/resources/js/components/slideovers/fueltank/FreezeFuelTankSlideover.vue
@@ -110,7 +110,7 @@ const freezeFuelTank = async () => {
         isLoading.value = true;
         const res = await FuelTankApi.scheduleMutateFreezeState(
             formatData({
-                tankId: addressToPublicKey(tankId.value ?? ''),
+                tankId: addressToPublicKey(tankId.value!),
                 isFrozen: isFrozen.value,
                 ruleSetId: ruleSetId.value,
                 idempotencyKey: idempotencyKey.value,

diff --git a/resources/js/components/slideovers/fueltank/MutateFuelTankSlideover.vue b/resources/js/components/slideovers/fueltank/MutateFuelTankSlideover.vue
@@ -202,7 +202,7 @@ const mutateFuelTank = async () => {
         isLoading.value = true;
         const res = await FuelTankApi.mutateFuelTank(
             formatData({
-                tankId: addressToPublicKey(tankId.value ?? ''),
+                tankId: addressToPublicKey(tankId.value!),
                 mutation: {
                     providesDeposit: providesDeposit.value,
                     reservesExistentialDeposit: reservesExistentialDeposit.value,