This commit is contained in:
@@ -17,13 +17,18 @@ TODO NEXT
|
|||||||
|
|
||||||
DATETIME
|
DATETIME
|
||||||
|
|
||||||
- Does it validate properly? NO. Get validation working!!
|
- Validation
|
||||||
- So it looks like it will need a custom validator as it completely barfs on my string date format coming from the server
|
- after much fuckery it's becoming clear that between the localization requirements and the complexity of server broken rules coming back from the api that I should just use my own validation code
|
||||||
- https://baianat.github.io/vee-validate/guide/custom-rules.html#creating-a-custom-rule
|
- See here: https://vuetifyjs.com/en/components/forms#form
|
||||||
- https://baianat.github.io/vee-validate/concepts/components.html#how-it-works
|
- What is needed is a class that returns an array of functions that can be passed to vuetify "rules" property of components
|
||||||
- possibly helpful https://stackoverflow.com/questions/47982820/vuejs-vee-validate-in-custom-components
|
On change each rule is called in turn and if one returns false or a string then it's in an error state
|
||||||
- or https://duckduckgo.com/?q=vee+validate+with+custom+component&t=ffab&atb=v134-6__&ia=web
|
- I also need to add that it scans and or keeps a collection of broken rules that come back from the server and each component checks a rule that checks in turn for server broken rules in last api call
|
||||||
|
- And my rules object needs to be localized so I guess it should be aware of the locale object and work with it as required
|
||||||
|
- Should it lazy load error translations? (In as batchy a way as possible?)
|
||||||
|
- Or, perhaps it's more convenient to cache all possible regular form entry errors since there isn't really that many, perhaps less than a dozen when it comes down to it
|
||||||
|
- My rules object needs to be coded so I can easily specify a collection of rules appropriate to a form field
|
||||||
|
- So, for example let's say I have a date input, if I commonly need one to be required and be after or before another field then I should have a single combined rule of
|
||||||
|
RequiredAndAfterTarget and this method is aggregates both the required and the After rules into a single collection returned
|
||||||
- Test on mobile and desktop all browsers before moving on, it must be solid with error handling (required, after before etc) and etc and then if all is well we can move on to the other field types
|
- Test on mobile and desktop all browsers before moving on, it must be solid with error handling (required, after before etc) and etc and then if all is well we can move on to the other field types
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
5
ayanova/package-lock.json
generated
5
ayanova/package-lock.json
generated
@@ -15930,11 +15930,6 @@
|
|||||||
"integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=",
|
"integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"vee-validate": {
|
|
||||||
"version": "2.1.7",
|
|
||||||
"resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-2.1.7.tgz",
|
|
||||||
"integrity": "sha512-IyPDTTvIRY6o9y14jXlgfY76Qv+hmvYDwNaMn9JY5KbQN8a1tJAu7H/+a/+EdHg1w8Zl9tsdG8lndGqY1lyMzQ=="
|
|
||||||
},
|
|
||||||
"vendors": {
|
"vendors": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.2.tgz",
|
||||||
|
|||||||
@@ -16,7 +16,6 @@
|
|||||||
"nprogress": "^0.2.0",
|
"nprogress": "^0.2.0",
|
||||||
"register-service-worker": "^1.6.2",
|
"register-service-worker": "^1.6.2",
|
||||||
"typeface-roboto": "0.0.54",
|
"typeface-roboto": "0.0.54",
|
||||||
"vee-validate": "^2.1.7",
|
|
||||||
"vue": "^2.6.8",
|
"vue": "^2.6.8",
|
||||||
"vue-router": "^3.0.2",
|
"vue-router": "^3.0.2",
|
||||||
"vuetify": "^1.5.5",
|
"vuetify": "^1.5.5",
|
||||||
|
|||||||
@@ -1,8 +1,13 @@
|
|||||||
// import { isAfter, isEqual } from "date-fns";
|
// import { isAfter, isEqual } from "date-fns";
|
||||||
// import { parseDate as parse } from "../utils/date";
|
// import { parseDate as parse } from "../utils/date";
|
||||||
import dayjs from "dayjs";
|
import dayjs from "dayjs";
|
||||||
|
/*eslint-disable */
|
||||||
const gzAfterValidator = (value, { targetValue } = {}) => {
|
const gzAfterValidator = (value, { targetValue } = {}) => {
|
||||||
|
if (!targetValue) {
|
||||||
|
console.log("GZAFTERVALIDATOR - TARGET IS EMPTY!");
|
||||||
|
return false;
|
||||||
|
//throw "GZAFTERVALIDATOR - TARGET IS EMPTY";
|
||||||
|
}
|
||||||
value = dayjs(value);
|
value = dayjs(value);
|
||||||
targetValue = dayjs(targetValue);
|
targetValue = dayjs(targetValue);
|
||||||
|
|
||||||
@@ -10,8 +15,8 @@ const gzAfterValidator = (value, { targetValue } = {}) => {
|
|||||||
if (!value || !targetValue) {
|
if (!value || !targetValue) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
/*eslint-disable */
|
|
||||||
debugger;
|
//debugger;
|
||||||
return value.isAfter(targetValue);
|
return value.isAfter(targetValue);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -49,14 +49,13 @@
|
|||||||
></v-text-field>
|
></v-text-field>
|
||||||
</v-flex>
|
</v-flex>
|
||||||
|
|
||||||
<v-flex xs12 sm6 lg4 xl3 px-2>
|
<!-- <v-flex xs12 sm6 lg4 xl3 px-2>
|
||||||
<v-text-field
|
<v-text-field
|
||||||
:label="this.$gzlocale.get('WidgetStartDate')"
|
:label="this.$gzlocale.get('WidgetStartDate')"
|
||||||
v-model="obj.startDate"
|
v-model="obj.startDate"
|
||||||
name="startDate"
|
name="startDate"
|
||||||
data-vv-as="startDate"
|
|
||||||
v-validate="'required'"
|
v-validate="'required'"
|
||||||
ref="startDate"
|
ref="qwerty"
|
||||||
:error-messages="errors.collect('startDate')"
|
:error-messages="errors.collect('startDate')"
|
||||||
required
|
required
|
||||||
></v-text-field>
|
></v-text-field>
|
||||||
@@ -66,14 +65,35 @@
|
|||||||
<v-text-field
|
<v-text-field
|
||||||
:label="this.$gzlocale.get('WidgetEndDate')"
|
:label="this.$gzlocale.get('WidgetEndDate')"
|
||||||
v-model="obj.endDate"
|
v-model="obj.endDate"
|
||||||
name="endDate"
|
name="endDate"
|
||||||
data-vv-as="endDate"
|
v-validate="'required|gzafter:qwerty'"
|
||||||
v-validate="'required|gzafter:startDate'"
|
|
||||||
:error-messages="errors.collect('endDate')"
|
:error-messages="errors.collect('endDate')"
|
||||||
required
|
required
|
||||||
></v-text-field>
|
></v-text-field>
|
||||||
|
</v-flex>-->
|
||||||
|
<v-flex xs12 sm6 lg4 xl3 px-2>
|
||||||
|
<v-text-field
|
||||||
|
label="PW"
|
||||||
|
v-model="pw"
|
||||||
|
name="pw"
|
||||||
|
v-validate="'required'"
|
||||||
|
ref="THEPW"
|
||||||
|
:error-messages="errors.collect('pw')"
|
||||||
|
required
|
||||||
|
></v-text-field>
|
||||||
</v-flex>
|
</v-flex>
|
||||||
<!-- YYYY-MM-DDTHH:mm:ss.sssZ -->
|
|
||||||
|
<v-flex xs12 sm6 lg4 xl3 px-2>
|
||||||
|
<v-text-field
|
||||||
|
label="PW2"
|
||||||
|
v-model="pw2"
|
||||||
|
name="pw2"
|
||||||
|
v-validate="'required|confirmed:THEPW'"
|
||||||
|
:error-messages="errors.collect('pw2')"
|
||||||
|
required
|
||||||
|
></v-text-field>
|
||||||
|
</v-flex>
|
||||||
|
<!-- YYYY-MM-DDTHH:mm:ss.sssZ -->
|
||||||
<!-- <v-flex xs12 sm6 lg4 xl3 px-2>
|
<!-- <v-flex xs12 sm6 lg4 xl3 px-2>
|
||||||
<gz-date-time-picker
|
<gz-date-time-picker
|
||||||
:label="this.$gzlocale.get('WidgetStartDate')"
|
:label="this.$gzlocale.get('WidgetStartDate')"
|
||||||
@@ -138,6 +158,9 @@
|
|||||||
/* eslint-disable */
|
/* eslint-disable */
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
$_veeValidate: {
|
||||||
|
validator: "new"
|
||||||
|
},
|
||||||
beforeCreate() {
|
beforeCreate() {
|
||||||
//Cache all required lt keys
|
//Cache all required lt keys
|
||||||
var ltKeysRequired = [
|
var ltKeysRequired = [
|
||||||
@@ -180,7 +203,9 @@ export default {
|
|||||||
date: new Date().toISOString().substr(0, 10),
|
date: new Date().toISOString().substr(0, 10),
|
||||||
menu: false,
|
menu: false,
|
||||||
modal: false,
|
modal: false,
|
||||||
menu2: false
|
menu2: false,
|
||||||
|
pw: "",
|
||||||
|
pw2: ""
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|||||||
Reference in New Issue
Block a user