ソースを参照

Componentized a common control

master
Jared 1年前
コミット
f5a6c6ffb6
2個のファイルの変更95行の追加76行の削除
  1. +63
    -0
      src/components/ModifyWithConfirmation.vue
  2. +32
    -76
      src/views/FundView.vue

+ 63
- 0
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>

+ 32
- 76
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[] = [
{


読み込み中…
キャンセル
保存