fix: refresh dashboard resume names after editing in the editor

Renovamen · Jul 11, 2024 · 7543d52 · 7543d52
1 parent 620029c
commit 7543d52
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 26 deletions.
diff --git a/site/src/components/dashboard/ResumeInfo.vue b/site/src/components/dashboard/ResumeInfo.vue
@@ -9,10 +9,10 @@
     />
 
     <div text="xs muted-foreground" mt-1.5>
-      {{ $t("dashboard.updated") }}{{ updated_at }}
+      {{ $t("dashboard.updated") }}{{ formatDate(resume.updated_at) }}
     </div>
     <div text="xs muted-foreground" mt-0.5>
-      {{ $t("dashboard.created") }}{{ created_at }}
+      {{ $t("dashboard.created") }}{{ formatDate(resume.created_at) }}
     </div>
   </div>
 </template>
@@ -45,7 +45,4 @@ const formatDate = (date?: string) =>
     .substring(0, 19)
     .replace("T", " ")
     .replaceAll("-", "/");
-
-const created_at = computed(() => formatDate(props.resume.created_at));
-const updated_at = computed(() => formatDate(props.resume.updated_at));
 </script>
diff --git a/site/src/components/dashboard/ResumeItem.vue b/site/src/components/dashboard/ResumeItem.vue
@@ -49,11 +49,11 @@ const emit = defineEmits<{
 }>();
 
 const { PAPER } = useConstant();
+const size = PAPER.SIZES[props.resume.styles.paper];
 
-const size = computed(() => PAPER.SIZES[props.resume.styles.paper]);
 const renderRef = ref<InstanceType<typeof SharedResumeRender>>();
 
-const updateResumeItem = async () => {
+onMounted(async () => {
   // set styles that are defined via CSS editor
   dynamicCssService.injectCssEditor(props.resume.css, props.resume.id);
   // load Google fonts
@@ -64,10 +64,7 @@ const updateResumeItem = async () => {
   // force update resume render
   await delay(100);
   renderRef.value?.render();
-};
-
-onMounted(updateResumeItem);
-onUpdated(updateResumeItem);
+});
 </script>
 
 <style scoped>

diff --git a/site/src/components/editor/Preview.vue b/site/src/components/editor/Preview.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="pane-container overflow-scroll hide-scrollbar bg-secondary" border="4 secondary">
+  <div
+    class="pane-container overflow-scroll hide-scrollbar bg-secondary"
+    border="4 secondary"
+  >
     <VueZoom ref="zoom" :scale="scale">
       <SharedResumeRender
         id="preview"

diff --git a/site/src/pages/dashboard.vue b/site/src/pages/dashboard.vue
@@ -11,12 +11,20 @@
       <UiScrollArea class="flex-1 mt-4 px-2">
         <div class="gap-x-4 gap-y-8 pt-4" flex="~ wrap">
           <DashboardNewResume />
-          <DashboardResumeItem
-            v-for="resume in list"
-            :key="resume.id"
-            :resume="resume"
-            @update="refresh"
-          />
+
+          <template v-if="status === 'success'">
+            <DashboardResumeItem
+              v-for="resume in resumes"
+              :key="resume.id"
+              :resume="resume"
+              @update="refresh"
+            />
+          </template>
+          <template v-else>
+            <div v-for="i in 4" :key="i" class="w-56 h-80">
+              <UiSkeleton class="w-[210px] h-[299px] bg-secondary mx-auto" />
+            </div>
+          </template>
         </div>
       </UiScrollArea>
     </div>
@@ -26,12 +34,15 @@
 <script lang="ts" setup>
 import type { DbResume } from "~/utils/storage";
 
-const { data: list, refresh } = useLazyAsyncData<DbResume[]>(
-  "resume-list",
-  () => storageService.getResumes(),
-  {
-    server: false,
-    default: () => []
-  }
-);
+const {
+  data: resumes,
+  refresh,
+  status
+} = useAsyncData<DbResume[]>("resume-list", () => storageService.getResumes(), {
+  server: false,
+  immediate: false,
+  default: () => []
+});
+
+onMounted(refresh);
 </script>