From 79f1f13abf6648e23784597faacca4dec091f492 Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Wed, 10 Jun 2020 17:44:02 -0400
Subject: [PATCH] Project info (#701)

* Make DL styles global

* Show project info in sidebar on settings
---
 src/lang/en-US/index.json                     |  4 +++
 .../components/file-info-drawer-detail.vue    | 27 ----------------
 .../components/project-info-drawer-detail.vue | 32 +++++++++++++++++++
 .../settings/routes/project/project.vue       |  7 ++--
 .../components/user-info-drawer-detail.vue    | 29 -----------------
 src/stores/projects/projects.ts               |  1 +
 src/styles/_base.scss                         | 27 ++++++++++++++++
 7 files changed, 67 insertions(+), 60 deletions(-)
 create mode 100644 src/modules/settings/routes/project/components/project-info-drawer-detail.vue

diff --git a/src/lang/en-US/index.json b/src/lang/en-US/index.json
index ea1d5935f7..e10e5551e6 100644
--- a/src/lang/en-US/index.json
+++ b/src/lang/en-US/index.json
@@ -84,6 +84,10 @@
 	"settings_update_success": "Settings updated",
 	"settings_update_failed": "Updating settings failed",
 
+	"php_api": "PHP API",
+	"php_version": "PHP Version",
+	"max_upload_size": "Max Upload Size",
+
 	"title": "Title",
 
 	"revision_delta_created": "Created",
diff --git a/src/modules/files/routes/detail/components/file-info-drawer-detail.vue b/src/modules/files/routes/detail/components/file-info-drawer-detail.vue
index 31425f9ec8..432b740ec4 100644
--- a/src/modules/files/routes/detail/components/file-info-drawer-detail.vue
+++ b/src/modules/files/routes/detail/components/file-info-drawer-detail.vue
@@ -185,33 +185,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-dl > div {
-	display: flex;
-	margin-bottom: 12px;
-}
-
-dt,
-dd {
-	display: inline-block;
-}
-
-dt {
-	margin-right: 8px;
-	font-weight: 600;
-}
-
-dd {
-	flex-grow: 1;
-	overflow: hidden;
-	color: var(--foreground-subdued);
-	white-space: nowrap;
-	text-overflow: ellipsis;
-}
-
-dd a {
-	color: var(--primary-key);
-}
-
 .checksum {
 	dd {
 		font-family: var(--family-monospace);
diff --git a/src/modules/settings/routes/project/components/project-info-drawer-detail.vue b/src/modules/settings/routes/project/components/project-info-drawer-detail.vue
new file mode 100644
index 0000000000..365cf8227a
--- /dev/null
+++ b/src/modules/settings/routes/project/components/project-info-drawer-detail.vue
@@ -0,0 +1,32 @@
+<template>
+	<drawer-detail icon="info_outline" :title="$t('information')" close>
+		<dl v-if="project">
+			<div>
+				<dt>{{ $t('php_api') }}</dt>
+				<dd>{{ project.server.general.php_api }}</dd>
+			</div>
+			<div>
+				<dt>{{ $t('php_version') }}</dt>
+				<dd>{{ project.server.general.php_version.split('-')[0] }}</dd>
+			</div>
+			<div>
+				<dt>{{ $t('max_upload_size') }}</dt>
+				<dd>{{ bytes(project.server.max_upload_size) }}</dd>
+			</div>
+		</dl>
+	</drawer-detail>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api';
+import useProjectsStore from '@/stores/projects';
+import bytes from 'bytes';
+
+export default defineComponent({
+	setup() {
+		const projectsStore = useProjectsStore();
+
+		return { project: projectsStore.currentProject, bytes };
+	},
+});
+</script>
diff --git a/src/modules/settings/routes/project/project.vue b/src/modules/settings/routes/project/project.vue
index c90795a854..6d28cc0903 100644
--- a/src/modules/settings/routes/project/project.vue
+++ b/src/modules/settings/routes/project/project.vue
@@ -21,9 +21,7 @@
 		</div>
 
 		<template #drawer>
-			<drawer-detail icon="info_outline" :title="$t('information')" close>
-				<div class="format-markdown" v-html="marked($t('page_help_settings_project'))" />
-			</drawer-detail>
+			<project-info-drawer-detail />
 			<drawer-detail icon="help_outline" :title="$t('help_and_docs')">
 				<div class="format-markdown" v-html="marked($t('page_help_settings_project'))" />
 			</drawer-detail>
@@ -37,9 +35,10 @@ import SettingsNavigation from '../../components/navigation/';
 import useCollection from '@/composables/use-collection';
 import useSettingsStore from '@/stores/settings';
 import marked from 'marked';
+import ProjectInfoDrawerDetail from './components/project-info-drawer-detail.vue';
 
 export default defineComponent({
-	components: { SettingsNavigation },
+	components: { SettingsNavigation, ProjectInfoDrawerDetail },
 	setup() {
 		const settingsStore = useSettingsStore();
 		const { fields } = useCollection(ref('directus_settings'));
diff --git a/src/modules/users/routes/detail/components/user-info-drawer-detail.vue b/src/modules/users/routes/detail/components/user-info-drawer-detail.vue
index 36da0311ec..ede2c465cf 100644
--- a/src/modules/users/routes/detail/components/user-info-drawer-detail.vue
+++ b/src/modules/users/routes/detail/components/user-info-drawer-detail.vue
@@ -55,32 +55,3 @@ export default defineComponent({
 	},
 });
 </script>
-
-<style lang="scss" scoped>
-dl > div {
-	display: flex;
-	margin-bottom: 12px;
-}
-
-dt,
-dd {
-	display: inline-block;
-}
-
-dt {
-	margin-right: 8px;
-	font-weight: 600;
-}
-
-dd {
-	flex-grow: 1;
-	overflow: hidden;
-	color: var(--foreground-subdued);
-	white-space: nowrap;
-	text-overflow: ellipsis;
-}
-
-dd a {
-	color: var(--primary);
-}
-</style>
diff --git a/src/stores/projects/projects.ts b/src/stores/projects/projects.ts
index fbeba73142..5f6f68c63b 100644
--- a/src/stores/projects/projects.ts
+++ b/src/stores/projects/projects.ts
@@ -29,6 +29,7 @@ export const useProjectsStore = createStore({
 					color: project?.api?.project_color || null,
 					note: project?.api?.project_public_note || null,
 					sso: project?.api?.sso || [],
+					server: project?.server,
 				};
 			});
 		},
diff --git a/src/styles/_base.scss b/src/styles/_base.scss
index 5ad151ee27..0a2386efaa 100644
--- a/src/styles/_base.scss
+++ b/src/styles/_base.scss
@@ -108,3 +108,30 @@ strong {
 ::selection {
 	background: #e1f0fa;
 }
+
+dl > div {
+	display: flex;
+	margin-bottom: 12px;
+}
+
+dt,
+dd {
+	display: inline-block;
+}
+
+dt {
+	margin-right: 8px;
+	font-weight: 600;
+}
+
+dd {
+	flex-grow: 1;
+	overflow: hidden;
+	color: var(--foreground-subdued);
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+dd a {
+	color: var(--primary-key);
+}