Remake group and quota details section with Vue

Signed-off-by: Christopher Ng <chrng8@gmail.com>

apps/settings/css/settings.css

@@ -284,24 +284,6 @@ select#timezone, select#languageinput, select#localeinput {
   opacity: 100;
 }
 
-#body-settings #quota {
-  cursor: default;
-  position: relative;
-}
-#body-settings #quota progress {
-  height: 6px;
-}
-#body-settings #quota progress::-moz-progress-bar {
-  border-radius: 3px 0 0 3px;
-}
-#body-settings #quota progress::-webkit-progress-value {
-  border-radius: 3px 0 0 3px;
-}
-#body-settings #quota div {
-  font-weight: normal;
-  white-space: nowrap;
-}
-
 /* verify accounts */
 /* only show pointer cursor when popup will be there */
 .verification-dialog {
@@ -372,10 +354,6 @@ select#timezone, select#languageinput, select#localeinput {
   cursor: default;
 }
 
-#groups-groups {
-  padding-top: 5px;
-}
-
 .clientsbox img {
   height: 60px;
 }

apps/settings/css/settings.scss

@@ -276,30 +276,6 @@ select {
 	}
 }
 
-
-#body-settings #quota {
-	cursor: default;
-	position: relative;
-
-	progress {
-		height: 6px;
-
-		&::-moz-progress-bar {
-			border-radius: 3px 0 0 3px;
-		}
-
-		&::-webkit-progress-value {
-			border-radius: 3px 0 0 3px;
-		}
-	}
-
-	div {
-		font-weight: normal;
-		white-space: nowrap;
-	}
-}
-
-
 /* verify accounts */
 /* only show pointer cursor when popup will be there */
 .verification-dialog {
@@ -388,10 +364,6 @@ select {
 	}
 }
 
-#groups-groups {
-	padding-top: 5px;
-}
-
 .clientsbox img {
 	height: 60px;
 }

apps/settings/lib/Settings/Personal/PersonalInfo.php

@@ -139,13 +139,8 @@ class PersonalInfo implements ISettings {
 		$messageParameters = $this->getMessageParameters($account);
 
 		$parameters = [
-			'total_space' => $totalSpace,
-			'usage' => \OC_Helper::humanFileSize($storageInfo['used']),
-			'usage_relative' => round($storageInfo['relative']),
-			'quota' => $storageInfo['quota'],
 			'federationEnabled' => $federationEnabled,
 			'lookupServerUploadEnabled' => $lookupServerUploadEnabled,
-			'groups' => $this->getGroups($user),
 			'isFairUseOfFreePushService' => $this->isFairUseOfFreePushService(),
 			'profileEnabledGlobally' => $this->profileManager->isProfileEnabled(),
 		] + $messageParameters + $localeParameters;
@@ -153,6 +148,11 @@ class PersonalInfo implements ISettings {
 		$personalInfoParameters = [
 			'userId' => $uid,
 			'avatar' => $this->getProperty($account, IAccountManager::PROPERTY_AVATAR),
+			'groups' => $this->getGroups($user),
+			'quota' => $storageInfo['quota'],
+			'totalSpace' => $totalSpace,
+			'usage' => \OC_Helper::humanFileSize($storageInfo['used']),
+			'usageRelative' => round($storageInfo['relative']),
 			'displayName' => $this->getProperty($account, IAccountManager::PROPERTY_DISPLAYNAME),
 			'emailMap' => $this->getEmailMap($account),
 			'phone' => $this->getProperty($account, IAccountManager::PROPERTY_PHONE),

apps/settings/src/components/PersonalInfo/DetailsSection.vue

@@ -0,0 +1,124 @@
+<!--
+	- @copyright 2022 Christopher Ng <chrng8@gmail.com>
+	-
+	- @author Christopher Ng <chrng8@gmail.com>
+	-
+	- @license AGPL-3.0-or-later
+	-
+	- This program is free software: you can redistribute it and/or modify
+	- it under the terms of the GNU Affero General Public License as
+	- published by the Free Software Foundation, either version 3 of the
+	- License, or (at your option) any later version.
+	-
+	- This program is distributed in the hope that it will be useful,
+	- but WITHOUT ANY WARRANTY; without even the implied warranty of
+	- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+	- GNU Affero General Public License for more details.
+	-
+	- You should have received a copy of the GNU Affero General Public License
+	- along with this program. If not, see <http://www.gnu.org/licenses/>.
+	-
+-->
+
+<template>
+	<section>
+		<HeaderBar :readable="t('settings', 'Details')" />
+
+		<div class="details">
+			<div class="details__groups">
+				<Account :size="20" />
+				<div class="details__groups-info">
+					<p>{{ t('settings', 'You are a member of the following groups:') }}</p>
+					<p class="details__groups-list">{{ groups.join(', ') }}</p>
+				</div>
+			</div>
+			<div class="details__quota">
+				<CircleSlice :size="20" />
+				<div class="details__quota-info">
+					<p class="details__quota-text" v-html="quotaText" />
+					<NcProgressBar size="medium"
+						:value="usageRelative"
+						:error="usageRelative > 80" />
+				</div>
+			</div>
+		</div>
+	</section>
+</template>
+
+<script>
+import { loadState } from '@nextcloud/initial-state'
+import NcProgressBar from '@nextcloud/vue/dist/Components/NcProgressBar'
+
+import Account from 'vue-material-design-icons/Account'
+import CircleSlice from 'vue-material-design-icons/CircleSlice3'
+
+import HeaderBar from './shared/HeaderBar.vue'
+
+/** SYNC to be kept in sync with `lib/public/Files/FileInfo.php` */
+const SPACE_UNLIMITED = -3
+
+const { groups, quota, totalSpace, usage, usageRelative } = loadState('settings', 'personalInfoParameters', {})
+
+export default {
+	name: 'DetailsSection',
+
+	components: {
+		Account,
+		CircleSlice,
+		HeaderBar,
+		NcProgressBar,
+	},
+
+	computed: {
+		quotaText() {
+			if (quota === SPACE_UNLIMITED) {
+				return t('settings', 'You are using <strong>{usage}</strong>', { usage })
+			}
+			return t(
+				'settings',
+				'You are using <strong>{usage}</strong> of <strong>{totalSpace}</strong> (<strong>{usageRelative} %</strong>)',
+				{ usage, totalSpace, usageRelative },
+			)
+		}
+	},
+
+	data() {
+		return {
+			groups,
+			usageRelative,
+		}
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.details {
+	display: flex;
+	flex-direction: column;
+	margin: 10px 32px 10px 0;
+	gap: 16px 0;
+	color: var(--color-text-lighter);
+
+	&__groups,
+	&__quota {
+		display: flex;
+		gap: 0 10px;
+
+		&-info {
+			display: flex;
+			flex-direction: column;
+			width: 100%;
+			gap: 4px 0;
+		}
+
+		&-list {
+			font-weight: bold;
+		}
+
+		&::v-deep .material-design-icon {
+			align-self: flex-start;
+			margin-top: 2px;
+		}
+	}
+}
+</style>

apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue

@@ -56,7 +56,6 @@ import FederationControl from './FederationControl.vue'
 
 import {
 	ACCOUNT_PROPERTY_READABLE_ENUM,
-	ACCOUNT_SETTING_PROPERTY_READABLE_ENUM,
 	PROFILE_READABLE_ENUM,
 } from '../../../constants/AccountPropertyConstants.js'
 
@@ -77,7 +76,6 @@ export default {
 		readable: {
 			type: String,
 			required: true,
-			validator: (value) => Object.values(ACCOUNT_PROPERTY_READABLE_ENUM).includes(value) || Object.values(ACCOUNT_SETTING_PROPERTY_READABLE_ENUM).includes(value) || value === PROFILE_READABLE_ENUM.PROFILE_VISIBILITY,
 		},
 		inputId: {
 			type: String,
@@ -109,7 +107,7 @@ export default {
 		},
 
 		isSettingProperty() {
-			return Object.values(ACCOUNT_SETTING_PROPERTY_READABLE_ENUM).includes(this.readable)
+			return !Object.values(ACCOUNT_PROPERTY_READABLE_ENUM).includes(this.readable) && !Object.values(PROFILE_READABLE_ENUM).includes(this.readable)
 		},
 	},
 

apps/settings/src/main-personal-info.js

@@ -27,6 +27,7 @@ import { translate as t } from '@nextcloud/l10n'
 import '@nextcloud/dialogs/styles/toast.scss'
 
 import AvatarSection from './components/PersonalInfo/AvatarSection.vue'
+import DetailsSection from './components/PersonalInfo/DetailsSection.vue'
 import DisplayNameSection from './components/PersonalInfo/DisplayNameSection.vue'
 import EmailSection from './components/PersonalInfo/EmailSection/EmailSection.vue'
 import PhoneSection from './components/PersonalInfo/PhoneSection.vue'
@@ -52,6 +53,7 @@ Vue.mixin({
 })
 
 const AvatarView = Vue.extend(AvatarSection)
+const DetailsView = Vue.extend(DetailsSection)
 const DisplayNameView = Vue.extend(DisplayNameSection)
 const EmailView = Vue.extend(EmailSection)
 const PhoneView = Vue.extend(PhoneSection)
@@ -61,6 +63,7 @@ const TwitterView = Vue.extend(TwitterSection)
 const LanguageView = Vue.extend(LanguageSection)
 
 new AvatarView().$mount('#vue-avatar-section')
+new DetailsView().$mount('#vue-details-section')
 new DisplayNameView().$mount('#vue-displayname-section')
 new EmailView().$mount('#vue-email-section')
 new PhoneView().$mount('#vue-phone-section')

apps/settings/templates/settings/personal/personal.info.php

@@ -49,31 +49,7 @@ script('settings', [
 	<div id="personal-settings-avatar-container" class="personal-settings-container">
 		<div id="vue-avatar-section"></div>
 		<div class="personal-settings-setting-box personal-settings-group-box section">
-			<h3><?php p($l->t('Details')); ?></h3>
-			<div id="groups" class="personal-info icon-user">
-				<p><?php p($l->t('You are a member of the following groups:')); ?></p>
-				<p id="groups-groups">
-					<strong><?php p(implode(', ', $_['groups'])); ?></strong>
-				</p>
-			</div>
-			<div id="quota" class="personal-info icon-quota">
-				<div class="quotatext-bg">
-					<p class="quotatext">
-						<?php if ($_['quota'] === \OCP\Files\FileInfo::SPACE_UNLIMITED) : ?>
-							<?php print_unescaped($l->t(
-								'You are using <strong>%s</strong>',
-								[$_['usage']]
-							)); ?>
-						<?php else : ?>
-							<?php print_unescaped($l->t(
-								'You are using <strong>%1$s</strong> of <strong>%2$s</strong> (<strong>%3$s %%</strong>)',
-								[$_['usage'], $_['total_space'],  $_['usage_relative']]
-							)); ?>
-						<?php endif ?>
-					</p>
-				</div>
-				<progress value="<?php p($_['usage_relative']); ?>" max="100" <?php if ($_['usage_relative'] > 80) : ?> class="warn" <?php endif; ?>></progress>
-			</div>
+			<div id="vue-details-section"></div>
 		</div>
 	</div>