Componentized a common control

src/components/ModifyWithConfirmation.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="box is-flex is-flex-direction-row is-justify-content-space-between">
+    <div class="my-auto">
+      <input type="checkbox" v-model="allow" :aria-label="props.inputs.checkbox.label">
+      {{ props.inputs.checkbox.label }}
+    </div>
+    <div>
+      <button :class="`button ${props.inputs.button.style}`"
+              :disabled="disable"
+              @click="modification">
+        {{ props.inputs.button.label }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  computed,
+  PropType,
+  ref,
+  watch,
+} from 'vue';
+
+type Modification = () => Promise<void>;
+
+export interface ModificationInputs {
+  checkbox: {
+    label: string,
+  },
+  button: {
+    label: string,
+    style: string,
+  },
+}
+
+// eslint-disable-next-line no-undef
+const emits = defineEmits(['confirmed']);
+
+// eslint-disable-next-line no-undef
+const props = defineProps({
+  inputs: Object as PropType<ModificationInputs>,
+  condition: Object as PropType<boolean | undefined>,
+  modification: Object as PropType<Modification>,
+});
+
+const allow = ref(false);
+
+const disable = computed(() => !allow.value || props.condition);
+
+const modTimeout = ref(undefined as number | undefined);
+watch(allow, () => {
+  emits('confirmed', allow.value);
+  if (modTimeout.value) window.clearTimeout(modTimeout.value);
+  modTimeout.value = window.setTimeout(() => {
+    allow.value = false;
+    modTimeout.value = undefined;
+  }, 10000);
+});
+</script>
+
+<style scoped lang="stylus">
+</style>

src/views/FundView.vue

@@ -155,21 +155,13 @@
         </table>
       </div>
       <div class="my-4" v-if="store.getters.getToken && hasPermission(Privileges.Admin)">
-        <div class="box is-flex is-flex-direction-row is-justify-content-space-between">
-          <div class="my-auto">
-            <label for="distribute-confirm" class="checkbox">
-              <input type="checkbox" id="distribute-confirm" v-model="allowDistribution">
-              Allow Distribution
-            </label>
-          </div>
-          <div>
-            <button class="button is-success"
-                    :disabled="!allowDistribution || selectedContributions.length === 0"
-                    @click="distributeFund">
-              Distribute Rewards
-            </button>
-          </div>
-        </div>
+        <ModifyWithConfirmation
+          :condition="selectedContributions.length === 0"
+          :inputs="{ button: { label: 'Distribute Rewards', style: 'is-success' },
+            checkbox: { label: 'Allow Distribution' }}"
+          :modification="distributeFund"
+          @confirmed="setAllowDistribution"
+        />
       </div>
     </section>
     <section class="section is-small px-0"
@@ -177,43 +169,23 @@
       <div class="title is-size-4 has-text-white-ter has-text-centered">
         Submit Group Fund
       </div>
-      <div class="box is-flex is-flex-direction-row is-justify-content-space-between">
-        <div class="my-auto">
-          <label class="checkbox" for="submit-confirm">
-            <input type="checkbox" id="submit-confirm" v-model="allowSubmit"> Allow Submit
-          </label>
-        </div>
-        <div>
-          <button
-            class="button is-success"
-            :disabled="!allowSubmit"
-            @click="submitFund"
-          >
-            Submit
-          </button>
-        </div>
-      </div>
+      <ModifyWithConfirmation
+        :inputs="{ button: { label: 'Submit Fund', style: 'is-success' },
+        checkbox: { label: 'Allow Submission' }}"
+        :modification="submitFund"
+        @confirmed="setAllowSubmit"
+      />
     </section>
     <section v-if="store.getters.getToken && hasPermission(Privileges.AdminPlus)">
       <div class="title is-size-4 has-text-white-ter has-text-centered">
         Close Group Fund
       </div>
-      <div class="box is-flex is-flex-direction-row is-justify-content-space-between">
-        <div class="my-auto">
-          <label class="checkbox" for="delete-confirm">
-            <input type="checkbox" id="delete-confirm" v-model="allowDelete"> Allow Close
-          </label>
-        </div>
-        <div>
-          <button
-            class="button is-danger"
-            :disabled="!allowDelete"
-            @click="deleteFund"
-          >
-            Close
-          </button>
-        </div>
-      </div>
+      <ModifyWithConfirmation
+        :inputs="{ button: { label: 'Close Fund', style: 'is-danger' },
+        checkbox: { label: 'Allow Closing' }}"
+        :modification="deleteFund"
+        @confirmed="setAllowDelete"
+      />
     </section>
   </div>
 </template>
@@ -258,6 +230,7 @@ import {
   submitRewardFund,
 } from '@/api/composed';
 import Decimal from 'decimal.js';
+import ModifyWithConfirmation from '@/components/ModifyWithConfirmation.vue';
 
 const route = useRoute();
 const router = useRouter();
@@ -437,23 +410,25 @@ const selectContribution = (contribution: SelectableContribution) => {
 };
 
 const allowDelete = ref(false);
+const allowDistribution = ref(false);
+const allowSubmit = ref(false);
+const setAllowDelete = (val: boolean) => {
+  allowDelete.value = val;
+};
+const setAllowDistribution = (val: boolean) => {
+  allowDistribution.value = val;
+};
+const setAllowSubmit = (val: boolean) => {
+  allowSubmit.value = val;
+};
+
 const deleteFund = async () => {
   const deleted = await deleteRewardFund(identifier, allowDelete.value);
   if (deleted && deleted.success) {
     await router.push('/');
   }
 };
-const delTimeout = ref(undefined as number | undefined);
-
-watch(allowDelete, () => {
-  if (delTimeout.value) window.clearTimeout(delTimeout.value);
-  delTimeout.value = window.setTimeout(() => {
-    allowDelete.value = false;
-    delTimeout.value = undefined;
-  }, 10000);
-});
 
-const allowDistribution = ref(false);
 const distributeFund = async () => {
   const distributed = await distributeRewardFund(
     identifier,
@@ -467,32 +442,13 @@ const distributeFund = async () => {
     console.log('distributed'); // TODO: provide feedback for distribution
   }
 };
-const distTimeout = ref(undefined as number | undefined);
-
-watch(allowDistribution, () => {
-  if (distTimeout.value) window.clearTimeout(distTimeout.value);
-  distTimeout.value = window.setTimeout(() => {
-    allowDistribution.value = false;
-    distTimeout.value = undefined;
-  }, 10000);
-});
 
-const allowSubmit = ref(false);
 const submitFund = async () => {
   const submitted = await submitRewardFund(identifier, allowSubmit.value);
   if (submitted && submitted.success) {
     console.log('submitted'); // TODO: provide feedback for submission
   }
 };
-const subTimeout = ref(undefined as number | undefined);
-
-watch(allowSubmit, () => {
-  if (subTimeout.value) window.clearTimeout(subTimeout.value);
-  subTimeout.value = window.setTimeout(() => {
-    allowSubmit.value = false;
-    subTimeout.value = undefined;
-  }, 10000);
-});
 
 const errs: SignetError[] = [
   {