From 986a0f4dddedc8aad1289fc199101b5c62a7ae9b Mon Sep 17 00:00:00 2001
From: zlayine <zouheirlen@gmail.com>
Date: Wed, 16 Aug 2023 12:13:44 +0300
Subject: [PATCH] rule set fixes

---
 resources/js/components/FormSelect.vue        |  2 +-
 .../components/fueltank/DispatchRuleForm.vue  | 14 +++--
 .../fueltank/MutateFuelTankSlideover.vue      | 56 +-----------------
 .../fueltank/RuleSetsFuelTankSlideover.vue    | 57 +------------------
 .../mutation/fueltank/InsertRuleSet.ts        |  2 +-
 5 files changed, 15 insertions(+), 116 deletions(-)

diff --git a/resources/js/components/FormSelect.vue b/resources/js/components/FormSelect.vue
index 400d9fc..8bfb4b6 100644
--- a/resources/js/components/FormSelect.vue
+++ b/resources/js/components/FormSelect.vue
@@ -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"
                         />
diff --git a/resources/js/components/fueltank/DispatchRuleForm.vue b/resources/js/components/fueltank/DispatchRuleForm.vue
index a1accd4..8563f31 100644
--- a/resources/js/components/fueltank/DispatchRuleForm.vue
+++ b/resources/js/components/fueltank/DispatchRuleForm.vue
@@ -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>
@@ -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"
@@ -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>
@@ -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,
     }
 );
 
diff --git a/resources/js/components/slideovers/fueltank/MutateFuelTankSlideover.vue b/resources/js/components/slideovers/fueltank/MutateFuelTankSlideover.vue
index db8b10a..e72e202 100644
--- a/resources/js/components/slideovers/fueltank/MutateFuelTankSlideover.vue
+++ b/resources/js/components/slideovers/fueltank/MutateFuelTankSlideover.vue
@@ -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"
@@ -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';
@@ -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';
 
@@ -166,7 +132,6 @@ const props = withDefaults(
             whitelistedCallers: { caller: string }[];
             collectionId: string;
             tokenId: TokenIdType;
-            dispatchRules: any[];
         };
     }>(),
     {
@@ -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: '' });
 };
@@ -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(),
@@ -247,7 +196,6 @@ const mutateFuelTank = async () => {
                               }
                             : null,
                     },
-                    dispatchRules: dispatchRules.value.map((item: any) => item.values),
                 },
                 idempotencyKey: idempotencyKey.value,
             })
diff --git a/resources/js/components/slideovers/fueltank/RuleSetsFuelTankSlideover.vue b/resources/js/components/slideovers/fueltank/RuleSetsFuelTankSlideover.vue
index c04039d..5d73aaf 100644
--- a/resources/js/components/slideovers/fueltank/RuleSetsFuelTankSlideover.vue
+++ b/resources/js/components/slideovers/fueltank/RuleSetsFuelTankSlideover.vue
@@ -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>
@@ -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';
@@ -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('');
 
@@ -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,
@@ -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,
             })
         );
diff --git a/resources/js/graphql/mutation/fueltank/InsertRuleSet.ts b/resources/js/graphql/mutation/fueltank/InsertRuleSet.ts
index afe3624..42a8b91 100644
--- a/resources/js/graphql/mutation/fueltank/InsertRuleSet.ts
+++ b/resources/js/graphql/mutation/fueltank/InsertRuleSet.ts
@@ -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