Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-30 14:06:13 +00:00
Code Issues Actions Projects Releases Wiki Activity

wip on app2

Browse Source
This commit is contained in:
Julien Fastré 2022-06-23 12:26:48 +02:00
parent 6b3b010631
commit d8f80f3d02
44 changed files with 545 additions and 358 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/Bundle/ChillCalendarBundle/Resources/public/types.ts
View File

@ -1,46 +1,10 @@
import {EventInput} from '@fullcalendar/vue3';
export interface DateTime {
datetime: string;
datetime8601: string
}
export interface Job {
id: number;
interface: "user_job";
label: {
"fr": string; // could have other key. How to do that in ts ?
}
}
export interface Center {
id: number;
interface: "center";
name: string;
}
export interface Scope {
id: number;
interface: "scope";
name: {
"fr": string
}
}
export interface User {
interface: "user";
id: number;
username: string;
text: string;
email: string;
user_job: Job;
// todo: mainCenter; mainJob; etc..
}
import {DateTime, User} from 'ChillMainAssets/types';
export interface CalendarRange {
id: number;
endDate: DateTime;
startdate: DateTime;
startDate: DateTime;
user: User;
createdAt: DateTime;
createdBy: User;
@ -52,3 +16,11 @@ export interface Calendar {
id: number;
}
export interface CalendarRemote {
id: number;
endDate: DateTime;
startDate: DateTime;
title: string
}
export {};

5
src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/api.d.ts vendored
View File

@ -1,5 +0,0 @@
export function whoami(): import('ChillCalendarAssets/types').User;
export function fetchCalendarRangeForUser(user: import('ChillCalendarAssets/types').User, start: Date, end: Date): import('ChillCalendarAssets/types').CalendarRange[];
export function fetchCalendarRemoteForUser(user: import('ChillCalendarAssets/types').User, start: Date, end: Date): import('ChillCalendarAssets/types').Calendar[];

18
src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/api.js → src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/api.ts
View File

@ -1,7 +1,9 @@
import {fetchResults} from 'ChillMainAssets/lib/api/apiMethods';
import {datetimeToISO} from 'ChillMainAssets/chill/js/date';
import {User} from 'ChillMainAssets/types';
import {CalendarRange, CalendarRemote} from 'ChillCalendarAssets/types';
const whoami = () => {
export const whoami = (): Promise<User> => {
const url = `/api/1.0/main/whoami.json`;
return fetch(url)
.then(response => {
@ -25,24 +27,18 @@ const whoami = () => {
* @param Date end
* @return Promise
*/
const fetchCalendarRangeForUser = (user, start, end) => {
export const fetchCalendarRangeForUser = (user: User, start: Date, end: Date): Promise<CalendarRange[]> => {
const uri = `/api/1.0/calendar/calendar-range-available/${user.id}.json`;
const dateFrom = datetimeToISO(start);
const dateTo = datetimeToISO(end);
return fetchResults(uri, {dateFrom, dateTo});
return fetchResults<CalendarRange>(uri, {dateFrom, dateTo});
}
const fetchCalendarRemoteForUser = (user, start, end) => {
export const fetchCalendarRemoteForUser = (user: User, start: Date, end: Date): Promise<CalendarRemote[]> => {
const uri = `/api/1.0/calendar/proxy/calendar/by-user/${user.id}/events`;
const dateFrom = datetimeToISO(start);
const dateTo = datetimeToISO(end);
return fetchResults(uri, {dateFrom, dateTo});
return fetchResults<CalendarRemote>(uri, {dateFrom, dateTo});
}
export {
whoami,
fetchCalendarRangeForUser,
fetchCalendarRemoteForUser,
};

0
src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/const.js → src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/const.ts
View File

2
src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/utils.d.ts vendored
View File

@ -1,2 +0,0 @@
export function calendarRangeToFullCalendarEvent(entity: import('ChillCalendarAssets/types').CalendarRange): import('@fullcalendar/vue3').EventInput;

33
src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/utils.js → src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/utils.ts
View File

@ -1,14 +1,26 @@
import {COLORS} from '../const';
import {ISOToDatetime} from 'ChillMainAssets/chill/js/date';
import {DateTime, User} from 'ChillMainAssets/types';
import {CalendarRange, CalendarRemote} from 'ChillCalendarAssets/types';
import {EventInput} from '@fullcalendar/vue3';
const addIdToValue = (string, id) => {
export interface UserData {
user: User,
calendarRanges: CalendarRange[],
calendarRangesLoaded: {}[],
remotes: CalendarRemote[],
remotesLoaded: {}[],
mainColor: string,
}
export const addIdToValue = (string: string, id: number): string => {
let array = string ? string.split(',') : [];
array.push(id.toString());
let str = array.join();
return str;
};
const removeIdFromValue = (string, id) => {
export const removeIdFromValue = (string: string, id: number) => {
let array = string.split(',');
array = array.filter(el => el !== id.toString());
let str = array.join();
@ -18,7 +30,7 @@ const removeIdFromValue = (string, id) => {
/*
* Assign missing keys for the ConcernedGroups component
*/
const mapEntity = (entity) => {
export const mapEntity = (entity: EventInput): EventInput => {
let calendar = { ...entity};
Object.assign(calendar, {thirdParties: entity.professionals});
@ -37,7 +49,7 @@ const mapEntity = (entity) => {
return calendar;
};
const createUserData = (user, colorIndex) => {
export const createUserData = (user: User, colorIndex: number): UserData => {
const colorId = colorIndex % COLORS.length;
console.log('colorId', colorId);
return {
@ -51,7 +63,7 @@ const createUserData = (user, colorIndex) => {
}
// TODO move this function to a more global namespace, as it is in use in MyCalendarRange app
const calendarRangeToFullCalendarEvent = (entity) => {
export const calendarRangeToFullCalendarEvent = (entity: CalendarRange): EventInput & {id: string} => {
return {
id: `range_${entity.id}`,
title: "(" + entity.user.text + ")",
@ -64,7 +76,7 @@ const calendarRangeToFullCalendarEvent = (entity) => {
};
}
const remoteToFullCalendarEvent = (entity) => {
export const remoteToFullCalendarEvent = (entity: CalendarRemote): EventInput & {id: string} => {
console.log(entity);
return {
id: `range_${entity.id}`,
@ -75,12 +87,3 @@ const remoteToFullCalendarEvent = (entity) => {
is: 'remote',
};
}
export {
addIdToValue,
calendarRangeToFullCalendarEvent,
removeIdFromValue,
remoteToFullCalendarEvent,
mapEntity,
createUserData,
};

70
src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App.vue
View File

@ -11,7 +11,7 @@
<label class="form-check-label" for="weekends">{{ $t('show_weekends') }}</label>
</div>
<div>Il y a {{ this.eventSource[0].events.length }} events</div>
<div>Il y a {{ this.calendarOptions.eventSources[0].events.length }} events</div>
<FullCalendar ref="fullCalendar" :options="calendarOptions">
<template v-slot:eventContent='arg' >
@ -96,7 +96,7 @@ import interactionPlugin from '@fullcalendar/interaction';
import timeGridPlugin from '@fullcalendar/timegrid';
import Modal from 'ChillMainAssets/vuejs/_components/Modal';
import { mapGetters, mapActions, mapState } from 'vuex';
import { vShow } from 'vue';
import { vShow} from 'vue';
export default {
name: "App",
@ -104,6 +104,12 @@ export default {
FullCalendar,
Modal
},
renderTracked(event) {
console.log('renderTracked' ,event);
},
renderTriggered(e) {
console.log('renderTriggered', e);
},
data() {
return {
errorMsg: [],
@ -122,14 +128,19 @@ export default {
lastNewDate: null,
disableCopyDayButton: true,
showWeekends: false,
eventSources: [],
start: new Date(),
}
},
computed: {
...mapState({
rangesToCopy: state => state.rangesToCopy
rangesToCopy: state => state.rangesToCopy,
key: state => {
let k = state.fullCalendar.key + state.calendarRanges.key;
console.log('key', k);
return k;
},
}),
//...mapGetters(),
...mapGetters(['getEventSources']),
/*, 'appointmentSource'*/
showMyCalendarWidget: {
set(value) {
@ -139,32 +150,22 @@ export default {
return this.showMyCalendar;
}
},
/*
events() {
let e = this.$store.getters.getEventSources;
console.log('events', e);
e.push(
{
id: 'fake',
events: [
{
start: '2022-06-17T12:00:00+02:00',
end: '2022-06-17T14:00:00+02:00',
title: Math.random().toString(36).slice(2, 7),
}
]
}
);
return e;
let sources = this.getEventSources;
console.log('events', sources);
return function (calendarInfo, successCallback, failureCallback) {
successCallback(sources);
}
},
*/
calendarOptions() {
return {
locale: frLocale,
plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin ],
plugins: [interactionPlugin, timeGridPlugin],
initialView: 'timeGridWeek',
initialDate: window.startDate !== undefined ? window.startDate : new Date(),
initialDate: new Date(),
selectable: true,
select: this.onDateSelect,
datesSet: this.onDatesSet,
@ -172,22 +173,32 @@ export default {
eventDrop: this.onEventDropOrResize,
eventResize: this.onEventDropOrResize,
eventClick: this.onEventClick,
eventSources: this.eventSources,
eventSources: this.getEventSources,
selectMirror: false,
editable: true,
weekends: this.showWeekends,
slotDuration: '00:15:00',
slotMinTime: "08:00:00",
slotMaxTime: "19:00:00",
contentHeight: 500,
//contentHeight: 500,
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth timeGridWeek timeGridDay'
right: 'timeGridWeek timeGridDay'
},
};
},
},
watch: {
key() {
console.log('key changed');
this.calendarOptions.initialDate = this.start;
//this.$refs.fullCalendar.getApi().render();
},
calendarOptions() {
console.log('calendar options changed');
}
},
methods: {
...mapActions([
//'fetchRanges',
@ -198,10 +209,11 @@ export default {
]),
onDatesSet(event) {
console.log('onDatesSet', event);
this.start = event.start;
this.$store.dispatch('fullCalendar/setCurrentDatesView', {start: event.start, end: event.end})
.then(source => {
console.log('onDatesSet finished');
this.eventSources.push(source);
//this.eventSources.push(source);
});
},
openModal() {

59
src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App2.vue Normal file
View File

@ -0,0 +1,59 @@
<template>
<p>Il y a {{eventSources[0].events.length}} événements</p>
<FullCalendar :options="calendarOptions"></FullCalendar>
</template>
<script setup lang="ts">
//import {CalendarOptions, DatesSetArg, EventSourceInput} from '@fullcalendar/vue3';
import {reactive, computed, ref} from "vue";
import {mapGetters, useStore} from "vuex";
import {key} from './store';
import '@fullcalendar/core/vdom'; // solves problem with Vite
import frLocale from '@fullcalendar/core/locales/fr';
import FullCalendar from '@fullcalendar/vue3';
import interactionPlugin from "@fullcalendar/interaction";
import timeGridPlugin from "@fullcalendar/timegrid";
const store = useStore(key);
const eventSources = computed<[]>(() => {
console.log('event sources');
return store.getters.getEventSources;
});
const calendarOptions = computed(() => {
return {
locale: frLocale,
plugins: [interactionPlugin, timeGridPlugin],
initialView: 'timeGridWeek',
initialDate: new Date(),
selectable: true,
datesSet: onDatesSet,
eventSources: eventSources.value,
selectMirror: false,
editable: true,
slotDuration: '00:15:00',
slotMinTime: "08:00:00",
slotMaxTime: "19:00:00",
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'timeGridWeek timeGridDay'
},
};
});
function onDatesSet(event: any) {
console.log('onDatesSet', event);
store.dispatch('fullCalendar/setCurrentDatesView', {start: event.start, end: event.end})
.then(source => {
console.log('onDatesSet finished');
//this.eventSources.push(source);
});
}
</script>
<style scoped>
</style>

0
src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.js → src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/i18n.ts
View File

20
src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/index.js
View File

@ -1,16 +1,18 @@
import { createApp } from 'vue';
import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n'
import { appMessages } from './i18n'
import store from './store/index'
import futureStore from './store/index'
import App from './App.vue';
const i18n = _createI18n(appMessages);
futureStore().then((store) => {
const i18n = _createI18n(appMessages);
const app = createApp({
template: `<app></app>`,
})
.use(store)
.use(i18n)
.component('app', App)
.mount('#myCalendar');
const app = createApp({
template: `<app></app>`,
})
.use(store)
.use(i18n)
.component('app', App)
.mount('#myCalendar');
});

18
src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/index2.ts Normal file
View File

@ -0,0 +1,18 @@
import { createApp } from 'vue';
//import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n'
//import { appMessages } from './i18n'
import futureStore, {key} from './store/index'
import App2 from './App2.vue';
futureStore().then((store) => {
//const i18n = _createI18n(appMessages);
const app = createApp({
template: `<app></app>`,
})
.use(store, key)
//.use(i18n)
.component('app', App2)
.mount('#myCalendar');
});

11
src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/index.d.ts vendored
View File

@ -1,11 +0,0 @@
import 'es6-promise/auto';
import { MeState } from './modules/me';
import { FullCalendarState } from './modules/fullcalendar';
import { CalendarRangesState } from './modules/calendarRanges';
export interface State {
me: MeState;
fullCalendar: FullCalendarState;
calendarRanges: CalendarRangesState;
}
declare const store: import("vuex").Store<State>;
export default store;

94
src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/index.ts
View File

@ -1,13 +1,14 @@
import 'es6-promise/auto';
import Vuex from 'vuex';
import {Store, createStore} from 'vuex';
import {InjectionKey} from "vue";
//import actions from './actions';
//import getters from './getters';
//import mutations from './mutations';
import {User} from 'ChillCalendarAssets/types';
import me, {MeState} from './modules/me';
import fullCalendar, {FullCalendarState} from './modules/fullcalendar';
import calendarRanges, {CalendarRangesState} from './modules/calendarRanges';
import calendarRanges, {CalendarRangesState, RangeSource} from './modules/calendarRanges';
import {whoami} from 'ChillCalendarAssets/vuejs/Calendar/api';
import {User} from 'ChillMainAssets/types';
const debug = process.env.NODE_ENV !== 'production';
@ -18,46 +19,61 @@ export interface State {
startDate: Date|null,
endDate: Date|null,
*/
me: MeState,
fullCalendar: FullCalendarState,
//key: number,
calendarRanges: CalendarRangesState,
fullCalendar: FullCalendarState
}
const store = new Vuex.Store<State>({
strict: debug,
modules: {
me,
fullCalendar,
calendarRanges,
},
getters: {
getEventSources(state, getters) {
let s = [
getters["calendarRanges/getRangeSource"],
];
export const key: InjectionKey<Store<State>> = Symbol();
console.log('getEventSources', s);
const futureStore = function(): Promise<Store<State>> {
return whoami().then((user: User) => {
const store = createStore<State>({
strict: debug,
/*
state: (): State => ({
//key: 0,
}),
return s;
}
}
/*
state: {
appointments: [],
appointmentsShown: true,
startDate: null,
endDate: null,
},
*/
//getters,
//mutations,
//actions,
});
*/
modules: {
me,
fullCalendar,
calendarRanges,
},
getters: {
getEventSources(state, getters, rootState): RangeSource[] {
let s = [];
s.push(rootState.calendarRanges.rangeSource);
whoami().then((me: User) => {
store.commit('me/setWhoAmi', me, {root: true})
store.dispatch('calendarRanges/fetchRanges', null, {root: true});
});
console.log('getEventSources', s);
export default store;
return s;
},
},
mutations: {
increaseKey(state: State) {
//state.key = state.key + 1;
}
}
/*
state: {
appointments: [],
appointmentsShown: true,
startDate: null,
endDate: null,
},
*/
//getters,
//mutations,
//actions,
});
store.commit('me/setWhoAmi', user, {root: true})
//store.dispatch('calendarRanges/fetchRanges', null, {root: true});
return Promise.resolve(store);
});
}
export default futureStore;

109
src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/calendarRanges.ts
View File

@ -1,43 +1,66 @@
import {State} from './../index';
import {ActionContext} from 'vuex';
import {ActionContext, Module} from 'vuex';
import {CalendarRange/*, CalendarRangeEvent*/} from 'ChillCalendarAssets/types';
import {fetchCalendarRangeForUser} from 'ChillCalendarAssets/vuejs/Calendar/api';
import {calendarRangeToFullCalendarEvent/*, CalendarRangeEvent*/} from 'ChillCalendarAssets/vuejs/Calendar/store/utils';
import {EventInput} from '@fullcalendar/vue3';
export interface CalendarRangesState {
ranges: EventInput[],
rangesLoaded: {start: Date, end: Date}[],
rangesIndex: Set<string>,
}
import {EventInput, EventSource} from '@fullcalendar/vue3';
export interface RangeSource {
id: string,
events: EventInput[],
borderColor: string,
backgroundColor: string,
textColor: string
//borderColor: string,
//backgroundColor: string,
//textColor: string
}
export interface CalendarRangesState {
rangeSource: RangeSource,
rangesLoaded: {start: number, end: number}[],
rangesIndex: Set<string>,
key: number
}
type Context = ActionContext<CalendarRangesState, State>;
export default {
export default <Module<CalendarRangesState, State>> {
namespaced: true,
state: (): CalendarRangesState => ({
ranges: [],
rangeSource: {
id: 'ranges',
events: [],
//borderColor: "#3788d8",
//backgroundColor: '#ffffff',
//textColor: '#444444',
},
rangesLoaded: [],
rangesIndex: new Set<string>
rangesIndex: new Set<string>(),
key: 0
}),
getters: {
/*
getRangeSource(state: CalendarRangesState): RangeSource {
let o = {
const o = {
id: 'ranges',
events: state.ranges,
borderColor: "#3788d8",
backgroundColor: '#ffffff',
textColor: '#444444',
//borderColor: "#3788d8",
//backgroundColor: '#ffffff',
//textColor: '#444444',
}
console.log('getRangeSource', o);
return o;
},
*/
isRangeLoaded: (state: CalendarRangesState) => ({start, end}: {start: Date, end: Date}): boolean => {
for (let range of state.rangesLoaded) {
if (start.getTime() === range.start && end.getTime() === range.end) {
return true;
}
}
return false;
},
},
mutations: {
addRanges(state: CalendarRangesState, ranges: CalendarRange[]) {
@ -46,12 +69,17 @@ export default {
const toAdd = ranges
.map(cr => calendarRangeToFullCalendarEvent(cr))
.filter(r => !state.rangesIndex.has(r.id));
state.ranges.push(...toAdd);
toAdd.forEach((r) => {state.rangesIndex.add(r.id)});
console.log('ranges', state.ranges);
console.log('toAdd', toAdd);
//state.rangeSource.events.push(...toAdd);
toAdd.forEach((r) => {
state.rangesIndex.add(r.id);
state.rangeSource.events.push(r);
});
state.key = state.key + toAdd.length;
console.log('ranges', state.rangeSource.events);
},
addLoaded(state: CalendarRangesState, payload: {start: Date, end: Date}) {
state.rangesLoaded.push({start: payload.start, end: payload.end});
state.rangesLoaded.push({start: payload.start.getTime(), end: payload.end.getTime()});
},/*
setRangesToCopy(state: State, payload: CalendarRange[]) {
@ -59,49 +87,52 @@ export default {
},*/
addRange(state: CalendarRangesState, payload: CalendarRange) {
const asEvent = calendarRangeToFullCalendarEvent(payload);
state.ranges = [...state.ranges, asEvent];
state.rangeSource.events.push(asEvent);
state.rangesIndex.add(asEvent.id);
state.key = state.key + 1;
},
removeRange(state: CalendarRangesState, payload: EventInput) {
/*
state.ranges = state.ranges.filter(
(r) => r.id !== payload.id
);
if (typeof payload.id === "string") {
state.rangesIndex.delete(payload.id);
}
state.key = state.key + 1;
*/
},
},
actions: {
fetchRanges(ctx: Context): Promise<RangeSource> {
console.log('fetchRanges');
fetchRanges(ctx: Context, payload: {start: Date, end: Date}): Promise<null> {
console.log('fetchRanges', payload);
const start = payload.start;
const end = payload.end;
if (ctx.rootGetters['me/getMe'] === null) {
console.log('me is not there');
return Promise.resolve(ctx.getters.getRangeSource);
}
if (ctx.rootState.fullCalendar.currentView.start === null || ctx.rootState.fullCalendar.currentView.end === null) {
console.log('current view dates are null');
return Promise.resolve(ctx.getters.getRangeSource);
}
if (ctx.getters.isRangeLoaded) {
/*
if (ctx.getters.isRangeLoaded({start, end})) {
console.log('range already loaded');
return Promise.resolve(ctx.getters.getRangeSource);
}
}*/
ctx.commit('addLoaded', {
start: ctx.rootState.fullCalendar.currentView.start,
end: ctx.rootState.fullCalendar.currentView.end,
start: start,
end: end,
});
return fetchCalendarRangeForUser(
ctx.rootGetters['me/getMe'],
ctx.rootState.fullCalendar.currentView.start,
ctx.rootState.fullCalendar.currentView.end
start,
end
)
.then((ranges: CalendarRange[]) => {
.then((ranges) => {
ctx.commit('addRanges', ranges);
return Promise.resolve(ctx.getters.getRangeSource);
return Promise.resolve(null);
});
}
}

25
src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/fullcalendar.ts
View File

@ -6,7 +6,8 @@ export interface FullCalendarState {
currentView: {
start: Date|null,
end: Date|null,
}
},
key: number
}
type Context = ActionContext<FullCalendarState, State>;
@ -17,20 +18,32 @@ export default {
currentView: {
start: null,
end: null,
}
},
key: 0,
}),
mutations: {
setCurrentDatesView: function(state: FullCalendarState, payload: {start: Date, end: Date}): void {
state.currentView.start = payload.start;
state.currentView.end = payload.end;
},
increaseKey: function(state: FullCalendarState): void {
state.key = state.key + 1;
}
},
actions: {
setCurrentDatesView(ctx: Context, p: {start: Date, end: Date}): Promise<RangeSource> {
console.log('dispatch setCurrentDatesView', p);
ctx.commit('setCurrentDatesView', {start: p.start, end: p.end});
setCurrentDatesView(ctx: Context, {start, end}: {start: Date|null, end: Date|null}): Promise<null> {
console.log('dispatch setCurrentDatesView', {start, end});
return ctx.dispatch('calendarRanges/fetchRanges', null, {root: true});
if (ctx.state.currentView.start !== start || ctx.state.currentView.end !== end) {
ctx.commit('setCurrentDatesView', {start, end});
}
if (start !== null && end !== null) {
console.log('start, end', {start, end});
return ctx.dispatch('calendarRanges/fetchRanges', {start, end}, {root: true}).then(_ => Promise.resolve(null));
} else {
return Promise.resolve(null);
}
},
}
}

2
src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/store/modules/me.ts
View File

@ -1,5 +1,5 @@
import {State} from './../index';
import {User} from 'ChillCalendarAssets/types';
import {User} from 'ChillMainAssets/types';
import {ActionContext} from 'vuex';
export interface MeState {

2
src/Bundle/ChillCalendarBundle/chill.webpack.config.js
View File

@ -6,7 +6,7 @@ module.exports = function(encore, entries) {
});
encore.addEntry('vue_calendar', __dirname + '/Resources/public/vuejs/Calendar/index.js');
encore.addEntry('vue_mycalendarrange', __dirname + '/Resources/public/vuejs/MyCalendarRange/index.js');
encore.addEntry('vue_mycalendarrange', __dirname + '/Resources/public/vuejs/MyCalendarRange/index2.ts');
encore.addEntry('page_calendar', __dirname + '/Resources/public/chill/index.js');
encore.addEntry('mod_answer', __dirname + '/Resources/public/module/Invite/answer.js');
};

2
src/Bundle/ChillDocGeneratorBundle/Resources/public/api/pickTemplate.js
View File

@ -1,4 +1,4 @@
import { fetchResults } from "ChillMainAssets/lib/api/apiMethods.js";
import { fetchResults } from "ChillMainAssets/lib/api/apiMethods.ts";
const fetchTemplates = (entityClass) => {
let fqdnEntityClass = encodeURI(entityClass);

2
src/Bundle/ChillMainBundle/Resources/public/chill/index.js
View File

@ -24,7 +24,7 @@ require('./chillmain.scss');
import { chill } from './js/chill.js';
global.chill = chill;
require('./js/date.js');
require('./js/date');
require('./js/counter.js');
/// Load fonts

27
src/Bundle/ChillMainBundle/Resources/public/chill/js/date.js → src/Bundle/ChillMainBundle/Resources/public/chill/js/date.ts
View File

@ -12,7 +12,7 @@
* Do not take time into account
*
*/
const dateToISO = (date) => {
export const dateToISO = (date: Date|null): string|null => {
if (null === date) {
return null;
}
@ -29,7 +29,7 @@ const dateToISO = (date) => {
*
* **Experimental**
*/
const ISOToDate = (str) => {
export const ISOToDate = (str: string|null): Date|null => {
if (null === str) {
return null;
}
@ -38,7 +38,7 @@ const ISOToDate = (str) => {
}
let
[year, month, day] = str.split('-');
[year, month, day] = str.split('-').map(p => parseInt(p));
return new Date(year, month-1, day);
}
@ -47,16 +47,16 @@ const ISOToDate = (str) => {
* Return a date object from iso string formatted as YYYY-mm-dd:HH:MM:ss+01:00
*
*/
const ISOToDatetime = (str) => {
export const ISOToDatetime = (str: string|null): Date|null => {
if (null === str) {
return null;
}
let
[cal, times] = str.split('T'),
[year, month, date] = cal.split('-'),
[year, month, date] = cal.split('-').map(s => parseInt(s)),
[time, timezone] = times.split(times.charAt(8)),
[hours, minutes, seconds] = time.split(':')
[hours, minutes, seconds] = time.split(':').map(s => parseInt(s));
;
return new Date(year, month-1, date, hours, minutes, seconds);
@ -66,7 +66,7 @@ const ISOToDatetime = (str) => {
* Convert a date to ISO8601, valid for usage in api
*
*/
const datetimeToISO = (date) => {
export const datetimeToISO = (date: Date): string => {
let cal, time, offset;
cal = [
date.getFullYear(),
@ -92,7 +92,7 @@ const datetimeToISO = (date) => {
return x;
};
const intervalDaysToISO = (days) => {
export const intervalDaysToISO = (days: number|string|null): string => {
if (null === days) {
return 'P0D';
}
@ -100,7 +100,7 @@ const intervalDaysToISO = (days) => {
return `P${days}D`;
}
const intervalISOToDays = (str) => {
export const intervalISOToDays = (str: string|null): number|null => {
if (null === str) {
return null
}
@ -154,12 +154,3 @@ const intervalISOToDays = (str) => {
return days;
}
export {
dateToISO,
ISOToDate,
ISOToDatetime,
datetimeToISO,
intervalISOToDays,
intervalDaysToISO,
};

1
src/Bundle/ChillMainBundle/Resources/public/lib/api/apiMethods.d.ts → src/Bundle/ChillMainBundle/Resources/public/lib/api/apiMethods.d.ts.backup
View File

@ -1,3 +1,4 @@
export function fetchResults<T>(uri: string, params: {item_per_page?: number}): Promise<T[]>;
export function makeFetch<T, B>(method: "GET"|"POST"|"PATCH"|"DELETE", url: string, body: B, options: {[key: string]: string}): Promise<T>;

110
src/Bundle/ChillMainBundle/Resources/public/lib/api/apiMethods.js
View File

@ -1,110 +0,0 @@
/**
* Generic api method that can be adapted to any fetch request
*/
const makeFetch = (method, url, body, options) => {
let opts = {
method: method,
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
body: (body !== null) ? JSON.stringify(body) : null
};
if (typeof options !== 'undefined') {
opts = Object.assign(opts, options);
}
return fetch(url, opts)
.then(response => {
if (response.ok) {
return response.json();
}
if (response.status === 422) {
return response.json().then(response => {
throw ValidationException(response)
});
}
if (response.status === 403) {
throw AccessException(response);
}
throw {
name: 'Exception',
sta: response.status,
txt: response.statusText,
err: new Error(),
violations: response.body
};
});
}
/**
* Fetch results with certain parameters
*/
const _fetchAction = (page, uri, params) => {
const item_per_page = 50;
if (params === undefined) {
params = {};
}
let url = uri + '?' + new URLSearchParams({ item_per_page, page, ...params });
return fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
}).then(response => {
if (response.ok) { return response.json(); }
throw new Error({ m: response.statusText });
});
};
const fetchResults = async (uri, params) => {
let promises = [],
page = 1;
let firstData = await _fetchAction(page, uri, params);
promises.push(Promise.resolve(firstData.results));
if (firstData.pagination.more) {
do {
page = ++page;
promises.push(_fetchAction(page, uri, params).then(r => Promise.resolve(r.results)));
} while (page * firstData.pagination.items_per_page < firstData.count)
}
return Promise.all(promises).then(values => values.flat());
};
const fetchScopes = () => {
return fetchResults('/api/1.0/main/scope.json');
};
/**
* Error objects to be thrown
*/
const ValidationException = (response) => {
const error = {};
error.name = 'ValidationException';
error.violations = response.violations.map((violation) => `${violation.title}: ${violation.propertyPath}`);
error.titles = response.violations.map((violation) => violation.title);
error.propertyPaths = response.violations.map((violation) => violation.propertyPath);
return error;
}
const AccessException = (response) => {
const error = {};
error.name = 'AccessException';
error.violations = ['You are not allowed to perform this action'];
return error;
}
export {
makeFetch,
fetchResults,
fetchScopes
}

164
src/Bundle/ChillMainBundle/Resources/public/lib/api/apiMethods.ts Normal file
View File

@ -0,0 +1,164 @@
import {Scope} from 'ChillMainAssets/types';
export type body = {[key: string]: boolean|string|number|null};
export type fetchOption = {[key: string]: boolean|string|number|null};
export interface Params {
[key: string]: number|string
}
export interface PaginationResponse<T> {
pagination: {
more: boolean;
items_per_page: number;
};
results: T[];
count: number;
}
export interface FetchParams {
[K: string]: string|number|null;
};
export interface ValidationExceptionInterface {
name: 'ValidationException';
error: object;
violations: string[];
titles: string[];
propertyPaths: string[];
}
export interface ValidationErrorResponse {
violations: {
title: string;
propertyPath: string;
}[];
}
export interface AccessExceptionInterface {
name: 'AccessException';
violations: string[];
}
/**
* Generic api method that can be adapted to any fetch request
*/
export const makeFetch = <T, Q>(method: 'POST'|'GET'|'PUT'|'PATCH'|'DELETE', url: string, body?: body | T | null, options?: FetchParams): Promise<Q> => {
let opts = {
method: method,
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
body: (body !== null || typeof body !== 'undefined') ? JSON.stringify(body) : null
};
if (typeof options !== 'undefined') {
opts = Object.assign(opts, options);
}
return fetch(url, opts)
.then(response => {
if (response.ok) {
return response.json();
}
if (response.status === 422) {
return response.json().then(response => {
throw ValidationException(response)
});
}
if (response.status === 403) {
throw AccessException(response);
}
throw {
name: 'Exception',
sta: response.status,
txt: response.statusText,
err: new Error(),
violations: response.body
};
});
}
/**
* Fetch results with certain parameters
*/
function _fetchAction<T>(page: number, uri: string, params?: FetchParams): Promise<PaginationResponse<T>> {
const item_per_page: number = 50;
let searchParams = new URLSearchParams();
searchParams.append('item_per_page', item_per_page.toString());
searchParams.append('page', page.toString());
if (params !== undefined) {
Object.keys(params).forEach(key => {
let v = params[key];
if (typeof v === 'string') {
searchParams.append(key, v);
} else if (typeof v === 'number') {
searchParams.append(key, v.toString());
} else if (v === null) {
searchParams.append(key, '');
}
});
}
let url = uri + '?' + searchParams.toString();
return fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
}).then((response) => {
if (response.ok) { return response.json(); }
throw new Error(response.statusText);
});
};
export const fetchResults = async<T> (uri: string, params?: FetchParams): Promise<T[]> => {
let promises: Promise<T[]>[] = [],
page = 1;
let firstData: PaginationResponse<T> = await _fetchAction(page, uri, params) as PaginationResponse<T>;
promises.push(Promise.resolve(firstData.results));
if (firstData.pagination.more) {
do {
page = ++page;
promises.push(
_fetchAction<T>(page, uri, params).then(r => Promise.resolve(r.results))
);
} while (page * firstData.pagination.items_per_page < firstData.count)
}
return Promise.all(promises).then((values) => values.flat());
};
export const fetchScopes = (): Promise<Scope[]> => {
return fetchResults('/api/1.0/main/scope.json');
};
/**
* Error objects to be thrown
*/
const ValidationException = (response: ValidationErrorResponse): ValidationExceptionInterface => {
const error = {} as ValidationExceptionInterface;
error.name = 'ValidationException';
error.violations = response.violations.map((violation) => `${violation.title}: ${violation.propertyPath}`);
error.titles = response.violations.map((violation) => violation.title);
error.propertyPaths = response.violations.map((violation) => violation.propertyPath);
return error;
}
const AccessException = (response: Response): AccessExceptionInterface => {
const error = {} as AccessExceptionInterface;
error.name = 'AccessException';
error.violations = ['You are not allowed to perform this action'];
return error;
}

36
src/Bundle/ChillMainBundle/Resources/public/types.ts Normal file
View File

@ -0,0 +1,36 @@
export interface DateTime {
datetime: string;
datetime8601: string
}
export interface Job {
id: number;
type: "user_job";
label: {
"fr": string; // could have other key. How to do that in ts ?
}
}
export interface Center {
id: number;
type: "center";
name: string;
}
export interface Scope {
id: number;
type: "scope";
name: {
"fr": string
}
}
export interface User {
type: "user";
id: number;
username: string;
text: string;
email: string;
user_job: Job;
// todo: mainCenter; mainJob; etc..
}

2
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/DatePane.vue
View File

@ -54,7 +54,7 @@
</template>
<script>
import { dateToISO, ISOToDate } from 'ChillMainAssets/chill/js/date.js';
import { dateToISO, ISOToDate } from 'ChillMainAssets/chill/js/date';
import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
import ActionButtons from './ActionButtons.vue';

2
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/EntityWorkflowVueSubscriber.vue
View File

@ -20,7 +20,7 @@
</template>
<script>
import {makeFetch} from 'ChillMainAssets/lib/api/apiMethods.js';
import {makeFetch} from 'ChillMainAssets/lib/api/apiMethods.ts';
export default {
name: "EntityWorkflowVueSubscriber",

2
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadToggle.vue
View File

@ -41,7 +41,7 @@
</template>
<script>
import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods.js';
import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods.ts';
export default {
name: "NotificationReadToggle",

3
src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js → src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.ts
View File

@ -55,11 +55,12 @@ const messages = {
}
};
const _createI18n = (appMessages) => {
const _createI18n = (appMessages: any) => {
Object.assign(messages.fr, appMessages.fr);
return createI18n({
locale: 'fr',
fallbackLocale: 'fr',
// @ts-ignore
datetimeFormats,
messages,
})

0
src/Bundle/ChillMainBundle/Resources/public/vuejs/i18n/datetimeFormats.js → src/Bundle/ChillMainBundle/Resources/public/vuejs/i18n/datetimeFormats.ts
View File

2
src/Bundle/ChillPersonBundle/Resources/public/lib/household.js
View File

@ -1,4 +1,4 @@
import { fetchResults } from 'ChillMainAssets/lib/api/apiMethods.js';
import { fetchResults } from 'ChillMainAssets/lib/api/apiMethods.ts';
const fetchHouseholdByAddressReference = async (reference) => {
const url = `/api/1.0/person/household/by-address-reference/${reference.id}.json`

2
src/Bundle/ChillPersonBundle/Resources/public/mod/AccompanyingPeriod/setReferrer.js
View File

@ -1,6 +1,6 @@
import {createApp} from 'vue';
import SetReferrer from 'ChillPersonAssets/vuejs/_components/AccompanyingPeriod/SetReferrer.vue';
import {fetchResults} from 'ChillMainAssets/lib/api/apiMethods.js';
import {fetchResults} from 'ChillMainAssets/lib/api/apiMethods.ts';
/**
*

2
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js
View File

@ -1,4 +1,4 @@
import { fetchResults } from 'ChillMainAssets/lib/api/apiMethods.js';
import { fetchResults } from 'ChillMainAssets/lib/api/apiMethods.ts';
/*
* Endpoint v.2 chill_api_single_accompanying_course__entity

2
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StartDate.vue
View File

@ -16,7 +16,7 @@
<script>
import { dateToISO, ISOToDatetime} from 'ChillMainAssets/chill/js/date.js';
import { dateToISO, ISOToDatetime} from 'ChillMainAssets/chill/js/date';
import { mapState } from 'vuex';
export default {

4
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
View File

@ -1,6 +1,6 @@
import 'es6-promise/auto';
import { createStore } from 'vuex';
import { fetchScopes } from 'ChillMainAssets/lib/api/apiMethods.js';
import { fetchScopes } from 'ChillMainAssets/lib/api/apiMethods.ts';
import { getAccompanyingCourse,
getReferrersSuggested,
getUsers,
@ -8,7 +8,7 @@ import { getAccompanyingCourse,
import { patchPerson } from "ChillPersonAssets/vuejs/_api/OnTheFly";
import { patchThirdparty } from "ChillThirdPartyAssets/vuejs/_api/OnTheFly";
import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods';
import { datetimeToISO, ISOToDate, ISOToDatetime } from 'ChillMainAssets/chill/js/date.js';
import { datetimeToISO, ISOToDate, ISOToDatetime } from 'ChillMainAssets/chill/js/date';
const debug = process.env.NODE_ENV !== 'production';

2
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkCreate/App.vue
View File

@ -127,7 +127,7 @@
<script>
import { mapState, mapActions, mapGetters } from 'vuex';
import VueMultiselect from 'vue-multiselect';
import { dateToISO, ISOToDate } from 'ChillMainAssets/chill/js/date.js';
import { dateToISO, ISOToDate } from 'ChillMainAssets/chill/js/date';
import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';
const i18n = {

2
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkCreate/store.js
View File

@ -1,6 +1,6 @@
import { createStore } from 'vuex';
import { datetimeToISO, dateToISO, ISOToDate, ISOToDatetime } from 'ChillMainAssets/chill/js/date.js';
import { datetimeToISO, dateToISO, ISOToDate, ISOToDatetime } from 'ChillMainAssets/chill/js/date';
import { findSocialActionsBySocialIssue } from 'ChillPersonAssets/vuejs/_api/SocialWorkSocialAction.js';
// import { create } from 'ChillPersonAssets/vuejs/_api/AccompanyingCourseWork.js';
import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods';

2
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
View File

@ -314,7 +314,7 @@
<script>
import {mapState, mapGetters,} from 'vuex';
import {dateToISO, ISOToDate, ISOToDatetime} from 'ChillMainAssets/chill/js/date.js';
import {dateToISO, ISOToDate, ISOToDatetime} from 'ChillMainAssets/chill/js/date';
import CKEditor from '@ckeditor/ckeditor5-vue';
import ClassicEditor from 'ChillMainAssets/module/ckeditor5/index.js';
import AddResult from './components/AddResult.vue';

2
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue
View File

@ -164,7 +164,7 @@
</template>
<script>
import {dateToISO, ISOToDate, ISOToDatetime} from 'ChillMainAssets/chill/js/date.js';
import {dateToISO, ISOToDate, ISOToDatetime} from 'ChillMainAssets/chill/js/date';
import CKEditor from '@ckeditor/ckeditor5-vue';
import ClassicEditor from 'ChillMainAssets/module/ckeditor5/index.js';
import { mapGetters, mapState } from 'vuex';

4
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/store.js
View File

@ -1,8 +1,8 @@
import { createStore } from 'vuex';
import { dateToISO, ISOToDate, datetimeToISO, ISOToDatetime, intervalDaysToISO, intervalISOToDays } from 'ChillMainAssets/chill/js/date.js';
import { dateToISO, ISOToDate, datetimeToISO, ISOToDatetime, intervalDaysToISO, intervalISOToDays } from 'ChillMainAssets/chill/js/date';
import { findSocialActionsBySocialIssue } from 'ChillPersonAssets/vuejs/_api/SocialWorkSocialAction.js';
import { create } from 'ChillPersonAssets/vuejs/_api/AccompanyingCourseWork.js';
import { fetchResults, makeFetch } from 'ChillMainAssets/lib/api/apiMethods.js';
import { fetchResults, makeFetch } from 'ChillMainAssets/lib/api/apiMethods.ts';
import { fetchTemplates } from 'ChillDocGeneratorAssets/api/pickTemplate.js';
const debug = process.env.NODE_ENV !== 'production';

4
src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/store/index.js
View File

@ -1,8 +1,8 @@
import { createStore } from 'vuex';
import { householdMove, fetchHouseholdSuggestionByAccompanyingPeriod, fetchAddressSuggestionByPerson} from './../api.js';
import { fetchResults } from 'ChillMainAssets/lib/api/apiMethods.js'
import { fetchResults } from 'ChillMainAssets/lib/api/apiMethods.ts'
import { fetchHouseholdByAddressReference } from 'ChillPersonAssets/lib/household.js';
import { datetimeToISO, dateToISO, ISOToDate } from 'ChillMainAssets/chill/js/date.js';
import { datetimeToISO, dateToISO, ISOToDate } from 'ChillMainAssets/chill/js/date';
const debug = process.env.NODE_ENV !== 'production';

2
src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/api.js
View File

@ -1,5 +1,5 @@
import { splitId } from './vis-network';
import {makeFetch} from 'ChillMainAssets/lib/api/apiMethods.js';
import {makeFetch} from 'ChillMainAssets/lib/api/apiMethods.ts';
/**
* @function getFetch

2
src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriod/SetReferrer.vue
View File

@ -6,7 +6,7 @@
<script>
import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods.js';
import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods.ts';
export default {
name: "SetReferrer",

2
src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
View File

@ -303,7 +303,7 @@ export default {
'id': responsePerson.id
},
'start_date': {
// TODO: use date.js methods (low priority)
// TODO: use date.ts methods (low priority)
'datetime': `${new Date().toISOString().split('T')[0]}T00:00:00+02:00`
},
'holder': false,

2
src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
View File

@ -200,7 +200,7 @@
</template>
<script>
import {dateToISO} from 'ChillMainAssets/chill/js/date.js';
import {dateToISO} from 'ChillMainAssets/chill/js/date';
import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
import Confidential from 'ChillMainAssets/vuejs/_components/Confidential.vue';
import BadgeEntity from 'ChillMainAssets/vuejs/_components/BadgeEntity.vue';