edgecreator: Fix existing contributors not loaded in save model modal

Author: bperel

apps/edgecreator/api/services/upload/index.ts

@@ -57,13 +57,11 @@ const _getFilenameUsagesInOtherModels = async (
   ).filter((otherUse) => issue.issuenumber !== otherUse.issuenumberStart);
 };
 
-const storePhotoHash = async (
+const storePhotoHash = (
   filename: string,
   hash: string,
   token: string
-) => {
-  await getEdgeCreatorServices(token).createElementImage(hash, filename);
-};
+) => getEdgeCreatorServices(token).createElementImage(hash, filename);
 
 const validateUpload = async (
   filename: string,

apps/edgecreator/src/components/SaveModelButton.vue

@@ -39,7 +39,8 @@
         "
         ok-only
         :ok-disabled="
-          !contributors.photographe.size || !contributors.createur.size
+          !contributorsByContributionType.photographe.size ||
+          !contributorsByContributionType.createur.size
         "
         :ok-title="$t(action === 'export' ? 'Export' : 'Submit')"
         @ok="onOK"
@@ -59,7 +60,9 @@
         >
           <h2>{{ $t(ucFirst(userContributionEnL10n[contributionType])) }}</h2>
           <b-alert
-            :model-value="!contributors[contributionType].size"
+            :model-value="
+              !contributorsByContributionType[contributionType].size
+            "
             variant="warning"
           >
             {{ $t("You should select at least one user") }} </b-alert
@@ -70,20 +73,20 @@
             :min-input-length="0"
             @select-item="
               (user: SimpleUser) => {
-                contributors[contributionType as contribution].add(user);
+                contributorsByContributionType[contributionType as contribution].add(user);
               }
             "
           />
           <ul>
             <li
-              v-for="contributor in contributors[contributionType]"
+              v-for="contributor in contributorsByContributionType[contributionType as contribution]"
               :key="contributor.username"
             >
               {{ contributor.username }}
               <i-bi-x-square-fill
                 class="clickable"
                 @click="
-                  contributors[contributionType as contribution].delete(
+                  contributorsByContributionType[contributionType as contribution].delete(
                     contributor,
                   );
                 "
@@ -107,16 +110,17 @@ import type { contribution } from "~prisma-schemas/schemas/edgecreator";
 import type { SimpleUser } from "~types/SimpleUser";
 import { stores as webStores } from "~web";
 
-const userContributionEnL10n: Record<contribution, string> = {
+const userContributionEnL10n = {
   photographe: "photographers",
   createur: "designers",
-};
+} as const;
 
 const { saveEdgeSvg } = saveEdge();
 
 const { t: $t } = useI18n();
 const userStore = webStores.users();
 const mainStore = main();
+const { issuecodes, contributors } = storeToRefs(mainStore);
 
 const { action } = defineProps<{
   action: "save" | "submit" | "export";
@@ -127,10 +131,10 @@ const progress = ref(0);
 const issueIndexToSave = ref<number>();
 const result = ref<string>();
 
-const contributors = ref<Record<contribution, Set<SimpleUser>>>({
-  photographe: new Set(),
-  createur: new Set(),
-});
+const contributorsByContributionType = ref({
+  photographe: new Set<SimpleUser>(),
+  createur: new Set<SimpleUser>(),
+} as const);
 
 const label = computed(() => $t(ucFirst(action)));
 
@@ -150,8 +154,7 @@ watch(progress, (newValue) => {
   }
 });
 watch(issueIndexToSave, (newValue) => {
-  console.log("issueIndexToSave", newValue);
-  const currentIssuecode = mainStore.issuecodes[newValue!];
+  const currentIssuecode = issuecodes.value[newValue!];
 
   if (currentIssuecode === undefined) {
     return;
@@ -161,15 +164,15 @@ watch(issueIndexToSave, (newValue) => {
   nextTick(() => {
     saveEdgeSvg(
       currentIssuecode,
-      Array.from(mainStore.contributors).filter(
+      Array.from(contributors.value).filter(
         ({ issuecode }) => issuecode === currentIssuecode,
       ),
       action === "export",
       action === "submit",
     ).then((response) => {
       const isSuccess = response!.paths.svgPath;
       if (isSuccess) {
-        progress.value += 100 / mainStore.issuecodes.length;
+        progress.value += 100 / issuecodes.value.length;
         issueIndexToSave.value!++;
       } else {
         progress.value = 0;
@@ -185,8 +188,10 @@ const onOK = () => {
     for (const contributionType of Object.keys(
       contributors.value,
     ) as contribution[]) {
-      for (const contributor of contributors.value[contributionType]) {
-        for (const issuecode of mainStore.issuecodes) {
+      for (const contributor of contributorsByContributionType.value[
+        contributionType
+      ]) {
+        for (const issuecode of issuecodes.value) {
           mainStore.addContributor({
             issuecode,
             contributionType,
@@ -204,7 +209,8 @@ const ucFirst = (text: string) =>
 
 const getUsersWithoutContributors = (contributionType: contribution) =>
   userStore.allUsers!.filter(
-    (contributor) => !contributors.value[contributionType].has(contributor),
+    (contributor) =>
+      !contributorsByContributionType.value[contributionType].has(contributor),
   );
 
 const onClick = () => {
@@ -214,6 +220,21 @@ const onClick = () => {
     issueIndexToSave.value = 0;
   }
 };
+
+onMounted(() => {
+  contributorsByContributionType.value = {
+    photographe: new Set(
+      Array.from(contributors.value)
+        .filter(({ contributionType }) => contributionType === "photographe")
+        .map(({ user }) => user),
+    ),
+    createur: new Set(
+      Array.from(contributors.value)
+        .filter(({ contributionType }) => contributionType === "createur")
+        .map(({ user }) => user),
+    ),
+  };
+});
 </script>
 <style scoped lang="scss">
 :deep(.btn) {

apps/edgecreator/src/pages/upload.vue

@@ -135,25 +135,20 @@ meta:
 <script lang="ts" setup>
 import "cropperjs/dist/cropper.css";
 
-import { useToast } from "bootstrap-vue-next";
 import type Cropper from "cropperjs";
 import { nextTick } from "vue";
 import VueCropper from "vue-cropperjs";
-import type { CropperData } from "vue-cropperjs";
 import { useI18n } from "vue-i18n";
 
 import { edgecreatorSocketInjectionKey } from "~/composables/useEdgecreatorSocket";
 import useSaveEdge from "~/composables/useSaveEdge";
-import type { ModelContributor } from "~types/ModelContributor";
 
 const i18n = useI18n();
 
 const { upload: uploadEvents } = inject(edgecreatorSocketInjectionKey)!;
 
 const { saveEdgeSvg } = useSaveEdge();
 
-const toast = useToast();
-
 interface Crop {
   width: number;
   height: number;
@@ -176,42 +171,27 @@ const cropper = ref<Cropper>();
 
 const isWidthBiggerThanHeight = ref(false);
 
-const initialContributors = computed(
-  (): Omit<ModelContributor, "issuecode">[] =>
-    !collection().user
-      ? []
-      : [
-          {
-            contributionType: "photographe",
-            user: {
-              id: collection().user!.id,
-              username: collection().user!.username,
-            },
+const initialContributors = computed(() =>
+  !collection().user
+    ? []
+    : [
+        {
+          contributionType: "photographe" as const,
+          user: {
+            id: collection().user!.id,
+            username: collection().user!.username,
           },
-        ],
+        },
+      ],
 );
 
 const addCrop = () => {
-  const data = cropper.value!.getData() as CropperData;
-  if (data.height < data.width) {
-    toast.create({
-      props: {
-        body: i18n
-          .t(
-            `The width of your selection is bigger than its height! Make sure that the edges appear vertically on the photo.`,
-          )
-          .toString(),
-        title: i18n.t("Error").toString(),
-      },
-    });
-  } else {
-    crops.value.push({
-      ...currentCrop.value,
-      sent: false,
-      url: cropper.value!.getCroppedCanvas().toDataURL("image/jpeg"),
-    });
-    currentCrop.value = { width: 15, height: 200 };
-  }
+  crops.value.push({
+    ...currentCrop.value,
+    sent: false,
+    url: cropper.value!.getCroppedCanvas().toDataURL("image/jpeg"),
+  });
+  currentCrop.value = { width: 15, height: 200 };
 };
 const uploadAll = async () => {
   for (const crop of crops.value.filter(({ sent }) => !sent)) {
@@ -286,8 +266,9 @@ const update = (data: { url: string }) => {
 
 onMounted(() => {
   setInterval(() => {
-    isWidthBiggerThanHeight.value =
-      cropper.value?.getData().width > cropper.value?.getData().height;
+    isWidthBiggerThanHeight.value = !cropper.value?.getData()
+      ? false
+      : cropper.value.getData().width > cropper.value.getData().height;
   }, 100);
 });
 </script>

packages/api/.env

@@ -21,7 +21,7 @@ [email protected]
 SMTP_FRIENDLYNAME=DucksManager
 
 WEBSITE_ROOT="http://localhost:8001"
-EDGECREATOR_ROOT="http://localhost:3002"
+EDGECREATOR_ROOT="http://localhost:8002"
 
 PUSHER_INSTANCE_ID=
 PUSHER_SECRET_KEY=