Skip to content

Commit 83002cf

Browse files
DobruniaDobrunia
authored
Merge pull request #327 from codex-team/feat/new-homepage-navigation
feat(new homepage navigation): add section "my notes" to homepage navigation
2 parents c3f9a23 + 77f836a commit 83002cf

File tree

8 files changed

+125
-53
lines changed

8 files changed

+125
-53
lines changed

‎src/application/i18n/messages/en.json‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,8 +100,17 @@
100100
"caption": "Knowledge storage and presentation",
101101
"button": "New"
102102
},
103+
"sections": {
104+
"recents": {
105+
"title": "Recents"
106+
},
107+
"myNotes": {
108+
"title": "My notes"
109+
}
110+
},
111+
"navigation": "Navigation",
103112
"updated": "Updated",
104-
"title": "Recents",
113+
"title": "Home",
105114
"authText": "You are not logged in, log in to see your recent notes"
106115
},
107116
"error": {

‎src/application/services/useNoteList.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,9 @@ interface UseNoteListComposableState {
3838

3939
/**
4040
* Application service for working with the Note list
41+
* @param onlyCreatedByUser - if true, returns notes created by the user
4142
*/
42-
export default function (): UseNoteListComposableState {
43+
export default function (onlyCreatedByUser = false): UseNoteListComposableState {
4344
/**
4445
* NoteList ref
4546
*/
@@ -74,7 +75,7 @@ export default function (): UseNoteListComposableState {
7475
const load = async (page: number): Promise<NoteList> => {
7576
isLoading.value = true;
7677

77-
const list = await noteListService.getNoteList(page);
78+
const list = await noteListService.getNoteList(page, onlyCreatedByUser);
7879

7980
isLoading.value = false;
8081

‎src/domain/note.repository.interface.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,9 @@ export default interface NoteRepositoryInterface {
2626
/**
2727
* Returns a list of notes
2828
* @param page - number of pages
29+
* @param onlyCreatedByUser - if true, returns notes created by the user
2930
*/
30-
getNoteList(page: number): Promise<NoteList>;
31+
getNoteList(page: number, onlyCreatedByUser?: boolean): Promise<NoteList>;
3132

3233
/**
3334
* Creates a new note

‎src/domain/noteList.service.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,11 @@ export default class NoteListService {
2323
* Returns note list
2424
* @todo - move loading images data logic to separate service for optimization
2525
* @param page - number of current pages
26+
* @param onlyCreatedByUser - if true, returns notes created by the user
2627
* @returns list of notes
2728
*/
28-
public async getNoteList(page: number): Promise<NoteList> {
29-
const noteList = await this.repository.getNoteList(page);
29+
public async getNoteList(page: number, onlyCreatedByUser = false): Promise<NoteList> {
30+
const noteList = await this.repository.getNoteList(page, onlyCreatedByUser);
3031

3132
/**
3233
* Note list with valid image urls in cover

‎src/infrastructure/note.repository.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,9 +62,12 @@ export default class NoteRepository implements NoteRepositoryInterface {
6262
/**
6363
* Gets note list
6464
* @param page - number of pages to get
65+
* @param onlyCreatedByUser - if true, returns notes created by the user, otherwise returns all notes
6566
*/
66-
public async getNoteList(page: number): Promise<NoteList> {
67-
return await this.transport.get<NoteList>(`/notes`, { page });
67+
public async getNoteList(page: number, onlyCreatedByUser = false): Promise<NoteList> {
68+
const endpoint = onlyCreatedByUser ? '/notes/created' : '/notes';
69+
70+
return await this.transport.get<NoteList>(endpoint, { page });
6871
}
6972

7073
/**

‎src/presentation/components/note-list/NoteList.vue‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,12 +46,23 @@ import { getTitle } from '@/infrastructure/utils/note';
4646
import { useI18n } from 'vue-i18n';
4747
import { Card, CardSkeleton, Button } from '@codexteam/ui/vue';
4848
49+
interface Props {
50+
/**
51+
* If true, returns notes created by the user
52+
*/
53+
onlyCreatedByUser?: boolean;
54+
}
55+
56+
const props = withDefaults(defineProps<Props>(), {
57+
onlyCreatedByUser: false,
58+
});
59+
4960
const {
5061
noteList,
5162
loadMoreNotes,
5263
hasMoreNotes,
5364
isLoading,
54-
} = useNoteList();
65+
} = useNoteList(props.onlyCreatedByUser);
5566
const { t } = useI18n();
5667
5768
/**

‎src/presentation/pages/Home.vue‎

Lines changed: 87 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,10 @@
11
<template>
2-
<PageBlock data-dimensions="large">
3-
<router-link
4-
v-if="user"
5-
to="/new"
6-
>
2+
<PageBlock
3+
data-dimensions="large"
4+
>
5+
<!-- Unauthorized users -->
6+
<template v-if="!user">
77
<Container>
8-
<div :class="$style['container__create-new-note']">
9-
<Row
10-
:title="t('home.createNewNote.title')"
11-
:subtitle="t('home.createNewNote.caption')"
12-
>
13-
<template #left>
14-
<Hammer />
15-
</template>
16-
<template #right>
17-
<Button
18-
secondary
19-
trailing-icon="ChevronRight"
20-
>
21-
{{ t('home.createNewNote.button') }}
22-
</Button>
23-
</template>
24-
</Row>
25-
</div>
26-
</Container>
27-
</router-link>
28-
<Heading
29-
v-if="user"
30-
:level="1"
31-
:class="$style['page-header']"
32-
>
33-
{{ $t('home.title') }}
34-
</Heading>
35-
36-
<div v-if="user === null">
37-
<Container data-dimensions="large">
388
<Row :title="t('home.authText')">
399
<template #right>
4010
<Button
@@ -45,26 +15,102 @@
4515
</template>
4616
</Row>
4717
</Container>
48-
</div>
49-
<NoteList
50-
v-else-if="user !== undefined"
51-
/>
18+
</template>
19+
20+
<!-- Authorized users - menu -->
21+
<template
22+
v-if="user"
23+
#left
24+
>
25+
<VerticalMenu
26+
class="menu"
27+
:items="[verticalMenuItems]"
28+
/>
29+
</template>
30+
31+
<!-- Authorized users - content -->
32+
<template v-if="user">
33+
<router-link
34+
to="/new"
35+
>
36+
<Container>
37+
<div :class="$style['container__create-new-note']">
38+
<Row
39+
:title="t('home.createNewNote.title')"
40+
:subtitle="t('home.createNewNote.caption')"
41+
>
42+
<template #left>
43+
<Hammer />
44+
</template>
45+
<template #right>
46+
<Button
47+
secondary
48+
trailing-icon="ChevronRight"
49+
>
50+
{{ t('home.createNewNote.button') }}
51+
</Button>
52+
</template>
53+
</Row>
54+
</div>
55+
</Container>
56+
</router-link>
57+
58+
<Heading
59+
:level="1"
60+
:class="$style['page-header']"
61+
>
62+
{{ sectionTitle }}
63+
</Heading>
64+
<NoteList
65+
:key="activeMenuItem"
66+
:only-created-by-user="tabs[activeMenuItem].onlyCreatedByUser"
67+
/>
68+
</template>
5269
</PageBlock>
5370
</template>
5471

5572
<script setup lang="ts">
5673
import { useHead } from 'unhead';
5774
import { useI18n } from 'vue-i18n';
5875
import { useAppState } from '@/application/services/useAppState';
59-
import { Container, Row, Button, Heading, PageBlock } from '@codexteam/ui/vue';
76+
import { Container, Row, Button, Heading, PageBlock, VerticalMenu, type VerticalMenuItem } from '@codexteam/ui/vue';
6077
import Hammer from '../components/pictures/Hammer.vue';
6178
import NoteList from '@/presentation/components/note-list/NoteList.vue';
6279
import useAuth from '@/application/services/useAuth';
80+
import { computed, ref } from 'vue';
6381
6482
const { user } = useAppState();
6583
const { t } = useI18n();
6684
const { showGoogleAuthPopup } = useAuth();
6785
86+
const tabs = {
87+
recents: {
88+
titleKey: 'home.sections.recents.title',
89+
onlyCreatedByUser: false,
90+
},
91+
myNotes: {
92+
titleKey: 'home.sections.myNotes.title',
93+
onlyCreatedByUser: true,
94+
},
95+
};
96+
97+
type TabId = keyof typeof tabs;
98+
99+
const activeMenuItem = ref<TabId>('recents');
100+
const sectionTitle = computed(() => t(tabs[activeMenuItem.value].titleKey));
101+
102+
const verticalMenuItems = computed<VerticalMenuItem>(() => ({
103+
title: t('home.navigation'),
104+
isActive: false,
105+
items: (Object.keys(tabs) as TabId[]).map(tabId => ({
106+
title: t(tabs[tabId].titleKey),
107+
isActive: activeMenuItem.value === tabId,
108+
onActivate: () => {
109+
activeMenuItem.value = tabId;
110+
},
111+
})),
112+
}));
113+
68114
/**
69115
* Changing the title in the browser
70116
*/
@@ -85,6 +131,6 @@ useHead({
85131
}
86132
87133
.page-header {
88-
padding: var(--spacing-xxl) var(--h-padding) 0;
134+
padding-top: var(--spacing-xxl);
89135
}
90136
</style>

‎yarn.lock‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2541,9 +2541,9 @@ __metadata:
25412541
linkType: hard
25422542

25432543
"caniuse-lite@npm:^1.0.30001587, caniuse-lite@npm:^1.0.30001599":
2544-
version: 1.0.30001620
2545-
resolution: "caniuse-lite@npm:1.0.30001620"
2546-
checksum: 1831e519c29ce6971bc50d56bab196a307fcb4181e7deaa80df314b035b87b3912b8626b4e87adc301d0bfe6a90b99814101b1cb28114b96e720f996f19bdc0d
2544+
version: 1.0.30001754
2545+
resolution: "caniuse-lite@npm:1.0.30001754"
2546+
checksum: f5a956d820c6a4de16d0c22eb6bbbbaec346f502f324523311bbbfe4dd8ed0d69ae6034dd96a2f901156f3e4571606670be01f74c8234ac56ea7820383b6aca0
25472547
languageName: node
25482548
linkType: hard
25492549

0 commit comments

Comments
 (0)