feat(quota): implement Quote component

Signed-off-by: Franziska Bath <[email protected]>

src/App.vue

@@ -18,6 +18,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 
 <template>
 	<content>
+		<Quota />
+		<hr>
 		<LanguageSection />
 		<hr>
 		<AuthTokenSection />
@@ -33,6 +35,7 @@ import AuthTokenSection from './components/security/AuthTokenSection.vue'
 import WebDavUrl from './components/files/WebDavUrl.vue'
 import Software from './components/help/Software.vue'
 import LanguageSection from './components/account/LanguageSection.vue'
+import Quota from './components/account/Quota.vue'
 import { defineComponent } from 'vue'
 
 export default defineComponent({
@@ -42,6 +45,7 @@ export default defineComponent({
 		AuthTokenSection,
 		WebDavUrl,
 		Software,
+		Quota,
 	},
 })
 </script>

src/components/account/Quota.vue

@@ -0,0 +1,109 @@
+<!--
+  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-FileCopyrightText: 2024 STRATO AG
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<section class="section">
+		<h2>{{ t('simplesettings', 'Storage usage') }}</h2>
+		<div class="quota">
+			<NcProgressBar
+				v-if="hasLimitedSpace"
+				size="medium"
+				:value="usageRelative"
+				:color="barColor"
+				:style="{'background-color': backgroundColor}" />
+			<div class="quota-info">
+				<p>
+					<span v-if="hasLimitedSpace" :style="quotaPillStyles(barColor)" />
+					<span v-html="quotaUsedText" />
+				</p>
+				<p v-if="hasLimitedSpace">
+					<span :style="quotaPillStyles(backgroundColor)" />
+					<span v-html="quotaFreeText" />
+				</p>
+			</div>
+		</div>
+	</section>
+</template>
+
+<script>
+import { loadState } from '@nextcloud/initial-state'
+import NcProgressBar from '@nextcloud/vue/dist/Components/NcProgressBar.js'
+
+/** SYNC to be kept in sync with `lib/public/Files/FileInfo.php` */
+const SPACE_UNLIMITED = -3
+
+const barColor = null
+const backgroundColor = null
+
+const { quota, freeSpace, usage, usageRelative } = loadState('simplesettings', 'personalInfoParameters', {})
+const hasLimitedSpace = quota !== SPACE_UNLIMITED
+
+export default {
+	name: 'Quota',
+
+	components: {
+		NcProgressBar,
+	},
+
+	data() {
+		return {
+			usageRelative,
+			barColor,
+			backgroundColor,
+			hasLimitedSpace,
+		}
+	},
+
+	mounted() {
+		const styles = getComputedStyle(document.documentElement)
+		this.barColor = styles.getPropertyValue('--ion-color-blue-b4')
+		this.backgroundColor = styles.getPropertyValue('--ion-color-cool-grey-c2')
+	},
+
+	computed: {
+		quotaUsedText() {
+			return t(
+				'settings', 'Used: <strong>{usage}</strong>', { usage },
+			)
+		},
+		quotaFreeText() {
+			return t(
+				'settings', 'Free: <strong>{freeSpace}</strong>', { freeSpace },
+			)
+		},
+	},
+
+	methods: {
+		quotaPillStyles(color) {
+			return {
+				'background-color': color,
+				'border-radius': 10 + 'px',
+				'margin-right': 12 + 'px',
+				display: 'inline-block',
+				height: 10 + 'px',
+				width: 20 + 'px',
+			}
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.quota {
+	display: flex;
+	flex-direction: column;
+	width: 66.6%;
+	padding-top: 5px;
+	gap: 20px 0;
+
+	&-info {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		gap: 8px 0;
+	}
+}
+</style>