Typescript Terminato! Funziona!
This commit is contained in:
paolo
202
src/classes/AlertsController.ts
Normal file
202
src/classes/AlertsController.ts
Normal file
@@ -0,0 +1,202 @@
|
||||
import { AlertsStore, LoginStore } from '@store';
|
||||
import {Forms} from './FormController';
|
||||
|
||||
import Router from '@router';
|
||||
|
||||
export namespace AlertsElement {
|
||||
|
||||
type AlertType = "success" | "confirm" | "warning" | "error" | "info" | "form";
|
||||
type Diff<T extends string, U extends string> = ({[P in T]: P } & {[P in U]: never } & { [x: string]: never })[T];
|
||||
type Omit<T, K extends keyof T> = Pick<T, Diff<keyof T, K>>;
|
||||
type formParam = {
|
||||
form: Forms.Form,
|
||||
validations?: {
|
||||
[x:string]: any
|
||||
},
|
||||
submit: {
|
||||
params?: {[x:string]: any},
|
||||
trigger: Function
|
||||
}
|
||||
}
|
||||
|
||||
export class Alert{
|
||||
public type: AlertType;
|
||||
public title: string;
|
||||
public message?: string;
|
||||
public strict?: boolean;
|
||||
public actions: ActionsElements.Action[];
|
||||
public formElement?: formParam;
|
||||
public onClose?: Function[]
|
||||
|
||||
constructor(fields?:{type: AlertType, title: string, message?: string, strict?: boolean, actions: ActionsElements.Action[], formElement?: formParam, onClose?: Function[]}) {
|
||||
Object.assign(this, fields);
|
||||
AlertsStore.actions.addAlert(this);
|
||||
}
|
||||
|
||||
async waitResponse() {
|
||||
return AlertsStore.actions.addAlert(this);
|
||||
}
|
||||
}
|
||||
|
||||
export class WarningAlert extends Alert {
|
||||
constructor(fields?: {title: string, message?: string, strict?: boolean, actions?: ActionsElements.Action[], onClose?: Function[]}) {
|
||||
const actions = fields.actions || [];
|
||||
const confirmAction = (fields.actions && fields.actions.find(m => m.type == 'confirm')) ? undefined : new ActionsElements.ConfirmAction({})
|
||||
console.log(fields.actions)
|
||||
super({
|
||||
title: fields.title,
|
||||
type: 'warning',
|
||||
strict: fields.strict,
|
||||
message: fields.message,
|
||||
onClose: fields.onClose,
|
||||
actions: [
|
||||
...actions,
|
||||
confirmAction
|
||||
]
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export class SuccessAlert extends Alert {
|
||||
constructor(fields?: {title: string, message?: string, strict?: boolean, actions?: ActionsElements.Action[], onClose?: Function[]}) {
|
||||
const actions = fields.actions || [];
|
||||
const confirmAction = (fields.actions && fields.actions.find(m => m.type == 'confirm')) ? undefined : new ActionsElements.ConfirmAction({})
|
||||
console.log(fields.actions)
|
||||
super({
|
||||
title: fields.title || 'Opération réussie',
|
||||
type: 'success',
|
||||
strict: fields.strict,
|
||||
message: fields.message,
|
||||
onClose: fields.onClose,
|
||||
actions: [
|
||||
...actions,
|
||||
confirmAction
|
||||
]
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export class ErrorAlert extends Alert {
|
||||
constructor(fields?: {title: string, message?: string, strict?: boolean, actions?: ActionsElements.Action[], onClose?: Function[]}) {
|
||||
const actions = fields.actions || [];
|
||||
console.log(fields.actions)
|
||||
const confirmAction = (fields.actions && fields.actions.find(m => m.type == 'confirm')) ? undefined : new ActionsElements.ConfirmAction({text: 'Fermer'})
|
||||
super({
|
||||
title: fields.title || `Erreur de l'opération`,
|
||||
type: 'error',
|
||||
strict: fields.strict,
|
||||
message: fields.message,
|
||||
onClose: fields.onClose,
|
||||
actions: [
|
||||
...actions,
|
||||
confirmAction
|
||||
]
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export class FormAlert extends Alert {
|
||||
constructor(fields?: {title: string, message?: string, strict?:boolean, formElement: formParam, onClose?: Function[]}) {
|
||||
const confirmAction = new ActionsElements.ConfirmAction({
|
||||
text: 'Valider',
|
||||
triggers: [
|
||||
() => fields.formElement.submit.trigger({form: fields.formElement.form.getData(), ...fields.formElement.submit.params})
|
||||
]
|
||||
})
|
||||
|
||||
super({
|
||||
title: fields.title || '',
|
||||
type: 'form',
|
||||
strict: fields.strict,
|
||||
formElement: fields.formElement,
|
||||
message: fields.message,
|
||||
onClose: fields.onClose,
|
||||
actions: [
|
||||
confirmAction,
|
||||
new ActionsElements.CancelAction()
|
||||
]
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
export namespace ActionsElements {
|
||||
|
||||
type ActionType = "confirm" | "action" | "cancel" | "link";
|
||||
|
||||
export class Action {
|
||||
public type: ActionType;
|
||||
public text: string;
|
||||
public to?: {path: string} | {name: string, params?: {[x: string]: any}};
|
||||
public trigger?: Function;
|
||||
public triggers?: Function[];
|
||||
|
||||
constructor({type, text, trigger, triggers, to}: Action) {
|
||||
this.text = text;
|
||||
this.type = type;
|
||||
this.trigger = trigger;
|
||||
this.triggers = triggers;
|
||||
this.to = to;
|
||||
}
|
||||
}
|
||||
|
||||
export class ConfirmAction extends Action {
|
||||
constructor({text, triggers}: {text?: string, triggers?: Function[]}) {
|
||||
super({
|
||||
text: text || "Ça marche!",
|
||||
type: "confirm",
|
||||
});
|
||||
if (triggers) {
|
||||
this.triggers = [
|
||||
...triggers,
|
||||
AlertsStore.mutations.confirmAlert,
|
||||
];
|
||||
} else {
|
||||
this.trigger = this.trigger = AlertsStore.mutations.confirmAlert;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export class LinkAction extends Action {
|
||||
constructor({text, to}: {text: string, to: {path: string} | {name: string, params?: {[x: string]: any}}}) {
|
||||
super({
|
||||
text: text,
|
||||
to: to,
|
||||
type: "link",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export class LoginAction extends Action {
|
||||
constructor() {
|
||||
super({
|
||||
text: "Se connecter",
|
||||
type: "action",
|
||||
triggers: [
|
||||
LoginStore.mutations.showLogin,
|
||||
AlertsStore.actions.hideAlert
|
||||
]
|
||||
});
|
||||
}
|
||||
}
|
||||
export class CancelAction extends Action {
|
||||
constructor() {
|
||||
super({
|
||||
text: "Annuler",
|
||||
type: "cancel",
|
||||
trigger: AlertsStore.mutations.cancelAlert
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export const triggers = {
|
||||
close() {
|
||||
return AlertsStore.mutations.hideAlert()
|
||||
}
|
||||
}
|
||||
}
|
||||
26
src/classes/DateController.ts
Normal file
26
src/classes/DateController.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
import moment from 'moment';
|
||||
import 'moment/locale/fr';
|
||||
moment.locale('fr')
|
||||
|
||||
const monthsStrings = ['Janvier','Fevrier','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'];
|
||||
|
||||
|
||||
export class DateMoving {
|
||||
public date: moment.Moment;
|
||||
public hour: string;
|
||||
public number: number;
|
||||
public month: string;
|
||||
public year: number;
|
||||
|
||||
constructor(time: number) {
|
||||
this.date = moment(time * 1000);
|
||||
this.hour = `${this.date.format('HH:mm')}`;
|
||||
this.number = this.date.date();
|
||||
this.year = this.date.year();
|
||||
this.month = monthsStrings[this.date.month()];
|
||||
}
|
||||
|
||||
fullString() {
|
||||
return this.date.format('Do MMMM YYYY, HH:mm');
|
||||
}
|
||||
}
|
||||
205
src/classes/FormController.ts
Normal file
205
src/classes/FormController.ts
Normal file
@@ -0,0 +1,205 @@
|
||||
const css = require('@css')
|
||||
|
||||
|
||||
|
||||
export namespace Forms {
|
||||
|
||||
function extractValues(_this, _fieldsData, fields) {
|
||||
for (let prop in fields) {
|
||||
if (fields[prop] instanceof DefaultFormElement) {
|
||||
_this[prop] = fields[prop].value
|
||||
const {value, ...rest} = fields[prop]
|
||||
_fieldsData[prop] = rest
|
||||
} else {
|
||||
_this[prop] = {}
|
||||
_fieldsData[prop] = {}
|
||||
extractValues(_this[prop], _fieldsData[prop], fields[prop])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
export class Form {
|
||||
public initialState: any
|
||||
public fieldsData = {}
|
||||
|
||||
constructor(fields: Object) {
|
||||
extractValues(this, this.fieldsData, fields)
|
||||
this.initialState = fields
|
||||
}
|
||||
|
||||
|
||||
reset() {
|
||||
const form = new Form(this.initialState)
|
||||
Object.keys(form).forEach(key => {
|
||||
this[key] = form[key]
|
||||
})
|
||||
}
|
||||
|
||||
getData(): {[x: string]: any} {
|
||||
const _this = Object.assign({}, this)
|
||||
delete _this.fieldsData
|
||||
delete _this.initialState
|
||||
return _this
|
||||
}
|
||||
|
||||
validations() {
|
||||
return Object.keys(this.fieldsData).map(m => this.fieldsData[m].validations)
|
||||
}
|
||||
}
|
||||
|
||||
type FormType = 'text' | 'number' | 'password' | 'checkbox' | 'radio' | 'email' | 'tel' | 'date' | 'time' | 'datetime-local'
|
||||
type IOptions = {value: any, text: string}
|
||||
type IComponentType = 'FormText' | 'FormField' | 'StarRating' | 'FormSelect' | 'CheckBox' | 'Radio' | 'FormCalendar' | 'FormPlaceSearch' | 'FormUpload'
|
||||
|
||||
interface FormPayload {
|
||||
value?: any
|
||||
tempValue?: any
|
||||
icon?: any
|
||||
type?: FormType
|
||||
placeholder?: string
|
||||
error?: boolean
|
||||
disabled?: boolean
|
||||
required?: boolean
|
||||
inlineIcon?: boolean
|
||||
debounce?: number
|
||||
options?: IOptions[]
|
||||
component?: IComponentType
|
||||
editMode?: boolean
|
||||
noEdit?: boolean
|
||||
validations?: {
|
||||
[x: string]: any
|
||||
}
|
||||
|
||||
}
|
||||
class DefaultFormElement {
|
||||
value: any
|
||||
tempValue?: any
|
||||
icon?: any
|
||||
type?: FormType
|
||||
placeholder?: string
|
||||
required?: boolean
|
||||
error?: boolean
|
||||
disabled?: boolean
|
||||
inlineIcon?: boolean
|
||||
debounce?: number
|
||||
options?: IOptions[]
|
||||
component: IComponentType
|
||||
editMode?: boolean
|
||||
noEdit?: boolean
|
||||
validations?: {
|
||||
[x: string]: any
|
||||
}
|
||||
|
||||
constructor({error = true, required = true, noEdit = false, editMode = false, ...fields}: FormPayload) {
|
||||
this.value = fields.value !== undefined ? fields.value : ''
|
||||
this.icon = fields.icon || null
|
||||
this.type = fields.type || 'text'
|
||||
this.placeholder = fields.placeholder || `${this.type} input`
|
||||
this.error = error
|
||||
this.disabled = fields.disabled || false
|
||||
this.inlineIcon = fields.inlineIcon || false
|
||||
this.debounce = fields.debounce || null
|
||||
this.required = required
|
||||
this.options = fields.options
|
||||
this.component = fields.component || null
|
||||
this.validations = fields.validations
|
||||
this.tempValue = fields.tempValue
|
||||
this.noEdit = noEdit
|
||||
this.editMode = editMode
|
||||
}
|
||||
|
||||
reset() {
|
||||
this.value = null
|
||||
}
|
||||
}
|
||||
|
||||
export class TextForm extends DefaultFormElement {
|
||||
constructor(fields: FormPayload) {
|
||||
super({...fields, component: 'FormText'})
|
||||
}
|
||||
}
|
||||
|
||||
export class FieldForm extends DefaultFormElement {
|
||||
constructor(fields: FormPayload) {
|
||||
super({...fields, component: 'FormField'})
|
||||
}
|
||||
}
|
||||
export class UploadForm extends DefaultFormElement {
|
||||
constructor(fields: FormPayload) {
|
||||
super({...fields, component: 'FormUpload'})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export class PlaceSearchForm extends DefaultFormElement {
|
||||
constructor(fields: FormPayload) {
|
||||
super({...fields, component: 'FormPlaceSearch'})
|
||||
}
|
||||
}
|
||||
|
||||
export class CalendarForm extends DefaultFormElement {
|
||||
constructor(fields: FormPayload) {
|
||||
super({...fields, component: 'FormCalendar'})
|
||||
}
|
||||
}
|
||||
|
||||
export class Radio extends DefaultFormElement {
|
||||
constructor(fields: FormPayload) {
|
||||
super({...fields, type: 'radio', component: 'Radio'})
|
||||
}
|
||||
}
|
||||
|
||||
export class Select extends DefaultFormElement {
|
||||
constructor(fields: FormPayload) {
|
||||
super({...fields, component: 'FormSelect'})
|
||||
}
|
||||
}
|
||||
|
||||
export class CheckBox extends DefaultFormElement {
|
||||
constructor(fields: FormPayload) {
|
||||
super({...fields, type: 'checkbox', component: 'CheckBox'})
|
||||
}
|
||||
}
|
||||
|
||||
interface StarPayload extends FormPayload {
|
||||
starCount?: number,
|
||||
baseColor?: string,
|
||||
selectedColor?: string,
|
||||
hoverColor?: string,
|
||||
editable?: boolean,
|
||||
init?: number,
|
||||
size?: number,
|
||||
displayNote?: boolean,
|
||||
center?: boolean
|
||||
}
|
||||
|
||||
export class StarRating extends DefaultFormElement {
|
||||
starCount?: number
|
||||
baseColor?: string
|
||||
selectedColor?: string
|
||||
hoverColor?: string
|
||||
editable?: boolean
|
||||
init?: number
|
||||
size?: number
|
||||
displayNote?: boolean
|
||||
center?: boolean
|
||||
|
||||
constructor(fields: StarPayload) {
|
||||
fields.component = 'StarRating'
|
||||
super(fields)
|
||||
this.starCount = fields.starCount || 5
|
||||
this.baseColor = fields.baseColor || css.mainStyle
|
||||
this.selectedColor = fields.selectedColor || css.mainStyle
|
||||
this.hoverColor = fields.hoverColor || css.yellow1
|
||||
this.editable = fields.editable != null ? fields.editable : true
|
||||
this.init = fields.init || 0
|
||||
this.size = fields.size || 25
|
||||
this.displayNote = fields.displayNote != null ? fields.displayNote : false
|
||||
this.center = fields.center != null ? fields.center : true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
3
src/classes/index.ts
Normal file
3
src/classes/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export * from './AlertsController'
|
||||
export * from './FormController'
|
||||
export * from './DateController'
|
||||
Reference in New Issue
Block a user