+
mm
@@ -31,29 +31,34 @@
-
-
diff --git a/src/components/EdgeCanvas.vue b/src/components/EdgeCanvas.vue
new file mode 100644
index 00000000..a0dbc503
--- /dev/null
+++ b/src/components/EdgeCanvas.vue
@@ -0,0 +1,217 @@
+
+
+
+
+ {{ photoUrl }}
+
+
+ {{ photographer.user.username }}
+
+
+ {{ designer.user.username }}
+
+
+
+
+
+
+
+
diff --git a/src/components/EdgeGallery.vue b/src/components/EdgeGallery.vue
new file mode 100644
index 00000000..b7f30e9b
--- /dev/null
+++ b/src/components/EdgeGallery.vue
@@ -0,0 +1,175 @@
+
+
+ Load more...
+ Load more...
+
+
+
+
+
+
diff --git a/src/components/EdgeLink.vue b/src/components/EdgeLink.vue
new file mode 100644
index 00000000..92338e90
--- /dev/null
+++ b/src/components/EdgeLink.vue
@@ -0,0 +1,36 @@
+
+
+
+ modification
+ {{ $t("Designer") }}:{{ designer }}
+ {{ $t("Photographer") }}:{{ photographer }}
+
+
+
+
+
diff --git a/src/components/FormColorInputRow.vue b/src/components/FormColorInputRow.vue
new file mode 100644
index 00000000..e7d77c4b
--- /dev/null
+++ b/src/components/FormColorInputRow.vue
@@ -0,0 +1,249 @@
+
+
+
+
+ {{ $t("Re-use") }}
+
+
+
+
+
+ {{ $t("Colors used in other steps") }}
+
+
+ {{ $t("Colors used in other edges") }}
+
+
+
+ {{ $t("Step") }} {{ stepNumber }}
+
+
+
+
{{ $t("From photo") }}
+
+
+
+
+
diff --git a/src/components/FormInputRow.vue b/src/components/FormInputRow.vue
new file mode 100644
index 00000000..c40e5dbb
--- /dev/null
+++ b/src/components/FormInputRow.vue
@@ -0,0 +1,139 @@
+
+
+
+ {{ label }}
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/components/Gallery.vue b/src/components/Gallery.vue
similarity index 52%
rename from components/Gallery.vue
rename to src/components/Gallery.vue
index aa342f0e..38734a44 100644
--- a/components/Gallery.vue
+++ b/src/components/Gallery.vue
@@ -1,5 +1,7 @@
- {{ $t('Loading...') }}
+ {{ $t("Loading...") }}
+
@@ -21,13 +23,13 @@
}"
/>
-
{{ $t('No item in this section.') }}
+ {{ $t("No item in this section.") }}
{{ $t('Upload new') }} {{ $t("Upload new") }}
@@ -35,7 +37,7 @@
v-if="allowUpload"
href="javascript:void(0)"
@click="showUploadModal = !showUploadModal"
- >{{ $t('Upload new') }}{{ $t("Upload new") }}
-
-
+
-
-
diff --git a/src/components/IssueSelect.vue b/src/components/IssueSelect.vue
new file mode 100644
index 00000000..1b6b429c
--- /dev/null
+++ b/src/components/IssueSelect.vue
@@ -0,0 +1,257 @@
+
+
+
+
+ {{
+ $t("Select a country")
+ }}
+
+
+
+
+ {{ $t("Loading...") }}
+
+
+
+
+
+ {{
+ $t("Select an issue number")
+ }}
+
+
+
+
+ {{
+ $t("Edit a single edge")
+ }}
+ {{
+ $t("Edit a range of edges (e.g. issues 1 to 3)")
+ }}
+
+
+
+
+
+
+
+
diff --git a/src/components/ModelEdit.vue b/src/components/ModelEdit.vue
new file mode 100644
index 00000000..8c6e3877
--- /dev/null
+++ b/src/components/ModelEdit.vue
@@ -0,0 +1,437 @@
+
+
+
+
+
+
+ {{
+ $t(
+ rendersStore.supportedRenders.find(
+ (render) => render.component === components[stepNumber],
+ )?.labelL10nKey || "",
+ )
+ }}
+
+
+
+
+
+
+
+ {{
+ $t(
+ "You can use special text parts to make your text dynamic :",
+ )
+ }}
+
+
+
+ [Numero]
+
+
+
+
+ [Numero[0]]
+
+
+ [Numero[1]]
+
+
+
+
+
+ {{
+ $t("Search")
+ }} {{ $t("Reset position and size") }}
+
+
+
+
+
+ {{
+ $t(
+ editingStepStore.issuenumbers.length === 1
+ ? "Fill the edge with this image"
+ : "Split this image to fit all selected edges",
+ )
+ }}
+
+
+
+
+
+
+
+
+
+
+ {{ $t("Move and resize the staples directly on the edge.") }}
+
+
+
+
+
+
+
+ {{ $t(render.description) }}
+
+
+
+
+
+
+
+
+
diff --git a/components/MultipleTargetOptions.vue b/src/components/MultipleTargetOptions.vue
similarity index 61%
rename from components/MultipleTargetOptions.vue
rename to src/components/MultipleTargetOptions.vue
index 9e8e9c64..652ccf05 100644
--- a/components/MultipleTargetOptions.vue
+++ b/src/components/MultipleTargetOptions.vue
@@ -1,31 +1,19 @@
-
-
diff --git a/components/PositionHelper.vue b/src/components/PositionHelper.vue
similarity index 52%
rename from components/PositionHelper.vue
rename to src/components/PositionHelper.vue
index cc7a4f57..5c72fb71 100644
--- a/components/PositionHelper.vue
+++ b/src/components/PositionHelper.vue
@@ -5,17 +5,8 @@
-
-
-
diff --git a/src/components/PublishedEdge.vue b/src/components/PublishedEdge.vue
new file mode 100644
index 00000000..76a5f075
--- /dev/null
+++ b/src/components/PublishedEdge.vue
@@ -0,0 +1,28 @@
+
+
+
+
diff --git a/src/components/SaveModelButton.vue b/src/components/SaveModelButton.vue
new file mode 100644
index 00000000..a7219438
--- /dev/null
+++ b/src/components/SaveModelButton.vue
@@ -0,0 +1,316 @@
+
+
+
+
+
+
+
+
+ {{
+ $t(
+ "Once your edge is ready, indicate the photographers and the designers of the edge. " +
+ 'When you click "Submit", the edge will be sent to an administrator for validation ' +
+ "before it is published on DucksManager",
+ )
+ }}
+
+
{{ $t(ucFirst(userContributionEnL10n[contributionType])) }}
+
{{ $t("You should select at least one user") }}
+
+
+ {{ contributor.username }}
+
+
+
+
+
+
+
+
diff --git a/src/components/SessionInfo.vue b/src/components/SessionInfo.vue
new file mode 100644
index 00000000..c23b3fd8
--- /dev/null
+++ b/src/components/SessionInfo.vue
@@ -0,0 +1,43 @@
+
+
+
+ {{ username }}
+
+
+ {{ name }}
+
+
+
+
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
new file mode 100644
index 00000000..031eb74d
--- /dev/null
+++ b/src/components/TopBar.vue
@@ -0,0 +1,361 @@
+
+
+
+
+
+ {{ $t("Options") }}
+
+
+
+
+
+ {{ $t("Zoom") }}: {{ uiStore.zoom }}
+
+
+
+
+ {{
+ $t("Show issue numbers")
+ }}
+
+
+
+ {{
+ $t("Show previous edge")
+ }}
+
+
+
+ {{
+ $t("Show next edge")
+ }}
+
+
+
+ {{
+ $t("Show edge photos")
+ }}
+
+
+
+ {{
+ $t("Show edge overflow")
+ }}
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ $t("to") }}
+ {{ mainStore.issuenumbers[mainStore.issuenumbers.length - 1] }}
+
+ , {{ otherIssuenumber }}
+
+
+
+
+ {{ $t("Multiple-edge modification") }}
+
+ {{
+ $t(
+ "If you want your changes to be applied to a single edge, click on its issue number.",
+ )
+ }}
+
+
+ {{
+ $t(
+ "If you want to add an edge to the list of edges to apply changes on, click on its issue number while maintaining the Shift key pressed.",
+ )
+ }}
+
+
+ {{
+ $t(
+ "If you want to apply your changes to all the edges at the same time, double-click on any issue number.",
+ )
+ }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ $t("Clone") }}
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Upload.vue b/src/components/Upload.vue
new file mode 100644
index 00000000..cf287eae
--- /dev/null
+++ b/src/components/Upload.vue
@@ -0,0 +1,112 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/components/from-dm/Issue.vue b/src/components/from-dm/Issue.vue
new file mode 100644
index 00000000..860d24e5
--- /dev/null
+++ b/src/components/from-dm/Issue.vue
@@ -0,0 +1,58 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/from-dm/Medal.vue b/src/components/from-dm/Medal.vue
new file mode 100644
index 00000000..63d3c54a
--- /dev/null
+++ b/src/components/from-dm/Medal.vue
@@ -0,0 +1,216 @@
+
+
+
+
+ {{ medalTitle }}
+
+
+
+
+
+
+
diff --git a/src/components/from-dm/MedalProgress.vue b/src/components/from-dm/MedalProgress.vue
new file mode 100644
index 00000000..0fb8113c
--- /dev/null
+++ b/src/components/from-dm/MedalProgress.vue
@@ -0,0 +1,94 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/from-dm/Publication.vue b/src/components/from-dm/Publication.vue
new file mode 100644
index 00000000..3df109e4
--- /dev/null
+++ b/src/components/from-dm/Publication.vue
@@ -0,0 +1,34 @@
+
+
+ {{ publicationname }}
+
+
+
+
+
+
diff --git a/src/components/from-dm/UploadableEdgesCarousel.vue b/src/components/from-dm/UploadableEdgesCarousel.vue
new file mode 100644
index 00000000..54c892c8
--- /dev/null
+++ b/src/components/from-dm/UploadableEdgesCarousel.vue
@@ -0,0 +1,74 @@
+
+
+
+
+
+
+
diff --git a/src/components/renders/ArcCircleRender.vue b/src/components/renders/ArcCircleRender.vue
new file mode 100644
index 00000000..9f3909c2
--- /dev/null
+++ b/src/components/renders/ArcCircleRender.vue
@@ -0,0 +1,65 @@
+
+
+
+ {{ options }}
+
+
+
+
diff --git a/src/components/renders/FillRender.vue b/src/components/renders/FillRender.vue
new file mode 100644
index 00000000..7d623378
--- /dev/null
+++ b/src/components/renders/FillRender.vue
@@ -0,0 +1,29 @@
+
+
+ {{ options }}
+
+
+
+
diff --git a/src/components/renders/GradientRender.vue b/src/components/renders/GradientRender.vue
new file mode 100644
index 00000000..fd71687e
--- /dev/null
+++ b/src/components/renders/GradientRender.vue
@@ -0,0 +1,67 @@
+
+
+
+
+
+
+
+ {{ options }}
+
+
+
+
+
diff --git a/src/components/renders/ImageRender.vue b/src/components/renders/ImageRender.vue
new file mode 100644
index 00000000..e16064a5
--- /dev/null
+++ b/src/components/renders/ImageRender.vue
@@ -0,0 +1,89 @@
+
+
+
+
+ {{ options }}
+
+
+
+
+
+
+
diff --git a/src/components/renders/PolygonRender.vue b/src/components/renders/PolygonRender.vue
new file mode 100644
index 00000000..64cc3f1d
--- /dev/null
+++ b/src/components/renders/PolygonRender.vue
@@ -0,0 +1,87 @@
+
+
+ {{ options }}
+
+
+
+
diff --git a/src/components/renders/RectangleRender.vue b/src/components/renders/RectangleRender.vue
new file mode 100644
index 00000000..62eec428
--- /dev/null
+++ b/src/components/renders/RectangleRender.vue
@@ -0,0 +1,46 @@
+
+
+ {{ options }}
+
+
+
+
diff --git a/src/components/renders/StapleRender.vue b/src/components/renders/StapleRender.vue
new file mode 100644
index 00000000..065ec563
--- /dev/null
+++ b/src/components/renders/StapleRender.vue
@@ -0,0 +1,110 @@
+
+
+ {{ options }}
+
+
+
+
+
+
+
+
diff --git a/src/components/renders/TextRender.vue b/src/components/renders/TextRender.vue
new file mode 100644
index 00000000..37d60fd6
--- /dev/null
+++ b/src/components/renders/TextRender.vue
@@ -0,0 +1,299 @@
+
+
+
+
+ {{ options }}
+
+
+
+
+
+
+
diff --git a/src/composables/useBase64Legacy.ts b/src/composables/useBase64Legacy.ts
new file mode 100644
index 00000000..14b80e00
--- /dev/null
+++ b/src/composables/useBase64Legacy.ts
@@ -0,0 +1,39 @@
+export interface ImageMetadata {
+ base64: string | undefined;
+ width: number | null;
+ height: number | null;
+}
+export default () => {
+ const image = ref(null as ImageMetadata | null);
+ const loadImage = (
+ src: string,
+ callback: (img: HTMLImageElement) => void,
+ ) => {
+ const img = new Image();
+ img.crossOrigin = "Anonymous";
+ img.onload = () => {
+ const canvas: HTMLCanvasElement = document.createElement("canvas");
+ const ctx: CanvasRenderingContext2D | null = canvas.getContext("2d");
+ canvas.height = img.naturalHeight;
+ canvas.width = img.naturalWidth;
+ ctx!.drawImage(img, 0, 0);
+ image.value = {
+ base64: canvas.toDataURL("png"),
+ width: img.naturalWidth,
+ height: img.naturalHeight,
+ };
+ callback(img);
+ };
+ img.onerror = (e) => {
+ console.error(
+ `Base64 image could not be retrieved : ${src} : ${JSON.stringify({
+ e,
+ })}`,
+ );
+ image.value = { base64: undefined, width: null, height: null };
+ };
+ img.src = src;
+ };
+
+ return { image, loadImage };
+};
diff --git a/src/composables/useCondition.ts b/src/composables/useCondition.ts
new file mode 100644
index 00000000..f91bfcfc
--- /dev/null
+++ b/src/composables/useCondition.ts
@@ -0,0 +1,70 @@
+import { useI18n } from "vue-i18n";
+
+enum issue_condition {
+ mauvais = "mauvais",
+ moyen = "moyen",
+ bon = "bon",
+ indefini = "indefini",
+}
+
+export default function () {
+ const { t: $t } = useI18n();
+ interface Condition {
+ value: issue_condition | null;
+ dbValue: string | null;
+ color: string;
+ text: string;
+ label: string;
+ labelContextMenu: string;
+ }
+ const conditions: Condition[] = [
+ {
+ value: null,
+ dbValue: null,
+ color: "black",
+ text: $t("Non possédé"),
+ label: $t("Non possédé"),
+ labelContextMenu: $t("Marquer comme non possédé(s)"),
+ },
+ {
+ value: issue_condition.indefini,
+ dbValue: issue_condition.indefini.toString(),
+ color: "#808080",
+ text: $t("Indéfini"),
+ label: $t("En état indéfini"),
+ labelContextMenu: $t("Marquer comme possédé(s)"),
+ },
+ {
+ value: issue_condition.mauvais,
+ dbValue: issue_condition.mauvais.toString(),
+ color: "red",
+ text: $t("Mauvais"),
+ label: $t("En mauvais état"),
+ labelContextMenu: $t("Marquer comme en mauvais état"),
+ },
+ {
+ value: issue_condition.moyen,
+ dbValue: issue_condition.moyen.toString(),
+ color: "orange",
+ text: $t("Moyen"),
+ label: $t("En moyen état"),
+ labelContextMenu: $t("Marquer comme en état moyen"),
+ },
+ {
+ value: issue_condition.bon,
+ dbValue: issue_condition.bon.toString(),
+ color: "#2CA77B",
+ text: $t("Bon"),
+ label: $t("En bon état"),
+ labelContextMenu: $t("Marquer comme en bon état"),
+ },
+ ];
+ return {
+ issue_condition,
+ conditions,
+ getConditionLabel: (givenDbValue: string) =>
+ conditions.find(
+ ({ dbValue }) => givenDbValue.toUpperCase() === dbValue?.toUpperCase(),
+ )?.label ?? conditions.find(({ dbValue }) => dbValue === null)!.label,
+ };
+}
diff --git a/src/composables/useLegacyDb.ts b/src/composables/useLegacyDb.ts
new file mode 100644
index 00000000..3d7665d5
--- /dev/null
+++ b/src/composables/useLegacyDb.ts
@@ -0,0 +1,265 @@
+import { api } from "~/stores/api";
+import { EdgeDimensions } from "~/types/EdgeDimensions";
+import { LegacyComponent } from "~/types/LegacyComponent";
+import { StepOptions } from "~/types/StepOptions";
+
+import { call } from "../../axios-helper";
+
+const { resolveIssueNumberTemplate } = useTextTemplate();
+
+const componentToHex = (c: number) => {
+ const hex = c.toString(16);
+ return hex.length === 1 ? "0" + hex : hex;
+};
+const rgbToHex = (color: string) => {
+ if (!color.includes(",")) {
+ return `#${color}`;
+ }
+ const [r, g, b] = color.split(/, ?/).map((component) => parseInt(component));
+ return `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`;
+};
+
+export default () => {
+ const getImageSize = (url: string): Promise =>
+ new Promise((resolve, reject) => {
+ const img = new Image();
+ img.src = url;
+ img.onload = function () {
+ resolve({ width: img.width, height: img.height });
+ };
+ img.onerror = reject;
+ });
+ const validateOptions = (optionNames: string[], options: StepOptions) => {
+ for (const requiredOption of optionNames) {
+ if (options![requiredOption] === undefined) {
+ throw new Error("Required option not found: " + requiredOption);
+ }
+ }
+ };
+ const getOptionsFromDb = async (
+ publicationcode: string,
+ issuenumber: string,
+ stepNumber: number,
+ { component: targetComponent, options: dbOptions }: LegacyComponent,
+ edgeDimensions: EdgeDimensions,
+ calculateBase64 = true,
+ ) => {
+ switch (targetComponent) {
+ case "ArcCircle": {
+ validateOptions(
+ [
+ "Rempli",
+ "Pos_x_centre",
+ "Pos_y_centre",
+ "Largeur",
+ "Hauteur",
+ "Couleur",
+ ],
+ dbOptions,
+ );
+ const filled = dbOptions.Rempli === "Oui";
+
+ return {
+ component: targetComponent,
+ cx: dbOptions.Pos_x_centre,
+ cy: dbOptions.Pos_y_centre,
+ rx: dbOptions.Largeur / 2,
+ ry: dbOptions.Hauteur / 2,
+ fill: filled ? rgbToHex(dbOptions.Couleur) : "transparent",
+ stroke: filled ? "transparent" : rgbToHex(dbOptions.Couleur),
+ };
+ }
+ case "Fill": {
+ validateOptions(["Pos_x", "Pos_y", "Couleur"], dbOptions);
+ if (parseFloat(dbOptions.Pos_x) !== 0) {
+ console.error(
+ `Step ${stepNumber}: Pos_x !== 0, this is not supported`,
+ );
+ }
+ if (parseFloat(dbOptions.Pos_y) !== 0) {
+ console.error(
+ `Step ${stepNumber}: Pos_y !== 0, this is not supported`,
+ );
+ }
+ return {
+ component: targetComponent,
+ fill: rgbToHex(dbOptions.Couleur),
+ };
+ }
+ case "Gradient": {
+ validateOptions(
+ [
+ "Pos_x_debut",
+ "Pos_y_debut",
+ "Pos_x_fin",
+ "Pos_y_fin",
+ "Couleur_debut",
+ "Couleur_fin",
+ "Sens",
+ ],
+ dbOptions,
+ );
+ return {
+ component: targetComponent,
+ x: dbOptions.Pos_x_debut,
+ y: dbOptions.Pos_y_debut,
+ width: dbOptions.Pos_x_fin - dbOptions.Pos_x_debut,
+ height: dbOptions.Pos_y_fin - dbOptions.Pos_y_debut,
+ colorStart: rgbToHex(dbOptions.Couleur_debut),
+ colorEnd: rgbToHex(dbOptions.Couleur_fin),
+ direction: dbOptions.Sens,
+ };
+ }
+ case "Image": {
+ const [country] = publicationcode.split("/");
+ validateOptions(
+ [
+ "Source",
+ "Position",
+ "Decalage_x",
+ "Decalage_y",
+ "Compression_x",
+ "Compression_y",
+ ],
+ dbOptions,
+ );
+ try {
+ const elementPath = `${country}/elements/${resolveIssueNumberTemplate(
+ dbOptions.Source,
+ issuenumber,
+ )}`;
+
+ const image = calculateBase64
+ ? (
+ await call(
+ api().edgeCreatorApi,
+ new GET__fs__base64({
+ query: {
+ targetUrl: elementPath,
+ },
+ }),
+ )
+ ).data
+ : { dimensions: await getImageSize(`/edges/${elementPath}`) };
+
+ const embeddedImageHeight =
+ edgeDimensions.width *
+ (image.dimensions.height / image.dimensions.width);
+ const fromBottom = dbOptions.Position === "bas";
+ return {
+ component: targetComponent,
+ src: dbOptions.Source,
+ x: dbOptions.Decalage_x || 0,
+ y: fromBottom
+ ? edgeDimensions.height -
+ embeddedImageHeight -
+ (dbOptions.Decalage_y || 0)
+ : dbOptions.Decalage_y || 0,
+ width: (dbOptions.Compression_x || 1) * edgeDimensions.width,
+ height: (dbOptions.Compression_y || 1) * embeddedImageHeight,
+ };
+ } catch (e) {
+ console.error(`Image could not be retrieved : ${dbOptions.Source}`);
+ return {
+ x: 0,
+ y: 0,
+ width: 20,
+ height: 20,
+ src: dbOptions.Source,
+ };
+ }
+ }
+ case "Polygon": {
+ validateOptions(["X", "Y", "Couleur"], dbOptions);
+ const x = dbOptions.X.split(",");
+ const y = dbOptions.Y.split(",");
+ return {
+ component: targetComponent,
+ points: x.map((x, i) => [x, y[i]].join(",")).join(";"),
+ fill: rgbToHex(dbOptions.Couleur),
+ };
+ }
+ case "Rectangle": {
+ validateOptions(
+ [
+ "Rempli",
+ "Pos_x_debut",
+ "Pos_y_debut",
+ "Pos_x_fin",
+ "Pos_y_fin",
+ "Couleur",
+ ],
+ dbOptions,
+ );
+ const xStart = parseFloat(dbOptions.Pos_x_debut);
+ const yStart = parseFloat(dbOptions.Pos_y_debut);
+ const xEnd = parseFloat(dbOptions.Pos_x_fin);
+ const yEnd = parseFloat(dbOptions.Pos_y_fin);
+ const filled = dbOptions.Rempli === "Oui";
+ return {
+ component: targetComponent,
+ x: xStart,
+ y: yStart,
+ width: xEnd - xStart,
+ height: yEnd - yStart,
+ fill: filled ? rgbToHex(dbOptions.Couleur) : "transparent",
+ stroke: filled ? "transparent" : rgbToHex(dbOptions.Couleur),
+ };
+ }
+ case "Staple": {
+ validateOptions(["Y1", "Y2", "Taille_agrafe"], dbOptions);
+ return {
+ component: targetComponent,
+ y1: dbOptions.Y1,
+ y2: dbOptions.Y2,
+ height: dbOptions.Taille_agrafe,
+ };
+ }
+ case "Text": {
+ validateOptions(
+ [
+ "Pos_x",
+ "Pos_y",
+ "Couleur_texte",
+ "Couleur_fond",
+ "Chaine",
+ "Largeur",
+ "Rotation",
+ "Demi_hauteur",
+ "Compression_x",
+ "Compression_y",
+ ],
+ dbOptions,
+ );
+ let legacyRotation = Math.round(parseFloat(dbOptions.Rotation));
+ if (legacyRotation < 0) {
+ legacyRotation += 360;
+ }
+ return {
+ component: targetComponent,
+ x: parseFloat(dbOptions.Pos_x),
+ y: parseFloat(dbOptions.Pos_y),
+ fgColor: rgbToHex(dbOptions.Couleur_texte),
+ bgColor: rgbToHex(dbOptions.Couleur_fond),
+ font: dbOptions.URL.replace(/\./g, "/"),
+ text: dbOptions.Chaine,
+ internalWidth: parseFloat(dbOptions.Largeur),
+ rotation: 360 - legacyRotation,
+ isHalfHeight: dbOptions.Demi_hauteur === "Oui",
+ widthCompression:
+ (dbOptions.Compression_x && parseFloat(dbOptions.Compression_x)) ||
+ 1,
+ heightCompression:
+ (dbOptions.Compression_y && parseFloat(dbOptions.Compression_y)) ||
+ 1,
+ };
+ }
+ }
+ };
+
+ return {
+ getImageSize,
+ validateOptions,
+ getOptionsFromDb,
+ };
+};
diff --git a/src/composables/useLocales.ts b/src/composables/useLocales.ts
new file mode 100644
index 00000000..0cb96c55
--- /dev/null
+++ b/src/composables/useLocales.ts
@@ -0,0 +1,22 @@
+export const availableLocales: {
+ key: string;
+ shortKey: string;
+ name: string;
+ flagName: string;
+}[] = [
+ {
+ key: "en-US",
+ shortKey: "en",
+ name: "English",
+ flagName: "uk",
+ },
+ {
+ key: "fr",
+ shortKey: "fr",
+ name: "Français",
+ flagName: "fr",
+ },
+];
+
+export const getCurrentLocaleShortKey = (locale: string): string =>
+ availableLocales.find(({ key }) => key === locale)?.shortKey ?? "en";
diff --git a/src/composables/useMedal.ts b/src/composables/useMedal.ts
new file mode 100644
index 00000000..e33d975b
--- /dev/null
+++ b/src/composables/useMedal.ts
@@ -0,0 +1,75 @@
+import { computed } from "vue";
+
+const MEDAL_LEVELS: Record> = {
+ edge_photographer: { 1: 50, 2: 150, 3: 600 },
+ edge_designer: { 1: 20, 2: 70, 3: 150 },
+ duckhunter: { 1: 1, 2: 3, 3: 15 },
+};
+
+const RADIUS = 42;
+
+export default function (contribution: string, userLevelPoints: number) {
+ const circumference = Math.PI * RADIUS * 2,
+ currentLevel = computed(() => {
+ const level = MEDAL_LEVELS[contribution];
+ const maxThresholdReached =
+ Object.values(level)
+ .filter((minimumPoints) => userLevelPoints >= minimumPoints)
+ .pop() ?? 0;
+ return (
+ Object.keys(level)
+ .map((key) => parseInt(key))
+ .find((key) => level[key] === maxThresholdReached) ?? 0
+ );
+ }),
+ currentLevelPoints = computed(
+ () => MEDAL_LEVELS[contribution][currentLevel.value] || 0,
+ ),
+ currentLevelThreshold = computed(() =>
+ currentLevel.value === 3
+ ? null
+ : MEDAL_LEVELS[contribution][currentLevel.value + 1],
+ ),
+ pointsDiffNextLevel = computed(() =>
+ currentLevel.value >= 3
+ ? null
+ : MEDAL_LEVELS[contribution][currentLevel.value + 1] - userLevelPoints,
+ ),
+ medalProgressCurrentPercentage = computed(() =>
+ currentLevelThreshold.value === null
+ ? 0
+ : (100 * (userLevelPoints - currentLevelPoints.value)) /
+ (currentLevelThreshold.value - currentLevelPoints.value),
+ ),
+ levelProgressPercentage = computed(() => {
+ if (pointsDiffNextLevel.value === null) {
+ return null;
+ }
+ const level = MEDAL_LEVELS[contribution];
+ const currentLevelThreshold =
+ currentLevel.value === 0 ? 0 : level[currentLevel.value];
+ const nextLevelThreshold = level[currentLevel.value + 1];
+
+ const levelProgress =
+ (userLevelPoints - currentLevelThreshold) /
+ (nextLevelThreshold - currentLevelThreshold) || 0.01;
+ return (1 - levelProgress) * circumference;
+ }),
+ getLevelProgressPercentage = (extraPoints: number) =>
+ currentLevelThreshold.value
+ ? 100 *
+ (extraPoints / currentLevelThreshold.value - currentLevelPoints.value)
+ : 0;
+
+ return {
+ radius: RADIUS,
+ circumference,
+ currentLevel,
+ currentLevelPoints,
+ currentLevelThreshold,
+ pointsDiffNextLevel,
+ medalProgressCurrentPercentage,
+ levelProgressPercentage,
+ getLevelProgressPercentage,
+ };
+}
diff --git a/src/composables/useModelLoad.ts b/src/composables/useModelLoad.ts
new file mode 100644
index 00000000..5c18933a
--- /dev/null
+++ b/src/composables/useModelLoad.ts
@@ -0,0 +1,316 @@
+import { api } from "~/stores/api";
+import { edgeCatalog } from "~/stores/edgeCatalog";
+import { main } from "~/stores/main";
+import { renders } from "~/stores/renders";
+import { optionObjectToArray, step } from "~/stores/step";
+import { users } from "~/stores/users";
+import { EdgeDimensions } from "~/types/EdgeDimensions";
+import { LegacyComponent } from "~/types/LegacyComponent";
+import { OptionNameAndValue } from "~/types/OptionNameAndValue";
+import { OptionValue } from "~/types/OptionValue";
+import { StepOptions } from "~/types/StepOptions";
+import {
+ GET__edgecreator__contributors__$modelId,
+ GET__edgecreator__model__$countrycode__$magazinecode__$issuenumber,
+ GET__edgecreator__model__$modelId__photo__main,
+} from "~dm_types/routes";
+
+import { call } from "../../axios-helper";
+
+const mainStore = main();
+const stepStore = step();
+const rendersStore = renders();
+const userStore = users();
+const edgeCatalogStore = edgeCatalog();
+
+const { getSvgMetadata, loadSvgFromString } = useSvgUtils();
+
+const { getOptionsFromDb } = useLegacyDb();
+
+export default () => {
+ const loadDimensionsFromSvg = (
+ issuenumber: string,
+ svgElement: SVGElement,
+ ) => {
+ stepStore.setDimensions(
+ {
+ width: parseInt(svgElement.getAttribute("width")!) / 1.5,
+ height: parseInt(svgElement.getAttribute("height")!) / 1.5,
+ },
+ { issuenumbers: [issuenumber] },
+ );
+ };
+ const loadStepsFromSvg = (
+ issuenumber: string,
+ svgChildNodes: SVGElement[],
+ ) => {
+ svgChildNodes
+ .filter(({ nodeName }) => nodeName === "g")
+ .forEach((group, stepNumber) => {
+ stepStore.setOptionValues(
+ [
+ {
+ optionName: "component",
+ optionValue: group.getAttribute("class")!,
+ },
+ ...optionObjectToArray(
+ JSON.parse(
+ group.getElementsByTagName("metadata")[0].textContent!,
+ ) as Record,
+ ),
+ ],
+ {
+ stepNumber,
+ issuenumbers: [issuenumber],
+ },
+ );
+ });
+ };
+
+ const setPhotoUrlsFromSvg = (
+ issuenumber: string,
+ svgChildNodes: SVGElement[],
+ ) => {
+ for (const photoUrl of getSvgMetadata(svgChildNodes, "photo")) {
+ mainStore.photoUrls[issuenumber] = photoUrl;
+ }
+ };
+
+ const setContributorsFromSvg = (
+ issuenumber: string,
+ svgChildNodes: SVGElement[],
+ ) => {
+ for (const contributionType of ["photographer", "designer"]) {
+ for (const username of getSvgMetadata(
+ svgChildNodes,
+ `contributor-${contributionType}`,
+ )) {
+ mainStore.addContributor({
+ issuenumber,
+ contributionType:
+ contributionType === "designer" ? "createur" : "photographe",
+ user: userStore.allUsers!.find((user) => user.username === username)!,
+ });
+ }
+ }
+ };
+
+ const loadDimensionsFromApi = (
+ issuenumber: string,
+ stepData: Record<
+ string,
+ {
+ issuenumber: string;
+ stepNumber: number;
+ functionName: string;
+ options: StepOptions;
+ }
+ >,
+ ) => {
+ const defaultDimensions: EdgeDimensions = { width: 15, height: 200 };
+ const dimensions = Object.values(stepData).find(
+ ({ stepNumber: originalStepNumber, issuenumber: currentIssuenumber }) =>
+ issuenumber === currentIssuenumber && originalStepNumber === -1,
+ )?.options;
+
+ const dimensionsToLoad = {
+ width: dimensions
+ ? parseInt(dimensions.Dimension_x as string)
+ : defaultDimensions.width,
+ height: dimensions
+ ? parseInt(dimensions.Dimension_y as string)
+ : defaultDimensions.height,
+ };
+ stepStore.setDimensions(dimensionsToLoad, { issuenumbers: [issuenumber] });
+ };
+ const loadStepsFromApi = async (
+ publicationcode: string,
+ issuenumber: string,
+ apiSteps: Record<
+ string,
+ {
+ stepNumber: number;
+ functionName: string;
+ options: StepOptions;
+ }
+ >,
+ calculateBase64: boolean,
+ onError: (error: string, stepNumber: number) => void,
+ ): Promise => {
+ const dimensions = stepStore.getFilteredDimensions({
+ issuenumbers: [issuenumber],
+ });
+ if (!dimensions.length) {
+ throw new Error("No dimensions");
+ }
+ const steps: OptionNameAndValue[][] = [];
+ let stepNumber = 0;
+ for (const {
+ stepNumber: originalStepNumber,
+ functionName: originalComponentName,
+ options: originalOptions,
+ } of Object.values(apiSteps).filter(
+ ({ stepNumber: originalStepNumber }) => originalStepNumber !== -1,
+ )) {
+ const { component } = rendersStore.supportedRenders.find(
+ (component) => component.originalName === originalComponentName,
+ ) ?? { component: null };
+ if (component) {
+ try {
+ stepStore.setOptionValues(
+ optionObjectToArray(
+ await getOptionsFromDb(
+ publicationcode,
+ issuenumber,
+ stepNumber,
+ {
+ component,
+ options: originalOptions,
+ } as LegacyComponent,
+ dimensions[0],
+ calculateBase64,
+ ),
+ ),
+ {
+ issuenumbers: [issuenumber],
+ stepNumber: stepNumber++,
+ },
+ );
+ } catch (e) {
+ onError(
+ `Invalid step ${originalStepNumber} (${component}) : ${
+ e as string
+ }, step will be ignored.`,
+ originalStepNumber,
+ );
+ }
+ } else {
+ onError(
+ `Unrecognized step name : ${originalComponentName}, step will be ignored.`,
+ originalStepNumber,
+ );
+ }
+ }
+ return steps;
+ };
+ const setContributorsFromApi = async (
+ issuenumber: string,
+ edgeId: number,
+ ) => {
+ const contributors = (
+ await call(
+ api().dmApi,
+ new GET__edgecreator__contributors__$modelId({
+ params: {
+ modelId: String(edgeId),
+ },
+ }),
+ )
+ ).data;
+ for (const { contribution, userId } of contributors) {
+ mainStore.addContributor({
+ issuenumber,
+ contributionType: contribution,
+ user: userStore.allUsers!.find((user) => user.id === userId)!,
+ });
+ }
+ };
+
+ const loadModel = async (
+ countrycode: string,
+ magazinecode: string,
+ issuenumber: string,
+ targetIssuenumber: string,
+ ) => {
+ const onlyLoadStepsAndDimensions = issuenumber !== targetIssuenumber;
+
+ const loadSvg = async (publishedVersion: boolean) => {
+ const { svgElement, svgChildNodes } = await loadSvgFromString(
+ countrycode,
+ magazinecode,
+ issuenumber,
+ new Date().toISOString(),
+ publishedVersion,
+ );
+
+ loadDimensionsFromSvg(issuenumber, svgElement);
+ loadStepsFromSvg(issuenumber, svgChildNodes);
+ if (!onlyLoadStepsAndDimensions) {
+ setPhotoUrlsFromSvg(issuenumber, svgChildNodes);
+ setContributorsFromSvg(issuenumber, svgChildNodes);
+ }
+ };
+
+ try {
+ await loadSvg(false);
+ } catch {
+ try {
+ await loadSvg(true);
+ } catch {
+ const publicationcode = `${countrycode}/${magazinecode}`;
+ const edge = (
+ await call(
+ api().dmApi,
+ new GET__edgecreator__model__$countrycode__$magazinecode__$issuenumber(
+ {
+ params: {
+ countrycode,
+ magazinecode,
+ issuenumber,
+ },
+ },
+ ),
+ )
+ ).data;
+ await edgeCatalogStore.getPublishedEdgesSteps({
+ publicationcode,
+ edgeModelIds: [edge.id],
+ });
+ const apiSteps =
+ edgeCatalogStore.publishedEdgesSteps[publicationcode][issuenumber];
+ loadDimensionsFromApi(issuenumber, apiSteps);
+ await loadStepsFromApi(
+ publicationcode,
+ issuenumber,
+ apiSteps,
+ true,
+ (error: string) => mainStore.addWarning(error),
+ );
+
+ if (!onlyLoadStepsAndDimensions) {
+ await setPhotoUrlsFromApi(issuenumber, edge.id);
+ await setContributorsFromApi(issuenumber, edge.id);
+ }
+ }
+ }
+ if (!stepStore.options.length) {
+ throw new Error(`No model found for issue ${issuenumber}`);
+ }
+ };
+
+ const setPhotoUrlsFromApi = async (issuenumber: string, edgeId: number) => {
+ const photo = (
+ await call(
+ api().dmApi,
+ new GET__edgecreator__model__$modelId__photo__main({
+ params: {
+ modelId: String(edgeId),
+ },
+ }),
+ )
+ ).data;
+ mainStore.photoUrls[issuenumber] = photo.fileName;
+ };
+
+ return {
+ loadDimensionsFromSvg,
+ loadStepsFromSvg,
+ setPhotoUrlsFromSvg,
+ setContributorsFromSvg,
+ loadDimensionsFromApi,
+ loadStepsFromApi,
+ setContributorsFromApi,
+ loadModel,
+ setPhotoUrlsFromApi,
+ };
+};
diff --git a/src/composables/useRedirect.ts b/src/composables/useRedirect.ts
new file mode 100644
index 00000000..38273bd6
--- /dev/null
+++ b/src/composables/useRedirect.ts
@@ -0,0 +1,31 @@
+import { useToast } from "bootstrap-vue-next";
+
+const route = useRoute();
+
+export default () => {
+ const toast = useToast();
+ return watch(
+ () => route.hash,
+ (newValue) => {
+ const toastError = (message: string) =>
+ toast!.show(
+ { body: message, title: "Error" },
+ {
+ delay: 3000,
+ autoHide: true,
+ },
+ );
+ switch (newValue) {
+ case "#401":
+ toastError("You are not logged in");
+ break;
+ case "#403":
+ toastError(
+ "You don't have enough rights to access the requested page",
+ );
+ break;
+ }
+ },
+ { immediate: true },
+ );
+};
diff --git a/src/composables/useSaveEdge.ts b/src/composables/useSaveEdge.ts
new file mode 100644
index 00000000..79430573
--- /dev/null
+++ b/src/composables/useSaveEdge.ts
@@ -0,0 +1,57 @@
+import { api } from "~/stores/api";
+import { ModelContributor } from "~types/ModelContributor";
+import { POST__fs__save } from "~types/routes";
+
+import { call } from "../../axios-helper";
+
+export default () => {
+ const removeVueMarkup = (element: HTMLElement) => {
+ Object.values(element.attributes || [])
+ .filter(
+ (attribute) =>
+ attribute.name.startsWith("data-v-") ||
+ attribute.name === "is-visible",
+ )
+ .forEach(({ name: attributeName }) =>
+ element.removeAttribute(attributeName),
+ );
+ for (const childNode of Object.values(element.childNodes)) {
+ removeVueMarkup(childNode as HTMLElement);
+ }
+ return element;
+ };
+ const saveEdgeSvg = async (
+ country: string,
+ magazine: string,
+ issuenumber: string,
+ contributors: ModelContributor[],
+ withExport = false,
+ withSubmit = false,
+ ) => {
+ const svgElementId = `edge-canvas-${issuenumber}`;
+ const cleanSvg = removeVueMarkup(
+ document.getElementById(svgElementId)!.cloneNode(true) as HTMLElement,
+ );
+ return (
+ await call(
+ api().edgeCreatorApi,
+ new POST__fs__save({
+ reqBody: {
+ runExport: withExport,
+ runSubmit: withSubmit,
+ country,
+ magazine,
+ issuenumber,
+ contributors,
+ content: cleanSvg.outerHTML,
+ },
+ }),
+ )
+ ).data;
+ };
+
+ return {
+ removeVueMarkup,
+ saveEdgeSvg,
+ };
+};
diff --git a/src/composables/useStepOptions.ts b/src/composables/useStepOptions.ts
new file mode 100644
index 00000000..bf89c340
--- /dev/null
+++ b/src/composables/useStepOptions.ts
@@ -0,0 +1,175 @@
+import { useToast } from "bootstrap-vue-next";
+import interact from "interactjs";
+import { useI18n } from "vue-i18n";
+
+import { step } from "~/stores/step";
+import { ui } from "~/stores/ui";
+import { BaseProps } from "~/types/StepOptionBaseProps";
+const uiStore = ui();
+const stepStore = step();
+
+// type Interactive = {
+// onmove: (params: { dx: number; dy: number }) => void;
+// onresizemove: (params: { rect: { width: number; height: number } }) => void;
+// };
+
+const shownTips: string[] = [];
+
+export const useStepOptions = (
+ props: BaseProps,
+ component: string,
+ attributeKeys: string[],
+) => {
+ const toast = useToast();
+ const { t } = useI18n();
+ const zoom = computed(() => uiStore.zoom);
+ const width = computed(
+ () =>
+ stepStore.getFilteredDimensions({
+ issuenumbers: [props.issuenumber],
+ })[0]!.width,
+ );
+ const height = computed(
+ () =>
+ stepStore.getFilteredDimensions({
+ issuenumbers: [props.issuenumber],
+ })[0]!.height,
+ );
+ const attributes = computed(() =>
+ Object.keys(props.options!)
+ .filter((optionKey) => attributeKeys.includes(optionKey))
+ .reduce(
+ (acc, optionKey) => ({
+ ...acc,
+ [optionKey]: props.options![optionKey],
+ }),
+ {},
+ ),
+ );
+
+ const showMoveResizeToast = (
+ type: string,
+ options?: { edges: { right: number; bottom: number } } | null,
+ ) => {
+ if (shownTips.includes(type)) {
+ return;
+ }
+ let text: string;
+ switch (type) {
+ case "move":
+ text = t(
+ `You can make your selection snap to the top left corner of the edge by holding Shift while you drag it`,
+ );
+ break;
+ case "resize":
+ text = t(
+ `You can make your selection match the {dimension} of the edge by holding Shift while you resize it`,
+ {
+ dimension: t(
+ options!.edges.bottom && options!.edges.right
+ ? "width and height"
+ : options!.edges.bottom
+ ? "height"
+ : "width",
+ ),
+ },
+ );
+ }
+ toast!.show(
+ {
+ body: text!,
+ title: t("Tip").toString(),
+ },
+ { pos: "top-center", noCloseButton: true, autoHide: true },
+ );
+ shownTips.push(type);
+ };
+ const isColorOption = (optionName: string) =>
+ optionName.toLowerCase().includes("color") ||
+ ["fill", "stroke"].includes(optionName);
+
+ type OnMoveParams = {
+ currentTarget: SVGElement | HTMLElement;
+ dx: number;
+ dy: number;
+ shiftKey: boolean;
+ };
+
+ type OnResizemoveParams = {
+ rect: { width: number; height: number };
+ shiftKey: boolean;
+ edges: { right: number; bottom: number };
+ };
+
+ const enableDragResize = (
+ element: HTMLElement | SVGElement,
+ callbacks: {
+ onmove?: null | ((params: OnMoveParams) => void);
+ onresizemove?: null | ((params: OnResizemoveParams) => void);
+ } = {
+ onmove: null,
+ onresizemove: null,
+ },
+ ) =>
+ interact(element)
+ .draggable({
+ onmove: (e: OnMoveParams) => {
+ document.body.classList.add("interacting");
+ if (callbacks.onmove) {
+ callbacks.onmove(e);
+ } else {
+ const { dx, dy, shiftKey } = e;
+ showMoveResizeToast("move");
+ if (shiftKey) {
+ stepStore.setOptionValues({
+ x: 0,
+ y: 0,
+ });
+ } else {
+ stepStore.setOptionValues({
+ x: (props.options!.x as number) + dx / uiStore.zoom,
+ y: (props.options!.y as number) + dy / uiStore.zoom,
+ });
+ }
+ }
+ },
+ onend: () => document.body.classList.remove("interacting"),
+ })
+ .resizable({
+ edges: { right: true, bottom: true },
+ })
+ .on("resizemove", (e: OnResizemoveParams) => {
+ document.body.classList.add("interacting");
+ if (callbacks.onresizemove) {
+ callbacks.onresizemove(e);
+ } else {
+ const { rect, shiftKey, edges } = e;
+ showMoveResizeToast("resize", { edges });
+ rect.width /= uiStore.zoom;
+ rect.height /= uiStore.zoom;
+ if (shiftKey) {
+ if (edges.bottom) {
+ rect.height = height.value;
+ }
+ if (edges.right) {
+ rect.width = width.value;
+ }
+ }
+ stepStore.setOptionValues(rect);
+ }
+ })
+
+ .on("resizeend", () => document.body.classList.remove("interacting"));
+
+ stepStore.setOptionValues(props.options!);
+
+ return {
+ zoom,
+ width,
+ height,
+ attributes,
+ showMoveResizeToast,
+ isColorOption,
+ enableDragResize,
+ };
+};
diff --git a/src/composables/useSurroundingEdge.ts b/src/composables/useSurroundingEdge.ts
new file mode 100644
index 00000000..2c5da5a4
--- /dev/null
+++ b/src/composables/useSurroundingEdge.ts
@@ -0,0 +1,26 @@
+import { main } from "~/stores/main";
+import { ui } from "~/stores/ui";
+
+const uiStore = ui();
+const mainStore = main();
+
+export default () => {
+ const showPreviousEdge = computed({
+ get: (): boolean | undefined =>
+ (uiStore.showPreviousEdge && mainStore.edgesBefore.length > 0) ||
+ undefined,
+ set: (value: boolean | undefined): void =>
+ uiStore.$patch({ showPreviousEdge: value }),
+ });
+ const showNextEdge = computed({
+ get: (): boolean | undefined =>
+ (uiStore.showNextEdge === true && mainStore.edgesAfter.length > 0) ||
+ undefined,
+ set: (value: boolean | undefined): void =>
+ uiStore.$patch({ showNextEdge: value }),
+ });
+ return {
+ showPreviousEdge,
+ showNextEdge,
+ };
+};
diff --git a/src/composables/useSvgUtils.ts b/src/composables/useSvgUtils.ts
new file mode 100644
index 00000000..260111a8
--- /dev/null
+++ b/src/composables/useSvgUtils.ts
@@ -0,0 +1,54 @@
+import axios from "axios";
+import { DOMParser } from "xmldom";
+
+export default () => {
+ const getSvgMetadata = (svgChildNodes: SVGElement[], metadataType: string) =>
+ svgChildNodes
+ .filter(
+ (node) =>
+ node.nodeName === "metadata" &&
+ node.attributes.getNamedItem("type")!.nodeValue === metadataType,
+ )
+ .map((metadataNode) => metadataNode.textContent!.trim());
+
+ const loadSvgFromString = async (
+ country: string,
+ magazine: string,
+ issuenumber: string,
+ mtime: string,
+ publishedVersion = false,
+ ) => {
+ const edgeUrl = getEdgeUrl(
+ country,
+ magazine,
+ issuenumber,
+ `svg?${mtime}`,
+ publishedVersion,
+ );
+ const svgString = (await axios.get(edgeUrl)).data as string;
+ if (!svgString) {
+ throw new Error(`No SVG found : ${edgeUrl}`);
+ }
+ const doc = new DOMParser().parseFromString(svgString, "image/svg+xml");
+ const svgElement = doc.getElementsByTagName("svg")[0];
+ const svgChildNodes = Object.values(svgElement.childNodes) as SVGElement[];
+
+ return { svgElement, svgChildNodes, country, magazine, issuenumber };
+ };
+ const getEdgeUrl = (
+ country: string,
+ magazine: string,
+ issuenumber: string,
+ extension: string,
+ publishedVersion: boolean,
+ ) =>
+ `${import.meta.env.VITE_EDGES_URL as string}/${country}/gen/${
+ publishedVersion ? "" : "_"
+ }${magazine}.${issuenumber}.${extension}`;
+
+ return {
+ getSvgMetadata,
+ loadSvgFromString,
+ getEdgeUrl,
+ };
+};
diff --git a/src/composables/useTextTemplate.ts b/src/composables/useTextTemplate.ts
new file mode 100644
index 00000000..a3ce1562
--- /dev/null
+++ b/src/composables/useTextTemplate.ts
@@ -0,0 +1,18 @@
+export default () => ({
+ resolveIssueNumberTemplate: (text: string, issuenumber: string) =>
+ !text ? text : text.replaceAll(/\[Numero]/g, issuenumber),
+
+ resolveIssueNumberPartTemplate: (text: string, issuenumber: string) =>
+ !text
+ ? text
+ : text.replaceAll(
+ /\[Numero\[(\d)]]/g,
+ (_match, digitIndex: number) => issuenumber[digitIndex],
+ ),
+ resolveHeightTemplate: (text: string, height: number) =>
+ !text
+ ? text
+ : text.replaceAll(/\[Hauteur]\*([.0-9]+)/g, (_match, coefficient) =>
+ (height * coefficient).toString(),
+ ),
+});
diff --git a/src/i18n.ts b/src/i18n.ts
new file mode 100644
index 00000000..766306c2
--- /dev/null
+++ b/src/i18n.ts
@@ -0,0 +1,30 @@
+import { createI18n } from "vue-i18n";
+
+import fr from "../locales/fr-FR.json";
+
+const messages = {
+ "en-US": Object.keys(fr).reduce(
+ (acc, value) => ({ ...acc, [value]: value }),
+ {},
+ ),
+ fr,
+};
+
+const fallbackLocale = "en-US";
+let locale = localStorage.getItem("locale");
+if (!locale || !Object.keys(messages).includes(locale)) {
+ locale = fallbackLocale;
+ localStorage.setItem("locale", fallbackLocale);
+}
+const instance = createI18n({
+ locale,
+ fallbackLocale,
+ formatFallbackMessages: true,
+ silentTranslationWarn: true,
+ messages,
+ globalInjection: true,
+});
+
+export default instance;
+
+export const i18n = instance.global;
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
new file mode 100644
index 00000000..98240aef
--- /dev/null
+++ b/src/layouts/default.vue
@@ -0,0 +1,3 @@
+
+
diff --git a/src/main.ts b/src/main.ts
new file mode 100644
index 00000000..3e9e23eb
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1,36 @@
+import "bootstrap/dist/css/bootstrap.css";
+import "bootstrap-vue-next/dist/bootstrap-vue-next.css";
+import "vue3-simple-typeahead/dist/vue3-simple-typeahead.css"; //Optional default CSS
+
+import { createHead } from "@unhead/vue";
+import { BCarousel, BToastPlugin } from "bootstrap-vue-next";
+import { createPinia } from "pinia";
+import { setupLayouts } from "virtual:generated-layouts";
+import generatedRoutes from "virtual:generated-pages";
+import { createApp } from "vue";
+import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
+import SimpleTypeahead from "vue3-simple-typeahead";
+
+import App from "./App.vue";
+import i18n from "./i18n";
+const head = createHead();
+
+const routes = setupLayouts(generatedRoutes) as RouteRecordRaw[];
+const router = createRouter({
+ history: createWebHistory(),
+ routes,
+});
+
+const store = createPinia();
+
+const app = createApp(App);
+app.component("BCarousel", BCarousel);
+app.component("BCarouselSlide", BCarousel);
+
+app.use(SimpleTypeahead);
+app.use(i18n);
+app.use(store);
+app.use(BToastPlugin);
+app.use(head);
+app.use(router);
+app.mount("#app");
diff --git a/src/pages/[...all].vue b/src/pages/[...all].vue
new file mode 100644
index 00000000..db3b35e7
--- /dev/null
+++ b/src/pages/[...all].vue
@@ -0,0 +1,297 @@
+
+meta:
+ public: true
+
+
+
+
+
{{ $t("Dashboard") }}
+
+
{{
+ $t("Loading...")
+ }}
+
+
+ {{ $t("Edge creation") }}
+
+
+
+
+
+
+ {{
+ $t(
+ "Send us photos of magazine edges that you own and earn up to {0} Edge photographer points per edge!",
+ [mostPopularIssuesInCollectionWithoutEdge[0].popularity],
+ )
+ }}
+
+
+
+
+
+
+ {{
+ $t(
+ "Send us photos of magazine edges that you find on the Internet and earn up to {0} Edge photographer points per edge!",
+ [mostWantedEdges[0].popularity],
+ )
+ }}
+
+
+ {{
+ $t("Send edge photos")
+ }}
+
+
+
+
+ {{
+ $t("Create or edit an edge model")
+ }}
+
+
+
+ {{ $t(l10n) }}
+
+
+
+
+
+ {{ $t("Edit all") }} ({{ edges.length }})
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ $t("No edge in this category") }}
+
+
+
+
+
+
+
+
+
+
diff --git a/src/pages/edit/[...all].vue b/src/pages/edit/[...all].vue
new file mode 100644
index 00000000..bb0e8bae
--- /dev/null
+++ b/src/pages/edit/[...all].vue
@@ -0,0 +1,365 @@
+
+
+ {{ error }}
+
+
+
+ {{ warning }}
+
+
+
+
+
+
+ {{
+ mainStore.edgesBefore[mainStore.edgesBefore.length - 1]
+ .issuenumber
+ }}
+
+
+
+
+
+
+ {{ issuenumber }}
+
+
+
+
+
+
+ {{ mainStore.edgesAfter[0].issuenumber }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/pages/edit/new.vue b/src/pages/edit/new.vue
new file mode 100644
index 00000000..fdfea76b
--- /dev/null
+++ b/src/pages/edit/new.vue
@@ -0,0 +1,63 @@
+
+
+ {{ $t("Select the issue that you want to create the edge of.") }}
+
+
+
diff --git a/src/pages/upload.vue b/src/pages/upload.vue
new file mode 100644
index 00000000..db2c45bc
--- /dev/null
+++ b/src/pages/upload.vue
@@ -0,0 +1,320 @@
+
+meta:
+ public: true
+
+
+
+
+
+
+ {{ $t("Drag a file here or")
+ }}
+ {{ $t("Browse") }}
+
+
+
+
+
+
+
+ {{
+ // eslint-disable-next-line max-len
+ $t(
+ 'For each edge present on the picture, please select the part of the picture corresponding to the edge, fill in the information related to the edge hereunder then click on "Add". Once all the edges on the picture have been indicated, click on "Send the edge pictures".',
+ )
+ }}
+
+
+
+
+ {{
+ $t("Add")
+ }}
+
+
+
+
+
+
{{ $t("Error") }}
+
+ {{ $t("Sent!") }}
+
+
+ {{ $t("Delete") }}
+
+
+
+ {{ crop.width }} x {{ crop.height }} mm
+
+
+
+ {{ $t("Send the edge pictures") }}
+
+
+ {{ $t("Back to home page") }}
+
+
+
+
+
+
+
+
diff --git a/src/stores/api.ts b/src/stores/api.ts
new file mode 100644
index 00000000..d71f42a2
--- /dev/null
+++ b/src/stores/api.ts
@@ -0,0 +1,10 @@
+import { defineStore } from "pinia";
+
+import { createAxios } from "../../axios-helper";
+
+export const api = defineStore("api", () => ({
+ dmApi: ref(createAxios(import.meta.env.VITE_DM_API_URL as string)),
+ edgeCreatorApi: ref(
+ createAxios(import.meta.env.VITE_EDGECREATOR_API_URL as string),
+ ),
+}));
diff --git a/src/stores/coa.ts b/src/stores/coa.ts
new file mode 100644
index 00000000..5e493a2e
--- /dev/null
+++ b/src/stores/coa.ts
@@ -0,0 +1,152 @@
+import { defineStore } from "pinia";
+
+import {
+ GET__coa__list__countries__$locale,
+ GET__coa__list__issues__by_publication_codes,
+ GET__coa__list__publications__$countrycode,
+ POST__coa__list__publications,
+} from "~dm_types/routes";
+
+import { call, getChunkedRequests } from "../../axios-helper";
+import { api } from "./api";
+
+export const coa = defineStore("coa", () => {
+ const countryNames = ref(null as { value: string; text: string }[] | null),
+ publicationNames = ref({} as Record),
+ publicationNamesFullCountries = ref([] as string[]),
+ personNames = ref(null as Record | null),
+ issueNumbers = ref({} as Record),
+ isLoadingCountryNames = ref(false as boolean),
+ addPublicationNames = (
+ newPublicationNames: Record,
+ ) => {
+ publicationNames.value = {
+ ...publicationNames.value,
+ ...newPublicationNames,
+ };
+ },
+ addIssueNumbers = (newIssueNumbers: Record) => {
+ issueNumbers.value = { ...issueNumbers.value, ...newIssueNumbers };
+ },
+ fetchCountryNames = async (locale: string) => {
+ if (!isLoadingCountryNames.value && !countryNames.value) {
+ isLoadingCountryNames.value = true;
+
+ countryNames.value = Object.entries(
+ (
+ await call(
+ api().dmApi,
+ new GET__coa__list__countries__$locale({
+ query: { countryCodes: null },
+ params: { locale: locale.split("-")[0] },
+ }),
+ )
+ ).data,
+ )
+ .reduce(
+ (acc, [value, text]) => [...acc, { value, text }],
+ [] as { value: string; text: string }[],
+ )
+ .sort(({ text: text1 }, { text: text2 }) => (text1 < text2 ? -1 : 1));
+ }
+ },
+ fetchPublicationNames = async (publicationCodes: string[]) => {
+ const newPublicationCodes = [
+ ...new Set(
+ publicationCodes.filter(
+ (publicationcode) =>
+ !Object.keys(publicationNames.value).includes(publicationcode),
+ ),
+ ),
+ ];
+ return (
+ newPublicationCodes.length &&
+ addPublicationNames(
+ (
+ await call(
+ api().dmApi,
+ new POST__coa__list__publications({
+ reqBody: { publicationCodes: newPublicationCodes },
+ }),
+ )
+ ).data,
+ )
+ );
+ },
+ fetchPublicationNamesFromCountry = async (countryCode: string) => {
+ if (publicationNamesFullCountries.value.includes(countryCode)) {
+ return;
+ }
+ const data = (
+ await call(
+ api().dmApi,
+ new GET__coa__list__publications__$countrycode({
+ params: {
+ countrycode: countryCode,
+ },
+ }),
+ )
+ ).data;
+ addPublicationNames({
+ ...(publicationNames.value || {}),
+ ...data,
+ });
+ publicationNamesFullCountries.value = [
+ ...publicationNamesFullCountries.value,
+ countryCode,
+ ];
+ },
+ fetchIssueNumbers = async (publicationCodes: string[]) => {
+ const newPublicationCodes = [
+ ...new Set(
+ publicationCodes.filter(
+ (publicationcode) =>
+ !Object.keys(issueNumbers.value || {}).includes(publicationcode),
+ ),
+ ),
+ ];
+ if (newPublicationCodes.length) {
+ const data =
+ await getChunkedRequests(
+ {
+ callFn: async (chunk: string) =>
+ await call(
+ api().dmApi,
+ new GET__coa__list__issues__by_publication_codes({
+ query: { publicationCodes: chunk },
+ }),
+ ),
+ valuesToChunk: newPublicationCodes,
+ chunkSize: 50,
+ },
+ );
+
+ addIssueNumbers(
+ data.reduce(
+ (acc, issue) => ({
+ ...acc,
+ [issue.publicationcode]: [
+ ...(acc[issue.publicationcode] || []),
+ issue.issuenumber,
+ ],
+ }),
+ {},
+ ),
+ );
+ }
+ };
+ return {
+ countryNames,
+ publicationNames,
+ publicationNamesFullCountries,
+ personNames,
+ issueNumbers,
+ isLoadingCountryNames,
+ addPublicationNames,
+ addIssueNumbers,
+ fetchCountryNames,
+ fetchPublicationNames,
+ fetchPublicationNamesFromCountry,
+ fetchIssueNumbers,
+ };
+});
diff --git a/src/stores/collection.ts b/src/stores/collection.ts
new file mode 100644
index 00000000..3b213f05
--- /dev/null
+++ b/src/stores/collection.ts
@@ -0,0 +1,132 @@
+import { useCookies } from "@vueuse/integrations/useCookies";
+import { defineStore } from "pinia";
+
+import { api } from "~/stores/api";
+import { BookcaseEdge } from "~dm_types/BookcaseEdge";
+import {
+ GET__bookcase__$username,
+ GET__collection__popular,
+ GET__collection__user,
+ GET__collection__user_privileges,
+ GET__global_stats__user__$userIds,
+} from "~dm_types/routes";
+import { user as userModel, userPermission } from "~prisma_clients/client_dm";
+
+import { call } from "../../axios-helper";
+
+export interface BookcaseEdgeWithPopularity extends BookcaseEdge {
+ publicationcode: string;
+ issueCode: string;
+ popularity: number | null;
+}
+
+export const collection = defineStore("collection", () => {
+ const user = ref(undefined as Omit | undefined | null),
+ userPermissions = ref(null as userPermission[] | null),
+ userPhotographerPoints = ref(null as number | null),
+ bookcase = ref(null as BookcaseEdge[] | null),
+ popularIssuesInCollection = ref(null as Record | null),
+ isSharedBookcase = ref(false as boolean),
+ bookcaseWithPopularities = computed(
+ (): BookcaseEdgeWithPopularity[] | null =>
+ ((isSharedBookcase.value ? true : popularIssuesInCollection.value) &&
+ bookcase.value?.map((issue) => {
+ const publicationcode = `${issue.countryCode}/${issue.magazineCode}`;
+ const issueCode = `${publicationcode} ${issue.issuenumber}`;
+ return {
+ ...issue,
+ publicationcode,
+ issueCode,
+ popularity: isSharedBookcase.value
+ ? null
+ : popularIssuesInCollection.value?.[issueCode] ?? 0,
+ };
+ })) ||
+ null,
+ ),
+ popularIssuesInCollectionWithoutEdge = computed(
+ (): BookcaseEdgeWithPopularity[] | undefined =>
+ bookcaseWithPopularities.value
+ ?.filter(
+ ({ edgeId, popularity }) => !edgeId && popularity && popularity > 0,
+ )
+ .sort(({ popularity: popularity1 }, { popularity: popularity2 }) =>
+ popularity2 && popularity1 ? popularity2 - popularity1 : 0,
+ ),
+ ),
+ hasRole = (thisPrivilege: string) =>
+ userPermissions.value!.some(
+ ({ privilege, role }) =>
+ role === "EdgeCreator" && privilege === thisPrivilege,
+ ),
+ loadBookcase = async () => {
+ bookcase.value = (
+ await call(
+ api().dmApi,
+ new GET__bookcase__$username({
+ params: { username: user.value!.username as string },
+ }),
+ )
+ ).data;
+ },
+ loadPopularIssuesInCollection = async () => {
+ if (!popularIssuesInCollection.value) {
+ popularIssuesInCollection.value = (
+ await call(api().dmApi, new GET__collection__popular())
+ ).data.reduce(
+ (acc, { country, issuenumber, magazine, popularity }) => ({
+ ...acc,
+ [`${country}/${magazine} ${issuenumber}`]: popularity,
+ }),
+ {},
+ );
+ }
+ },
+ fetchUserPoints = async () => {
+ const userId = user.value!.id as number;
+ const userData = (
+ await call(
+ api().dmApi,
+ new GET__global_stats__user__$userIds({
+ params: { userIds: String(userId) },
+ }),
+ )
+ ).data;
+ userPhotographerPoints.value = userData.points[userId].edge_photographer;
+ },
+ loadUser = async () => {
+ const cookies = useCookies();
+ try {
+ if (cookies.get("token")) {
+ user.value = (
+ await call(api().dmApi, new GET__collection__user())
+ ).data;
+ userPermissions.value = (
+ await call(api().dmApi, new GET__collection__user_privileges())
+ ).data;
+ } else {
+ user.value = null;
+ }
+ } catch (e) {
+ console.error(e);
+ // cookies.remove("token");
+ user.value = null;
+ }
+ };
+
+ return {
+ user,
+ userPermissions,
+ hasRole,
+ userPhotographerPoints,
+ bookcase,
+ popularIssuesInCollection,
+ isSharedBookcase,
+ bookcaseWithPopularities,
+ popularIssuesInCollectionWithoutEdge,
+ loadBookcase,
+ loadPopularIssuesInCollection,
+ fetchUserPoints,
+ loadUser,
+ };
+});
diff --git a/src/stores/edgeCatalog.ts b/src/stores/edgeCatalog.ts
new file mode 100644
index 00000000..4e2f693b
--- /dev/null
+++ b/src/stores/edgeCatalog.ts
@@ -0,0 +1,361 @@
+import { defineStore } from "pinia";
+
+import { api } from "~/stores/api";
+import { EdgeModel } from "~dm_types/EdgeModel";
+import { ModelSteps } from "~dm_types/ModelSteps";
+import {
+ GET__edgecreator__model,
+ GET__edgecreator__model__$modelIds__steps,
+ GET__edgecreator__model__editedbyother__all,
+ GET__edgecreator__model__unassigned__all,
+ GET__edges__$countrycode__$magazinecode__$issuenumbers,
+} from "~dm_types/routes";
+
+import { call, getChunkedRequests } from "../../axios-helper";
+import { coa } from "./coa";
+import { collection } from "./collection";
+import { users } from "./users";
+
+const { getSvgMetadata, loadSvgFromString } = useSvgUtils();
+
+interface Edge {
+ country: string;
+ magazine: string;
+ issuenumber: string;
+ designers: string[];
+ photographers: string[];
+}
+
+export type EdgeWithVersionAndStatus = Edge & {
+ status: string | null;
+ v3: boolean;
+ published?: string | null;
+};
+
+export const edgeCategories = [
+ {
+ status: "ongoing",
+ l10n: "Ongoing edges",
+ apiCall: GET__edgecreator__model,
+ svgCheckFn: (edge: Edge, currentUser: string) =>
+ edge.designers.includes(currentUser),
+ },
+ {
+ status: "ongoing by another user",
+ l10n: "Ongoing edges handled by other users",
+ apiCall: GET__edgecreator__model__editedbyother__all,
+ svgCheckFn: (edge: Edge) => edge.designers.length,
+ },
+ {
+ status: "pending",
+ l10n: "Pending edges",
+ apiCall: GET__edgecreator__model__unassigned__all,
+ svgCheckFn: () => true,
+ },
+];
+
+export const edgeCatalog = defineStore("edgeCatalog", () => {
+ const isCatalogLoaded = ref(false as boolean),
+ currentEdges = ref({} as Record),
+ publishedEdges = ref(
+ {} as Record<
+ string,
+ Record
+ >,
+ ),
+ publishedEdgesSteps = ref({} as Record),
+ edgesByStatus = computed(() => {
+ const currentEdgesByStatus: Record<
+ string,
+ Record
+ > = Object.values(edgeCategories).reduce(
+ (acc, { status }) => ({
+ ...acc,
+ [status]: {},
+ }),
+ {},
+ );
+ return Object.values(currentEdges.value).reduce(
+ (acc: typeof currentEdgesByStatus, edge) => {
+ const publicationcode = `${edge.country}/${edge.magazine}`;
+ if (!acc[edge.status!][publicationcode]) {
+ acc[edge.status!][publicationcode] = [];
+ }
+ acc[edge.status!][publicationcode].push(edge);
+ return acc;
+ },
+ currentEdgesByStatus,
+ );
+ }),
+ fetchPublishedEdges = async (publicationcode: string) => {
+ const [countrycode, magazinecode] = publicationcode.split("/");
+ addPublishedEdges({
+ [publicationcode]: (
+ await call(
+ api().dmApi,
+ new GET__edges__$countrycode__$magazinecode__$issuenumbers({
+ params: { countrycode, magazinecode, issuenumbers: "_" },
+ }),
+ )
+ ).data,
+ });
+ },
+ addCurrentEdges = (edges: Record) => {
+ currentEdges.value = { ...currentEdges.value, ...edges };
+ },
+ addPublishedEdges = (
+ newPublishedEdges: Record<
+ string,
+ Record
+ >,
+ ) => {
+ for (const publicationcode of Object.keys(newPublishedEdges)) {
+ const publicationEdgesForPublication =
+ newPublishedEdges[publicationcode];
+ if (!publishedEdges.value[publicationcode]) {
+ publishedEdges.value[publicationcode] = {};
+ }
+ for (const issueNumber of Object.keys(publicationEdgesForPublication)) {
+ const edgeStatus = publicationEdgesForPublication[issueNumber];
+ if (!publishedEdges.value[publicationcode][issueNumber]) {
+ publishedEdges.value[publicationcode][issueNumber] = edgeStatus;
+ } else {
+ publishedEdges.value[publicationcode][issueNumber] = {
+ ...publishedEdges.value[publicationcode][issueNumber],
+ };
+ }
+ }
+ }
+ },
+ addPublishedEdgesSteps = ({
+ publicationcode,
+ newPublishedEdgesSteps,
+ }: {
+ publicationcode: string;
+ newPublishedEdgesSteps: ModelSteps;
+ }) => {
+ if (!publishedEdgesSteps.value[publicationcode]) {
+ publishedEdgesSteps.value[publicationcode] = {};
+ }
+ publishedEdgesSteps.value[publicationcode] = {
+ ...publishedEdgesSteps.value[publicationcode],
+ ...newPublishedEdgesSteps,
+ };
+ },
+ getPublishedEdgesSteps = async ({
+ publicationcode,
+ edgeModelIds,
+ }: {
+ publicationcode: string;
+ edgeModelIds: number[];
+ }) => {
+ const newModelIds = edgeModelIds;
+ if (!newModelIds.length) {
+ return;
+ }
+
+ addPublishedEdgesSteps({
+ publicationcode,
+ newPublishedEdgesSteps:
+ await getChunkedRequests({
+ callFn: (chunk) =>
+ call(
+ api().dmApi,
+ new GET__edgecreator__model__$modelIds__steps({
+ params: { modelIds: chunk },
+ }),
+ ),
+ valuesToChunk: newModelIds.map((modelId) => String(modelId)),
+ chunkSize: 10,
+ }),
+ });
+ },
+ getEdgeFromApi = (
+ { country, magazine, issuenumber, contributors, photos }: EdgeModel,
+ status: string,
+ ) => {
+ const issuecode = `${country}/${magazine} ${issuenumber}`;
+ const getContributorsOfType = (contributionType: string) =>
+ (contributors ?? [])
+ .filter(({ contribution }) => contribution === contributionType)
+ .map(
+ ({ userId }) =>
+ users().allUsers!.find(({ id }) => id === userId)!
+ .username as string,
+ );
+ const photo = photos?.find(({ isMainPhoto }) => isMainPhoto);
+ return {
+ country,
+ magazine,
+ issuenumber,
+ issuecode,
+ v3: false,
+ designers: getContributorsOfType("createur"),
+ photographers: getContributorsOfType("photographe"),
+ photo: photo?.elementImage.fileName,
+ status,
+ };
+ },
+ getEdgeFromSvg = (edge: Edge): EdgeWithVersionAndStatus => ({
+ ...edge,
+ v3: true,
+ status: edgeCategories.reduce(
+ (acc: string | null, { status, svgCheckFn }) =>
+ acc ??
+ (svgCheckFn(edge, collection().user!.username as string)
+ ? status
+ : null),
+ null,
+ ),
+ }),
+ canEditEdge = (status: string) =>
+ collection().hasRole("Admin") || status !== "ongoing by another user",
+ getEdgeStatus = ({
+ country,
+ magazine,
+ issuenumber,
+ }: {
+ country: string;
+ magazine: string;
+ issuenumber: string;
+ }) => {
+ let isPublished = false;
+ const publicationcode = `${country}/${magazine}`;
+ const publishedEdgesForPublication =
+ publishedEdges.value[publicationcode] || {};
+ if (publishedEdgesForPublication[issuenumber]) {
+ isPublished = true;
+ }
+ const issuecode = `${publicationcode} ${issuenumber}`;
+
+ return (
+ currentEdges.value[issuecode] || {
+ status: isPublished ? "Published" : "none",
+ }
+ ).status;
+ },
+ loadCatalog = async (withDetails: boolean) => {
+ if (isCatalogLoaded.value) {
+ return;
+ }
+
+ let newCurrentEdges: typeof currentEdges.value = {};
+ const publishedSvgEdges: typeof publishedEdges.value = {};
+
+ for (const { status, apiCall } of edgeCategories) {
+ const data = (await call(api().dmApi, new apiCall())).data;
+ newCurrentEdges = data.reduce((acc, edgeData) => {
+ const edge = getEdgeFromApi(edgeData, status);
+ return { ...acc, [edge.issuecode]: edge };
+ }, newCurrentEdges);
+ }
+
+ const edges = (
+ await call(api().edgeCreatorApi, new GET__fs__browseEdges())
+ ).data;
+ for (const edgeStatus in edges) {
+ for (const { filename, mtime } of edges[
+ edgeStatus as "current" | "published"
+ ]) {
+ const [, country, magazine, issuenumber] = filename.match(
+ /([^/]+)\/gen\/_?([^.]+)\.(.+).svg$/,
+ )!;
+ // if ([country, magazine, issuenumber].includes(undefined)) {
+ // console.error(`Invalid SVG file name : ${fileName}`);
+ // continue;
+ // }
+ const publicationcode = `${country}/${magazine}`;
+ try {
+ if (edgeStatus === "published") {
+ if (!publishedSvgEdges[publicationcode]) {
+ publishedSvgEdges[publicationcode] = {};
+ }
+ publishedSvgEdges[publicationcode][issuenumber] = {
+ issuenumber,
+ v3: true,
+ };
+ } else if (withDetails) {
+ loadSvgFromString(
+ country,
+ magazine,
+ issuenumber,
+ mtime,
+ edgeStatus === "published",
+ ).then(({ country, magazine, issuenumber, svgChildNodes }) => {
+ const designers = getSvgMetadata(
+ svgChildNodes,
+ "contributor-designer",
+ );
+ const photographers = getSvgMetadata(
+ svgChildNodes,
+ "contributor-photographer",
+ );
+
+ const publicationcode = `${country}/${magazine}`;
+ const issuecode = `${publicationcode} ${issuenumber}`;
+ newCurrentEdges[issuecode] = getEdgeFromSvg({
+ country,
+ magazine,
+ issuenumber,
+ designers,
+ photographers,
+ });
+ });
+ } else {
+ const issuecode = `${publicationcode} ${issuenumber}`;
+ newCurrentEdges[issuecode] = getEdgeFromSvg({
+ country,
+ magazine,
+ issuenumber,
+ designers: [],
+ photographers: [],
+ });
+ }
+ } catch (e) {
+ console.error(
+ `No SVG found : ${country}/${magazine} ${issuenumber}`,
+ );
+ }
+ }
+ }
+
+ if (Object.keys(newCurrentEdges).length) {
+ await coa().fetchPublicationNames([
+ ...new Set(
+ Object.values(newCurrentEdges).map(
+ ({ country, magazine }) => `${country}/${magazine}`,
+ ),
+ ),
+ ]);
+
+ for (const edgeIssueCode of Object.keys(newCurrentEdges)) {
+ newCurrentEdges[edgeIssueCode].published = getEdgeStatus(
+ newCurrentEdges[edgeIssueCode],
+ );
+ }
+
+ addCurrentEdges(newCurrentEdges);
+ }
+
+ addPublishedEdges(publishedSvgEdges);
+
+ isCatalogLoaded.value = true;
+ };
+
+ return {
+ getEdgeStatus,
+ edgesByStatus,
+ canEditEdge,
+ loadCatalog,
+ isCatalogLoaded,
+ edgeCategories,
+ currentEdges,
+ publishedEdges,
+ publishedEdgesSteps,
+ fetchPublishedEdges,
+ addCurrentEdges,
+ addPublishedEdges,
+ addPublishedEdgesSteps,
+ getPublishedEdgesSteps,
+ };
+});
diff --git a/src/stores/editingStep.ts b/src/stores/editingStep.ts
new file mode 100644
index 00000000..fcf35e05
--- /dev/null
+++ b/src/stores/editingStep.ts
@@ -0,0 +1,52 @@
+import { defineStore } from "pinia";
+
+import { step } from "~/stores/step";
+
+export const editingStep = defineStore("editingStep", () => {
+ const issuenumbers = ref([] as string[]),
+ stepNumber = ref(0 as number),
+ editingOptions = computed(() =>
+ step().getFilteredOptions({
+ stepNumbers: [stepNumber.value],
+ issuenumbers: issuenumbers.value,
+ }),
+ ),
+ dimensions = computed(() =>
+ step().getFilteredDimensions({
+ issuenumbers: issuenumbers.value,
+ }),
+ ),
+ addIssuenumber = (issuenumber: string) => {
+ issuenumbers.value = issuenumbers.value.concat(issuenumber).sort();
+ },
+ addIssuenumbers = (newIssuenumbers: string[]) => {
+ issuenumbers.value = [
+ ...new Set([...issuenumbers.value, ...newIssuenumbers]),
+ ].sort();
+ },
+ replaceIssuenumber = (issuenumber: string) => {
+ issuenumbers.value = [issuenumber];
+ },
+ toggleIssuenumber = (issuenumber: string) => {
+ if (issuenumbers.value.includes(issuenumber)) {
+ if (issuenumbers.value.length > 1) {
+ issuenumbers.value.splice(issuenumbers.value.indexOf(issuenumber), 1);
+ }
+ } else {
+ issuenumbers.value = [
+ ...new Set(issuenumbers.value.concat(issuenumber)),
+ ].sort();
+ }
+ };
+
+ return {
+ dimensions,
+ issuenumbers,
+ stepNumber,
+ editingOptions,
+ addIssuenumber,
+ addIssuenumbers,
+ replaceIssuenumber,
+ toggleIssuenumber,
+ };
+});
diff --git a/src/stores/hoveredStep.ts b/src/stores/hoveredStep.ts
new file mode 100644
index 00000000..2ce9fe04
--- /dev/null
+++ b/src/stores/hoveredStep.ts
@@ -0,0 +1,6 @@
+import { defineStore } from "pinia";
+
+export const hoveredStep = defineStore("hoveredStep", () => ({
+ issuenumber: ref(null as string | null),
+ stepNumber: ref(null as number | null),
+}));
diff --git a/src/stores/images.ts b/src/stores/images.ts
new file mode 100644
index 00000000..ccadc8f9
--- /dev/null
+++ b/src/stores/images.ts
@@ -0,0 +1,8 @@
+import { defineStore } from "pinia";
+
+export const images = defineStore("images", () => {
+ const root = "/images/",
+ getImagePath = (filePath: string) => `${root}/${filePath}`;
+
+ return { root, getImagePath };
+});
diff --git a/src/stores/main.ts b/src/stores/main.ts
new file mode 100644
index 00000000..098ec9d6
--- /dev/null
+++ b/src/stores/main.ts
@@ -0,0 +1,251 @@
+import { AxiosInstance } from "axios";
+import { defineStore } from "pinia";
+
+import { api } from "~/stores/api";
+import { EdgeWithModelId } from "~dm_types/EdgeWithModelId";
+import { GET__edges__$countrycode__$magazinecode__$issuenumbers } from "~dm_types/routes";
+import { userContributionType } from "~prisma-clients/client_dm";
+import { ModelContributor } from "~types/ModelContributor";
+import { GET__fs__browse__$imageType__$country__$magazine } from "~types/routes";
+import { SimpleUser } from "~types/SimpleUser";
+
+import { call } from "../../axios-helper";
+import { coa } from "./coa";
+
+const numericSortCollator = new Intl.Collator(undefined, {
+ numeric: true,
+ sensitivity: "base",
+});
+export const main = defineStore("main", () => {
+ const country = ref(null as string | null),
+ magazine = ref(null as string | null),
+ issuenumbers = ref([] as string[]),
+ isRange = ref(false as boolean),
+ photoUrls = ref({} as Record),
+ contributors = ref([] as ModelContributor[]),
+ edgesBefore = ref([] as EdgeWithModelId[]),
+ edgesAfter = ref([] as EdgeWithModelId[]),
+ publicationElements = ref([] as string[]),
+ publicationPhotos = ref([] as string[]),
+ warnings = ref([] as string[]),
+ publicationcode = computed(
+ () =>
+ country.value && magazine.value && `${country.value}/${magazine.value}`,
+ ),
+ publicationIssues = computed(
+ () =>
+ (publicationcode.value && coa().issueNumbers[publicationcode.value]) ||
+ [],
+ ),
+ publicationElementsForGallery = computed(
+ () =>
+ country.value &&
+ publicationElements.value.map((elementFileName) => ({
+ name: elementFileName,
+ url: `${
+ import.meta.env.VITE_EDGES_URL as string
+ }/${country.value!}/elements/${elementFileName}`,
+ })),
+ ),
+ publicationPhotosForGallery = computed(
+ () =>
+ country.value &&
+ publicationPhotos.value.map((elementFileName) => ({
+ name: elementFileName,
+ url: `${
+ import.meta.env.VITE_EDGES_URL as string
+ }/${country.value!}/photos/${elementFileName}`,
+ })),
+ ),
+ addContributor = ({
+ issuenumber,
+ contributionType,
+ user,
+ }: {
+ issuenumber: string;
+ contributionType: userContributionType;
+ user: SimpleUser;
+ }) => {
+ removeContributor({ contributionType, userToRemove: user });
+ contributors.value.push({
+ issuenumber,
+ contributionType,
+ user,
+ });
+ },
+ removeContributor = ({
+ contributionType,
+ userToRemove,
+ }: {
+ contributionType: userContributionType;
+ userToRemove: SimpleUser;
+ }) => {
+ contributors.value = contributors.value.filter(
+ ({ contributionType: thisContributionType, user: thisUser }) =>
+ thisContributionType !== contributionType &&
+ thisUser.id !== userToRemove.id,
+ );
+ },
+ addWarning = (warning: string) => {
+ warnings.value = [...warnings.value, warning];
+ },
+ removeWarning = (idx: number) => {
+ warnings.value.splice(idx, 1);
+ },
+ setIssuenumbers = ({
+ min,
+ max,
+ others,
+ }: {
+ min: string;
+ max?: string;
+ others?: string;
+ }) => {
+ const firstIssueIndex = publicationIssues.value.findIndex(
+ (issue) => issue === min,
+ );
+ if (firstIssueIndex === -1) {
+ throw new Error(`Issue ${min} doesn't exist`);
+ }
+ if (max === undefined) {
+ issuenumbers.value = [min, ...(others ? others.split(",") : [])];
+ } else {
+ isRange.value = true;
+ let lastIssueIndex = publicationIssues.value.findIndex(
+ (issue) => issue === max,
+ );
+ if (lastIssueIndex === -1) {
+ lastIssueIndex = publicationIssues.value.length - 1;
+ console.warn(
+ `Issue ${max} doesn't exist, falling back to ${publicationIssues.value[lastIssueIndex]}`,
+ );
+ }
+
+ issuenumbers.value = publicationIssues.value.filter(
+ (_, index) => index >= firstIssueIndex && index <= lastIssueIndex,
+ );
+ }
+ },
+ loadItems = async ({ itemType }: { itemType: "elements" | "photos" }) => {
+ const items = (
+ await call(
+ api().edgeCreatorApi,
+ new GET__fs__browse__$imageType__$country__$magazine({
+ params: {
+ imageType: itemType,
+ country: country.value!,
+ magazine: magazine.value!,
+ },
+ }),
+ )
+ ).data.sort((a, b) => numericSortCollator.compare(a, b));
+ if (itemType === "elements") {
+ publicationElements.value = items;
+ } else {
+ publicationPhotos.value = items;
+ }
+ },
+ loadPublicationIssues = async () =>
+ coa().fetchIssueNumbers([publicationcode.value!]),
+ getEdgePublicationStates = async (edges: string[]) =>
+ [
+ ...new Set(
+ Object.values(
+ (
+ await call(
+ api().dmApi,
+ new GET__edges__$countrycode__$magazinecode__$issuenumbers({
+ params: {
+ countrycode: publicationcode.value!.split("/")[0],
+ magazinecode: publicationcode.value!.split("/")[1],
+ issuenumbers: edges.join(","),
+ },
+ }),
+ )
+ ).data,
+ ),
+ ),
+ ].sort((a, b) =>
+ Math.sign(edges.indexOf(a.issuenumber) - edges.indexOf(b.issuenumber)),
+ ),
+ loadSurroundingEdges = async () => {
+ const firstIssueIndex = publicationIssues.value.findIndex(
+ (issue) => issue === issuenumbers.value[0],
+ );
+ const lastIssueIndex = publicationIssues.value.findIndex(
+ (issue) => issue === issuenumbers.value[issuenumbers.value.length - 1],
+ );
+ const issuesBefore = publicationIssues.value.filter(
+ (_, index) =>
+ firstIssueIndex !== -1 &&
+ index >= firstIssueIndex - 10 &&
+ index < firstIssueIndex,
+ );
+ const issuesAfter = publicationIssues.value.filter(
+ (_, index) =>
+ lastIssueIndex !== -1 &&
+ index > lastIssueIndex &&
+ index <= lastIssueIndex + 10,
+ );
+
+ if (issuesBefore.length) {
+ edgesBefore.value = await getEdgePublicationStates(issuesBefore);
+ }
+
+ if (issuesAfter.length) {
+ edgesAfter.value = await getEdgePublicationStates(issuesAfter);
+ }
+ },
+ getChunkedRequests = async ({
+ api,
+ url,
+ parametersToChunk,
+ chunkSize,
+ suffix = "",
+ }: {
+ api: AxiosInstance;
+ url: string;
+ parametersToChunk: (string | number)[];
+ chunkSize: number;
+ suffix?: string;
+ }) =>
+ await Promise.all(
+ await Array.from(
+ { length: Math.ceil(parametersToChunk.length / chunkSize) },
+ (_, i) =>
+ parametersToChunk.slice(i * chunkSize, i * chunkSize + chunkSize),
+ ).reduce(
+ async (acc, codeChunk) =>
+ (await acc).concat(
+ await api.get(`${url}${codeChunk.join(",")}${suffix}`),
+ ),
+ Promise.resolve([]),
+ ),
+ );
+ return {
+ country,
+ magazine,
+ issuenumbers,
+ isRange,
+ photoUrls,
+ contributors,
+ edgesBefore,
+ edgesAfter,
+ publicationElements,
+ publicationPhotos,
+ warnings,
+ publicationcode,
+ publicationIssues,
+ publicationElementsForGallery,
+ publicationPhotosForGallery,
+ addContributor,
+ removeContributor,
+ addWarning,
+ removeWarning,
+ setIssuenumbers,
+ loadItems,
+ loadPublicationIssues,
+ loadSurroundingEdges,
+ getChunkedRequests,
+ };
+});
diff --git a/src/stores/renders.ts b/src/stores/renders.ts
new file mode 100644
index 00000000..6833d508
--- /dev/null
+++ b/src/stores/renders.ts
@@ -0,0 +1,59 @@
+import { defineStore } from "pinia";
+
+export const renders = defineStore("renders", () => ({
+ supportedRenders: [
+ {
+ component: "Rectangle",
+ labelL10nKey: "Rectangle",
+ originalName: "Rectangle",
+ description: "Draw a rectangle",
+ },
+ {
+ component: "Staple",
+ labelL10nKey: "Staple",
+ originalName: "Agrafer",
+ description: "Staple the edge",
+ },
+ {
+ component: "Gradient",
+ labelL10nKey: "Gradient",
+ originalName: "Degrade",
+ description: "Draw a rectangle with a gradient",
+ },
+ {
+ component: "Polygon",
+ labelL10nKey: "Polygon",
+ originalName: "Polygone",
+ description: "Draw a polygon",
+ },
+ {
+ component: "ArcCircle",
+ labelL10nKey: "Arc circle",
+ originalName: "Arc_cercle",
+ description: "Draw a circle arc",
+ },
+ {
+ component: "Image",
+ labelL10nKey: "Image",
+ originalName: "Image",
+ description: "Insert an image",
+ },
+ {
+ component: "Fill",
+ labelL10nKey: "Fill",
+ originalName: "Remplir",
+ description: "Fill with a color",
+ },
+ {
+ component: "Text",
+ labelL10nKey: "Text",
+ originalName: "TexteMyFonts",
+ description: "Insert a text",
+ },
+ ] as {
+ component: string;
+ labelL10nKey: string;
+ originalName: string;
+ description: string;
+ }[],
+}));
diff --git a/src/stores/step.ts b/src/stores/step.ts
new file mode 100644
index 00000000..d5f13901
--- /dev/null
+++ b/src/stores/step.ts
@@ -0,0 +1,352 @@
+import { defineStore } from "pinia";
+import { useI18n } from "vue-i18n";
+
+import { editingStep } from "~/stores/editingStep";
+import { main } from "~/stores/main";
+import { OptionNameAndValue } from "~/types/OptionNameAndValue";
+import { OptionValue } from "~/types/OptionValue";
+
+export interface StepOption {
+ stepNumber: number;
+ issuenumber: string;
+ optionName: string;
+ optionValue: OptionValue;
+}
+export type Options = StepOption[];
+
+export type OptionsArray = OptionNameAndValue[];
+
+export interface Dimensions {
+ issuenumber: string;
+ width: number;
+ height: number;
+}
+
+export type DimensionsArray = Dimensions[];
+
+export const optionObjectToArray = (
+ optionObject: Record,
+): OptionsArray =>
+ Object.entries(optionObject).reduce(
+ (acc, [optionName, optionValue]) => [...acc, { optionName, optionValue }],
+ [],
+ );
+
+const isColorOption = (optionName: string) =>
+ optionName.toLowerCase().includes("color") ||
+ ["fill", "stroke"].includes(optionName);
+
+export const step = defineStore("step", () => {
+ const options = ref([] as Options),
+ dimensions = ref([] as DimensionsArray),
+ colors = computed(() =>
+ options.value.filter(
+ ({ optionName, optionValue }) =>
+ isColorOption(optionName) && optionValue !== "transparent",
+ ),
+ ),
+ maxStepNumber = computed(() =>
+ options.value.reduce(
+ (max, { stepNumber }) => Math.max(max, stepNumber),
+ -1,
+ ),
+ ),
+ optionsPerStepNumber = computed(() =>
+ options.value.reduce>(
+ (acc, { stepNumber, ...rest }) => ({
+ ...acc,
+ [stepNumber]: [...(acc[stepNumber] || []), { ...rest }],
+ }),
+ {},
+ ),
+ ),
+ getFilteredOptions = ({
+ stepNumbers,
+ issuenumbers,
+ }: {
+ stepNumbers?: number[];
+ issuenumbers?: string[];
+ }) => {
+ return options.value.filter(
+ ({ stepNumber, issuenumber }) =>
+ (!stepNumbers || stepNumbers.includes(stepNumber)) &&
+ (!issuenumbers || issuenumbers.includes(issuenumber)),
+ );
+ },
+ getFilteredDimensions = ({ issuenumbers }: { issuenumbers?: string[] }) =>
+ dimensions.value.filter(
+ ({ issuenumber }) =>
+ !issuenumbers || issuenumbers.includes(issuenumber),
+ ),
+ removeOptionValues = ({
+ stepNumber: defaultStepNumber,
+ issuenumbers: defaultIssuenumbers,
+ optionNames,
+ }: {
+ stepNumber?: number;
+ issuenumbers?: string[];
+ optionNames?: string[];
+ }) =>
+ options.value.filter(
+ ({ stepNumber, issuenumber, optionName }) =>
+ defaultStepNumber !== stepNumber ||
+ !defaultIssuenumbers?.includes(issuenumber) ||
+ !optionNames?.includes(optionName),
+ ),
+ setOptionValues = (
+ newOptions: OptionsArray | Record,
+ overrides: {
+ issuenumbers?: string[];
+ stepNumber?: number;
+ } = { issuenumbers: undefined, stepNumber: undefined },
+ ) => {
+ const optionsAsArray = newOptions.hasOwnProperty("length")
+ ? (newOptions as OptionsArray)
+ : optionObjectToArray(newOptions as Record);
+ const newOptionsKeys = optionsAsArray.map(({ optionName }) => optionName);
+ const defaultStepNumber =
+ overrides.stepNumber === undefined
+ ? editingStep().stepNumber
+ : overrides.stepNumber;
+ const defaultIssuenumbers =
+ overrides.issuenumbers === undefined
+ ? editingStep().issuenumbers
+ : overrides.issuenumbers;
+
+ const processedOptions: {
+ stepNumber: number;
+ issuenumber: string;
+ optionName: string;
+ }[] = [];
+ options.value.forEach(({ stepNumber, issuenumber, optionName }, idx) => {
+ if (
+ stepNumber === defaultStepNumber &&
+ defaultIssuenumbers.includes(issuenumber)
+ ) {
+ optionsAsArray.forEach(
+ ({
+ optionName: optionNameToUpdate,
+ optionValue: optionValueToUpdate,
+ }) => {
+ if (optionName === optionNameToUpdate) {
+ options.value[idx].optionValue = optionValueToUpdate;
+ processedOptions.push({ stepNumber, issuenumber, optionName });
+ }
+ },
+ );
+ }
+ });
+ for (const issuenumberToProcess of defaultIssuenumbers) {
+ for (const optionNameToProcess of newOptionsKeys) {
+ if (
+ !processedOptions.some(
+ ({ stepNumber, issuenumber, optionName }) =>
+ stepNumber === defaultStepNumber &&
+ issuenumber === issuenumberToProcess &&
+ optionName === optionNameToProcess,
+ )
+ ) {
+ options.value.push({
+ stepNumber: defaultStepNumber,
+ issuenumber: issuenumberToProcess,
+ optionName: optionNameToProcess,
+ optionValue: optionsAsArray.find(
+ ({ optionName }) => optionName === optionNameToProcess,
+ )!.optionValue,
+ });
+ }
+ }
+ }
+ },
+ setDimensions = (
+ newDimensions: { width: number; height: number },
+ overrides: {
+ issuenumbers?: string[];
+ },
+ ) => {
+ dimensions.value = [
+ ...dimensions.value.filter(
+ ({ issuenumber }) =>
+ overrides.issuenumbers &&
+ !overrides.issuenumbers.includes(issuenumber),
+ ),
+ ...(overrides.issuenumbers ?? main().issuenumbers).map(
+ (issuenumber) => ({
+ issuenumber,
+ ...newDimensions,
+ }),
+ ),
+ ];
+ },
+ setSteps = (issuenumber: string, issueSteps: StepOption[]) => {
+ checkSameComponentsAsCompletedEdge(issuenumber, issueSteps);
+ // nextTick().then(() => {
+ setOptionValues(issueSteps, {
+ issuenumbers: [issuenumber],
+ });
+ // });
+ },
+ checkSameComponentsAsCompletedEdge = (
+ issuenumber: string,
+ issueSteps: StepOption[],
+ ) => {
+ let completedIssuenumber: string | null = null;
+ for (
+ let stepNumber = 0;
+ stepNumber <= maxStepNumber.value;
+ stepNumber++
+ ) {
+ const stepOptions = getFilteredOptions({
+ stepNumbers: [stepNumber],
+ issuenumbers: [issuenumber],
+ });
+ if (stepOptions.length) {
+ completedIssuenumber = issuenumber;
+ }
+ }
+ if (completedIssuenumber === null) {
+ return;
+ }
+ const completedIssueSteps = getFilteredOptions({
+ issuenumbers: [issuenumber],
+ });
+
+ const getComponents = (steps: StepOption[]) =>
+ steps
+ .filter(({ optionName }) => optionName === "component")
+ .map(({ optionValue }) => optionValue)
+ .join("+");
+ const previousIssueComponents = getComponents(
+ Object.values(completedIssueSteps),
+ );
+ const currentIssueComponents = getComponents(issueSteps);
+ if (
+ completedIssuenumber !== issuenumber &&
+ previousIssueComponents !== currentIssueComponents
+ ) {
+ throw new Error(
+ useI18n()
+ .t(
+ `Issue numbers {completedIssuenumber} and {issuenumber} ` +
+ `don't have the same components` +
+ `: {completedIssueSteps} vs {currentIssueComponents}`,
+ {
+ completedIssuenumber,
+ issuenumber,
+ previousIssueComponents,
+ currentIssueComponents,
+ },
+ )
+ .toString(),
+ );
+ }
+ },
+ copyDimensionsAndSteps = (
+ issuenumber: string,
+ otherIssuenumber: string,
+ ) => {
+ setDimensions(
+ getFilteredDimensions({
+ issuenumbers: [otherIssuenumber],
+ }).map((dimension) => ({ ...dimension, issuenumber }))[0],
+ {
+ issuenumbers: [issuenumber],
+ },
+ );
+
+ const steps = getFilteredOptions({
+ issuenumbers: [issuenumber],
+ });
+
+ for (
+ let stepNumber = 0;
+ stepNumber <= maxStepNumber.value;
+ stepNumber++
+ ) {
+ setOptionValues(
+ steps
+ .filter(
+ ({ stepNumber: optionStepNumber }) =>
+ optionStepNumber === stepNumber,
+ )
+ .map((step) => ({ ...step, issuenumber: otherIssuenumber })),
+ );
+ }
+ },
+ addStep = (component: string) => {
+ setOptionValues(
+ [
+ {
+ optionName: "component",
+ optionValue: component,
+ },
+ ],
+ {
+ issuenumbers: main().issuenumbers,
+ stepNumber: maxStepNumber.value + 1,
+ },
+ );
+ },
+ removeStep = (stepNumberToRemove: number) => {
+ options.value = options.value.filter(
+ ({ stepNumber }) => stepNumberToRemove !== stepNumber,
+ );
+ for (
+ let optionIndex = 0;
+ optionIndex < options.value.length;
+ optionIndex++
+ ) {
+ if (options.value[optionIndex].stepNumber > stepNumberToRemove) {
+ options.value[optionIndex].stepNumber--;
+ }
+ }
+ },
+ duplicateStep = (stepNumber: number) => {
+ const existingStepOptions = getFilteredOptions({
+ stepNumbers: [stepNumber],
+ });
+
+ setOptionValues(
+ existingStepOptions.map((option) => ({
+ ...option,
+ stepNumber: maxStepNumber.value + 1,
+ })),
+ );
+ },
+ swapSteps = (stepNumbers: [number, number]) => {
+ for (
+ let optionIndex = 0;
+ optionIndex < options.value.length;
+ optionIndex++
+ ) {
+ const stepNumber = options.value[optionIndex].stepNumber;
+ if (stepNumbers.includes(stepNumber)) {
+ options.value[optionIndex].stepNumber =
+ stepNumbers[1 - stepNumbers.indexOf(stepNumber)];
+ }
+ }
+ options.value.sort(
+ ({ stepNumber: stepNumber1 }, { stepNumber: stepNumber2 }) =>
+ Math.sign(stepNumber1 - stepNumber2),
+ );
+ };
+ return {
+ options,
+ dimensions,
+ colors,
+ optionsPerStepNumber,
+ maxStepNumber,
+ getFilteredOptions,
+ getFilteredDimensions,
+ setOptionValues,
+ removeOptionValues,
+ setDimensions,
+ setSteps,
+ checkSameComponentsAsCompletedEdge,
+ copyDimensionsAndSteps,
+ addStep,
+ removeStep,
+ duplicateStep,
+ swapSteps,
+ };
+});
diff --git a/src/stores/ui.ts b/src/stores/ui.ts
new file mode 100644
index 00000000..a27bf22b
--- /dev/null
+++ b/src/stores/ui.ts
@@ -0,0 +1,12 @@
+import { defineStore } from "pinia";
+
+export const ui = defineStore("ui", () => ({
+ zoom: ref(1.5 as number),
+ showIssueNumbers: ref(true as boolean),
+ showEdgeOverflow: ref(true as boolean),
+ showPreviousEdge: ref(true as boolean | undefined),
+ showNextEdge: ref(true as boolean | undefined),
+ showEdgePhotos: ref(true as boolean | undefined),
+ colorPickerOption: ref(null as string | null),
+ positionInCanvas: ref(null as [number, number] | null),
+}));
diff --git a/src/stores/users.ts b/src/stores/users.ts
new file mode 100644
index 00000000..6a0faf34
--- /dev/null
+++ b/src/stores/users.ts
@@ -0,0 +1,22 @@
+import { defineStore } from "pinia";
+
+import { api } from "~/stores/api";
+import { GET__global_stats__user__list } from "~dm_types/routes";
+import { SimpleUser } from "~types/SimpleUser";
+
+import { call } from "../../axios-helper";
+
+export const users = defineStore("users", () => {
+ const allUsers = ref(null as SimpleUser[] | null),
+ fetchAllUsers = async () => {
+ if (!allUsers.value) {
+ allUsers.value = (
+ await call(api().dmApi, new GET__global_stats__user__list())
+ ).data;
+ }
+ };
+ return {
+ allUsers,
+ fetchAllUsers,
+ };
+});
diff --git a/layouts/default.vue b/src/styles/main.scss
similarity index 59%
rename from layouts/default.vue
rename to src/styles/main.scss
index 21982e75..d9b8a8a6 100644
--- a/layouts/default.vue
+++ b/src/styles/main.scss
@@ -1,11 +1,10 @@
-
-
+.card-header-tabs .nav-link.active {
+ --bs-card-bg: #007bff;
+}
-
diff --git a/src/types/EdgeDimensions.ts b/src/types/EdgeDimensions.ts
new file mode 100644
index 00000000..694ff6db
--- /dev/null
+++ b/src/types/EdgeDimensions.ts
@@ -0,0 +1,4 @@
+export interface EdgeDimensions {
+ width: number;
+ height: number;
+}
diff --git a/src/types/GalleryItem.ts b/src/types/GalleryItem.ts
new file mode 100644
index 00000000..13e533f6
--- /dev/null
+++ b/src/types/GalleryItem.ts
@@ -0,0 +1,7 @@
+export interface GalleryItem {
+ name: string;
+ quality: number;
+ disabled: boolean;
+ tooltip: string;
+ url: string;
+}
diff --git a/src/types/LegacyComponent.ts b/src/types/LegacyComponent.ts
new file mode 100644
index 00000000..5f7d45fd
--- /dev/null
+++ b/src/types/LegacyComponent.ts
@@ -0,0 +1,82 @@
+export type LegacyComponent =
+ | {
+ component: "ArcCircle";
+ options: {
+ Rempli: string;
+ Pos_x_centre: number;
+ Pos_y_centre: number;
+ Largeur: number;
+ Hauteur: number;
+ Couleur: string;
+ };
+ }
+ | {
+ component: "Fill";
+ options: { Pos_x: string; Pos_y: string; Couleur: string };
+ }
+ | {
+ component: "Gradient";
+ options: {
+ Pos_x_debut: number;
+ Pos_y_debut: number;
+ Pos_x_fin: number;
+ Pos_y_fin: number;
+ Couleur_debut: string;
+ Couleur_fin: string;
+ Sens: string;
+ };
+ }
+ | {
+ component: "Image";
+ options: {
+ Source: string;
+ Position: string;
+ Decalage_x: number;
+ Decalage_y: number;
+ Compression_x: number;
+ Compression_y: number;
+ };
+ }
+ | {
+ component: "Polygon";
+ options: {
+ X: string;
+ Y: string;
+ Couleur: string;
+ };
+ }
+ | {
+ component: "Rectangle";
+ options: {
+ Rempli: string;
+ Pos_x_debut: string;
+ Pos_y_debut: string;
+ Pos_x_fin: string;
+ Pos_y_fin: string;
+ Couleur: string;
+ };
+ }
+ | {
+ component: "Staple";
+ options: {
+ Y1: number;
+ Y2: number;
+ Taille_agrafe: number;
+ };
+ }
+ | {
+ component: "Text";
+ options: {
+ Pos_x: string;
+ Pos_y: string;
+ Couleur_texte: string;
+ Couleur_fond: string;
+ Chaine: string;
+ Largeur: string;
+ Rotation: string;
+ Demi_hauteur: string;
+ Compression_x: string;
+ Compression_y: string;
+ URL: string;
+ };
+ };
diff --git a/src/types/OptionNameAndValue.ts b/src/types/OptionNameAndValue.ts
new file mode 100644
index 00000000..088970ff
--- /dev/null
+++ b/src/types/OptionNameAndValue.ts
@@ -0,0 +1,6 @@
+import { OptionValue } from "./OptionValue";
+
+export interface OptionNameAndValue {
+ optionName: string;
+ optionValue: OptionValue;
+}
diff --git a/src/types/OptionValue.ts b/src/types/OptionValue.ts
new file mode 100644
index 00000000..f8cbc1ec
--- /dev/null
+++ b/src/types/OptionValue.ts
@@ -0,0 +1 @@
+export type OptionValue = string | number | boolean | null | undefined;
diff --git a/src/types/Step.ts b/src/types/Step.ts
new file mode 100644
index 00000000..38399c58
--- /dev/null
+++ b/src/types/Step.ts
@@ -0,0 +1,3 @@
+import { OptionNameAndValue } from "./OptionNameAndValue";
+
+export type Step = OptionNameAndValue[];
diff --git a/src/types/StepOptionBaseProps.ts b/src/types/StepOptionBaseProps.ts
new file mode 100644
index 00000000..1a513962
--- /dev/null
+++ b/src/types/StepOptionBaseProps.ts
@@ -0,0 +1,8 @@
+import { OptionValue } from "~/types/OptionValue";
+
+export interface BaseProps {
+ issuenumber: string;
+ stepNumber: number;
+
+ options: Record | undefined;
+}
diff --git a/src/types/StepOptions.ts b/src/types/StepOptions.ts
new file mode 100644
index 00000000..771dddfc
--- /dev/null
+++ b/src/types/StepOptions.ts
@@ -0,0 +1,3 @@
+import { OptionValue } from "~/types/OptionValue";
+
+export type StepOptions = Record | undefined;
diff --git a/src/types/StepsPerIssuenumber.ts b/src/types/StepsPerIssuenumber.ts
new file mode 100644
index 00000000..43a888ba
--- /dev/null
+++ b/src/types/StepsPerIssuenumber.ts
@@ -0,0 +1,3 @@
+import { Step } from "~/types/Step";
+
+export type StepsPerIssuenumber = Record;
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 00000000..160e8df3
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1,3 @@
+/// | undefined,
+ ReqBody = unknown,
+ Query = unknown,
+> {
+ resBody?: ResBody;
+ params?: Params;
+ reqBody?: ReqBody;
+ query?: Query;
+}
+
+export interface CallWithoutResBody<
+ Params = Record | undefined,
+ ReqBody = unknown,
+ Query = unknown,
+> {
+ params?: Params;
+ reqBody?: ReqBody;
+ query?: Query;
+}
+
+export abstract class ContractWithMethodAndUrl> {
+ constructor(t?: Omit) {
+ if (t) {
+ this.call = { params: t.params, query: t.query, reqBody: t.reqBody };
+ }
+ }
+ public getMethod = (): string =>
+ (this.constructor as typeof ContractWithMethodAndUrl).method;
+ public getUrl = (): string =>
+ (this.constructor as typeof ContractWithMethodAndUrl).url;
+
+ static readonly method: "get" | "post" | "put" | "delete";
+ static readonly url: string;
+ call?: CallWithoutResBody;
+
+ resBody!: T["resBody"];
+}
diff --git a/types/Crop.ts b/types/Crop.ts
new file mode 100644
index 00000000..c48437d5
--- /dev/null
+++ b/types/Crop.ts
@@ -0,0 +1,9 @@
+export interface Crop {
+ width: number;
+ height: number;
+ editMode: "single" | "range";
+ countryCode: string;
+ publicationCode: string;
+ issueNumber: string;
+ issueNumberEnd: string;
+}
diff --git a/types/ExportPaths.ts b/types/ExportPaths.ts
new file mode 100644
index 00000000..0f461bff
--- /dev/null
+++ b/types/ExportPaths.ts
@@ -0,0 +1,4 @@
+export interface ExportPaths {
+ svgPath?: string;
+ pngPath?: string;
+}
diff --git a/types/ModelContributor.ts b/types/ModelContributor.ts
new file mode 100644
index 00000000..4e5d9d35
--- /dev/null
+++ b/types/ModelContributor.ts
@@ -0,0 +1,8 @@
+import { userContributionType } from "~prisma_clients/client_dm";
+import { SimpleUser } from "~types/SimpleUser";
+
+export interface ModelContributor {
+ issuenumber: string;
+ contributionType: userContributionType;
+ user: SimpleUser;
+}
diff --git a/types/SessionUser.ts b/types/SessionUser.ts
new file mode 100644
index 00000000..7ecf8ff3
--- /dev/null
+++ b/types/SessionUser.ts
@@ -0,0 +1,15 @@
+export interface User {
+ id: number;
+ username: string;
+ hashedPassword: string;
+ privileges: Record;
+}
+
+declare global {
+ // eslint-disable-next-line @typescript-eslint/no-namespace
+ namespace Express {
+ interface Request {
+ user: User | null;
+ }
+ }
+}
diff --git a/types/SimpleUser.ts b/types/SimpleUser.ts
new file mode 100644
index 00000000..f06478b4
--- /dev/null
+++ b/types/SimpleUser.ts
@@ -0,0 +1,3 @@
+import { user } from "~prisma_clients/client_dm";
+
+export type SimpleUser = Pick;
diff --git a/types/routes.ts b/types/routes.ts
new file mode 100644
index 00000000..cd30b9c6
--- /dev/null
+++ b/types/routes.ts
@@ -0,0 +1,107 @@
+// noinspection ES6PreferShortImport
+
+import { ContractWithMethodAndUrl } from "./Call";
+import { ExportPaths } from "./ExportPaths";
+import { ModelContributor } from "./ModelContributor";
+
+export class GET__fs__base64 extends ContractWithMethodAndUrl<{
+ resBody: {
+ dimensions: { width: number; height: number };
+ base64: string;
+ url: string;
+ };
+ query: { targetUrl: string };
+}> {
+ static readonly method = "get";
+ static readonly url = "/fs/base64";
+}
+export class GET__fs__browseEdges extends ContractWithMethodAndUrl<{
+ resBody: {
+ current: { filename: string; mtime: string }[];
+ published: { filename: string; mtime: string }[];
+ };
+}> {
+ static readonly method = "get";
+ static readonly url = "/fs/browseEdges";
+}
+export class GET__fs__generateDefaultEdge extends ContractWithMethodAndUrl<{
+ resBody: {
+ current: string[];
+ published: string[];
+ };
+}> {
+ static readonly method = "get";
+ static readonly url = "/fs/generateDefaultEdge";
+}
+export class POST__fs__save extends ContractWithMethodAndUrl<{
+ resBody: { paths: ExportPaths; isNew: boolean };
+ reqBody: {
+ runExport: boolean;
+ runSubmit: boolean;
+ country: string;
+ magazine: string;
+ issuenumber: string;
+ contributors: ModelContributor[];
+ content: string;
+ };
+}> {
+ static readonly method = "post";
+ static readonly url = "/fs/save";
+}
+export class GET__fs__text extends ContractWithMethodAndUrl<{
+ resBody:
+ | {
+ width: number;
+ height: number;
+ url: string;
+ }
+ | { error: string };
+ query: {
+ color: string;
+ colorBackground: string;
+ width: number;
+ font: string;
+ text: string;
+ };
+}> {
+ static readonly method = "get";
+ static readonly url = "/fs/text";
+}
+export class POST__fs__upload_base64 extends ContractWithMethodAndUrl<{
+ resBody: { fileName: string };
+ reqBody: {
+ data: string;
+ country: string;
+ magazine: string;
+ issuenumber: string;
+ };
+}> {
+ static readonly method = "post";
+ static readonly url = "/fs/upload-base64";
+}
+export class POST__fs__upload extends ContractWithMethodAndUrl<{
+ resBody: { fileName: string }[];
+ reqBody: {
+ photo: boolean;
+ multiple: boolean;
+ edge: {
+ country: string;
+ magazine: string;
+ issuenumber: string;
+ };
+ };
+}> {
+ static readonly method = "post";
+ static readonly url = "/fs/upload";
+}
+export class GET__fs__browse__$imageType__$country__$magazine extends ContractWithMethodAndUrl<{
+ params: {
+ imageType: "elements" | "photos";
+ country: string;
+ magazine: string;
+ };
+ resBody: string[];
+}> {
+ static readonly method = "get";
+ static readonly url = "/fs/browse/:imageType/:country/:magazine";
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 00000000..6c1fd1da
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,93 @@
+import VueI18n from "@intlify/unplugin-vue-i18n/vite";
+import Vue from "@vitejs/plugin-vue";
+import fs from "fs";
+import path from "path";
+import AutoImport from "unplugin-auto-import/vite";
+import IconsResolve from "unplugin-icons/resolver";
+import Icons from "unplugin-icons/vite";
+import { BootstrapVueNextResolver } from "unplugin-vue-components/resolvers";
+import Components from "unplugin-vue-components/vite";
+import { defineConfig } from "vite";
+import Pages from "vite-plugin-pages";
+import Layouts from "vite-plugin-vue-layouts";
+
+const RenderComponentResolver = (name: string) => {
+ const file = path.resolve(__dirname, `src/components/renders/${name}.vue`);
+
+ if (fs.existsSync(file)) {
+ return file;
+ }
+};
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ resolve: {
+ alias: {
+ "~/": `${path.resolve(__dirname, "src")}/`,
+ "~dm-services": path.resolve(__dirname, "../../packages/api/services"),
+ "~dm-types": path.resolve(__dirname, "../../packages/types"),
+ "~socket.io-services": path.resolve(
+ __dirname,
+ "../../packages/socket.io-services",
+ ),
+ "~socket.io-client-services": path.resolve(
+ __dirname,
+ "../../packages/socket.io-client-services",
+ ),
+ "~prisma-clients": path.resolve(
+ __dirname,
+ "../../packages/prisma-clients",
+ ),
+ "~types/": `${path.resolve(__dirname, "types")}/`,
+ },
+ },
+
+ plugins: [
+ Vue(),
+
+ // https://github.com/hannoeru/vite-plugin-pages
+ Pages(),
+
+ // https://github.com/JohnCampionJr/vite-plugin-vue-layouts
+ Layouts(),
+
+ // https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n
+ VueI18n({
+ runtimeOnly: false,
+ compositionOnly: true,
+ include: [path.resolve(__dirname, "..", "locales/**")],
+ }),
+
+ // https://github.com/antfu/unplugin-auto-import
+ AutoImport({
+ imports: ["vue", "vue/macros", "vue-router", "@vueuse/core"],
+ dts: true,
+ dirs: ["./src/composables", "./types"],
+ vueTemplate: true,
+ resolvers: [RenderComponentResolver],
+ }),
+
+ Icons({
+ compiler: "vue3",
+ autoInstall: true,
+ }),
+
+ // https://github.com/antfu/vite-plugin-components
+ Components({
+ resolvers: [BootstrapVueNextResolver(), IconsResolve()],
+ dirs: [
+ "src/components",
+ "src/layouts",
+ "node_modules/ducksmanager/dist/src/components",
+ ],
+ dts: true,
+ deep: true,
+ }),
+ ],
+
+ server: {
+ watch: {
+ ignored: ["**/api/**", "**/.idea/**"],
+ },
+ },
+});
diff --git a/vue-shim.d.ts b/vue-shim.d.ts
deleted file mode 100644
index d9f24faa..00000000
--- a/vue-shim.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-declare module '*.vue' {
- import Vue from 'vue'
- export default Vue
-}
Transparent