api: Add event to retrieve issues from a publication code

edgecreator: Call the new event

Author: bperel

apps/edgecreator/src/components/TopBar.vue

@@ -109,17 +109,30 @@
     </b-row>
     <b-row align="center" class="pb-1">
       <b-col v-if="publicationName" align-self="center">
-        <issue :issuecode="issuecodes[0]" hide-condition no-wrap>
+        <issue
+          :issue="
+            publicationIssues!.find(
+              ({ issuecode }) => issuecode === issuecodes[0],
+            )
+          "
+          hide-condition
+          no-wrap
+        >
           <template v-if="isEditingMultiple" #title-suffix>
             <template v-if="mainStore.isRange">
               {{ $t("to") }}
-              {{ issuecodes[issuecodes.length - 1] }}
+              {{ publicationIssues!.find(
+              ({ issuecode }) => issuecode === issuecodes[issuecodes.length - 1],
+            )!.issuenumber }}
             </template>
             <template v-else-if="issuecodes.length > 1">
               <span
                 v-for="otherIssuecode in issuecodes.slice(1)"
                 :key="`other-${otherIssuecode}`"
-                >, {{ otherIssuecode }}</span
+                >,
+                {{ publicationIssues!.find(
+              ({ issuecode }) => issuecode === issuecodes[issuecodes.length - 1],
+            )!.issuenumber }}</span
               >
             </template>
           </template>
@@ -264,8 +277,13 @@ const { showPreviousEdge, showNextEdge } = surroundingEdge();
 const { dimensions: editingDimensions } = storeToRefs(editingStep());
 const { hasRole } = webStores.collection();
 const stepStore = step();
-const { issuecodes, photoUrls, edgeIssuecodesAfter, edgeIssuecodesBefore } =
-  storeToRefs(mainStore);
+const {
+  issuecodes,
+  publicationIssues,
+  photoUrls,
+  edgeIssuecodesAfter,
+  edgeIssuecodesBefore,
+} = storeToRefs(mainStore);
 
 interface ModelToClone {
   editMode: string;

apps/edgecreator/src/pages/edit/[...all].vue

@@ -51,7 +51,11 @@
                   <i-bi-pencil />
                 </div>
                 <div>
-                  {{ issuecodeDetails[issuecode].issuenumber }}
+                  {{
+                    publicationIssues!.find(
+                      (issue) => issue.issuecode === issuecode,
+                    )!.issuenumber
+                  }}
                 </div>
               </th>
               <th
@@ -147,12 +151,13 @@ import type { Dimensions, Options } from "~/stores/step";
 import { step } from "~/stores/step";
 import { ui } from "~/stores/ui";
 import { stores as webStores } from "~web";
-import { coa } from "~web/src/stores/coa";
 
 const route = useRoute();
 const uiStore = ui();
+
 const mainStore = main();
-const { issuecodeDetails } = storeToRefs(coa());
+const { publicationIssues } = storeToRefs(mainStore);
+
 const stepStore = step();
 const editingStepStore = editingStep();
 const { showPreviousEdge, showNextEdge } = useSurroundingEdge();
@@ -182,10 +187,8 @@ const dimensionsPerIssuecode = computed(() =>
 );
 
 const getActualIssuecode = (issuecode: string) => {
-  const actualIssuecode = Object.values(issuecodeDetails.value).find(
-    ({ publicationcode: thisPublicationcode, issuenumber }) =>
-      thisPublicationcode === publicationcode.value &&
-      issuenumber === issuecode.split(/[ ]+/)[1],
+  const actualIssuecode = publicationIssues.value!.find(
+    ({ issuenumber }) => issuenumber === issuecode.split(/[ ]+/)[1],
   )?.issuecode;
 
   if (actualIssuecode === undefined) {
@@ -230,7 +233,6 @@ try {
   publicationcode.value = issuecodeParts[0];
 
   await mainStore.loadPublicationIssues();
-
   firstIssuecode = getActualIssuecode(firstIssuecode);
   if (lastIssuecode) {
     lastIssuecode = getActualIssuecode(lastIssuecode);

apps/edgecreator/src/stores/main.ts

@@ -25,11 +25,12 @@ export const main = defineStore("main", () => {
     warnings = ref<string[]>([]),
     country = computed(() => publicationcode.value?.split("/")[0]),
     magazine = computed(() => publicationcode.value?.split("/")[1]),
-    publicationIssuecodes = computed(
+    publicationIssues = computed(
       () =>
         (publicationcode.value &&
-          webStores.coa().issuecodesByPublicationcode[publicationcode.value]) ||
-        [],
+          publicationcode.value in webStores.coa().issuesByPublicationcode &&
+          webStores.coa().issuesByPublicationcode[publicationcode.value]) ||
+        undefined,
     ),
     publicationElementsForGallery = computed(
       () =>
@@ -91,26 +92,32 @@ export const main = defineStore("main", () => {
       lastIssuecode?: string,
       otherIssuecodes?: string[],
     ) => {
-      const firstIssueIndex = publicationIssuecodes.value.findIndex(
-        (issuecode) => issuecode === firstIssuecode,
+      if (!publicationIssues.value) {
+        console.error("Publication issues not loaded");
+        return;
+      }
+      const firstIssueIndex = publicationIssues.value.findIndex(
+        ({ issuecode }) => issuecode === firstIssuecode,
       );
       if (lastIssuecode === undefined) {
         issuecodes.value = [firstIssuecode, ...(otherIssuecodes || [])];
       } else {
         isRange.value = true;
-        let lastIssueIndex = publicationIssuecodes.value.findIndex(
-          (issuecode) => issuecode === lastIssuecode,
+        let lastIssueIndex = publicationIssues.value.findIndex(
+          ({ issuecode }) => issuecode === lastIssuecode,
         );
         if (lastIssueIndex === -1) {
-          lastIssueIndex = publicationIssuecodes.value.length - 1;
+          lastIssueIndex = publicationIssues.value.length - 1;
           console.warn(
-            `Issue ${lastIssuecode} doesn't exist, falling back to ${publicationIssuecodes.value[lastIssueIndex]}`,
+            `Issue ${lastIssuecode} doesn't exist, falling back to ${publicationIssues.value[lastIssueIndex]}`,
           );
         }
 
-        issuecodes.value = publicationIssuecodes.value.filter(
-          (_, index) => index >= firstIssueIndex && index <= lastIssueIndex,
-        );
+        issuecodes.value = publicationIssues.value
+          .filter(
+            (_, index) => index >= firstIssueIndex && index <= lastIssueIndex,
+          )
+          .map(({ issuecode }) => issuecode);
       }
     },
     loadItems = async ({ itemType }: { itemType: "elements" | "photos" }) => {
@@ -128,9 +135,7 @@ export const main = defineStore("main", () => {
       }
     },
     loadPublicationIssues = async () =>
-      webStores
-        .coa()
-        .fetchIssuecodesByPublicationcode([publicationcode.value!]),
+      webStores.coa().fetchIssuesByPublicationcode(publicationcode.value!),
     getEdgePublicationStates = (issuecodes: string[]) =>
       Object.keys(edgeCatalog().publishedEdges)
         .filter((issuecode) => issuecodes.includes(issuecode))
@@ -141,42 +146,47 @@ export const main = defineStore("main", () => {
         );
 
   const firstIssueIndex = computed(() =>
-    publicationIssuecodes.value.findIndex(
-      (issue) => issue === issuecodes.value[0],
+    publicationIssues.value?.findIndex(
+      ({ issuecode }) => issuecode === issuecodes.value[0],
     ),
   );
   const lastIssueIndex = computed(() =>
-    publicationIssuecodes.value.findIndex(
-      (issue) => issue === issuecodes.value[issuecodes.value.length - 1],
+    publicationIssues.value?.findIndex(
+      ({ issuecode }) =>
+        issuecode === issuecodes.value[issuecodes.value.length - 1],
     ),
   );
 
   const edgeIssuecodesBefore = computed(() => {
-    if (!edgeCatalog().isCatalogLoaded) {
+    if (!edgeCatalog().isCatalogLoaded || !publicationIssues.value) {
       return [];
     }
-    const issuesBefore = publicationIssuecodes.value.filter(
+    const issuesBefore = publicationIssues.value.filter(
       (_, index) =>
         firstIssueIndex.value !== -1 &&
-        index >= firstIssueIndex.value - 10 &&
-        index < firstIssueIndex.value,
+        index >= firstIssueIndex.value! - 10 &&
+        index < firstIssueIndex.value!,
     );
 
-    return getEdgePublicationStates(issuesBefore);
+    return getEdgePublicationStates(
+      issuesBefore.map(({ issuecode }) => issuecode),
+    );
   });
 
   const edgeIssuecodesAfter = computed(() => {
-    if (!edgeCatalog().isCatalogLoaded) {
+    if (!edgeCatalog().isCatalogLoaded || !publicationIssues.value) {
       return [];
     }
-    const issuesAfter = publicationIssuecodes.value.filter(
+    const issuesAfter = publicationIssues.value.filter(
       (_, index) =>
         lastIssueIndex.value !== -1 &&
-        index > lastIssueIndex.value &&
-        index <= lastIssueIndex.value + 10,
+        index > lastIssueIndex.value! &&
+        index <= lastIssueIndex.value! + 10,
     );
 
-    return getEdgePublicationStates(issuesAfter);
+    return getEdgePublicationStates(
+      issuesAfter.map(({ issuecode }) => issuecode),
+    );
   });
   return {
     publicationcode,
@@ -189,7 +199,7 @@ export const main = defineStore("main", () => {
     publicationElements,
     publicationPhotos,
     warnings,
-    publicationIssuecodes,
+    publicationIssues,
     publicationElementsForGallery,
     publicationPhotosForGallery,
     addContributor,

apps/web/src/components/Issue.vue

@@ -20,23 +20,40 @@
 
 <script setup lang="ts">
 const {
-  issuecode,
+  issuecode = undefined,
+  issue: propIssue = undefined,
   clickable = false,
   hideCondition = false,
   noWrap = true,
   flex = true,
   isPublic = false,
-} = defineProps<{
-  issuecode: string;
-  clickable?: boolean;
-  hideCondition?: boolean;
-  noWrap?: boolean;
-  flex?: boolean;
-  isPublic?: boolean;
-}>();
+} = defineProps<
+  (
+    | {
+        issuecode: string;
+        issue: undefined;
+      }
+    | {
+        issue: {
+          issuecode: string;
+          publicationcode: string;
+          issuenumber: string;
+        };
+        issuecode: undefined;
+      }
+  ) & {
+    clickable?: boolean;
+    hideCondition?: boolean;
+    noWrap?: boolean;
+    flex?: boolean;
+    isPublic?: boolean;
+  }
+>();
 
 const store = coa();
-const issue = computed(() => store.issuecodeDetails?.[issuecode]);
+const issue = computed(() =>
+  issuecode ? store.issuecodeDetails?.[issuecode] : propIssue!,
+);
 const publicationname = computed(
   () =>
     issue.value?.publicationcode &&

apps/web/src/composables/useDmSocket.ts

@@ -98,12 +98,7 @@ const defaultExport = (options: {
       namespaces.PRESENTATION_TEXT,
     ),
     edges: socket.addNamespace<EdgesEvents>(namespaces.EDGES, {}),
-    coa: socket.addNamespace<CoaEvents>(namespaces.COA, {
-      cache: {
-        storage: cacheStorage,
-        ttl: until4am(),
-      },
-    }),
+    coa: socket.addNamespace<CoaEvents>(namespaces.COA),
     globalStats: socket.addNamespace<GlobalStatsEvents>(
       namespaces.GLOBAL_STATS,
       {

apps/web/src/stores/coa.ts

@@ -61,7 +61,10 @@ export const coa = defineStore("coa", () => {
       EventOutput<CoaClientEvents, "getIssuePopularities">
     >({}),
     issuecodesByPublicationcode = ref<
-      EventOutput<CoaClientEvents, "getIssuesByPublicationcodes">
+      EventOutput<CoaClientEvents, "getIssuecodesByPublicationcodes">
+    >({}),
+    issuesByPublicationcode = ref<
+      Record<string, EventOutput<CoaClientEvents, "getIssuesByPublicationcode">>
     >({}),
     issueQuotations = ref<
       SuccessfulEventOutput<
@@ -244,15 +247,18 @@ export const coa = defineStore("coa", () => {
       );
 
       if (newPublicationcodes.length) {
-        const issuesByPublicationcode =
-          await events.getIssuesByPublicationcodes(newPublicationcodes);
-
         Object.assign(
           issuecodesByPublicationcode.value,
-          issuesByPublicationcode,
+          await events.getIssuecodesByPublicationcodes(newPublicationcodes),
         );
       }
     },
+    fetchIssuesByPublicationcode = async (publicationcode: string) => {
+      if (!(publicationcode in issuesByPublicationcode.value)) {
+        issuesByPublicationcode.value[publicationcode] =
+          await events.getIssuesByPublicationcode(publicationcode);
+      }
+    },
     fetchRecentIssues = () => events.getRecentIssues(),
     fetchCoverUrls = (publicationcode: string) =>
       events.getIssueCoverDetailsByPublicationcode(publicationcode),
@@ -279,6 +285,7 @@ export const coa = defineStore("coa", () => {
     fetchCoverUrlsByIssuecodes,
     fetchIssuecodeDetails,
     fetchIssuecodesByPublicationcode,
+    fetchIssuesByPublicationcode,
     fetchIssuePopularities,
     fetchIssueQuotations,
     fetchIssueUrls,
@@ -296,6 +303,7 @@ export const coa = defineStore("coa", () => {
     issuePopularities: issuePopularities,
     issuecodes,
     issueQuotations,
+    issuesByPublicationcode,
     personNames,
     publicationNames,
     publicationNamesFullCountries,

packages/api/eslint.config.mjs

@@ -46,4 +46,5 @@ export default tseslint.config(
   },
   {
     files: ["**/*.ts"]
-  });
+  }
+);

packages/api/services/coa/issues/index.ts

@@ -12,12 +12,12 @@ export default {
       .then((data) => data.groupBy("issuecode"));
   },
 
-  getIssuesByPublicationcodes: async (publicationcodes: string[]) =>
+  getIssuecodesByPublicationcodes: async (publicationcodes: string[]) =>
     prismaCoa.inducks_issue
       .findMany({
         select: {
           publicationcode: true,
-          issuecode: true,
+          issuecode: true
         },
         where: {
           publicationcode: {
@@ -27,6 +27,19 @@ export default {
       })
       .then((data) => data.groupBy("publicationcode", "issuecode[]")),
 
+  getIssuesByPublicationcode: async (publicationcode: string) =>
+    prismaCoa.inducks_issue
+      .findMany({
+        select: {
+          publicationcode: true,
+          issuecode: true,
+          issuenumber: true,
+        },
+        where: {
+          publicationcode
+        },
+      }),
+
   getIssuesByStorycode: async (storycode: string) =>
     prismaCoa.$queryRaw<IssueWithIssuecodeOnly[]>`
       SELECT publicationcode, issuenumber, issuecode