Merge pull request #267 from codex-team/note-history

feat(note-history): added note-history page

Author: e11sy

src/application/i18n/messages/en.json

@@ -81,6 +81,10 @@
     },
     "lastEdit": "Last edit"
   },
+  "history": {
+    "title": "Versions history",
+    "view": "View"
+  },
   "noteList": {
     "emptyNoteList": "No Notes yet. Make your first note",
     "noteListItem": {
@@ -170,6 +174,7 @@
     "addTool": "Add tool",
     "notFound": "Not found",
     "joinTeam": "Join",
-    "authorization": "Authorize"
+    "authorization": "Authorize",
+    "history": "History"
   }
 }

src/application/router/routes.ts

@@ -9,6 +9,7 @@ import AuthorizationPage from '@/presentation/pages/AuthorizationPage.vue';
 import type { RouteRecordRaw } from 'vue-router';
 import AddTool from '@/presentation/pages/marketplace/AddTool.vue';
 import MarketplacePage from '@/presentation/pages/marketplace/MarketplacePage.vue';
+import History from '@/presentation/pages/History.vue';
 import MarketplaceTools from '@/presentation/pages/marketplace/MarketplaceTools.vue';
 
 // Default production hostname for homepage. If different, then custom hostname used
@@ -43,6 +44,19 @@ const routes: RouteRecordRaw[] = [
       id: String(route.params.id),
     }),
   },
+  {
+    name: 'history',
+    path: '/note/:noteId/history',
+    component: History,
+    meta: {
+      layout: 'fullpage',
+      pageTitleI18n: 'pages.history',
+      authRequired: true,
+    },
+    props: route => ({
+      noteId: String(route.params.noteId),
+    }),
+  },
   {
     name: 'new',
     path: '/new',

src/application/services/useNoteHistory.ts

@@ -0,0 +1,42 @@
+import type { MaybeRefOrGetter, Ref } from 'vue';
+import { computed, onMounted, ref, toValue } from 'vue';
+import type { NoteHistoryRecord, NoteHistoryMeta } from '@/domain/entities/History';
+import type { Note } from '@/domain/entities/Note';
+import { noteHistoryService } from '@/domain';
+
+interface UseNoteHistoryComposableState {
+  /**
+   * Note hisotry is array of the history meta used for history preview
+   */
+  noteHistory: Ref<NoteHistoryMeta[] | null>;
+}
+
+interface UseNoteHistoryComposableOptions {
+  /**
+   * Id of the note
+   */
+  noteId: MaybeRefOrGetter<NoteHistoryRecord['noteId'] | null>;
+}
+
+export default function useNoteHistory(options: UseNoteHistoryComposableOptions): UseNoteHistoryComposableState {
+  const noteHistory = ref<NoteHistoryMeta[] | null>(null);
+
+  const currentNoteId = computed(() => toValue(options.noteId));
+
+  async function loadNoteHistory(noteId: Note['id']): Promise<void> {
+    noteHistory.value = await noteHistoryService.loadNoteHistory(noteId);
+  }
+
+  /**
+   * When page is mounted, we should load note history
+   */
+  onMounted(() => {
+    if (currentNoteId.value !== null) {
+      void loadNoteHistory(currentNoteId.value);
+    }
+  });
+
+  return {
+    noteHistory: noteHistory,
+  };
+}

src/domain/entities/History.ts

@@ -0,0 +1,59 @@
+import type EditorTool from './EditorTool';
+import type { Note } from './Note';
+import type { User } from './User';
+
+interface UserMeta {
+  /**
+   * Name of the user
+   */
+  name: User['name'];
+
+  /**
+   * Photo of the user
+   */
+  photo: User['photo'];
+};
+
+export interface NoteHistoryRecord {
+  /**
+   * Unique identified of note history record
+   */
+  id: number;
+
+  /**
+   * Id of the note whose content history is stored
+   */
+  noteId: Note['id'];
+
+  /**
+   * User that updated note content
+   */
+  userId: User['id'];
+
+  /**
+   * Timestamp of note update
+   */
+  createdAt: string;
+
+  /**
+   * Version of note content
+   */
+  content: Note['content'];
+
+  /**
+   * Note tools of current version of note content
+   */
+  tools: EditorTool[];
+}
+
+/**
+ * Meta data of the note history record
+ * Used for presentation of the note history record in web
+ */
+export type NoteHistoryMeta = Omit<NoteHistoryRecord, 'content' | 'noteId' | 'tools'> & {
+  /**
+   * Meta data of the user who did changes
+   * Used for note history metadata presentation
+   */
+  user: UserMeta;
+};

src/domain/index.ts

@@ -9,6 +9,7 @@ import NoteListService from './noteList.service';
 import EditorToolsService from '@/domain/editorTools.service';
 import WorkspaceService from './workspace.service';
 import TeamService from './team.service';
+import NoteHistoryService from './noteHistory.service';
 /**
  * Get API url from environment
  */
@@ -36,6 +37,7 @@ const authService = new AuthService(eventBus, repositories.auth);
 const userService = new UserService(eventBus, repositories.user);
 const marketplaceService = new MarketplaceService(repositories.marketplace);
 const teamService = new TeamService(repositories.team);
+const noteHistoryService = new NoteHistoryService(repositories.noteHistory);
 
 /**
  * App State — is a read-only combination of app Stores.
@@ -60,5 +62,6 @@ export {
   userService,
   marketplaceService,
   workspaceService,
-  teamService
+  teamService,
+  noteHistoryService
 };

src/domain/noteHistory.repository.interface.ts

@@ -0,0 +1,13 @@
+import type { NoteHistoryMeta } from './entities/History';
+import type { Note } from './entities/Note';
+
+/**
+ * Interface of the note history repository
+ */
+export default interface NoteHistoryRepositoryInterface {
+  /**
+   * Loads note history meta for note history preview
+   * @param noteId - id of the note
+   */
+  loadNoteHistory(noteId: Note['id']): Promise<NoteHistoryMeta[]>;
+}

src/domain/noteHistory.service.ts

@@ -0,0 +1,26 @@
+import type { NoteHistoryMeta } from './entities/History';
+import type { Note } from './entities/Note';
+import type NoteHistoryRepository from './noteHistory.repository.interface';
+
+/**
+ * Note history service class, used for logic handling of the data,
+ * Also used for data delivery from repository to application service
+ */
+export default class NoteHistoryService {
+  /**
+   * Note history repository instance
+   */
+  private readonly noteHistoryRepository: NoteHistoryRepository;
+
+  constructor(historyRepository: NoteHistoryRepository) {
+    this.noteHistoryRepository = historyRepository;
+  }
+
+  /**
+   * Loads note history meta for note history preview
+   * @param noteId - id of the note
+   */
+  public async loadNoteHistory(noteId: Note['id']): Promise<NoteHistoryMeta[]> {
+    return await this.noteHistoryRepository.loadNoteHistory(noteId);
+  }
+}

src/infrastructure/index.ts

@@ -17,6 +17,7 @@ import EditorToolsRepository from '@/infrastructure/editorTools.repository';
 import EditorToolsTransport from '@/infrastructure/transport/editorTools.transport';
 import NoteAttachmentUploaderRepository from './noteAttachmentUploader.repository';
 import TeamRepository from '@/infrastructure/team.repository';
+import NoteHistoryRepository from './noteHistory.repository';
 
 /**
  * Repositories
@@ -66,6 +67,11 @@ export interface Repositories {
    * Working with teams
    */
   team: TeamRepository;
+
+  /**
+   * Working with note history
+   */
+  noteHistory: NoteHistoryRepository;
 }
 
 /**
@@ -135,6 +141,7 @@ export function init(noteApiUrl: string, eventBus: EventBus): Repositories {
   const noteAttachmentUploaderRepository = new NoteAttachmentUploaderRepository(notesApiTransport);
   const workspaceRepository = new WorkspaceRepository(openedPagesStore);
   const teamRepository = new TeamRepository(notesApiTransport);
+  const noteHistoryRepository = new NoteHistoryRepository(notesApiTransport);
 
   return {
     note: noteRepository,
@@ -146,5 +153,6 @@ export function init(noteApiUrl: string, eventBus: EventBus): Repositories {
     noteAttachmentUploader: noteAttachmentUploaderRepository,
     workspace: workspaceRepository,
     team: teamRepository,
+    noteHistory: noteHistoryRepository,
   };
 }

src/infrastructure/noteHistory.repository.ts

@@ -0,0 +1,28 @@
+import type NoteHistoryRepositoryInterface from '@/domain/noteHistory.repository.interface';
+import type NotesApiTransport from './transport/notes-api';
+import type { Note } from '@/domain/entities/Note';
+import type { NoteHistoryMeta } from '@/domain/entities/History';
+
+/**
+ * Note history repository class used for data delivery from transport to service
+ */
+export default class NoteHistoryRepository implements NoteHistoryRepositoryInterface {
+  /**
+   * Notes api transport instance
+   */
+  private readonly transport: NotesApiTransport;
+
+  constructor(notesApiTransport: NotesApiTransport) {
+    this.transport = notesApiTransport;
+  }
+
+  /**
+   * Loads note history meta for note history preview
+   * @param noteId - id of the note
+   */
+  public async loadNoteHistory(noteId: Note['id']): Promise<NoteHistoryMeta[]> {
+    const response = await this.transport.get<{ noteHistoryMeta: NoteHistoryMeta[] }>(`/note/${noteId}/history`);
+
+    return response.noteHistoryMeta;
+  }
+}

src/infrastructure/utils/date.ts

@@ -1,13 +1,27 @@
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 /**
- * Formats the date in a human-readable format
+ * Returns time, that has been passed from updated at timestamp
  * @param updatedAt - the date the note was last updated
  * @returns the last updated time
  */
-export function formatShortDate(updatedAt: string): string {
+export function getTimeFromNow(updatedAt: string): string {
   dayjs.extend(relativeTime);
   const formattedUpdatedAt = dayjs(updatedAt).fromNow();
 
   return formattedUpdatedAt;
 }
+
+/**
+ * Converts timestamp to readable time format
+ * @param date - date instance from timestamp
+ * @returns - string with formatted date and time
+ */
+export function parseDate(date: Date): string {
+  return new Intl.DateTimeFormat('en-GB', {
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+  }).format(date);
+}

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

@@ -41,7 +41,7 @@
 <script setup lang="ts">
 import useNoteList from '@/application/services/useNoteList';
 import type { Note } from '@/domain/entities/Note';
-import { formatShortDate } from '@/infrastructure/utils/date';
+import { getTimeFromNow } from '@/infrastructure/utils/date';
 import { getTitle } from '@/infrastructure/utils/note';
 import { useI18n } from 'vue-i18n';
 import { Card, CardSkeleton, Button } from 'codex-ui/vue';
@@ -66,7 +66,7 @@ function getSubtitle(note: Note): string | undefined {
     return;
   }
 
-  return `${t('home.updated')} ${formatShortDate(note.updatedAt)}`;
+  return `${t('home.updated')} ${getTimeFromNow(note.updatedAt)}`;
 }
 
 </script>