From df2587810ce493108a38c00cd2b7f78340c56fc5 Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Fri, 22 May 2020 15:45:35 -0400
Subject: [PATCH] Revisions flow (#612)

* WIP rework revisions, fetch data

* Render revision items in sidebar

* Show created externally

* Install diff

* Add strings for revisions modal

* Allow slot to override subtitle in modal

* Add tabs content to revisions modal

* Add revert button
---
 package.json                                  |   2 +
 src/components/v-modal/v-modal.vue            |   4 +-
 src/lang/en-US/index.json                     |   7 +
 src/layouts/tabular/tabular.vue               |   6 +-
 .../collections/routes/detail/detail.vue      |   3 +
 .../revisions-drawer-detail/revision-item.vue | 163 +++++++
 .../revisions-drawer-detail.vue               | 414 ++++++------------
 .../revisions-modal-current.vue               |   0
 .../revisions-modal-picker.vue                | 107 +++++
 .../revisions-modal-preview.vue               |  22 +
 .../revisions-modal-updates-change.vue        | 104 +++++
 .../revisions-modal-updates.vue               |  95 ++++
 .../revisions-modal.vue                       | 147 +++++++
 .../revisions-drawer-detail/types.ts          |  26 ++
 yarn.lock                                     |   7 +-
 15 files changed, 826 insertions(+), 281 deletions(-)
 create mode 100644 src/views/private/components/revisions-drawer-detail/revision-item.vue
 create mode 100644 src/views/private/components/revisions-drawer-detail/revisions-modal-current.vue
 create mode 100644 src/views/private/components/revisions-drawer-detail/revisions-modal-picker.vue
 create mode 100644 src/views/private/components/revisions-drawer-detail/revisions-modal-preview.vue
 create mode 100644 src/views/private/components/revisions-drawer-detail/revisions-modal-updates-change.vue
 create mode 100644 src/views/private/components/revisions-drawer-detail/revisions-modal-updates.vue
 create mode 100644 src/views/private/components/revisions-drawer-detail/revisions-modal.vue
 create mode 100644 src/views/private/components/revisions-drawer-detail/types.ts

diff --git a/package.json b/package.json
index c1a6f1b8e2..1e1cda64e5 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "base-64": "^0.1.0",
     "cropperjs": "^1.5.6",
     "date-fns": "^2.14.0",
+    "diff": "^4.0.2",
     "lodash": "^4.17.15",
     "marked": "^1.1.0",
     "micromustache": "^7.1.0",
@@ -57,6 +58,7 @@
     "@storybook/core": "^5.3.18",
     "@storybook/vue": "^5.3.18",
     "@types/base-64": "^0.1.3",
+    "@types/diff": "^4.0.2",
     "@types/jest": "^25.2.3",
     "@types/marked": "^0.7.4",
     "@types/mime-types": "^2.1.0",
diff --git a/src/components/v-modal/v-modal.vue b/src/components/v-modal/v-modal.vue
index e98fad56f8..a3a80e0cef 100644
--- a/src/components/v-modal/v-modal.vue
+++ b/src/components/v-modal/v-modal.vue
@@ -8,7 +8,9 @@
 			<header class="header">
 				<v-icon class="menu-toggle" name="menu" @click="sidebarActive = !sidebarActive" />
 				<h2 class="title">{{ title }}</h2>
-				<p v-if="subtitle" class="subtitle">{{ subtitle }}</p>
+				<slot name="subtitle">
+					<p v-if="subtitle" class="subtitle">{{ subtitle }}</p>
+				</slot>
 				<div class="spacer" />
 				<slot name="header:append" />
 			</header>
diff --git a/src/lang/en-US/index.json b/src/lang/en-US/index.json
index 7bcc1f6735..f4a8672664 100644
--- a/src/lang/en-US/index.json
+++ b/src/lang/en-US/index.json
@@ -1,5 +1,6 @@
 {
 	"edit_field": "Edit Field",
+	"item_revision": "Item Revision",
 	"duplicate_field": "Duplicate Field",
 	"half_width": "Half Width",
 	"full_width": "Full Width",
@@ -68,6 +69,8 @@
 	"show_all_activity": "Show All Activity",
 	"page_not_found": "Page Not Found",
 	"page_not_found_body": "The page you are looking for doesn't seem to exist.",
+	"confirm_revert": "Confirm Revert",
+	"confirm_revert_body": "This will revert the item to the selected state.",
 
 	"setting_update_success": "Setting {setting} updated",
 	"setting_update_failed": "Updating setting {setting} failed",
@@ -79,8 +82,12 @@
 	"revision_delta_updated": "Updated {count} Fields",
 	"revision_delta_soft_deleted": "Soft Deleted",
 	"revision_delta_deleted": "Deleted",
+	"revision_delta_reverted": "Reverted",
+	"revision_delta_by": "{date} by {user}",
 	"private_user": "Private User",
 	"revision_unknown": "Created Outside System",
+	"revision_preview": "Revision Preview",
+	"updates_made": "Updates Made",
 
 	"leave_comment": "Leave a comment...",
 	"post_comment_success": "Comment posted",
diff --git a/src/layouts/tabular/tabular.vue b/src/layouts/tabular/tabular.vue
index 3423da471e..c19c9157b2 100644
--- a/src/layouts/tabular/tabular.vue
+++ b/src/layouts/tabular/tabular.vue
@@ -295,7 +295,11 @@ export default defineComponent({
 		});
 
 		const activeFilterCount = computed(() => {
-			return _filters.value.filter((filter) => !filter.locked);
+			let count = _filters.value.filter((filter) => !filter.locked).length;
+
+			if (searchQuery.value && searchQuery.value.length > 0) count++;
+
+			return count;
 		});
 
 		return {
diff --git a/src/modules/collections/routes/detail/detail.vue b/src/modules/collections/routes/detail/detail.vue
index 63eda9f253..0827eeb7dd 100644
--- a/src/modules/collections/routes/detail/detail.vue
+++ b/src/modules/collections/routes/detail/detail.vue
@@ -148,6 +148,7 @@
 				:collection="collection"
 				:primary-key="primaryKey"
 				ref="revisionsDrawerDetail"
+				@revert="refresh"
 			/>
 			<comments-drawer-detail
 				v-if="isBatch === false && isNew === false"
@@ -219,6 +220,7 @@ export default defineComponent({
 			softDeleting,
 			saveAsCopy,
 			isBatch,
+			refresh,
 		} = useItem(collection, primaryKey);
 
 		const hasEdits = computed<boolean>(() => Object.keys(edits.value).length > 0);
@@ -273,6 +275,7 @@ export default defineComponent({
 			breadcrumb,
 			title,
 			revisionsDrawerDetail,
+			refresh,
 		};
 
 		function useBreadcrumb() {
diff --git a/src/views/private/components/revisions-drawer-detail/revision-item.vue b/src/views/private/components/revisions-drawer-detail/revision-item.vue
new file mode 100644
index 0000000000..487a786dbd
--- /dev/null
+++ b/src/views/private/components/revisions-drawer-detail/revision-item.vue
@@ -0,0 +1,163 @@
+<template>
+	<div class="revision-item" @click="$emit('click')" :class="{ last }">
+		<div class="header">
+			<span class="dot" :class="revision.activity.action" />
+			{{ headerMessage }}
+		</div>
+		<div class="content">
+			<span class="time">{{ time }}</span>
+			–
+			<user-popover :user="revision.activity.action_by.id">
+				<span>{{ user }}</span>
+			</user-popover>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, computed } from '@vue/composition-api';
+import { Revision } from './types';
+import i18n from '@/lang';
+import { format } from 'date-fns';
+
+export default defineComponent({
+	props: {
+		revision: {
+			type: Object as PropType<Revision>,
+			required: true,
+		},
+		last: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	setup(props) {
+		const revisionCount = computed(() => {
+			return Object.keys(props.revision.delta).length;
+		});
+
+		const headerMessage = computed(() => {
+			switch (props.revision.activity.action.toLowerCase()) {
+				case 'create':
+					return i18n.t('revision_delta_created');
+				case 'update':
+					return i18n.t('revision_delta_updated', { count: revisionCount.value });
+				case 'soft-delete':
+					return i18n.t('revision_delta_soft_deleted');
+				case 'delete':
+					return i18n.t('revision_delta_deleted');
+				case 'revert':
+					return i18n.t('revision_delta_reverted');
+			}
+		});
+
+		const time = computed(() => {
+			return format(
+				new Date(props.revision.activity.action_on),
+				String(i18n.t('date-fns_time'))
+			);
+		});
+
+		const user = computed(() => {
+			if (
+				props.revision.activity.action_by !== null &&
+				typeof props.revision.activity.action_by === 'object'
+			) {
+				const { first_name, last_name } = props.revision.activity.action_by as {
+					first_name: string;
+					last_name: string;
+				};
+				return `${first_name} ${last_name}`;
+			}
+
+			return i18n.t('private_user');
+		});
+
+		return { headerMessage, time, user };
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.revision-item {
+	position: relative;
+	margin-bottom: 16px;
+	margin-left: 20px;
+
+	&:not(.last)::after {
+		position: absolute;
+		top: 12px;
+		left: -17px;
+		z-index: 1;
+		width: 2px;
+		height: calc(100% + 12px);
+		background-color: var(--background-normal-alt);
+		content: '';
+	}
+
+	&::before {
+		position: absolute;
+		top: -4px;
+		left: -32px;
+		z-index: 1;
+		width: calc(100% + 32px);
+		height: calc(100% + 8px);
+		background-color: var(--background-normal-alt);
+		border-radius: var(--border-radius);
+		opacity: 0;
+		transition: opacity var(--fast) var(--transition);
+		content: '';
+		pointer-events: none;
+	}
+
+	&:hover {
+		cursor: pointer;
+	}
+
+	&:hover::before {
+		opacity: 1;
+	}
+}
+
+.header {
+	position: relative;
+	z-index: 2;
+	font-weight: 600;
+}
+
+.dot {
+	position: absolute;
+	top: 6px;
+	left: -22px;
+	z-index: 2;
+	width: 12px;
+	height: 12px;
+	background-color: var(--warning);
+	border: 2px solid var(--background-normal);
+	border-radius: 8px;
+
+	&.create {
+		background-color: var(--success);
+	}
+
+	&.update {
+		background-color: var(--primary);
+	}
+
+	&.delete {
+		background-color: var(--danger);
+	}
+}
+
+.content {
+	position: relative;
+	z-index: 2;
+	color: var(--foreground-subdued);
+	line-height: 16px;
+
+	.time {
+		text-transform: lowercase;
+		font-feature-settings: 'tnum';
+	}
+}
+</style>
diff --git a/src/views/private/components/revisions-drawer-detail/revisions-drawer-detail.vue b/src/views/private/components/revisions-drawer-detail/revisions-drawer-detail.vue
index e3be43cec7..0e79a41979 100644
--- a/src/views/private/components/revisions-drawer-detail/revisions-drawer-detail.vue
+++ b/src/views/private/components/revisions-drawer-detail/revisions-drawer-detail.vue
@@ -1,84 +1,52 @@
 <template>
 	<drawer-detail :title="$t('revisions')" icon="change_history">
-		<!-- "Today", "Yesterday", and then: "Sep 6", "Sep 6, 2019" (previous years) -->
-		<div class="day-break"><span>Today</span></div>
+		<v-progress-linear indeterminate v-if="loading" />
 
-		<transition-group name="slide" tag="div">
-			<div v-for="act in activity" :key="act.id" class="revision internal">
-				<div class="header">
-					<template v-if="act.action === 'create'">
-						<span class="dot create"></span>
-						{{ $t('revision_delta_created') }}
-					</template>
-					<template v-else-if="act.action === 'update'">
-						<span class="dot update"></span>
-						{{ $t('revision_delta_updated', { count: 3 }) }}
-					</template>
-					<template v-else-if="act.action === 'soft-delete'">
-						<span class="dot delete"></span>
-						{{ $t('revision_delta_soft_deleted') }}
-					</template>
-					<template v-else-if="act.action === 'delete'">
-						<span class="dot delete"></span>
-						{{ $t('revision_delta_deleted') }}
-					</template>
+		<template v-else v-for="group in revisionsByDate">
+			<v-divider :key="group.date.toString()">{{ group.dateFormatted }}</v-divider>
 
-					<v-icon name="expand_more" class="more" />
-				</div>
+			<template v-for="(item, index) in group.revisions">
+				<revision-item
+					:key="item.id"
+					:revision="item"
+					:last="index === group.revisions.length - 1"
+					@click="openModal(item.id)"
+				/>
+			</template>
+		</template>
 
-				<div class="content">
-					<span class="time">{{ getFormattedTime(act.action_on) }}</span>
-					—
-					<span class="name">
-						<template v-if="act.action_by && act.action_by">
-							{{ act.action_by.first_name }} {{ act.action_by.last_name }}
-						</template>
-						<template v-else-if="act.action_by && action.action_by">
-							{{ $t('private_user') }}
-						</template>
-					</span>
-
-					<div v-if="act.comment" class="comment" v-html="marked(act.comment)" />
-				</div>
-			</div>
-		</transition-group>
-
-		<!-- Only show this if "created" revision doesn't exist for this item -->
-		<div class="revision external">
-			<div class="header">
-				<span class="dot"></span>
+		<template v-if="loading === false && hasCreate === false">
+			<v-divider />
+			<div class="external">
 				{{ $t('revision_delta_created_externally') }}
 			</div>
-			<div class="content">{{ $t('revision_unknown') }}</div>
-		</div>
+		</template>
+
+		<revisions-modal
+			v-if="revisions"
+			:revisions="revisions"
+			:current.sync="modalCurrentRevision"
+			:active.sync="modalActive"
+			@revert="onRevert"
+		/>
 	</drawer-detail>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from '@vue/composition-api';
+import { defineComponent, ref, computed } from '@vue/composition-api';
+import { Revision, RevisionsByDate } from './types';
 import useProjectsStore from '@/stores/projects';
 import api from '@/api';
-import localizedFormatDistance from '@/utils/localized-format-distance';
-import marked from 'marked';
-import { Avatar } from '@/stores/user/types';
-import notify from '@/utils/notify';
-import format from 'date-fns/format';
+import { groupBy, orderBy } from 'lodash';
+import { isToday, isYesterday, isThisYear } from 'date-fns';
+import { TranslateResult } from 'vue-i18n';
 import i18n from '@/lang';
-
-type Activity = {
-	action: 'create' | 'update' | 'soft-delete' | 'delete';
-	action_by: null | {
-		id: number;
-		first_name: string;
-		last_name: string;
-		avatar: null | Avatar;
-	};
-	action_on: string;
-	edited_on: null | string;
-	comment: null | string;
-};
+import formatLocalized from '@/utils/localized-format';
+import RevisionItem from './revision-item.vue';
+import RevisionsModal from './revisions-modal.vue';
 
 export default defineComponent({
+	components: { RevisionItem, RevisionsModal },
 	props: {
 		collection: {
 			type: String,
@@ -89,135 +57,152 @@ export default defineComponent({
 			required: true,
 		},
 	},
-	setup(props) {
+	setup(props, { emit }) {
 		const projectsStore = useProjectsStore();
 
-		const { activity, loading, error, refresh } = useActivity(
+		const { revisions, revisionsByDate, loading, error, refresh } = useRevisions(
 			props.collection,
 			props.primaryKey
 		);
-		const { newCommentContent, postComment, saving } = useComment();
+
+		const hasCreate = computed(() => {
+			// We expect the very first revision record to be a creation
+			return (
+				revisions.value &&
+				revisions.value.length > 0 &&
+				revisions.value[revisions.value.length - 1].activity.action === 'create'
+			);
+		});
+
+		const modalActive = ref(false);
+		const modalCurrentRevision = ref<number>(null);
 
 		return {
-			activity,
+			revisions,
+			revisionsByDate,
 			loading,
 			error,
-			marked,
-			newCommentContent,
-			postComment,
-			saving,
-			getFormattedTime,
 			refresh,
+			hasCreate,
+			modalActive,
+			modalCurrentRevision,
+			openModal,
+			onRevert,
 		};
 
-		function getFormattedTime(datetime: string) {
-			return format(new Date(datetime), String(i18n.t('date-fns_time')));
+		function openModal(id: number) {
+			modalCurrentRevision.value = id;
+			modalActive.value = true;
 		}
 
-		function useActivity(collection: string, primaryKey: string | number) {
-			const activity = ref<Activity[]>(null);
+		function useRevisions(collection: string, primaryKey: number | string) {
+			const revisions = ref<Revision[]>(null);
+			const revisionsByDate = ref<RevisionsByDate[]>(null);
 			const error = ref(null);
 			const loading = ref(false);
 
-			getActivity();
+			getRevisions();
 
-			return { activity, error, loading, refresh };
+			return { revisions, revisionsByDate, error, loading, refresh };
+
+			async function getRevisions() {
+				const { currentProjectKey } = projectsStore.state;
 
-			async function getActivity() {
 				error.value = null;
 				loading.value = true;
 
 				try {
 					const response = await api.get(
-						`/${projectsStore.state.currentProjectKey}/activity`,
+						`/${currentProjectKey}/items/${collection}/${primaryKey}/revisions`,
 						{
 							params: {
-								'filter[collection][eq]': collection,
-								'filter[item][eq]': primaryKey,
-								'filter[action][in]': 'create,update,soft-delete,delete',
-								sort: '-id', // directus_activity has auto increment and is therefore in chronological order
 								fields: [
 									'id',
-									'action',
-									'action_on',
-									'action_by.id',
-									'action_by.first_name',
-									'action_by.last_name',
-									'action_by.avatar.data',
-									'comment',
+									'data',
+									'delta',
+									'collection',
+									'item',
+									'activity.action',
+									'activity.action_on',
+									'activity.action_by.id',
+									'activity.action_by.first_name',
+									'activity.action_by.last_name',
+									'activity.ip',
+									'activity.user_agent',
 								],
 							},
 						}
 					);
 
-					const records = [];
+					const revisionsGroupedByDate = groupBy(
+						response.data.data,
+						(revision: Revision) => {
+							// revision's action_on date is in iso-8601
+							const date = new Date(
+								new Date(revision.activity.action_on).toDateString()
+							);
+							return date;
+						}
+					);
 
-					for (const record of response.data.data) {
-						records.push({
-							...record,
-							date_relative: await localizedFormatDistance(
-								new Date(record.action_on),
-								new Date(),
-								{
-									addSuffix: true,
-								}
-							),
+					const revisionsGrouped: RevisionsByDate[] = [];
+
+					for (const [key, value] of Object.entries(revisionsGroupedByDate)) {
+						const date = new Date(key);
+						const today = isToday(date);
+						const yesterday = isYesterday(date);
+						const thisYear = isThisYear(date);
+
+						let dateFormatted: TranslateResult;
+
+						if (today) dateFormatted = i18n.t('today');
+						else if (yesterday) dateFormatted = i18n.t('yesterday');
+						else if (thisYear)
+							dateFormatted = await formatLocalized(
+								date,
+								String(i18n.t('date-fns_date_short_no_year'))
+							);
+						else
+							dateFormatted = await formatLocalized(
+								date,
+								String(i18n.t('date-fns_date_short'))
+							);
+
+						revisionsGrouped.push({
+							date: date,
+							dateFormatted: String(dateFormatted),
+							revisions: orderBy(value, ['activity.action_on'], ['desc']),
 						});
 					}
 
-					activity.value = records;
-				} catch (error) {
-					error.value = error;
+					revisionsByDate.value = orderBy(revisionsGrouped, ['date'], ['desc']);
+					revisions.value = orderBy(response.data.data, ['activity.action_on'], ['desc']);
+				} catch (err) {
+					error.value = err;
 				} finally {
 					loading.value = false;
 				}
 			}
 
 			async function refresh() {
-				await getActivity();
+				await getRevisions();
 			}
 		}
 
-		function useComment() {
-			const newCommentContent = ref(null);
-			const saving = ref(false);
-
-			return { newCommentContent, postComment, saving };
-
-			async function postComment() {
-				saving.value = true;
-
-				try {
-					await api.post(`/${projectsStore.state.currentProjectKey}/activity/comment`, {
-						collection: props.collection,
-						item: props.primaryKey,
-						comment: newCommentContent.value,
-					});
-
-					await refresh();
-
-					newCommentContent.value = null;
-
-					notify({
-						title: i18n.t('post_comment_success'),
-						type: 'success',
-					});
-				} catch {
-					notify({
-						title: i18n.t('post_comment_failed'),
-						type: 'error',
-					});
-				} finally {
-					saving.value = false;
-				}
-			}
+		function onRevert() {
+			refresh();
+			emit('revert');
 		}
 	},
 });
 </script>
 
 <style lang="scss" scoped>
-.day-break {
+.v-progress-linear {
+	margin: 24px 0;
+}
+
+.v-divider {
 	position: sticky;
 	top: 0;
 	z-index: 2;
@@ -227,145 +212,18 @@ export default defineComponent({
 	padding-bottom: 8px;
 	background-color: var(--background-normal);
 	box-shadow: 0 0 4px 2px var(--background-normal);
-
-	&:first-of-type {
-		margin-top: 0;
-	}
-
-	span {
-		z-index: 2;
-		padding-right: 8px;
-		color: var(--foreground-subdued);
-		background-color: var(--background-normal);
-	}
-
-	&::before {
-		position: absolute;
-		top: 18px;
-		right: 0;
-		left: 0;
-		z-index: -1;
-		height: 2px;
-		background-color: var(--border-normal);
-		content: '';
-	}
 }
 
-.revision {
-	position: relative;
+.empty {
+	margin-top: 16px;
 	margin-bottom: 16px;
+	color: var(--foreground-subdued);
+	font-style: italic;
+}
+
+.external {
 	margin-left: 20px;
-
-	&.internal {
-		cursor: pointer;
-
-		&::after {
-			position: absolute;
-			top: 12px;
-			left: -17px;
-			z-index: 1;
-			width: 2px;
-			height: calc(100% + 12px);
-			background-color: var(--background-normal-alt);
-			content: '';
-		}
-	}
-
-	&.external {
-		cursor: auto;
-	}
-
-	.header {
-		position: relative;
-		z-index: 2;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		font-weight: 600;
-
-		.dot {
-			position: absolute;
-			top: 6px;
-			left: -22px;
-			width: 12px;
-			height: 12px;
-			background-color: var(--warning);
-			border: 2px solid var(--background-normal);
-			border-radius: 8px;
-
-			&.create {
-				background-color: var(--success);
-			}
-
-			&.update {
-				background-color: var(--primary);
-			}
-
-			&.delete {
-				background-color: var(--danger);
-			}
-		}
-
-		.more {
-			flex-basis: 24px;
-			color: var(--foreground-subdued);
-			transition: color var(--fast) var(--transition);
-		}
-	}
-
-	.content {
-		color: var(--foreground-subdued);
-		line-height: 16px;
-
-		.time {
-			text-transform: lowercase;
-		}
-
-		.comment {
-			position: relative;
-			margin-top: 8px;
-			padding: 8px;
-			background-color: var(--background-page);
-			border-radius: var(--border-radius);
-
-			&::before {
-				position: absolute;
-				top: -4px;
-				left: 20px;
-				width: 10px;
-				height: 10px;
-				background-color: var(--background-page);
-				border-radius: 2px;
-				transform: translateX(-50%) rotate(45deg);
-				content: '';
-			}
-		}
-	}
-
-	&:hover {
-		.header {
-			.more {
-				color: var(--foreground-normal);
-			}
-		}
-	}
-}
-
-.slide-enter-active,
-.slide-leave-active {
-	transition: all var(--slow) var(--transition);
-}
-
-.slide-leave-active {
-	position: absolute;
-}
-
-.slide-move {
-	transition: all 500ms var(--transition);
-}
-
-.slide-enter,
-.slide-leave-to {
-	opacity: 0;
+	color: var(--foreground-subdued);
+	font-style: italic;
 }
 </style>
diff --git a/src/views/private/components/revisions-drawer-detail/revisions-modal-current.vue b/src/views/private/components/revisions-drawer-detail/revisions-modal-current.vue
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/views/private/components/revisions-drawer-detail/revisions-modal-picker.vue b/src/views/private/components/revisions-drawer-detail/revisions-modal-picker.vue
new file mode 100644
index 0000000000..2f9d9d2ac2
--- /dev/null
+++ b/src/views/private/components/revisions-drawer-detail/revisions-modal-picker.vue
@@ -0,0 +1,107 @@
+<template>
+	<v-menu close-on-content-click show-arrow>
+		<template #activator="{ toggle }">
+			<span @click="toggle" class="picker">
+				{{ selectedOption && selectedOption.text }}
+				<v-icon name="expand_more" small />
+			</span>
+		</template>
+
+		<v-list dense>
+			<v-list-item
+				v-for="option in options"
+				:key="option.value"
+				@click="_current = option.value"
+				:active="_current === option.value"
+			>
+				<v-list-item-content>{{ option.text }}</v-list-item-content>
+			</v-list-item>
+		</v-list>
+	</v-menu>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, computed, watch, ref } from '@vue/composition-api';
+import { Revision } from './types';
+import useSync from '@/composables/use-sync';
+import localizedFormat from '@/utils/localized-format';
+import i18n from '@/lang';
+
+type Option = {
+	text: string;
+	value: number;
+};
+
+export default defineComponent({
+	props: {
+		revisions: {
+			type: Array as PropType<Revision[]>,
+			required: true,
+		},
+		current: {
+			type: Number,
+			required: true,
+		},
+	},
+	setup(props, { emit }) {
+		const _current = useSync(props, 'current', emit);
+
+		const options = ref<Option[]>(null);
+
+		watch(
+			() => props.revisions,
+			async () => {
+				const newOptions = [];
+
+				for (const revision of props.revisions) {
+					const date = await getFormattedDate(revision);
+					let user = i18n.t('private_user');
+
+					if (typeof revision.activity.action_by === 'object') {
+						const { first_name, last_name } = revision.activity.action_by;
+						user = `${first_name} ${last_name}`;
+					}
+
+					const text = String(i18n.t('revision_delta_by', { date, user }));
+					const value = revision.id;
+					newOptions.push({ text, value });
+				}
+
+				options.value = newOptions;
+			}
+		);
+
+		const selectedOption = computed(() => {
+			return options.value?.find((option) => option.value === _current.value);
+		});
+
+		return { _current, options, selectedOption };
+
+		async function getFormattedDate(revision: Revision) {
+			const date = await localizedFormat(
+				new Date(revision!.activity.action_on),
+				String(i18n.t('date-fns_date'))
+			);
+
+			const time = await localizedFormat(
+				new Date(revision!.activity.action_on),
+				String(i18n.t('date-fns_time'))
+			);
+
+			return `${date} (${time})`;
+		}
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.picker {
+	color: var(--foreground-subdued);
+	cursor: pointer;
+	transition: color var(--fast) var(--transition);
+
+	&:hover {
+		color: var(--foreground-normal);
+	}
+}
+</style>
diff --git a/src/views/private/components/revisions-drawer-detail/revisions-modal-preview.vue b/src/views/private/components/revisions-drawer-detail/revisions-modal-preview.vue
new file mode 100644
index 0000000000..13f97a0286
--- /dev/null
+++ b/src/views/private/components/revisions-drawer-detail/revisions-modal-preview.vue
@@ -0,0 +1,22 @@
+<template>
+	<v-form
+		disabled
+		:collection="revision.collection"
+		:primary-key="revision.item"
+		:initial-values="revision.data"
+	/>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from '@vue/composition-api';
+import { Revision } from './types';
+
+export default defineComponent({
+	props: {
+		revision: {
+			type: Object as PropType<Revision>,
+			required: true,
+		},
+	},
+});
+</script>
diff --git a/src/views/private/components/revisions-drawer-detail/revisions-modal-updates-change.vue b/src/views/private/components/revisions-drawer-detail/revisions-modal-updates-change.vue
new file mode 100644
index 0000000000..19edc874ea
--- /dev/null
+++ b/src/views/private/components/revisions-drawer-detail/revisions-modal-updates-change.vue
@@ -0,0 +1,104 @@
+<template>
+	<div class="change-line" :class="{ added, deleted, 'no-highlight': wholeThing }">
+		<v-icon :name="added ? 'add' : 'remove'" />
+		<div class="delta">
+			<span
+				v-for="(part, index) in changesFiltered"
+				:key="index"
+				:class="{ changed: part.added || part.removed }"
+			>
+				{{ part.value }}
+			</span>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, computed } from '@vue/composition-api';
+
+type Change = {
+	added?: boolean;
+	removed?: boolean;
+	count: number;
+	value: string;
+};
+
+export default defineComponent({
+	props: {
+		changes: {
+			type: Array as PropType<Change[]>,
+			required: true,
+		},
+		added: {
+			type: Boolean,
+			default: false,
+		},
+		deleted: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	setup(props) {
+		const changesFiltered = computed(() => {
+			return props.changes.filter((change) => {
+				if (props.added === true) {
+					return change.removed !== true;
+				}
+
+				return change.added !== true;
+			});
+		});
+
+		// The whole value changed instead of parts, this should disable the highlighting
+		const wholeThing = computed(() => {
+			return props.changes.length === 2; // before/after
+		});
+
+		return { changesFiltered, wholeThing };
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.change-line {
+	position: relative;
+	width: 100%;
+	padding: 8px 12px 8px 52px;
+	border-radius: var(--border-radius);
+
+	.v-icon {
+		position: absolute;
+		top: 6px;
+		left: 12px;
+	}
+}
+
+.changed {
+	position: relative;
+	margin-right: 0.2em;
+	padding: 2px;
+	border-radius: var(--border-radius);
+}
+
+.added {
+	color: var(--success);
+	background-color: var(--success-alt);
+
+	.changed {
+		background-color: var(--success-25);
+	}
+}
+
+.deleted {
+	color: var(--danger);
+	background-color: var(--danger-alt);
+
+	.changed {
+		background-color: var(--danger-25);
+	}
+}
+
+.no-highlight .changed {
+	background-color: transparent;
+}
+</style>
diff --git a/src/views/private/components/revisions-drawer-detail/revisions-modal-updates.vue b/src/views/private/components/revisions-drawer-detail/revisions-modal-updates.vue
new file mode 100644
index 0000000000..caf2cc5a0b
--- /dev/null
+++ b/src/views/private/components/revisions-drawer-detail/revisions-modal-updates.vue
@@ -0,0 +1,95 @@
+<template>
+	<div class="updates">
+		<div class="change" v-for="change in changes" :key="change.name">
+			<div class="type-label">{{ change.name }}</div>
+			<revisions-modal-updates-change deleted :changes="change.changes" />
+			<revisions-modal-updates-change added :changes="change.changes" />
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, computed } from '@vue/composition-api';
+import { Revision } from './types';
+import useFieldsStore from '@/stores/fields';
+import { diffWordsWithSpace, diffJson, diffArrays } from 'diff';
+import RevisionsModalUpdatesChange from './revisions-modal-updates-change.vue';
+
+export default defineComponent({
+	components: { RevisionsModalUpdatesChange },
+	props: {
+		revision: {
+			type: Object as PropType<Revision>,
+			required: true,
+		},
+		revisions: {
+			type: Array as PropType<Revision[]>,
+			required: true,
+		},
+	},
+	setup(props) {
+		const fieldsStore = useFieldsStore();
+
+		const previousRevision = computed(() => {
+			const currentIndex = props.revisions.findIndex(
+				(revision) => revision.id === props.revision.id
+			);
+
+			// This is assuming props.revisions is in chronological order from newest to oldest
+			return props.revisions[currentIndex + 1];
+		});
+
+		const changes = computed(() => {
+			if (!previousRevision.value) return null;
+
+			const changedFields = Object.keys(props.revision.delta);
+
+			return changedFields.map((fieldKey) => {
+				const name = fieldsStore.getField(props.revision.collection, fieldKey).name;
+				const currentValue = props.revision.delta[fieldKey];
+				const previousValue = previousRevision.value.data[fieldKey];
+
+				let changes;
+
+				if (typeof currentValue === 'string' && currentValue.length > 25) {
+					changes = diffWordsWithSpace(previousValue, currentValue);
+				} else if (Array.isArray(currentValue)) {
+					changes = diffArrays(previousValue, currentValue);
+				} else if (typeof currentValue === 'object') {
+					changes = diffJson(previousValue, currentValue);
+				} else {
+					// This is considering the whole thing a change
+					changes = [
+						{
+							removed: true,
+							value: previousValue,
+						},
+						{
+							added: true,
+							value: currentValue,
+						},
+					];
+				}
+
+				return { name, changes };
+			});
+		});
+
+		return { changes, previousRevision };
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.change {
+	margin-bottom: 24px;
+}
+
+.type-label {
+	margin-bottom: 8px;
+}
+
+.change-line {
+	margin-bottom: 4px;
+}
+</style>
diff --git a/src/views/private/components/revisions-drawer-detail/revisions-modal.vue b/src/views/private/components/revisions-drawer-detail/revisions-modal.vue
new file mode 100644
index 0000000000..10a153e061
--- /dev/null
+++ b/src/views/private/components/revisions-drawer-detail/revisions-modal.vue
@@ -0,0 +1,147 @@
+<template>
+	<div>
+		<v-modal v-model="_active" :title="$t('item_revision')">
+			<template #subtitle>
+				<revisions-modal-picker :revisions="revisions" :current.sync="_current" />
+			</template>
+			<template #sidebar>
+				<v-tabs vertical v-model="currentTab">
+					<v-tab v-for="tab in tabs" :key="tab.value" :value="tab.value">
+						{{ tab.text }}
+					</v-tab>
+				</v-tabs>
+			</template>
+
+			<div class="content">
+				<revisions-modal-preview
+					v-if="currentTab[0] === 'preview'"
+					:revision="currentRevision"
+				/>
+				<revisions-modal-updates
+					v-if="currentTab[0] === 'updates'"
+					:revision="currentRevision"
+					:revisions="revisions"
+				/>
+			</div>
+
+			<template #footer="{ close }">
+				<v-button @click="confirmRevert = true" class="revert">
+					{{ $t('revert') }}
+				</v-button>
+				<v-button @click="close">{{ $t('done') }}</v-button>
+			</template>
+		</v-modal>
+		<v-dialog v-model="confirmRevert" :persistent="reverting">
+			<v-card>
+				<v-card-title>{{ $t('confirm_revert') }}</v-card-title>
+				<v-card-text>{{ $t('confirm_revert_body') }}</v-card-text>
+				<v-card-actions>
+					<v-button secondary @click="confirmRevert = false" :disabled="reverting">
+						{{ $t('cancel') }}
+					</v-button>
+					<v-button class="revert" @click="revert" :loading="reverting">
+						{{ $t('revert') }}
+					</v-button>
+				</v-card-actions>
+			</v-card>
+		</v-dialog>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, computed, ref } from '@vue/composition-api';
+import useSync from '@/composables/use-sync';
+import { Revision } from './types';
+import i18n from '@/lang';
+import RevisionsModalPicker from './revisions-modal-picker.vue';
+import RevisionsModalPreview from './revisions-modal-preview.vue';
+import RevisionsModalUpdates from './revisions-modal-updates.vue';
+import api from '@/api';
+import useProjectsStore from '@/stores/projects';
+
+export default defineComponent({
+	components: { RevisionsModalPicker, RevisionsModalPreview, RevisionsModalUpdates },
+	props: {
+		revisions: {
+			type: Array as PropType<Revision[]>,
+			required: true,
+		},
+		current: {
+			type: Number,
+			default: null,
+		},
+		active: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	setup(props, { emit }) {
+		const _active = useSync(props, 'active', emit);
+		const _current = useSync(props, 'current', emit);
+		const projectsStore = useProjectsStore();
+
+		const currentTab = ref(['preview']);
+
+		const currentRevision = computed(() => {
+			return props.revisions.find((revision) => revision.id === props.current);
+		});
+
+		const tabs = [
+			{
+				text: i18n.t('revision_preview'),
+				value: 'preview',
+			},
+			{
+				text: i18n.t('updates_made'),
+				value: 'updates',
+			},
+		];
+
+		const { confirmRevert, reverting, revert } = useRevert();
+
+		return {
+			_active,
+			_current,
+			currentRevision,
+			currentTab,
+			tabs,
+			confirmRevert,
+			reverting,
+			revert,
+		};
+
+		function useRevert() {
+			const { currentProjectKey } = projectsStore.state;
+			const confirmRevert = ref(false);
+			const reverting = ref(false);
+
+			return { reverting, revert, confirmRevert };
+
+			async function revert() {
+				reverting.value = true;
+				if (!currentRevision.value) return;
+
+				try {
+					await api.patch(
+						`/${currentProjectKey}/items/${currentRevision.value.collection}/${currentRevision.value.item}/revert/${currentRevision.value.id}`
+					);
+					confirmRevert.value = false;
+					_active.value = false;
+					emit('revert');
+				} catch (err) {
+					console.error(err);
+				} finally {
+					reverting.value = false;
+				}
+			}
+		}
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.revert {
+	--v-button-background-color: var(--warning);
+	--v-button-background-color-hover: var(--warning-125);
+}
+</style>
diff --git a/src/views/private/components/revisions-drawer-detail/types.ts b/src/views/private/components/revisions-drawer-detail/types.ts
new file mode 100644
index 0000000000..e0d9b1f7d9
--- /dev/null
+++ b/src/views/private/components/revisions-drawer-detail/types.ts
@@ -0,0 +1,26 @@
+export type Revision = {
+	id: number;
+	data: Record<string, any>;
+	delta: Record<string, any>;
+	collection: string;
+	item: string | number;
+	activity: {
+		action: string;
+		ip: string;
+		user_agent: string;
+		action_on: string;
+		action_by:
+			| number
+			| {
+					id: number;
+					first_name: string;
+					last_name: string;
+			  };
+	};
+};
+
+export type RevisionsByDate = {
+	date: Date;
+	dateFormatted: string;
+	revisions: Revision[];
+};
diff --git a/yarn.lock b/yarn.lock
index 218caa0282..11509befe4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1914,6 +1914,11 @@
   resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.5.tgz#b14efa8852b7768d898906613c23f688713e02cd"
   integrity sha512-Q1y515GcOdTHgagaVFhHnIFQ38ygs/kmxdNpvpou+raI9UO3YZcHDngBSYKQklcKlvA7iuQlmIKbzvmxcOE9CQ==
 
+"@types/diff@^4.0.2":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@types/diff/-/diff-4.0.2.tgz#2e9bb89f9acc3ab0108f0f3dc4dbdcf2fff8a99c"
+  integrity sha512-mIenTfsIe586/yzsyfql69KRnA75S8SVXQbTLpDejRrjH0QSJcpu3AUOi/Vjnt9IOsXKxPhJfGpQUNMueIU1fQ==
+
 "@types/eslint-visitor-keys@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
@@ -5506,7 +5511,7 @@ diff-sequences@^25.2.6:
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-25.2.6.tgz#5f467c00edd35352b7bca46d7927d60e687a76dd"
   integrity sha512-Hq8o7+6GaZeoFjtpgvRBUknSXNeJiCx7V9Fr94ZMljNiCr9n9L8H8aJqgWOQiDDGdyn29fRNcDdRVJ5fdyihfg==
 
-diff@^4.0.1:
+diff@^4.0.1, diff@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d"
   integrity sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==