fix(journals): Fixed journal profile context change

buddh4 · Jun 13, 2024 · 5fd3465 · 5fd3465
1 parent 8c26780
commit 5fd3465
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 59 deletions.
diff --git a/packages/core/web/src/profiles/components/menus/ProfileRelationsChooser.vue b/packages/core/web/src/profiles/components/menus/ProfileRelationsChooser.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useProfileRelationInfosStore } from '@/profiles/stores/profile-relation-infos.store';
 import { storeToRefs } from 'pinia';
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useCreateProfileStore } from '@/profiles/stores/create-profile.store';
 import {
   CreateGroupProfilePermission,
@@ -13,6 +13,7 @@ import {
 import { t } from '@/i18n';
 import { useGlobalPermissions } from '@/common/composables';
 import ProfileRelationsChooserList from './ProfileRelationsChooserList.vue';
+import { useAuthStore } from '@/auth';
 
 const profileRelationInfosStore = useProfileRelationInfosStore();
 

diff --git a/packages/core/web/src/profiles/stores/profile-relation-infos.store.ts b/packages/core/web/src/profiles/stores/profile-relation-infos.store.ts
@@ -1,21 +1,33 @@
-import { defineStore } from 'pinia';
+import { defineStore, storeToRefs } from 'pinia';
 import {
   ProfileRelationInfo,
   ProfileRelationInfos,
   useProfileRelationInfosClient,
 } from '@lyvely/interface';
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import { loadingStatus, useStatus } from '@/core';
+import { useAuthStore } from '@/auth';
 
 export const useProfileRelationInfosStore = defineStore('profile-relation-infos', () => {
-  const relations = ref<ProfileRelationInfos>({ profiles: [] });
   const profilesRelationInfosClient = useProfileRelationInfosClient();
+  const relations = ref<ProfileRelationInfos>({ profiles: [] });
   const status = useStatus();
 
+  const reset = () => {
+    relations.value = { profiles: [] };
+    status.resetStatus();
+  };
+
   async function getRelations(force = false): Promise<ProfileRelationInfos> {
     return !force && status.isStatusSuccess() ? Promise.resolve(relations.value) : loadRelations();
   }
 
+  const { user } = storeToRefs(useAuthStore());
+
+  watch(user, async (oldUser, newUser) => {
+    if (oldUser?.id !== newUser?.id) reset();
+  });
+
   async function loadRelations() {
     return loadingStatus(
       profilesRelationInfosClient.getAllProfileRelationInfos(),

diff --git a/packages/features/journals/web/src/components/calendar-plan/JournalCalendarPlan.vue b/packages/features/journals/web/src/components/calendar-plan/JournalCalendarPlan.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { LyAlert, LyContentPanel, LyFloatingAddButton, LyIcon } from '@lyvely/ui';
+import JournalCalendarPlanSection from '@/components/calendar-plan/JournalCalendarPlanSection.vue';
+import { useJournalPermissions } from '@lyvely/journals-interface';
+import { t, useProfilePermissions } from '@lyvely/web';
+import { useJournalPlanStore } from '@/stores';
+import { onBeforeMount, onUnmounted, ref } from 'vue';
+import { CalendarPlanFilterNavigation, CalendarPlanner } from '@lyvely/calendar-plan-web';
+
+const journalStore = useJournalPlanStore();
+const { intervals, filter, createItem, reset } = journalStore;
+
+const { isEmpty } = journalStore;
+
+const loaded = ref(false);
+
+const { isAllowed: canCreateJournal } = useProfilePermissions(useJournalPermissions().Create);
+
+const createJournal = () => {
+  if (!canCreateJournal.value) return;
+  createItem();
+};
+
+onBeforeMount(() => journalStore.loadModels().then(() => (loaded.value = true)));
+const unwatch = journalStore.startWatch();
+onUnmounted(() => {
+  unwatch();
+  reset();
+});
+</script>
+
+<template>
+  <calendar-plan-filter-navigation :filter="filter" />
+  <calendar-planner v-if="!isEmpty()">
+    <journal-calendar-plan-section
+      v-for="interval in intervals"
+      :key="interval"
+      :interval="interval" />
+  </calendar-planner>
+  <ly-content-panel v-else-if="loaded">
+    <ly-alert
+      :class="[{ 'cursor-pointer': canCreateJournal }, 'justify-center bg-main']"
+      :role="canCreateJournal ? 'button' : ''"
+      @click="createJournal">
+      <div class="flex flex-col items-center justify-center">
+        <ly-icon name="journal" class="w-20 text-gray-300 dark:text-gray-500" />
+        <span v-if="canCreateJournal" class="font-semibold">{{
+          t('journals.calendar-plan.empty-create')
+        }}</span>
+        <span v-else class="font-semibold">{{ t('journals.calendar-plan.empty') }}</span>
+      </div>
+    </ly-alert>
+  </ly-content-panel>
+
+  <ly-floating-add-button v-if="canCreateJournal" @click="createItem" />
+</template>
+
+<style scoped></style>
diff --git a/packages/features/journals/web/src/main.ts b/packages/features/journals/web/src/main.ts
@@ -8,6 +8,7 @@ import { LyvelyWebApp } from '@lyvely/web';
 import { journalsModule } from './journals.module';
 
 new LyvelyWebApp({
+  apiUrl: 'http://127.0.0.1:8080/api',
   modules: [journalsModule()],
 })
   .init('#app')

diff --git a/packages/features/journals/web/src/views/JournalsView.vue b/packages/features/journals/web/src/views/JournalsView.vue
@@ -1,65 +1,13 @@
 <script lang="ts" setup>
-import { onBeforeMount, onUnmounted, ref } from 'vue';
-import { CalendarPlanner, CalendarPlanFilterNavigation } from '@lyvely/calendar-plan-web';
-import { t, useProfilePermissions } from '@lyvely/web';
-import { useJournalPlanStore } from '@/stores';
-import { useJournalPermissions } from '@lyvely/journals-interface';
-import JournalCalendarPlanSection from '@/components/calendar-plan/JournalCalendarPlanSection.vue';
 import JournalsNavigation from '@/components/menus/JournalsNavigation.vue';
-import {
-  LyAlert,
-  LyButton,
-  LyContentPanel,
-  LyContentRoot,
-  LyFloatingAddButton,
-  LyIcon,
-} from '@lyvely/ui';
-
-const journalStore = useJournalPlanStore();
-const { intervals, filter, createItem } = journalStore;
-
-const { isEmpty } = journalStore;
-
-const loaded = ref(false);
-
-const { isAllowed: canCreateJournal } = useProfilePermissions(useJournalPermissions().Create);
-
-const createJournal = () => {
-  if (!canCreateJournal.value) return;
-  createItem();
-};
-
-onBeforeMount(() => journalStore.loadModels().then(() => (loaded.value = true)));
-const unwatch = journalStore.startWatch();
-onUnmounted(unwatch);
+import { LyContentRoot } from '@lyvely/ui';
+import JournalCalendarPlan from '@/components/calendar-plan/JournalCalendarPlan.vue';
 </script>
 
 <template>
   <ly-content-root>
     <journals-navigation class="md:hidden" />
-    <calendar-plan-filter-navigation :filter="filter" />
-    <calendar-planner v-if="!isEmpty()">
-      <journal-calendar-plan-section
-        v-for="interval in intervals"
-        :key="interval"
-        :interval="interval" />
-    </calendar-planner>
-    <ly-content-panel v-else-if="loaded">
-      <ly-alert
-        :class="[{ 'cursor-pointer': canCreateJournal }, 'justify-center bg-main']"
-        :role="canCreateJournal ? 'button' : ''"
-        @click="createJournal">
-        <div class="flex flex-col items-center justify-center">
-          <ly-icon name="journal" class="w-20 text-gray-300 dark:text-gray-500" />
-          <span v-if="canCreateJournal" class="font-semibold">{{
-            t('journals.calendar-plan.empty-create')
-          }}</span>
-          <span v-else class="font-semibold">{{ t('journals.calendar-plan.empty') }}</span>
-        </div>
-      </ly-alert>
-    </ly-content-panel>
-
-    <ly-floating-add-button v-if="canCreateJournal" @click="createItem" />
+    <journal-calendar-plan />
   </ly-content-root>
 </template>