Skip to content

Commit

Permalink
rule set fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@zlayine
zlayine committed Aug 16, 2023
1 parent 65bd985 commit 986a0f4
Show file tree
Hide file tree
Showing 5 changed files with 15 additions and 116 deletions.
2 changes: 1 addition & 1 deletion resources/js/components/FormSelect.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
class="relative w-full cursor-default overflow-hidden bg-white text-left text-sm leading-6 transition-all"
>
<ComboboxInput
:class="`w-full py-2 pl-3 pr-10 text-sm leading-5 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 rounded-md transition-all disabled:bg-gray-100 {inputClass}`"
:class="`w-full py-2.5 pl-3 pr-10 text-sm leading-5 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 rounded-md transition-all disabled:bg-gray-100 {inputClass}`"
@change="query = $event.target.value"
@click="openSelect"
/>
Expand Down
14 changes: 8 additions & 6 deletions resources/js/components/fueltank/DispatchRuleForm.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<Form ref="formRef" class="space-y-6" :validation-schema="validation">
<div class="bg-white px-4 py-5 sm:p-6 rounded-b-lg" :class="{ '!p-2': typeContent == 'modal' }">
<div :class="`md:grid md:grid-cols-${typeContent == 'modal' ? '1' : '3'} md:gap-6`">
<div class="bg-white px-4 py-5 sm:p-6 rounded-lg" :class="{ '!p-0 sm:p-0': isModal }">
<div :class="`md:grid md:grid-cols-${isModal ? '1' : '3'} md:gap-6`">
<div class="md:col-span-1">
<h3 class="text-base font-semibold leading-6 text-gray-900">Dispatch Rule</h3>
<p class="mt-1 text-sm text-gray-500">The fuel tank dispatch rules.</p>
Expand Down Expand Up @@ -44,7 +44,7 @@
The wallet account must have a specific token in their wallet to use the fuel tank.
</p>
</div>
<div :class="`grid grid-cols-${typeContent === 'modal' ? '1' : '2'} gap-4`">
<div :class="`grid grid-cols-${isModal ? '1' : '2'} gap-4`">
<FormInput
class="col-span-1"
v-model="collectionId"
Expand Down Expand Up @@ -138,7 +138,7 @@
/>
</div>
</div>
<div class="flex flex-col" v-if="typeContent === 'modal'">
<div v-if="canSave" class="flex flex-col">
<Btn primary @click="emit('close')"> Save </Btn>
</div>
</div>
Expand Down Expand Up @@ -167,10 +167,12 @@ const emit = defineEmits(['update:modelValue', 'validation', 'close']);
const props = withDefaults(
defineProps<{
modelValue: DispatchRulesValuesInterface;
typeContent?: 'form' | 'modal';
isModal?: boolean;
canSave?: boolean;
}>(),
{
typeContent: 'form',
canSave: true,
isModal: false,
}
);
Expand Down
56 changes: 2 additions & 54 deletions resources/js/components/slideovers/fueltank/MutateFuelTankSlideover.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,36 +80,6 @@
/>
<TokenIdInput class="flex-1" v-model="tokenId" placeholder="Token ID" />
</div>
<Btn class="!flex" @click="addItem" primary>Add Dispatch Rule</Btn>
<div class="flex flex-col space-y-4" v-if="dispatchRules.length">
<CardToModal
v-for="(item, idx) in dispatchRules"
:key="idx"
class="animate-fade-in"
:title="`Dispatch Rule ${idx + 1}`"
>
<template #icon>
<CheckCircleIcon
v-if="item.valid"
class="ml-2 my-auto h-5 w-5 text-green-400"
aria-hidden="true"
/>
<XCircleIcon v-else class="ml-2 my-auto h-5 w-5 text-red-400" aria-hidden="true" />
</template>
<template #actions>
<XMarkIcon class="h-5 w-5 cursor-pointer" @click="removeItem(idx)" />
</template>

<template v-slot="{ close }">
<DispatchRuleForm
v-model="item.values"
@validation="setValidation(idx, $event)"
typeContent="modal"
@close="close"
/>
</template>
</CardToModal>
</div>
<FormInput
v-if="useAppStore().advanced"
v-model="idempotencyKey"
Expand All @@ -133,7 +103,7 @@
<script setup lang="ts">
import { Form } from 'vee-validate';
import * as yup from 'yup';
import { Ref, computed, ref } from 'vue';
import { computed, ref } from 'vue';
import FormInput from '~/components/FormInput.vue';
import FormCheckbox from '~/components/FormCheckbox.vue';
import Btn from '~/components/Btn.vue';
Expand All @@ -142,13 +112,9 @@ import { formatData, formatToken, snackbarErrors } from '~/util';
import { FuelTankApi } from '~/api/fueltank';
import TokenIdInput from '~/components/TokenIdInput.vue';
import { TokenIdSelectType } from '~/types/types.enums';
import CardToModal from '~/components/CardToModal.vue';
import { CheckCircleIcon, XCircleIcon } from '@heroicons/vue/24/outline';
import { XMarkIcon } from '@heroicons/vue/20/solid';
import DispatchRuleForm from '~/components/fueltank/DispatchRuleForm.vue';
import FormList from '~/components/FormList.vue';
import { addressToPublicKey } from '~/util/address';
import { DispatchRulesValuesInterface, TokenIdType } from '~/types/types.interface';
import { TokenIdType } from '~/types/types.interface';
import { useAppStore } from '~/store';
import FormSelect from '~/components/FormSelect.vue';
Expand All @@ -166,7 +132,6 @@ const props = withDefaults(
whitelistedCallers: { caller: string }[];
collectionId: string;
tokenId: TokenIdType;
dispatchRules: any[];
};
}>(),
{
Expand All @@ -185,23 +150,11 @@ const tokenId = ref({
tokenId: '',
tokenType: TokenIdSelectType.Integer,
});
const dispatchRules: Ref<{ valid: boolean; values: DispatchRulesValuesInterface }[]> = ref([]);
const idempotencyKey = ref('');
const formRef = ref();
const collectionIds = computed(() => appStore.collections);
const addItem = () => {
dispatchRules.value.push({
valid: false,
values: {},
});
};
const removeItem = (index: number) => {
dispatchRules.value.splice(index, 1);
};
const addCaller = () => {
whitelistedCallers.value.push({ caller: '' });
};
Expand All @@ -210,10 +163,6 @@ const removeCaller = (index: number) => {
whitelistedCallers.value.splice(index, 1);
};
const setValidation = (index: number, isValid: boolean) => {
dispatchRules.value[index].valid = isValid;
};
const validation = yup.object({
tankId: yup.string().required(),
providesDeposit: yup.boolean().required(),
Expand Down Expand Up @@ -247,7 +196,6 @@ const mutateFuelTank = async () => {
}
: null,
},
dispatchRules: dispatchRules.value.map((item: any) => item.values),
},
idempotencyKey: idempotencyKey.value,
})
Expand Down
57 changes: 3 additions & 54 deletions resources/js/components/slideovers/fueltank/RuleSetsFuelTankSlideover.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,40 +60,7 @@
readmore="Idempotency Key"
/>
<template v-if="actionType === 'add'">
<Btn class="!flex" @click="addItem" primary>Add Dispatch Rule</Btn>
<div class="flex flex-col space-y-4">
<CardToModal
v-for="(item, idx) in dispatchRules"
:key="idx"
class="animate-fade-in"
:title="`Dispatch Rule ${idx + 1}`"
>
<template #icon>
<CheckCircleIcon
v-if="item.valid"
class="ml-2 my-auto h-5 w-5 text-green-400"
aria-hidden="true"
/>
<XCircleIcon
v-else
class="ml-2 my-auto h-5 w-5 text-red-400"
aria-hidden="true"
/>
</template>
<template #actions>
<XMarkIcon class="h-5 w-5 cursor-pointer" @click="removeItem(idx)" />
</template>

<template v-slot="{ close }">
<DispatchRuleForm
v-model="item.values"
@validation="setValidation(idx, $event)"
typeContent="modal"
@close="close"
/>
</template>
</CardToModal>
</div>
<DispatchRuleForm v-model="dispatchRule" is-modal :can-save="false" />
</template>
</div>
</div>
Expand All @@ -118,10 +85,7 @@ import snackbar from '~/util/snackbar';
import { formatData, snackbarErrors } from '~/util';
import RadioGroupButton from '~/components/RadioGroupButton.vue';
import { FuelTankApi } from '~/api/fueltank';
import CardToModal from '~/components/CardToModal.vue';
import DispatchRuleForm from '~/components/fueltank/DispatchRuleForm.vue';
import { CheckCircleIcon, XCircleIcon } from '@heroicons/vue/24/outline';
import { XMarkIcon } from '@heroicons/vue/20/solid';
import { RuleType } from '~/types/types.enums';
import FormSelect from '~/components/FormSelect.vue';
import { addressToPublicKey } from '~/util/address';
Expand Down Expand Up @@ -151,7 +115,7 @@ const tankId = ref(props.item?.tankId);
const idempotencyKey = ref('');
const ruleSetId = ref('');
const formRef = ref();
const dispatchRules: Ref<{ valid: boolean; values: DispatchRulesValuesInterface }[]> = ref([]);
const dispatchRule: Ref<DispatchRulesValuesInterface> = ref({});
const userId = ref('');
const rule = ref('');
Expand All @@ -172,21 +136,6 @@ const actions = ref([
},
]);
const addItem = () => {
dispatchRules.value.push({
valid: false,
values: {},
});
};
const removeItem = (index: number) => {
dispatchRules.value.splice(index, 1);
};
const setValidation = (index: number, isValid: boolean) => {
dispatchRules.value[index].valid = isValid;
};
const validation = yup.object({
tankId: stringRequiredSchema,
ruleSetId: stringRequiredSchema,
Expand Down Expand Up @@ -226,7 +175,7 @@ const insertRule = async () => {
formatData({
tankId: addressToPublicKey(tankId.value ?? ''),
ruleSetId: ruleSetId.value,
dispatchRules: dispatchRules.value.map((d) => d.values),
dispatchRules: dispatchRule.value,
idempotencyKey: idempotencyKey.value,
})
);
Expand Down
2 changes: 1 addition & 1 deletion resources/js/graphql/mutation/fueltank/InsertRuleSet.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export default `mutation InsertRuleSet($tankId: String!, $ruleSetId: BigInt!, $dispatchRules: [DispatchRuleInputType!], $idempotencyKey: String) {
export default `mutation InsertRuleSet($tankId: String!, $ruleSetId: BigInt!, $dispatchRules: DispatchRuleInputType!, $idempotencyKey: String) {
InsertRuleSet(
tankId: $tankId
ruleSetId: $ruleSetId
Expand Down

0 comments on commit 986a0f4

Please sign in to comment.