0351d front end linting (#377)
* feat: disable custom script for trial users * after lint fix * frontend linting --------- Co-authored-by: Julien Nahum <julien@nahum.net>
This commit is contained in:
Favour Olayinka
GitHub
43
client/composables/lib/vForm/Errors.js
vendored
43
client/composables/lib/vForm/Errors.js
vendored
@@ -1,75 +1,74 @@
|
||||
|
||||
function arrayWrap(value) {
|
||||
return Array.isArray(value) ? value : [value];
|
||||
return Array.isArray(value) ? value : [value]
|
||||
}
|
||||
|
||||
export default class Errors {
|
||||
constructor() {
|
||||
this.errors = {};
|
||||
this.errors = {}
|
||||
}
|
||||
|
||||
set(field, messages = undefined) {
|
||||
if (typeof field === 'object') {
|
||||
this.errors = field;
|
||||
if (typeof field === "object") {
|
||||
this.errors = field
|
||||
} else {
|
||||
this.set({ ...this.errors, [field]: arrayWrap(messages) });
|
||||
this.set({ ...this.errors, [field]: arrayWrap(messages) })
|
||||
}
|
||||
}
|
||||
|
||||
all() {
|
||||
return this.errors;
|
||||
return this.errors
|
||||
}
|
||||
|
||||
has(field) {
|
||||
return Object.prototype.hasOwnProperty.call(this.errors, field);
|
||||
return Object.prototype.hasOwnProperty.call(this.errors, field)
|
||||
}
|
||||
|
||||
hasAny(...fields) {
|
||||
return fields.some(field => this.has(field));
|
||||
return fields.some((field) => this.has(field))
|
||||
}
|
||||
|
||||
any() {
|
||||
return Object.keys(this.errors).length > 0;
|
||||
return Object.keys(this.errors).length > 0
|
||||
}
|
||||
|
||||
get(field) {
|
||||
if (this.has(field)) {
|
||||
return this.getAll(field)[0];
|
||||
return this.getAll(field)[0]
|
||||
}
|
||||
}
|
||||
|
||||
getAll(field) {
|
||||
return arrayWrap(this.errors[field] || []);
|
||||
return arrayWrap(this.errors[field] || [])
|
||||
}
|
||||
|
||||
only(...fields) {
|
||||
const messages = [];
|
||||
const messages = []
|
||||
|
||||
fields.forEach((field) => {
|
||||
const message = this.get(field);
|
||||
const message = this.get(field)
|
||||
if (message) {
|
||||
messages.push(message);
|
||||
messages.push(message)
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
return messages;
|
||||
return messages
|
||||
}
|
||||
|
||||
flatten() {
|
||||
return Object.values(this.errors).reduce((a, b) => a.concat(b), []);
|
||||
return Object.values(this.errors).reduce((a, b) => a.concat(b), [])
|
||||
}
|
||||
|
||||
clear(field = undefined) {
|
||||
const errors = {};
|
||||
const errors = {}
|
||||
|
||||
if (field) {
|
||||
Object.keys(this.errors).forEach((key) => {
|
||||
if (key !== field) {
|
||||
errors[key] = this.errors[key];
|
||||
errors[key] = this.errors[key]
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
this.set(errors);
|
||||
this.set(errors)
|
||||
}
|
||||
}
|
||||
|
||||
152
client/composables/lib/vForm/Form.js
vendored
152
client/composables/lib/vForm/Form.js
vendored
@@ -1,170 +1,182 @@
|
||||
import {serialize} from 'object-to-formdata';
|
||||
import Errors from './Errors';
|
||||
import cloneDeep from 'clone-deep';
|
||||
import {opnFetch} from "~/composables/useOpnApi.js";
|
||||
import { serialize } from "object-to-formdata"
|
||||
import Errors from "./Errors"
|
||||
import cloneDeep from "clone-deep"
|
||||
import { opnFetch } from "~/composables/useOpnApi.js"
|
||||
function hasFiles(data) {
|
||||
return data instanceof File ||
|
||||
return (
|
||||
data instanceof File ||
|
||||
data instanceof Blob ||
|
||||
data instanceof FileList ||
|
||||
(typeof data === 'object' && data !== null && Object.values(data).find(value => hasFiles(value)) !== undefined);
|
||||
(typeof data === "object" &&
|
||||
data !== null &&
|
||||
Object.values(data).find((value) => hasFiles(value)) !== undefined)
|
||||
)
|
||||
}
|
||||
|
||||
class Form {
|
||||
constructor(data = {}) {
|
||||
this.originalData = {};
|
||||
this.busy = false;
|
||||
this.successful = false;
|
||||
this.recentlySuccessful = false;
|
||||
this.recentlySuccessfulTimeoutId = undefined;
|
||||
this.errors = new Errors();
|
||||
this.update(data);
|
||||
this.originalData = {}
|
||||
this.busy = false
|
||||
this.successful = false
|
||||
this.recentlySuccessful = false
|
||||
this.recentlySuccessfulTimeoutId = undefined
|
||||
this.errors = new Errors()
|
||||
this.update(data)
|
||||
}
|
||||
|
||||
static errorMessage = 'Something went wrong. Please try again.';
|
||||
static recentlySuccessfulTimeout = 2000;
|
||||
static ignore = ['busy', 'successful', 'errors', 'originalData', 'recentlySuccessful', 'recentlySuccessfulTimeoutId'];
|
||||
static errorMessage = "Something went wrong. Please try again."
|
||||
static recentlySuccessfulTimeout = 2000
|
||||
static ignore = [
|
||||
"busy",
|
||||
"successful",
|
||||
"errors",
|
||||
"originalData",
|
||||
"recentlySuccessful",
|
||||
"recentlySuccessfulTimeoutId",
|
||||
]
|
||||
|
||||
static make(augment) {
|
||||
return new this(augment);
|
||||
return new this(augment)
|
||||
}
|
||||
|
||||
update(data) {
|
||||
this.originalData = Object.assign({}, this.originalData, cloneDeep(data));
|
||||
Object.assign(this, data);
|
||||
this.originalData = Object.assign({}, this.originalData, cloneDeep(data))
|
||||
Object.assign(this, data)
|
||||
}
|
||||
|
||||
fill(data = {}) {
|
||||
this.keys().forEach((key) => {
|
||||
this[key] = data[key];
|
||||
});
|
||||
this[key] = data[key]
|
||||
})
|
||||
}
|
||||
|
||||
data() {
|
||||
return this.keys().reduce((data, key) => (
|
||||
{...data, [key]: this[key]}
|
||||
), {});
|
||||
return this.keys().reduce(
|
||||
(data, key) => ({ ...data, [key]: this[key] }),
|
||||
{},
|
||||
)
|
||||
}
|
||||
|
||||
keys() {
|
||||
return Object.keys(this).filter(key => !Form.ignore.includes(key));
|
||||
return Object.keys(this).filter((key) => !Form.ignore.includes(key))
|
||||
}
|
||||
|
||||
startProcessing() {
|
||||
this.errors.clear();
|
||||
this.busy = true;
|
||||
this.successful = false;
|
||||
this.recentlySuccessful = false;
|
||||
clearTimeout(this.recentlySuccessfulTimeoutId);
|
||||
this.errors.clear()
|
||||
this.busy = true
|
||||
this.successful = false
|
||||
this.recentlySuccessful = false
|
||||
clearTimeout(this.recentlySuccessfulTimeoutId)
|
||||
}
|
||||
|
||||
finishProcessing() {
|
||||
this.busy = false;
|
||||
this.successful = true;
|
||||
this.recentlySuccessful = true;
|
||||
this.busy = false
|
||||
this.successful = true
|
||||
this.recentlySuccessful = true
|
||||
this.recentlySuccessfulTimeoutId = setTimeout(() => {
|
||||
this.recentlySuccessful = false;
|
||||
}, Form.recentlySuccessfulTimeout);
|
||||
this.recentlySuccessful = false
|
||||
}, Form.recentlySuccessfulTimeout)
|
||||
}
|
||||
|
||||
clear() {
|
||||
this.errors.clear();
|
||||
this.successful = false;
|
||||
this.recentlySuccessful = false;
|
||||
clearTimeout(this.recentlySuccessfulTimeoutId);
|
||||
this.errors.clear()
|
||||
this.successful = false
|
||||
this.recentlySuccessful = false
|
||||
clearTimeout(this.recentlySuccessfulTimeoutId)
|
||||
}
|
||||
|
||||
reset() {
|
||||
Object.keys(this)
|
||||
.filter(key => !Form.ignore.includes(key))
|
||||
.filter((key) => !Form.ignore.includes(key))
|
||||
.forEach((key) => {
|
||||
this[key] = JSON.parse(JSON.stringify(this.originalData[key]));
|
||||
});
|
||||
this[key] = JSON.parse(JSON.stringify(this.originalData[key]))
|
||||
})
|
||||
}
|
||||
|
||||
get(url, config = {}) {
|
||||
return this.submit('get', url, config);
|
||||
return this.submit("get", url, config)
|
||||
}
|
||||
|
||||
post(url, config = {}) {
|
||||
return this.submit('post', url, config);
|
||||
return this.submit("post", url, config)
|
||||
}
|
||||
|
||||
patch(url, config = {}) {
|
||||
return this.submit('patch', url, config);
|
||||
return this.submit("patch", url, config)
|
||||
}
|
||||
|
||||
put(url, config = {}) {
|
||||
return this.submit('put', url, config);
|
||||
return this.submit("put", url, config)
|
||||
}
|
||||
|
||||
delete(url, config = {}) {
|
||||
return this.submit('delete', url, config);
|
||||
return this.submit("delete", url, config)
|
||||
}
|
||||
|
||||
submit(method, url, config = {}) {
|
||||
this.startProcessing();
|
||||
this.startProcessing()
|
||||
|
||||
config = {
|
||||
body: {},
|
||||
params: {},
|
||||
url: url,
|
||||
method: method,
|
||||
...config
|
||||
};
|
||||
...config,
|
||||
}
|
||||
|
||||
if (method.toLowerCase() === 'get') {
|
||||
config.params = {...this.data(), ...config.params};
|
||||
if (method.toLowerCase() === "get") {
|
||||
config.params = { ...this.data(), ...config.params }
|
||||
} else {
|
||||
config.body = {...this.data(), ...config.data};
|
||||
config.body = { ...this.data(), ...config.data }
|
||||
|
||||
if (hasFiles(config.data) && !config.transformRequest) {
|
||||
config.transformRequest = [data => serialize(data)];
|
||||
config.transformRequest = [(data) => serialize(data)]
|
||||
}
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
opnFetch(config.url, config)
|
||||
.then((data) => {
|
||||
this.finishProcessing();
|
||||
resolve(data);
|
||||
}).catch((error) => {
|
||||
this.handleErrors(error);
|
||||
this.finishProcessing()
|
||||
resolve(data)
|
||||
})
|
||||
.catch((error) => {
|
||||
this.handleErrors(error)
|
||||
reject(error)
|
||||
})
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
handleErrors(error) {
|
||||
this.busy = false;
|
||||
this.busy = false
|
||||
|
||||
if (error) {
|
||||
this.errors.set(this.extractErrors(error.data));
|
||||
this.errors.set(this.extractErrors(error.data))
|
||||
}
|
||||
}
|
||||
|
||||
extractErrors(data) {
|
||||
if (!data || typeof data !== 'object') {
|
||||
return {error: Form.errorMessage};
|
||||
|
||||
if (!data || typeof data !== "object") {
|
||||
return { error: Form.errorMessage }
|
||||
}
|
||||
|
||||
if (data.errors) {
|
||||
return {...data.errors};
|
||||
return { ...data.errors }
|
||||
}
|
||||
|
||||
if (data.message) {
|
||||
return {error: data.message};
|
||||
return { error: data.message }
|
||||
}
|
||||
|
||||
return {...data};
|
||||
return { ...data }
|
||||
}
|
||||
|
||||
onKeydown(event) {
|
||||
const target = event.target;
|
||||
const target = event.target
|
||||
|
||||
if (target.name) {
|
||||
this.errors.clear(target.name);
|
||||
this.errors.clear(target.name)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default Form;
|
||||
export default Form
|
||||
|
||||
Reference in New Issue
Block a user