started fixing veevalidate (migrating to v3)
This commit is contained in:
8
package-lock.json
generated
8
package-lock.json
generated
@@ -1157,6 +1157,14 @@
|
||||
"@fortawesome/fontawesome-common-types": "^0.2.30"
|
||||
}
|
||||
},
|
||||
"@fortawesome/free-regular-svg-icons": {
|
||||
"version": "5.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.14.0.tgz",
|
||||
"integrity": "sha512-6LCFvjGSMPoUQbn3NVlgiG4CY5iIY8fOm+to/D6QS/GvdqhDt+xZklQeERdCvVRbnFa1ITc1rJHPRXqkX5wztQ==",
|
||||
"requires": {
|
||||
"@fortawesome/fontawesome-common-types": "^0.2.30"
|
||||
}
|
||||
},
|
||||
"@fortawesome/free-solid-svg-icons": {
|
||||
"version": "5.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.14.0.tgz",
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.30",
|
||||
"@fortawesome/free-brands-svg-icons": "^5.14.0",
|
||||
"@fortawesome/free-regular-svg-icons": "^5.14.0",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.14.0",
|
||||
"@fortawesome/vue-fontawesome": "^0.1.10",
|
||||
"@vue/cli": "^4.4.6",
|
||||
|
||||
@@ -5,12 +5,25 @@
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<div class="clearfix">
|
||||
<b-img left style="margin-right: 20px;" src="https://picsum.photos/125/125/?image=58"
|
||||
<b-img left style="margin-right: 20px;" src="https://picsum.photos/160/160/?image=58"
|
||||
alt="Left image"></b-img>
|
||||
<h2 class="title" v-if="profile.nickname">{{ profile.nickname }}</h2>
|
||||
<h2 class="title" v-if="profile.nickname">
|
||||
{{ profile.nickname }}
|
||||
</h2>
|
||||
<h2 class="title" v-else-if="profile.first_name">
|
||||
{{ profile.first_name }} {{ profile.last_name }}</h2>
|
||||
<h2 class="title" v-else>{{ profile.email }}</h2>
|
||||
{{ profile.first_name }} {{ profile.last_name }}
|
||||
</h2>
|
||||
<h2 class="title" v-else>
|
||||
{{ profile.email }}
|
||||
</h2>
|
||||
|
||||
<p>
|
||||
<font-awesome-icon icon="id-badge"/>
|
||||
<span v-b-tooltip.hover :title="$t('external user')" v-if="profile.external_user"> {{ profile.external_user_id }}
|
||||
(<font-awesome-icon :icon="['fab', 'openid']" />)</span>
|
||||
<span v-b-tooltip.hover :title="$t('internal user')" v-else> {{ profile.id }}
|
||||
(<font-awesome-icon :icon="['far', 'dot-circle']"/>)</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<font-awesome-icon icon="envelope"/> {{ profile.email }}
|
||||
@@ -26,28 +39,23 @@
|
||||
<font-awesome-icon icon="pencil-alt"/>
|
||||
</a>
|
||||
</p>
|
||||
<b-input-group style="max-width: 50%;" v-else size="sm">
|
||||
<ValidationProvider v-slot="v" rules="required" v-else>
|
||||
<b-input-group style="max-width: 50%;" size="sm">
|
||||
|
||||
<b-form-input name="nickname"
|
||||
v-model="form.nickname"
|
||||
class="form-control" type="text"
|
||||
:placeholder="$t('set_your_nickname') + ' ('+profile.nickname +')'"></b-form-input>
|
||||
<b-input-group-append>
|
||||
<b-button :disabled="errors.has('nickname')"
|
||||
<b-button :disabled="v.errors.length > 0"
|
||||
@click="updateProfile('nickname')"
|
||||
variant="outline-success">
|
||||
<font-awesome-icon icon="check"></font-awesome-icon>
|
||||
</b-button>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
</ValidationProvider>
|
||||
|
||||
<p v-if="profile.external_user">
|
||||
<span>&f19b;</span>
|
||||
<font-awesome-icon :icon="['fab', 'openid']"/> {{ $t('external user') }}
|
||||
|
||||
</p>
|
||||
<p v-else>
|
||||
<font-awesome-icon icon="pencil-alt"/> {{ $t('internal user') }}
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -89,8 +97,11 @@
|
||||
|
||||
<script>
|
||||
import {EventBus} from '@/utils';
|
||||
import {getRemainingJwtValiditySeconds} from '../utils';
|
||||
import {getRemainingJwtValiditySeconds} from '@/utils';
|
||||
import getRepository from '@/api/RepositoryFactory';
|
||||
//import { extend } from 'vee-validate';
|
||||
import '@/validation';
|
||||
|
||||
|
||||
const userRepository = getRepository('user');
|
||||
|
||||
|
||||
@@ -1,487 +1,511 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<section class="section">
|
||||
|
||||
|
||||
<h1 class="title">{{ $t('Manage_rooms') }}</h1>
|
||||
<p class="lead">
|
||||
{{ $t('List_create_and_delete') }} <strong>{{ $t('rooms') }}</strong>
|
||||
</p>
|
||||
<br/>
|
||||
<h1 class="title">{{ $t('Manage_rooms') }}</h1>
|
||||
<p class="lead">
|
||||
{{ $t('List_create_and_delete') }} <strong>{{ $t('rooms') }}</strong>
|
||||
</p>
|
||||
<br/>
|
||||
|
||||
<b-tabs v-model="tabIndex" card>
|
||||
<b-tab title="Room list" active>
|
||||
<template slot="title">
|
||||
<font-awesome-icon icon="list"/> <font-awesome-icon icon="door-open"/>
|
||||
<strong>Room</strong> <i>list</i>
|
||||
</template>
|
||||
<div class="mt-3">
|
||||
<b-button-group>
|
||||
<b-button variant="success" @click="showAllRooms()">{{$t('All rooms')}}</b-button>
|
||||
<b-button variant="info" @click="showRoomsWithRecorder()">{{$t('Rooms with recorders')}}</b-button>
|
||||
<b-button variant="warning" @click="showRoomsWithoutRecorder()">{{$t('Rooms without recorders')}}</b-button>
|
||||
</b-button-group>
|
||||
</div>
|
||||
<p>{{ $tc('rooms_defined', rooms.length, {num: rooms.length})}}:</p>
|
||||
<b-card-group deck>
|
||||
<b-card class="mb-2" style="max-width: 30rem; min-width:20rem;" v-for="(room) in rooms"
|
||||
:header="room.name + ' (' +room.building_number+ ')'" v-bind:key="room.id">
|
||||
<b-card-text>
|
||||
<h5 class="card-title"><strong>{{ $t('name') }}</strong>:
|
||||
<span v-if="!formEditField[room.id+'_name']">{{room.name}}
|
||||
<b-tabs v-model="tabIndex" card>
|
||||
<b-tab title="Room list" active>
|
||||
<template slot="title">
|
||||
<font-awesome-icon icon="list"/> <font-awesome-icon icon="door-open"/>
|
||||
<strong>Room</strong> <i>list</i>
|
||||
</template>
|
||||
<div class="mt-3">
|
||||
<b-button-group>
|
||||
<b-button variant="success" @click="showAllRooms()">{{ $t('All rooms') }}</b-button>
|
||||
<b-button variant="info" @click="showRoomsWithRecorder()">{{ $t('Rooms with recorders') }}</b-button>
|
||||
<b-button variant="warning" @click="showRoomsWithoutRecorder()">{{ $t('Rooms without recorders') }}
|
||||
</b-button>
|
||||
</b-button-group>
|
||||
</div>
|
||||
<p>{{ $tc('rooms_defined', rooms.length, {num: rooms.length}) }}:</p>
|
||||
<b-card-group deck>
|
||||
<b-card class="mb-2" style="max-width: 30rem; min-width:20rem;" v-for="(room) in rooms"
|
||||
:header="room.name + ' (' +room.building_number+ ')'" v-bind:key="room.id">
|
||||
<b-card-text>
|
||||
<h5 class="card-title"><strong>{{ $t('name') }}</strong>:
|
||||
<span v-if="!formEditField[room.id+'_name']">{{ room.name }}
|
||||
<a class="float-right badge badge-pill badge-primary">
|
||||
<font-awesome-icon
|
||||
@click="initRoomUpdate(room, 'name')"
|
||||
icon="pencil-alt"/>
|
||||
@click="initRoomUpdate(room, 'name')"
|
||||
icon="pencil-alt"/>
|
||||
</a>
|
||||
</span>
|
||||
<b-input-group v-else>
|
||||
<b-form-input :id="room.id+'_name'" name="name"
|
||||
v-model="updateValues[room.id+'_name']"
|
||||
v-validate="'required|min:3'"
|
||||
v-bind:class="{'is-danger': errors.has('name'), 'is-invalid': errors.has('name')}"
|
||||
class="form-control" type="text"
|
||||
:placeholder="'Name ('+room.name +')'"
|
||||
required></b-form-input>
|
||||
<b-input-group-append>
|
||||
<b-button :disabled="errors.has('name')"
|
||||
@click="updateRoom(room.id, 'name')"
|
||||
variant="outline-success">
|
||||
<font-awesome-icon icon="check"></font-awesome-icon>
|
||||
</b-button>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
</h5>
|
||||
<b-input-group v-else>
|
||||
<ValidationProvider v-slot="{ errors }">
|
||||
<b-form-input :id="room.id+'_name'" name="name"
|
||||
v-model="updateValues[room.id+'_name']"
|
||||
v-validate="'required|min:3'"
|
||||
v-bind:class="{'is-danger': errors.has('name'), 'is-invalid': errors.has('name')}"
|
||||
class="form-control" type="text"
|
||||
:placeholder="'Name ('+room.name +')'"
|
||||
required></b-form-input>
|
||||
<b-input-group-append>
|
||||
<b-button :disabled="errors.has('name')"
|
||||
@click="updateRoom(room.id, 'name')"
|
||||
variant="outline-success">
|
||||
<font-awesome-icon icon="check"></font-awesome-icon>
|
||||
</b-button>
|
||||
</b-input-group-append>
|
||||
</ValidationProvider>
|
||||
</b-input-group>
|
||||
</h5>
|
||||
|
||||
|
||||
<p class="card-text"><strong>{{ $t('building_number') }}</strong>:
|
||||
<span v-if="!formEditField[room.id+'_building_number']">{{room.building_number}}
|
||||
<p class="card-text"><strong>{{ $t('building_number') }}</strong>:
|
||||
<span v-if="!formEditField[room.id+'_building_number']">{{ room.building_number }}
|
||||
<a class="float-right badge badge-pill badge-primary">
|
||||
<font-awesome-icon
|
||||
@click="initRoomUpdate(room, 'building_number')"
|
||||
icon="pencil-alt"/>
|
||||
@click="initRoomUpdate(room, 'building_number')"
|
||||
icon="pencil-alt"/>
|
||||
</a>
|
||||
</span>
|
||||
<b-input-group v-else>
|
||||
<b-form-input :id="room.id+'_building_number'" name="building_number"
|
||||
v-model="updateValues[room.id+'_building_number']"
|
||||
v-validate="'required|min:3'"
|
||||
v-bind:class="{'is-danger': errors.has('building_number'), 'is-invalid': errors.has('building_number')}"
|
||||
class="form-control" type="text"
|
||||
:placeholder="$t('Building_number') +'('+room.building_number +')'"
|
||||
required></b-form-input>
|
||||
<b-input-group-append>
|
||||
<b-button :disabled="errors.has('building_number')"
|
||||
@click="updateRoom(room.id, 'building_number')"
|
||||
variant="outline-success">
|
||||
<font-awesome-icon icon="check"></font-awesome-icon>
|
||||
</b-button>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
</p>
|
||||
<p class="card-text"><strong>{{ $t('building_name') }}</strong>:
|
||||
<span v-if="!formEditField[room.id+'_building_name']">{{room.building_name}}
|
||||
<b-input-group v-else>
|
||||
<ValidationProvider v-slot="{ errors }">
|
||||
<b-form-input :id="room.id+'_building_number'" name="building_number"
|
||||
v-model="updateValues[room.id+'_building_number']"
|
||||
v-validate="'required|min:3'"
|
||||
v-bind:class="{'is-danger': errors.has('building_number'), 'is-invalid': errors.has('building_number')}"
|
||||
class="form-control" type="text"
|
||||
:placeholder="$t('Building_number') +'('+room.building_number +')'"
|
||||
required></b-form-input>
|
||||
<b-input-group-append>
|
||||
<b-button :disabled="errors.has('building_number')"
|
||||
@click="updateRoom(room.id, 'building_number')"
|
||||
variant="outline-success">
|
||||
<font-awesome-icon icon="check"></font-awesome-icon>
|
||||
</b-button>
|
||||
</b-input-group-append>
|
||||
</ValidationProvider>
|
||||
</b-input-group>
|
||||
</p>
|
||||
<p class="card-text"><strong>{{ $t('building_name') }}</strong>:
|
||||
<span v-if="!formEditField[room.id+'_building_name']">{{ room.building_name }}
|
||||
<a class="float-right badge badge-pill badge-primary">
|
||||
<font-awesome-icon
|
||||
@click="initRoomUpdate(room, 'building_name')"
|
||||
icon="pencil-alt"/>
|
||||
@click="initRoomUpdate(room, 'building_name')"
|
||||
icon="pencil-alt"/>
|
||||
</a>
|
||||
</span>
|
||||
<b-input-group v-else>
|
||||
<b-form-input :id="room.id+'_building_name'" name="building_name"
|
||||
v-model="updateValues[room.id+'_building_name']"
|
||||
v-validate="'required|min:3'"
|
||||
v-bind:class="{'is-danger': errors.has('building_name'), 'is-invalid': errors.has('building_name')}"
|
||||
class="form-control" type="text"
|
||||
:placeholder="'Building name ('+room.building_name +')'"
|
||||
required></b-form-input>
|
||||
<b-input-group-append>
|
||||
<b-button :disabled="errors.has('building_name')"
|
||||
@click="updateRoom(room.id, 'building_name')"
|
||||
variant="outline-success">
|
||||
<font-awesome-icon icon="check"></font-awesome-icon>
|
||||
</b-button>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
</p>
|
||||
<b-input-group v-else>
|
||||
<ValidationProvider v-slot="{ errors }">
|
||||
<b-form-input :id="room.id+'_building_name'" name="building_name"
|
||||
v-model="updateValues[room.id+'_building_name']"
|
||||
v-validate="'required|min:3'"
|
||||
v-bind:class="{'is-danger': errors.has('building_name'), 'is-invalid': errors.has('building_name')}"
|
||||
class="form-control" type="text"
|
||||
:placeholder="'Building name ('+room.building_name +')'"
|
||||
required></b-form-input>
|
||||
<b-input-group-append>
|
||||
<b-button :disabled="errors.has('building_name')"
|
||||
@click="updateRoom(room.id, 'building_name')"
|
||||
variant="outline-success">
|
||||
<font-awesome-icon icon="check"></font-awesome-icon>
|
||||
</b-button>
|
||||
</b-input-group-append>
|
||||
</ValidationProvider>
|
||||
</b-input-group>
|
||||
</p>
|
||||
|
||||
|
||||
<p class="card-text"><strong>{{ $t('alternate_name') }}:</strong>
|
||||
<span v-if="!formEditField[room.id+'_alternate_name']">{{room.alternate_name}}
|
||||
<p class="card-text"><strong>{{ $t('alternate_name') }}:</strong>
|
||||
<span v-if="!formEditField[room.id+'_alternate_name']">{{ room.alternate_name }}
|
||||
<a class="float-right badge badge-pill badge-info">
|
||||
<font-awesome-icon
|
||||
@click="initRoomUpdate(room, 'alternate_name')"
|
||||
icon="pencil-alt"/>
|
||||
@click="initRoomUpdate(room, 'alternate_name')"
|
||||
icon="pencil-alt"/>
|
||||
</a>
|
||||
</span>
|
||||
<b-input-group v-else size="sm">
|
||||
<b-form-input name="alternate_name"
|
||||
v-model="updateValues[room.id+'_alternate_name']"
|
||||
class="form-control" type="text"
|
||||
:placeholder="'Alternate name ('+room.alternate_name +')'"
|
||||
@blur="updateRoom(room.id, 'alternate_name')"
|
||||
@keyup.enter="updateRoom(room.id, 'alternate_name')"></b-form-input>
|
||||
<b-input-group-append>
|
||||
<b-button :disabled="errors.has('alternate_name')"
|
||||
@click="updateRoom(room.id, 'alternate_name')"
|
||||
variant="outline-success">
|
||||
<font-awesome-icon icon="check"></font-awesome-icon>
|
||||
</b-button>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
</p>
|
||||
<p class="card-text"><strong>{{ $t('room_number') }}:</strong>
|
||||
<span v-if="!formEditField[room.id+'_number']">{{room.number}}
|
||||
<b-input-group v-else size="sm">
|
||||
<ValidationProvider v-slot="{ errors }">
|
||||
<b-form-input name="alternate_name"
|
||||
v-model="updateValues[room.id+'_alternate_name']"
|
||||
class="form-control" type="text"
|
||||
:placeholder="'Alternate name ('+room.alternate_name +')'"
|
||||
@blur="updateRoom(room.id, 'alternate_name')"
|
||||
@keyup.enter="updateRoom(room.id, 'alternate_name')"></b-form-input>
|
||||
<b-input-group-append>
|
||||
<b-button :disabled="errors.has('alternate_name')"
|
||||
@click="updateRoom(room.id, 'alternate_name')"
|
||||
variant="outline-success">
|
||||
<font-awesome-icon icon="check"></font-awesome-icon>
|
||||
</b-button>
|
||||
</b-input-group-append>
|
||||
</ValidationProvider>
|
||||
</b-input-group>
|
||||
</p>
|
||||
<p class="card-text"><strong>{{ $t('room_number') }}:</strong>
|
||||
<span v-if="!formEditField[room.id+'_number']">{{ room.number }}
|
||||
<a class="float-right badge badge-pill badge-info">
|
||||
<font-awesome-icon
|
||||
@click="initRoomUpdate(room, 'number')"
|
||||
icon="pencil-alt"/>
|
||||
@click="initRoomUpdate(room, 'number')"
|
||||
icon="pencil-alt"/>
|
||||
</a>
|
||||
</span>
|
||||
<b-input-group v-else size="sm">
|
||||
<b-form-input name="number"
|
||||
v-model="updateValues[room.id+'_number']"
|
||||
v-validate="'required|min:3'"
|
||||
v-bind:class="{'is-danger': errors.has('name'), 'is-invalid': errors.has('name')}"
|
||||
class="form-control" type="text"
|
||||
:placeholder="'Room number ('+room.number +')'"
|
||||
@blur="updateRoom(room.id, 'number')"
|
||||
@keyup.enter="updateRoom(room.id, 'number')"
|
||||
required></b-form-input>
|
||||
<b-input-group-append>
|
||||
<b-button :disabled="errors.has('number')"
|
||||
@click="updateRoom(room.id, 'number')"
|
||||
variant="outline-success">
|
||||
<font-awesome-icon icon="check"></font-awesome-icon>
|
||||
</b-button>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
</p>
|
||||
<p class="card-text">
|
||||
<small><strong>{{ $t('comment') }}:</strong>
|
||||
<span v-if="!formEditField[room.id+'_comment']">{{room.comment}}
|
||||
<b-input-group v-else size="sm">
|
||||
<ValidationProvider v-slot="{ errors }">
|
||||
<b-form-input name="number"
|
||||
v-model="updateValues[room.id+'_number']"
|
||||
v-validate="'required|min:3'"
|
||||
v-bind:class="{'is-danger': errors.has('name'), 'is-invalid': errors.has('name')}"
|
||||
class="form-control" type="text"
|
||||
:placeholder="'Room number ('+room.number +')'"
|
||||
@blur="updateRoom(room.id, 'number')"
|
||||
@keyup.enter="updateRoom(room.id, 'number')"
|
||||
required></b-form-input>
|
||||
<b-input-group-append>
|
||||
<b-button :disabled="errors.has('number')"
|
||||
@click="updateRoom(room.id, 'number')"
|
||||
variant="outline-success">
|
||||
<font-awesome-icon icon="check"></font-awesome-icon>
|
||||
</b-button>
|
||||
</b-input-group-append>
|
||||
</ValidationProvider>
|
||||
</b-input-group>
|
||||
</p>
|
||||
<p class="card-text">
|
||||
<small><strong>{{ $t('comment') }}:</strong>
|
||||
<span v-if="!formEditField[room.id+'_comment']">{{ room.comment }}
|
||||
<a class="float-right badge badge-pill badge-info">
|
||||
<font-awesome-icon
|
||||
@click="initRoomUpdate(room, 'comment')"
|
||||
icon="pencil-alt"/>
|
||||
@click="initRoomUpdate(room, 'comment')"
|
||||
icon="pencil-alt"/>
|
||||
</a>
|
||||
</span>
|
||||
<textarea class="textarea form-control" v-else name="comment"
|
||||
v-model="updateValues[room.id+'_comment']"
|
||||
:placeholder="'Comment ('+room.comment +')'"
|
||||
@blur="updateRoom(room.id, 'comment')"></textarea>
|
||||
</small>
|
||||
</p>
|
||||
<hr/>
|
||||
<span v-if="!formEditField[room.id+'_recorder_id']">{{room.recorder_id}}
|
||||
<textarea class="textarea form-control" v-else name="comment"
|
||||
v-model="updateValues[room.id+'_comment']"
|
||||
:placeholder="'Comment ('+room.comment +')'"
|
||||
@blur="updateRoom(room.id, 'comment')"></textarea>
|
||||
</small>
|
||||
</p>
|
||||
<hr/>
|
||||
<span v-if="!formEditField[room.id+'_recorder_id']">{{ room.recorder_id }}
|
||||
<div v-if="room.recorder">
|
||||
<p class="card-text"><strong>{{ $t('Recorder') }}:</strong> {{room.recorder.name}}
|
||||
({{room.recorder.ip}}) / ({{room.recorder.network_name}})</p>
|
||||
<p class="card-text"><strong>{{
|
||||
$t('Recorder')
|
||||
}}:</strong> {{ room.recorder.name }}
|
||||
({{ room.recorder.ip }}) / ({{ room.recorder.network_name }})</p>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p class="card-text"><strong>{{ $t('Recorder') }}:</strong> {{
|
||||
$t('no_recorder_defined')}}</p>
|
||||
$t('no_recorder_defined')
|
||||
}}</p>
|
||||
</div>
|
||||
<a class="float-right badge badge-pill badge-info">
|
||||
<font-awesome-icon
|
||||
@click="initRoomUpdate(room, 'recorder_id')" icon="pencil-alt"/>
|
||||
@click="initRoomUpdate(room, 'recorder_id')" icon="pencil-alt"/>
|
||||
</a>
|
||||
</span>
|
||||
<b-form v-else>
|
||||
<b-input-group>
|
||||
<select class="form-control" v-model="updateValues[room.id+'_recorder_id']">
|
||||
<option value="">No recorder selected</option>
|
||||
<option v-for="recorder in recorders" v-bind:value="recorder.id">
|
||||
{{ recorder.name }}
|
||||
</option>
|
||||
</select>
|
||||
<b-input-group-append>
|
||||
<b-button :disabled="errors.has('recorder_id')"
|
||||
@click="updateRoom(room.id, 'recorder_id')"
|
||||
variant="outline-success">
|
||||
<font-awesome-icon icon="check"></font-awesome-icon>
|
||||
</b-button>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
<b-form v-else>
|
||||
<b-input-group>
|
||||
<ValidationProvider v-slot="{ errors }">
|
||||
<select class="form-control" v-model="updateValues[room.id+'_recorder_id']">
|
||||
<option value="">No recorder selected</option>
|
||||
<option v-for="recorder in recorders" v-bind:value="recorder.id">
|
||||
{{ recorder.name }}
|
||||
</option>
|
||||
</select>
|
||||
<b-input-group-append>
|
||||
<b-button :disabled="errors.has('recorder_id')"
|
||||
@click="updateRoom(room.id, 'recorder_id')"
|
||||
variant="outline-success">
|
||||
<font-awesome-icon icon="check"></font-awesome-icon>
|
||||
</b-button>
|
||||
</b-input-group-append>
|
||||
</ValidationProvider>
|
||||
</b-input-group>
|
||||
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox"
|
||||
v-model="show_assigned_recorders" id="defaultCheck1">
|
||||
<label class="form-check-label" for="defaultCheck1">
|
||||
Show already assigned recorders
|
||||
</label>
|
||||
</div>
|
||||
</b-form>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox"
|
||||
v-model="show_assigned_recorders" id="defaultCheck1">
|
||||
<label class="form-check-label" for="defaultCheck1">
|
||||
Show already assigned recorders
|
||||
</label>
|
||||
</div>
|
||||
</b-form>
|
||||
|
||||
</b-card-text>
|
||||
<div slot="footer">
|
||||
<small class="text-muted">
|
||||
<p>{{ $t('created')}}: {{room.created_at | moment("dddd, MMMM Do YYYY")}}
|
||||
<span class="pull-right">
|
||||
</b-card-text>
|
||||
<div slot="footer">
|
||||
<small class="text-muted">
|
||||
<p>{{ $t('created') }}: {{ room.created_at | moment("dddd, MMMM Do YYYY") }}
|
||||
<span class="pull-right">
|
||||
<button type="button" v-on:click="deleteRoom(room.id)"
|
||||
class="btn btn-sm btn-danger">{{
|
||||
$t('delete') }} <font-awesome-icon
|
||||
icon="trash"/>
|
||||
$t('delete')
|
||||
}} <font-awesome-icon
|
||||
icon="trash"/>
|
||||
</button>
|
||||
</span>
|
||||
</p>
|
||||
</small>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-card-group>
|
||||
</b-tab>
|
||||
</p>
|
||||
</small>
|
||||
</div>
|
||||
</b-card>
|
||||
</b-card-group>
|
||||
</b-tab>
|
||||
|
||||
<b-tab title="Create room">
|
||||
<template slot="title">
|
||||
<font-awesome-icon icon="plus"/>
|
||||
<i>{{$t('create')}}</i> <font-awesome-icon icon="door-open"/>
|
||||
<strong>{{$t('Room')}}</strong>
|
||||
</template>
|
||||
<b-card-text>
|
||||
<p>{{ $t('Create_a_new_room')}}:</p>
|
||||
<!-- form starts here -->
|
||||
<form v-on:submit.prevent="saveRoom()">
|
||||
<section class="form">
|
||||
<b-tab title="Create room">
|
||||
<template slot="title">
|
||||
<font-awesome-icon icon="plus"/>
|
||||
<i>{{ $t('create') }}</i> <font-awesome-icon icon="door-open"/>
|
||||
<strong>{{ $t('Room') }}</strong>
|
||||
</template>
|
||||
<b-card-text>
|
||||
<p>{{ $t('Create_a_new_room') }}:</p>
|
||||
<!-- form starts here -->
|
||||
<ValidationObserver v-slot="{ invalid }">
|
||||
<form v-on:submit.prevent="saveRoom()">
|
||||
<section class="form">
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="label required col-sm-2 col-form-label">{{ $t('name') }}</label>
|
||||
<div class="col-sm-6">
|
||||
<input name="name"
|
||||
v-model="form.name"
|
||||
v-validate="'required|min:3'"
|
||||
v-bind:class="{'is-danger': errors.has('name'), 'is-invalid': errors.has('name')}"
|
||||
class="form-control" type="text" placeholder="Room name" required>
|
||||
</div>
|
||||
<p class="col-sm-4" v-show="errors.has('name')">
|
||||
{{ errors.first('name') }}
|
||||
</p>
|
||||
</div>
|
||||
<ValidationProvider :name="$t('name')" rules="required|min:3" v-slot="{ errors }" slim>
|
||||
<div class="form-group row">
|
||||
<label class="label required col-sm-2 col-form-label">{{ $t('name') }}</label>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="label col-sm-2 col-form-label">{{ $t('alternate_name') }}</label>
|
||||
<div class="col-sm-6">
|
||||
<input name="alternate_name"
|
||||
v-model="form.alternate_name"
|
||||
class="form-control" type="text" placeholder="Alternate name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<input name="name"
|
||||
v-model="form.name"
|
||||
v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
|
||||
class="form-control" type="text" placeholder="Room name" required>
|
||||
</div>
|
||||
<p class="col-sm-4" v-show="errors.length > 0">
|
||||
{{ errors[0] }}
|
||||
</p>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="label required col-sm-2 col-form-label">{{ $t('number') }}</label>
|
||||
<div class="col-sm-6">
|
||||
<input name="number"
|
||||
v-model="form.number"
|
||||
v-validate="'required|min:3'"
|
||||
v-bind:class="{'is-danger': errors.has('number'), 'is-invalid': errors.has('number')}"
|
||||
class="form-control" type="text" placeholder="Room number" required>
|
||||
</div>
|
||||
<p class="col-sm-4" v-show="errors.has('number')">
|
||||
{{ errors.first('number') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</ValidationProvider>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="label col-sm-2 col-form-label">{{ $t('comment') }}</label>
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group row">
|
||||
<label class="label col-sm-2 col-form-label">{{ $t('alternate_name') }}</label>
|
||||
<div class="col-sm-6">
|
||||
<input name="alternate_name"
|
||||
v-model="form.alternate_name"
|
||||
class="form-control" type="text" placeholder="Alternate name">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ValidationProvider :name="$t('number')" rules="required|min:3" v-slot="{ errors }" slim>
|
||||
<div class="form-group row">
|
||||
<label class="label required col-sm-2 col-form-label">{{ $t('number') }}</label>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<input name="number"
|
||||
v-model="form.number"
|
||||
v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
|
||||
class="form-control" type="text" placeholder="Room number" required>
|
||||
</div>
|
||||
<p class="col-sm-4" v-show="errors.length > 0">
|
||||
{{ errors[0] }}
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</ValidationProvider>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="label col-sm-2 col-form-label">{{ $t('comment') }}</label>
|
||||
<div class="col-sm-6">
|
||||
<textarea class="textarea form-control"
|
||||
:placeholder="$t('Comments') +', ' + $t('notes') + ', etc.'"
|
||||
v-model="form.comment"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="label col-sm-2 col-form-label">{{ $t('recorder') }}</label>
|
||||
<div class="col-sm-6">
|
||||
<select class="form-control" v-model="form.recorder_id">
|
||||
<option value="">No recorder selected</option>
|
||||
<option v-for="recorder in recorders" v-bind:value="recorder.id">
|
||||
{{ recorder.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label class="label col-sm-2 col-form-label">{{ $t('recorder') }}</label>
|
||||
<div class="col-sm-6">
|
||||
<select class="form-control" v-model="form.recorder_id">
|
||||
<option value="">No recorder selected</option>
|
||||
<option v-for="recorder in recorders" v-bind:value="recorder.id">
|
||||
{{ recorder.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<button
|
||||
v-bind:disabled="errors.any()"
|
||||
type="submit"
|
||||
class="btn btn-primary">
|
||||
Create room
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<button
|
||||
v-bind:disabled="invalid"
|
||||
type="submit"
|
||||
class="btn btn-primary">
|
||||
Create room
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</form>
|
||||
</b-card-text>
|
||||
</b-tab>
|
||||
</b-tabs>
|
||||
</section>
|
||||
</section>
|
||||
</form>
|
||||
</ValidationObserver>
|
||||
</b-card-text>
|
||||
</b-tab>
|
||||
</b-tabs>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
<hr>
|
||||
|
||||
<div class="column">
|
||||
<section class="section" id="results">
|
||||
<div class="box">
|
||||
<ul>
|
||||
<!-- loop through all the `form` properties and show their values -->
|
||||
<li v-for="(item, k) in form">
|
||||
<strong>{{ k }}:</strong> {{ item }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<div class="column">
|
||||
<section class="section" id="results">
|
||||
<div class="box">
|
||||
<ul>
|
||||
<!-- loop through all the `form` properties and show their values -->
|
||||
<li v-for="(item, k) in form">
|
||||
<strong>{{ k }}:</strong> {{ item }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<section class="section">
|
||||
{{rooms}}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<section class="section">
|
||||
{{ rooms }}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {EventBus} from '@/utils';
|
||||
import PulseLoader from 'vue-spinner/src/PulseLoader.vue';
|
||||
import getRepository from '@/api/RepositoryFactory';
|
||||
import {EventBus} from '@/utils';
|
||||
import PulseLoader from 'vue-spinner/src/PulseLoader.vue';
|
||||
import getRepository from '@/api/RepositoryFactory';
|
||||
|
||||
const RoomRepository = getRepository('room');
|
||||
const RoomRepository = getRepository('room');
|
||||
|
||||
export default {
|
||||
components: {
|
||||
PulseLoader,
|
||||
},
|
||||
props: [],
|
||||
data() {
|
||||
return {
|
||||
onlyShowRoomsWithRecorder: false,
|
||||
onlyShowRoomsWithoutRecorder: false,
|
||||
tabIndex: 0,
|
||||
updateValues: {},
|
||||
formEditField: {},
|
||||
show_assigned_recorders: false,
|
||||
form: {
|
||||
name: null,
|
||||
alternate_name: null,
|
||||
number: null,
|
||||
comment: null,
|
||||
recorder_id: null,
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
showAllRooms(){
|
||||
this.onlyShowRoomsWithRecorder = false;
|
||||
this.onlyShowRoomsWithoutRecorder = false;
|
||||
},
|
||||
showRoomsWithRecorder(){
|
||||
this.onlyShowRoomsWithRecorder = true;
|
||||
this.onlyShowRoomsWithoutRecorder = false;
|
||||
},
|
||||
showRoomsWithoutRecorder(){
|
||||
this.onlyShowRoomsWithRecorder = false;
|
||||
this.onlyShowRoomsWithoutRecorder = true;
|
||||
},
|
||||
saveRoom() {
|
||||
this.$parent.$data.isLoading = true;
|
||||
RoomRepository.createRoom(this.form)
|
||||
.then(() => {
|
||||
this.$store.dispatch('loadRooms')
|
||||
.then(() => {
|
||||
this.$parent.$data.isLoading = false;
|
||||
this.tabIndex = 0;
|
||||
});
|
||||
}).catch((msg) => {
|
||||
this.showErrorMessage('Could not safe room!');
|
||||
});
|
||||
},
|
||||
initRoomUpdate(room, fieldName) {
|
||||
this.$set(this.formEditField, room.id + '_' + fieldName, true);
|
||||
this.$set(this.updateValues, room.id + '_' + fieldName, room[fieldName]);
|
||||
},
|
||||
updateRoom(id, fieldName) {
|
||||
this.$parent.$data.isLoading = true;
|
||||
const data = {};
|
||||
data[fieldName] = this.updateValues[id + '_' + fieldName];
|
||||
RoomRepository.updateRoom(id, data)
|
||||
.then(() => {
|
||||
this.$store.dispatch('loadRooms')
|
||||
.then(() => {
|
||||
this.$parent.$data.isLoading = false;
|
||||
this.formEditField[id + '_' + fieldName] = false;
|
||||
});
|
||||
});
|
||||
},
|
||||
deleteRoom(id) {
|
||||
this.$parent.$data.isLoading = true;
|
||||
RoomRepository.deleteRoom(id)
|
||||
.then(() => {
|
||||
this.$store.dispatch('loadRooms')
|
||||
.then(() => {
|
||||
this.$parent.$data.isLoading = false;
|
||||
});
|
||||
});
|
||||
},
|
||||
showErrorMessage(msg) {
|
||||
this.$parent.$data.isLoading = false;
|
||||
this.$parent.$data.showAlert = true;
|
||||
this.$parent.$data.alertMessage = msg;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$parent.$data.isLoading = true;
|
||||
this.$parent.$data.showAlert = false;
|
||||
export default {
|
||||
components: {
|
||||
PulseLoader,
|
||||
},
|
||||
props: [],
|
||||
data() {
|
||||
return {
|
||||
onlyShowRoomsWithRecorder: false,
|
||||
onlyShowRoomsWithoutRecorder: false,
|
||||
tabIndex: 0,
|
||||
updateValues: {},
|
||||
formEditField: {},
|
||||
show_assigned_recorders: false,
|
||||
form: {
|
||||
name: null,
|
||||
alternate_name: null,
|
||||
number: null,
|
||||
comment: null,
|
||||
recorder_id: null,
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
showAllRooms() {
|
||||
this.onlyShowRoomsWithRecorder = false;
|
||||
this.onlyShowRoomsWithoutRecorder = false;
|
||||
},
|
||||
showRoomsWithRecorder() {
|
||||
this.onlyShowRoomsWithRecorder = true;
|
||||
this.onlyShowRoomsWithoutRecorder = false;
|
||||
},
|
||||
showRoomsWithoutRecorder() {
|
||||
this.onlyShowRoomsWithRecorder = false;
|
||||
this.onlyShowRoomsWithoutRecorder = true;
|
||||
},
|
||||
saveRoom() {
|
||||
this.$parent.$data.isLoading = true;
|
||||
RoomRepository.createRoom(this.form)
|
||||
.then(() => {
|
||||
this.$store.dispatch('loadRooms')
|
||||
.then(() => {
|
||||
this.$store.dispatch('loadRecorders')
|
||||
.then(() => {
|
||||
this.$parent.$data.isLoading = false;
|
||||
});
|
||||
this.$parent.$data.isLoading = false;
|
||||
this.tabIndex = 0;
|
||||
});
|
||||
},
|
||||
computed: {
|
||||
options() {
|
||||
return {
|
||||
recorders: [
|
||||
{value: 8, text: 'SMP 351 AudiMax'},
|
||||
{value: 13, text: 'SMP 351 HMU'},
|
||||
],
|
||||
};
|
||||
},
|
||||
rooms() {
|
||||
if(this.onlyShowRoomsWithRecorder){
|
||||
return this.$store.state.rooms.filter((item) => {
|
||||
return item.recorder;
|
||||
});
|
||||
}
|
||||
else if(this.onlyShowRoomsWithoutRecorder){
|
||||
return this.$store.state.rooms.filter((item) => {
|
||||
return !item.recorder;
|
||||
});
|
||||
}
|
||||
return this.$store.state.rooms;
|
||||
},
|
||||
recorders() {
|
||||
return this.$store.state.recorders;
|
||||
},
|
||||
},
|
||||
};
|
||||
}).catch((msg) => {
|
||||
this.showErrorMessage('Could not safe room!');
|
||||
});
|
||||
},
|
||||
initRoomUpdate(room, fieldName) {
|
||||
this.$set(this.formEditField, room.id + '_' + fieldName, true);
|
||||
this.$set(this.updateValues, room.id + '_' + fieldName, room[fieldName]);
|
||||
},
|
||||
updateRoom(id, fieldName) {
|
||||
this.$parent.$data.isLoading = true;
|
||||
const data = {};
|
||||
data[fieldName] = this.updateValues[id + '_' + fieldName];
|
||||
RoomRepository.updateRoom(id, data)
|
||||
.then(() => {
|
||||
this.$store.dispatch('loadRooms')
|
||||
.then(() => {
|
||||
this.$parent.$data.isLoading = false;
|
||||
this.formEditField[id + '_' + fieldName] = false;
|
||||
});
|
||||
});
|
||||
},
|
||||
deleteRoom(id) {
|
||||
this.$parent.$data.isLoading = true;
|
||||
RoomRepository.deleteRoom(id)
|
||||
.then(() => {
|
||||
this.$store.dispatch('loadRooms')
|
||||
.then(() => {
|
||||
this.$parent.$data.isLoading = false;
|
||||
});
|
||||
});
|
||||
},
|
||||
showErrorMessage(msg) {
|
||||
this.$parent.$data.isLoading = false;
|
||||
this.$parent.$data.showAlert = true;
|
||||
this.$parent.$data.alertMessage = msg;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$parent.$data.isLoading = true;
|
||||
this.$parent.$data.showAlert = false;
|
||||
this.$store.dispatch('loadRooms')
|
||||
.then(() => {
|
||||
this.$store.dispatch('loadRecorders')
|
||||
.then(() => {
|
||||
this.$parent.$data.isLoading = false;
|
||||
});
|
||||
});
|
||||
},
|
||||
computed: {
|
||||
options() {
|
||||
return {
|
||||
recorders: [
|
||||
{value: 8, text: 'SMP 351 AudiMax'},
|
||||
{value: 13, text: 'SMP 351 HMU'},
|
||||
],
|
||||
};
|
||||
},
|
||||
rooms() {
|
||||
if (this.onlyShowRoomsWithRecorder) {
|
||||
return this.$store.state.rooms.filter((item) => {
|
||||
return item.recorder;
|
||||
});
|
||||
} else if (this.onlyShowRoomsWithoutRecorder) {
|
||||
return this.$store.state.rooms.filter((item) => {
|
||||
return !item.recorder;
|
||||
});
|
||||
}
|
||||
return this.$store.state.rooms;
|
||||
},
|
||||
recorders() {
|
||||
return this.$store.state.recorders;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.comment {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.comment {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
.card:hover {
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
|
||||
.required:after {
|
||||
content: " *";
|
||||
}
|
||||
.required:after {
|
||||
content: " *";
|
||||
}
|
||||
</style>
|
||||
|
||||
32
src/main.ts
32
src/main.ts
@@ -11,7 +11,7 @@ import VueLogger from 'vuejs-logger';
|
||||
import VueSocketIOExt from 'vue-socket.io-extended';
|
||||
import io from 'socket.io-client';
|
||||
import i18n from '@/plugins/i18n';
|
||||
import { ValidationProvider } from 'vee-validate';
|
||||
import { ValidationObserver, ValidationProvider, extend, localize } from 'vee-validate';
|
||||
// @ts-ignore
|
||||
import FlagIcon from 'vue-flag-icon';
|
||||
// @ts-ignore
|
||||
@@ -34,6 +34,7 @@ import {
|
||||
faPencilAlt,
|
||||
faCogs,
|
||||
faAt,
|
||||
faIdBadge,
|
||||
faUser,
|
||||
faEnvelope,
|
||||
faHome,
|
||||
@@ -57,6 +58,11 @@ import {
|
||||
|
||||
import { faOpenid,
|
||||
} from '@fortawesome/free-brands-svg-icons';
|
||||
|
||||
import {
|
||||
faDotCircle,
|
||||
} from '@fortawesome/free-regular-svg-icons';
|
||||
|
||||
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
|
||||
|
||||
|
||||
@@ -71,7 +77,8 @@ Vue.prototype.$isProduction = isProduction;
|
||||
|
||||
library.add(faCoffee, faTrash, faPencilAlt, faScroll, faCheck, faCircle, faList, faPlus, faDoorOpen, faCogs, faAt,
|
||||
faUser, faEnvelope, faUserTag, faExternalLinkAlt, faSync, faHome, faCode, faBarcode, faTag, faTags, faVideo, faLock,
|
||||
faLockOpen, faArrowCircleLeft, faArrowCircleRight, faWrench, faPlay, faFrown, faSmile, faThumbsUp, faThumbsDown, faOpenid);
|
||||
faLockOpen, faArrowCircleLeft, faArrowCircleRight, faWrench, faPlay, faFrown, faSmile, faThumbsUp, faThumbsDown,
|
||||
faOpenid, faDotCircle, faIdBadge);
|
||||
|
||||
Vue.component('font-awesome-icon', FontAwesomeIcon);
|
||||
|
||||
@@ -92,9 +99,24 @@ Vue.use(BootstrapVue);
|
||||
Vue.use(FlagIcon);
|
||||
Vue.use(VueCookies);
|
||||
Vue.use(VueSweetalert2);
|
||||
// Vue.use(VeeValidate);
|
||||
Vue.use(VueMoment);
|
||||
|
||||
|
||||
import en from 'vee-validate/dist/locale/en.json';
|
||||
import de from 'vee-validate/dist/locale/de.json';
|
||||
import es from 'vee-validate/dist/locale/es.json';
|
||||
import * as rules from 'vee-validate/dist/rules';
|
||||
|
||||
// install rules and localization
|
||||
Object.keys(rules).forEach((rule) => {
|
||||
// @ts-ignore
|
||||
extend(rule, rules[rule]);
|
||||
});
|
||||
|
||||
localize('de', de);
|
||||
|
||||
// Install components globally
|
||||
Vue.component('ValidationObserver', ValidationObserver);
|
||||
Vue.component('ValidationProvider', ValidationProvider);
|
||||
|
||||
// const socket = io('ws://localhost:5000',{autoConnect: false, reconnectionAttempts: 3});
|
||||
@@ -106,10 +128,6 @@ const socket = io('ws://localhost:5443', {
|
||||
Vue.use(VueSocketIOExt, socket);
|
||||
|
||||
|
||||
// setup fake backend
|
||||
// import { configureFakeBackend } from './helpers';
|
||||
// configureFakeBackend();
|
||||
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
|
||||
9
src/validation.js
Normal file
9
src/validation.js
Normal file
@@ -0,0 +1,9 @@
|
||||
import { extend } from 'vee-validate';
|
||||
import { required, email } from 'vee-validate/dist/rules';
|
||||
|
||||
extend('positive', value => {
|
||||
return value >= 0;
|
||||
});
|
||||
|
||||
extend('email', email);
|
||||
extend('required', required);
|
||||
@@ -7,6 +7,7 @@
|
||||
"importHelpers": true,
|
||||
"moduleResolution": "node",
|
||||
"experimentalDecorators": true,
|
||||
"resolveJsonModule": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"sourceMap": true,
|
||||
|
||||
Reference in New Issue
Block a user