tobias/lrc-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

started fixing veevalidate (migrating to v3)

Browse Source
This commit is contained in:
Tobias
2020-07-31 10:54:41 +02:00
parent d26cc1492d
commit f07716b946
7 changed files with 504 additions and 432 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
package-lock.json generated
View File

@@ -1157,6 +1157,14 @@
"@fortawesome/fontawesome-common-types": "^0.2.30" "@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": { "@fortawesome/free-solid-svg-icons": {
"version": "5.14.0", "version": "5.14.0",
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.14.0.tgz", "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.14.0.tgz",

1
package.json
View File

@@ -11,6 +11,7 @@
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.30", "@fortawesome/fontawesome-svg-core": "^1.2.30",
"@fortawesome/free-brands-svg-icons": "^5.14.0", "@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/free-solid-svg-icons": "^5.14.0",
"@fortawesome/vue-fontawesome": "^0.1.10", "@fortawesome/vue-fontawesome": "^0.1.10",
"@vue/cli": "^4.4.6", "@vue/cli": "^4.4.6",

41
src/components/Profile.vue
View File

@@ -5,12 +5,25 @@
<div class="hero-body"> <div class="hero-body">
<div class="container has-text-centered"> <div class="container has-text-centered">
<div class="clearfix"> <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> 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"> <h2 class="title" v-else-if="profile.first_name">
{{ profile.first_name }}&nbsp;{{ profile.last_name }}</h2> {{ profile.first_name }}&nbsp;{{ profile.last_name }}
<h2 class="title" v-else>{{ profile.email }}</h2> </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">&nbsp;{{ profile.external_user_id }}&nbsp;
(<font-awesome-icon :icon="['fab', 'openid']" />)</span>
<span v-b-tooltip.hover :title="$t('internal user')" v-else>&nbsp;{{ profile.id }}&nbsp;
(<font-awesome-icon :icon="['far', 'dot-circle']"/>)</span>
</p>
<p> <p>
<font-awesome-icon icon="envelope"/>&nbsp;{{ profile.email }} <font-awesome-icon icon="envelope"/>&nbsp;{{ profile.email }}
@@ -26,28 +39,23 @@
<font-awesome-icon icon="pencil-alt"/> <font-awesome-icon icon="pencil-alt"/>
</a> </a>
</p> </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" <b-form-input name="nickname"
v-model="form.nickname" v-model="form.nickname"
class="form-control" type="text" class="form-control" type="text"
:placeholder="$t('set_your_nickname') + ' ('+profile.nickname +')'"></b-form-input> :placeholder="$t('set_your_nickname') + ' ('+profile.nickname +')'"></b-form-input>
<b-input-group-append> <b-input-group-append>
<b-button :disabled="errors.has('nickname')" <b-button :disabled="v.errors.length > 0"
@click="updateProfile('nickname')" @click="updateProfile('nickname')"
variant="outline-success"> variant="outline-success">
<font-awesome-icon icon="check"></font-awesome-icon> <font-awesome-icon icon="check"></font-awesome-icon>
</b-button> </b-button>
</b-input-group-append> </b-input-group-append>
</b-input-group> </b-input-group>
</ValidationProvider>
<p v-if="profile.external_user">
<span>&f19b;</span>
<font-awesome-icon :icon="['fab', 'openid']"/>&nbsp;{{ $t('external user') }}
</p>
<p v-else>
<font-awesome-icon icon="pencil-alt"/>&nbsp;{{ $t('internal user') }}
</p>
</div> </div>
@@ -89,8 +97,11 @@
<script> <script>
import {EventBus} from '@/utils'; import {EventBus} from '@/utils';
import {getRemainingJwtValiditySeconds} from '../utils'; import {getRemainingJwtValiditySeconds} from '@/utils';
import getRepository from '@/api/RepositoryFactory'; import getRepository from '@/api/RepositoryFactory';
//import { extend } from 'vee-validate';
import '@/validation';
const userRepository = getRepository('user'); const userRepository = getRepository('user');

54
src/components/Rooms.vue
View File

@@ -19,7 +19,8 @@
<b-button-group> <b-button-group>
<b-button variant="success" @click="showAllRooms()">{{ $t('All rooms') }}</b-button> <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="info" @click="showRoomsWithRecorder()">{{ $t('Rooms with recorders') }}</b-button>
<b-button variant="warning" @click="showRoomsWithoutRecorder()">{{$t('Rooms without recorders')}}</b-button> <b-button variant="warning" @click="showRoomsWithoutRecorder()">{{ $t('Rooms without recorders') }}
</b-button>
</b-button-group> </b-button-group>
</div> </div>
<p>{{ $tc('rooms_defined', rooms.length, {num: rooms.length}) }}:</p> <p>{{ $tc('rooms_defined', rooms.length, {num: rooms.length}) }}:</p>
@@ -36,6 +37,7 @@
</a> </a>
</span> </span>
<b-input-group v-else> <b-input-group v-else>
<ValidationProvider v-slot="{ errors }">
<b-form-input :id="room.id+'_name'" name="name" <b-form-input :id="room.id+'_name'" name="name"
v-model="updateValues[room.id+'_name']" v-model="updateValues[room.id+'_name']"
v-validate="'required|min:3'" v-validate="'required|min:3'"
@@ -50,6 +52,7 @@
<font-awesome-icon icon="check"></font-awesome-icon> <font-awesome-icon icon="check"></font-awesome-icon>
</b-button> </b-button>
</b-input-group-append> </b-input-group-append>
</ValidationProvider>
</b-input-group> </b-input-group>
</h5> </h5>
@@ -63,6 +66,7 @@
</a> </a>
</span> </span>
<b-input-group v-else> <b-input-group v-else>
<ValidationProvider v-slot="{ errors }">
<b-form-input :id="room.id+'_building_number'" name="building_number" <b-form-input :id="room.id+'_building_number'" name="building_number"
v-model="updateValues[room.id+'_building_number']" v-model="updateValues[room.id+'_building_number']"
v-validate="'required|min:3'" v-validate="'required|min:3'"
@@ -77,6 +81,7 @@
<font-awesome-icon icon="check"></font-awesome-icon> <font-awesome-icon icon="check"></font-awesome-icon>
</b-button> </b-button>
</b-input-group-append> </b-input-group-append>
</ValidationProvider>
</b-input-group> </b-input-group>
</p> </p>
<p class="card-text"><strong>{{ $t('building_name') }}</strong>:&nbsp; <p class="card-text"><strong>{{ $t('building_name') }}</strong>:&nbsp;
@@ -88,6 +93,7 @@
</a> </a>
</span> </span>
<b-input-group v-else> <b-input-group v-else>
<ValidationProvider v-slot="{ errors }">
<b-form-input :id="room.id+'_building_name'" name="building_name" <b-form-input :id="room.id+'_building_name'" name="building_name"
v-model="updateValues[room.id+'_building_name']" v-model="updateValues[room.id+'_building_name']"
v-validate="'required|min:3'" v-validate="'required|min:3'"
@@ -102,6 +108,7 @@
<font-awesome-icon icon="check"></font-awesome-icon> <font-awesome-icon icon="check"></font-awesome-icon>
</b-button> </b-button>
</b-input-group-append> </b-input-group-append>
</ValidationProvider>
</b-input-group> </b-input-group>
</p> </p>
@@ -115,6 +122,7 @@
</a> </a>
</span> </span>
<b-input-group v-else size="sm"> <b-input-group v-else size="sm">
<ValidationProvider v-slot="{ errors }">
<b-form-input name="alternate_name" <b-form-input name="alternate_name"
v-model="updateValues[room.id+'_alternate_name']" v-model="updateValues[room.id+'_alternate_name']"
class="form-control" type="text" class="form-control" type="text"
@@ -128,6 +136,7 @@
<font-awesome-icon icon="check"></font-awesome-icon> <font-awesome-icon icon="check"></font-awesome-icon>
</b-button> </b-button>
</b-input-group-append> </b-input-group-append>
</ValidationProvider>
</b-input-group> </b-input-group>
</p> </p>
<p class="card-text"><strong>{{ $t('room_number') }}:</strong>&nbsp; <p class="card-text"><strong>{{ $t('room_number') }}:</strong>&nbsp;
@@ -139,6 +148,7 @@
</a> </a>
</span> </span>
<b-input-group v-else size="sm"> <b-input-group v-else size="sm">
<ValidationProvider v-slot="{ errors }">
<b-form-input name="number" <b-form-input name="number"
v-model="updateValues[room.id+'_number']" v-model="updateValues[room.id+'_number']"
v-validate="'required|min:3'" v-validate="'required|min:3'"
@@ -155,6 +165,7 @@
<font-awesome-icon icon="check"></font-awesome-icon> <font-awesome-icon icon="check"></font-awesome-icon>
</b-button> </b-button>
</b-input-group-append> </b-input-group-append>
</ValidationProvider>
</b-input-group> </b-input-group>
</p> </p>
<p class="card-text"> <p class="card-text">
@@ -175,12 +186,15 @@
<hr/> <hr/>
<span v-if="!formEditField[room.id+'_recorder_id']">{{ room.recorder_id }}&nbsp; <span v-if="!formEditField[room.id+'_recorder_id']">{{ room.recorder_id }}&nbsp;
<div v-if="room.recorder"> <div v-if="room.recorder">
<p class="card-text"><strong>{{ $t('Recorder') }}:</strong>&nbsp;{{room.recorder.name}}&nbsp; <p class="card-text"><strong>{{
$t('Recorder')
}}:</strong>&nbsp;{{ room.recorder.name }}&nbsp;
({{ room.recorder.ip }}) / ({{ room.recorder.network_name }})</p> ({{ room.recorder.ip }}) / ({{ room.recorder.network_name }})</p>
</div> </div>
<div v-else> <div v-else>
<p class="card-text"><strong>{{ $t('Recorder') }}:</strong>&nbsp;{{ <p class="card-text"><strong>{{ $t('Recorder') }}:</strong>&nbsp;{{
$t('no_recorder_defined')}}</p> $t('no_recorder_defined')
}}</p>
</div> </div>
<a class="float-right badge badge-pill badge-info"> <a class="float-right badge badge-pill badge-info">
<font-awesome-icon <font-awesome-icon
@@ -189,6 +203,7 @@
</span> </span>
<b-form v-else> <b-form v-else>
<b-input-group> <b-input-group>
<ValidationProvider v-slot="{ errors }">
<select class="form-control" v-model="updateValues[room.id+'_recorder_id']"> <select class="form-control" v-model="updateValues[room.id+'_recorder_id']">
<option value="">No recorder selected</option> <option value="">No recorder selected</option>
<option v-for="recorder in recorders" v-bind:value="recorder.id"> <option v-for="recorder in recorders" v-bind:value="recorder.id">
@@ -202,6 +217,7 @@
<font-awesome-icon icon="check"></font-awesome-icon> <font-awesome-icon icon="check"></font-awesome-icon>
</b-button> </b-button>
</b-input-group-append> </b-input-group-append>
</ValidationProvider>
</b-input-group> </b-input-group>
<div class="form-check"> <div class="form-check">
@@ -220,7 +236,8 @@
<span class="pull-right"> <span class="pull-right">
<button type="button" v-on:click="deleteRoom(room.id)" <button type="button" v-on:click="deleteRoom(room.id)"
class="btn btn-sm btn-danger">{{ class="btn btn-sm btn-danger">{{
$t('delete') }}&nbsp;<font-awesome-icon $t('delete')
}}&nbsp;<font-awesome-icon
icon="trash"/> icon="trash"/>
</button> </button>
</span> </span>
@@ -240,22 +257,26 @@
<b-card-text> <b-card-text>
<p>{{ $t('Create_a_new_room') }}:</p> <p>{{ $t('Create_a_new_room') }}:</p>
<!-- form starts here --> <!-- form starts here -->
<ValidationObserver v-slot="{ invalid }">
<form v-on:submit.prevent="saveRoom()"> <form v-on:submit.prevent="saveRoom()">
<section class="form"> <section class="form">
<ValidationProvider :name="$t('name')" rules="required|min:3" v-slot="{ errors }" slim>
<div class="form-group row"> <div class="form-group row">
<label class="label required col-sm-2 col-form-label">{{ $t('name') }}</label> <label class="label required col-sm-2 col-form-label">{{ $t('name') }}</label>
<div class="col-sm-6"> <div class="col-sm-6">
<input name="name" <input name="name"
v-model="form.name" v-model="form.name"
v-validate="'required|min:3'" v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
v-bind:class="{'is-danger': errors.has('name'), 'is-invalid': errors.has('name')}"
class="form-control" type="text" placeholder="Room name" required> class="form-control" type="text" placeholder="Room name" required>
</div> </div>
<p class="col-sm-4" v-show="errors.has('name')"> <p class="col-sm-4" v-show="errors.length > 0">
{{ errors.first('name') }} {{ errors[0] }}
</p> </p>
</div> </div>
</ValidationProvider>
<div class="form-group row"> <div class="form-group row">
<label class="label col-sm-2 col-form-label">{{ $t('alternate_name') }}</label> <label class="label col-sm-2 col-form-label">{{ $t('alternate_name') }}</label>
@@ -266,19 +287,22 @@
</div> </div>
</div> </div>
<ValidationProvider :name="$t('number')" rules="required|min:3" v-slot="{ errors }" slim>
<div class="form-group row"> <div class="form-group row">
<label class="label required col-sm-2 col-form-label">{{ $t('number') }}</label> <label class="label required col-sm-2 col-form-label">{{ $t('number') }}</label>
<div class="col-sm-6"> <div class="col-sm-6">
<input name="number" <input name="number"
v-model="form.number" v-model="form.number"
v-validate="'required|min:3'" v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
v-bind:class="{'is-danger': errors.has('number'), 'is-invalid': errors.has('number')}"
class="form-control" type="text" placeholder="Room number" required> class="form-control" type="text" placeholder="Room number" required>
</div> </div>
<p class="col-sm-4" v-show="errors.has('number')"> <p class="col-sm-4" v-show="errors.length > 0">
{{ errors.first('number') }} {{ errors[0] }}
</p> </p>
</div> </div>
</ValidationProvider>
<div class="form-group row"> <div class="form-group row">
<label class="label col-sm-2 col-form-label">{{ $t('comment') }}</label> <label class="label col-sm-2 col-form-label">{{ $t('comment') }}</label>
@@ -305,7 +329,7 @@
<div class="field is-grouped"> <div class="field is-grouped">
<div class="control"> <div class="control">
<button <button
v-bind:disabled="errors.any()" v-bind:disabled="invalid"
type="submit" type="submit"
class="btn btn-primary"> class="btn btn-primary">
Create room Create room
@@ -315,6 +339,7 @@
</section> </section>
</form> </form>
</ValidationObserver>
</b-card-text> </b-card-text>
</b-tab> </b-tab>
</b-tabs> </b-tabs>
@@ -457,8 +482,7 @@
return this.$store.state.rooms.filter((item) => { return this.$store.state.rooms.filter((item) => {
return item.recorder; return item.recorder;
}); });
} } else if (this.onlyShowRoomsWithoutRecorder) {
else if(this.onlyShowRoomsWithoutRecorder){
return this.$store.state.rooms.filter((item) => { return this.$store.state.rooms.filter((item) => {
return !item.recorder; return !item.recorder;
}); });

32
src/main.ts
View File

@@ -11,7 +11,7 @@ import VueLogger from 'vuejs-logger';
import VueSocketIOExt from 'vue-socket.io-extended'; import VueSocketIOExt from 'vue-socket.io-extended';
import io from 'socket.io-client'; import io from 'socket.io-client';
import i18n from '@/plugins/i18n'; import i18n from '@/plugins/i18n';
import { ValidationProvider } from 'vee-validate'; import { ValidationObserver, ValidationProvider, extend, localize } from 'vee-validate';
// @ts-ignore // @ts-ignore
import FlagIcon from 'vue-flag-icon'; import FlagIcon from 'vue-flag-icon';
// @ts-ignore // @ts-ignore
@@ -34,6 +34,7 @@ import {
faPencilAlt, faPencilAlt,
faCogs, faCogs,
faAt, faAt,
faIdBadge,
faUser, faUser,
faEnvelope, faEnvelope,
faHome, faHome,
@@ -57,6 +58,11 @@ import {
import { faOpenid, import { faOpenid,
} from '@fortawesome/free-brands-svg-icons'; } from '@fortawesome/free-brands-svg-icons';
import {
faDotCircle,
} from '@fortawesome/free-regular-svg-icons';
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'; 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, 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, 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); Vue.component('font-awesome-icon', FontAwesomeIcon);
@@ -92,9 +99,24 @@ Vue.use(BootstrapVue);
Vue.use(FlagIcon); Vue.use(FlagIcon);
Vue.use(VueCookies); Vue.use(VueCookies);
Vue.use(VueSweetalert2); Vue.use(VueSweetalert2);
// Vue.use(VeeValidate);
Vue.use(VueMoment); 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); Vue.component('ValidationProvider', ValidationProvider);
// const socket = io('ws://localhost:5000',{autoConnect: false, reconnectionAttempts: 3}); // const socket = io('ws://localhost:5000',{autoConnect: false, reconnectionAttempts: 3});
@@ -106,10 +128,6 @@ const socket = io('ws://localhost:5443', {
Vue.use(VueSocketIOExt, socket); Vue.use(VueSocketIOExt, socket);
// setup fake backend
// import { configureFakeBackend } from './helpers';
// configureFakeBackend();
Vue.config.productionTip = false; Vue.config.productionTip = false;

9
src/validation.js Normal file
View 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);

1
tsconfig.json
View File

@@ -7,6 +7,7 @@
"importHelpers": true, "importHelpers": true,
"moduleResolution": "node", "moduleResolution": "node",
"experimentalDecorators": true, "experimentalDecorators": true,
"resolveJsonModule": true,
"esModuleInterop": true, "esModuleInterop": true,
"allowSyntheticDefaultImports": true, "allowSyntheticDefaultImports": true,
"sourceMap": true, "sourceMap": true,