85 lines
2.1 KiB
TypeScript
85 lines
2.1 KiB
TypeScript
|
import { defineComponent, Ref, ref } from 'vue';
|
||
|
|
import { logService } from '@jdbernard/logging';
|
||
|
|
import {
|
||
|
|
default as api,
|
||
|
|
EventProposalModel,
|
||
|
|
newEventProposal,
|
||
|
|
} from '@/api-client';
|
||
|
|
|
||
|
|
import {
|
||
|
|
CircleCheckIcon,
|
||
|
|
CircleCrossIcon,
|
||
|
|
HourGlassIcon,
|
||
|
|
SpinnerIcon,
|
||
|
|
} from '@/components/svg';
|
||
|
|
|
||
|
|
const logger = logService.getLogger('/propose-events');
|
||
|
|
|
||
|
|
type FormState =
|
||
|
|
| 'loading'
|
||
|
|
| 'ready'
|
||
|
|
| 'submitting'
|
||
|
|
| 'invalid'
|
||
|
|
| 'success'
|
||
|
|
| 'error';
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
name: 'TheProposeEventView',
|
||
|
|
props: {},
|
||
|
|
components: { CircleCheckIcon, CircleCrossIcon, HourGlassIcon, SpinnerIcon },
|
||
|
|
setup: function TheProposeEventView() {
|
||
|
|
const departments: Ref<{ value: string; color: string }[]> = ref([]);
|
||
|
|
const formState: Ref<FormState> = ref('loading');
|
||
|
|
|
||
|
|
setTimeout(async () => {
|
||
|
|
departments.value = (await api.getEventProposalConfig()).departments;
|
||
|
|
formState.value = 'ready';
|
||
|
|
});
|
||
|
|
|
||
|
|
const formVal = { event: newEventProposal() };
|
||
|
|
const successes: string[] = [];
|
||
|
|
const errors: string[] = [];
|
||
|
|
|
||
|
|
function validateEvent(ev: EventProposalModel): boolean {
|
||
|
|
return (
|
||
|
|
!!ev.name &&
|
||
|
|
!!ev.description &&
|
||
|
|
!!ev.purpose &&
|
||
|
|
!!ev.department &&
|
||
|
|
!!ev.location &&
|
||
|
|
!!ev.owner
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
async function proposeEvent(): Promise<void> {
|
||
|
|
if (!validateEvent(formVal.event)) {
|
||
|
|
formState.value = 'invalid';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
formState.value = 'submitting';
|
||
|
|
logger.trace({ formState: formState.value });
|
||
|
|
if (await api.proposeEvent(formVal.event)) {
|
||
|
|
formState.value = 'success';
|
||
|
|
successes.push(
|
||
|
|
`We've recorded the proposed details for ${formVal.event.name}.`
|
||
|
|
);
|
||
|
|
} else {
|
||
|
|
formState.value = 'error';
|
||
|
|
errors.push(
|
||
|
|
'We were unable to record the proposed details for ' +
|
||
|
|
formVal.event.name +
|
||
|
|
". Poke Jonathan and tell him it's broken."
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
formVal.event = newEventProposal();
|
||
|
|
formState.value = 'ready';
|
||
|
|
}, 5000);
|
||
|
|
}
|
||
|
|
|
||
|
|
return { departments, errors, formState, formVal, successes, proposeEvent };
|
||
|
|
},
|
||
|
|
});
|