From 6f9b2cafcdf8e2ec7ce7c0d52b9cce5a6fdff26e Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Wed, 31 Mar 2021 16:53:57 +0200
Subject: [PATCH] Add page titles (#4775)

* restructure template rendering

* add useTitle composable

* Split up render-string-template from getFieldsFromTemplate

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
---
 app/src/composables/use-title/index.ts        |  4 +++
 app/src/composables/use-title/use-title.ts    | 18 ++++++++++++
 app/src/displays/related-values/index.ts      |  2 +-
 .../interfaces/many-to-one/many-to-one.vue    | 29 ++++---------------
 .../repeater/repeater-row-header.vue          |  3 +-
 .../interfaces/translations/translations.vue  |  2 +-
 app/src/interfaces/tree-view/tree-view.vue    |  2 +-
 app/src/layouts/cards/cards.vue               |  2 +-
 app/src/modules/collections/routes/item.vue   | 20 +++++++++++++
 .../get-fields-from-template.ts               |  8 +++--
 .../utils/get-fields-from-template/index.ts   |  4 ---
 app/src/utils/render-string-template.ts       | 19 ++++++++++++
 app/src/views/private/private-view.vue        | 18 ++++--------
 13 files changed, 81 insertions(+), 50 deletions(-)
 create mode 100644 app/src/composables/use-title/index.ts
 create mode 100644 app/src/composables/use-title/use-title.ts
 rename app/src/utils/{get-fields-from-template => }/get-fields-from-template.ts (52%)
 delete mode 100644 app/src/utils/get-fields-from-template/index.ts
 create mode 100644 app/src/utils/render-string-template.ts

diff --git a/app/src/composables/use-title/index.ts b/app/src/composables/use-title/index.ts
new file mode 100644
index 0000000000..122f3049bb
--- /dev/null
+++ b/app/src/composables/use-title/index.ts
@@ -0,0 +1,4 @@
+import { useTitle } from './use-title';
+
+export { useTitle };
+export default useTitle;
diff --git a/app/src/composables/use-title/use-title.ts b/app/src/composables/use-title/use-title.ts
new file mode 100644
index 0000000000..e5a0e8dd57
--- /dev/null
+++ b/app/src/composables/use-title/use-title.ts
@@ -0,0 +1,18 @@
+import { ref, Ref, watch } from '@vue/composition-api';
+import { TranslateResult } from 'vue-i18n';
+
+export function useTitle(newTitle: string | Ref<string>) {
+	if (newTitle === undefined || newTitle === null) return;
+
+	const titleRef = typeof newTitle === 'string' ? ref(newTitle) : newTitle;
+
+	watch(
+		titleRef,
+		(title, oldTitle) => {
+			if (typeof title === 'string' && oldTitle !== title) document.title = title;
+		},
+		{ immediate: true }
+	);
+
+	return titleRef;
+}
diff --git a/app/src/displays/related-values/index.ts b/app/src/displays/related-values/index.ts
index 7fc32a0516..a5db0238a4 100644
--- a/app/src/displays/related-values/index.ts
+++ b/app/src/displays/related-values/index.ts
@@ -1,6 +1,6 @@
 import { defineDisplay } from '@/displays/define';
 import DisplayRelatedValues from './related-values.vue';
-import getFieldsFromTemplate from '@/utils/get-fields-from-template';
+import { getFieldsFromTemplate } from '@/utils/get-fields-from-template';
 import adjustFieldsForDisplays from '@/utils/adjust-fields-for-displays';
 import getRelatedCollection from '@/utils/get-related-collection';
 import useCollection from '@/composables/use-collection';
diff --git a/app/src/interfaces/many-to-one/many-to-one.vue b/app/src/interfaces/many-to-one/many-to-one.vue
index b6cb7cfd4f..1a8535db4f 100644
--- a/app/src/interfaces/many-to-one/many-to-one.vue
+++ b/app/src/interfaces/many-to-one/many-to-one.vue
@@ -28,26 +28,11 @@
 
 					<template #append v-if="!disabled">
 						<template v-if="currentItem">
-							<v-icon
-								name="open_in_new"
-								class="edit"
-								v-tooltip="$t('edit')"
-								@click.stop="editModalActive = true"
-							/>
-							<v-icon
-								name="close"
-								class="deselect"
-								@click.stop="$emit('input', null)"
-								v-tooltip="$t('deselect')"
-							/>
+							<v-icon name="open_in_new" class="edit" v-tooltip="$t('edit')" @click.stop="editModalActive = true" />
+							<v-icon name="close" class="deselect" @click.stop="$emit('input', null)" v-tooltip="$t('deselect')" />
 						</template>
 						<template v-else>
-							<v-icon
-								class="add"
-								name="add"
-								v-tooltip="$t('create_item')"
-								@click.stop="editModalActive = true"
-							/>
+							<v-icon class="add" name="add" v-tooltip="$t('create_item')" @click.stop="editModalActive = true" />
 							<v-icon class="expand" :class="{ active }" name="expand_more" />
 						</template>
 					</template>
@@ -71,11 +56,7 @@
 						@click="setCurrent(item)"
 					>
 						<v-list-item-content>
-							<render-template
-								:collection="relatedCollection.collection"
-								:template="displayTemplate"
-								:item="item"
-							/>
+							<render-template :collection="relatedCollection.collection" :template="displayTemplate" :item="item" />
 						</v-list-item-content>
 					</v-list-item>
 				</template>
@@ -105,7 +86,7 @@
 import { defineComponent, computed, ref, toRefs, watch, PropType } from '@vue/composition-api';
 import { useCollectionsStore, useRelationsStore } from '@/stores/';
 import useCollection from '@/composables/use-collection';
-import getFieldsFromTemplate from '@/utils/get-fields-from-template';
+import { getFieldsFromTemplate } from '@/utils/get-fields-from-template';
 import api from '@/api';
 import DrawerItem from '@/views/private/components/drawer-item';
 import DrawerCollection from '@/views/private/components/drawer-collection';
diff --git a/app/src/interfaces/repeater/repeater-row-header.vue b/app/src/interfaces/repeater/repeater-row-header.vue
index e349408bf5..ec56eaba49 100644
--- a/app/src/interfaces/repeater/repeater-row-header.vue
+++ b/app/src/interfaces/repeater/repeater-row-header.vue
@@ -10,8 +10,7 @@
 <script lang="ts">
 import { defineComponent, computed } from '@vue/composition-api';
 import { render } from 'micromustache';
-import i18n from '@/lang';
-import getFieldsFromTemplate from '@/utils/get-fields-from-template';
+import { getFieldsFromTemplate } from '@/utils/get-fields-from-template';
 
 export default defineComponent({
 	props: {
diff --git a/app/src/interfaces/translations/translations.vue b/app/src/interfaces/translations/translations.vue
index baf13c3c6f..e2b6349687 100644
--- a/app/src/interfaces/translations/translations.vue
+++ b/app/src/interfaces/translations/translations.vue
@@ -33,7 +33,7 @@ import { defineComponent, PropType, computed, ref, watch } from '@vue/compositio
 import { useRelationsStore } from '@/stores/';
 import api from '@/api';
 import { Relation } from '@/types';
-import getFieldsFromTemplate from '@/utils/get-fields-from-template';
+import { getFieldsFromTemplate } from '@/utils/get-fields-from-template';
 import DrawerItem from '@/views/private/components/drawer-item/drawer-item.vue';
 import { useCollection } from '@/composables/use-collection';
 import { unexpectedError } from '@/utils/unexpected-error';
diff --git a/app/src/interfaces/tree-view/tree-view.vue b/app/src/interfaces/tree-view/tree-view.vue
index 2ca9f262ee..4180ccdec8 100644
--- a/app/src/interfaces/tree-view/tree-view.vue
+++ b/app/src/interfaces/tree-view/tree-view.vue
@@ -50,7 +50,7 @@ import { defineComponent, ref, computed, PropType, onMounted, watch } from '@vue
 import { useCollection } from '@/composables/use-collection';
 import { useRelationsStore } from '@/stores';
 import api from '@/api';
-import getFieldsFromTemplate from '@/utils/get-fields-from-template';
+import { getFieldsFromTemplate } from '@/utils/get-fields-from-template';
 import draggable from 'vuedraggable';
 import hideDragImage from '@/utils/hide-drag-image';
 import NestedDraggable from './nested-draggable.vue';
diff --git a/app/src/layouts/cards/cards.vue b/app/src/layouts/cards/cards.vue
index ef4c408d2a..a7798b52c5 100644
--- a/app/src/layouts/cards/cards.vue
+++ b/app/src/layouts/cards/cards.vue
@@ -141,7 +141,7 @@ import useSync from '@/composables/use-sync/';
 import useCollection from '@/composables/use-collection/';
 import useItems from '@/composables/use-items';
 import Card from './components/card.vue';
-import getFieldsFromTemplate from '@/utils/get-fields-from-template';
+import { getFieldsFromTemplate } from '@/utils/get-fields-from-template';
 import { useRelationsStore } from '@/stores/';
 
 import CardsHeader from './components/header.vue';
diff --git a/app/src/modules/collections/routes/item.vue b/app/src/modules/collections/routes/item.vue
index a8f09a525e..3ad844ad40 100644
--- a/app/src/modules/collections/routes/item.vue
+++ b/app/src/modules/collections/routes/item.vue
@@ -207,6 +207,8 @@ import useShortcut from '@/composables/use-shortcut';
 import { NavigationGuard } from 'vue-router';
 import { usePermissions } from '@/composables/use-permissions';
 import unsavedChanges from '@/composables/unsaved-changes';
+import { useTitle } from '@/composables/use-title';
+import { renderStringTemplate } from '@/utils/render-string-template';
 
 export default defineComponent({
 	name: 'collections-item',
@@ -300,6 +302,24 @@ export default defineComponent({
 				: i18n.t('editing_in', { collection: collectionInfo.value?.name });
 		});
 
+		const tabTitle = computed(() => {
+			let tabTitle = (collectionInfo.value?.name || '') + ' | ';
+
+			if (collectionInfo.value && collectionInfo.value.meta) {
+				if (collectionInfo.value.meta.singleton === true) {
+					return tabTitle + collectionInfo.value.name;
+				} else if (isNew.value === false && collectionInfo.value.meta.display_template) {
+					const { displayValue } = renderStringTemplate(collectionInfo.value.meta.display_template, templateValues);
+
+					if (displayValue.value !== undefined) return tabTitle + displayValue.value;
+				}
+			}
+
+			return tabTitle + title.value;
+		});
+
+		useTitle(tabTitle);
+
 		const archiveTooltip = computed(() => {
 			if (archiveAllowed.value === false) return i18n.t('not_allowed');
 			if (isArchived.value === true) return i18n.t('unarchive');
diff --git a/app/src/utils/get-fields-from-template/get-fields-from-template.ts b/app/src/utils/get-fields-from-template.ts
similarity index 52%
rename from app/src/utils/get-fields-from-template/get-fields-from-template.ts
rename to app/src/utils/get-fields-from-template.ts
index dae035c1e4..fe67e93e2c 100644
--- a/app/src/utils/get-fields-from-template/get-fields-from-template.ts
+++ b/app/src/utils/get-fields-from-template.ts
@@ -1,6 +1,8 @@
-export default function getFieldsFromTemplate(string: string) {
+export function getFieldsFromTemplate(template: string | null) {
+	if (template === null) return [];
+
 	const regex = /{{(.*?)}}/g;
-	let fields = string.match(regex);
+	let fields = template.match(regex);
 
 	if (!Array.isArray(fields)) {
 		return [];
@@ -9,5 +11,5 @@ export default function getFieldsFromTemplate(string: string) {
 	fields = fields.map((field) => {
 		return field.replace(/{{/g, '').replace(/}}/g, '').trim();
 	});
-	return fields;
+	return fields as string[];
 }
diff --git a/app/src/utils/get-fields-from-template/index.ts b/app/src/utils/get-fields-from-template/index.ts
deleted file mode 100644
index 48ce11b758..0000000000
--- a/app/src/utils/get-fields-from-template/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import getFieldsFromTemplate from './get-fields-from-template';
-
-export { getFieldsFromTemplate };
-export default getFieldsFromTemplate;
diff --git a/app/src/utils/render-string-template.ts b/app/src/utils/render-string-template.ts
new file mode 100644
index 0000000000..2ee3bdcca0
--- /dev/null
+++ b/app/src/utils/render-string-template.ts
@@ -0,0 +1,19 @@
+import { computed, Ref } from '@vue/composition-api';
+import { render } from 'micromustache';
+import { getFieldsFromTemplate } from './get-fields-from-template';
+
+export function renderStringTemplate(template: Ref<string | null> | string, item: Ref<Record<string, any> | null>) {
+	const templateString = computed(() => (typeof template === 'string' ? template : template.value));
+
+	const fieldsInTemplate = computed(() => getFieldsFromTemplate(templateString.value));
+
+	const displayValue = computed(() => {
+		if (!item.value || !templateString.value || !fieldsInTemplate.value) return;
+
+		try {
+			return render(templateString.value, item.value, { propsExist: true });
+		} catch {}
+	});
+
+	return { fieldsInTemplate, displayValue };
+}
diff --git a/app/src/views/private/private-view.vue b/app/src/views/private/private-view.vue
index 3b733ccf9a..8da38d6c1f 100644
--- a/app/src/views/private/private-view.vue
+++ b/app/src/views/private/private-view.vue
@@ -72,6 +72,7 @@ import NotificationsPreview from './components/notifications-preview/';
 import NotificationDialogs from './components/notification-dialogs/';
 import { useUserStore, useAppStore } from '@/stores';
 import router from '@/router';
+import useTitle from '@/composables/use-title';
 
 export default defineComponent({
 	components: {
@@ -90,7 +91,8 @@ export default defineComponent({
 			default: null,
 		},
 	},
-	setup() {
+	setup(props) {
+		const { title } = toRefs(props);
 		const navOpen = ref(false);
 		const contentEl = ref<Element>();
 		const userStore = useUserStore();
@@ -113,20 +115,10 @@ export default defineComponent({
 
 		router.afterEach(async (to, from) => {
 			contentEl.value?.scrollTo({ top: 0 });
-
-			// await nextTick();
-
-			// const hash = to.hash;
-
-			// if (hash) {
-			// 	const linkedEl = document.querySelector(hash) as HTMLElement;
-
-			// 	if (linkedEl) {
-			// 		contentEl.value?.scrollTo({ top: linkedEl.offsetTop - 100, behavior: 'smooth' });
-			// 	}
-			// }
 		});
 
+		useTitle(title);
+
 		return {
 			navOpen,
 			contentEl,