fchat-rising/site/character_page/copy_custom_dialog.vue

71 lines
3.0 KiB
Vue

<template>
<modal id="copyCustomDialog" action="Copy Custom Kink" :disabled="!valid || submitting" @submit.prevent="copyCustom()">
<form-group field="name" :errors="formErrors" label="Name" id="copyCustomName">
<input type="text" class="form-control" maxlength="30" required v-model="name" slot-scope="props" id="copyCustomName"
:class="props.cls"/>
</form-group>
<form-group field="description" :errors="formErrors" label="Description" id="copyCustomDescription">
<input type="text" class="form-control" max-length="250" v-model="description" required id="copyCustomDescription"
slot-scope="props" :class="props.cls"/>
</form-group>
<form-group field="choice" :errors="formErrors" label="Choice" id="copyCustomChoice">
<select v-model="choice" class="form-control" slot-scope="props" :class="props.cls" id="copyCustomChoice">
<option value="favorite">Favorite</option>
<option value="yes">Yes</option>
<option value="maybe">Maybe</option>
<option value="no">No</option>
</select>
</form-group>
<form-group field="target" :errors="formErrors" label="Target Character" id="copyCustomTarget">
<character-select v-model="target" slot-scope="props" :class="props.cls" id="copyCustomTarget"></character-select>
</form-group>
</modal>
</template>
<script lang="ts">
import {Component} from '@f-list/vue-ts';
import CustomDialog from '../../components/custom_dialog';
import FormGroup from '../../components/form_group.vue';
import Modal from '../../components/Modal.vue';
import {KinkChoice} from '../../interfaces';
import * as Utils from '../utils';
import {methods} from './data_store';
@Component({
components: {'form-group': FormGroup, modal: Modal}
})
export default class CopyCustomDialog extends CustomDialog {
name = '';
description = '';
choice: KinkChoice = 'favorite';
target = Utils.settings.defaultCharacter;
formErrors = {};
submitting = false;
showDialog(name: string, description: string): void {
this.name = name;
this.description = description;
this.show();
}
async copyCustom(): Promise<void> {
try {
this.formErrors = {};
this.submitting = true;
await methods.characterCustomKinkAdd(this.target, this.name, this.description, this.choice);
this.submitting = false;
this.hide();
} catch(e) {
this.submitting = false;
if(Utils.isJSONError(e))
this.formErrors = e.response.data;
else
Utils.ajaxError(e, 'Unable to copy custom kink');
}
}
get valid(): boolean {
return this.name.length > 0 && this.description.length > 0;
}
}
</script>