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

eslint fixes

Browse Source
This commit is contained in:
Julien Fastré
2025-07-09 17:46:36 +02:00
parent 0204bdd38d
commit dcdfba5ccd
208 changed files with 20402 additions and 21424 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,15 +13,15 @@
*
*/
export const dateToISO = (date: Date | null): string | null => {
if (null === date) {
return null;
}
if (null === date) {
return null;
}
return [
date.getFullYear(),
(date.getMonth() + 1).toString().padStart(2, "0"),
date.getDate().toString().padStart(2, "0"),
].join("-");
return [
date.getFullYear(),
(date.getMonth() + 1).toString().padStart(2, "0"),
date.getDate().toString().padStart(2, "0"),
].join("-");
};
/**
@@ -30,16 +30,16 @@ export const dateToISO = (date: Date | null): string | null => {
* **Experimental**
*/
export const ISOToDate = (str: string | null): Date | null => {
if (null === str) {
return null;
}
if ("" === str.trim()) {
return null;
}
if (null === str) {
return null;
}
if ("" === str.trim()) {
return null;
}
const [year, month, day] = str.split("-").map((p) => parseInt(p));
const [year, month, day] = str.split("-").map((p) => parseInt(p));
return new Date(year, month - 1, day, 0, 0, 0, 0);
return new Date(year, month - 1, day, 0, 0, 0, 0);
};
/**
@@ -47,21 +47,19 @@ export const ISOToDate = (str: string | null): Date | null => {
*
*/
export const ISOToDatetime = (str: string | null): Date | null => {
if (null === str) {
return null;
}
if (null === str) {
return null;
}
const [cal, times] = str.split("T"),
[year, month, date] = cal.split("-").map((s) => parseInt(s)),
[time, timezone] = times.split(times.charAt(8)),
[hours, minutes, seconds] = time.split(":").map((s) => parseInt(s));
if ("0000" === timezone) {
return new Date(
Date.UTC(year, month - 1, date, hours, minutes, seconds),
);
}
const [cal, times] = str.split("T"),
[year, month, date] = cal.split("-").map((s) => parseInt(s)),
[time, timezone] = times.split(times.charAt(8)),
[hours, minutes, seconds] = time.split(":").map((s) => parseInt(s));
if ("0000" === timezone) {
return new Date(Date.UTC(year, month - 1, date, hours, minutes, seconds));
}
return new Date(year, month - 1, date, hours, minutes, seconds);
return new Date(year, month - 1, date, hours, minutes, seconds);
};
/**
@@ -69,96 +67,94 @@ export const ISOToDatetime = (str: string | null): Date | null => {
*
*/
export const datetimeToISO = (date: Date): string => {
let cal, time, offset;
cal = [
date.getFullYear(),
(date.getMonth() + 1).toString().padStart(2, "0"),
date.getDate().toString().padStart(2, "0"),
].join("-");
let cal, time, offset;
cal = [
date.getFullYear(),
(date.getMonth() + 1).toString().padStart(2, "0"),
date.getDate().toString().padStart(2, "0"),
].join("-");
time = [
date.getHours().toString().padStart(2, "0"),
date.getMinutes().toString().padStart(2, "0"),
date.getSeconds().toString().padStart(2, "0"),
].join(":");
time = [
date.getHours().toString().padStart(2, "0"),
date.getMinutes().toString().padStart(2, "0"),
date.getSeconds().toString().padStart(2, "0"),
].join(":");
offset = [
date.getTimezoneOffset() <= 0 ? "+" : "-",
Math.abs(Math.floor(date.getTimezoneOffset() / 60))
.toString()
.padStart(2, "0"),
":",
Math.abs(date.getTimezoneOffset() % 60)
.toString()
.padStart(2, "0"),
].join("");
offset = [
date.getTimezoneOffset() <= 0 ? "+" : "-",
Math.abs(Math.floor(date.getTimezoneOffset() / 60))
.toString()
.padStart(2, "0"),
":",
Math.abs(date.getTimezoneOffset() % 60)
.toString()
.padStart(2, "0"),
].join("");
const x = cal + "T" + time + offset;
const x = cal + "T" + time + offset;
return x;
return x;
};
export const intervalDaysToISO = (days: number | string | null): string => {
if (null === days) {
return "P0D";
}
if (null === days) {
return "P0D";
}
return `P${days}D`;
return `P${days}D`;
};
export const intervalISOToDays = (str: string | null): number | null => {
if (null === str) {
return null;
}
if (null === str) {
return null;
}
if ("" === str.trim()) {
return null;
}
if ("" === str.trim()) {
return null;
}
let days = 0;
let isDate = true;
let vstring = "";
for (let i = 0; i < str.length; i = i + 1) {
if (!isDate) {
continue;
}
switch (str.charAt(i)) {
case "P":
isDate = true;
break;
case "T":
isDate = false;
break;
case "0":
case "1":
case "2":
case "3":
case "4":
case "5":
case "6":
case "7":
case "8":
case "9":
vstring = vstring + str.charAt(i);
break;
case "Y":
days = days + Number.parseInt(vstring) * 365;
vstring = "";
break;
case "M":
days = days + Number.parseInt(vstring) * 30;
vstring = "";
break;
case "D":
days = days + Number.parseInt(vstring);
vstring = "";
break;
default:
throw Error(
"this character should not appears: " + str.charAt(i),
);
}
let days = 0;
let isDate = true;
let vstring = "";
for (let i = 0; i < str.length; i = i + 1) {
if (!isDate) {
continue;
}
switch (str.charAt(i)) {
case "P":
isDate = true;
break;
case "T":
isDate = false;
break;
case "0":
case "1":
case "2":
case "3":
case "4":
case "5":
case "6":
case "7":
case "8":
case "9":
vstring = vstring + str.charAt(i);
break;
case "Y":
days = days + Number.parseInt(vstring) * 365;
vstring = "";
break;
case "M":
days = days + Number.parseInt(vstring) * 30;
vstring = "";
break;
case "D":
days = days + Number.parseInt(vstring);
vstring = "";
break;
default:
throw Error("this character should not appears: " + str.charAt(i));
}
}
return days;
return days;
};

64
src/Bundle/ChillMainBundle/Resources/public/lib/api/address.ts
View File

@@ -1,61 +1,61 @@
import {
Address,
GeographicalUnitLayer,
SimpleGeographicalUnit,
Address,
GeographicalUnitLayer,
SimpleGeographicalUnit,
} from "../../types";
import { fetchResults, makeFetch } from "./apiMethods";
export const getAddressById = async (address_id: number): Promise<Address> => {
const url = `/api/1.0/main/address/${address_id}.json`;
const url = `/api/1.0/main/address/${address_id}.json`;
const response = await fetch(url);
const response = await fetch(url);
if (response.ok) {
return response.json();
}
if (response.ok) {
return response.json();
}
throw Error("Error with request resource response");
throw Error("Error with request resource response");
};
export const getGeographicalUnitsByAddress = async (
address: Address,
address: Address,
): Promise<SimpleGeographicalUnit[]> => {
return fetchResults<SimpleGeographicalUnit>(
`/api/1.0/main/geographical-unit/by-address/${address.address_id}.json`,
);
return fetchResults<SimpleGeographicalUnit>(
`/api/1.0/main/geographical-unit/by-address/${address.address_id}.json`,
);
};
export const getAllGeographicalUnitLayers = async (): Promise<
GeographicalUnitLayer[]
GeographicalUnitLayer[]
> => {
return fetchResults<GeographicalUnitLayer>(
`/api/1.0/main/geographical-unit-layer.json`,
);
return fetchResults<GeographicalUnitLayer>(
`/api/1.0/main/geographical-unit-layer.json`,
);
};
export const syncAddressWithReference = async (
address: Address,
address: Address,
): Promise<Address> => {
return makeFetch<null, Address>(
"POST",
`/api/1.0/main/address/reference-match/${address.address_id}/sync-with-reference`,
);
return makeFetch<null, Address>(
"POST",
`/api/1.0/main/address/reference-match/${address.address_id}/sync-with-reference`,
);
};
export const markAddressReviewed = async (
address: Address,
address: Address,
): Promise<Address> => {
return makeFetch<null, Address>(
"POST",
`/api/1.0/main/address/reference-match/${address.address_id}/set/reviewed`,
);
return makeFetch<null, Address>(
"POST",
`/api/1.0/main/address/reference-match/${address.address_id}/set/reviewed`,
);
};
export const markAddressToReview = async (
address: Address,
address: Address,
): Promise<Address> => {
return makeFetch<null, Address>(
"POST",
`/api/1.0/main/address/reference-match/${address.address_id}/set/to_review`,
);
return makeFetch<null, Address>(
"POST",
`/api/1.0/main/address/reference-match/${address.address_id}/set/to_review`,
);
};

388
src/Bundle/ChillMainBundle/Resources/public/lib/api/apiMethods.ts
View File

@@ -6,57 +6,57 @@ export type fetchOption = Record<string, boolean | string | number | null>;
export type Params = Record<string, number | string>;
export interface PaginationResponse<T> {
pagination: {
more: boolean;
items_per_page: number;
};
results: T[];
count: number;
pagination: {
more: boolean;
items_per_page: number;
};
results: T[];
count: number;
}
export type FetchParams = Record<string, string | number | null>;
export interface TransportExceptionInterface {
name: string;
name: string;
}
export interface ValidationExceptionInterface
extends TransportExceptionInterface {
name: "ValidationException";
error: object;
violations: string[];
titles: string[];
propertyPaths: string[];
extends TransportExceptionInterface {
name: "ValidationException";
error: object;
violations: string[];
titles: string[];
propertyPaths: string[];
}
export interface ValidationErrorResponse extends TransportExceptionInterface {
violations: {
title: string;
propertyPath: string;
}[];
violations: {
title: string;
propertyPath: string;
}[];
}
export interface AccessExceptionInterface extends TransportExceptionInterface {
name: "AccessException";
violations: string[];
name: "AccessException";
violations: string[];
}
export interface NotFoundExceptionInterface
extends TransportExceptionInterface {
name: "NotFoundException";
extends TransportExceptionInterface {
name: "NotFoundException";
}
export interface ServerExceptionInterface extends TransportExceptionInterface {
name: "ServerException";
message: string;
code: number;
body: string;
name: "ServerException";
message: string;
code: number;
body: string;
}
export interface ConflictHttpExceptionInterface
extends TransportExceptionInterface {
name: "ConflictHttpException";
violations: string[];
extends TransportExceptionInterface {
name: "ConflictHttpException";
violations: string[];
}
/**
@@ -66,223 +66,223 @@ export interface ConflictHttpExceptionInterface
* and use of the @link{fetchResults} method.
*/
export const makeFetch = <Input, Output>(
method: "POST" | "GET" | "PUT" | "PATCH" | "DELETE",
url: string,
body?: body | Input | null,
options?: FetchParams,
method: "POST" | "GET" | "PUT" | "PATCH" | "DELETE",
url: string,
body?: body | Input | null,
options?: FetchParams,
): Promise<Output> => {
let opts = {
method: method,
headers: {
"Content-Type": "application/json;charset=utf-8",
},
let opts = {
method: method,
headers: {
"Content-Type": "application/json;charset=utf-8",
},
};
if (body !== null && typeof body !== "undefined") {
Object.assign(opts, { body: JSON.stringify(body) });
}
if (typeof options !== "undefined") {
opts = Object.assign(opts, options);
}
return fetch(url, opts).then((response) => {
if (response.status === 204) {
return Promise.resolve();
}
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);
}
if (response.status === 409) {
throw ConflictHttpException(response);
}
throw {
name: "Exception",
sta: response.status,
txt: response.statusText,
err: new Error(),
violations: response.body,
};
if (body !== null && typeof body !== "undefined") {
Object.assign(opts, { body: JSON.stringify(body) });
}
if (typeof options !== "undefined") {
opts = Object.assign(opts, options);
}
return fetch(url, opts).then((response) => {
if (response.status === 204) {
return Promise.resolve();
}
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);
}
if (response.status === 409) {
throw ConflictHttpException(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,
page: number,
uri: string,
params?: FetchParams,
): Promise<PaginationResponse<T>> {
const item_per_page = 50;
const item_per_page = 50;
const searchParams = new URLSearchParams();
searchParams.append("item_per_page", item_per_page.toString());
searchParams.append("page", page.toString());
const 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) => {
const 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, "");
}
if (params !== undefined) {
Object.keys(params).forEach((key) => {
const 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, "");
}
});
}
const 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();
}
if (response.status === 404) {
throw NotFoundException(response);
}
if (response.status === 422) {
return response.json().then((response) => {
throw ValidationException(response);
});
}
}
const url = uri + "?" + searchParams.toString();
if (response.status === 403) {
throw AccessException(response);
}
return fetch(url, {
method: "GET",
headers: {
"Content-Type": "application/json;charset=utf-8",
},
if (response.status >= 500) {
return response.text().then((body) => {
throw ServerException(response.status, body);
});
}
throw new Error("other network error");
})
.then((response) => {
if (response.ok) {
return response.json();
}
if (response.status === 404) {
throw NotFoundException(response);
}
if (response.status === 422) {
return response.json().then((response) => {
throw ValidationException(response);
});
}
if (response.status === 403) {
throw AccessException(response);
}
if (response.status >= 500) {
return response.text().then((body) => {
throw ServerException(response.status, body);
});
}
throw new Error("other network error");
})
.catch(
(
reason:
| NotFoundExceptionInterface
| ServerExceptionInterface
| ValidationExceptionInterface
| TransportExceptionInterface,
) => {
console.error(reason);
throw reason;
},
);
.catch(
(
reason:
| NotFoundExceptionInterface
| ServerExceptionInterface
| ValidationExceptionInterface
| TransportExceptionInterface,
) => {
console.error(reason);
throw reason;
},
);
}
export const fetchResults = async <T>(
uri: string,
params?: FetchParams,
uri: string,
params?: FetchParams,
): Promise<T[]> => {
const promises: Promise<T[]>[] = [];
let page = 1;
const firstData: PaginationResponse<T> = (await _fetchAction(
page,
uri,
params,
)) as PaginationResponse<T>;
const promises: Promise<T[]>[] = [];
let page = 1;
const firstData: PaginationResponse<T> = (await _fetchAction(
page,
uri,
params,
)) as PaginationResponse<T>;
promises.push(Promise.resolve(firstData.results));
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);
}
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());
return Promise.all(promises).then((values) => values.flat());
};
export const fetchScopes = (): Promise<Scope[]> => {
return fetchResults("/api/1.0/main/scope.json");
return fetchResults("/api/1.0/main/scope.json");
};
/**
* Error objects to be thrown
*/
const ValidationException = (
response: ValidationErrorResponse,
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 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;
};
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const AccessException = (response: Response): AccessExceptionInterface => {
const error = {} as AccessExceptionInterface;
error.name = "AccessException";
error.violations = ["You are not allowed to perform this action"];
const error = {} as AccessExceptionInterface;
error.name = "AccessException";
error.violations = ["You are not allowed to perform this action"];
return error;
return error;
};
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const NotFoundException = (response: Response): NotFoundExceptionInterface => {
const error = {} as NotFoundExceptionInterface;
error.name = "NotFoundException";
const error = {} as NotFoundExceptionInterface;
error.name = "NotFoundException";
return error;
return error;
};
const ServerException = (
code: number,
body: string,
code: number,
body: string,
): ServerExceptionInterface => {
const error = {} as ServerExceptionInterface;
error.name = "ServerException";
error.code = code;
error.body = body;
const error = {} as ServerExceptionInterface;
error.name = "ServerException";
error.code = code;
error.body = body;
return error;
return error;
};
const ConflictHttpException = (
// eslint-disable-next-line @typescript-eslint/no-unused-vars
response: Response,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
response: Response,
): ConflictHttpExceptionInterface => {
const error = {} as ConflictHttpExceptionInterface;
const error = {} as ConflictHttpExceptionInterface;
error.name = "ConflictHttpException";
error.violations = [
"Sorry, but someone else has already changed this entity. Please refresh the page and apply the changes again",
];
error.name = "ConflictHttpException";
error.violations = [
"Sorry, but someone else has already changed this entity. Please refresh the page and apply the changes again",
];
return error;
return error;
};

20
src/Bundle/ChillMainBundle/Resources/public/lib/api/export.ts
View File

@@ -2,17 +2,17 @@ import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
import { ExportGeneration } from "ChillMainAssets/types";
export const fetchExportGenerationStatus = async (
exportGenerationId: string,
exportGenerationId: string,
): Promise<ExportGeneration> =>
makeFetch(
"GET",
`/api/1.0/main/export-generation/${exportGenerationId}/object`,
);
makeFetch(
"GET",
`/api/1.0/main/export-generation/${exportGenerationId}/object`,
);
export const generateFromSavedExport = async (
savedExportUuid: string,
savedExportUuid: string,
): Promise<ExportGeneration> =>
makeFetch(
"POST",
`/api/1.0/main/export/export-generation/create-from-saved-export/${savedExportUuid}`,
);
makeFetch(
"POST",
`/api/1.0/main/export/export-generation/create-from-saved-export/${savedExportUuid}`,
);

4
src/Bundle/ChillMainBundle/Resources/public/lib/api/locations.ts
View File

@@ -2,7 +2,7 @@ import { fetchResults } from "./apiMethods";
import { Location, LocationType } from "../../types";
export const getLocations = (): Promise<Location[]> =>
fetchResults("/api/1.0/main/location.json");
fetchResults("/api/1.0/main/location.json");
export const getLocationTypes = (): Promise<LocationType[]> =>
fetchResults("/api/1.0/main/location-type.json");
fetchResults("/api/1.0/main/location-type.json");

2
src/Bundle/ChillMainBundle/Resources/public/lib/api/return_path.ts
View File

@@ -1,3 +1,3 @@
export function buildReturnPath(location: Location): string {
return location.pathname + location.search;
return location.pathname + location.search;
}

30
src/Bundle/ChillMainBundle/Resources/public/lib/api/user.ts
View File

@@ -2,23 +2,23 @@ import { User } from "../../types";
import { makeFetch } from "./apiMethods";
export const whoami = (): Promise<User> => {
const url = `/api/1.0/main/whoami.json`;
return fetch(url).then((response) => {
if (response.ok) {
return response.json();
}
throw {
msg: "Error while getting whoami.",
sta: response.status,
txt: response.statusText,
err: new Error(),
body: response.body,
};
});
const url = `/api/1.0/main/whoami.json`;
return fetch(url).then((response) => {
if (response.ok) {
return response.json();
}
throw {
msg: "Error while getting whoami.",
sta: response.status,
txt: response.statusText,
err: new Error(),
body: response.body,
};
});
};
export const whereami = (): Promise<Location | null> => {
const url = `/api/1.0/main/user-current-location.json`;
const url = `/api/1.0/main/user-current-location.json`;
return makeFetch<null, Location | null>("GET", url);
return makeFetch<null, Location | null>("GET", url);
};

28
src/Bundle/ChillMainBundle/Resources/public/lib/entity-notification/api.ts
View File

@@ -1,22 +1,22 @@
const buildLinkCreate = function (
relatedEntityClass: string,
relatedEntityId: number,
to: number | null,
returnPath: string | null,
relatedEntityClass: string,
relatedEntityId: number,
to: number | null,
returnPath: string | null,
): string {
const params = new URLSearchParams();
params.append("entityClass", relatedEntityClass);
params.append("entityId", relatedEntityId.toString());
const params = new URLSearchParams();
params.append("entityClass", relatedEntityClass);
params.append("entityId", relatedEntityId.toString());
if (null !== to) {
params.append("tos[0]", to.toString());
}
if (null !== to) {
params.append("tos[0]", to.toString());
}
if (null !== returnPath) {
params.append("returnPath", returnPath);
}
if (null !== returnPath) {
params.append("returnPath", returnPath);
}
return `/fr/notification/create?${params.toString()}`;
return `/fr/notification/create?${params.toString()}`;
};
export { buildLinkCreate };

22
src/Bundle/ChillMainBundle/Resources/public/lib/entity-workflow/api.ts
View File

@@ -10,17 +10,17 @@
* @throws {Error} If the related entity ID is undefined.
*/
export const buildLinkCreate = (
workflowName: string,
relatedEntityClass: string,
relatedEntityId: number | undefined,
workflowName: string,
relatedEntityClass: string,
relatedEntityId: number | undefined,
): string => {
if (typeof relatedEntityId === "undefined") {
throw new Error("the related entity id is not set");
}
const params = new URLSearchParams();
params.set("entityClass", relatedEntityClass);
params.set("entityId", relatedEntityId.toString(10));
params.set("workflow", workflowName);
if (typeof relatedEntityId === "undefined") {
throw new Error("the related entity id is not set");
}
const params = new URLSearchParams();
params.set("entityClass", relatedEntityClass);
params.set("entityId", relatedEntityId.toString(10));
params.set("workflow", workflowName);
return `/fr/main/workflow/create?` + params.toString();
return `/fr/main/workflow/create?` + params.toString();
};

54
src/Bundle/ChillMainBundle/Resources/public/lib/localizationHelper/localizationHelper.ts
View File

@@ -9,33 +9,33 @@ import { TranslatableString } from "ChillMainAssets/types";
* @returns The localized string or null if no translation is available
*/
export function localizeString(
translatableString: TranslatableString | null | undefined,
locale?: string,
translatableString: TranslatableString | null | undefined,
locale?: string,
): string {
if (!translatableString || Object.keys(translatableString).length === 0) {
return "";
}
const currentLocale = locale || navigator.language.split("-")[0] || "fr";
if (translatableString[currentLocale]) {
return translatableString[currentLocale];
}
// Define fallback locales
const fallbackLocales: string[] = ["fr", "en"];
for (const fallbackLocale of fallbackLocales) {
if (translatableString[fallbackLocale]) {
return translatableString[fallbackLocale];
}
}
// No fallback translation found, use the first available
const availableLocales = Object.keys(translatableString);
if (availableLocales.length > 0) {
return translatableString[availableLocales[0]];
}
if (!translatableString || Object.keys(translatableString).length === 0) {
return "";
}
const currentLocale = locale || navigator.language.split("-")[0] || "fr";
if (translatableString[currentLocale]) {
return translatableString[currentLocale];
}
// Define fallback locales
const fallbackLocales: string[] = ["fr", "en"];
for (const fallbackLocale of fallbackLocales) {
if (translatableString[fallbackLocale]) {
return translatableString[fallbackLocale];
}
}
// No fallback translation found, use the first available
const availableLocales = Object.keys(translatableString);
if (availableLocales.length > 0) {
return translatableString[availableLocales[0]];
}
return "";
}

20
src/Bundle/ChillMainBundle/Resources/public/lib/workflow/attachments.ts
View File

@@ -3,20 +3,20 @@ import { GenericDocForAccompanyingPeriod } from "ChillDocStoreAssets/types/gener
import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
export const find_attachments_by_workflow = async (
workflowId: number,
workflowId: number,
): Promise<WorkflowAttachment[]> =>
makeFetch("GET", `/api/1.0/main/workflow/${workflowId}/attachment`);
makeFetch("GET", `/api/1.0/main/workflow/${workflowId}/attachment`);
export const create_attachment = async (
workflowId: number,
genericDoc: GenericDocForAccompanyingPeriod,
workflowId: number,
genericDoc: GenericDocForAccompanyingPeriod,
): Promise<WorkflowAttachment> =>
makeFetch("POST", `/api/1.0/main/workflow/${workflowId}/attachment`, {
relatedGenericDocKey: genericDoc.key,
relatedGenericDocIdentifiers: genericDoc.identifiers,
});
makeFetch("POST", `/api/1.0/main/workflow/${workflowId}/attachment`, {
relatedGenericDocKey: genericDoc.key,
relatedGenericDocIdentifiers: genericDoc.identifiers,
});
export const delete_attachment = async (
attachment: WorkflowAttachment,
attachment: WorkflowAttachment,
): Promise<void> =>
makeFetch("DELETE", `/api/1.0/main/workflow/attachment/${attachment.id}`);
makeFetch("DELETE", `/api/1.0/main/workflow/attachment/${attachment.id}`);

76
src/Bundle/ChillMainBundle/Resources/public/module/address-details/index.ts
View File

@@ -7,43 +7,43 @@ import { Address } from "../../types";
const i18n = _createI18n({});
document
.querySelectorAll<HTMLSpanElement>("span[data-address-details]")
.forEach((el) => {
const dataset = el.dataset as {
addressId: string;
addressRefStatus: string;
.querySelectorAll<HTMLSpanElement>("span[data-address-details]")
.forEach((el) => {
const dataset = el.dataset as {
addressId: string;
addressRefStatus: string;
};
const app = createApp({
components: { AddressDetailsButton },
data() {
return {
addressId: Number.parseInt(dataset.addressId),
addressRefStatus: dataset.addressRefStatus,
};
const app = createApp({
components: { AddressDetailsButton },
data() {
return {
addressId: Number.parseInt(dataset.addressId),
addressRefStatus: dataset.addressRefStatus,
};
},
template:
'<address-details-button :address_id="addressId" :address_ref_status="addressRefStatus" @update-address="onUpdateAddress"></address-details-button>',
methods: {
onUpdateAddress: (address: Address): void => {
if (
address.refStatus === "to_review" ||
address.refStatus === "reviewed"
) {
// in this two case, the address content do not change
return;
}
if (
window.confirm(
"L'adresse a été modifiée. Vous pouvez continuer votre travail. Cependant, pour afficher les données immédiatement, veuillez recharger la page. \n\n Voulez-vous recharger la page immédiatement ?",
)
) {
window.location.reload();
}
},
},
});
app.use(i18n);
app.mount(el);
},
template:
'<address-details-button :address_id="addressId" :address_ref_status="addressRefStatus" @update-address="onUpdateAddress"></address-details-button>',
methods: {
onUpdateAddress: (address: Address): void => {
if (
address.refStatus === "to_review" ||
address.refStatus === "reviewed"
) {
// in this two case, the address content do not change
return;
}
if (
window.confirm(
"L'adresse a été modifiée. Vous pouvez continuer votre travail. Cependant, pour afficher les données immédiatement, veuillez recharger la page. \n\n Voulez-vous recharger la page immédiatement ?",
)
) {
window.location.reload();
}
},
},
});
app.use(i18n);
app.mount(el);
});

96
src/Bundle/ChillMainBundle/Resources/public/module/ckeditor5/editor_config.ts
View File

@@ -1,16 +1,16 @@
import {
Essentials,
Bold,
Italic,
Paragraph,
Markdown,
BlockQuote,
Heading,
Link,
List,
Emoji,
Mention,
Fullscreen,
Essentials,
Bold,
Italic,
Paragraph,
Markdown,
BlockQuote,
Heading,
Link,
List,
Emoji,
Mention,
Fullscreen,
} from "ckeditor5";
import coreTranslations from "ckeditor5/translations/fr.js";
@@ -19,41 +19,41 @@ import "ckeditor5/ckeditor5.css";
import "./index.scss";
export default {
plugins: [
Essentials,
Markdown,
Bold,
Italic,
BlockQuote,
Heading,
Link,
List,
Paragraph,
// both Emoji and Mention are required for Emoji feature
Emoji,
Mention,
// to enable fullscreen
Fullscreen,
plugins: [
Essentials,
Markdown,
Bold,
Italic,
BlockQuote,
Heading,
Link,
List,
Paragraph,
// both Emoji and Mention are required for Emoji feature
Emoji,
Mention,
// to enable fullscreen
Fullscreen,
],
toolbar: {
items: [
"heading",
"|",
"bold",
"italic",
"link",
"bulletedList",
"numberedList",
"blockQuote",
"|",
"emoji",
"|",
"undo",
"redo",
"|",
"fullscreen",
],
toolbar: {
items: [
"heading",
"|",
"bold",
"italic",
"link",
"bulletedList",
"numberedList",
"blockQuote",
"|",
"emoji",
"|",
"undo",
"redo",
"|",
"fullscreen",
],
},
translations: [coreTranslations],
licenseKey: "GPL",
},
translations: [coreTranslations],
licenseKey: "GPL",
};

46
src/Bundle/ChillMainBundle/Resources/public/module/ckeditor5/index.ts
View File

@@ -2,31 +2,31 @@ import { createApp } from "vue";
import CommentEditor from "ChillMainAssets/vuejs/_components/CommentEditor/CommentEditor.vue";
const ckeditorFields: NodeListOf<HTMLTextAreaElement> =
document.querySelectorAll("textarea[ckeditor]");
document.querySelectorAll("textarea[ckeditor]");
ckeditorFields.forEach((field: HTMLTextAreaElement): void => {
const content = field.value;
const div = document.createElement("div");
const content = field.value;
const div = document.createElement("div");
if (field.parentNode !== null) {
field.parentNode.insertBefore(div, field);
} else {
throw "parent is null";
}
if (field.parentNode !== null) {
field.parentNode.insertBefore(div, field);
} else {
throw "parent is null";
}
createApp({
components: { CommentEditor },
template: `<comment-editor v-model="content" @update:modelValue="handleInput"></comment-editor>`,
data() {
return {
content,
};
},
methods: {
handleInput() {
field.value = this.content;
},
},
}).mount(div);
createApp({
components: { CommentEditor },
template: `<comment-editor v-model="content" @update:modelValue="handleInput"></comment-editor>`,
data() {
return {
content,
};
},
methods: {
handleInput() {
field.value = this.content;
},
},
}).mount(div);
field.style.display = "none";
field.style.display = "none";
});

236
src/Bundle/ChillMainBundle/Resources/public/module/collection/index.ts
View File

@@ -31,157 +31,157 @@
import "./collection.scss";
declare global {
interface GlobalEventHandlersEventMap {
"show-hide-show": CustomEvent<{
id: number;
froms: HTMLElement[];
container: HTMLElement;
}>;
}
interface GlobalEventHandlersEventMap {
"show-hide-show": CustomEvent<{
id: number;
froms: HTMLElement[];
container: HTMLElement;
}>;
}
}
export class CollectionEventPayload {
collection: HTMLUListElement;
entry: HTMLLIElement;
collection: HTMLUListElement;
entry: HTMLLIElement;
constructor(collection: HTMLUListElement, entry: HTMLLIElement) {
this.collection = collection;
this.entry = entry;
}
constructor(collection: HTMLUListElement, entry: HTMLLIElement) {
this.collection = collection;
this.entry = entry;
}
}
export const handleAdd = (button: any): void => {
const form_name = button.dataset.collectionAddTarget,
prototype = button.dataset.formPrototype,
collection: HTMLUListElement | null = document.querySelector(
'ul[data-collection-name="' + form_name + '"]',
);
const form_name = button.dataset.collectionAddTarget,
prototype = button.dataset.formPrototype,
collection: HTMLUListElement | null = document.querySelector(
'ul[data-collection-name="' + form_name + '"]',
);
if (collection === null) {
return;
if (collection === null) {
return;
}
const empty_explain: HTMLLIElement | null = collection.querySelector(
"li[data-collection-empty-explain]",
),
entry = document.createElement("li"),
counter = collection.querySelectorAll("li.entry").length, // Updated counter logic
content = prototype.replace(/__name__/g, counter.toString()),
event = new CustomEvent("collection-add-entry", {
detail: new CollectionEventPayload(collection, entry),
});
console.log(counter);
console.log(content);
entry.innerHTML = content;
entry.classList.add("entry");
if ("collectionRegular" in collection.dataset) {
initializeRemove(collection, entry);
if (empty_explain !== null) {
empty_explain.remove();
}
}
const empty_explain: HTMLLIElement | null = collection.querySelector(
"li[data-collection-empty-explain]",
),
entry = document.createElement("li"),
counter = collection.querySelectorAll("li.entry").length, // Updated counter logic
content = prototype.replace(/__name__/g, counter.toString()),
event = new CustomEvent("collection-add-entry", {
detail: new CollectionEventPayload(collection, entry),
});
console.log(counter);
console.log(content);
entry.innerHTML = content;
entry.classList.add("entry");
if ("collectionRegular" in collection.dataset) {
initializeRemove(collection, entry);
if (empty_explain !== null) {
empty_explain.remove();
}
}
collection.appendChild(entry);
collection.dispatchEvent(event);
window.dispatchEvent(event);
collection.appendChild(entry);
collection.dispatchEvent(event);
window.dispatchEvent(event);
};
const initializeRemove = (
collection: HTMLUListElement,
entry: HTMLLIElement,
collection: HTMLUListElement,
entry: HTMLLIElement,
): void => {
const button = buildRemoveButton(collection, entry);
if (null === button) {
return;
}
entry.appendChild(button);
const button = buildRemoveButton(collection, entry);
if (null === button) {
return;
}
entry.appendChild(button);
};
export const buildRemoveButton = (
collection: HTMLUListElement,
entry: HTMLLIElement,
collection: HTMLUListElement,
entry: HTMLLIElement,
): HTMLButtonElement | null => {
const button = document.createElement("button"),
isPersisted = entry.dataset.collectionIsPersisted || "",
content = collection.dataset.collectionButtonRemoveLabel || "",
allowDelete = collection.dataset.collectionAllowDelete || "",
event = new CustomEvent("collection-remove-entry", {
detail: new CollectionEventPayload(collection, entry),
});
if (allowDelete === "0" && isPersisted === "1") {
return null;
}
button.classList.add("btn", "btn-delete", "remove-entry");
button.textContent = content;
button.addEventListener("click", (e: Event) => {
e.preventDefault();
entry.remove();
collection.dispatchEvent(event);
window.dispatchEvent(event);
const button = document.createElement("button"),
isPersisted = entry.dataset.collectionIsPersisted || "",
content = collection.dataset.collectionButtonRemoveLabel || "",
allowDelete = collection.dataset.collectionAllowDelete || "",
event = new CustomEvent("collection-remove-entry", {
detail: new CollectionEventPayload(collection, entry),
});
return button;
if (allowDelete === "0" && isPersisted === "1") {
return null;
}
button.classList.add("btn", "btn-delete", "remove-entry");
button.textContent = content;
button.addEventListener("click", (e: Event) => {
e.preventDefault();
entry.remove();
collection.dispatchEvent(event);
window.dispatchEvent(event);
});
return button;
};
const collectionsInit = new Set<string>();
const buttonsInit = new Set<string>();
const initialize = function (target: Document | Element): void {
const addButtons: NodeListOf<HTMLButtonElement> = document.querySelectorAll(
"button[data-collection-add-target]",
),
collections: NodeListOf<HTMLUListElement> = document.querySelectorAll(
"ul[data-collection-regular]",
);
const addButtons: NodeListOf<HTMLButtonElement> = document.querySelectorAll(
"button[data-collection-add-target]",
),
collections: NodeListOf<HTMLUListElement> = document.querySelectorAll(
"ul[data-collection-regular]",
);
for (let i = 0; i < addButtons.length; i++) {
const addButton = addButtons[i];
const uniqid = addButton.dataset.uniqid as string;
if (buttonsInit.has(uniqid)) {
continue;
}
buttonsInit.add(uniqid);
addButton.addEventListener("click", (e: Event) => {
e.preventDefault();
handleAdd(e.target);
});
for (let i = 0; i < addButtons.length; i++) {
const addButton = addButtons[i];
const uniqid = addButton.dataset.uniqid as string;
if (buttonsInit.has(uniqid)) {
continue;
}
for (let i = 0; i < collections.length; i++) {
const collection = collections[i];
const uniqid = collection.dataset.uniqid as string;
if (collectionsInit.has(uniqid)) {
continue;
}
collectionsInit.add(uniqid);
const entries: NodeListOf<HTMLLIElement> =
collection.querySelectorAll(":scope > li");
for (let j = 0; j < entries.length; j++) {
if (entries[j].dataset.collectionEmptyExplain === "1") {
continue;
}
initializeRemove(collections[i], entries[j]);
}
buttonsInit.add(uniqid);
addButton.addEventListener("click", (e: Event) => {
e.preventDefault();
handleAdd(e.target);
});
}
for (let i = 0; i < collections.length; i++) {
const collection = collections[i];
const uniqid = collection.dataset.uniqid as string;
if (collectionsInit.has(uniqid)) {
continue;
}
collectionsInit.add(uniqid);
const entries: NodeListOf<HTMLLIElement> =
collection.querySelectorAll(":scope > li");
for (let j = 0; j < entries.length; j++) {
if (entries[j].dataset.collectionEmptyExplain === "1") {
continue;
}
initializeRemove(collections[i], entries[j]);
}
}
};
window.addEventListener("DOMContentLoaded", () => {
initialize(document);
initialize(document);
});
window.addEventListener(
"show-hide-show",
(
event: CustomEvent<{
id: number;
container: HTMLElement;
froms: HTMLElement[];
}>,
) => {
const container = event.detail.container as HTMLElement;
initialize(container);
},
"show-hide-show",
(
event: CustomEvent<{
id: number;
container: HTMLElement;
froms: HTMLElement[];
}>,
) => {
const container = event.detail.container as HTMLElement;
initialize(container);
},
);

68
src/Bundle/ChillMainBundle/Resources/public/module/notification/toggle_read_all.ts
View File

@@ -5,39 +5,39 @@ import NotificationReadAllToggle from "../../vuejs/_components/Notification/Noti
const i18n = _createI18n({});
document.addEventListener("DOMContentLoaded", function () {
const elements = document.querySelectorAll(".notification_all_read");
const elements = document.querySelectorAll(".notification_all_read");
elements.forEach((element) => {
console.log("launch");
createApp({
template: `<notification-read-all-toggle @markAsRead="markAsRead" @markAsUnRead="markAsUnread"></notification-read-all-toggle>`,
components: {
NotificationReadAllToggle,
},
methods: {
markAsRead(id: number) {
const el = document.querySelector<HTMLDivElement>(
`div.notification-status[data-notification-id="${id}"]`,
);
if (el === null) {
return;
}
el.classList.add("read");
el.classList.remove("unread");
},
markAsUnread(id: number) {
const el = document.querySelector<HTMLDivElement>(
`div.notification-status[data-notification-id="${id}"]`,
);
if (el === null) {
return;
}
el.classList.remove("read");
el.classList.add("unread");
},
},
})
.use(i18n)
.mount(element);
});
elements.forEach((element) => {
console.log("launch");
createApp({
template: `<notification-read-all-toggle @markAsRead="markAsRead" @markAsUnRead="markAsUnread"></notification-read-all-toggle>`,
components: {
NotificationReadAllToggle,
},
methods: {
markAsRead(id: number) {
const el = document.querySelector<HTMLDivElement>(
`div.notification-status[data-notification-id="${id}"]`,
);
if (el === null) {
return;
}
el.classList.add("read");
el.classList.remove("unread");
},
markAsUnread(id: number) {
const el = document.querySelector<HTMLDivElement>(
`div.notification-status[data-notification-id="${id}"]`,
);
if (el === null) {
return;
}
el.classList.remove("read");
el.classList.add("unread");
},
},
})
.use(i18n)
.mount(element);
});
});

14
src/Bundle/ChillMainBundle/Resources/public/types.ts
View File

@@ -208,13 +208,13 @@ export interface WorkflowAttachment {
}
export interface ExportGeneration {
id: string;
type: "export_generation";
exportAlias: string;
createdBy: User | null;
createdAt: DateTime | null;
status: StoredObjectStatus;
storedObject: StoredObject;
id: string;
type: "export_generation";
exportAlias: string;
createdBy: User | null;
createdAt: DateTime | null;
status: StoredObjectStatus;
storedObject: StoredObject;
}
export interface PrivateCommentEmbeddable {

230
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue
View File

@@ -1,130 +1,130 @@
<template>
<add-address
:key="key"
:context="context"
:options="options"
:address-changed-callback="submitAddress"
ref="addAddress"
/>
<add-address
:key="key"
:context="context"
:options="options"
:address-changed-callback="submitAddress"
ref="addAddress"
/>
</template>
<script>
import AddAddress from "./components/AddAddress.vue";
import {
postAddressToHousehold,
postAddressToPerson,
postAddressToHousehold,
postAddressToPerson,
} from "ChillPersonAssets/vuejs/_api/AddAddress";
export default {
name: "App",
components: {
AddAddress,
name: "App",
components: {
AddAddress,
},
props: ["addAddress", "callback"],
emits: ["addressEdited", "addressCreated"],
computed: {
context() {
return this.addAddress.context;
},
props: ["addAddress", "callback"],
emits: ["addressEdited", "addressCreated"],
computed: {
context() {
return this.addAddress.context;
},
options() {
return this.addAddress.options;
},
key() {
return this.context.edit
? "address_" + this.context.addressId
: this.context.target.name + "_" + this.context.target.id;
},
options() {
return this.addAddress.options;
},
mounted() {
//console.log('AddAddress: data context', this.context);
//console.log('AddAddress: data options', this.options);
key() {
return this.context.edit
? "address_" + this.context.addressId
: this.context.target.name + "_" + this.context.target.id;
},
methods: {
displayErrors() {
return this.$refs.addAddress.errorMsg;
},
submitAddress(payload) {
console.log("@@@ click on Submit Address Button", payload);
// Existing address
if (this.context.edit) {
// address is already linked, just finish !
this.$refs.addAddress.afterLastPaneAction({});
this.$emit("addressEdited", payload);
// New created address
} else {
this.postAddressTo(payload);
}
},
/*
* Post new created address to targetEntity
*/
postAddressTo(payload) {
this.$emit("addressCreated", payload);
console.log(
"postAddress",
payload.addressId,
"To",
payload.target,
payload.targetId,
);
switch (payload.target) {
case "household":
postAddressToHousehold(payload.targetId, payload.addressId)
.then(
(address) =>
new Promise((resolve, reject) => {
console.log("..household address", address);
this.$refs.addAddress.flag.loading = false;
this.$refs.addAddress.flag.success = true;
// finish
this.$refs.addAddress.afterLastPaneAction({
addressId: address.address_id,
});
resolve();
}),
)
.catch((error) => {
this.$refs.addAddress.errorMsg.push(error);
this.$refs.addAddress.flag.loading = false;
});
break;
case "person":
postAddressToPerson(payload.targetId, payload.addressId)
.then(
(address) =>
new Promise((resolve, reject) => {
console.log("..person address", address);
this.$refs.addAddress.flag.loading = false;
this.$refs.addAddress.flag.success = true;
// finish
this.$refs.addAddress.afterLastPaneAction({
addressId: address.address_id,
});
resolve();
}),
)
.catch((error) => {
this.$refs.addAddress.errorMsg.push(error);
this.$refs.addAddress.flag.loading = false;
});
break;
case "thirdparty":
console.log("TODO write postAddressToThirdparty");
break;
default:
this.$refs.addAddress.errorMsg.push(
"That entity is not managed by address !",
);
}
},
},
mounted() {
//console.log('AddAddress: data context', this.context);
//console.log('AddAddress: data options', this.options);
},
methods: {
displayErrors() {
return this.$refs.addAddress.errorMsg;
},
submitAddress(payload) {
console.log("@@@ click on Submit Address Button", payload);
// Existing address
if (this.context.edit) {
// address is already linked, just finish !
this.$refs.addAddress.afterLastPaneAction({});
this.$emit("addressEdited", payload);
// New created address
} else {
this.postAddressTo(payload);
}
},
/*
* Post new created address to targetEntity
*/
postAddressTo(payload) {
this.$emit("addressCreated", payload);
console.log(
"postAddress",
payload.addressId,
"To",
payload.target,
payload.targetId,
);
switch (payload.target) {
case "household":
postAddressToHousehold(payload.targetId, payload.addressId)
.then(
(address) =>
new Promise((resolve, reject) => {
console.log("..household address", address);
this.$refs.addAddress.flag.loading = false;
this.$refs.addAddress.flag.success = true;
// finish
this.$refs.addAddress.afterLastPaneAction({
addressId: address.address_id,
});
resolve();
}),
)
.catch((error) => {
this.$refs.addAddress.errorMsg.push(error);
this.$refs.addAddress.flag.loading = false;
});
break;
case "person":
postAddressToPerson(payload.targetId, payload.addressId)
.then(
(address) =>
new Promise((resolve, reject) => {
console.log("..person address", address);
this.$refs.addAddress.flag.loading = false;
this.$refs.addAddress.flag.success = true;
// finish
this.$refs.addAddress.afterLastPaneAction({
addressId: address.address_id,
});
resolve();
}),
)
.catch((error) => {
this.$refs.addAddress.errorMsg.push(error);
this.$refs.addAddress.flag.loading = false;
});
break;
case "thirdparty":
console.log("TODO write postAddressToThirdparty");
break;
default:
this.$refs.addAddress.errorMsg.push(
"That entity is not managed by address !",
);
}
},
},
};
</script>

48
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ActionButtons.vue
View File

@@ -1,32 +1,32 @@
<template>
<ul
class="record_actions"
v-if="!options.onlyButton"
:class="{ 'sticky-form-buttons': isStickyForm }"
>
<li v-if="isStickyForm" class="cancel">
<slot name="before" />
</li>
<li>
<slot name="action" />
</li>
<li v-if="isStickyForm">
<slot name="after" />
</li>
</ul>
<slot v-else name="action" />
<ul
class="record_actions"
v-if="!options.onlyButton"
:class="{ 'sticky-form-buttons': isStickyForm }"
>
<li v-if="isStickyForm" class="cancel">
<slot name="before" />
</li>
<li>
<slot name="action" />
</li>
<li v-if="isStickyForm">
<slot name="after" />
</li>
</ul>
<slot v-else name="action" />
</template>
<script>
export default {
name: "ActionButtons",
props: ["options", "defaultz"],
computed: {
isStickyForm() {
return typeof this.options.stickyActions !== "undefined"
? this.options.stickyActions
: this.defaultz.stickyActions;
},
name: "ActionButtons",
props: ["options", "defaultz"],
computed: {
isStickyForm() {
return typeof this.options.stickyActions !== "undefined"
? this.options.stickyActions
: this.defaultz.stickyActions;
},
},
};
</script>

1722
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue
View File

File diff suppressed because it is too large Load Diff

191
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMap.vue
View File

@@ -1,5 +1,5 @@
<template>
<div id="address_map" />
<div id="address_map" />
</template>
<script>
@@ -8,112 +8,107 @@ import markerIconPng from "leaflet/dist/images/marker-icon.png";
import "leaflet/dist/leaflet.css";
const lonLatForLeaflet = (coordinates) => {
return [coordinates[1], coordinates[0]];
return [coordinates[1], coordinates[0]];
};
export default {
name: "AddressMap",
props: ["entity"],
data() {
return {
map: null,
marker: null,
};
name: "AddressMap",
props: ["entity"],
data() {
return {
map: null,
marker: null,
};
},
computed: {
center() {
return this.entity.addressMap.center;
},
computed: {
center() {
return this.entity.addressMap.center;
},
hasAddressPoint() {
if (Object.keys(this.entity.address).length === 0) {
return false;
}
if (null !== this.entity.address.addressReference) {
return true;
}
if (
null !== this.entity.address.postcode &&
null !== this.entity.address.postcode.center
) {
return true;
}
return false;
},
/**
*
* @returns {coordinates: [float, float], type: "Point"}
*/
addressPoint() {
if (Object.keys(this.entity.address).length === 0) {
return null;
}
if (null !== this.entity.address.addressReference) {
return this.entity.address.addressReference.point;
}
if (
null !== this.entity.address.postcode &&
null !== this.entity.address.postcode.center
) {
return this.entity.address.postcode.center;
}
return null;
},
hasAddressPoint() {
if (Object.keys(this.entity.address).length === 0) {
return false;
}
if (null !== this.entity.address.addressReference) {
return true;
}
if (
null !== this.entity.address.postcode &&
null !== this.entity.address.postcode.center
) {
return true;
}
return false;
},
methods: {
init() {
this.map = L.map("address_map");
/**
*
* @returns {coordinates: [float, float], type: "Point"}
*/
addressPoint() {
if (Object.keys(this.entity.address).length === 0) {
return null;
}
if (!this.hasAddressPoint) {
this.map.setView(
lonLatForLeaflet(this.entity.addressMap.center),
this.entity.addressMap.zoom,
);
} else {
this.map.setView(
lonLatForLeaflet(this.addressPoint.coordinates),
15,
);
}
if (null !== this.entity.address.addressReference) {
return this.entity.address.addressReference.point;
}
this.map.scrollWheelZoom.disable();
if (
null !== this.entity.address.postcode &&
null !== this.entity.address.postcode.center
) {
return this.entity.address.postcode.center;
}
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(this.map);
const markerIcon = L.icon({
iconUrl: markerIconPng,
iconAnchor: [12, 41],
});
if (!this.hasAddressPoint) {
this.marker = L.marker(
lonLatForLeaflet(this.entity.addressMap.center),
{ icon: markerIcon },
);
} else {
this.marker = L.marker(
lonLatForLeaflet(this.addressPoint.coordinates),
{ icon: markerIcon },
);
}
this.marker.addTo(this.map);
},
update() {
if (this.marker && this.entity.addressMap.center) {
this.marker.setLatLng(
lonLatForLeaflet(this.entity.addressMap.center),
);
this.map.panTo(lonLatForLeaflet(this.entity.addressMap.center));
}
},
return null;
},
mounted() {
this.init();
},
methods: {
init() {
this.map = L.map("address_map");
if (!this.hasAddressPoint) {
this.map.setView(
lonLatForLeaflet(this.entity.addressMap.center),
this.entity.addressMap.zoom,
);
} else {
this.map.setView(lonLatForLeaflet(this.addressPoint.coordinates), 15);
}
this.map.scrollWheelZoom.disable();
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(this.map);
const markerIcon = L.icon({
iconUrl: markerIconPng,
iconAnchor: [12, 41],
});
if (!this.hasAddressPoint) {
this.marker = L.marker(
lonLatForLeaflet(this.entity.addressMap.center),
{ icon: markerIcon },
);
} else {
this.marker = L.marker(
lonLatForLeaflet(this.addressPoint.coordinates),
{ icon: markerIcon },
);
}
this.marker.addTo(this.map);
},
update() {
if (this.marker && this.entity.addressMap.center) {
this.marker.setLatLng(lonLatForLeaflet(this.entity.addressMap.center));
this.map.panTo(lonLatForLeaflet(this.entity.addressMap.center));
}
},
},
mounted() {
this.init();
},
};
</script>

280
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMore.vue
View File

@@ -1,149 +1,149 @@
<template>
<h4 class="h3">
{{ $t("fill_an_address") }}
</h4>
<div class="row my-3">
<div class="col-lg-6" v-if="!isNoAddress">
<div class="form-floating my-1">
<input
class="form-control"
type="text"
name="floor"
:placeholder="$t('floor')"
v-model="floor"
/>
<label for="floor">{{ $t("floor") }}</label>
</div>
<div class="form-floating my-1">
<input
class="form-control"
type="text"
name="corridor"
:placeholder="$t('corridor')"
v-model="corridor"
/>
<label for="corridor">{{ $t("corridor") }}</label>
</div>
<div class="form-floating my-1">
<input
class="form-control"
type="text"
name="steps"
:placeholder="$t('steps')"
v-model="steps"
/>
<label for="steps">{{ $t("steps") }}</label>
</div>
<div class="form-floating my-1">
<input
class="form-control"
type="text"
name="flat"
:placeholder="$t('flat')"
v-model="flat"
/>
<label for="flat">{{ $t("flat") }}</label>
</div>
</div>
<div :class="isNoAddress ? 'col-lg-12' : 'col-lg-6'">
<div class="form-floating my-1" v-if="!isNoAddress">
<input
class="form-control"
type="text"
name="buildingName"
maxlength="255"
:placeholder="$t('buildingName')"
v-model="buildingName"
/>
<label for="buildingName">{{ $t("buildingName") }}</label>
</div>
<div class="form-floating my-1">
<input
class="form-control"
type="text"
name="extra"
maxlength="255"
:placeholder="$t('extra')"
v-model="extra"
/>
<label for="extra">{{ $t("extra") }}</label>
</div>
<div class="form-floating my-1" v-if="!isNoAddress">
<input
class="form-control"
type="text"
name="distribution"
maxlength="255"
:placeholder="$t('distribution')"
v-model="distribution"
/>
<label for="distribution">{{ $t("distribution") }}</label>
</div>
</div>
<h4 class="h3">
{{ $t("fill_an_address") }}
</h4>
<div class="row my-3">
<div class="col-lg-6" v-if="!isNoAddress">
<div class="form-floating my-1">
<input
class="form-control"
type="text"
name="floor"
:placeholder="$t('floor')"
v-model="floor"
/>
<label for="floor">{{ $t("floor") }}</label>
</div>
<div class="form-floating my-1">
<input
class="form-control"
type="text"
name="corridor"
:placeholder="$t('corridor')"
v-model="corridor"
/>
<label for="corridor">{{ $t("corridor") }}</label>
</div>
<div class="form-floating my-1">
<input
class="form-control"
type="text"
name="steps"
:placeholder="$t('steps')"
v-model="steps"
/>
<label for="steps">{{ $t("steps") }}</label>
</div>
<div class="form-floating my-1">
<input
class="form-control"
type="text"
name="flat"
:placeholder="$t('flat')"
v-model="flat"
/>
<label for="flat">{{ $t("flat") }}</label>
</div>
</div>
<div :class="isNoAddress ? 'col-lg-12' : 'col-lg-6'">
<div class="form-floating my-1" v-if="!isNoAddress">
<input
class="form-control"
type="text"
name="buildingName"
maxlength="255"
:placeholder="$t('buildingName')"
v-model="buildingName"
/>
<label for="buildingName">{{ $t("buildingName") }}</label>
</div>
<div class="form-floating my-1">
<input
class="form-control"
type="text"
name="extra"
maxlength="255"
:placeholder="$t('extra')"
v-model="extra"
/>
<label for="extra">{{ $t("extra") }}</label>
</div>
<div class="form-floating my-1" v-if="!isNoAddress">
<input
class="form-control"
type="text"
name="distribution"
maxlength="255"
:placeholder="$t('distribution')"
v-model="distribution"
/>
<label for="distribution">{{ $t("distribution") }}</label>
</div>
</div>
</div>
</template>
<script>
export default {
name: "AddressMore",
props: ["entity", "isNoAddress"],
computed: {
floor: {
set(value) {
this.entity.selected.address.floor = value;
},
get() {
return this.entity.selected.address.floor;
},
},
corridor: {
set(value) {
this.entity.selected.address.corridor = value;
},
get() {
return this.entity.selected.address.corridor;
},
},
steps: {
set(value) {
this.entity.selected.address.steps = value;
},
get() {
return this.entity.selected.address.steps;
},
},
flat: {
set(value) {
this.entity.selected.address.flat = value;
},
get() {
return this.entity.selected.address.flat;
},
},
buildingName: {
set(value) {
this.entity.selected.address.buildingName = value;
},
get() {
return this.entity.selected.address.buildingName;
},
},
extra: {
set(value) {
this.entity.selected.address.extra = value;
},
get() {
return this.entity.selected.address.extra;
},
},
distribution: {
set(value) {
this.entity.selected.address.distribution = value;
},
get() {
return this.entity.selected.address.distribution;
},
},
name: "AddressMore",
props: ["entity", "isNoAddress"],
computed: {
floor: {
set(value) {
this.entity.selected.address.floor = value;
},
get() {
return this.entity.selected.address.floor;
},
},
corridor: {
set(value) {
this.entity.selected.address.corridor = value;
},
get() {
return this.entity.selected.address.corridor;
},
},
steps: {
set(value) {
this.entity.selected.address.steps = value;
},
get() {
return this.entity.selected.address.steps;
},
},
flat: {
set(value) {
this.entity.selected.address.flat = value;
},
get() {
return this.entity.selected.address.flat;
},
},
buildingName: {
set(value) {
this.entity.selected.address.buildingName = value;
},
get() {
return this.entity.selected.address.buildingName;
},
},
extra: {
set(value) {
this.entity.selected.address.extra = value;
},
get() {
return this.entity.selected.address.extra;
},
},
distribution: {
set(value) {
this.entity.selected.address.distribution = value;
},
get() {
return this.entity.selected.address.distribution;
},
},
},
};
</script>

414
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue
View File

@@ -1,227 +1,223 @@
<template>
<div class="my-1">
<label class="col-form-label" for="addressSelector">{{
$t("address")
}}</label>
<VueMultiselect
id="addressSelector"
v-model="value"
:placeholder="$t('select_address')"
:tag-placeholder="$t('create_address')"
:select-label="$t('multiselect.select_label')"
:deselect-label="$t('create_address')"
:selected-label="$t('multiselect.selected_label')"
@search-change="listenInputSearch"
:internal-search="false"
ref="addressSelector"
@select="selectAddress"
@remove="remove"
name="field"
track-by="id"
label="value"
:custom-label="transName"
:taggable="true"
:multiple="false"
@tag="addAddress"
:loading="isLoading"
:options="addresses"
/>
</div>
<div class="my-1">
<label class="col-form-label" for="addressSelector">{{
$t("address")
}}</label>
<VueMultiselect
id="addressSelector"
v-model="value"
:placeholder="$t('select_address')"
:tag-placeholder="$t('create_address')"
:select-label="$t('multiselect.select_label')"
:deselect-label="$t('create_address')"
:selected-label="$t('multiselect.selected_label')"
@search-change="listenInputSearch"
:internal-search="false"
ref="addressSelector"
@select="selectAddress"
@remove="remove"
name="field"
track-by="id"
label="value"
:custom-label="transName"
:taggable="true"
:multiple="false"
@tag="addAddress"
:loading="isLoading"
:options="addresses"
/>
</div>
<div
class="custom-address row g-1"
v-if="
writeNewAddress ||
writeNewPostalCode ||
(isEnteredCustomAddress && !isAddressSelectorOpen)
"
>
<div class="col-10">
<div class="form-floating">
<input
class="form-control"
type="text"
name="street"
:placeholder="$t('street')"
v-model="street"
/>
<label for="street">{{ $t("street") }}</label>
</div>
</div>
<div class="col-2">
<div class="form-floating">
<input
class="form-control"
type="text"
name="streetNumber"
:placeholder="$t('streetNumber')"
v-model="streetNumber"
/>
<label for="streetNumber">{{ $t("streetNumber") }}</label>
</div>
</div>
<div
class="custom-address row g-1"
v-if="
writeNewAddress ||
writeNewPostalCode ||
(isEnteredCustomAddress && !isAddressSelectorOpen)
"
>
<div class="col-10">
<div class="form-floating">
<input
class="form-control"
type="text"
name="street"
:placeholder="$t('street')"
v-model="street"
/>
<label for="street">{{ $t("street") }}</label>
</div>
</div>
<div class="col-2">
<div class="form-floating">
<input
class="form-control"
type="text"
name="streetNumber"
:placeholder="$t('streetNumber')"
v-model="streetNumber"
/>
<label for="streetNumber">{{ $t("streetNumber") }}</label>
</div>
</div>
</div>
</template>
<script>
import VueMultiselect from "vue-multiselect";
import {
searchReferenceAddresses,
fetchReferenceAddresses,
searchReferenceAddresses,
fetchReferenceAddresses,
} from "../../api.js";
export default {
name: "AddressSelection",
components: { VueMultiselect },
props: ["entity", "context", "updateMapCenter", "flag", "checkErrors"],
data() {
return {
value: this.context.edit
? this.entity.address.addressReference
: null,
isLoading: false,
};
name: "AddressSelection",
components: { VueMultiselect },
props: ["entity", "context", "updateMapCenter", "flag", "checkErrors"],
data() {
return {
value: this.context.edit ? this.entity.address.addressReference : null,
isLoading: false,
};
},
computed: {
writeNewAddress() {
return this.entity.selected.writeNew.address;
},
computed: {
writeNewAddress() {
return this.entity.selected.writeNew.address;
},
writeNewPostalCode() {
return this.entity.selected.writeNew.postCode;
},
isAddressSelectorOpen() {
return this.$refs.addressSelector.$data.isOpen;
},
isEnteredCustomAddress() {
return (
this.$data.value !== null &&
typeof this.$data.value.text !== "undefined"
);
},
addresses() {
return this.entity.loaded.addresses;
},
street: {
set(value) {
this.entity.selected.address.street = value;
},
get() {
return this.entity.selected.address.street;
},
},
streetNumber: {
set(value) {
this.entity.selected.address.streetNumber = value;
},
get() {
return this.entity.selected.address.streetNumber;
},
},
writeNewPostalCode() {
return this.entity.selected.writeNew.postCode;
},
methods: {
transName(value) {
return value.streetNumber === undefined
? value.street
: `${value.streetNumber}, ${value.street}`;
},
selectAddress(value) {
this.entity.selected.address = value;
this.entity.selected.address.addressReference = {
id: value.id,
};
this.entity.selected.address.street = value.street;
this.entity.selected.address.streetNumber = value.streetNumber;
this.entity.selected.writeNew.address = false;
this.updateMapCenter(value.point);
this.checkErrors();
},
remove() {
this.entity.selected.address = {};
this.checkErrors();
},
listenInputSearch(query) {
//console.log('listenInputSearch', query, this.isAddressSelectorOpen);
if (
!this.entity.selected.writeNew.postcode &&
"id" in this.entity.selected.city
) {
if (query.length > 2) {
this.isLoading = true;
searchReferenceAddresses(query, this.entity.selected.city)
.then(
(addresses) =>
new Promise((resolve, reject) => {
this.entity.loaded.addresses =
addresses.results;
this.isLoading = false;
resolve();
}),
)
.catch((error) => {
console.log(error); //TODO better error handling
this.isLoading = false;
});
} else {
if (query.length === 0) {
// Fetch all cities when suppressing the query
this.isLoading = true;
fetchReferenceAddresses(this.entity.selected.city)
.then(
(addresses) =>
new Promise((resolve, reject) => {
this.entity.loaded.addresses =
addresses.results;
this.isLoading = false;
resolve();
}),
)
.catch((error) => {
console.log(error);
this.isLoading = false;
});
}
}
}
if (this.isAddressSelectorOpen) {
this.$data.value = { text: query };
} else if (this.isEnteredCustomAddress) {
let addr = this.splitAddress(this.$data.value.text);
this.entity.selected.address.street = addr.street;
this.entity.selected.address.streetNumber = addr.number;
this.entity.selected.writeNew.address = true;
this.checkErrors();
}
},
splitAddress(address) {
let substr = address.split(",").map((s) => s.trim());
if (substr.length === 1) {
substr = address.split(" ");
}
let decimal = [];
substr.forEach((s, i) => {
decimal[i] = /^\d+$/.test(s);
isAddressSelectorOpen() {
return this.$refs.addressSelector.$data.isOpen;
},
isEnteredCustomAddress() {
return (
this.$data.value !== null &&
typeof this.$data.value.text !== "undefined"
);
},
addresses() {
return this.entity.loaded.addresses;
},
street: {
set(value) {
this.entity.selected.address.street = value;
},
get() {
return this.entity.selected.address.street;
},
},
streetNumber: {
set(value) {
this.entity.selected.address.streetNumber = value;
},
get() {
return this.entity.selected.address.streetNumber;
},
},
},
methods: {
transName(value) {
return value.streetNumber === undefined
? value.street
: `${value.streetNumber}, ${value.street}`;
},
selectAddress(value) {
this.entity.selected.address = value;
this.entity.selected.address.addressReference = {
id: value.id,
};
this.entity.selected.address.street = value.street;
this.entity.selected.address.streetNumber = value.streetNumber;
this.entity.selected.writeNew.address = false;
this.updateMapCenter(value.point);
this.checkErrors();
},
remove() {
this.entity.selected.address = {};
this.checkErrors();
},
listenInputSearch(query) {
//console.log('listenInputSearch', query, this.isAddressSelectorOpen);
if (
!this.entity.selected.writeNew.postcode &&
"id" in this.entity.selected.city
) {
if (query.length > 2) {
this.isLoading = true;
searchReferenceAddresses(query, this.entity.selected.city)
.then(
(addresses) =>
new Promise((resolve, reject) => {
this.entity.loaded.addresses = addresses.results;
this.isLoading = false;
resolve();
}),
)
.catch((error) => {
console.log(error); //TODO better error handling
this.isLoading = false;
});
if (decimal[0] === true) {
return {
number: substr.shift(),
street: substr.join(" "),
};
} else if (decimal[decimal.length - 1] === true) {
return {
number: substr.pop(),
street: substr.join(" "),
};
}
return {
number: "",
street: substr.join(" "),
};
},
addAddress() {
this.entity.selected.writeNew.address = true;
},
} else {
if (query.length === 0) {
// Fetch all cities when suppressing the query
this.isLoading = true;
fetchReferenceAddresses(this.entity.selected.city)
.then(
(addresses) =>
new Promise((resolve, reject) => {
this.entity.loaded.addresses = addresses.results;
this.isLoading = false;
resolve();
}),
)
.catch((error) => {
console.log(error);
this.isLoading = false;
});
}
}
}
if (this.isAddressSelectorOpen) {
this.$data.value = { text: query };
} else if (this.isEnteredCustomAddress) {
let addr = this.splitAddress(this.$data.value.text);
this.entity.selected.address.street = addr.street;
this.entity.selected.address.streetNumber = addr.number;
this.entity.selected.writeNew.address = true;
this.checkErrors();
}
},
splitAddress(address) {
let substr = address.split(",").map((s) => s.trim());
if (substr.length === 1) {
substr = address.split(" ");
}
let decimal = [];
substr.forEach((s, i) => {
decimal[i] = /^\d+$/.test(s);
});
if (decimal[0] === true) {
return {
number: substr.shift(),
street: substr.join(" "),
};
} else if (decimal[decimal.length - 1] === true) {
return {
number: substr.pop(),
street: substr.join(" "),
};
}
return {
number: "",
street: substr.join(" "),
};
},
addAddress() {
this.entity.selected.writeNew.address = true;
},
},
};
</script>

459
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue
View File

@@ -1,60 +1,60 @@
<template>
<div class="my-1">
<label class="col-form-label">{{ $t("city") }}</label>
<VueMultiselect
id="citySelector"
v-model="value"
@search-change="listenInputSearch"
ref="citySelector"
@select="selectCity"
@remove="remove"
name="field"
track-by="id"
label="value"
:custom-label="transName"
:placeholder="$t('select_city')"
:select-label="$t('multiselect.select_label')"
:deselect-label="$t('create_postal_code')"
:selected-label="$t('multiselect.selected_label')"
:taggable="true"
:multiple="false"
:internal-search="false"
@tag="addPostcode"
:tag-placeholder="$t('create_postal_code')"
:loading="isLoading"
:options="cities"
/>
</div>
<div class="my-1">
<label class="col-form-label">{{ $t("city") }}</label>
<VueMultiselect
id="citySelector"
v-model="value"
@search-change="listenInputSearch"
ref="citySelector"
@select="selectCity"
@remove="remove"
name="field"
track-by="id"
label="value"
:custom-label="transName"
:placeholder="$t('select_city')"
:select-label="$t('multiselect.select_label')"
:deselect-label="$t('create_postal_code')"
:selected-label="$t('multiselect.selected_label')"
:taggable="true"
:multiple="false"
:internal-search="false"
@tag="addPostcode"
:tag-placeholder="$t('create_postal_code')"
:loading="isLoading"
:options="cities"
/>
</div>
<div
class="custom-postcode row g-1"
v-if="writeNewPostcode || (isEnteredCustomCity && !isCitySelectorOpen)"
>
<div class="col-4">
<div class="form-floating">
<input
class="form-control"
type="text"
id="code"
:placeholder="$t('postalCode_code')"
v-model="code"
/>
<label for="code">{{ $t("postalCode_code") }}</label>
</div>
</div>
<div class="col-8">
<div class="form-floating">
<input
class="form-control"
type="text"
id="name"
:placeholder="$t('postalCode_name')"
v-model="name"
/>
<label for="name">{{ $t("postalCode_name") }}</label>
</div>
</div>
<div
class="custom-postcode row g-1"
v-if="writeNewPostcode || (isEnteredCustomCity && !isCitySelectorOpen)"
>
<div class="col-4">
<div class="form-floating">
<input
class="form-control"
type="text"
id="code"
:placeholder="$t('postalCode_code')"
v-model="code"
/>
<label for="code">{{ $t("postalCode_code") }}</label>
</div>
</div>
<div class="col-8">
<div class="form-floating">
<input
class="form-control"
type="text"
id="name"
:placeholder="$t('postalCode_name')"
v-model="name"
/>
<label for="name">{{ $t("postalCode_name") }}</label>
</div>
</div>
</div>
</template>
<script>
@@ -62,190 +62,185 @@ import VueMultiselect from "vue-multiselect";
import { searchCities, fetchCities } from "../../api.js";
export default {
name: "CitySelection",
components: { VueMultiselect },
props: [
"entity",
"context",
"focusOnAddress",
"updateMapCenter",
"flag",
"checkErrors",
],
emits: ["getReferenceAddresses"],
data() {
return {
value: this.context.edit ? this.entity.address.postcode : null,
isLoading: false,
};
name: "CitySelection",
components: { VueMultiselect },
props: [
"entity",
"context",
"focusOnAddress",
"updateMapCenter",
"flag",
"checkErrors",
],
emits: ["getReferenceAddresses"],
data() {
return {
value: this.context.edit ? this.entity.address.postcode : null,
isLoading: false,
};
},
computed: {
writeNewPostcode() {
return this.entity.selected.writeNew.postcode;
},
computed: {
writeNewPostcode() {
return this.entity.selected.writeNew.postcode;
},
isCitySelectorOpen() {
return this.$refs.citySelector.$data.isOpen;
},
isEnteredCustomCity() {
return (
this.$data.value !== null &&
typeof this.$data.value.text !== "undefined"
);
},
cities() {
return this.entity.loaded.cities.sort(
(a, b) => Number(a.code) - Number(b.code) || a.name > b.name,
);
},
name: {
set(value) {
this.entity.selected.postcode.name = value;
},
get() {
return this.entity.selected.postcode.name;
},
},
code: {
set(value) {
this.entity.selected.postcode.code = value;
},
get() {
return this.entity.selected.postcode.code;
},
},
isCitySelectorOpen() {
return this.$refs.citySelector.$data.isOpen;
},
mounted() {
console.log(
"writeNew.postcode",
this.entity.selected.writeNew.postcode,
"in mounted",
);
if (this.context.edit) {
this.entity.selected.city = this.value;
this.entity.selected.postcode.name = this.value.name;
this.entity.selected.postcode.code = this.value.code;
this.$emit("getReferenceAddresses", this.value);
if (typeof this.value.center !== "undefined") {
this.updateMapCenter(this.value.center);
if (this.value.center.coordinates) {
this.entity.selected.postcode.coordinates =
this.value.center.coordinates;
}
}
isEnteredCustomCity() {
return (
this.$data.value !== null &&
typeof this.$data.value.text !== "undefined"
);
},
cities() {
return this.entity.loaded.cities.sort(
(a, b) => Number(a.code) - Number(b.code) || a.name > b.name,
);
},
name: {
set(value) {
this.entity.selected.postcode.name = value;
},
get() {
return this.entity.selected.postcode.name;
},
},
code: {
set(value) {
this.entity.selected.postcode.code = value;
},
get() {
return this.entity.selected.postcode.code;
},
},
},
mounted() {
console.log(
"writeNew.postcode",
this.entity.selected.writeNew.postcode,
"in mounted",
);
if (this.context.edit) {
this.entity.selected.city = this.value;
this.entity.selected.postcode.name = this.value.name;
this.entity.selected.postcode.code = this.value.code;
this.$emit("getReferenceAddresses", this.value);
if (typeof this.value.center !== "undefined") {
this.updateMapCenter(this.value.center);
if (this.value.center.coordinates) {
this.entity.selected.postcode.coordinates =
this.value.center.coordinates;
}
}
}
},
methods: {
transName(value) {
return value.code && value.name ? `${value.name} (${value.code})` : "";
},
methods: {
transName(value) {
return value.code && value.name
? `${value.name} (${value.code})`
: "";
},
selectCity(value) {
console.log(value);
this.entity.selected.city = value;
this.entity.selected.postcode.name = value.name;
this.entity.selected.postcode.code = value.code;
if (value.center) {
this.entity.selected.postcode.coordinates =
value.center.coordinates;
}
this.entity.selected.writeNew.postcode = false;
this.$emit("getReferenceAddresses", value);
this.focusOnAddress();
if (value.center) {
this.updateMapCenter(value.center);
}
this.checkErrors();
},
remove() {
this.entity.selected.city = {};
this.checkErrors();
},
listenInputSearch(query) {
if (query.length > 2) {
this.isLoading = true;
searchCities(query, this.entity.selected.country)
.then(
(cities) =>
new Promise((resolve, reject) => {
this.entity.loaded.cities =
cities.results.filter(
(c) => c.origin !== 3,
); // filter out user-defined cities
this.isLoading = false;
resolve();
}),
)
.catch((error) => {
console.log(error); //TODO better error handling
this.isLoading = false;
});
} else {
if (query.length === 0) {
// Fetch all cities when suppressing the query
this.isLoading = true;
fetchCities(this.entity.selected.country)
.then(
(cities) =>
new Promise((resolve, reject) => {
this.entity.loaded.cities =
cities.results.filter(
(c) => c.origin !== 3,
); // filter out user-defined cities
this.isLoading = false;
resolve();
}),
)
.catch((error) => {
console.log(error);
this.isLoading = false;
});
}
}
if (this.isCitySelectorOpen) {
this.$data.value = { text: query };
} else if (this.isEnteredCustomCity) {
let city = this.splitCity(this.$data.value.text);
this.$refs.citySelector.currentOptionLabel = "";
this.entity.selected.city = city;
this.entity.selected.postcode.name = city.name;
this.entity.selected.postcode.code = city.code;
this.entity.selected.writeNew.postcode = true;
console.log("writeNew.postcode true, in listenInputSearch");
}
},
splitCity(city) {
let substr = city.split("-").map((s) => s.trim());
if (substr.length === 1) {
substr = city.split(" ");
}
//console.log('substr', substr);
let decimal = [];
substr.forEach((s, i) => {
decimal[i] = /^\d+$/.test(s);
selectCity(value) {
console.log(value);
this.entity.selected.city = value;
this.entity.selected.postcode.name = value.name;
this.entity.selected.postcode.code = value.code;
if (value.center) {
this.entity.selected.postcode.coordinates = value.center.coordinates;
}
this.entity.selected.writeNew.postcode = false;
this.$emit("getReferenceAddresses", value);
this.focusOnAddress();
if (value.center) {
this.updateMapCenter(value.center);
}
this.checkErrors();
},
remove() {
this.entity.selected.city = {};
this.checkErrors();
},
listenInputSearch(query) {
if (query.length > 2) {
this.isLoading = true;
searchCities(query, this.entity.selected.country)
.then(
(cities) =>
new Promise((resolve, reject) => {
this.entity.loaded.cities = cities.results.filter(
(c) => c.origin !== 3,
); // filter out user-defined cities
this.isLoading = false;
resolve();
}),
)
.catch((error) => {
console.log(error); //TODO better error handling
this.isLoading = false;
});
} else {
if (query.length === 0) {
// Fetch all cities when suppressing the query
this.isLoading = true;
fetchCities(this.entity.selected.country)
.then(
(cities) =>
new Promise((resolve, reject) => {
this.entity.loaded.cities = cities.results.filter(
(c) => c.origin !== 3,
); // filter out user-defined cities
this.isLoading = false;
resolve();
}),
)
.catch((error) => {
console.log(error);
this.isLoading = false;
});
if (decimal[0] === true) {
return {
code: substr.shift(),
name: substr.join(" "),
};
} else if (decimal[decimal.length - 1] === true) {
return {
code: substr.pop(),
name: substr.join(" "),
};
}
return {
code: "",
name: substr.join(" "),
};
},
addPostcode() {
console.log("addPostcode: pass here ?? never, it seems");
this.entity.selected.writeNew.postcode = true;
console.log("writeNew.postcode true, in addPostcode");
},
}
}
if (this.isCitySelectorOpen) {
this.$data.value = { text: query };
} else if (this.isEnteredCustomCity) {
let city = this.splitCity(this.$data.value.text);
this.$refs.citySelector.currentOptionLabel = "";
this.entity.selected.city = city;
this.entity.selected.postcode.name = city.name;
this.entity.selected.postcode.code = city.code;
this.entity.selected.writeNew.postcode = true;
console.log("writeNew.postcode true, in listenInputSearch");
}
},
splitCity(city) {
let substr = city.split("-").map((s) => s.trim());
if (substr.length === 1) {
substr = city.split(" ");
}
//console.log('substr', substr);
let decimal = [];
substr.forEach((s, i) => {
decimal[i] = /^\d+$/.test(s);
});
if (decimal[0] === true) {
return {
code: substr.shift(),
name: substr.join(" "),
};
} else if (decimal[decimal.length - 1] === true) {
return {
code: substr.pop(),
name: substr.join(" "),
};
}
return {
code: "",
name: substr.join(" "),
};
},
addPostcode() {
console.log("addPostcode: pass here ?? never, it seems");
this.entity.selected.writeNew.postcode = true;
console.log("writeNew.postcode true, in addPostcode");
},
},
};
</script>

140
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CountrySelection.vue
View File

@@ -1,23 +1,23 @@
<template>
<div class="my-1">
<label class="col-form-label" for="countrySelect">{{
$t("country")
}}</label>
<VueMultiselect
id="countrySelect"
label="name"
track-by="id"
:custom-label="transName"
:placeholder="$t('select_country')"
:options="sortedCountries"
v-model="value"
:select-label="$t('multiselect.select_label')"
:deselect-label="$t('multiselect.deselect_label')"
:selected-label="$t('multiselect.selected_label')"
@select="selectCountry"
@remove="remove"
/>
</div>
<div class="my-1">
<label class="col-form-label" for="countrySelect">{{
$t("country")
}}</label>
<VueMultiselect
id="countrySelect"
label="name"
track-by="id"
:custom-label="transName"
:placeholder="$t('select_country')"
:options="sortedCountries"
v-model="value"
:select-label="$t('multiselect.select_label')"
:deselect-label="$t('multiselect.deselect_label')"
:selected-label="$t('multiselect.selected_label')"
@select="selectCountry"
@remove="remove"
/>
</div>
</template>
<script>
@@ -25,63 +25,59 @@ import VueMultiselect from "vue-multiselect";
import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
export default {
name: "CountrySelection",
components: { VueMultiselect },
props: ["context", "entity", "flag", "checkErrors"],
emits: ["getCities"],
data() {
return {
value: this.selectCountryByCode(
this.context.edit
? this.entity.selected.country.code
: this.context.defaults.default_country,
),
};
name: "CountrySelection",
components: { VueMultiselect },
props: ["context", "entity", "flag", "checkErrors"],
emits: ["getCities"],
data() {
return {
value: this.selectCountryByCode(
this.context.edit
? this.entity.selected.country.code
: this.context.defaults.default_country,
),
};
},
computed: {
sortedCountries() {
const countries = this.entity.loaded.countries;
let sortedCountries = [];
sortedCountries.push(...countries.filter((c) => c.countryCode === "FR"));
sortedCountries.push(...countries.filter((c) => c.countryCode === "BE"));
sortedCountries.push(
...countries
.filter((c) => c.countryCode !== "FR")
.filter((c) => c.countryCode !== "BE"),
);
return sortedCountries;
},
computed: {
sortedCountries() {
const countries = this.entity.loaded.countries;
let sortedCountries = [];
sortedCountries.push(
...countries.filter((c) => c.countryCode === "FR"),
);
sortedCountries.push(
...countries.filter((c) => c.countryCode === "BE"),
);
sortedCountries.push(
...countries
.filter((c) => c.countryCode !== "FR")
.filter((c) => c.countryCode !== "BE"),
);
return sortedCountries;
},
},
mounted() {
console.log("country selection mounted", this.value);
if (this.value !== undefined) {
this.selectCountry(this.value);
}
},
methods: {
selectCountryByCode(countryCode) {
return this.entity.loaded.countries.filter(
(c) => c.countryCode === countryCode,
)[0];
},
mounted() {
console.log("country selection mounted", this.value);
if (this.value !== undefined) {
this.selectCountry(this.value);
}
transName({ name }) {
return localizeString(name);
},
methods: {
selectCountryByCode(countryCode) {
return this.entity.loaded.countries.filter(
(c) => c.countryCode === countryCode,
)[0];
},
transName({ name }) {
return localizeString(name);
},
selectCountry(value) {
//console.log('select country', value);
this.entity.selected.country = value;
this.$emit("getCities", value);
this.checkErrors();
},
remove() {
this.entity.selected.country = null;
this.checkErrors();
},
selectCountry(value) {
//console.log('select country', value);
this.entity.selected.country = value;
this.$emit("getCities", value);
this.checkErrors();
},
remove() {
this.entity.selected.country = null;
this.checkErrors();
},
},
};
</script>

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

@@ -1,69 +1,66 @@
<template>
<div v-if="insideModal === false" class="loading">
<i
v-if="flag.loading"
class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"
<div v-if="insideModal === false" class="loading">
<i v-if="flag.loading" class="fa fa-circle-o-notch fa-spin fa-2x fa-fw" />
<span class="sr-only">{{ $t("loading") }}</span>
</div>
<div v-if="errorMsg && errorMsg.length > 0" class="alert alert-danger">
{{ errorMsg }}
</div>
<address-render-box :address="selectedAddress" />
<div class="row">
<div v-if="showDateFrom" class="col-lg-6 address-valid date-since">
<h3>{{ $t(getValidFromDateText) }}</h3>
<div class="input-group mb-3">
<span class="input-group-text" id="validFrom"
><i class="fa fa-fw fa-calendar"
/></span>
<input
type="date"
class="form-control form-control-lg"
name="validFrom"
:placeholder="$t(getValidFromDateText)"
v-model="validFrom"
aria-describedby="validFrom"
/>
<span class="sr-only">{{ $t("loading") }}</span>
</div>
</div>
<div v-if="errorMsg && errorMsg.length > 0" class="alert alert-danger">
{{ errorMsg }}
<div v-if="showDateTo" class="col-lg-6 address-valid date-until">
<h3>{{ $t(getValidToDateText) }}</h3>
<div class="input-group mb-3">
<span class="input-group-text" id="validTo"
><i class="fa fa-fw fa-calendar"
/></span>
<input
type="date"
class="form-control form-control-lg"
name="validTo"
:placeholder="$t(getValidToDateText)"
v-model="validTo"
aria-describedby="validTo"
/>
</div>
</div>
</div>
<address-render-box :address="selectedAddress" />
<div class="row">
<div v-if="showDateFrom" class="col-lg-6 address-valid date-since">
<h3>{{ $t(getValidFromDateText) }}</h3>
<div class="input-group mb-3">
<span class="input-group-text" id="validFrom"
><i class="fa fa-fw fa-calendar"
/></span>
<input
type="date"
class="form-control form-control-lg"
name="validFrom"
:placeholder="$t(getValidFromDateText)"
v-model="validFrom"
aria-describedby="validFrom"
/>
</div>
</div>
<div v-if="showDateTo" class="col-lg-6 address-valid date-until">
<h3>{{ $t(getValidToDateText) }}</h3>
<div class="input-group mb-3">
<span class="input-group-text" id="validTo"
><i class="fa fa-fw fa-calendar"
/></span>
<input
type="date"
class="form-control form-control-lg"
name="validTo"
:placeholder="$t(getValidToDateText)"
v-model="validTo"
aria-describedby="validTo"
/>
</div>
</div>
</div>
<action-buttons
v-if="insideModal === false"
:options="this.options"
:defaultz="this.defaultz"
>
<template #before>
<slot name="before" />
</template>
<template #action>
<slot name="action" />
</template>
<template #after>
<slot name="after" />
</template>
</action-buttons>
<action-buttons
v-if="insideModal === false"
:options="this.options"
:defaultz="this.defaultz"
>
<template #before>
<slot name="before" />
</template>
<template #action>
<slot name="action" />
</template>
<template #after>
<slot name="after" />
</template>
</action-buttons>
</template>
<script>
@@ -72,116 +69,113 @@ import AddressRenderBox from "ChillMainAssets/vuejs/_components/Entity/AddressRe
import ActionButtons from "./ActionButtons.vue";
export default {
name: "DatePane",
components: {
AddressRenderBox,
ActionButtons,
name: "DatePane",
components: {
AddressRenderBox,
ActionButtons,
},
props: [
"context",
"options",
"defaultz",
"flag",
"entity",
"errorMsg",
"insideModal",
],
computed: {
address() {
return this.entity.address;
},
props: [
"context",
"options",
"defaultz",
"flag",
"entity",
"errorMsg",
"insideModal",
],
computed: {
address() {
return this.entity.address;
},
validFrom: {
set(value) {
this.entity.selected.valid.from = ISOToDate(value);
},
get() {
return dateToISO(this.entity.selected.valid.from);
},
},
validTo: {
set(value) {
this.entity.selected.valid.to = ISOToDate(value);
},
get() {
return dateToISO(this.entity.selected.valid.to);
},
},
getValidFromDateText() {
return this.context.target.name === "household"
? "move_date"
: "validFrom";
},
getValidToDateText() {
return "validTo";
},
showDateFrom() {
return !this.context.edit && this.options.useDate.validFrom;
},
showDateTo() {
return !this.context.edit && this.options.useDate.validTo;
},
selectedAddress() {
let address = {};
address["country"] = this.entity.selected.country
? this.entity.selected.country
: null;
address["postcode"] = this.entity.selected.postcode
? this.entity.selected.postcode
: null;
if (this.entity.selected.address) {
let number = this.entity.selected.address.streetNumber
? this.entity.selected.address.streetNumber
: null;
let street = this.entity.selected.address.street
? this.entity.selected.address.street
: null;
address["text"] = number + ", " + street;
address["street"] = this.entity.selected.address.street
? this.entity.selected.address.street
: null;
address["streetNumber"] = this.entity.selected.address
.streetNumber
? this.entity.selected.address.streetNumber
: null;
address["floor"] = this.entity.selected.address.floor
? this.entity.selected.address.floor
: null;
address["corridor"] = this.entity.selected.address.corridor
? this.entity.selected.address.corridor
: null;
address["steps"] = this.entity.selected.address.steps
? this.entity.selected.address.steps
: null;
address["flat"] = this.entity.selected.address.flat
? this.entity.selected.address.flat
: null;
address["buildingName"] = this.entity.selected.address
.buildingName
? this.entity.selected.address.buildingName
: null;
address["distribution"] = this.entity.selected.address
.distribution
? this.entity.selected.address.distribution
: null;
address["extra"] = this.entity.selected.address.extra
? this.entity.selected.address.extra
: null;
}
if (this.entity.selected.valid) {
address["validFrom"] = this.entity.selected.valid.from
? dateToISO(this.entity.selected.valid.from)
: null;
address["validTo"] = this.entity.selected.valid.to
? dateToISO(this.entity.selected.valid.to)
: null;
}
return address;
},
validFrom: {
set(value) {
this.entity.selected.valid.from = ISOToDate(value);
},
get() {
return dateToISO(this.entity.selected.valid.from);
},
},
validTo: {
set(value) {
this.entity.selected.valid.to = ISOToDate(value);
},
get() {
return dateToISO(this.entity.selected.valid.to);
},
},
getValidFromDateText() {
return this.context.target.name === "household"
? "move_date"
: "validFrom";
},
getValidToDateText() {
return "validTo";
},
showDateFrom() {
return !this.context.edit && this.options.useDate.validFrom;
},
showDateTo() {
return !this.context.edit && this.options.useDate.validTo;
},
selectedAddress() {
let address = {};
address["country"] = this.entity.selected.country
? this.entity.selected.country
: null;
address["postcode"] = this.entity.selected.postcode
? this.entity.selected.postcode
: null;
if (this.entity.selected.address) {
let number = this.entity.selected.address.streetNumber
? this.entity.selected.address.streetNumber
: null;
let street = this.entity.selected.address.street
? this.entity.selected.address.street
: null;
address["text"] = number + ", " + street;
address["street"] = this.entity.selected.address.street
? this.entity.selected.address.street
: null;
address["streetNumber"] = this.entity.selected.address.streetNumber
? this.entity.selected.address.streetNumber
: null;
address["floor"] = this.entity.selected.address.floor
? this.entity.selected.address.floor
: null;
address["corridor"] = this.entity.selected.address.corridor
? this.entity.selected.address.corridor
: null;
address["steps"] = this.entity.selected.address.steps
? this.entity.selected.address.steps
: null;
address["flat"] = this.entity.selected.address.flat
? this.entity.selected.address.flat
: null;
address["buildingName"] = this.entity.selected.address.buildingName
? this.entity.selected.address.buildingName
: null;
address["distribution"] = this.entity.selected.address.distribution
? this.entity.selected.address.distribution
: null;
address["extra"] = this.entity.selected.address.extra
? this.entity.selected.address.extra
: null;
}
if (this.entity.selected.valid) {
address["validFrom"] = this.entity.selected.valid.from
? dateToISO(this.entity.selected.valid.from)
: null;
address["validTo"] = this.entity.selected.valid.to
? dateToISO(this.entity.selected.valid.to)
: null;
}
return address;
},
},
};
</script>

343
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue
View File

@@ -1,104 +1,101 @@
<template>
<div class="address-form">
<!-- Not display in modal -->
<div v-if="insideModal === false" class="loading">
<i
v-if="flag.loading"
class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"
/>
<span class="sr-only">Loading...</span>
</div>
<div v-if="errors.length" class="alert alert-warning">
<ul>
<li v-for="(e, i) in errors" :key="i">
{{ e }}
</li>
</ul>
</div>
<h4 class="h3">
{{ $t("select_an_address_title") }}
</h4>
<div class="row my-3">
<div class="col-lg-6">
<div class="form-check">
<input
type="checkbox"
class="form-check-input"
id="isConfidential"
v-model="isConfidential"
:value="valueConfidential"
/>
<label class="form-check-label" for="isConfidential">
{{ $t("isConfidential") }}
</label>
</div>
<div class="form-check">
<input
type="checkbox"
class="form-check-input"
id="isNoAddress"
v-model="isNoAddress"
:value="value"
/>
<label class="form-check-label" for="isNoAddress">
{{ $t("isNoAddress") }}
</label>
</div>
<country-selection
:context="context"
:entity="entity"
:flag="flag"
:check-errors="checkErrors"
@get-cities="$emit('getCities', selected.country)"
/>
<city-selection
:entity="entity"
:context="context"
:focus-on-address="focusOnAddress"
:update-map-center="updateMapCenter"
:flag="flag"
:check-errors="checkErrors"
@get-reference-addresses="
$emit('getReferenceAddresses', selected.city)
"
/>
<address-selection
v-if="!isNoAddress"
:entity="entity"
:context="context"
:update-map-center="updateMapCenter"
:flag="flag"
:check-errors="checkErrors"
/>
</div>
<div class="col-lg-6 mt-3 mt-lg-0">
<address-map :entity="entity" ref="addressMap" />
</div>
</div>
<address-more :entity="entity" :is-no-address="isNoAddress" />
<action-buttons
v-if="insideModal === false"
:options="this.options"
:defaultz="this.defaultz"
>
<template #before>
<slot name="before" />
</template>
<template #action>
<slot name="action" />
</template>
<template #after>
<slot name="after" />
</template>
</action-buttons>
<div class="address-form">
<!-- Not display in modal -->
<div v-if="insideModal === false" class="loading">
<i v-if="flag.loading" class="fa fa-circle-o-notch fa-spin fa-2x fa-fw" />
<span class="sr-only">Loading...</span>
</div>
<div v-if="errors.length" class="alert alert-warning">
<ul>
<li v-for="(e, i) in errors" :key="i">
{{ e }}
</li>
</ul>
</div>
<h4 class="h3">
{{ $t("select_an_address_title") }}
</h4>
<div class="row my-3">
<div class="col-lg-6">
<div class="form-check">
<input
type="checkbox"
class="form-check-input"
id="isConfidential"
v-model="isConfidential"
:value="valueConfidential"
/>
<label class="form-check-label" for="isConfidential">
{{ $t("isConfidential") }}
</label>
</div>
<div class="form-check">
<input
type="checkbox"
class="form-check-input"
id="isNoAddress"
v-model="isNoAddress"
:value="value"
/>
<label class="form-check-label" for="isNoAddress">
{{ $t("isNoAddress") }}
</label>
</div>
<country-selection
:context="context"
:entity="entity"
:flag="flag"
:check-errors="checkErrors"
@get-cities="$emit('getCities', selected.country)"
/>
<city-selection
:entity="entity"
:context="context"
:focus-on-address="focusOnAddress"
:update-map-center="updateMapCenter"
:flag="flag"
:check-errors="checkErrors"
@get-reference-addresses="
$emit('getReferenceAddresses', selected.city)
"
/>
<address-selection
v-if="!isNoAddress"
:entity="entity"
:context="context"
:update-map-center="updateMapCenter"
:flag="flag"
:check-errors="checkErrors"
/>
</div>
<div class="col-lg-6 mt-3 mt-lg-0">
<address-map :entity="entity" ref="addressMap" />
</div>
</div>
<address-more :entity="entity" :is-no-address="isNoAddress" />
<action-buttons
v-if="insideModal === false"
:options="this.options"
:defaultz="this.defaultz"
>
<template #before>
<slot name="before" />
</template>
<template #action>
<slot name="action" />
</template>
<template #after>
<slot name="after" />
</template>
</action-buttons>
</div>
</template>
<script>
@@ -110,88 +107,88 @@ import AddressMore from "./AddAddress/AddressMore";
import ActionButtons from "./ActionButtons.vue";
export default {
name: "EditPane",
components: {
CountrySelection,
CitySelection,
AddressSelection,
AddressMap,
AddressMore,
ActionButtons,
name: "EditPane",
components: {
CountrySelection,
CitySelection,
AddressSelection,
AddressMap,
AddressMore,
ActionButtons,
},
props: [
"context",
"options",
"defaultz",
"flag",
"entity",
"errorMsg",
"insideModal",
"errors",
"checkErrors",
],
emits: ["getCities", "getReferenceAddresses"],
data() {
return {
value: false,
valueConfidential: false,
};
},
computed: {
address() {
return this.entity.address;
},
props: [
"context",
"options",
"defaultz",
"flag",
"entity",
"errorMsg",
"insideModal",
"errors",
"checkErrors",
],
emits: ["getCities", "getReferenceAddresses"],
data() {
return {
value: false,
valueConfidential: false,
};
loaded() {
return this.entity.loaded;
},
computed: {
address() {
return this.entity.address;
},
loaded() {
return this.entity.loaded;
},
selected() {
return this.entity.selected;
},
addressMap() {
return this.entity.addressMap;
},
isConfidential: {
set(value) {
this.entity.selected.confidential = value;
},
get() {
return this.entity.selected.confidential;
},
},
isNoAddress: {
set(value) {
console.log("isNoAddress value", value);
this.entity.selected.isNoAddress = value;
this.checkErrors();
},
get() {
return this.entity.selected.isNoAddress;
},
},
selected() {
return this.entity.selected;
},
methods: {
focusOnAddress() {
const addressSelector = document.getElementById("addressSelector");
if (addressSelector !== null) {
addressSelector.focus();
}
},
updateMapCenter(point) {
console.log("point", point);
this.addressMap.center[0] = point.coordinates[0];
this.addressMap.center[1] = point.coordinates[1];
this.$refs.addressMap.update(); // cast child methods
},
addressMap() {
return this.entity.addressMap;
},
isConfidential: {
set(value) {
this.entity.selected.confidential = value;
},
get() {
return this.entity.selected.confidential;
},
},
isNoAddress: {
set(value) {
console.log("isNoAddress value", value);
this.entity.selected.isNoAddress = value;
this.checkErrors();
},
get() {
return this.entity.selected.isNoAddress;
},
},
},
methods: {
focusOnAddress() {
const addressSelector = document.getElementById("addressSelector");
if (addressSelector !== null) {
addressSelector.focus();
}
},
updateMapCenter(point) {
console.log("point", point);
this.addressMap.center[0] = point.coordinates[0];
this.addressMap.center[1] = point.coordinates[1];
this.$refs.addressMap.update(); // cast child methods
},
},
};
</script>
<style lang="scss">
div.address-form {
div#address_map {
height: 400px;
width: 100%;
z-index: 1;
}
div#address_map {
height: 400px;
width: 100%;
z-index: 1;
}
}
</style>

359
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowPane.vue
View File

@@ -1,109 +1,98 @@
<template>
<div v-if="!onlyButton" class="mt-4 flex-grow-1">
<div class="loading">
<i
v-if="flag.loading"
class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"
/>
<span class="sr-only">{{ $t("loading") }}</span>
</div>
<div v-if="errorMsg && errorMsg.length > 0" class="alert alert-danger">
{{ errorMsg }}
</div>
<div v-if="flag.success" class="alert alert-success">
{{ $t(getSuccessText) }}
<span v-if="forceRedirect">{{ $t("wait_redirection") }}</span>
</div>
<div
v-if="
!this.context.edit &&
!this.flag.success &&
this.context.target.name !== 'household'
"
class="mt-5"
>
<div class="no-address-yet">
<i class="fa fa-map-marker" aria-hidden="true" />
<p class="chill-no-data-statement">
{{ $t("not_yet_address") }}
</p>
<action-buttons
:options="this.options"
:defaultz="this.defaultz"
class="add-address-btn"
>
<template #action>
<button
@click.prevent="$emit('openEditPane')"
class="btn"
:class="getClassButton"
type="button"
name="button"
:title="$t(getTextButton)"
>
<span v-if="displayTextButton">{{
$t(getTextButton)
}}</span>
</button>
</template>
</action-buttons>
</div>
</div>
<address-render-box
:address="address"
:is-multiline="false"
:use-date-pane="useDatePane"
/>
<div
v-if="this.context.target.name === 'household' || this.context.edit"
>
<action-buttons :options="this.options" :defaultz="this.defaultz">
<template #action>
<button
@click.prevent="$emit('openEditPane')"
class="btn"
:class="getClassButton"
type="button"
name="button"
:title="$t(getTextButton)"
>
<span v-if="displayTextButton">{{
$t(getTextButton)
}}</span>
</button>
</template>
</action-buttons>
</div>
<div v-if="!onlyButton" class="mt-4 flex-grow-1">
<div class="loading">
<i v-if="flag.loading" class="fa fa-circle-o-notch fa-spin fa-2x fa-fw" />
<span class="sr-only">{{ $t("loading") }}</span>
</div>
<div v-if="onlyButton">
<div v-if="errorMsg && errorMsg.length > 0" class="alert alert-danger">
{{ errorMsg }}
</div>
<div v-if="flag.success" class="alert alert-success">
{{ $t(getSuccessText) }}
<span v-if="forceRedirect">{{ $t("wait_redirection") }}</span>
</div>
<div
v-if="
!this.context.edit &&
!this.flag.success &&
this.context.target.name !== 'household'
"
class="mt-5"
>
<div class="no-address-yet">
<i class="fa fa-map-marker" aria-hidden="true" />
<p class="chill-no-data-statement">
{{ $t("not_yet_address") }}
</p>
<action-buttons
:options="this.options"
:defaultz="this.defaultz"
class="add-address-btn"
:options="this.options"
:defaultz="this.defaultz"
class="add-address-btn"
>
<template #action>
<button
@click.prevent="$emit('openEditPane')"
class="btn"
:class="getClassButton"
type="button"
name="button"
:title="$t(getTextButton)"
>
<span v-if="displayTextButton">{{
$t(getTextButton)
}}</span>
</button>
</template>
<template #action>
<button
@click.prevent="$emit('openEditPane')"
class="btn"
:class="getClassButton"
type="button"
name="button"
:title="$t(getTextButton)"
>
<span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
</button>
</template>
</action-buttons>
</div>
</div>
<address-render-box
:address="address"
:is-multiline="false"
:use-date-pane="useDatePane"
/>
<div v-if="this.context.target.name === 'household' || this.context.edit">
<action-buttons :options="this.options" :defaultz="this.defaultz">
<template #action>
<button
@click.prevent="$emit('openEditPane')"
class="btn"
:class="getClassButton"
type="button"
name="button"
:title="$t(getTextButton)"
>
<span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
</button>
</template>
</action-buttons>
</div>
</div>
<div v-if="onlyButton">
<action-buttons
:options="this.options"
:defaultz="this.defaultz"
class="add-address-btn"
>
<template #action>
<button
@click.prevent="$emit('openEditPane')"
class="btn"
:class="getClassButton"
type="button"
name="button"
:title="$t(getTextButton)"
>
<span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
</button>
</template>
</action-buttons>
</div>
</template>
<script>
@@ -111,103 +100,101 @@ import AddressRenderBox from "ChillMainAssets/vuejs/_components/Entity/AddressRe
import ActionButtons from "./ActionButtons.vue";
export default {
name: "ShowPane",
components: {
AddressRenderBox,
ActionButtons,
name: "ShowPane",
components: {
AddressRenderBox,
ActionButtons,
},
props: [
"context",
"defaultz",
"options",
"flag",
"entity",
"errorMsg",
"useDatePane",
],
emits: ["openEditPane"],
mounted() {
//console.log('context', this.context)
},
computed: {
address() {
return this.entity.address;
},
props: [
"context",
"defaultz",
"options",
"flag",
"entity",
"errorMsg",
"useDatePane",
],
emits: ["openEditPane"],
mounted() {
//console.log('context', this.context)
displayTextButton() {
return typeof this.options.button !== "undefined" &&
typeof this.options.button.displayText !== "undefined"
? this.options.button.displayText
: this.defaultz.button.displayText;
},
computed: {
address() {
return this.entity.address;
},
displayTextButton() {
return typeof this.options.button !== "undefined" &&
typeof this.options.button.displayText !== "undefined"
? this.options.button.displayText
: this.defaultz.button.displayText;
},
getClassButton() {
let type = this.context.edit
? this.defaultz.button.type.edit
: this.defaultz.button.type.create;
let size =
typeof this.options.button !== "undefined" &&
this.options.button.size !== null
? `${this.options.button.size} `
: "";
return `${size}${type}`;
},
getTextButton() {
if (
typeof this.options.button.text !== "undefined" &&
(this.options.button.text.edit !== null ||
this.options.button.text.create !== null)
) {
return this.context.edit
? this.options.button.text.edit
: this.options.button.text.create;
}
return this.context.edit
? this.defaultz.button.text.edit
: this.defaultz.button.text.create;
},
getSuccessText() {
return this.context.edit
? "address_edit_success"
: "address_new_success";
},
onlyButton() {
return typeof this.options.onlyButton !== "undefined"
? this.options.onlyButton
: this.defaultz.onlyButton;
},
forceRedirect() {
return !(
this.context.backUrl === null ||
typeof this.context.backUrl === "undefined"
);
},
// showMessageWhenNoAddress() {
// let showMessageWhenNoAddress = this.options.showMessageWhenNoAddress === undefined ? this.defaultz.showMessageWhenNoAddress : this.options.showMessageWhenNoAddress;
// if (showMessageWhenNoAddress === true || showMessageWhenNoAddress === false) {
// return !this.context.edit && !this.address.id && showMessageWhenNoAddress;
// }
// return !this.context.edit && !this.address.id && this.options.stickyActions;
// }
getClassButton() {
let type = this.context.edit
? this.defaultz.button.type.edit
: this.defaultz.button.type.create;
let size =
typeof this.options.button !== "undefined" &&
this.options.button.size !== null
? `${this.options.button.size} `
: "";
return `${size}${type}`;
},
getTextButton() {
if (
typeof this.options.button.text !== "undefined" &&
(this.options.button.text.edit !== null ||
this.options.button.text.create !== null)
) {
return this.context.edit
? this.options.button.text.edit
: this.options.button.text.create;
}
return this.context.edit
? this.defaultz.button.text.edit
: this.defaultz.button.text.create;
},
getSuccessText() {
return this.context.edit ? "address_edit_success" : "address_new_success";
},
onlyButton() {
return typeof this.options.onlyButton !== "undefined"
? this.options.onlyButton
: this.defaultz.onlyButton;
},
forceRedirect() {
return !(
this.context.backUrl === null ||
typeof this.context.backUrl === "undefined"
);
},
// showMessageWhenNoAddress() {
// let showMessageWhenNoAddress = this.options.showMessageWhenNoAddress === undefined ? this.defaultz.showMessageWhenNoAddress : this.options.showMessageWhenNoAddress;
// if (showMessageWhenNoAddress === true || showMessageWhenNoAddress === false) {
// return !this.context.edit && !this.address.id && showMessageWhenNoAddress;
// }
// return !this.context.edit && !this.address.id && this.options.stickyActions;
// }
},
};
</script>
<style lang="scss">
.address-container {
display: flex;
justify-content: flex-end;
border-radius: 5px;
display: flex;
justify-content: flex-end;
border-radius: 5px;
}
.no-address-yet {
text-align: center;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
padding: 1.5rem;
text-align: center;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
padding: 1.5rem;
margin-bottom: 2rem;
i {
font-size: 2rem;
margin-bottom: 2rem;
i {
font-size: 2rem;
margin-bottom: 2rem;
}
.add-address-btn {
display: block;
}
}
.add-address-btn {
display: block;
}
}
</style>

155
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/SuggestPane.vue
View File

@@ -1,67 +1,64 @@
<template>
<div v-if="insideModal === false" class="loading">
<i
v-if="flag.loading"
class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"
/>
<span class="sr-only">{{ $t("loading") }}</span>
</div>
<div v-if="insideModal === false" class="loading">
<i v-if="flag.loading" class="fa fa-circle-o-notch fa-spin fa-2x fa-fw" />
<span class="sr-only">{{ $t("loading") }}</span>
</div>
<div v-if="errorMsg && errorMsg.length > 0" class="alert alert-danger">
{{ errorMsg }}
</div>
<div v-if="errorMsg && errorMsg.length > 0" class="alert alert-danger">
{{ errorMsg }}
</div>
<h4 class="h3">
{{ $t("address_suggestions") }}
</h4>
<h4 class="h3">
{{ $t("address_suggestions") }}
</h4>
<div class="flex-table AddressSuggestionList">
<div
v-for="(a, i) in context.suggestions"
class="item-bloc"
:key="`suggestions-${i}`"
>
<div class="float-button bottom">
<div class="box">
<div class="action">
<!-- QUESTION normal que ça vienne avant l'adresse ? pourquoi pas après avoir affiché le address-render-box ? -->
<ul class="record_actions">
<li>
<button
class="btn btn-sm btn-choose"
@click="this.pickAddress(a)"
>
{{ $t("use_this_address") }}
</button>
</li>
</ul>
</div>
<ul class="list-content fa-ul">
<li>
<i class="fa fa-li fa-map-marker" />
<address-render-box :address="a" />
</li>
</ul>
</div>
</div>
</div>
</div>
<action-buttons
v-if="insideModal === false"
:options="this.options"
:defaultz="this.defaultz"
<div class="flex-table AddressSuggestionList">
<div
v-for="(a, i) in context.suggestions"
class="item-bloc"
:key="`suggestions-${i}`"
>
<template #before>
<slot name="before" />
</template>
<template #action>
<slot name="action" />
</template>
<template #after>
<slot name="after" />
</template>
</action-buttons>
<div class="float-button bottom">
<div class="box">
<div class="action">
<!-- QUESTION normal que ça vienne avant l'adresse ? pourquoi pas après avoir affiché le address-render-box ? -->
<ul class="record_actions">
<li>
<button
class="btn btn-sm btn-choose"
@click="this.pickAddress(a)"
>
{{ $t("use_this_address") }}
</button>
</li>
</ul>
</div>
<ul class="list-content fa-ul">
<li>
<i class="fa fa-li fa-map-marker" />
<address-render-box :address="a" />
</li>
</ul>
</div>
</div>
</div>
</div>
<action-buttons
v-if="insideModal === false"
:options="this.options"
:defaultz="this.defaultz"
>
<template #before>
<slot name="before" />
</template>
<template #action>
<slot name="action" />
</template>
<template #after>
<slot name="after" />
</template>
</action-buttons>
</template>
<script>
@@ -69,26 +66,26 @@ import AddressRenderBox from "ChillMainAssets/vuejs/_components/Entity/AddressRe
import ActionButtons from "./ActionButtons.vue";
export default {
name: "SuggestPane",
components: {
AddressRenderBox,
ActionButtons,
},
props: [
"context",
"options",
"defaultz",
"flag",
"entity",
"errorMsg",
"insideModal",
],
computed: {},
methods: {
pickAddress(address) {
console.log("pickAddress in suggest pane", address);
this.$emit("pickAddress", address);
},
name: "SuggestPane",
components: {
AddressRenderBox,
ActionButtons,
},
props: [
"context",
"options",
"defaultz",
"flag",
"entity",
"errorMsg",
"insideModal",
],
computed: {},
methods: {
pickAddress(address) {
console.log("pickAddress in suggest pane", address);
this.$emit("pickAddress", address);
},
},
};
</script>

157
src/Bundle/ChillMainBundle/Resources/public/vuejs/DownloadExport/App.vue
View File

@@ -1,10 +1,10 @@
<script setup lang="ts">
import {
trans,
EXPORT_GENERATION_EXPORT_GENERATION_IS_PENDING,
EXPORT_GENERATION_TOO_MANY_RETRIES,
EXPORT_GENERATION_ERROR_WHILE_GENERATING_EXPORT,
EXPORT_GENERATION_EXPORT_READY,
trans,
EXPORT_GENERATION_EXPORT_GENERATION_IS_PENDING,
EXPORT_GENERATION_TOO_MANY_RETRIES,
EXPORT_GENERATION_ERROR_WHILE_GENERATING_EXPORT,
EXPORT_GENERATION_EXPORT_READY,
} from "translator";
import { computed, onMounted, ref } from "vue";
import { StoredObject, StoredObjectStatus } from "ChillDocStoreAssets/types";
@@ -13,9 +13,9 @@ import DocumentActionButtonsGroup from "ChillDocStoreAssets/vuejs/DocumentAction
import { ExportGeneration } from "ChillMainAssets/types";
interface AppProps {
exportGenerationId: string;
title: string;
createdDate: string;
exportGenerationId: string;
title: string;
createdDate: string;
}
const props = defineProps<AppProps>();
@@ -23,19 +23,19 @@ const props = defineProps<AppProps>();
const exportGeneration = ref<ExportGeneration | null>(null);
const status = computed<StoredObjectStatus>(
() => exportGeneration.value?.status ?? "pending",
() => exportGeneration.value?.status ?? "pending",
);
const storedObject = computed<null | StoredObject>(() => {
if (exportGeneration.value === null) {
return null;
}
if (exportGeneration.value === null) {
return null;
}
return exportGeneration.value?.storedObject;
return exportGeneration.value?.storedObject;
});
const isPending = computed<boolean>(() => status.value === "pending");
const isFetching = computed<boolean>(
() => tryiesForReady.value < maxTryiesForReady,
() => tryiesForReady.value < maxTryiesForReady,
);
const isReady = computed<boolean>(() => status.value === "ready");
const isFailure = computed<boolean>(() => status.value === "failure");
@@ -52,90 +52,87 @@ let tryiesForReady = ref<number>(0);
const maxTryiesForReady = 120;
const checkForReady = function (): void {
if (
"ready" === status.value ||
"empty" === status.value ||
"failure" === status.value ||
// stop reloading if the page stays opened for a long time
tryiesForReady.value > maxTryiesForReady
) {
return;
}
if (
"ready" === status.value ||
"empty" === status.value ||
"failure" === status.value ||
// stop reloading if the page stays opened for a long time
tryiesForReady.value > maxTryiesForReady
) {
return;
}
tryiesForReady.value = tryiesForReady.value + 1;
setTimeout(onObjectNewStatusCallback, 5000);
tryiesForReady.value = tryiesForReady.value + 1;
setTimeout(onObjectNewStatusCallback, 5000);
};
const onObjectNewStatusCallback = async function (): Promise<void> {
exportGeneration.value = await fetchExportGenerationStatus(
props.exportGenerationId,
);
if (isPending.value) {
checkForReady();
return Promise.resolve();
}
exportGeneration.value = await fetchExportGenerationStatus(
props.exportGenerationId,
);
if (isPending.value) {
checkForReady();
return Promise.resolve();
}
return Promise.resolve();
};
onMounted(() => {
onObjectNewStatusCallback();
onObjectNewStatusCallback();
});
</script>
<template>
<div id="waiting-screen">
<div
v-if="isPending && isFetching"
class="alert alert-danger text-center"
>
<div>
<p>
{{ trans(EXPORT_GENERATION_EXPORT_GENERATION_IS_PENDING) }}
</p>
</div>
<div id="waiting-screen">
<div v-if="isPending && isFetching" class="alert alert-danger text-center">
<div>
<p>
{{ trans(EXPORT_GENERATION_EXPORT_GENERATION_IS_PENDING) }}
</p>
</div>
<div>
<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
</div>
</div>
<div v-if="isPending && !isFetching" class="alert alert-info">
<div>
<p>
{{ trans(EXPORT_GENERATION_TOO_MANY_RETRIES) }}
</p>
</div>
</div>
<div v-if="isFailure" class="alert alert-danger text-center">
<div>
<p>
{{ trans(EXPORT_GENERATION_ERROR_WHILE_GENERATING_EXPORT) }}
</p>
</div>
</div>
<div v-if="isReady" class="alert alert-success text-center">
<div>
<p>
{{ trans(EXPORT_GENERATION_EXPORT_READY) }}
</p>
<p v-if="storedObject !== null">
<document-action-buttons-group
:stored-object="storedObject"
:filename="filename"
></document-action-buttons-group>
</p>
</div>
</div>
<div>
<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
</div>
</div>
<div v-if="isPending && !isFetching" class="alert alert-info">
<div>
<p>
{{ trans(EXPORT_GENERATION_TOO_MANY_RETRIES) }}
</p>
</div>
</div>
<div v-if="isFailure" class="alert alert-danger text-center">
<div>
<p>
{{ trans(EXPORT_GENERATION_ERROR_WHILE_GENERATING_EXPORT) }}
</p>
</div>
</div>
<div v-if="isReady" class="alert alert-success text-center">
<div>
<p>
{{ trans(EXPORT_GENERATION_EXPORT_READY) }}
</p>
<p v-if="storedObject !== null">
<document-action-buttons-group
:stored-object="storedObject"
:filename="filename"
></document-action-buttons-group>
</p>
</div>
</div>
</div>
</template>
<style scoped lang="scss">
#waiting-screen {
> .alert {
min-height: 350px;
}
> .alert {
min-height: 350px;
}
}
</style>

4
src/Bundle/ChillMainBundle/Resources/public/vuejs/DownloadExport/index.ts
View File

@@ -4,8 +4,8 @@ import App from "./App.vue";
const el = document.getElementById("app");
if (null === el) {
console.error("div element app was not found");
throw new Error("div element app was not found");
console.error("div element app was not found");
throw new Error("div element app was not found");
}
const exportGenerationId = el?.dataset.exportGenerationId as string;

252
src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/App.vue
View File

@@ -1,36 +1,36 @@
<template>
<h2>{{ $t("main_title") }}</h2>
<h2>{{ $t("main_title") }}</h2>
<ul class="nav nav-tabs">
<li class="nav-item">
<a
class="nav-link"
:class="{ active: activeTab === 'MyCustoms' }"
@click="selectTab('MyCustoms')"
>
<i class="fa fa-dashboard" />
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
:class="{ active: activeTab === 'MyNotifications' }"
@click="selectTab('MyNotifications')"
>
{{ $t("my_notifications.tab") }}
<tab-counter :count="state.notifications.count" />
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
:class="{ active: activeTab === 'MyAccompanyingCourses' }"
@click="selectTab('MyAccompanyingCourses')"
>
{{ $t("my_accompanying_courses.tab") }}
</a>
</li>
<!-- <li class="nav-item">
<ul class="nav nav-tabs">
<li class="nav-item">
<a
class="nav-link"
:class="{ active: activeTab === 'MyCustoms' }"
@click="selectTab('MyCustoms')"
>
<i class="fa fa-dashboard" />
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
:class="{ active: activeTab === 'MyNotifications' }"
@click="selectTab('MyNotifications')"
>
{{ $t("my_notifications.tab") }}
<tab-counter :count="state.notifications.count" />
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
:class="{ active: activeTab === 'MyAccompanyingCourses' }"
@click="selectTab('MyAccompanyingCourses')"
>
{{ $t("my_accompanying_courses.tab") }}
</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link"
:class="{'active': activeTab === 'MyWorks'}"
@click="selectTab('MyWorks')">
@@ -38,59 +38,57 @@
<tab-counter :count="state.works.count"></tab-counter>
</a>
</li> -->
<li class="nav-item">
<a
class="nav-link"
:class="{ active: activeTab === 'MyEvaluations' }"
@click="selectTab('MyEvaluations')"
>
{{ $t("my_evaluations.tab") }}
<tab-counter :count="state.evaluations.count" />
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
:class="{ active: activeTab === 'MyTasks' }"
@click="selectTab('MyTasks')"
>
{{ $t("my_tasks.tab") }}
<tab-counter
:count="state.tasks.warning.count + state.tasks.alert.count"
/>
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
:class="{ active: activeTab === 'MyWorkflows' }"
@click="selectTab('MyWorkflows')"
>
{{ $t("my_workflows.tab") }}
<tab-counter
:count="state.workflows.count + state.workflowsCc.count"
/>
</a>
</li>
<li class="nav-item loading ms-auto py-2" v-if="loading">
<i
class="fa fa-circle-o-notch fa-spin fa-lg text-chill-gray"
:title="$t('loading')"
/>
</li>
</ul>
<div class="my-4">
<my-customs v-if="activeTab === 'MyCustoms'" />
<my-works v-else-if="activeTab === 'MyWorks'" />
<my-evaluations v-else-if="activeTab === 'MyEvaluations'" />
<my-tasks v-else-if="activeTab === 'MyTasks'" />
<my-accompanying-courses
v-else-if="activeTab === 'MyAccompanyingCourses'"
<li class="nav-item">
<a
class="nav-link"
:class="{ active: activeTab === 'MyEvaluations' }"
@click="selectTab('MyEvaluations')"
>
{{ $t("my_evaluations.tab") }}
<tab-counter :count="state.evaluations.count" />
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
:class="{ active: activeTab === 'MyTasks' }"
@click="selectTab('MyTasks')"
>
{{ $t("my_tasks.tab") }}
<tab-counter
:count="state.tasks.warning.count + state.tasks.alert.count"
/>
<my-notifications v-else-if="activeTab === 'MyNotifications'" />
<my-workflows v-else-if="activeTab === 'MyWorkflows'" />
</div>
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
:class="{ active: activeTab === 'MyWorkflows' }"
@click="selectTab('MyWorkflows')"
>
{{ $t("my_workflows.tab") }}
<tab-counter :count="state.workflows.count + state.workflowsCc.count" />
</a>
</li>
<li class="nav-item loading ms-auto py-2" v-if="loading">
<i
class="fa fa-circle-o-notch fa-spin fa-lg text-chill-gray"
:title="$t('loading')"
/>
</li>
</ul>
<div class="my-4">
<my-customs v-if="activeTab === 'MyCustoms'" />
<my-works v-else-if="activeTab === 'MyWorks'" />
<my-evaluations v-else-if="activeTab === 'MyEvaluations'" />
<my-tasks v-else-if="activeTab === 'MyTasks'" />
<my-accompanying-courses
v-else-if="activeTab === 'MyAccompanyingCourses'"
/>
<my-notifications v-else-if="activeTab === 'MyNotifications'" />
<my-workflows v-else-if="activeTab === 'MyWorkflows'" />
</div>
</template>
<script>
@@ -105,55 +103,55 @@ import TabCounter from "./TabCounter";
import { mapState } from "vuex";
export default {
name: "App",
components: {
MyCustoms,
MyWorks,
MyEvaluations,
MyTasks,
MyWorkflows,
MyAccompanyingCourses,
MyNotifications,
TabCounter,
},
data() {
return {
activeTab: "MyCustoms",
};
},
computed: {
...mapState(["loading"]),
// just to see all in devtool :
...mapState({
state: (state) => state,
}),
},
methods: {
selectTab(tab) {
if (tab !== "MyCustoms") {
this.$store.dispatch("getByTab", { tab: tab });
}
this.activeTab = tab;
console.log(this.activeTab);
},
},
mounted() {
for (const m of [
"MyNotifications",
"MyAccompanyingCourses",
// 'MyWorks',
"MyEvaluations",
"MyTasks",
"MyWorkflows",
]) {
this.$store.dispatch("getByTab", { tab: m, param: "countOnly=1" });
}
name: "App",
components: {
MyCustoms,
MyWorks,
MyEvaluations,
MyTasks,
MyWorkflows,
MyAccompanyingCourses,
MyNotifications,
TabCounter,
},
data() {
return {
activeTab: "MyCustoms",
};
},
computed: {
...mapState(["loading"]),
// just to see all in devtool :
...mapState({
state: (state) => state,
}),
},
methods: {
selectTab(tab) {
if (tab !== "MyCustoms") {
this.$store.dispatch("getByTab", { tab: tab });
}
this.activeTab = tab;
console.log(this.activeTab);
},
},
mounted() {
for (const m of [
"MyNotifications",
"MyAccompanyingCourses",
// 'MyWorks',
"MyEvaluations",
"MyTasks",
"MyWorkflows",
]) {
this.$store.dispatch("getByTab", { tab: m, param: "countOnly=1" });
}
},
};
</script>
<style scoped>
a.nav-link {
cursor: pointer;
cursor: pointer;
}
</style>

42
src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/DashboardWidgets/News.vue
View File

@@ -1,13 +1,13 @@
<template>
<div>
<h1>{{ $t("widget.news.title") }}</h1>
<ul v-if="newsItems.length > 0" class="scrollable">
<NewsItem v-for="item in newsItems" :item="item" :key="item.id" />
</ul>
<p v-if="newsItems.length === 0" class="chill-no-data-statement">
{{ $t("widget.news.none") }}
</p>
</div>
<div>
<h1>{{ $t("widget.news.title") }}</h1>
<ul v-if="newsItems.length > 0" class="scrollable">
<NewsItem v-for="item in newsItems" :item="item" :key="item.id" />
</ul>
<p v-if="newsItems.length === 0" class="chill-no-data-statement">
{{ $t("widget.news.none") }}
</p>
</div>
</template>
<script setup lang="ts">
@@ -19,26 +19,26 @@ import NewsItem from "./NewsItem.vue";
const newsItems = ref<NewsItemType[]>([]);
onMounted(() => {
fetchResults<NewsItemType>("/api/1.0/main/news/current.json")
.then((news): Promise<void> => {
// console.log('news articles', response.results)
newsItems.value = news;
fetchResults<NewsItemType>("/api/1.0/main/news/current.json")
.then((news): Promise<void> => {
// console.log('news articles', response.results)
newsItems.value = news;
return Promise.resolve();
})
.catch((error: string) => {
console.error("Error fetching news items", error);
});
return Promise.resolve();
})
.catch((error: string) => {
console.error("Error fetching news items", error);
});
});
</script>
<style scoped>
ul {
list-style: none;
padding: 0;
list-style: none;
padding: 0;
}
h1 {
text-align: center;
text-align: center;
}
</style>

250
src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/DashboardWidgets/NewsItem.vue
View File

@@ -1,40 +1,38 @@
<template>
<li>
<h2>{{ props.item.title }}</h2>
<time class="createdBy" datetime="{{item.startDate.datetime}}">{{
$d(newsItemStartDate(), "text")
}}</time>
<div class="content" v-if="shouldTruncate(item.content)">
<div v-html="prepareContent(item.content)"></div>
<div class="float-end">
<button
class="btn btn-sm btn-show read-more"
@click="() => openModal(item)"
>
{{ $t("widget.news.readMore") }}
</button>
</div>
</div>
<div class="content" v-else>
<div v-html="convertMarkdownToHtml(item.content)"></div>
</div>
<li>
<h2>{{ props.item.title }}</h2>
<time class="createdBy" datetime="{{item.startDate.datetime}}">{{
$d(newsItemStartDate(), "text")
}}</time>
<div class="content" v-if="shouldTruncate(item.content)">
<div v-html="prepareContent(item.content)"></div>
<div class="float-end">
<button
class="btn btn-sm btn-show read-more"
@click="() => openModal(item)"
>
{{ $t("widget.news.readMore") }}
</button>
</div>
</div>
<div class="content" v-else>
<div v-html="convertMarkdownToHtml(item.content)"></div>
</div>
<modal v-if="showModal" @close="closeModal">
<template #header>
<p class="news-title">{{ item.title }}</p>
</template>
<template #body>
<p class="news-date">
<time
class="createdBy"
datetime="{{item.startDate.datetime}}"
>{{ $d(newsItemStartDate(), "text") }}</time
>
</p>
<div v-html="convertMarkdownToHtml(item.content)"></div>
</template>
</modal>
</li>
<modal v-if="showModal" @close="closeModal">
<template #header>
<p class="news-title">{{ item.title }}</p>
</template>
<template #body>
<p class="news-date">
<time class="createdBy" datetime="{{item.startDate.datetime}}">{{
$d(newsItemStartDate(), "text")
}}</time>
</p>
<div v-html="convertMarkdownToHtml(item.content)"></div>
</template>
</modal>
</li>
</template>
<script setup lang="ts">
@@ -47,151 +45,147 @@ import { ref } from "vue";
import { ISOToDatetime } from "../../../chill/js/date";
const props = defineProps({
item: {
type: Object as PropType<NewsItemType>,
required: true,
},
maxLength: {
type: Number,
required: false,
default: 350,
},
maxLines: {
type: Number,
required: false,
default: 3,
},
item: {
type: Object as PropType<NewsItemType>,
required: true,
},
maxLength: {
type: Number,
required: false,
default: 350,
},
maxLines: {
type: Number,
required: false,
default: 3,
},
});
const selectedArticle = ref<NewsItemType | null>(null);
const showModal = ref(false);
const openModal = (item: NewsItemType) => {
selectedArticle.value = item;
showModal.value = true;
selectedArticle.value = item;
showModal.value = true;
};
const closeModal = () => {
selectedArticle.value = null;
showModal.value = false;
selectedArticle.value = null;
showModal.value = false;
};
const shouldTruncate = (content: string): boolean => {
const lines = content.split("\n");
const lines = content.split("\n");
// Check if any line exceeds the maximum length
const tooManyLines = lines.length > props.maxLines;
// Check if any line exceeds the maximum length
const tooManyLines = lines.length > props.maxLines;
return content.length > props.maxLength || tooManyLines;
return content.length > props.maxLength || tooManyLines;
};
const truncateContent = (content: string): string => {
let truncatedContent = content.slice(0, props.maxLength);
let linkDepth = 0;
let linkStartIndex = -1;
const lines = content.split("\n");
let truncatedContent = content.slice(0, props.maxLength);
let linkDepth = 0;
let linkStartIndex = -1;
const lines = content.split("\n");
// Truncate if amount of lines are too many
if (lines.length > props.maxLines && content.length < props.maxLength) {
const truncatedContent = lines
.slice(0, props.maxLines)
.join("\n")
.trim();
return truncatedContent + "...";
// Truncate if amount of lines are too many
if (lines.length > props.maxLines && content.length < props.maxLength) {
const truncatedContent = lines.slice(0, props.maxLines).join("\n").trim();
return truncatedContent + "...";
}
for (let i = 0; i < truncatedContent.length; i++) {
const char = truncatedContent[i];
if (char === "[") {
linkDepth++;
if (linkDepth === 1) {
linkStartIndex = i;
}
} else if (char === "]") {
linkDepth = Math.max(0, linkDepth - 1);
} else if (char === "(" && linkDepth === 0) {
truncatedContent = truncatedContent.slice(0, i);
break;
}
}
for (let i = 0; i < truncatedContent.length; i++) {
const char = truncatedContent[i];
while (linkDepth > 0) {
truncatedContent += "]";
linkDepth--;
}
if (char === "[") {
linkDepth++;
if (linkDepth === 1) {
linkStartIndex = i;
}
} else if (char === "]") {
linkDepth = Math.max(0, linkDepth - 1);
} else if (char === "(" && linkDepth === 0) {
truncatedContent = truncatedContent.slice(0, i);
break;
}
}
// If a link was found, append the URL inside the parentheses
if (linkStartIndex !== -1) {
const linkEndIndex = content.indexOf(")", linkStartIndex);
const url = content.slice(linkStartIndex + 1, linkEndIndex);
truncatedContent = truncatedContent.slice(0, linkStartIndex) + `(${url})`;
}
while (linkDepth > 0) {
truncatedContent += "]";
linkDepth--;
}
truncatedContent += "...";
// If a link was found, append the URL inside the parentheses
if (linkStartIndex !== -1) {
const linkEndIndex = content.indexOf(")", linkStartIndex);
const url = content.slice(linkStartIndex + 1, linkEndIndex);
truncatedContent =
truncatedContent.slice(0, linkStartIndex) + `(${url})`;
}
truncatedContent += "...";
return truncatedContent;
return truncatedContent;
};
const preprocess = (markdown: string): string => {
return markdown;
return markdown;
};
const postprocess = (html: string): string => {
DOMPurify.addHook("afterSanitizeAttributes", (node: any) => {
if ("target" in node) {
node.setAttribute("target", "_blank");
node.setAttribute("rel", "noopener noreferrer");
}
if (
!node.hasAttribute("target") &&
(node.hasAttribute("xlink:href") || node.hasAttribute("href"))
) {
node.setAttribute("xlink:show", "new");
}
});
DOMPurify.addHook("afterSanitizeAttributes", (node: any) => {
if ("target" in node) {
node.setAttribute("target", "_blank");
node.setAttribute("rel", "noopener noreferrer");
}
if (
!node.hasAttribute("target") &&
(node.hasAttribute("xlink:href") || node.hasAttribute("href"))
) {
node.setAttribute("xlink:show", "new");
}
});
return DOMPurify.sanitize(html);
return DOMPurify.sanitize(html);
};
const convertMarkdownToHtml = (markdown: string): string => {
marked.use({ hooks: { postprocess, preprocess }, async: false });
const rawHtml = marked(markdown) as string;
return rawHtml;
marked.use({ hooks: { postprocess, preprocess }, async: false });
const rawHtml = marked(markdown) as string;
return rawHtml;
};
const prepareContent = (content: string): string => {
const htmlContent = convertMarkdownToHtml(content);
return truncateContent(htmlContent);
const htmlContent = convertMarkdownToHtml(content);
return truncateContent(htmlContent);
};
const newsItemStartDate = (): null | Date => {
return ISOToDatetime(props.item?.startDate.datetime);
return ISOToDatetime(props.item?.startDate.datetime);
};
</script>
<style scoped>
li {
margin-bottom: 20px;
overflow: hidden;
padding: 0.8rem;
background-color: #fbfbfb;
border-radius: 4px;
margin-bottom: 20px;
overflow: hidden;
padding: 0.8rem;
background-color: #fbfbfb;
border-radius: 4px;
}
h2 {
font-size: 1rem !important;
text-transform: uppercase;
font-size: 1rem !important;
text-transform: uppercase;
}
.content {
overflow: hidden;
font-size: 0.9rem;
position: relative;
overflow: hidden;
font-size: 0.9rem;
position: relative;
}
.news-title {
font-weight: bold;
font-weight: bold;
}
</style>

175
src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyAccompanyingCourses.vue
View File

@@ -1,76 +1,65 @@
<template>
<div class="alert alert-light">
{{ $t("my_accompanying_courses.description") }}
</div>
<span v-if="noResults" class="chill-no-data-statement">{{
$t("no_data")
}}</span>
<tab-table v-else>
<template #thead>
<th scope="col">
{{ $t("opening_date") }}
</th>
<th scope="col">
{{ $t("social_issues") }}
</th>
<th scope="col">
{{ $t("concerned_persons") }}
</th>
<th scope="col" />
<th scope="col" />
</template>
<template #tbody>
<tr
v-for="(c, i) in accompanyingCourses.results"
:key="`course-${i}`"
>
<td>{{ $d(c.openingDate.datetime, "short") }}</td>
<td>
<span
v-for="(i, index) in c.socialIssues"
:key="index"
class="chill-entity entity-social-issue"
>
<span class="badge bg-chill-l-gray text-dark">
{{ localizeString(i.title) }}
</span>
</span>
</td>
<td>
<span
v-for="p in c.participations"
class="me-1"
:key="p.person.id"
>
<on-the-fly
:type="p.person.type"
:id="p.person.id"
:button-text="p.person.textAge"
:display-badge="'true' === 'true'"
action="show"
/>
</span>
</td>
<td>
<span
v-if="c.emergency"
class="badge rounded-pill bg-danger me-1"
>{{ $t("emergency") }}</span
>
<span
v-if="c.confidential"
class="badge rounded-pill bg-danger"
>{{ $t("confidential") }}</span
>
</td>
<td>
<a class="btn btn-sm btn-show" :href="getUrl(c)">
{{ $t("show_entity", { entity: $t("the_course") }) }}
</a>
</td>
</tr>
</template>
</tab-table>
<div class="alert alert-light">
{{ $t("my_accompanying_courses.description") }}
</div>
<span v-if="noResults" class="chill-no-data-statement">{{
$t("no_data")
}}</span>
<tab-table v-else>
<template #thead>
<th scope="col">
{{ $t("opening_date") }}
</th>
<th scope="col">
{{ $t("social_issues") }}
</th>
<th scope="col">
{{ $t("concerned_persons") }}
</th>
<th scope="col" />
<th scope="col" />
</template>
<template #tbody>
<tr v-for="(c, i) in accompanyingCourses.results" :key="`course-${i}`">
<td>{{ $d(c.openingDate.datetime, "short") }}</td>
<td>
<span
v-for="(i, index) in c.socialIssues"
:key="index"
class="chill-entity entity-social-issue"
>
<span class="badge bg-chill-l-gray text-dark">
{{ localizeString(i.title) }}
</span>
</span>
</td>
<td>
<span v-for="p in c.participations" class="me-1" :key="p.person.id">
<on-the-fly
:type="p.person.type"
:id="p.person.id"
:button-text="p.person.textAge"
:display-badge="'true' === 'true'"
action="show"
/>
</span>
</td>
<td>
<span v-if="c.emergency" class="badge rounded-pill bg-danger me-1">{{
$t("emergency")
}}</span>
<span v-if="c.confidential" class="badge rounded-pill bg-danger">{{
$t("confidential")
}}</span>
</td>
<td>
<a class="btn btn-sm btn-show" :href="getUrl(c)">
{{ $t("show_entity", { entity: $t("the_course") }) }}
</a>
</td>
</tr>
</template>
</tab-table>
</template>
<script>
@@ -80,33 +69,33 @@ import OnTheFly from "ChillMainAssets/vuejs/OnTheFly/components/OnTheFly";
import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
export default {
name: "MyAccompanyingCourses",
components: {
TabTable,
OnTheFly,
name: "MyAccompanyingCourses",
components: {
TabTable,
OnTheFly,
},
computed: {
...mapState(["accompanyingCourses"]),
...mapGetters(["isAccompanyingCoursesLoaded"]),
noResults() {
if (!this.isAccompanyingCoursesLoaded) {
return false;
} else {
return this.accompanyingCourses.count === 0;
}
},
computed: {
...mapState(["accompanyingCourses"]),
...mapGetters(["isAccompanyingCoursesLoaded"]),
noResults() {
if (!this.isAccompanyingCoursesLoaded) {
return false;
} else {
return this.accompanyingCourses.count === 0;
}
},
},
methods: {
localizeString,
getUrl(c) {
return `/fr/parcours/${c.id}`;
},
},
methods: {
localizeString,
getUrl(c) {
return `/fr/parcours/${c.id}`;
},
},
};
</script>
<style scoped>
span.badge.rounded-pill.bg-danger {
text-transform: uppercase;
text-transform: uppercase;
}
</style>

268
src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyCustoms.vue
View File

@@ -1,105 +1,103 @@
<template>
<span v-if="noResults" class="chill-no-data-statement">{{
$t("no_dashboard")
}}</span>
<div v-else id="dashboards" class="container g-3">
<div class="row">
<div class="mbloc col-xs-12 col-sm-4">
<div class="custom1">
<ul class="list-unstyled">
<li v-if="counter.notifications > 0">
<i18n-t
keypath="counter.unread_notifications"
tag="span"
:class="counterClass"
:plural="counter.notifications"
>
<template #n>
<span>{{ counter.notifications }}</span>
</template>
</i18n-t>
</li>
<li v-if="counter.accompanyingCourses > 0">
<i18n-t
keypath="counter.assignated_courses"
tag="span"
:class="counterClass"
:plural="counter.accompanyingCourses"
>
<template #n>
<span>{{
counter.accompanyingCourses
}}</span>
</template>
</i18n-t>
</li>
<li v-if="counter.works > 0">
<i18n-t
keypath="counter.assignated_actions"
tag="span"
:class="counterClass"
:plural="counter.works"
>
<template #n>
<span>{{ counter.works }}</span>
</template>
</i18n-t>
</li>
<li v-if="counter.evaluations > 0">
<i18n-t
keypath="counter.assignated_evaluations"
tag="span"
:class="counterClass"
:plural="counter.evaluations"
>
<template #n>
<span>{{ counter.evaluations }}</span>
</template>
</i18n-t>
</li>
<li v-if="counter.tasksAlert > 0">
<i18n-t
keypath="counter.alert_tasks"
tag="span"
:class="counterClass"
:plural="counter.tasksAlert"
>
<template #n>
<span>{{ counter.tasksAlert }}</span>
</template>
</i18n-t>
</li>
<li v-if="counter.tasksWarning > 0">
<i18n-t
keypath="counter.warning_tasks"
tag="span"
:class="counterClass"
:plural="counter.tasksWarning"
>
<template #n>
<span>{{ counter.tasksWarning }}</span>
</template>
</i18n-t>
</li>
</ul>
</div>
</div>
<template v-if="this.hasDashboardItems">
<template
v-for="(dashboardItem, index) in this.dashboardItems"
:key="index"
>
<div
class="mbloc col-xs-12 col-sm-8 news"
v-if="dashboardItem.type === 'news'"
>
<News />
</div>
<span v-if="noResults" class="chill-no-data-statement">{{
$t("no_dashboard")
}}</span>
<div v-else id="dashboards" class="container g-3">
<div class="row">
<div class="mbloc col-xs-12 col-sm-4">
<div class="custom1">
<ul class="list-unstyled">
<li v-if="counter.notifications > 0">
<i18n-t
keypath="counter.unread_notifications"
tag="span"
:class="counterClass"
:plural="counter.notifications"
>
<template #n>
<span>{{ counter.notifications }}</span>
</template>
</template>
</i18n-t>
</li>
<li v-if="counter.accompanyingCourses > 0">
<i18n-t
keypath="counter.assignated_courses"
tag="span"
:class="counterClass"
:plural="counter.accompanyingCourses"
>
<template #n>
<span>{{ counter.accompanyingCourses }}</span>
</template>
</i18n-t>
</li>
<li v-if="counter.works > 0">
<i18n-t
keypath="counter.assignated_actions"
tag="span"
:class="counterClass"
:plural="counter.works"
>
<template #n>
<span>{{ counter.works }}</span>
</template>
</i18n-t>
</li>
<li v-if="counter.evaluations > 0">
<i18n-t
keypath="counter.assignated_evaluations"
tag="span"
:class="counterClass"
:plural="counter.evaluations"
>
<template #n>
<span>{{ counter.evaluations }}</span>
</template>
</i18n-t>
</li>
<li v-if="counter.tasksAlert > 0">
<i18n-t
keypath="counter.alert_tasks"
tag="span"
:class="counterClass"
:plural="counter.tasksAlert"
>
<template #n>
<span>{{ counter.tasksAlert }}</span>
</template>
</i18n-t>
</li>
<li v-if="counter.tasksWarning > 0">
<i18n-t
keypath="counter.warning_tasks"
tag="span"
:class="counterClass"
:plural="counter.tasksWarning"
>
<template #n>
<span>{{ counter.tasksWarning }}</span>
</template>
</i18n-t>
</li>
</ul>
</div>
</div>
<template v-if="this.hasDashboardItems">
<template
v-for="(dashboardItem, index) in this.dashboardItems"
:key="index"
>
<div
class="mbloc col-xs-12 col-sm-8 news"
v-if="dashboardItem.type === 'news'"
>
<News />
</div>
</template>
</template>
</div>
</div>
</template>
<script>
@@ -108,37 +106,37 @@ import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
import News from "./DashboardWidgets/News.vue";
export default {
name: "MyCustoms",
components: {
News,
name: "MyCustoms",
components: {
News,
},
data() {
return {
counterClass: {
counter: true, //hack to pass class 'counter' in i18n-t
},
dashboardItems: [],
masonry: null,
};
},
computed: {
...mapGetters(["counter"]),
noResults() {
return false;
},
data() {
return {
counterClass: {
counter: true, //hack to pass class 'counter' in i18n-t
},
dashboardItems: [],
masonry: null,
};
},
computed: {
...mapGetters(["counter"]),
noResults() {
return false;
},
hasDashboardItems() {
return this.dashboardItems.length > 0;
},
},
mounted() {
makeFetch("GET", "/api/1.0/main/dashboard-config-item.json")
.then((response) => {
this.dashboardItems = response;
})
.catch((error) => {
throw error;
});
hasDashboardItems() {
return this.dashboardItems.length > 0;
},
},
mounted() {
makeFetch("GET", "/api/1.0/main/dashboard-config-item.json")
.then((response) => {
this.dashboardItems = response;
})
.catch((error) => {
throw error;
});
},
};
</script>
@@ -146,18 +144,18 @@ export default {
div.custom4,
div.custom3,
div.custom2 {
font-style: italic;
color: var(--bs-chill-gray);
font-style: italic;
color: var(--bs-chill-gray);
}
span.counter {
& > span {
background-color: unset;
}
& > span {
background-color: unset;
}
}
div.news {
max-height: 22rem;
overflow: hidden;
overflow-y: scroll;
max-height: 22rem;
overflow: hidden;
overflow-y: scroll;
}
</style>

227
src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyEvaluations.vue
View File

@@ -1,96 +1,81 @@
<template>
<div class="accompanying-course-work">
<div class="alert alert-light">
{{ $t("my_evaluations.description") }}
</div>
<span v-if="noResults" class="chill-no-data-statement">{{
$t("no_data")
}}</span>
<tab-table v-else>
<template #thead>
<th scope="col">
{{ $t("max_date") }}
</th>
<th scope="col">
{{ $t("evaluation") }}
</th>
<th scope="col">
{{ $t("SocialAction") }}
</th>
<th scope="col" />
</template>
<template #tbody>
<tr
v-for="(e, i) in evaluations.results"
:key="`evaluation-${i}`"
>
<td>{{ $d(e.maxDate.datetime, "short") }}</td>
<td>
{{ localizeString(e.evaluation.title) }}
</td>
<td>
<span class="chill-entity entity-social-issue">
<span class="badge bg-chill-l-gray text-dark">
{{
e.accompanyingPeriodWork.socialAction.issue
.text
}}
</span>
</span>
<h4 class="badge-title">
<span class="title_label" />
<span class="title_action">
{{ e.accompanyingPeriodWork.socialAction.text }}
</span>
</h4>
<span
v-for="person in e.accompanyingPeriodWork.persons"
class="me-1"
:key="person.id"
>
<on-the-fly
:type="person.type"
:id="person.id"
:button-text="person.textAge"
:display-badge="'true' === 'true'"
action="show"
/>
</span>
</td>
<td>
<div
class="btn-group-vertical"
role="group"
aria-label="Actions"
>
<a class="btn btn-sm btn-show" :href="getUrl(e)">
{{
$t("show_entity", {
entity: $t("the_evaluation"),
})
}}
</a>
<a
class="btn btn-sm btn-show"
:href="
getUrl(
e.accompanyingPeriodWork
.accompanyingPeriod,
)
"
>
{{
$t("show_entity", {
entity: $t("the_course"),
})
}}
</a>
</div>
</td>
</tr>
</template>
</tab-table>
<div class="accompanying-course-work">
<div class="alert alert-light">
{{ $t("my_evaluations.description") }}
</div>
<span v-if="noResults" class="chill-no-data-statement">{{
$t("no_data")
}}</span>
<tab-table v-else>
<template #thead>
<th scope="col">
{{ $t("max_date") }}
</th>
<th scope="col">
{{ $t("evaluation") }}
</th>
<th scope="col">
{{ $t("SocialAction") }}
</th>
<th scope="col" />
</template>
<template #tbody>
<tr v-for="(e, i) in evaluations.results" :key="`evaluation-${i}`">
<td>{{ $d(e.maxDate.datetime, "short") }}</td>
<td>
{{ localizeString(e.evaluation.title) }}
</td>
<td>
<span class="chill-entity entity-social-issue">
<span class="badge bg-chill-l-gray text-dark">
{{ e.accompanyingPeriodWork.socialAction.issue.text }}
</span>
</span>
<h4 class="badge-title">
<span class="title_label" />
<span class="title_action">
{{ e.accompanyingPeriodWork.socialAction.text }}
</span>
</h4>
<span
v-for="person in e.accompanyingPeriodWork.persons"
class="me-1"
:key="person.id"
>
<on-the-fly
:type="person.type"
:id="person.id"
:button-text="person.textAge"
:display-badge="'true' === 'true'"
action="show"
/>
</span>
</td>
<td>
<div class="btn-group-vertical" role="group" aria-label="Actions">
<a class="btn btn-sm btn-show" :href="getUrl(e)">
{{
$t("show_entity", {
entity: $t("the_evaluation"),
})
}}
</a>
<a
class="btn btn-sm btn-show"
:href="getUrl(e.accompanyingPeriodWork.accompanyingPeriod)"
>
{{
$t("show_entity", {
entity: $t("the_course"),
})
}}
</a>
</div>
</td>
</tr>
</template>
</tab-table>
</div>
</template>
<script>
@@ -100,38 +85,38 @@ import OnTheFly from "ChillMainAssets/vuejs/OnTheFly/components/OnTheFly";
import { localizeString } from "../../lib/localizationHelper/localizationHelper";
export default {
name: "MyEvaluations",
components: {
TabTable,
OnTheFly,
name: "MyEvaluations",
components: {
TabTable,
OnTheFly,
},
computed: {
...mapState(["evaluations"]),
...mapGetters(["isEvaluationsLoaded"]),
noResults() {
if (!this.isEvaluationsLoaded) {
return false;
} else {
return this.evaluations.count === 0;
}
},
computed: {
...mapState(["evaluations"]),
...mapGetters(["isEvaluationsLoaded"]),
noResults() {
if (!this.isEvaluationsLoaded) {
return false;
} else {
return this.evaluations.count === 0;
}
},
},
methods: {
localizeString,
getUrl(e) {
switch (e.type) {
case "accompanying_period_work_evaluation":
let anchor = "#evaluations";
return `/fr/person/accompanying-period/work/${e.accompanyingPeriodWork.id}/edit${anchor}`;
case "accompanying_period_work":
return `/fr/person/accompanying-period/work/${e.id}/edit`;
case "accompanying_period":
return `/fr/parcours/${e.id}`;
default:
throw "entity type unknown";
}
},
},
methods: {
localizeString,
getUrl(e) {
switch (e.type) {
case "accompanying_period_work_evaluation":
let anchor = "#evaluations";
return `/fr/person/accompanying-period/work/${e.accompanyingPeriodWork.id}/edit${anchor}`;
case "accompanying_period_work":
return `/fr/person/accompanying-period/work/${e.id}/edit`;
case "accompanying_period":
return `/fr/parcours/${e.id}`;
default:
throw "entity type unknown";
}
},
},
};
</script>

196
src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyNotifications.vue
View File

@@ -1,46 +1,46 @@
<template>
<div class="alert alert-light">
{{ $t("my_notifications.description") }}
</div>
<span v-if="noResults" class="chill-no-data-statement">{{
$t("no_data")
}}</span>
<tab-table v-else>
<template #thead>
<th scope="col">
{{ $t("Date") }}
</th>
<th scope="col">
{{ $t("Subject") }}
</th>
<th scope="col">
{{ $t("From") }}
</th>
<th scope="col" />
</template>
<template #tbody>
<tr v-for="(n, i) in notifications.results" :key="`notify-${i}`">
<td>{{ $d(n.date.datetime, "long") }}</td>
<td>
<span class="unread">
<i class="fa fa-envelope-o" />
<a :href="getNotificationUrl(n)">{{ n.title }}</a>
</span>
</td>
<td v-if="n.sender != null">
{{ n.sender.text }}
</td>
<td v-else>
{{ $t("automatic_notification") }}
</td>
<td>
<a class="btn btn-sm btn-show" :href="getEntityUrl(n)">
{{ $t("show_entity", { entity: getEntityName(n) }) }}
</a>
</td>
</tr>
</template>
</tab-table>
<div class="alert alert-light">
{{ $t("my_notifications.description") }}
</div>
<span v-if="noResults" class="chill-no-data-statement">{{
$t("no_data")
}}</span>
<tab-table v-else>
<template #thead>
<th scope="col">
{{ $t("Date") }}
</th>
<th scope="col">
{{ $t("Subject") }}
</th>
<th scope="col">
{{ $t("From") }}
</th>
<th scope="col" />
</template>
<template #tbody>
<tr v-for="(n, i) in notifications.results" :key="`notify-${i}`">
<td>{{ $d(n.date.datetime, "long") }}</td>
<td>
<span class="unread">
<i class="fa fa-envelope-o" />
<a :href="getNotificationUrl(n)">{{ n.title }}</a>
</span>
</td>
<td v-if="n.sender != null">
{{ n.sender.text }}
</td>
<td v-else>
{{ $t("automatic_notification") }}
</td>
<td>
<a class="btn btn-sm btn-show" :href="getEntityUrl(n)">
{{ $t("show_entity", { entity: getEntityName(n) }) }}
</a>
</td>
</tr>
</template>
</tab-table>
</template>
<script>
@@ -49,69 +49,69 @@ import TabTable from "./TabTable";
import { appMessages } from "ChillMainAssets/vuejs/HomepageWidget/js/i18n";
export default {
name: "MyNotifications",
components: {
TabTable,
name: "MyNotifications",
components: {
TabTable,
},
computed: {
...mapState(["notifications"]),
...mapGetters(["isNotificationsLoaded"]),
noResults() {
if (!this.isNotificationsLoaded) {
return false;
} else {
return this.notifications.count === 0;
}
},
computed: {
...mapState(["notifications"]),
...mapGetters(["isNotificationsLoaded"]),
noResults() {
if (!this.isNotificationsLoaded) {
return false;
} else {
return this.notifications.count === 0;
}
},
},
methods: {
getNotificationUrl(n) {
return `/fr/notification/${n.id}/show`;
},
methods: {
getNotificationUrl(n) {
return `/fr/notification/${n.id}/show`;
},
getEntityName(n) {
switch (n.relatedEntityClass) {
case "Chill\\ActivityBundle\\Entity\\Activity":
return appMessages.fr.the_activity;
case "Chill\\PersonBundle\\Entity\\AccompanyingPeriod":
return appMessages.fr.the_course;
case "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWork":
return appMessages.fr.the_action;
case "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluationDocument":
return appMessages.fr.the_evaluation_document;
case "Chill\\MainBundle\\Entity\\Workflow\\EntityWorkflow":
return appMessages.fr.the_workflow;
default:
throw "notification type unknown";
}
},
getEntityUrl(n) {
switch (n.relatedEntityClass) {
case "Chill\\ActivityBundle\\Entity\\Activity":
return `/fr/activity/${n.relatedEntityId}/show`;
case "Chill\\PersonBundle\\Entity\\AccompanyingPeriod":
return `/fr/parcours/${n.relatedEntityId}`;
case "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWork":
return `/fr/person/accompanying-period/work/${n.relatedEntityId}/show`;
case "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluationDocument":
return `/fr/person/accompanying-period/work/evaluation/document/${n.relatedEntityId}/show`;
case "Chill\\MainBundle\\Entity\\Workflow\\EntityWorkflow":
return `/fr/main/workflow/${n.relatedEntityId}/show`;
default:
throw "notification type unknown";
}
},
getEntityName(n) {
switch (n.relatedEntityClass) {
case "Chill\\ActivityBundle\\Entity\\Activity":
return appMessages.fr.the_activity;
case "Chill\\PersonBundle\\Entity\\AccompanyingPeriod":
return appMessages.fr.the_course;
case "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWork":
return appMessages.fr.the_action;
case "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluationDocument":
return appMessages.fr.the_evaluation_document;
case "Chill\\MainBundle\\Entity\\Workflow\\EntityWorkflow":
return appMessages.fr.the_workflow;
default:
throw "notification type unknown";
}
},
getEntityUrl(n) {
switch (n.relatedEntityClass) {
case "Chill\\ActivityBundle\\Entity\\Activity":
return `/fr/activity/${n.relatedEntityId}/show`;
case "Chill\\PersonBundle\\Entity\\AccompanyingPeriod":
return `/fr/parcours/${n.relatedEntityId}`;
case "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWork":
return `/fr/person/accompanying-period/work/${n.relatedEntityId}/show`;
case "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluationDocument":
return `/fr/person/accompanying-period/work/evaluation/document/${n.relatedEntityId}/show`;
case "Chill\\MainBundle\\Entity\\Workflow\\EntityWorkflow":
return `/fr/main/workflow/${n.relatedEntityId}/show`;
default:
throw "notification type unknown";
}
},
},
};
</script>
<style lang="scss" scoped>
span.unread {
font-weight: bold;
i {
margin-right: 0.5em;
}
a {
text-decoration: unset;
}
font-weight: bold;
i {
margin-right: 0.5em;
}
a {
text-decoration: unset;
}
}
</style>

203
src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyTasks.vue
View File

@@ -1,83 +1,78 @@
<template>
<div class="alert alert-light">
{{ $t("my_tasks.description_warning") }}
</div>
<span v-if="noResultsAlert" class="chill-no-data-statement">{{
$t("no_data")
}}</span>
<tab-table v-else>
<template #thead>
<th scope="col">
{{ $t("warning_date") }}
</th>
<th scope="col">
{{ $t("max_date") }}
</th>
<th scope="col">
{{ $t("task") }}
</th>
<th scope="col" />
</template>
<template #tbody>
<tr v-for="(t, i) in tasks.alert.results" :key="`task-alert-${i}`">
<td v-if="null !== t.warningDate">
{{ $d(t.warningDate.datetime, "short") }}
</td>
<td v-else />
<td>
<span class="outdated">{{
$d(t.endDate.datetime, "short")
}}</span>
</td>
<td>{{ t.title }}</td>
<td>
<a class="btn btn-sm btn-show" :href="getUrl(t)">
{{ $t("show_entity", { entity: $t("the_task") }) }}
</a>
</td>
</tr>
</template>
</tab-table>
<div class="alert alert-light">
{{ $t("my_tasks.description_warning") }}
</div>
<span v-if="noResultsAlert" class="chill-no-data-statement">{{
$t("no_data")
}}</span>
<tab-table v-else>
<template #thead>
<th scope="col">
{{ $t("warning_date") }}
</th>
<th scope="col">
{{ $t("max_date") }}
</th>
<th scope="col">
{{ $t("task") }}
</th>
<th scope="col" />
</template>
<template #tbody>
<tr v-for="(t, i) in tasks.alert.results" :key="`task-alert-${i}`">
<td v-if="null !== t.warningDate">
{{ $d(t.warningDate.datetime, "short") }}
</td>
<td v-else />
<td>
<span class="outdated">{{ $d(t.endDate.datetime, "short") }}</span>
</td>
<td>{{ t.title }}</td>
<td>
<a class="btn btn-sm btn-show" :href="getUrl(t)">
{{ $t("show_entity", { entity: $t("the_task") }) }}
</a>
</td>
</tr>
</template>
</tab-table>
<div class="alert alert-light">
{{ $t("my_tasks.description_alert") }}
</div>
<span v-if="noResultsWarning" class="chill-no-data-statement">{{
$t("no_data")
}}</span>
<tab-table v-else>
<template #thead>
<th scope="col">
{{ $t("warning_date") }}
</th>
<th scope="col">
{{ $t("max_date") }}
</th>
<th scope="col">
{{ $t("task") }}
</th>
<th scope="col" />
</template>
<template #tbody>
<tr
v-for="(t, i) in tasks.warning.results"
:key="`task-warning-${i}`"
>
<td>
<span class="outdated">{{
$d(t.warningDate.datetime, "short")
}}</span>
</td>
<td>{{ $d(t.endDate.datetime, "short") }}</td>
<td>{{ t.title }}</td>
<td>
<a class="btn btn-sm btn-show" :href="getUrl(t)">
{{ $t("show_entity", { entity: $t("the_task") }) }}
</a>
</td>
</tr>
</template>
</tab-table>
<div class="alert alert-light">
{{ $t("my_tasks.description_alert") }}
</div>
<span v-if="noResultsWarning" class="chill-no-data-statement">{{
$t("no_data")
}}</span>
<tab-table v-else>
<template #thead>
<th scope="col">
{{ $t("warning_date") }}
</th>
<th scope="col">
{{ $t("max_date") }}
</th>
<th scope="col">
{{ $t("task") }}
</th>
<th scope="col" />
</template>
<template #tbody>
<tr v-for="(t, i) in tasks.warning.results" :key="`task-warning-${i}`">
<td>
<span class="outdated">{{
$d(t.warningDate.datetime, "short")
}}</span>
</td>
<td>{{ $d(t.endDate.datetime, "short") }}</td>
<td>{{ t.title }}</td>
<td>
<a class="btn btn-sm btn-show" :href="getUrl(t)">
{{ $t("show_entity", { entity: $t("the_task") }) }}
</a>
</td>
</tr>
</template>
</tab-table>
</template>
<script>
@@ -85,39 +80,39 @@ import { mapState, mapGetters } from "vuex";
import TabTable from "./TabTable";
export default {
name: "MyTasks",
components: {
TabTable,
name: "MyTasks",
components: {
TabTable,
},
computed: {
...mapState(["tasks"]),
...mapGetters(["isTasksWarningLoaded", "isTasksAlertLoaded"]),
noResultsAlert() {
if (!this.isTasksAlertLoaded) {
return false;
} else {
return this.tasks.alert.count === 0;
}
},
computed: {
...mapState(["tasks"]),
...mapGetters(["isTasksWarningLoaded", "isTasksAlertLoaded"]),
noResultsAlert() {
if (!this.isTasksAlertLoaded) {
return false;
} else {
return this.tasks.alert.count === 0;
}
},
noResultsWarning() {
if (!this.isTasksWarningLoaded) {
return false;
} else {
return this.tasks.warning.count === 0;
}
},
noResultsWarning() {
if (!this.isTasksWarningLoaded) {
return false;
} else {
return this.tasks.warning.count === 0;
}
},
methods: {
getUrl(t) {
return `/fr/task/single-task/${t.id}/show`;
},
},
methods: {
getUrl(t) {
return `/fr/task/single-task/${t.id}/show`;
},
},
};
</script>
<style scoped>
span.outdated {
font-weight: bold;
color: var(--bs-warning);
font-weight: bold;
color: var(--bs-warning);
}
</style>

30
src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorkflows.vue
View File

@@ -1,13 +1,13 @@
<template>
<div class="alert alert-light">
{{ $t("my_workflows.description") }}
</div>
<my-workflows-table :workflows="workflows" />
<div class="alert alert-light">
{{ $t("my_workflows.description") }}
</div>
<my-workflows-table :workflows="workflows" />
<div class="alert alert-light">
{{ $t("my_workflows.description_cc") }}
</div>
<my-workflows-table :workflows="workflowsCc" />
<div class="alert alert-light">
{{ $t("my_workflows.description_cc") }}
</div>
<my-workflows-table :workflows="workflowsCc" />
</template>
<script>
@@ -15,12 +15,12 @@ import { mapState } from "vuex";
import MyWorkflowsTable from "./MyWorkflowsTable.vue";
export default {
name: "MyWorkflows",
components: {
MyWorkflowsTable,
},
computed: {
...mapState(["workflows", "workflowsCc"]),
},
name: "MyWorkflows",
components: {
MyWorkflowsTable,
},
computed: {
...mapState(["workflows", "workflowsCc"]),
},
};
</script>

156
src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorkflowsTable.vue
View File

@@ -1,59 +1,57 @@
<template>
<span v-if="hasNoResults(workflows)" class="chill-no-data-statement">{{
$t("no_data")
}}</span>
<tab-table v-else>
<template #thead>
<th scope="col">
{{ $t("Object_workflow") }}
</th>
<th scope="col">
{{ $t("Step") }}
</th>
<th scope="col">
{{ $t("concerned_users") }}
</th>
<th scope="col" />
</template>
<template #tbody>
<tr v-for="(w, i) in workflows.results" :key="`workflow-${i}`">
<td>
{{ w.title }}
</td>
<td>
<div class="workflow">
<div class="breadcrumb">
<i
class="fa fa-circle me-1 text-chill-yellow mx-2"
/>
<span class="mx-2">{{ getStep(w) }}</span>
</div>
<span
v-if="w.isOnHoldAtCurrentStep"
class="badge bg-success rounded-pill"
>{{ $t("on_hold") }}</span
>
</div>
</td>
<td v-if="w.datas.persons !== null">
<span v-for="p in w.datas.persons" class="me-1" :key="p.id">
<on-the-fly
:type="p.type"
:id="p.id"
:button-text="p.textAge"
:display-badge="'true' === 'true'"
action="show"
/>
</span>
</td>
<td>
<a class="btn btn-sm btn-show" :href="getUrl(w)">
{{ $t("show_entity", { entity: $t("the_workflow") }) }}
</a>
</td>
</tr>
</template>
</tab-table>
<span v-if="hasNoResults(workflows)" class="chill-no-data-statement">{{
$t("no_data")
}}</span>
<tab-table v-else>
<template #thead>
<th scope="col">
{{ $t("Object_workflow") }}
</th>
<th scope="col">
{{ $t("Step") }}
</th>
<th scope="col">
{{ $t("concerned_users") }}
</th>
<th scope="col" />
</template>
<template #tbody>
<tr v-for="(w, i) in workflows.results" :key="`workflow-${i}`">
<td>
{{ w.title }}
</td>
<td>
<div class="workflow">
<div class="breadcrumb">
<i class="fa fa-circle me-1 text-chill-yellow mx-2" />
<span class="mx-2">{{ getStep(w) }}</span>
</div>
<span
v-if="w.isOnHoldAtCurrentStep"
class="badge bg-success rounded-pill"
>{{ $t("on_hold") }}</span
>
</div>
</td>
<td v-if="w.datas.persons !== null">
<span v-for="p in w.datas.persons" class="me-1" :key="p.id">
<on-the-fly
:type="p.type"
:id="p.id"
:button-text="p.textAge"
:display-badge="'true' === 'true'"
action="show"
/>
</span>
</td>
<td>
<a class="btn btn-sm btn-show" :href="getUrl(w)">
{{ $t("show_entity", { entity: $t("the_workflow") }) }}
</a>
</td>
</tr>
</template>
</tab-table>
</template>
<script>
@@ -62,37 +60,37 @@ import TabTable from "./TabTable";
import OnTheFly from "ChillMainAssets/vuejs/OnTheFly/components/OnTheFly";
export default {
name: "MyWorkflows",
components: {
TabTable,
OnTheFly,
name: "MyWorkflows",
components: {
TabTable,
OnTheFly,
},
props: ["workflows"],
computed: {
...mapGetters(["isWorkflowsLoaded"]),
},
methods: {
hasNoResults(workflows) {
if (!this.isWorkflowsLoaded) {
return false;
} else {
return workflows.count === 0;
}
},
props: ["workflows"],
computed: {
...mapGetters(["isWorkflowsLoaded"]),
getUrl(w) {
return `/fr/main/workflow/${w.id}/show`;
},
methods: {
hasNoResults(workflows) {
if (!this.isWorkflowsLoaded) {
return false;
} else {
return workflows.count === 0;
}
},
getUrl(w) {
return `/fr/main/workflow/${w.id}/show`;
},
getStep(w) {
const lastStep = w.steps.length - 1;
return w.steps[lastStep].currentStep.text;
},
getStep(w) {
const lastStep = w.steps.length - 1;
return w.steps[lastStep].currentStep.text;
},
},
};
</script>
<style scoped>
span.outdated {
font-weight: bold;
color: var(--bs-warning);
font-weight: bold;
color: var(--bs-warning);
}
</style>

202
src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorks.vue
View File

@@ -1,85 +1,77 @@
// CURRENTLY NOT IN USE
<template>
<div class="accompanying-course-work">
<div class="alert alert-light">
{{ $t("my_works.description") }}
</div>
<span v-if="noResults" class="chill-no-data-statement">{{
$t("no_data")
}}</span>
<tab-table v-else>
<template #thead>
<th scope="col">
{{ $t("StartDate") }}
</th>
<th scope="col">
{{ $t("SocialAction") }}
</th>
<th scope="col">
{{ $t("concerned_persons") }}
</th>
<th scope="col" />
</template>
<template #tbody>
<tr v-for="(w, i) in works.results" :key="`works-${i}`">
<td>{{ $d(w.startDate.datetime, "short") }}</td>
<td>
<span class="chill-entity entity-social-issue">
<span class="badge bg-chill-l-gray text-dark">
{{ w.socialAction.issue.text }}
</span>
</span>
<h4 class="badge-title">
<span class="title_label" />
<span class="title_action">
{{ w.socialAction.text }}
</span>
</h4>
</td>
<td>
<span
v-for="person in w.persons"
class="me-1"
:key="person.id"
>
<on-the-fly
:type="person.type"
:id="person.id"
:button-text="person.textAge"
:display-badge="'true' === 'true'"
action="show"
/>
</span>
</td>
<td>
<div
class="btn-group-vertical"
role="group"
aria-label="Actions"
>
<a class="btn btn-sm btn-update" :href="getUrl(w)">
{{
$t("show_entity", {
entity: $t("the_action"),
})
}}
</a>
<a
class="btn btn-sm btn-show"
:href="getUrl(w.accompanyingPeriod)"
>
{{
$t("show_entity", {
entity: $t("the_course"),
})
}}
</a>
</div>
</td>
</tr>
</template>
</tab-table>
<div class="accompanying-course-work">
<div class="alert alert-light">
{{ $t("my_works.description") }}
</div>
<span v-if="noResults" class="chill-no-data-statement">{{
$t("no_data")
}}</span>
<tab-table v-else>
<template #thead>
<th scope="col">
{{ $t("StartDate") }}
</th>
<th scope="col">
{{ $t("SocialAction") }}
</th>
<th scope="col">
{{ $t("concerned_persons") }}
</th>
<th scope="col" />
</template>
<template #tbody>
<tr v-for="(w, i) in works.results" :key="`works-${i}`">
<td>{{ $d(w.startDate.datetime, "short") }}</td>
<td>
<span class="chill-entity entity-social-issue">
<span class="badge bg-chill-l-gray text-dark">
{{ w.socialAction.issue.text }}
</span>
</span>
<h4 class="badge-title">
<span class="title_label" />
<span class="title_action">
{{ w.socialAction.text }}
</span>
</h4>
</td>
<td>
<span v-for="person in w.persons" class="me-1" :key="person.id">
<on-the-fly
:type="person.type"
:id="person.id"
:button-text="person.textAge"
:display-badge="'true' === 'true'"
action="show"
/>
</span>
</td>
<td>
<div class="btn-group-vertical" role="group" aria-label="Actions">
<a class="btn btn-sm btn-update" :href="getUrl(w)">
{{
$t("show_entity", {
entity: $t("the_action"),
})
}}
</a>
<a
class="btn btn-sm btn-show"
:href="getUrl(w.accompanyingPeriod)"
>
{{
$t("show_entity", {
entity: $t("the_course"),
})
}}
</a>
</div>
</td>
</tr>
</template>
</tab-table>
</div>
</template>
<script>
@@ -88,34 +80,34 @@ import TabTable from "./TabTable";
import OnTheFly from "ChillMainAssets/vuejs/OnTheFly/components/OnTheFly";
export default {
name: "MyWorks",
components: {
TabTable,
OnTheFly,
name: "MyWorks",
components: {
TabTable,
OnTheFly,
},
computed: {
...mapState(["works"]),
...mapGetters(["isWorksLoaded"]),
noResults() {
if (!this.isWorksLoaded) {
return false;
} else {
return this.works.count === 0;
}
},
computed: {
...mapState(["works"]),
...mapGetters(["isWorksLoaded"]),
noResults() {
if (!this.isWorksLoaded) {
return false;
} else {
return this.works.count === 0;
}
},
},
methods: {
getUrl(e) {
switch (e.type) {
case "accompanying_period_work":
return `/fr/person/accompanying-period/work/${e.id}/edit`;
case "accompanying_period":
return `/fr/parcours/${e.id}`;
default:
throw "entity type unknown";
}
},
},
methods: {
getUrl(e) {
switch (e.type) {
case "accompanying_period_work":
return `/fr/person/accompanying-period/work/${e.id}/edit`;
case "accompanying_period":
return `/fr/parcours/${e.id}`;
default:
throw "entity type unknown";
}
},
},
};
</script>

18
src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/TabCounter.vue
View File

@@ -1,17 +1,17 @@
<template>
<span v-if="isCounterAvailable" class="badge rounded-pill bg-danger">
{{ count }}
</span>
<span v-if="isCounterAvailable" class="badge rounded-pill bg-danger">
{{ count }}
</span>
</template>
<script>
export default {
name: "TabCounter",
props: ["count"],
computed: {
isCounterAvailable() {
return typeof this.count !== "undefined" && this.count > 0;
},
name: "TabCounter",
props: ["count"],
computed: {
isCounterAvailable() {
return typeof this.count !== "undefined" && this.count > 0;
},
},
};
</script>

24
src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/TabTable.vue
View File

@@ -1,20 +1,20 @@
<template>
<table class="table table-striped table-hover">
<thead>
<tr>
<slot name="thead" />
</tr>
</thead>
<tbody>
<slot name="tbody" />
</tbody>
</table>
<table class="table table-striped table-hover">
<thead>
<tr>
<slot name="thead" />
</tr>
</thead>
<tbody>
<slot name="tbody" />
</tbody>
</table>
</template>
<script>
export default {
name: "TabTable",
props: [],
name: "TabTable",
props: [],
};
</script>

60
src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/App.vue
View File

@@ -1,42 +1,42 @@
<template>
<on-the-fly
:type="context.type"
:id="context.id"
:action="context.action"
:button-text="options.buttonText"
:display-badge="options.displayBadge === 'true'"
:is-dead="options.isDead"
:parent="options.parent"
@save-form-on-the-fly="saveFormOnTheFly"
/>
<on-the-fly
:type="context.type"
:id="context.id"
:action="context.action"
:button-text="options.buttonText"
:display-badge="options.displayBadge === 'true'"
:is-dead="options.isDead"
:parent="options.parent"
@save-form-on-the-fly="saveFormOnTheFly"
/>
</template>
<script>
import OnTheFly from "./components/OnTheFly.vue";
export default {
name: "App",
components: {
OnTheFly,
name: "App",
components: {
OnTheFly,
},
props: ["onTheFly"],
computed: {
context() {
return this.onTheFly.context;
},
props: ["onTheFly"],
computed: {
context() {
return this.onTheFly.context;
},
options() {
return this.onTheFly.options;
},
options() {
return this.onTheFly.options;
},
mounted() {
//console.log('OnTheFly mounted');
//console.log('OnTheFly: data context', this.context);
//console.log('OnTheFly: data options', this.options);
},
methods: {
saveFormOnTheFly(payload) {
console.log("saveFormOnTheFly", payload);
},
},
mounted() {
//console.log('OnTheFly mounted');
//console.log('OnTheFly: data context', this.context);
//console.log('OnTheFly: data options', this.options);
},
methods: {
saveFormOnTheFly(payload) {
console.log("saveFormOnTheFly", payload);
},
},
};
</script>

153
src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/Create.vue
View File

@@ -1,116 +1,115 @@
<template>
<ul class="nav nav-tabs">
<li v-if="allowedTypes.includes('person')" class="nav-item">
<a class="nav-link" :class="{ active: isActive('person') }">
<label for="person">
<input
type="radio"
name="person"
id="person"
v-model="radioType"
value="person"
/>
{{ trans(ONTHEFLY_CREATE_PERSON) }}
</label>
</a>
</li>
<li v-if="allowedTypes.includes('thirdparty')" class="nav-item">
<a class="nav-link" :class="{ active: isActive('thirdparty') }">
<label for="thirdparty">
<input
type="radio"
name="thirdparty"
id="thirdparty"
v-model="radioType"
value="thirdparty"
/>
{{ trans(ONTHEFLY_CREATE_THIRDPARTY) }}
</label>
</a>
</li>
</ul>
<ul class="nav nav-tabs">
<li v-if="allowedTypes.includes('person')" class="nav-item">
<a class="nav-link" :class="{ active: isActive('person') }">
<label for="person">
<input
type="radio"
name="person"
id="person"
v-model="radioType"
value="person"
/>
{{ trans(ONTHEFLY_CREATE_PERSON) }}
</label>
</a>
</li>
<li v-if="allowedTypes.includes('thirdparty')" class="nav-item">
<a class="nav-link" :class="{ active: isActive('thirdparty') }">
<label for="thirdparty">
<input
type="radio"
name="thirdparty"
id="thirdparty"
v-model="radioType"
value="thirdparty"
/>
{{ trans(ONTHEFLY_CREATE_THIRDPARTY) }}
</label>
</a>
</li>
</ul>
<div class="my-4">
<on-the-fly-person
v-if="type === 'person'"
:action="action"
:query="query"
ref="castPerson"
/>
<div class="my-4">
<on-the-fly-person
v-if="type === 'person'"
:action="action"
:query="query"
ref="castPerson"
/>
<on-the-fly-thirdparty
v-if="type === 'thirdparty'"
:action="action"
:query="query"
ref="castThirdparty"
/>
</div>
<on-the-fly-thirdparty
v-if="type === 'thirdparty'"
:action="action"
:query="query"
ref="castThirdparty"
/>
</div>
</template>
<script setup>
import { ref, computed, onMounted } from "vue";
import OnTheFlyPerson from "ChillPersonAssets/vuejs/_components/OnTheFly/Person.vue";
import OnTheFlyThirdparty from "ChillThirdPartyAssets/vuejs/_components/OnTheFly/ThirdParty.vue";
import {
trans,
ONTHEFLY_CREATE_PERSON,
ONTHEFLY_CREATE_THIRDPARTY,
trans,
ONTHEFLY_CREATE_PERSON,
ONTHEFLY_CREATE_THIRDPARTY,
} from "translator";
const props = defineProps({
action: String,
allowedTypes: Array,
query: String,
action: String,
allowedTypes: Array,
query: String,
});
const type = ref(null);
const radioType = computed({
get: () => type.value,
set: (val) => {
type.value = val;
console.log("## type:", val, ", action:", props.action);
},
get: () => type.value,
set: (val) => {
type.value = val;
console.log("## type:", val, ", action:", props.action);
},
});
const castPerson = ref(null);
const castThirdparty = ref(null);
onMounted(() => {
type.value =
props.allowedTypes.length === 1 &&
props.allowedTypes.includes("thirdparty")
? "thirdparty"
: "person";
type.value =
props.allowedTypes.length === 1 && props.allowedTypes.includes("thirdparty")
? "thirdparty"
: "person";
});
function isActive(tab) {
return type.value === tab;
return type.value === tab;
}
function castDataByType() {
switch (radioType.value) {
case "person":
return castPerson.value.$data.person;
case "thirdparty":
let data = castThirdparty.value.$data.thirdparty;
if (data.address !== undefined && data.address !== null) {
data.address = { id: data.address.address_id };
} else {
data.address = null;
}
return data;
default:
throw Error("Invalid type of entity");
}
switch (radioType.value) {
case "person":
return castPerson.value.$data.person;
case "thirdparty":
let data = castThirdparty.value.$data.thirdparty;
if (data.address !== undefined && data.address !== null) {
data.address = { id: data.address.address_id };
} else {
data.address = null;
}
return data;
default:
throw Error("Invalid type of entity");
}
}
defineExpose({
castDataByType,
castDataByType,
});
</script>
<style lang="css" scoped>
label {
cursor: pointer;
cursor: pointer;
}
</style>

174
src/Bundle/ChillMainBundle/Resources/public/vuejs/PickPostalCode/PickPostalCode.vue
View File

@@ -1,27 +1,27 @@
<template>
<div class="PickPostalCode">
<vue-multiselect
id="citySelector"
@search-change="listenInputSearch"
ref="citySelector"
v-model="internalPicked"
@select="selectCity"
@remove="remove"
name=""
track-by="id"
label="value"
:custom-label="transName"
:placeholder="$t('select_city')"
:select-label="$t('multiselect.select_label')"
:deselect-label="$t('multiselect.deselect_label')"
:selected-label="$t('multiselect.selected_label')"
:taggable="true"
:multiple="false"
:internal-search="false"
:loading="isLoading"
:options="cities"
/>
</div>
<div class="PickPostalCode">
<vue-multiselect
id="citySelector"
@search-change="listenInputSearch"
ref="citySelector"
v-model="internalPicked"
@select="selectCity"
@remove="remove"
name=""
track-by="id"
label="value"
:custom-label="transName"
:placeholder="$t('select_city')"
:select-label="$t('multiselect.select_label')"
:deselect-label="$t('multiselect.deselect_label')"
:selected-label="$t('multiselect.selected_label')"
:taggable="true"
:multiple="false"
:internal-search="false"
:loading="isLoading"
:options="cities"
/>
</div>
</template>
<script lang="js">
@@ -29,81 +29,77 @@ import VueMultiselect from "vue-multiselect";
import { searchCities } from "./api";
export default {
components: {
VueMultiselect,
components: {
VueMultiselect,
},
data() {
return {
cities: [],
internalPicked: null,
isLoading: false,
abortControllers: [],
};
},
emits: ["pickCity", "removeCity"],
props: {
picked: {
type: Object,
required: false,
default: null,
},
data() {
return {
cities: [],
internalPicked: null,
isLoading: false,
abortControllers: [],
};
country: {
type: Object,
required: false,
default: null,
},
emits: ["pickCity", "removeCity"],
props: {
picked: {
type: Object,
required: false,
default: null,
},
country: {
type: Object,
required: false,
default: null,
},
},
mounted() {
if (this.picked !== null) {
this.internalPicked = this.picked;
this.cities.push(this.picked);
}
},
methods: {
transName(value) {
return value.code && value.name ? `${value.name} (${value.code})` : "";
},
mounted() {
if (this.picked !== null) {
this.internalPicked = this.picked;
this.cities.push(this.picked);
}
selectCity(city) {
this.$emit("selectCity", city);
},
methods: {
transName(value) {
return value.code && value.name
? `${value.name} (${value.code})`
: "";
},
selectCity(city) {
this.$emit("selectCity", city);
},
listenInputSearch(query) {
if (query.length <= 2) {
return;
}
listenInputSearch(query) {
if (query.length <= 2) {
return;
}
let c = this.abortControllers.pop();
let c = this.abortControllers.pop();
while (typeof c !== "undefined") {
c.abort();
c = this.abortControllers.pop();
}
while (typeof c !== "undefined") {
c.abort();
c = this.abortControllers.pop();
}
this.isLoading = true;
let controller = new AbortController();
this.abortControllers.push(controller);
this.isLoading = true;
let controller = new AbortController();
this.abortControllers.push(controller);
searchCities(query, this.country, controller)
.then((newCities) => {
this.cities = this.cities.filter(
(city) => city.id === this.picked,
);
newCities.forEach((item) => {
this.cities.push(item);
});
this.isLoading = false;
searchCities(query, this.country, controller)
.then((newCities) => {
this.cities = this.cities.filter((city) => city.id === this.picked);
newCities.forEach((item) => {
this.cities.push(item);
});
this.isLoading = false;
return Promise.resolve();
})
.catch((error) => {
console.log(error); //TODO better error handling
this.isLoading = false;
});
},
remove(item) {
this.$emit("removeCity", item);
},
return Promise.resolve();
})
.catch((error) => {
console.log(error); //TODO better error handling
this.isLoading = false;
});
},
remove(item) {
this.$emit("removeCity", item);
},
},
};
</script>

8
src/Bundle/ChillMainBundle/Resources/public/vuejs/SavedExportButtons/App.vue
View File

@@ -2,17 +2,15 @@
import GenerateButton from "ChillMainAssets/vuejs/SavedExportButtons/Component/GenerateButton.vue";
interface SavedExportButtonsConfig {
savedExportUuid: string;
savedExportAlias: string;
savedExportUuid: string;
savedExportAlias: string;
}
const props = defineProps<SavedExportButtonsConfig>();
</script>
<template>
<generate-button
:saved-export-uuid="props.savedExportUuid"
></generate-button>
<generate-button :saved-export-uuid="props.savedExportUuid"></generate-button>
</template>
<style scoped lang="scss"></style>

208
src/Bundle/ChillMainBundle/Resources/public/vuejs/SavedExportButtons/Component/GenerateButton.vue
View File

@@ -1,15 +1,15 @@
<script setup lang="ts">
import {
trans,
SAVED_EXPORT_EXECUTE,
EXPORT_GENERATION_EXPORT_GENERATION_IS_PENDING_SHORT,
EXPORT_GENERATION_TOO_MANY_RETRIES,
EXPORT_GENERATION_ERROR_WHILE_GENERATING_EXPORT,
EXPORT_GENERATION_EXPORT_READY,
trans,
SAVED_EXPORT_EXECUTE,
EXPORT_GENERATION_EXPORT_GENERATION_IS_PENDING_SHORT,
EXPORT_GENERATION_TOO_MANY_RETRIES,
EXPORT_GENERATION_ERROR_WHILE_GENERATING_EXPORT,
EXPORT_GENERATION_EXPORT_READY,
} from "translator";
import {
fetchExportGenerationStatus,
generateFromSavedExport,
fetchExportGenerationStatus,
generateFromSavedExport,
} from "ChillMainAssets/lib/api/export";
import { computed, ref } from "vue";
import { ExportGeneration } from "ChillMainAssets/types";
@@ -19,50 +19,50 @@ import { useToast } from "vue-toast-notification";
import "vue-toast-notification/dist/theme-sugar.css";
interface SavedExportButtonGenerateConfig {
savedExportUuid: string;
savedExportUuid: string;
}
const props = defineProps<SavedExportButtonGenerateConfig>();
const emits = defineEmits<{
(e: "generate");
(e: "generate");
}>();
const toast = useToast();
const exportGeneration = ref<ExportGeneration | null>(null);
const status = computed<StoredObjectStatus | "inactive">(
() => exportGeneration.value?.status ?? "inactive",
() => exportGeneration.value?.status ?? "inactive",
);
const storedObject = computed<null | StoredObject>(() => {
if (exportGeneration.value === null) {
return null;
}
if (exportGeneration.value === null) {
return null;
}
return exportGeneration.value?.storedObject;
return exportGeneration.value?.storedObject;
});
const isInactive = computed<boolean>(() => status.value === "inactive");
const isPending = computed<boolean>(() => status.value === "pending");
const isFetching = computed<boolean>(
() => tryiesForReady.value < maxTryiesForReady,
() => tryiesForReady.value < maxTryiesForReady,
);
const isReady = computed<boolean>(() => status.value === "ready");
const isFailure = computed<boolean>(() => status.value === "failure");
const filename = computed<string>(() => {
if (null === exportGeneration.value) {
return "";
}
if (null === exportGeneration.value) {
return "";
}
return `${exportGeneration.value?.storedObject.title}-${exportGeneration.value?.createdAt?.datetime8601}`;
return `${exportGeneration.value?.storedObject.title}-${exportGeneration.value?.createdAt?.datetime8601}`;
});
const externalDownloadLink = computed<string>(
() => `/fr/main/export-generation/${exportGeneration.value?.id}/wait`,
() => `/fr/main/export-generation/${exportGeneration.value?.id}/wait`,
);
const classes = computed<Record<string, boolean>>(() => {
return {};
return {};
});
const buttonClasses = computed<Record<string, boolean>>(() => {
return { btn: true, "btn-outline-primary": true };
return { btn: true, "btn-outline-primary": true };
});
/**
@@ -76,111 +76,109 @@ let tryiesForReady = ref<number>(0);
const maxTryiesForReady = 120;
const checkForReady = function (): void {
if (
"ready" === status.value ||
"empty" === status.value ||
"failure" === status.value ||
// stop reloading if the page stays opened for a long time
tryiesForReady.value > maxTryiesForReady
) {
return;
}
if (
"ready" === status.value ||
"empty" === status.value ||
"failure" === status.value ||
// stop reloading if the page stays opened for a long time
tryiesForReady.value > maxTryiesForReady
) {
return;
}
tryiesForReady.value = tryiesForReady.value + 1;
setTimeout(
onObjectNewStatusCallback,
tryiesForReady.value < 10 ? 1500 : 5000,
);
tryiesForReady.value = tryiesForReady.value + 1;
setTimeout(
onObjectNewStatusCallback,
tryiesForReady.value < 10 ? 1500 : 5000,
);
};
const onExportGenerationSuccess = function (): void {
toast.success(trans(EXPORT_GENERATION_EXPORT_READY));
toast.success(trans(EXPORT_GENERATION_EXPORT_READY));
};
const onObjectNewStatusCallback = async function (): Promise<void> {
if (null === exportGeneration.value) {
checkForReady();
return Promise.resolve();
}
const newExportGeneration = await fetchExportGenerationStatus(
exportGeneration.value?.id,
);
if (newExportGeneration.status !== exportGeneration.value.status) {
if (newExportGeneration.status === "ready") {
onExportGenerationSuccess();
}
}
exportGeneration.value = newExportGeneration;
if (isPending.value) {
checkForReady();
return Promise.resolve();
}
if (null === exportGeneration.value) {
checkForReady();
return Promise.resolve();
}
const newExportGeneration = await fetchExportGenerationStatus(
exportGeneration.value?.id,
);
if (newExportGeneration.status !== exportGeneration.value.status) {
if (newExportGeneration.status === "ready") {
onExportGenerationSuccess();
}
}
exportGeneration.value = newExportGeneration;
if (isPending.value) {
checkForReady();
return Promise.resolve();
}
return Promise.resolve();
};
const onClickGenerate = async (): Promise<void> => {
emits("generate");
exportGeneration.value = await generateFromSavedExport(
props.savedExportUuid,
);
emits("generate");
exportGeneration.value = await generateFromSavedExport(props.savedExportUuid);
onObjectNewStatusCallback();
onObjectNewStatusCallback();
return Promise.resolve();
return Promise.resolve();
};
</script>
<template>
<button
v-if="isInactive"
:class="buttonClasses"
type="button"
@click="onClickGenerate"
>
<i class="fa fa-cog"></i> {{ trans(SAVED_EXPORT_EXECUTE) }}
</button>
<template v-if="isPending && isFetching">
<span class="btn">
<i class="fa fa-cog fa-spin fa-fw"></i>
<span class="pending-message">{{
trans(EXPORT_GENERATION_EXPORT_GENERATION_IS_PENDING_SHORT)
}}</span>
<a :href="externalDownloadLink" class="externalDownloadLink">
<i class="bi bi-box-arrow-up-right"></i>
</a>
</span>
</template>
<div v-if="isPending && !isFetching" :class="buttonClasses">
<span>{{ trans(EXPORT_GENERATION_TOO_MANY_RETRIES) }}</span>
</div>
<download-button
v-else-if="isReady && storedObject?.currentVersion !== null"
:classes="buttonClasses"
:stored-object="storedObject"
:at-version="storedObject?.currentVersion"
:filename="filename"
></download-button>
<div v-else-if="isFailure" :class="classes">
<span class="btn">
<i class="bi bi-exclamation-triangle"></i>
<span class="pending-message">{{
trans(EXPORT_GENERATION_ERROR_WHILE_GENERATING_EXPORT)
}}</span>
</span>
</div>
<button
v-if="isInactive"
:class="buttonClasses"
type="button"
@click="onClickGenerate"
>
<i class="fa fa-cog"></i> {{ trans(SAVED_EXPORT_EXECUTE) }}
</button>
<template v-if="isPending && isFetching">
<span class="btn">
<i class="fa fa-cog fa-spin fa-fw"></i>
<span class="pending-message">{{
trans(EXPORT_GENERATION_EXPORT_GENERATION_IS_PENDING_SHORT)
}}</span>
<a :href="externalDownloadLink" class="externalDownloadLink">
<i class="bi bi-box-arrow-up-right"></i>
</a>
</span>
</template>
<div v-if="isPending && !isFetching" :class="buttonClasses">
<span>{{ trans(EXPORT_GENERATION_TOO_MANY_RETRIES) }}</span>
</div>
<download-button
v-else-if="isReady && storedObject?.currentVersion !== null"
:classes="buttonClasses"
:stored-object="storedObject"
:at-version="storedObject?.currentVersion"
:filename="filename"
></download-button>
<div v-else-if="isFailure" :class="classes">
<span class="btn">
<i class="bi bi-exclamation-triangle"></i>
<span class="pending-message">{{
trans(EXPORT_GENERATION_ERROR_WHILE_GENERATING_EXPORT)
}}</span>
</span>
</div>
</template>
<style scoped lang="scss">
.pending-message {
font-style: italic;
font-style: italic;
}
.externalDownloadLink {
margin-left: 1rem;
margin-left: 1rem;
}
</style>

6
src/Bundle/ChillMainBundle/Resources/public/vuejs/SavedExportButtons/index.ts
View File

@@ -3,11 +3,11 @@ import { createApp } from "vue";
import App from "./App.vue";
const buttons = document.querySelectorAll<HTMLDivElement>(
"[data-generate-export-button]",
"[data-generate-export-button]",
);
buttons.forEach((button) => {
const savedExportUuid = button.dataset.savedExportUuid as string;
const savedExportUuid = button.dataset.savedExportUuid as string;
createApp(App, { savedExportUuid, savedExportAlias: "" }).mount(button);
createApp(App, { savedExportUuid, savedExportAlias: "" }).mount(button);
});

72
src/Bundle/ChillMainBundle/Resources/public/vuejs/WorkflowAttachment/App.vue
View File

@@ -7,17 +7,17 @@ import AttachmentList from "ChillMainAssets/vuejs/WorkflowAttachment/Component/A
import { GenericDoc } from "ChillDocStoreAssets/types";
interface AppConfig {
workflowId: number;
accompanyingPeriodId: number;
attachments: WorkflowAttachment[];
workflowId: number;
accompanyingPeriodId: number;
attachments: WorkflowAttachment[];
}
const emit = defineEmits<{
(
e: "pickGenericDoc",
payload: { genericDoc: GenericDocForAccompanyingPeriod },
): void;
(e: "removeAttachment", payload: { attachment: WorkflowAttachment }): void;
(
e: "pickGenericDoc",
payload: { genericDoc: GenericDocForAccompanyingPeriod },
): void;
(e: "removeAttachment", payload: { attachment: WorkflowAttachment }): void;
}>();
type PickGenericModalType = InstanceType<typeof PickGenericDocModal>;
@@ -26,49 +26,49 @@ const pickDocModal = useTemplateRef<PickGenericModalType>("pickDocModal");
const props = defineProps<AppConfig>();
const attachedGenericDoc = computed<GenericDocForAccompanyingPeriod[]>(
() =>
props.attachments
.map((a: WorkflowAttachment) => a.genericDoc)
.filter(
(g: GenericDoc | null) => g !== null,
) as GenericDocForAccompanyingPeriod[],
() =>
props.attachments
.map((a: WorkflowAttachment) => a.genericDoc)
.filter(
(g: GenericDoc | null) => g !== null,
) as GenericDocForAccompanyingPeriod[],
);
const openModal = function () {
pickDocModal.value?.openModal();
pickDocModal.value?.openModal();
};
const onPickGenericDoc = ({
genericDoc,
genericDoc,
}: {
genericDoc: GenericDocForAccompanyingPeriod;
genericDoc: GenericDocForAccompanyingPeriod;
}) => {
emit("pickGenericDoc", { genericDoc });
emit("pickGenericDoc", { genericDoc });
};
const onRemoveAttachment = (payload: { attachment: WorkflowAttachment }) => {
emit("removeAttachment", payload);
emit("removeAttachment", payload);
};
</script>
<template>
<pick-generic-doc-modal
:accompanying-period-id="props.accompanyingPeriodId"
:to-remove="attachedGenericDoc"
ref="pickDocModal"
@pickGenericDoc="onPickGenericDoc"
></pick-generic-doc-modal>
<attachment-list
:attachments="props.attachments"
@removeAttachment="onRemoveAttachment"
></attachment-list>
<ul class="record_actions">
<li>
<button type="button" class="btn btn-create" @click="openModal">
Ajouter une pièce jointe
</button>
</li>
</ul>
<pick-generic-doc-modal
:accompanying-period-id="props.accompanyingPeriodId"
:to-remove="attachedGenericDoc"
ref="pickDocModal"
@pickGenericDoc="onPickGenericDoc"
></pick-generic-doc-modal>
<attachment-list
:attachments="props.attachments"
@removeAttachment="onRemoveAttachment"
></attachment-list>
<ul class="record_actions">
<li>
<button type="button" class="btn btn-create" @click="openModal">
Ajouter une pièce jointe
</button>
</li>
</ul>
</template>
<style scoped lang="scss"></style>

66
src/Bundle/ChillMainBundle/Resources/public/vuejs/WorkflowAttachment/Component/AttachmentList.vue
View File

@@ -4,49 +4,49 @@ import GenericDocItemBox from "ChillMainAssets/vuejs/WorkflowAttachment/Componen
import DocumentActionButtonsGroup from "ChillDocStoreAssets/vuejs/DocumentActionButtonsGroup.vue";
interface AttachmentListProps {
attachments: WorkflowAttachment[];
attachments: WorkflowAttachment[];
}
const emit = defineEmits<{
// eslint-disable-next-line @typescript-eslint/prefer-function-type
(e: "removeAttachment", payload: { attachment: WorkflowAttachment }): void;
// eslint-disable-next-line @typescript-eslint/prefer-function-type
(e: "removeAttachment", payload: { attachment: WorkflowAttachment }): void;
}>();
const props = defineProps<AttachmentListProps>();
</script>
<template>
<p
v-if="props.attachments.length === 0"
class="chill-no-data-statement text-center"
>
Aucune pièce jointe
</p>
<!-- TODO translate -->
<div else class="flex-table">
<div v-for="a in props.attachments" :key="a.id" class="item-bloc">
<generic-doc-item-box
v-if="a.genericDoc !== null"
:generic-doc="a.genericDoc"
></generic-doc-item-box>
<div class="item-row separator">
<ul class="record_actions">
<li v-if="a.genericDoc?.storedObject !== null">
<document-action-buttons-group
:stored-object="a.genericDoc.storedObject"
></document-action-buttons-group>
</li>
<li>
<button
type="button"
class="btn btn-delete"
@click="emit('removeAttachment', { attachment: a })"
></button>
</li>
</ul>
</div>
</div>
<p
v-if="props.attachments.length === 0"
class="chill-no-data-statement text-center"
>
Aucune pièce jointe
</p>
<!-- TODO translate -->
<div else class="flex-table">
<div v-for="a in props.attachments" :key="a.id" class="item-bloc">
<generic-doc-item-box
v-if="a.genericDoc !== null"
:generic-doc="a.genericDoc"
></generic-doc-item-box>
<div class="item-row separator">
<ul class="record_actions">
<li v-if="a.genericDoc?.storedObject !== null">
<document-action-buttons-group
:stored-object="a.genericDoc.storedObject"
></document-action-buttons-group>
</li>
<li>
<button
type="button"
class="btn btn-delete"
@click="emit('removeAttachment', { attachment: a })"
></button>
</li>
</ul>
</div>
</div>
</div>
</template>
<style scoped lang="scss"></style>

10
src/Bundle/ChillMainBundle/Resources/public/vuejs/WorkflowAttachment/Component/GenericDocItemBox.vue
View File

@@ -2,17 +2,17 @@
import { GenericDocForAccompanyingPeriod } from "ChillDocStoreAssets/types/generic_doc";
interface GenericDocItemBoxProps {
genericDoc: GenericDocForAccompanyingPeriod;
genericDoc: GenericDocForAccompanyingPeriod;
}
const props = defineProps<GenericDocItemBoxProps>();
</script>
<template>
<div
v-if="'html' in props.genericDoc.metadata"
v-html="props.genericDoc.metadata.html"
></div>
<div
v-if="'html' in props.genericDoc.metadata"
v-html="props.genericDoc.metadata.html"
></div>
</template>
<style scoped lang="scss"></style>

420
src/Bundle/ChillMainBundle/Resources/public/vuejs/WorkflowAttachment/Component/PickGenericDoc.vue
View File

@@ -1,45 +1,45 @@
<script setup lang="ts">
import {
GenericDoc,
GenericDocForAccompanyingPeriod,
GenericDoc,
GenericDocForAccompanyingPeriod,
} from "ChillDocStoreAssets/types/generic_doc";
import PickGenericDocItem from "ChillMainAssets/vuejs/WorkflowAttachment/Component/PickGenericDocItem.vue";
import { fetch_generic_docs_by_accompanying_period } from "ChillDocStoreAssets/js/generic-doc-api";
import { computed, onMounted, ref } from "vue";
interface PickGenericDocProps {
accompanyingPeriodId: number;
pickedList: GenericDocForAccompanyingPeriod[];
toRemove: GenericDocForAccompanyingPeriod[];
accompanyingPeriodId: number;
pickedList: GenericDocForAccompanyingPeriod[];
toRemove: GenericDocForAccompanyingPeriod[];
}
const props = defineProps<PickGenericDocProps>();
const emit = defineEmits<{
(
e: "pickGenericDoc",
payload: { genericDoc: GenericDocForAccompanyingPeriod },
): void;
(
e: "pickGenericDoc",
payload: { genericDoc: GenericDocForAccompanyingPeriod },
): void;
(
e: "removeGenericDoc",
payload: { genericDoc: GenericDocForAccompanyingPeriod },
): void;
(
e: "removeGenericDoc",
payload: { genericDoc: GenericDocForAccompanyingPeriod },
): void;
}>();
const genericDocs = ref<GenericDocForAccompanyingPeriod[]>([]);
const loaded = ref(false);
const isPicked = (genericDoc: GenericDocForAccompanyingPeriod): boolean =>
props.pickedList.findIndex(
(element: GenericDocForAccompanyingPeriod) =>
element.uniqueKey === genericDoc.uniqueKey,
) !== -1;
props.pickedList.findIndex(
(element: GenericDocForAccompanyingPeriod) =>
element.uniqueKey === genericDoc.uniqueKey,
) !== -1;
onMounted(async () => {
genericDocs.value = await fetch_generic_docs_by_accompanying_period(
props.accompanyingPeriodId,
);
loaded.value = true;
genericDocs.value = await fetch_generic_docs_by_accompanying_period(
props.accompanyingPeriodId,
);
loaded.value = true;
});
const textFilter = ref<string>("");
@@ -48,229 +48,213 @@ const dateToFilter = ref<string | null>(null);
const placesFilter = ref<string[]>([]);
const availablePlaces = computed<string[]>(() => {
const places = new Set<string>(
genericDocs.value.map((genericDoc: GenericDoc) => genericDoc.key),
);
const places = new Set<string>(
genericDocs.value.map((genericDoc: GenericDoc) => genericDoc.key),
);
return Array.from(places).sort((a, b) => (a < b ? -1 : a === b ? 0 : 1));
return Array.from(places).sort((a, b) => (a < b ? -1 : a === b ? 0 : 1));
});
const placeTrans = (str: string): string => {
switch (str) {
case "accompanying_course_document":
return "Documents du parcours";
case "person_document":
return "Documents de l'usager";
case "accompanying_period_calendar_document":
return "Document des rendez-vous des parcours";
case "accompanying_period_activity_document":
return "Document des échanges des parcours";
case "accompanying_period_work_evaluation_document":
return "Document des actions d'accompagnement";
default:
return str;
}
switch (str) {
case "accompanying_course_document":
return "Documents du parcours";
case "person_document":
return "Documents de l'usager";
case "accompanying_period_calendar_document":
return "Document des rendez-vous des parcours";
case "accompanying_period_activity_document":
return "Document des échanges des parcours";
case "accompanying_period_work_evaluation_document":
return "Document des actions d'accompagnement";
default:
return str;
}
};
const onPickDocument = (payload: {
genericDoc: GenericDocForAccompanyingPeriod;
genericDoc: GenericDocForAccompanyingPeriod;
}) => emit("pickGenericDoc", payload);
const onRemoveGenericDoc = (payload: {
genericDoc: GenericDocForAccompanyingPeriod;
genericDoc: GenericDocForAccompanyingPeriod;
}) => emit("removeGenericDoc", payload);
const filteredDocuments = computed<GenericDocForAccompanyingPeriod[]>(() => {
if (false === loaded.value) {
return [];
}
if (false === loaded.value) {
return [];
}
return genericDocs.value
.filter(
(genericDoc: GenericDocForAccompanyingPeriod) =>
!props.toRemove
.map((g: GenericDocForAccompanyingPeriod) => g.uniqueKey)
.includes(genericDoc.uniqueKey),
)
.filter((genericDoc: GenericDocForAccompanyingPeriod) => {
if (textFilter.value === "") {
return true;
}
return genericDocs.value
.filter(
(genericDoc: GenericDocForAccompanyingPeriod) =>
!props.toRemove
.map((g: GenericDocForAccompanyingPeriod) => g.uniqueKey)
.includes(genericDoc.uniqueKey),
)
.filter((genericDoc: GenericDocForAccompanyingPeriod) => {
if (textFilter.value === "") {
return true;
}
const needles = textFilter.value
.trim()
.split(" ")
.map((str: string) => str.trim().toLowerCase())
.filter((str: string) => str.length > 0);
const title: string =
"title" in genericDoc.metadata
? (genericDoc.metadata.title as string)
: "";
if (title === "") {
return false;
}
const needles = textFilter.value
.trim()
.split(" ")
.map((str: string) => str.trim().toLowerCase())
.filter((str: string) => str.length > 0);
const title: string =
"title" in genericDoc.metadata
? (genericDoc.metadata.title as string)
: "";
if (title === "") {
return false;
}
return needles.every((n: string) =>
title.toLowerCase().includes(n),
);
})
.filter((genericDoc: GenericDocForAccompanyingPeriod) => {
if (placesFilter.value.length === 0) {
return true;
}
return needles.every((n: string) => title.toLowerCase().includes(n));
})
.filter((genericDoc: GenericDocForAccompanyingPeriod) => {
if (placesFilter.value.length === 0) {
return true;
}
return placesFilter.value.includes(genericDoc.key);
})
.filter((genericDoc: GenericDocForAccompanyingPeriod) => {
if (dateToFilter.value === null) {
return true;
}
return placesFilter.value.includes(genericDoc.key);
})
.filter((genericDoc: GenericDocForAccompanyingPeriod) => {
if (dateToFilter.value === null) {
return true;
}
return genericDoc.doc_date.datetime8601 < dateToFilter.value;
})
.filter((genericDoc: GenericDocForAccompanyingPeriod) => {
if (dateFromFilter.value === null) {
return true;
}
return genericDoc.doc_date.datetime8601 < dateToFilter.value;
})
.filter((genericDoc: GenericDocForAccompanyingPeriod) => {
if (dateFromFilter.value === null) {
return true;
}
return genericDoc.doc_date.datetime8601 > dateFromFilter.value;
});
return genericDoc.doc_date.datetime8601 > dateFromFilter.value;
});
});
</script>
<template>
<div v-if="loaded">
<div>
<form name="f" method="get">
<div class="accordion my-3" id="filterOrderAccordion">
<h2 class="accordion-header" id="filterOrderHeading">
<button
class="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#filterOrderCollapse"
aria-expanded="true"
aria-controls="filterOrderCollapse"
>
<strong
><i class="fa fa-fw fa-filter"></i>Filtrer la
liste</strong
>
</button>
</h2>
<div
class="accordion-collapse collapse"
id="filterOrderCollapse"
aria-labelledby="filterOrderHeading"
data-bs-parent="#filterOrderAccordion"
style=""
>
<div
class="accordion-body chill_filter_order container-xxl p-5 py-2"
>
<div class="row my-2">
<div class="col-sm-12">
<div class="input-group">
<input
v-model="textFilter"
type="search"
id="f_q"
name="f[q]"
placeholder="Chercher dans la liste"
class="form-control"
/>
<button
type="submit"
class="btn btn-misc"
>
<i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
<div class="row my-2">
<legend
class="col-form-label col-sm-4 required"
>
Date du document
</legend>
<div class="col-sm-8 pt-1">
<div class="input-group">
<span class="input-group-text">Du</span>
<input
v-model="dateFromFilter"
type="date"
id="f_dateRanges_dateRange_from"
name="f[dateRanges][dateRange][from]"
class="form-control"
/>
<span class="input-group-text">Au</span>
<input
v-model="dateToFilter"
type="date"
id="f_dateRanges_dateRange_to"
name="f[dateRanges][dateRange][to]"
class="form-control"
/>
</div>
</div>
</div>
<div class="row my-2">
<div class="col-sm-4 col-form-label">
Filtrer par
</div>
<div class="col-sm-8 pt-2">
<div
class="form-check"
v-for="p in availablePlaces"
:key="p"
>
<input
type="checkbox"
v-model="placesFilter"
name="f[checkboxes][places][]"
class="form-check-input"
:value="p"
/>
<label class="form-check-label">{{
placeTrans(p)
}}</label>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div v-if="genericDocs.length > 0" class="flex-table chill-task-list">
<pick-generic-doc-item
v-for="g in filteredDocuments"
:key="g.uniqueKey"
:accompanying-period-id="accompanyingPeriodId"
:genericDoc="g"
:is-picked="isPicked(g)"
@pickGenericDoc="onPickDocument"
@removeGenericDoc="onRemoveGenericDoc"
></pick-generic-doc-item>
</div>
<div v-else class="text-center chill-no-data-statement">
Aucun document dans ce parcours
</div>
</div>
<div v-else>
<div class="d-flex align-items-center">
<strong>Chargement…</strong>
<div v-if="loaded">
<div>
<form name="f" method="get">
<div class="accordion my-3" id="filterOrderAccordion">
<h2 class="accordion-header" id="filterOrderHeading">
<button
class="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#filterOrderCollapse"
aria-expanded="true"
aria-controls="filterOrderCollapse"
>
<strong
><i class="fa fa-fw fa-filter"></i>Filtrer la liste</strong
>
</button>
</h2>
<div
class="accordion-collapse collapse"
id="filterOrderCollapse"
aria-labelledby="filterOrderHeading"
data-bs-parent="#filterOrderAccordion"
style=""
>
<div
class="spinner-border ms-auto"
role="status"
aria-hidden="true"
></div>
class="accordion-body chill_filter_order container-xxl p-5 py-2"
>
<div class="row my-2">
<div class="col-sm-12">
<div class="input-group">
<input
v-model="textFilter"
type="search"
id="f_q"
name="f[q]"
placeholder="Chercher dans la liste"
class="form-control"
/>
<button type="submit" class="btn btn-misc">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
<div class="row my-2">
<legend class="col-form-label col-sm-4 required">
Date du document
</legend>
<div class="col-sm-8 pt-1">
<div class="input-group">
<span class="input-group-text">Du</span>
<input
v-model="dateFromFilter"
type="date"
id="f_dateRanges_dateRange_from"
name="f[dateRanges][dateRange][from]"
class="form-control"
/>
<span class="input-group-text">Au</span>
<input
v-model="dateToFilter"
type="date"
id="f_dateRanges_dateRange_to"
name="f[dateRanges][dateRange][to]"
class="form-control"
/>
</div>
</div>
</div>
<div class="row my-2">
<div class="col-sm-4 col-form-label">Filtrer par</div>
<div class="col-sm-8 pt-2">
<div class="form-check" v-for="p in availablePlaces" :key="p">
<input
type="checkbox"
v-model="placesFilter"
name="f[checkboxes][places][]"
class="form-check-input"
:value="p"
/>
<label class="form-check-label">{{ placeTrans(p) }}</label>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div v-if="genericDocs.length > 0" class="flex-table chill-task-list">
<pick-generic-doc-item
v-for="g in filteredDocuments"
:key="g.uniqueKey"
:accompanying-period-id="accompanyingPeriodId"
:genericDoc="g"
:is-picked="isPicked(g)"
@pickGenericDoc="onPickDocument"
@removeGenericDoc="onRemoveGenericDoc"
></pick-generic-doc-item>
</div>
<div v-else class="text-center chill-no-data-statement">
Aucun document dans ce parcours
</div>
</div>
<div v-else>
<div class="d-flex align-items-center">
<strong>Chargement…</strong>
<div
class="spinner-border ms-auto"
role="status"
aria-hidden="true"
></div>
</div>
</div>
</template>
<style scoped lang="scss"></style>

132
src/Bundle/ChillMainBundle/Resources/public/vuejs/WorkflowAttachment/Component/PickGenericDocItem.vue
View File

@@ -4,93 +4,85 @@ import GenericDocItemBox from "ChillMainAssets/vuejs/WorkflowAttachment/Componen
import DocumentActionButtonsGroup from "ChillDocStoreAssets/vuejs/DocumentActionButtonsGroup.vue";
interface PickGenericDocItemProps {
genericDoc: GenericDocForAccompanyingPeriod;
accompanyingPeriodId: number;
isPicked: boolean;
genericDoc: GenericDocForAccompanyingPeriod;
accompanyingPeriodId: number;
isPicked: boolean;
}
const props = defineProps<PickGenericDocItemProps>();
const emit = defineEmits<{
(
e: "pickGenericDoc",
payload: { genericDoc: GenericDocForAccompanyingPeriod },
): void;
(
e: "pickGenericDoc",
payload: { genericDoc: GenericDocForAccompanyingPeriod },
): void;
(
e: "removeGenericDoc",
payload: { genericDoc: GenericDocForAccompanyingPeriod },
): void;
(
e: "removeGenericDoc",
payload: { genericDoc: GenericDocForAccompanyingPeriod },
): void;
}>();
const clickOnAddButton = () => {
emit("pickGenericDoc", { genericDoc: props.genericDoc });
emit("pickGenericDoc", { genericDoc: props.genericDoc });
};
</script>
<template>
<div class="item-bloc" :class="{ isPicked: isPicked }">
<generic-doc-item-box
:generic-doc="props.genericDoc"
></generic-doc-item-box>
<div class="item-bloc" :class="{ isPicked: isPicked }">
<generic-doc-item-box
:generic-doc="props.genericDoc"
></generic-doc-item-box>
<div class="item-row separator">
<ul class="record_actions">
<li v-if="props.genericDoc.storedObject !== null">
<document-action-buttons-group
:stored-object="props.genericDoc.storedObject"
></document-action-buttons-group>
</li>
<li>
<button
v-if="!isPicked"
type="button"
class="btn btn-chill-green text-white"
@click="clickOnAddButton"
>
<i class="bi bi-cart-plus"></i>
</button>
<button
v-else
type="button"
class="btn btn-chill-red text-white"
@click="
emit('removeGenericDoc', {
genericDoc: props.genericDoc,
})
"
>
<i class="bi bi-cart-dash"></i>
</button>
</li>
</ul>
</div>
<div class="item-row separator">
<ul class="record_actions">
<li v-if="props.genericDoc.storedObject !== null">
<document-action-buttons-group
:stored-object="props.genericDoc.storedObject"
></document-action-buttons-group>
</li>
<li>
<button
v-if="!isPicked"
type="button"
class="btn btn-chill-green text-white"
@click="clickOnAddButton"
>
<i class="bi bi-cart-plus"></i>
</button>
<button
v-else
type="button"
class="btn btn-chill-red text-white"
@click="
emit('removeGenericDoc', {
genericDoc: props.genericDoc,
})
"
>
<i class="bi bi-cart-dash"></i>
</button>
</li>
</ul>
</div>
</div>
</template>
<style scoped lang="scss">
.item-bloc {
&.isPicked {
background:
linear-gradient(
180deg,
rgba(25, 135, 84, 1) 0px,
rgba(25, 135, 84, 0) 9px
),
linear-gradient(
270deg,
rgba(25, 135, 84, 1) 0px,
rgba(25, 135, 84, 0) 9px
),
linear-gradient(
0deg,
rgba(25, 135, 84, 1) 0px,
rgba(25, 135, 84, 0) 9px
),
linear-gradient(
90deg,
rgba(25, 135, 84, 1) 0px,
rgba(25, 135, 84, 0) 9px
);
}
&.isPicked {
background:
linear-gradient(
180deg,
rgba(25, 135, 84, 1) 0px,
rgba(25, 135, 84, 0) 9px
),
linear-gradient(
270deg,
rgba(25, 135, 84, 1) 0px,
rgba(25, 135, 84, 0) 9px
),
linear-gradient(0deg, rgba(25, 135, 84, 1) 0px, rgba(25, 135, 84, 0) 9px),
linear-gradient(90deg, rgba(25, 135, 84, 1) 0px, rgba(25, 135, 84, 0) 9px);
}
}
</style>

128
src/Bundle/ChillMainBundle/Resources/public/vuejs/WorkflowAttachment/Component/PickGenericDocModal.vue
View File

@@ -5,19 +5,19 @@ import PickGenericDoc from "ChillMainAssets/vuejs/WorkflowAttachment/Component/P
import { GenericDocForAccompanyingPeriod } from "ChillDocStoreAssets/types/generic_doc";
interface PickGenericDocModalProps {
accompanyingPeriodId: number;
toRemove: GenericDocForAccompanyingPeriod[];
accompanyingPeriodId: number;
toRemove: GenericDocForAccompanyingPeriod[];
}
type PickGenericDocType = InstanceType<typeof PickGenericDoc>;
const props = defineProps<PickGenericDocModalProps>();
const emit = defineEmits<{
// eslint-disable-next-line @typescript-eslint/prefer-function-type
(
e: "pickGenericDoc",
payload: { genericDoc: GenericDocForAccompanyingPeriod },
): void;
// eslint-disable-next-line @typescript-eslint/prefer-function-type
(
e: "pickGenericDoc",
payload: { genericDoc: GenericDocForAccompanyingPeriod },
): void;
}>();
const picker = useTemplateRef<PickGenericDocType>("picker");
const modalOpened = ref<boolean>(false);
@@ -27,87 +27,87 @@ const modalClasses = { "modal-xl": true, "modal-dialog-scrollable": true };
const numberOfPicked = computed<number>(() => pickeds.value.length);
const onPicked = ({
genericDoc,
genericDoc,
}: {
genericDoc: GenericDocForAccompanyingPeriod;
genericDoc: GenericDocForAccompanyingPeriod;
}) => {
pickeds.value.push(genericDoc);
pickeds.value.push(genericDoc);
};
const onRemove = ({
genericDoc,
genericDoc,
}: {
genericDoc: GenericDocForAccompanyingPeriod;
genericDoc: GenericDocForAccompanyingPeriod;
}) => {
const index = pickeds.value.findIndex(
(item) => item.uniqueKey === genericDoc.uniqueKey,
);
const index = pickeds.value.findIndex(
(item) => item.uniqueKey === genericDoc.uniqueKey,
);
if (index === -1) {
throw new Error("Remove generic doc that doesn't exist");
}
if (index === -1) {
throw new Error("Remove generic doc that doesn't exist");
}
pickeds.value.splice(index, 1);
pickeds.value.splice(index, 1);
};
const onConfirm = () => {
for (let genericDoc of pickeds.value) {
emit("pickGenericDoc", { genericDoc });
}
pickeds.value = [];
closeModal();
for (let genericDoc of pickeds.value) {
emit("pickGenericDoc", { genericDoc });
}
pickeds.value = [];
closeModal();
};
const closeModal = function () {
modalOpened.value = false;
modalOpened.value = false;
};
const openModal = function () {
modalOpened.value = true;
modalOpened.value = true;
};
defineExpose({ openModal, closeModal });
</script>
<template>
<modal
v-if="modalOpened"
@close="closeModal"
:modal-dialog-class="modalClasses"
>
<template v-slot:header>
<h2 class="modal-title">Ajouter une pièce jointe</h2>
</template>
<template v-slot:body>
<pick-generic-doc
:accompanying-period-id="props.accompanyingPeriodId"
:to-remove="props.toRemove"
:picked-list="pickeds"
ref="picker"
@pickGenericDoc="onPicked"
@removeGenericDoc="onRemove"
></pick-generic-doc>
</template>
<template v-slot:footer>
<ul v-if="numberOfPicked > 0" class="record_actions">
<li>
<button
type="button"
class="btn btn-chill-green text-white"
@click="onConfirm"
>
<template v-if="numberOfPicked > 1">
<i class="fa fa-plus"></i> Ajouter
{{ numberOfPicked }} pièces jointes
</template>
<template v-else>
<i class="fa fa-plus"></i> Ajouter une pièce jointe
</template>
</button>
</li>
</ul>
</template>
</modal>
<modal
v-if="modalOpened"
@close="closeModal"
:modal-dialog-class="modalClasses"
>
<template v-slot:header>
<h2 class="modal-title">Ajouter une pièce jointe</h2>
</template>
<template v-slot:body>
<pick-generic-doc
:accompanying-period-id="props.accompanyingPeriodId"
:to-remove="props.toRemove"
:picked-list="pickeds"
ref="picker"
@pickGenericDoc="onPicked"
@removeGenericDoc="onRemove"
></pick-generic-doc>
</template>
<template v-slot:footer>
<ul v-if="numberOfPicked > 0" class="record_actions">
<li>
<button
type="button"
class="btn btn-chill-green text-white"
@click="onConfirm"
>
<template v-if="numberOfPicked > 1">
<i class="fa fa-plus"></i> Ajouter {{ numberOfPicked }} pièces
jointes
</template>
<template v-else>
<i class="fa fa-plus"></i> Ajouter une pièce jointe
</template>
</button>
</li>
</ul>
</template>
</modal>
</template>
<style scoped lang="scss"></style>

177
src/Bundle/ChillMainBundle/Resources/public/vuejs/WorkflowAttachment/index.ts
View File

@@ -3,107 +3,102 @@ import App from "./App.vue";
import { _createI18n } from "../_js/i18n";
import { WorkflowAttachment } from "ChillMainAssets/types";
import {
create_attachment,
delete_attachment,
find_attachments_by_workflow,
create_attachment,
delete_attachment,
find_attachments_by_workflow,
} from "ChillMainAssets/lib/workflow/attachments";
import { GenericDocForAccompanyingPeriod } from "ChillDocStoreAssets/types/generic_doc";
import ToastPlugin from "vue-toast-notification";
import "vue-toast-notification/dist/theme-bootstrap.css";
window.addEventListener("DOMContentLoaded", () => {
const attachments = document.querySelectorAll<HTMLDivElement>(
'div[data-app="workflow_attachments"]',
const attachments = document.querySelectorAll<HTMLDivElement>(
'div[data-app="workflow_attachments"]',
);
attachments.forEach(async (el) => {
const workflowId = parseInt(el.dataset.entityWorkflowId || "");
const accompanyingPeriodId = parseInt(
el.dataset.relatedAccompanyingPeriodId || "",
);
const attachments = await find_attachments_by_workflow(workflowId);
attachments.forEach(async (el) => {
const workflowId = parseInt(el.dataset.entityWorkflowId || "");
const accompanyingPeriodId = parseInt(
el.dataset.relatedAccompanyingPeriodId || "",
);
const attachments = await find_attachments_by_workflow(workflowId);
const app = createApp({
template:
'<app :workflowId="workflowId" :accompanyingPeriodId="accompanyingPeriodId" :attachments="attachments" @pickGenericDoc="onPickGenericDoc" @removeAttachment="onRemoveAttachment"></app>',
components: { App },
data: function () {
return { workflowId, accompanyingPeriodId, attachments };
},
methods: {
onRemoveAttachment: async function ({
attachment,
}: {
attachment: WorkflowAttachment;
}): Promise<void> {
const index = this.$data.attachments.findIndex(
(el: WorkflowAttachment) => el.id === attachment.id,
);
if (-1 === index) {
console.warn(
"this attachment is not associated with the workflow",
attachment,
);
this.$toast.error(
"This attachment is not associated with the workflow",
);
return;
}
const app = createApp({
template:
'<app :workflowId="workflowId" :accompanyingPeriodId="accompanyingPeriodId" :attachments="attachments" @pickGenericDoc="onPickGenericDoc" @removeAttachment="onRemoveAttachment"></app>',
components: { App },
data: function () {
return { workflowId, accompanyingPeriodId, attachments };
},
methods: {
onRemoveAttachment: async function ({
attachment,
}: {
attachment: WorkflowAttachment;
}): Promise<void> {
const index = this.$data.attachments.findIndex(
(el: WorkflowAttachment) => el.id === attachment.id,
);
if (-1 === index) {
console.warn(
"this attachment is not associated with the workflow",
attachment,
);
this.$toast.error(
"This attachment is not associated with the workflow",
);
return;
}
try {
await delete_attachment(attachment);
} catch (error) {
console.error(error);
this.$toast.error("Error while removing element");
throw error;
}
this.$data.attachments.splice(index, 1);
this.$toast.success("Pièce jointe supprimée");
},
onPickGenericDoc: async function ({
genericDoc,
}: {
genericDoc: GenericDocForAccompanyingPeriod;
}): Promise<void> {
console.log("picked generic doc", genericDoc);
try {
await delete_attachment(attachment);
} catch (error) {
console.error(error);
this.$toast.error("Error while removing element");
throw error;
}
this.$data.attachments.splice(index, 1);
this.$toast.success("Pièce jointe supprimée");
},
onPickGenericDoc: async function ({
genericDoc,
}: {
genericDoc: GenericDocForAccompanyingPeriod;
}): Promise<void> {
console.log("picked generic doc", genericDoc);
// prevent to create double attachment:
if (
-1 !==
this.$data.attachments.findIndex(
(el: WorkflowAttachment) =>
el.genericDoc?.key === genericDoc.key &&
JSON.stringify(el.genericDoc?.identifiers) ==
JSON.stringify(genericDoc.identifiers),
)
) {
console.warn(
"this document is already attached to the workflow",
genericDoc,
);
this.$toast.error("Ce document est déjà attaché au workflow");
return;
}
// prevent to create double attachment:
if (
-1 !==
this.$data.attachments.findIndex(
(el: WorkflowAttachment) =>
el.genericDoc?.key === genericDoc.key &&
JSON.stringify(el.genericDoc?.identifiers) ==
JSON.stringify(genericDoc.identifiers),
)
) {
console.warn(
"this document is already attached to the workflow",
genericDoc,
);
this.$toast.error(
"Ce document est déjà attaché au workflow",
);
return;
}
try {
const attachment = await create_attachment(
workflowId,
genericDoc,
);
this.$data.attachments.push(attachment);
} catch (error) {
console.error(error);
throw error;
}
},
},
});
const i18n = _createI18n({});
app.use(i18n);
app.use(ToastPlugin);
app.mount(el);
try {
const attachment = await create_attachment(workflowId, genericDoc);
this.$data.attachments.push(attachment);
} catch (error) {
console.error(error);
throw error;
}
},
},
});
const i18n = _createI18n({});
app.use(i18n);
app.use(ToastPlugin);
app.mount(el);
});
});

82
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/AddressDetailsButton.vue
View File

@@ -1,23 +1,23 @@
<template>
<span
v-if="data.working_ref_status === 'to_review'"
class="badge bg-danger address-details-button-warning"
>L'adresse de référence a été modifiée</span
>
<a
v-if="data.loading === false"
@click.prevent="clickOrOpen"
class="btn btn-sm address-details-button"
title="Plus de détails"
>
<span class="fa fa-map-o"></span>
</a>
<span v-if="data.loading" class="fa fa-spin fa-spinner"></span>
<AddressModal
:address="data.working_address"
@update-address="onUpdateAddress"
ref="address_modal"
></AddressModal>
<span
v-if="data.working_ref_status === 'to_review'"
class="badge bg-danger address-details-button-warning"
>L'adresse de référence a été modifiée</span
>
<a
v-if="data.loading === false"
@click.prevent="clickOrOpen"
class="btn btn-sm address-details-button"
title="Plus de détails"
>
<span class="fa fa-map-o"></span>
</a>
<span v-if="data.loading" class="fa fa-spin fa-spinner"></span>
<AddressModal
:address="data.working_address"
@update-address="onUpdateAddress"
ref="address_modal"
></AddressModal>
</template>
<script lang="ts" setup>
@@ -27,20 +27,20 @@ import { getAddressById } from "../../../lib/api/address";
import AddressModal from "./AddressModal.vue";
export interface AddressModalContentProps {
address_id: number;
address_ref_status: AddressRefStatus;
address_id: number;
address_ref_status: AddressRefStatus;
}
interface AddressModalData {
loading: boolean;
working_address: Address | null;
working_ref_status: AddressRefStatus | null;
loading: boolean;
working_address: Address | null;
working_ref_status: AddressRefStatus | null;
}
const data: AddressModalData = reactive({
loading: false,
working_address: null,
working_ref_status: null,
loading: false,
working_address: null,
working_ref_status: null,
} as AddressModalData);
const props = defineProps<AddressModalContentProps>();
@@ -50,31 +50,31 @@ const emit = defineEmits<(e: "update-address", value: Address) => void>();
const address_modal = ref<InstanceType<typeof AddressModal> | null>(null);
onMounted(() => {
data.working_ref_status = props.address_ref_status;
data.working_ref_status = props.address_ref_status;
});
async function clickOrOpen(): Promise<void> {
if (data.working_address === null) {
data.loading = true;
data.working_address = await getAddressById(props.address_id);
data.working_ref_status = data.working_address.refStatus;
data.loading = false;
}
if (data.working_address === null) {
data.loading = true;
data.working_address = await getAddressById(props.address_id);
data.working_ref_status = data.working_address.refStatus;
data.loading = false;
}
// open the modal
address_modal.value?.open();
// open the modal
address_modal.value?.open();
}
const onUpdateAddress = (address: Address): void => {
data.working_address = address;
data.working_ref_status = address.refStatus;
emit("update-address", address);
data.working_address = address;
data.working_ref_status = address.refStatus;
emit("update-address", address);
};
</script>
<style scoped lang="scss">
.address-details-button-warning {
display: inline-block;
margin-right: 0.3rem;
display: inline-block;
margin-right: 0.3rem;
}
</style>

28
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/AddressDetailsContent.vue
View File

@@ -1,16 +1,16 @@
<template>
<address-render-box
:address="props.address"
:show-button-details="false"
></address-render-box>
<address-details-ref-matching
:address="props.address"
@update-address="onUpdateAddress"
></address-details-ref-matching>
<address-details-map :address="props.address"></address-details-map>
<address-details-geographical-layers
:address="props.address"
></address-details-geographical-layers>
<address-render-box
:address="props.address"
:show-button-details="false"
></address-render-box>
<address-details-ref-matching
:address="props.address"
@update-address="onUpdateAddress"
></address-details-ref-matching>
<address-details-map :address="props.address"></address-details-map>
<address-details-geographical-layers
:address="props.address"
></address-details-geographical-layers>
</template>
<script lang="ts" setup>
@@ -21,7 +21,7 @@ import AddressDetailsGeographicalLayers from "./Parts/AddressDetailsGeographical
import AddressDetailsRefMatching from "./Parts/AddressDetailsRefMatching.vue";
interface AddressModalContentProps {
address: Address;
address: Address;
}
const props = defineProps<AddressModalContentProps>();
@@ -29,7 +29,7 @@ const props = defineProps<AddressModalContentProps>();
const emit = defineEmits<(e: "update-address", value: Address) => void>();
const onUpdateAddress = (address: Address): void => {
emit("update-address", address);
emit("update-address", address);
};
</script>

40
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/AddressModal.vue
View File

@@ -1,17 +1,17 @@
<template>
<teleport to="body">
<modal v-if="state.show_modal" @close="close">
<template v-slot:header>
<h2>Détails d'une adresse</h2>
</template>
<template v-slot:body>
<address-details-content
:address="props.address"
@update-address="onUpdateAddress"
></address-details-content>
</template>
</modal>
</teleport>
<teleport to="body">
<modal v-if="state.show_modal" @close="close">
<template v-slot:header>
<h2>Détails d'une adresse</h2>
</template>
<template v-slot:body>
<address-details-content
:address="props.address"
@update-address="onUpdateAddress"
></address-details-content>
</template>
</modal>
</teleport>
</template>
<script lang="ts" setup>
@@ -21,11 +21,11 @@ import { Address } from "../../../types";
import AddressDetailsContent from "./AddressDetailsContent.vue";
interface AddressModalProps {
address: Address;
address: Address;
}
interface AddressModalState {
show_modal: boolean;
show_modal: boolean;
}
const props = defineProps<AddressModalProps>();
@@ -35,20 +35,20 @@ const emit = defineEmits<(e: "update-address", value: Address) => void>();
const state: AddressModalState = reactive({ show_modal: false });
const open = (): void => {
state.show_modal = true;
state.show_modal = true;
};
const close = (): void => {
state.show_modal = false;
state.show_modal = false;
};
const onUpdateAddress = (address: Address): void => {
emit("update-address", address);
emit("update-address", address);
};
defineExpose({
close,
open,
close,
open,
});
</script>

60
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/Parts/AddressDetailsGeographicalLayers.vue
View File

@@ -1,59 +1,59 @@
<template>
<template v-for="(container, index) in data.containers" :key="index">
<h4>{{ localizeString(container.layer.name) }}</h4>
<ul>
<li v-for="(unit, index) in container.units" :key="index">
{{ unit.unitName }} ({{ unit.unitRefId }})
</li>
</ul>
</template>
<template v-for="(container, index) in data.containers" :key="index">
<h4>{{ localizeString(container.layer.name) }}</h4>
<ul>
<li v-for="(unit, index) in container.units" :key="index">
{{ unit.unitName }} ({{ unit.unitRefId }})
</li>
</ul>
</template>
</template>
<script lang="ts" setup>
import {
Address,
GeographicalUnitLayer,
SimpleGeographicalUnit,
Address,
GeographicalUnitLayer,
SimpleGeographicalUnit,
} from "../../../../types";
import {
getGeographicalUnitsByAddress,
getAllGeographicalUnitLayers,
getGeographicalUnitsByAddress,
getAllGeographicalUnitLayers,
} from "../../../../lib/api/address";
import { onMounted, reactive } from "vue";
import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
export interface AddressDetailsGeographicalLayersProp {
address: Address;
address: Address;
}
interface GeographicalUnitContainer {
layer: GeographicalUnitLayer;
units: SimpleGeographicalUnit[];
layer: GeographicalUnitLayer;
units: SimpleGeographicalUnit[];
}
const props = defineProps<AddressDetailsGeographicalLayersProp>();
const data: {
containers: GeographicalUnitContainer[];
containers: GeographicalUnitContainer[];
} = reactive({
containers: [],
containers: [],
});
onMounted(async () => {
const [units, layers] = (await Promise.all([
getGeographicalUnitsByAddress(props.address),
getAllGeographicalUnitLayers(),
])) as [SimpleGeographicalUnit[], GeographicalUnitLayer[]];
const [units, layers] = (await Promise.all([
getGeographicalUnitsByAddress(props.address),
getAllGeographicalUnitLayers(),
])) as [SimpleGeographicalUnit[], GeographicalUnitLayer[]];
for (let layer of layers) {
let us = units.filter((u) => u.layerId === layer.id);
if (us.length > 0) {
data.containers.push({
layer,
units: us,
});
}
for (let layer of layers) {
let us = units.filter((u) => u.layerId === layer.id);
if (us.length > 0) {
data.containers.push({
layer,
units: us,
});
}
}
});
</script>

127
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/Parts/AddressDetailsMap.vue
View File

@@ -1,20 +1,17 @@
<template>
<div v-if="props.address.isNoAddress" class="alert alert-info">
Cette adresse est incomplète. La position géographique est
approximative.
</div>
<div
v-if="props.address.point !== null"
class="address_details_map"
ref="map_div"
></div>
<p>
Voir sur
<a :href="makeUrlGoogleMap(props.address)" target="_blank"
>Google Maps</a
>
<a :href="makeUrlOsm(props.address)" target="_blank">OSM</a>
</p>
<div v-if="props.address.isNoAddress" class="alert alert-info">
Cette adresse est incomplète. La position géographique est approximative.
</div>
<div
v-if="props.address.point !== null"
class="address_details_map"
ref="map_div"
></div>
<p>
Voir sur
<a :href="makeUrlGoogleMap(props.address)" target="_blank">Google Maps</a>
<a :href="makeUrlOsm(props.address)" target="_blank">OSM</a>
</p>
</template>
<script lang="ts" setup>
@@ -25,11 +22,11 @@ import L, { LatLngExpression, LatLngTuple } from "leaflet";
import { Address, Point } from "../../../../types";
const lonLatForLeaflet = (point: Point): LatLngTuple => {
return [point.coordinates[1], point.coordinates[0]];
return [point.coordinates[1], point.coordinates[0]];
};
export interface MapProps {
address: Address;
address: Address;
}
const props = defineProps<MapProps>();
@@ -39,70 +36,70 @@ let map: L.Map | null = null;
let marker: L.Marker | null = null;
onMounted(() => {
if (map_div.value === null) {
// there is no map div when the address does not have any Point
return;
}
if (map_div.value === null) {
// there is no map div when the address does not have any Point
return;
}
if (props.address.point !== null) {
map = L.map(map_div.value);
map.setView(lonLatForLeaflet(props.address.point), 18);
if (props.address.point !== null) {
map = L.map(map_div.value);
map.setView(lonLatForLeaflet(props.address.point), 18);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);
const markerIcon = L.icon({
iconUrl: markerIconPng,
iconAnchor: [12, 41],
});
const markerIcon = L.icon({
iconUrl: markerIconPng,
iconAnchor: [12, 41],
});
marker = L.marker(lonLatForLeaflet(props.address.point), {
icon: markerIcon,
});
marker.addTo(map);
}
marker = L.marker(lonLatForLeaflet(props.address.point), {
icon: markerIcon,
});
marker.addTo(map);
}
});
const makeUrlGoogleMap = (address: Address): string => {
const params = new URLSearchParams();
params.append("api", "1");
if (address.point !== null && address.addressReference !== null) {
params.append(
"query",
`${address.point.coordinates[1]} ${address.point.coordinates[0]}`,
);
} else {
params.append("query", address.lines.join(", "));
}
const params = new URLSearchParams();
params.append("api", "1");
if (address.point !== null && address.addressReference !== null) {
params.append(
"query",
`${address.point.coordinates[1]} ${address.point.coordinates[0]}`,
);
} else {
params.append("query", address.lines.join(", "));
}
return `https://www.google.com/maps/search/?${params.toString()}`;
return `https://www.google.com/maps/search/?${params.toString()}`;
};
const makeUrlOsm = (address: Address): string => {
if (address.point !== null && address.addressReference !== null) {
const params = new URLSearchParams();
params.append("mlat", `${address.point.coordinates[1]}`);
params.append("mlon", `${address.point.coordinates[0]}`);
const hashParams = new URLSearchParams();
hashParams.append(
"map",
`18/${address.point.coordinates[1]}/${address.point.coordinates[0]}`,
);
return `https://www.openstreetmap.org/?${params.toString()}#${hashParams.toString()}`;
}
if (address.point !== null && address.addressReference !== null) {
const params = new URLSearchParams();
params.append("query", address.lines.join(", "));
params.append("mlat", `${address.point.coordinates[1]}`);
params.append("mlon", `${address.point.coordinates[0]}`);
const hashParams = new URLSearchParams();
hashParams.append(
"map",
`18/${address.point.coordinates[1]}/${address.point.coordinates[0]}`,
);
return `https://www.openstreetmap.org/search?${params.toString()}`;
return `https://www.openstreetmap.org/?${params.toString()}#${hashParams.toString()}`;
}
const params = new URLSearchParams();
params.append("query", address.lines.join(", "));
return `https://www.openstreetmap.org/search?${params.toString()}`;
};
</script>
<style scoped>
div.address_details_map {
height: 250px;
height: 250px;
}
</style>

262
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/Parts/AddressDetailsRefMatching.vue
View File

@@ -1,140 +1,124 @@
<template>
<template v-if="props.address.refStatus !== 'match'">
<div
v-if="
props.address.refStatus === 'to_review' ||
props.address.refStatus === 'reviewed'
"
:class="{
alert: true,
'alert-danger': props.address.refStatus === 'to_review',
'alert-warning': props.address.refStatus === 'reviewed',
}"
>
<p v-if="props.address.refStatus === 'to_review'">
<i class="fa fa-warning"></i> L'adresse de référence a été
modifiée.
</p>
<p v-if="props.address.refStatus === 'reviewed'">
L'adresse est conservée, mais diffère de l'adresse de référence.
</p>
<template v-if="props.address.refStatus !== 'match'">
<div
v-if="
props.address.refStatus === 'to_review' ||
props.address.refStatus === 'reviewed'
"
:class="{
alert: true,
'alert-danger': props.address.refStatus === 'to_review',
'alert-warning': props.address.refStatus === 'reviewed',
}"
>
<p v-if="props.address.refStatus === 'to_review'">
<i class="fa fa-warning"></i> L'adresse de référence a été modifiée.
</p>
<p v-if="props.address.refStatus === 'reviewed'">
L'adresse est conservée, mais diffère de l'adresse de référence.
</p>
<template
v-if="
props.address.addressReference.street !==
props.address.street ||
props.address.addressReference.streetNumber !==
props.address.streetNumber
"
<template
v-if="
props.address.addressReference.street !== props.address.street ||
props.address.addressReference.streetNumber !==
props.address.streetNumber
"
>
<template v-if="props.address.country.code === 'BE'">
<div class="difference">
<span class="old"
>{{ props.address.street }} {{ props.address.streetNumber }}</span
>
<template v-if="props.address.country.code === 'BE'">
<div class="difference">
<span class="old"
>{{ props.address.street }}
{{ props.address.streetNumber }}</span
>
<span class="new"
>{{ props.address.addressReference.street }}
{{
props.address.addressReference.streetNumber
}}</span
>
</div>
</template>
<template v-else>
<div class="difference">
<span class="old"
>{{ props.address.streetNumber }}
{{ props.address.street }}</span
>
<span class="new"
>{{ props.address.addressReference.streetNumber }}
{{ props.address.addressReference.street }}</span
>
</div>
</template>
</template>
<template
v-if="
props.address.addressReference.postcode.id !==
props.address.postcode.id
"
<span class="new"
>{{ props.address.addressReference.street }}
{{ props.address.addressReference.streetNumber }}</span
>
<div class="difference">
<span class="old"
>{{ props.address.postcode.code }}
{{ props.address.postcode.name }}</span
>
<span class="new"
>{{ props.address.addressReference.postcode.code }}
{{ props.address.addressReference.postcode.name }}</span
>
</div>
</template>
<template
v-if="
props.address.point !== null &&
(props.address.point.coordinates[0] !==
props.address.addressReference.point.coordinates[0] ||
props.address.point.coordinates[1] !==
props.address.addressReference.point.coordinates[1])
"
</div>
</template>
<template v-else>
<div class="difference">
<span class="old"
>{{ props.address.streetNumber }} {{ props.address.street }}</span
>
<div class="difference">
<span class="old"
>{{ props.address.point.coordinates[0] }}
{{ props.address.point.coordinates[1] }}</span
>
<span class="new"
>{{
props.address.addressReference.point.coordinates[0]
}}
{{
props.address.addressReference.point.coordinates[1]
}}</span
>
</div>
</template>
<span class="new"
>{{ props.address.addressReference.streetNumber }}
{{ props.address.addressReference.street }}</span
>
</div>
</template>
</template>
<ul class="record_actions">
<li v-if="props.address.refStatus === 'to_review'">
<button class="btn btn-sm btn-update" @click="applyUpdate">
Appliquer les modifications
</button>
</li>
<li v-if="props.address.refStatus === 'to_review'">
<button
class="btn btn-sm btn-primary"
@click="keepCurrentAddress"
>
Conserver
</button>
</li>
<li v-if="props.address.refStatus === 'reviewed'">
<button
class="btn btn-sm btn-primary"
@click="backToReview"
>
Ré-examiner
</button>
</li>
</ul>
<template
v-if="
props.address.addressReference.postcode.id !==
props.address.postcode.id
"
>
<div class="difference">
<span class="old"
>{{ props.address.postcode.code }}
{{ props.address.postcode.name }}</span
>
<span class="new"
>{{ props.address.addressReference.postcode.code }}
{{ props.address.addressReference.postcode.name }}</span
>
</div>
</template>
</template>
<template
v-if="
props.address.point !== null &&
(props.address.point.coordinates[0] !==
props.address.addressReference.point.coordinates[0] ||
props.address.point.coordinates[1] !==
props.address.addressReference.point.coordinates[1])
"
>
<div class="difference">
<span class="old"
>{{ props.address.point.coordinates[0] }}
{{ props.address.point.coordinates[1] }}</span
>
<span class="new"
>{{ props.address.addressReference.point.coordinates[0] }}
{{ props.address.addressReference.point.coordinates[1] }}</span
>
</div>
</template>
<ul class="record_actions">
<li v-if="props.address.refStatus === 'to_review'">
<button class="btn btn-sm btn-update" @click="applyUpdate">
Appliquer les modifications
</button>
</li>
<li v-if="props.address.refStatus === 'to_review'">
<button class="btn btn-sm btn-primary" @click="keepCurrentAddress">
Conserver
</button>
</li>
<li v-if="props.address.refStatus === 'reviewed'">
<button class="btn btn-sm btn-primary" @click="backToReview">
Ré-examiner
</button>
</li>
</ul>
</div>
</template>
</template>
<script lang="ts" setup>
import { Address } from "../../../../types";
import {
markAddressReviewed,
markAddressToReview,
syncAddressWithReference,
markAddressReviewed,
markAddressToReview,
syncAddressWithReference,
} from "../../../../lib/api/address";
export interface AddressDetailsRefMatchingProps {
address: Address;
address: Address;
}
const props = defineProps<AddressDetailsRefMatchingProps>();
@@ -142,38 +126,38 @@ const props = defineProps<AddressDetailsRefMatchingProps>();
const emit = defineEmits<(e: "update-address", value: Address) => void>();
const applyUpdate = async () => {
const new_address = await syncAddressWithReference(props.address);
const new_address = await syncAddressWithReference(props.address);
emit("update-address", new_address);
emit("update-address", new_address);
};
const keepCurrentAddress = async () => {
const new_address = await markAddressReviewed(props.address);
const new_address = await markAddressReviewed(props.address);
emit("update-address", new_address);
emit("update-address", new_address);
};
const backToReview = async () => {
const new_address = await markAddressToReview(props.address);
const new_address = await markAddressToReview(props.address);
emit("update-address", new_address);
emit("update-address", new_address);
};
</script>
<style scoped lang="scss">
.difference {
margin-bottom: 0.5rem;
margin-bottom: 0.5rem;
span {
display: block;
}
span {
display: block;
}
.old {
text-decoration: red line-through;
}
.new {
font-weight: bold;
color: green;
}
.old {
text-decoration: red line-through;
}
.new {
font-weight: bold;
color: green;
}
}
</style>

99
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/BadgeEntity.vue
View File

@@ -1,66 +1,63 @@
<template>
<span
v-if="props.entity.type === 'person'"
class="badge rounded-pill bg-person"
>
{{ trans(PERSON) }}
</span>
<span
v-if="props.entity.type === 'person'"
class="badge rounded-pill bg-person"
>
{{ trans(PERSON) }}
</span>
<span
v-if="props.entity.type === 'thirdparty'"
class="badge rounded-pill bg-thirdparty"
>
<template v-if="props.options.displayLong !== true">
{{ trans(THIRDPARTY) }}
</template>
<span
v-if="props.entity.type === 'thirdparty'"
class="badge rounded-pill bg-thirdparty"
>
<template v-if="props.options.displayLong !== true">
{{ trans(THIRDPARTY) }}
</template>
<i class="fa fa-fw fa-user" v-if="props.entity.kind === 'child'" />
<i
class="fa fa-fw fa-hospital-o"
v-else-if="props.entity.kind === 'company'"
/>
<i class="fa fa-fw fa-user-md" v-else />
<i class="fa fa-fw fa-user" v-if="props.entity.kind === 'child'" />
<i
class="fa fa-fw fa-hospital-o"
v-else-if="props.entity.kind === 'company'"
/>
<i class="fa fa-fw fa-user-md" v-else />
<template v-if="props.options.displayLong === true">
<span v-if="props.entity.kind === 'child'">{{
trans(THIRDPARTY_CONTACT_OF)
}}</span>
<span v-else-if="props.entity.kind === 'company'">{{
trans(THIRDPARTY_A_COMPANY)
}}</span>
<span v-else>{{ trans(THIRDPARTY_A_CONTACT) }}</span>
</template>
</span>
<template v-if="props.options.displayLong === true">
<span v-if="props.entity.kind === 'child'">{{
trans(THIRDPARTY_CONTACT_OF)
}}</span>
<span v-else-if="props.entity.kind === 'company'">{{
trans(THIRDPARTY_A_COMPANY)
}}</span>
<span v-else>{{ trans(THIRDPARTY_A_CONTACT) }}</span>
</template>
</span>
<span
v-if="props.entity.type === 'user'"
class="badge rounded-pill bg-user"
>
{{ trans(ACCEPTED_USERS) }}
</span>
<span v-if="props.entity.type === 'user'" class="badge rounded-pill bg-user">
{{ trans(ACCEPTED_USERS) }}
</span>
<span
v-if="props.entity.type === 'household'"
class="badge rounded-pill bg-user"
>
{{ trans(HOUSEHOLD) }}
</span>
<span
v-if="props.entity.type === 'household'"
class="badge rounded-pill bg-user"
>
{{ trans(HOUSEHOLD) }}
</span>
</template>
<script setup>
import {
trans,
HOUSEHOLD,
ACCEPTED_USERS,
THIRDPARTY_A_CONTACT,
THIRDPARTY_CONTACT_OF,
THIRDPARTY_A_COMPANY,
PERSON,
THIRDPARTY,
trans,
HOUSEHOLD,
ACCEPTED_USERS,
THIRDPARTY_A_CONTACT,
THIRDPARTY_CONTACT_OF,
THIRDPARTY_A_COMPANY,
PERSON,
THIRDPARTY,
} from "translator";
const props = defineProps({
options: Object,
entity: Object,
options: Object,
entity: Object,
});
</script>

136
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/CommentEditor/CommentEditor.vue
View File

@@ -4,9 +4,9 @@ import { Ckeditor } from "@ckeditor/ckeditor5-vue";
import { ClassicEditor } from "ckeditor5";
import classicEditorConfig from "ChillMainAssets/module/ckeditor5/editor_config";
import {
trans,
EDITOR_SWITCH_TO_SIMPLE,
EDITOR_SWITCH_TO_COMPLEX,
trans,
EDITOR_SWITCH_TO_SIMPLE,
EDITOR_SWITCH_TO_COMPLEX,
} from "translator";
const EDITOR_MODE_KEY = "editorMode";
@@ -16,107 +16,101 @@ const value = defineModel({ required: true });
const isSimple = computed(() => kind.value === "simple");
const toggleButtonClass = computed(() => {
return {
["toggle-button"]: true,
onEditor: !isSimple.value,
onSimple: isSimple.value,
};
return {
["toggle-button"]: true,
onEditor: !isSimple.value,
onSimple: isSimple.value,
};
});
const toggleEditor = () => {
let newValue;
let newValue;
newValue = kind.value === "simple" ? "rich" : "simple";
kind.value = "rich";
window.localStorage.setItem(EDITOR_MODE_KEY, newValue);
newValue = kind.value === "simple" ? "rich" : "simple";
kind.value = "rich";
window.localStorage.setItem(EDITOR_MODE_KEY, newValue);
window.dispatchEvent(new Event("toggleEditorKind"));
window.dispatchEvent(new Event("toggleEditorKind"));
};
const onKindChange = function (/* event: StorageEvent | Event */) {
const newValue = window.localStorage.getItem(EDITOR_MODE_KEY);
const newValue = window.localStorage.getItem(EDITOR_MODE_KEY);
if (null === newValue || !(newValue === "rich" || newValue === "simple")) {
throw "invalid new value: " + newValue;
}
if (null === newValue || !(newValue === "rich" || newValue === "simple")) {
throw "invalid new value: " + newValue;
}
if (kind.value !== newValue) {
kind.value = newValue;
}
if (kind.value !== newValue) {
kind.value = newValue;
}
};
onMounted(function () {
const storage = window.localStorage;
const savedKind = storage.getItem(EDITOR_MODE_KEY);
const storage = window.localStorage;
const savedKind = storage.getItem(EDITOR_MODE_KEY);
if (
null !== kind.value &&
(savedKind === "simple" || savedKind === "rich")
) {
kind.value = savedKind;
}
if (null !== kind.value && (savedKind === "simple" || savedKind === "rich")) {
kind.value = savedKind;
}
window.addEventListener("storage", onKindChange);
window.addEventListener("toggleEditorKind", onKindChange);
window.addEventListener("storage", onKindChange);
window.addEventListener("toggleEditorKind", onKindChange);
});
onUnmounted(function () {
window.removeEventListener("storage", onKindChange);
window.removeEventListener("toggleEditorKind", onKindChange);
window.removeEventListener("storage", onKindChange);
window.removeEventListener("toggleEditorKind", onKindChange);
});
</script>
<template>
<div>
<div v-if="'rich' === kind">
<Ckeditor
:editor="ClassicEditor"
:config="classicEditorConfig"
v-model="value"
/>
</div>
<div v-else>
<textarea
v-model="value"
class="form-control simple-editor"
></textarea>
</div>
<button :class="toggleButtonClass" type="button" @click="toggleEditor">
{{
isSimple
? trans(EDITOR_SWITCH_TO_COMPLEX)
: trans(EDITOR_SWITCH_TO_SIMPLE)
}}
</button>
<div>
<div v-if="'rich' === kind">
<Ckeditor
:editor="ClassicEditor"
:config="classicEditorConfig"
v-model="value"
/>
</div>
<div v-else>
<textarea v-model="value" class="form-control simple-editor"></textarea>
</div>
<button :class="toggleButtonClass" type="button" @click="toggleEditor">
{{
isSimple
? trans(EDITOR_SWITCH_TO_COMPLEX)
: trans(EDITOR_SWITCH_TO_SIMPLE)
}}
</button>
</div>
</template>
<style scoped lang="scss">
@import "ChillMainAssets/module/bootstrap/bootstrap";
.toggle-button {
background: white;
border: none;
padding: 0.15rem;
color: #069;
cursor: pointer;
background: white;
border: none;
padding: 0.15rem;
color: #069;
cursor: pointer;
@include media-breakpoint-up(md) {
&.onEditor {
position: relative;
left: 1rem;
top: -1.5rem;
}
&.onSimple {
position: relative;
top: -0.75rem;
left: 1rem;
}
@include media-breakpoint-up(md) {
&.onEditor {
position: relative;
left: 1rem;
top: -1.5rem;
}
&.onSimple {
position: relative;
top: -0.75rem;
left: 1rem;
}
}
}
.simple-editor {
min-height: 190px;
min-height: 190px;
}
</style>

52
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue
View File

@@ -1,40 +1,40 @@
<template>
<div class="confidential">
<div :class="{ blur: isBlurred }">
<slot name="confidential-content" />
</div>
<div class="toggle-container">
<i
class="fa toggle"
:class="toggleIcon"
aria-hidden="true"
@click="toggleBlur"
/>
</div>
<div class="confidential">
<div :class="{ blur: isBlurred }">
<slot name="confidential-content" />
</div>
<div class="toggle-container">
<i
class="fa toggle"
:class="toggleIcon"
aria-hidden="true"
@click="toggleBlur"
/>
</div>
</div>
</template>
<script>
export default {
name: "Confidential",
data() {
return {
isBlurred: true,
toggleIcon: "fa-eye",
};
},
methods: {
toggleBlur() {
console.log(this.positionBtnFar);
this.isBlurred = !this.isBlurred;
this.toggleIcon = this.isBlurred ? "fa-eye" : "fa-eye-slash";
},
name: "Confidential",
data() {
return {
isBlurred: true,
toggleIcon: "fa-eye",
};
},
methods: {
toggleBlur() {
console.log(this.positionBtnFar);
this.isBlurred = !this.isBlurred;
this.toggleIcon = this.isBlurred ? "fa-eye" : "fa-eye-slash";
},
},
};
</script>
<style scoped lang="scss">
.confidential {
align-content: center;
align-content: center;
}
</style>

218
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/AddressRenderBox.vue
View File

@@ -1,83 +1,77 @@
<template>
<component :is="component" class="chill-entity entity-address">
<component :is="component" class="address" :class="multiline">
<div v-if="isConfidential">
<confidential :position-btn-far="true">
<template #confidential-content>
<div v-if="isMultiline === true">
<p
v-for="(l, i) in address.lines"
:key="`line-${i}`"
>
{{ l }}
</p>
<p v-if="showButtonDetails">
<address-details-button
:address_id="address.address_id"
:address_ref_status="address.refStatus"
/>
</p>
</div>
<div v-else>
<p v-if="'' !== address.text" class="street">
{{ address.text }}
</p>
<p
v-if="null !== address.postcode"
class="postcode"
>
{{ address.postcode.code }}
{{ address.postcode.name }}
</p>
<p v-if="null !== address.country" class="country">
{{ localizeString(address.country.name) }}
</p>
</div>
</template>
</confidential>
<component :is="component" class="chill-entity entity-address">
<component :is="component" class="address" :class="multiline">
<div v-if="isConfidential">
<confidential :position-btn-far="true">
<template #confidential-content>
<div v-if="isMultiline === true">
<p v-for="(l, i) in address.lines" :key="`line-${i}`">
{{ l }}
</p>
<p v-if="showButtonDetails">
<address-details-button
:address_id="address.address_id"
:address_ref_status="address.refStatus"
/>
</p>
</div>
<div v-else>
<p v-if="'' !== address.text" class="street">
{{ address.text }}
</p>
<p v-if="null !== address.postcode" class="postcode">
{{ address.postcode.code }}
{{ address.postcode.name }}
</p>
<p v-if="null !== address.country" class="country">
{{ localizeString(address.country.name) }}
</p>
</div>
</template>
</confidential>
</div>
<div v-if="!isConfidential">
<div v-if="isMultiline === true">
<p v-for="(l, i) in address.lines" :key="`line-${i}`">
{{ l }}
</p>
<p v-if="showButtonDetails">
<address-details-button
:address_id="address.address_id"
:address_ref_status="address.refStatus"
/>
</p>
</div>
<div v-else>
<p v-if="address.text" class="street">
{{ address.text }}
<template v-if="showButtonDetails">
<address-details-button
:address_id="address.address_id"
:address_ref_status="address.refStatus"
/>
</template>
</p>
</div>
</div>
</component>
<div v-if="useDatePane === true" class="address-more">
<div v-if="address.validFrom">
<span class="validFrom">
<b>{{ trans(ADDRESS_VALID_FROM) }}</b
>: {{ $d(address.validFrom.date) }}
</span>
</div>
<div v-if="address.validTo">
<span class="validTo">
<b>{{ trans(ADDRESS_VALID_TO) }}</b
>: {{ $d(address.validTo.date) }}
</span>
</div>
<div v-if="!isConfidential">
<div v-if="isMultiline === true">
<p v-for="(l, i) in address.lines" :key="`line-${i}`">
{{ l }}
</p>
<p v-if="showButtonDetails">
<address-details-button
:address_id="address.address_id"
:address_ref_status="address.refStatus"
/>
</p>
</div>
<div v-else>
<p v-if="address.text" class="street">
{{ address.text }}
<template v-if="showButtonDetails">
<address-details-button
:address_id="address.address_id"
:address_ref_status="address.refStatus"
/>
</template>
</p>
</div>
</div>
</component>
<div v-if="useDatePane === true" class="address-more">
<div v-if="address.validFrom">
<span class="validFrom">
<b>{{ trans(ADDRESS_VALID_FROM) }}</b
>: {{ $d(address.validFrom.date) }}
</span>
</div>
<div v-if="address.validTo">
<span class="validTo">
<b>{{ trans(ADDRESS_VALID_TO) }}</b
>: {{ $d(address.validTo.date) }}
</span>
</div>
</div>
</component>
</template>
<script>
@@ -87,51 +81,51 @@ import { trans, ADDRESS_VALID_FROM, ADDRESS_VALID_TO } from "translator";
import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
export default {
name: "AddressRenderBox",
methods: { localizeString },
components: {
Confidential,
AddressDetailsButton,
name: "AddressRenderBox",
methods: { localizeString },
components: {
Confidential,
AddressDetailsButton,
},
props: {
address: {
type: Object,
},
props: {
address: {
type: Object,
},
isMultiline: {
default: true,
type: Boolean,
},
useDatePane: {
default: false,
type: Boolean,
},
showButtonDetails: {
default: true,
type: Boolean,
},
isMultiline: {
default: true,
type: Boolean,
},
setup() {
return { trans, ADDRESS_VALID_FROM, ADDRESS_VALID_TO };
useDatePane: {
default: false,
type: Boolean,
},
computed: {
component() {
return this.isMultiline === true ? "div" : "span";
},
multiline() {
return this.isMultiline === true ? "multiline" : "";
},
isConfidential() {
return this.address.confidential;
},
showButtonDetails: {
default: true,
type: Boolean,
},
},
setup() {
return { trans, ADDRESS_VALID_FROM, ADDRESS_VALID_TO };
},
computed: {
component() {
return this.isMultiline === true ? "div" : "span";
},
multiline() {
return this.isMultiline === true ? "multiline" : "";
},
isConfidential() {
return this.address.confidential;
},
},
};
</script>
<style lang="scss" scoped>
p {
&:after {
content: " ";
margin-right: 0.3em;
}
&:after {
content: " ";
margin-right: 0.3em;
}
}
</style>

34
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/GenderIconRenderBox.vue
View File

@@ -1,28 +1,28 @@
<template>
<i :class="['fa', genderClass, 'px-1']" />
<i :class="['fa', genderClass, 'px-1']" />
</template>
<script setup>
import { computed } from "vue";
const props = defineProps({
gender: {
type: Object,
required: true,
},
gender: {
type: Object,
required: true,
},
});
const genderClass = computed(() => {
switch (props.gender.genderTranslation) {
case "woman":
return "fa-venus";
case "man":
return "fa-mars";
case "both":
return "fa-neuter";
case "unknown":
return "fa-genderless";
default:
return "fa-genderless";
}
switch (props.gender.genderTranslation) {
case "woman":
return "fa-venus";
case "man":
return "fa-mars";
case "both":
return "fa-neuter";
case "unknown":
return "fa-genderless";
default:
return "fa-genderless";
}
});
</script>

16
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/UserGroupRenderBox.vue
View File

@@ -4,23 +4,23 @@ import { computed } from "vue";
import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
interface UserGroupRenderBoxProps {
userGroup: UserGroup;
userGroup: UserGroup;
}
const props = defineProps<UserGroupRenderBoxProps>();
const styles = computed<{ color: string; "background-color": string }>(() => {
return {
color: props.userGroup.foregroundColor,
"background-color": props.userGroup.backgroundColor,
};
return {
color: props.userGroup.foregroundColor,
"background-color": props.userGroup.backgroundColor,
};
});
</script>
<template>
<span class="badge-user-group" :style="styles">{{
localizeString(userGroup.label)
}}</span>
<span class="badge-user-group" :style="styles">{{
localizeString(userGroup.label)
}}</span>
</template>
<style scoped lang="scss"></style>

42
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/UserRenderBoxBadge.vue
View File

@@ -1,31 +1,31 @@
<template>
<span class="chill-entity entity-user">
{{ user.label }}
<span class="user-job" v-if="user.user_job !== null">
({{ localizeString(user.user_job.label) }})</span
>
<span class="main-scope" v-if="user.main_scope !== null">
({{ localizeString(user.main_scope.name) }})</span
>
<span
v-if="user.isAbsent"
class="badge bg-danger rounded-pill"
:title="Absent"
>A</span
>
</span>
<span class="chill-entity entity-user">
{{ user.label }}
<span class="user-job" v-if="user.user_job !== null">
({{ localizeString(user.user_job.label) }})</span
>
<span class="main-scope" v-if="user.main_scope !== null">
({{ localizeString(user.main_scope.name) }})</span
>
<span
v-if="user.isAbsent"
class="badge bg-danger rounded-pill"
:title="Absent"
>A</span
>
</span>
</template>
<script>
import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
export default {
name: "UserRenderBoxBadge",
methods: {
localizeString(label) {
return localizeString(label);
},
name: "UserRenderBoxBadge",
methods: {
localizeString(label) {
return localizeString(label);
},
props: ["user"],
},
props: ["user"],
};
</script>

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

@@ -1,83 +1,83 @@
<template>
<div class="d-grid gap-2 my-3">
<button
class="btn btn-misc"
type="button"
v-if="!subscriberFinal"
@click="subscribeTo('subscribe', 'final')"
>
<i class="fa fa-check fa-fw"></i>
{{ trans(WORKFLOW_SUBSCRIBE_FINAL) }}
</button>
<button
class="btn btn-misc"
type="button"
v-if="subscriberFinal"
@click="subscribeTo('unsubscribe', 'final')"
>
<i class="fa fa-times fa-fw"></i>
{{ trans(WORKFLOW_UNSUBSCRIBE_FINAL) }}
</button>
<button
class="btn btn-misc"
type="button"
v-if="!subscriberStep"
@click="subscribeTo('subscribe', 'step')"
>
<i class="fa fa-check fa-fw"></i>
{{ trans(WORKFLOW_SUBSCRIBE_ALL_STEPS) }}
</button>
<button
class="btn btn-misc"
type="button"
v-if="subscriberStep"
@click="subscribeTo('unsubscribe', 'step')"
>
<i class="fa fa-times fa-fw"></i>
{{ trans(WORKFLOW_UNSUBSCRIBE_ALL_STEPS) }}
</button>
</div>
<div class="d-grid gap-2 my-3">
<button
class="btn btn-misc"
type="button"
v-if="!subscriberFinal"
@click="subscribeTo('subscribe', 'final')"
>
<i class="fa fa-check fa-fw"></i>
{{ trans(WORKFLOW_SUBSCRIBE_FINAL) }}
</button>
<button
class="btn btn-misc"
type="button"
v-if="subscriberFinal"
@click="subscribeTo('unsubscribe', 'final')"
>
<i class="fa fa-times fa-fw"></i>
{{ trans(WORKFLOW_UNSUBSCRIBE_FINAL) }}
</button>
<button
class="btn btn-misc"
type="button"
v-if="!subscriberStep"
@click="subscribeTo('subscribe', 'step')"
>
<i class="fa fa-check fa-fw"></i>
{{ trans(WORKFLOW_SUBSCRIBE_ALL_STEPS) }}
</button>
<button
class="btn btn-misc"
type="button"
v-if="subscriberStep"
@click="subscribeTo('unsubscribe', 'step')"
>
<i class="fa fa-times fa-fw"></i>
{{ trans(WORKFLOW_UNSUBSCRIBE_ALL_STEPS) }}
</button>
</div>
</template>
<script setup>
import { makeFetch } from "ChillMainAssets/lib/api/apiMethods.ts";
import { defineProps, defineEmits } from "vue";
import {
trans,
WORKFLOW_SUBSCRIBE_FINAL,
WORKFLOW_UNSUBSCRIBE_FINAL,
WORKFLOW_SUBSCRIBE_ALL_STEPS,
WORKFLOW_UNSUBSCRIBE_ALL_STEPS,
trans,
WORKFLOW_SUBSCRIBE_FINAL,
WORKFLOW_UNSUBSCRIBE_FINAL,
WORKFLOW_SUBSCRIBE_ALL_STEPS,
WORKFLOW_UNSUBSCRIBE_ALL_STEPS,
} from "translator";
// props
const props = defineProps({
entityWorkflowId: {
type: Number,
required: true,
},
subscriberStep: {
type: Boolean,
required: true,
},
subscriberFinal: {
type: Boolean,
required: true,
},
entityWorkflowId: {
type: Number,
required: true,
},
subscriberStep: {
type: Boolean,
required: true,
},
subscriberFinal: {
type: Boolean,
required: true,
},
});
//methods
const subscribeTo = (step, to) => {
let params = new URLSearchParams();
params.set("subscribe", to);
let params = new URLSearchParams();
params.set("subscribe", to);
const url =
`/api/1.0/main/workflow/${props.entityWorkflowId}/${step}?` +
params.toString();
const url =
`/api/1.0/main/workflow/${props.entityWorkflowId}/${step}?` +
params.toString();
makeFetch("POST", url).then((response) => {
emit("subscriptionUpdated", response);
});
makeFetch("POST", url).then((response) => {
emit("subscriptionUpdated", response);
});
};
// emit

209
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflow.vue
View File

@@ -1,143 +1,138 @@
<template>
<div class="flex-table workflow" id="workflow-list">
<div
v-for="(w, i) in props.workflows"
:key="`workflow-${i}`"
class="item-bloc"
>
<div>
<div class="item-row col">
<h2>{{ w.title }}</h2>
<div class="flex-grow-1 ms-3 h3">
<div class="visually-hidden">
{{ w.relatedEntityClass }}
{{ w.relatedEntityId }}
</div>
</div>
</div>
<div class="breadcrumb">
<template v-for="(step, j) in w.steps" :key="`step-${j}`">
<span
class="mx-2"
tabindex="0"
data-bs-trigger="focus hover"
data-bs-toggle="popover"
data-bs-placement="bottom"
data-bs-custom-class="workflow-transition"
:title="getPopTitle(step)"
:data-bs-content="getPopContent(step)"
>
<i
v-if="step.currentStep.name === 'initial'"
class="fa fa-circle me-1 text-chill-yellow"
>
</i>
<i
v-if="step.isFreezed"
class="fa fa-snowflake-o fa-sm me-1"
>
</i>
{{ step.currentStep.text }}
</span>
<span v-if="j !== Object.keys(w.steps).length - 1">
→
</span>
</template>
</div>
<span
v-if="w.isOnHoldAtCurrentStep"
class="badge bg-success rounded-pill"
>{{ trans(WORKFLOW_ON_HOLD) }}</span
>
</div>
<div class="item-row">
<div class="item-col flex-grow-1">
<p v-if="isUserSubscribedToStep(w)">
<i class="fa fa-check fa-fw"></i>
{{ trans(WORKFLOW_YOU_SUBSCRIBED_TO_ALL_STEPS) }}
</p>
<p v-if="isUserSubscribedToFinal(w)">
<i class="fa fa-check fa-fw"></i>
{{ trans(WORKFLOW_YOU_SUBSCRIBED_TO_FINAL_STEP) }}
</p>
</div>
<div class="item-col">
<ul class="record_actions">
<li>
<a
:href="goToUrl(w)"
class="btn btn-sm btn-show"
:title="trans(SEE)"
></a>
</li>
</ul>
</div>
<div class="flex-table workflow" id="workflow-list">
<div
v-for="(w, i) in props.workflows"
:key="`workflow-${i}`"
class="item-bloc"
>
<div>
<div class="item-row col">
<h2>{{ w.title }}</h2>
<div class="flex-grow-1 ms-3 h3">
<div class="visually-hidden">
{{ w.relatedEntityClass }}
{{ w.relatedEntityId }}
</div>
</div>
</div>
<div class="breadcrumb">
<template v-for="(step, j) in w.steps" :key="`step-${j}`">
<span
class="mx-2"
tabindex="0"
data-bs-trigger="focus hover"
data-bs-toggle="popover"
data-bs-placement="bottom"
data-bs-custom-class="workflow-transition"
:title="getPopTitle(step)"
:data-bs-content="getPopContent(step)"
>
<i
v-if="step.currentStep.name === 'initial'"
class="fa fa-circle me-1 text-chill-yellow"
>
</i>
<i v-if="step.isFreezed" class="fa fa-snowflake-o fa-sm me-1">
</i>
{{ step.currentStep.text }}
</span>
<span v-if="j !== Object.keys(w.steps).length - 1"> → </span>
</template>
</div>
<span
v-if="w.isOnHoldAtCurrentStep"
class="badge bg-success rounded-pill"
>{{ trans(WORKFLOW_ON_HOLD) }}</span
>
</div>
<div class="item-row">
<div class="item-col flex-grow-1">
<p v-if="isUserSubscribedToStep(w)">
<i class="fa fa-check fa-fw"></i>
{{ trans(WORKFLOW_YOU_SUBSCRIBED_TO_ALL_STEPS) }}
</p>
<p v-if="isUserSubscribedToFinal(w)">
<i class="fa fa-check fa-fw"></i>
{{ trans(WORKFLOW_YOU_SUBSCRIBED_TO_FINAL_STEP) }}
</p>
</div>
<div class="item-col">
<ul class="record_actions">
<li>
<a
:href="goToUrl(w)"
class="btn btn-sm btn-show"
:title="trans(SEE)"
></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script setup>
import Popover from "bootstrap/js/src/popover";
import { onMounted } from "vue";
import {
trans,
BY_USER,
SEE,
WORKFLOW_YOU_SUBSCRIBED_TO_ALL_STEPS,
WORKFLOW_YOU_SUBSCRIBED_TO_FINAL_STEP,
WORKFLOW_ON_HOLD,
WORKFLOW_AT,
trans,
BY_USER,
SEE,
WORKFLOW_YOU_SUBSCRIBED_TO_ALL_STEPS,
WORKFLOW_YOU_SUBSCRIBED_TO_FINAL_STEP,
WORKFLOW_ON_HOLD,
WORKFLOW_AT,
} from "translator";
// props
const props = defineProps({
workflows: {
type: Array,
required: true,
},
workflows: {
type: Array,
required: true,
},
});
// methods
const goToUrl = (w) => `/fr/main/workflow/${w.id}/show`;
const getPopTitle = (step) => {
if (step.transitionPrevious != null) {
//console.log(step.transitionPrevious.text);
let freezed = step.isFreezed
? `<i class="fa fa-snowflake-o fa-sm me-1"></i>`
: ``;
return `${freezed}${step.transitionPrevious.text}`;
}
if (step.transitionPrevious != null) {
//console.log(step.transitionPrevious.text);
let freezed = step.isFreezed
? `<i class="fa fa-snowflake-o fa-sm me-1"></i>`
: ``;
return `${freezed}${step.transitionPrevious.text}`;
}
};
const getPopContent = (step) => {
if (step.transitionPrevious != null) {
if (step.transitionPreviousBy !== null) {
return `<ul class="small_in_title">
if (step.transitionPrevious != null) {
if (step.transitionPreviousBy !== null) {
return `<ul class="small_in_title">
<li><span class="item-key">${trans(BY_USER)} : </span><b>${step.transitionPreviousBy.text}</b></li>
<li><span class="item-key">${trans(WORKFLOW_AT)} : </span><b>${formatDate(step.transitionPreviousAt.datetime)}</b></li>
</ul>`;
} else {
return `<ul class="small_in_title">
} else {
return `<ul class="small_in_title">
<li><span class="item-key">${trans(WORKFLOW_AT)} : </span><b>${formatDate(step.transitionPreviousAt.datetime)}</b></li>
</ul>`;
}
}
}
};
const formatDate = (datetime) =>
datetime.split("T")[0] + " " + datetime.split("T")[1].substring(0, 5);
datetime.split("T")[0] + " " + datetime.split("T")[1].substring(0, 5);
const isUserSubscribedToStep = () => false;
const isUserSubscribedToFinal = () => false;
onMounted(() => {
const triggerList = [].slice.call(
document.querySelectorAll('[data-bs-toggle="popover"]'),
);
triggerList.map(function (el) {
return new Popover(el, {
html: true,
});
const triggerList = [].slice.call(
document.querySelectorAll('[data-bs-toggle="popover"]'),
);
triggerList.map(function (el) {
return new Popover(el, {
html: true,
});
});
});
</script>

142
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflowModal.vue
View File

@@ -1,49 +1,45 @@
<template>
<Pick-workflow
:relatedEntityClass="props.relatedEntityClass"
:relatedEntityId="props.relatedEntityId"
:workflowsAvailables="props.workflowsAvailables"
:preventDefaultMoveToGenerate="props.preventDefaultMoveToGenerate"
:goToGenerateWorkflowPayload="props.goToGenerateWorkflowPayload"
:countExistingWorkflows="countWorkflows"
:embedded-within-list-modal="false"
@go-to-generate-workflow="goToGenerateWorkflow"
@click-open-list="openModal"
></Pick-workflow>
<Pick-workflow
:relatedEntityClass="props.relatedEntityClass"
:relatedEntityId="props.relatedEntityId"
:workflowsAvailables="props.workflowsAvailables"
:preventDefaultMoveToGenerate="props.preventDefaultMoveToGenerate"
:goToGenerateWorkflowPayload="props.goToGenerateWorkflowPayload"
:countExistingWorkflows="countWorkflows"
:embedded-within-list-modal="false"
@go-to-generate-workflow="goToGenerateWorkflow"
@click-open-list="openModal"
></Pick-workflow>
<teleport to="body">
<Modal
v-if="modal.showModal"
:modalDialogClass="modal.modalDialogClass"
@close="modal.showModal = false"
>
<template v-slot:header>
<h2 class="modal-title">{{ trans(WORKFLOW_LIST) }}</h2>
</template>
<teleport to="body">
<Modal
v-if="modal.showModal"
:modalDialogClass="modal.modalDialogClass"
@close="modal.showModal = false"
>
<template v-slot:header>
<h2 class="modal-title">{{ trans(WORKFLOW_LIST) }}</h2>
</template>
<template v-slot:body>
<list-workflow-vue :workflows="workflows"></list-workflow-vue>
</template>
<template v-slot:body>
<list-workflow-vue :workflows="workflows"></list-workflow-vue>
</template>
<template v-slot:footer>
<pick-workflow
v-if="allowCreate"
:relatedEntityClass="props.relatedEntityClass"
:relatedEntityId="props.relatedEntityId"
:workflowsAvailables="props.workflowsAvailables"
:preventDefaultMoveToGenerate="
props.preventDefaultMoveToGenerate
"
:goToGenerateWorkflowPayload="
props.goToGenerateWorkflowPayload
"
:countExistingWorkflows="countWorkflows"
:embedded-within-list-modal="true"
@go-to-generate-workflow="goToGenerateWorkflow"
></pick-workflow>
</template>
</Modal>
</teleport>
<template v-slot:footer>
<pick-workflow
v-if="allowCreate"
:relatedEntityClass="props.relatedEntityClass"
:relatedEntityId="props.relatedEntityId"
:workflowsAvailables="props.workflowsAvailables"
:preventDefaultMoveToGenerate="props.preventDefaultMoveToGenerate"
:goToGenerateWorkflowPayload="props.goToGenerateWorkflowPayload"
:countExistingWorkflows="countWorkflows"
:embedded-within-list-modal="true"
@go-to-generate-workflow="goToGenerateWorkflow"
></pick-workflow>
</template>
</Modal>
</teleport>
</template>
<script setup>
@@ -55,35 +51,35 @@ import { trans, WORKFLOW_LIST } from "translator";
// Define props
const props = defineProps({
workflows: {
type: Array,
required: true,
},
allowCreate: {
type: Boolean,
required: true,
},
relatedEntityClass: {
type: String,
required: true,
},
relatedEntityId: {
type: Number,
required: false,
},
workflowsAvailables: {
type: Array,
required: true,
},
preventDefaultMoveToGenerate: {
type: Boolean,
required: false,
default: false,
},
goToGenerateWorkflowPayload: {
required: false,
default: () => ({}),
},
workflows: {
type: Array,
required: true,
},
allowCreate: {
type: Boolean,
required: true,
},
relatedEntityClass: {
type: String,
required: true,
},
relatedEntityId: {
type: Number,
required: false,
},
workflowsAvailables: {
type: Array,
required: true,
},
preventDefaultMoveToGenerate: {
type: Boolean,
required: false,
default: false,
},
goToGenerateWorkflowPayload: {
required: false,
default: () => ({}),
},
});
// Define emits
@@ -91,8 +87,8 @@ const emit = defineEmits(["goToGenerateWorkflow"]);
// Reactive data
const modal = ref({
showModal: false,
modalDialogClass: "modal-dialog-scrollable modal-xl",
showModal: false,
modalDialogClass: "modal-dialog-scrollable modal-xl",
});
// Computed properties

277
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/PickWorkflow.vue
View File

@@ -1,89 +1,82 @@
<template>
<template v-if="props.workflowsAvailables.length >= 1">
<div
v-if="countExistingWorkflows == 0 || embeddedWithinListModal"
class="dropdown d-grid gap-2"
<template v-if="props.workflowsAvailables.length >= 1">
<div
v-if="countExistingWorkflows == 0 || embeddedWithinListModal"
class="dropdown d-grid gap-2"
>
<button
class="btn btn-primary dropdown-toggle"
type="button"
id="createWorkflowButton"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Créer un workflow
</button>
<ul class="dropdown-menu" aria-labelledby="createWorkflowButton">
<li v-for="w in props.workflowsAvailables" :key="w.name">
<button
class="dropdown-item"
type="button"
@click.prevent="goToGenerateWorkflow($event, w.name)"
>
{{ w.text }}
</button>
</li>
</ul>
</div>
<div v-else>
<div class="btn-group">
<button @click="emit('clickOpenList')" class="btn btn-primary">
<template v-if="countExistingWorkflows === 1">
1 workflow associé
</template>
<template v-else>
{{ countExistingWorkflows }} workflows associés
</template>
</button>
<button
class="btn btn-primary dropdown-toggle dropdown-toggle-split"
type="button"
id="createWorkflowButton"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<span class="visually-hidden">Liste des workflows disponibles</span>
</button>
<ul class="dropdown-menu" aria-labelledby="createWorkflowButton">
<li v-for="w in props.workflowsAvailables" :key="w.name">
<button
class="btn btn-primary dropdown-toggle"
type="button"
id="createWorkflowButton"
data-bs-toggle="dropdown"
aria-expanded="false"
class="dropdown-item"
type="button"
@click.prevent="goToGenerateWorkflow($event, w.name)"
>
Créer un workflow
{{ w.text }}
</button>
<ul class="dropdown-menu" aria-labelledby="createWorkflowButton">
<li v-for="w in props.workflowsAvailables" :key="w.name">
<button
class="dropdown-item"
type="button"
@click.prevent="goToGenerateWorkflow($event, w.name)"
>
{{ w.text }}
</button>
</li>
</ul>
</div>
<div v-else>
<div class="btn-group">
<button @click="emit('clickOpenList')" class="btn btn-primary">
<template v-if="countExistingWorkflows === 1">
1 workflow associé
</template>
<template v-else>
{{ countExistingWorkflows }} workflows associés
</template>
</button>
<button
class="btn btn-primary dropdown-toggle dropdown-toggle-split"
type="button"
id="createWorkflowButton"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<span class="visually-hidden"
>Liste des workflows disponibles</span
>
</button>
<ul
class="dropdown-menu"
aria-labelledby="createWorkflowButton"
>
<li v-for="w in props.workflowsAvailables" :key="w.name">
<button
class="dropdown-item"
type="button"
@click.prevent="
goToGenerateWorkflow($event, w.name)
"
>
{{ w.text }}
</button>
</li>
</ul>
</div>
</div>
</template>
<template v-else>
<div v-if="countExistingWorkflows > 0" class="dropdown d-grid gap-2">
<button
@click="emit('clickOpenList')"
class="btn btn-primary"
type="button"
id="createWorkflowButton"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<template v-if="countExistingWorkflows === 1">
1 workflow associé
</template>
<template v-else>
{{ countExistingWorkflows }} workflows associés
</template>
</button>
</div>
</template>
</li>
</ul>
</div>
</div>
</template>
<template v-else>
<div v-if="countExistingWorkflows > 0" class="dropdown d-grid gap-2">
<button
@click="emit('clickOpenList')"
class="btn btn-primary"
type="button"
id="createWorkflowButton"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<template v-if="countExistingWorkflows === 1">
1 workflow associé
</template>
<template v-else>
{{ countExistingWorkflows }} workflows associés
</template>
</button>
</div>
</template>
</template>
<script setup lang="ts">
@@ -91,85 +84,85 @@ import { buildLinkCreate } from "../../../lib/entity-workflow/api";
import { WorkflowAvailable } from "../../../types";
interface PickWorkflowConfig {
relatedEntityClass: string;
/**
* Represents the identifier of a related entity.
* This variable can store either a numerical value representing the entity's ID or an undefined value
* if the related entity is not specified or available, for instance when the entity is created within
* the interface and the id will be available later
*/
relatedEntityId: number | undefined;
workflowsAvailables: WorkflowAvailable[];
preventDefaultMoveToGenerate: boolean;
goToGenerateWorkflowPayload: object;
countExistingWorkflows: number;
/**
* if true, this button will not present a splitted button
*/
embeddedWithinListModal: boolean;
relatedEntityClass: string;
/**
* Represents the identifier of a related entity.
* This variable can store either a numerical value representing the entity's ID or an undefined value
* if the related entity is not specified or available, for instance when the entity is created within
* the interface and the id will be available later
*/
relatedEntityId: number | undefined;
workflowsAvailables: WorkflowAvailable[];
preventDefaultMoveToGenerate: boolean;
goToGenerateWorkflowPayload: object;
countExistingWorkflows: number;
/**
* if true, this button will not present a splitted button
*/
embeddedWithinListModal: boolean;
}
const props = withDefaults(defineProps<PickWorkflowConfig>(), {
preventDefaultMoveToGenerate: false,
goToGenerateWorkflowPayload: {},
allowCreateWorkflow: false,
preventDefaultMoveToGenerate: false,
goToGenerateWorkflowPayload: {},
allowCreateWorkflow: false,
});
const emit = defineEmits<{
(
e: "goToGenerateWorkflow",
{
event: MouseEvent,
workflowName: string,
isLinkValid: boolean,
link: string,
payload: object,
},
): void;
(e: "clickOpenList"): void;
(
e: "goToGenerateWorkflow",
{
event: MouseEvent,
workflowName: string,
isLinkValid: boolean,
link: string,
payload: object,
},
): void;
(e: "clickOpenList"): void;
}>();
const makeLink = (workflowName: string): string =>
buildLinkCreate(
workflowName,
props.relatedEntityClass,
props.relatedEntityId,
);
buildLinkCreate(
workflowName,
props.relatedEntityClass,
props.relatedEntityId,
);
const goToGenerateWorkflow = (
event: MouseEvent,
workflowName: string,
event: MouseEvent,
workflowName: string,
): void => {
console.log("goToGenerateWorkflow", event, workflowName);
let link = "";
let isLinkValid = false;
console.log("goToGenerateWorkflow", event, workflowName);
let link = "";
let isLinkValid = false;
try {
link = makeLink(workflowName);
isLinkValid = true;
} catch (e) {
console.info(
"could not generate link to create workflow, maybe the relatedEntityId is not yet known",
e,
);
}
try {
link = makeLink(workflowName);
isLinkValid = true;
} catch (e) {
console.info(
"could not generate link to create workflow, maybe the relatedEntityId is not yet known",
e,
);
}
if (!props.preventDefaultMoveToGenerate) {
window.location.assign(link);
}
if (!props.preventDefaultMoveToGenerate) {
window.location.assign(link);
}
emit("goToGenerateWorkflow", {
event,
workflowName,
link,
isLinkValid,
payload: props.goToGenerateWorkflowPayload,
});
emit("goToGenerateWorkflow", {
event,
workflowName,
link,
isLinkValid,
payload: props.goToGenerateWorkflowPayload,
});
};
const goToDuplicateRelatedEntity = (
event: MouseEvent,
workflowName: string,
event: MouseEvent,
workflowName: string,
): void => {};
</script>

135
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue
View File

@@ -1,42 +1,39 @@
<template>
<transition name="modal">
<div class="modal-mask" v-if="show">
<!-- :: styles bootstrap :: -->
<div
class="modal fade show"
style="display: block"
aria-modal="true"
role="dialog"
>
<div class="modal-dialog" :class="modalDialogClass || {}">
<div class="modal-content">
<div class="modal-header">
<slot name="header"></slot>
<button class="close btn" @click="emits('close')">
<i class="fa fa-times" aria-hidden="true"></i>
</button>
</div>
<div class="modal-body">
<div class="body-head">
<slot name="body-head"></slot>
</div>
<slot name="body"></slot>
</div>
<div class="modal-footer" v-if="!hideFooter">
<button
class="btn btn-cancel"
@click="emits('close')"
>
{{ trans(MODAL_ACTION_CLOSE) }}
</button>
<slot name="footer"></slot>
</div>
</div>
</div>
<transition name="modal">
<div class="modal-mask" v-if="show">
<!-- :: styles bootstrap :: -->
<div
class="modal fade show"
style="display: block"
aria-modal="true"
role="dialog"
>
<div class="modal-dialog" :class="modalDialogClass || {}">
<div class="modal-content">
<div class="modal-header">
<slot name="header"></slot>
<button class="close btn" @click="emits('close')">
<i class="fa fa-times" aria-hidden="true"></i>
</button>
</div>
<!-- :: end styles bootstrap :: -->
<div class="modal-body">
<div class="body-head">
<slot name="body-head"></slot>
</div>
<slot name="body"></slot>
</div>
<div class="modal-footer" v-if="!hideFooter">
<button class="btn btn-cancel" @click="emits('close')">
{{ trans(MODAL_ACTION_CLOSE) }}
</button>
<slot name="footer"></slot>
</div>
</div>
</div>
</transition>
</div>
<!-- :: end styles bootstrap :: -->
</div>
</transition>
</template>
<script lang="ts" setup>
@@ -53,27 +50,27 @@ import { trans, MODAL_ACTION_CLOSE } from "translator";
import { defineProps } from "vue";
export interface ModalProps {
modalDialogClass: string;
hideFooter: boolean;
modalDialogClass: string;
hideFooter: boolean;
}
defineProps({
modalDialogClass: {
type: String,
default: "",
},
hideFooter: {
type: Boolean,
default: false,
},
show: {
type: Boolean,
default: true,
},
modalDialogClass: {
type: String,
default: "",
},
hideFooter: {
type: Boolean,
default: false,
},
show: {
type: Boolean,
default: true,
},
});
const emits = defineEmits<{
close: [];
close: [];
}>();
</script>
@@ -82,17 +79,17 @@ const emits = defineEmits<{
* This is a mask behind the modal.
*/
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.75);
transition: opacity 0.3s ease;
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.75);
transition: opacity 0.3s ease;
}
.modal-header .close {
border-top-right-radius: 0.3rem;
border-top-right-radius: 0.3rem;
}
/*
* The following styles are auto-applied to elements with
@@ -103,23 +100,23 @@ const emits = defineEmits<{
* these styles.
*/
.modal-enter {
opacity: 0;
opacity: 0;
}
.modal-leave-active {
opacity: 0;
opacity: 0;
}
.modal-enter .modal-container,
.modal-leave-active .modal-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
h3.modal-title {
font-size: 1.5rem;
font-weight: bold;
font-size: 1.5rem;
font-weight: bold;
}
div.modal-footer {
button:first-child {
margin-right: auto;
}
button:first-child {
margin-right: auto;
}
}
</style>

70
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadAllToggle.vue
View File

@@ -1,17 +1,17 @@
<template>
<div>
<button
v-if="idsMarkedAsRead.length === 0"
class="btn btn-primary"
type="button"
@click="markAllRead"
>
<i class="fa fa-sm fa-envelope-open-o"></i> Marquer tout comme lu
</button>
<button v-else class="btn btn-primary" type="button" @click="undo">
<i class="fa fa-sm fa-envelope-open-o"></i> Annuler
</button>
</div>
<div>
<button
v-if="idsMarkedAsRead.length === 0"
class="btn btn-primary"
type="button"
@click="markAllRead"
>
<i class="fa fa-sm fa-envelope-open-o"></i> Marquer tout comme lu
</button>
<button v-else class="btn btn-primary" type="button" @click="undo">
<i class="fa fa-sm fa-envelope-open-o"></i> Annuler
</button>
</div>
</template>
<script lang="ts" setup>
@@ -19,36 +19,36 @@ import { makeFetch } from "../../../lib/api/apiMethods";
import { ref } from "vue";
const emit = defineEmits<{
(e: "markAsRead", id: number): void;
(e: "markAsUnRead", id: number): void;
(e: "markAsRead", id: number): void;
(e: "markAsUnRead", id: number): void;
}>();
const idsMarkedAsRead = ref([] as number[]);
async function markAllRead() {
const ids: number[] = await makeFetch(
"POST",
`/api/1.0/main/notification/mark/allread`,
null,
);
for (let i of ids) {
idsMarkedAsRead.value.push(i);
emit("markAsRead", i);
}
const ids: number[] = await makeFetch(
"POST",
`/api/1.0/main/notification/mark/allread`,
null,
);
for (let i of ids) {
idsMarkedAsRead.value.push(i);
emit("markAsRead", i);
}
}
async function undo() {
const touched: number[] = await makeFetch(
"POST",
`/api/1.0/main/notification/mark/undoallread`,
idsMarkedAsRead.value,
);
while (idsMarkedAsRead.value.length > 0) {
idsMarkedAsRead.value.pop();
}
for (let t of touched) {
emit("markAsUnRead", t);
}
const touched: number[] = await makeFetch(
"POST",
`/api/1.0/main/notification/mark/undoallread`,
idsMarkedAsRead.value,
);
while (idsMarkedAsRead.value.length > 0) {
idsMarkedAsRead.value.pop();
}
for (let t of touched) {
emit("markAsUnRead", t);
}
}
</script>

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

@@ -1,96 +1,96 @@
<template>
<div
:class="{ 'btn-group btn-group-sm float-end': isButtonGroup }"
role="group"
aria-label="Notification actions"
<div
:class="{ 'btn-group btn-group-sm float-end': isButtonGroup }"
role="group"
aria-label="Notification actions"
>
<button
v-if="isRead"
class="btn"
:class="overrideClass"
type="button"
:title="trans(NOTIFICATION_MARK_AS_UNREAD)"
@click="markAsUnread"
>
<button
v-if="isRead"
class="btn"
:class="overrideClass"
type="button"
:title="trans(NOTIFICATION_MARK_AS_UNREAD)"
@click="markAsUnread"
>
<i class="fa fa-sm fa-envelope-o"></i>
<span v-if="!props.buttonNoText" class="ps-2">
{{ trans(NOTIFICATION_MARK_AS_UNREAD) }}
</span>
</button>
<i class="fa fa-sm fa-envelope-o"></i>
<span v-if="!props.buttonNoText" class="ps-2">
{{ trans(NOTIFICATION_MARK_AS_UNREAD) }}
</span>
</button>
<button
v-if="!isRead"
class="btn"
:class="overrideClass"
type="button"
:title="trans(NOTIFICATION_MARK_AS_READ)"
@click="markAsRead"
>
<i class="fa fa-sm fa-envelope-open-o"></i>
<span v-if="!buttonNoText" class="ps-2">
{{ trans(NOTIFICATION_MARK_AS_READ) }}
</span>
</button>
<button
v-if="!isRead"
class="btn"
:class="overrideClass"
type="button"
:title="trans(NOTIFICATION_MARK_AS_READ)"
@click="markAsRead"
>
<i class="fa fa-sm fa-envelope-open-o"></i>
<span v-if="!buttonNoText" class="ps-2">
{{ trans(NOTIFICATION_MARK_AS_READ) }}
</span>
</button>
<a
v-if="isButtonGroup"
type="button"
class="btn btn-outline-primary"
:href="showUrl"
:title="trans(SEE)"
>
<i class="fa fa-sm fa-comment-o"></i>
</a>
<a
v-if="isButtonGroup"
type="button"
class="btn btn-outline-primary"
:href="showUrl"
:title="trans(SEE)"
>
<i class="fa fa-sm fa-comment-o"></i>
</a>
<!-- "Mark All Read" button -->
<button
v-if="showMarkAllButton"
class="btn"
:class="overrideClass"
type="button"
:title="$t('markAllRead')"
@click="markAllRead"
>
<i class="fa fa-sm fa-envelope-o"></i>
<span v-if="!buttonNoText" class="ps-2">
{{ $t("markAllRead") }}
</span>
</button>
</div>
<!-- "Mark All Read" button -->
<button
v-if="showMarkAllButton"
class="btn"
:class="overrideClass"
type="button"
:title="$t('markAllRead')"
@click="markAllRead"
>
<i class="fa fa-sm fa-envelope-o"></i>
<span v-if="!buttonNoText" class="ps-2">
{{ $t("markAllRead") }}
</span>
</button>
</div>
</template>
<script setup>
import { computed } from "vue";
import { makeFetch } from "ChillMainAssets/lib/api/apiMethods.ts";
import {
trans,
NOTIFICATION_MARK_AS_READ,
NOTIFICATION_MARK_AS_UNREAD,
SEE,
trans,
NOTIFICATION_MARK_AS_READ,
NOTIFICATION_MARK_AS_UNREAD,
SEE,
} from "translator";
// Props
const props = defineProps({
isRead: {
type: Boolean,
required: true,
},
notificationId: {
type: Number,
required: true,
},
buttonClass: {
type: String,
required: false,
},
buttonNoText: {
type: Boolean,
required: false,
},
showUrl: {
type: String,
required: false,
},
isRead: {
type: Boolean,
required: true,
},
notificationId: {
type: Number,
required: true,
},
buttonClass: {
type: String,
required: false,
},
buttonNoText: {
type: Boolean,
required: false,
},
showUrl: {
type: String,
required: false,
},
});
// Emits
@@ -102,23 +102,23 @@ const isButtonGroup = computed(() => props.showUrl);
// Methods
const markAsUnread = () => {
makeFetch(
"POST",
`/api/1.0/main/notification/${props.notificationId}/mark/unread`,
[],
).then(() => {
emit("markRead", { notificationId: props.notificationId });
});
makeFetch(
"POST",
`/api/1.0/main/notification/${props.notificationId}/mark/unread`,
[],
).then(() => {
emit("markRead", { notificationId: props.notificationId });
});
};
const markAsRead = () => {
makeFetch(
"POST",
`/api/1.0/main/notification/${props.notificationId}/mark/read`,
[],
).then(() => {
emit("markUnread", { notificationId: props.notificationId });
});
makeFetch(
"POST",
`/api/1.0/main/notification/${props.notificationId}/mark/read`,
[],
).then(() => {
emit("markUnread", { notificationId: props.notificationId });
});
};
</script>

145
src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.ts
View File

@@ -2,87 +2,86 @@ import { createI18n } from "vue-i18n";
import datetimeFormats from "../i18n/datetimeFormats";
const messages = {
fr: {
action: {
actions: "Actions",
show: "Voir",
edit: "Modifier",
create: "Créer",
remove: "Enlever",
delete: "Supprimer",
save: "Enregistrer",
valid: "Valider",
valid_and_see: "Valider et voir",
add: "Ajouter",
show_modal: "Ouvrir une modale",
ok: "OK",
cancel: "Annuler",
close: "Fermer",
back: "Retour",
check_all: "cocher tout",
reset: "réinitialiser",
redirect: {
person: "Quitter la page et ouvrir la fiche de l'usager",
thirdparty: "Quitter la page et voir le tiers",
},
refresh: "Rafraîchir",
addContact: "Ajouter un contact",
},
nav: {
next: "Suivant",
previous: "Précédent",
top: "Haut",
bottom: "Bas",
},
renderbox: {
person: "Usager",
birthday: {
man: "Né le",
woman: "Née le",
neutral: "Né·e le",
unknown: "Né·e le",
},
deathdate: "Date de décès",
household_without_address: "Le ménage de l'usager est sans adresse",
no_data: "Aucune information renseignée",
type: {
thirdparty: "Tiers",
person: "Usager",
},
holder: "Titulaire",
years_old: "1 an | {n} an | {n} ans",
residential_address: "Adresse de résidence",
located_at: "réside chez",
},
fr: {
action: {
actions: "Actions",
show: "Voir",
edit: "Modifier",
create: "Créer",
remove: "Enlever",
delete: "Supprimer",
save: "Enregistrer",
valid: "Valider",
valid_and_see: "Valider et voir",
add: "Ajouter",
show_modal: "Ouvrir une modale",
ok: "OK",
cancel: "Annuler",
close: "Fermer",
back: "Retour",
check_all: "cocher tout",
reset: "réinitialiser",
redirect: {
person: "Quitter la page et ouvrir la fiche de l'usager",
thirdparty: "Quitter la page et voir le tiers",
},
refresh: "Rafraîchir",
addContact: "Ajouter un contact",
},
nav: {
next: "Suivant",
previous: "Précédent",
top: "Haut",
bottom: "Bas",
},
renderbox: {
person: "Usager",
birthday: {
man: "Né le",
woman: "Née le",
neutral: "Né·e le",
unknown: "Né·e le",
},
deathdate: "Date de décès",
household_without_address: "Le ménage de l'usager est sans adresse",
no_data: "Aucune information renseignée",
type: {
thirdparty: "Tiers",
person: "Usager",
},
holder: "Titulaire",
years_old: "1 an | {n} an | {n} ans",
residential_address: "Adresse de résidence",
located_at: "réside chez",
},
},
};
const _createI18n = (appMessages: any, legacy?: boolean) => {
Object.assign(messages.fr, appMessages.fr);
return createI18n({
legacy: typeof legacy === undefined ? true : legacy,
locale: "fr",
fallbackLocale: "fr",
// @ts-ignore
datetimeFormats,
messages,
});
Object.assign(messages.fr, appMessages.fr);
return createI18n({
legacy: typeof legacy === undefined ? true : legacy,
locale: "fr",
fallbackLocale: "fr",
// @ts-ignore
datetimeFormats,
messages,
});
};
export { _createI18n };
export const multiSelectMessages = {
fr: {
multiselect: {
placeholder: "Choisir",
tag_placeholder: "Créer un nouvel élément",
select_label: '"Entrée" ou cliquez pour sélectionner',
deselect_label: '"Entrée" ou cliquez pour désélectionner',
select_group_label:
'Appuyer sur "Entrée" pour sélectionner ce groupe',
deselect_group_label:
'Appuyer sur "Entrée" pour désélectionner ce groupe',
selected_label: "Sélectionné",
},
fr: {
multiselect: {
placeholder: "Choisir",
tag_placeholder: "Créer un nouvel élément",
select_label: '"Entrée" ou cliquez pour sélectionner',
deselect_label: '"Entrée" ou cliquez pour désélectionner',
select_group_label: 'Appuyer sur "Entrée" pour sélectionner ce groupe',
deselect_group_label:
'Appuyer sur "Entrée" pour désélectionner ce groupe',
selected_label: "Sélectionné",
},
},
};

48
src/Bundle/ChillMainBundle/Resources/public/vuejs/i18n/datetimeFormats.ts
View File

@@ -1,27 +1,27 @@
export default {
fr: {
short: {
year: "numeric",
month: "numeric",
day: "numeric",
},
text: {
year: "numeric",
month: "long",
day: "numeric",
},
long: {
year: "numeric",
month: "numeric",
day: "numeric",
hour: "numeric",
minute: "numeric",
hour12: false,
},
hoursOnly: {
hour: "numeric",
minute: "numeric",
hour12: false,
},
fr: {
short: {
year: "numeric",
month: "numeric",
day: "numeric",
},
text: {
year: "numeric",
month: "long",
day: "numeric",
},
long: {
year: "numeric",
month: "numeric",
day: "numeric",
hour: "numeric",
minute: "numeric",
hour12: false,
},
hoursOnly: {
hour: "numeric",
minute: "numeric",
hour12: false,
},
},
};