Add new profile visibility section

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

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

@@ -30,11 +30,6 @@
 		<Biography
 			:biography.sync="primaryBiography.value"
 			:scope.sync="primaryBiography.scope" />
-
-		<VisibilityDropdown
-			:param-id="accountPropertyId"
-			:display-id="accountProperty"
-			:visibility.sync="visibility" />
 	</section>
 </template>
 
@@ -43,28 +38,23 @@ import { loadState } from '@nextcloud/initial-state'
 
 import Biography from './Biography'
 import HeaderBar from '../shared/HeaderBar'
-import VisibilityDropdown from '../shared/VisibilityDropdown'
 
-import { ACCOUNT_PROPERTY_ENUM, ACCOUNT_PROPERTY_READABLE_ENUM } from '../../../constants/AccountPropertyConstants'
+import { ACCOUNT_PROPERTY_READABLE_ENUM } from '../../../constants/AccountPropertyConstants'
 
 const { biographyMap: { primaryBiography } } = loadState('settings', 'personalInfoParameters', {})
-const { profileConfig: { biography: { visibility } } } = loadState('settings', 'profileParameters', {})
 
 export default {
 	name: 'BiographySection',
 
 	components: {
 		Biography,
 		HeaderBar,
-		VisibilityDropdown,
 	},
 
 	data() {
 		return {
 			accountProperty: ACCOUNT_PROPERTY_READABLE_ENUM.BIOGRAPHY,
-			accountPropertyId: ACCOUNT_PROPERTY_ENUM.BIOGRAPHY,
 			primaryBiography,
-			visibility,
 		}
 	},
 }

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

@@ -33,11 +33,6 @@
 			<DisplayName
 				:display-name.sync="primaryDisplayName.value"
 				:scope.sync="primaryDisplayName.scope" />
-
-			<VisibilityDropdown
-				:param-id="accountPropertyId"
-				:display-id="accountProperty"
-				:visibility.sync="visibility" />
 		</template>
 
 		<span v-else>
@@ -51,31 +46,26 @@ import { loadState } from '@nextcloud/initial-state'
 
 import DisplayName from './DisplayName'
 import HeaderBar from '../shared/HeaderBar'
-import VisibilityDropdown from '../shared/VisibilityDropdown'
 
-import { ACCOUNT_PROPERTY_ENUM, ACCOUNT_PROPERTY_READABLE_ENUM } from '../../../constants/AccountPropertyConstants'
+import { ACCOUNT_PROPERTY_READABLE_ENUM } from '../../../constants/AccountPropertyConstants'
 import { validateStringInput } from '../../../utils/validate'
 
 const { displayNameMap: { primaryDisplayName } } = loadState('settings', 'personalInfoParameters', {})
 const { displayNameChangeSupported } = loadState('settings', 'accountParameters', {})
-const { profileConfig: { displayname: { visibility } } } = loadState('settings', 'profileParameters', {})
 
 export default {
 	name: 'DisplayNameSection',
 
 	components: {
 		DisplayName,
 		HeaderBar,
-		VisibilityDropdown,
 	},
 
 	data() {
 		return {
 			accountProperty: ACCOUNT_PROPERTY_READABLE_ENUM.DISPLAYNAME,
-			accountPropertyId: ACCOUNT_PROPERTY_ENUM.DISPLAYNAME,
 			displayNameChangeSupported,
 			primaryDisplayName,
-			visibility,
 		}
 	},
 

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

@@ -40,11 +40,6 @@
 				:active-notification-email.sync="notificationEmail"
 				@update:email="onUpdateEmail"
 				@update:notification-email="onUpdateNotificationEmail" />
-
-			<VisibilityDropdown
-				:param-id="accountPropertyId"
-				:display-id="accountProperty"
-				:visibility.sync="visibility" />
 		</template>
 
 		<span v-else>
@@ -73,35 +68,30 @@ import { showError } from '@nextcloud/dialogs'
 
 import Email from './Email'
 import HeaderBar from '../shared/HeaderBar'
-import VisibilityDropdown from '../shared/VisibilityDropdown'
 
-import { ACCOUNT_PROPERTY_ENUM, ACCOUNT_PROPERTY_READABLE_ENUM, DEFAULT_ADDITIONAL_EMAIL_SCOPE } from '../../../constants/AccountPropertyConstants'
+import { ACCOUNT_PROPERTY_READABLE_ENUM, DEFAULT_ADDITIONAL_EMAIL_SCOPE } from '../../../constants/AccountPropertyConstants'
 import { savePrimaryEmail, savePrimaryEmailScope, removeAdditionalEmail } from '../../../service/PersonalInfo/EmailService'
 import { validateEmail } from '../../../utils/validate'
 
 const { emailMap: { additionalEmails, primaryEmail, notificationEmail } } = loadState('settings', 'personalInfoParameters', {})
 const { displayNameChangeSupported } = loadState('settings', 'accountParameters', {})
-const { profileConfig: { email: { visibility } } } = loadState('settings', 'profileParameters', {})
 
 export default {
 	name: 'EmailSection',
 
 	components: {
 		HeaderBar,
 		Email,
-		VisibilityDropdown,
 	},
 
 	data() {
 		return {
 			accountProperty: ACCOUNT_PROPERTY_READABLE_ENUM.EMAIL,
-			accountPropertyId: ACCOUNT_PROPERTY_ENUM.EMAIL,
 			additionalEmails,
 			displayNameChangeSupported,
 			primaryEmail,
 			savePrimaryEmailScope,
 			notificationEmail,
-			visibility,
 		}
 	},
 

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

@@ -30,11 +30,6 @@
 		<Headline
 			:headline.sync="primaryHeadline.value"
 			:scope.sync="primaryHeadline.scope" />
-
-		<VisibilityDropdown
-			:param-id="accountPropertyId"
-			:display-id="accountProperty"
-			:visibility.sync="visibility" />
 	</section>
 </template>
 
@@ -43,28 +38,23 @@ import { loadState } from '@nextcloud/initial-state'
 
 import Headline from './Headline'
 import HeaderBar from '../shared/HeaderBar'
-import VisibilityDropdown from '../shared/VisibilityDropdown'
 
-import { ACCOUNT_PROPERTY_ENUM, ACCOUNT_PROPERTY_READABLE_ENUM } from '../../../constants/AccountPropertyConstants'
+import { ACCOUNT_PROPERTY_READABLE_ENUM } from '../../../constants/AccountPropertyConstants'
 
 const { headlineMap: { primaryHeadline } } = loadState('settings', 'personalInfoParameters', {})
-const { profileConfig: { headline: { visibility } } } = loadState('settings', 'profileParameters', {})
 
 export default {
 	name: 'HeadlineSection',
 
 	components: {
 		Headline,
 		HeaderBar,
-		VisibilityDropdown,
 	},
 
 	data() {
 		return {
 			accountProperty: ACCOUNT_PROPERTY_READABLE_ENUM.HEADLINE,
-			accountPropertyId: ACCOUNT_PROPERTY_ENUM.HEADLINE,
 			primaryHeadline,
-			visibility,
 		}
 	},
 }

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

@@ -30,11 +30,6 @@
 		<Organisation
 			:organisation.sync="primaryOrganisation.value"
 			:scope.sync="primaryOrganisation.scope" />
-
-		<VisibilityDropdown
-			:param-id="accountPropertyId"
-			:display-id="accountProperty"
-			:visibility.sync="visibility" />
 	</section>
 </template>
 
@@ -43,28 +38,23 @@ import { loadState } from '@nextcloud/initial-state'
 
 import Organisation from './Organisation'
 import HeaderBar from '../shared/HeaderBar'
-import VisibilityDropdown from '../shared/VisibilityDropdown'
 
-import { ACCOUNT_PROPERTY_ENUM, ACCOUNT_PROPERTY_READABLE_ENUM } from '../../../constants/AccountPropertyConstants'
+import { ACCOUNT_PROPERTY_READABLE_ENUM } from '../../../constants/AccountPropertyConstants'
 
 const { organisationMap: { primaryOrganisation } } = loadState('settings', 'personalInfoParameters', {})
-const { profileConfig: { organisation: { visibility } } } = loadState('settings', 'profileParameters', {})
 
 export default {
 	name: 'OrganisationSection',
 
 	components: {
 		Organisation,
 		HeaderBar,
-		VisibilityDropdown,
 	},
 
 	data() {
 		return {
 			accountProperty: ACCOUNT_PROPERTY_READABLE_ENUM.ORGANISATION,
-			accountPropertyId: ACCOUNT_PROPERTY_ENUM.ORGANISATION,
 			primaryOrganisation,
-			visibility,
 		}
 	},
 }

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

@@ -25,14 +25,17 @@
 		<HeaderBar
 			:account-property="heading" />
 
-		<VisibilityDropdown v-for="parameter in visibilityArray"
-			:key="parameter.id"
-			:param-id="parameter.id"
-			:display-id="parameter.displayId"
-			:show-display-id="true"
-			:visibility.sync="parameter.visibility" />
-
-		<em :class="{ disabled }">{{ t('settings', 'The more restrictive setting of either visibility or scope is respected on your Profile — For example, when visibility is set to "Show to everyone" and scope is set to "Private", "Private" will be respected') }}</em>
+		<em :class="{ disabled }">
+			{{ t('settings', 'The more restrictive setting of either visibility or scope is respected on your Profile. For example, if visibility is set to "Show to everyone" and scope is set to "Private", "Private" is respected.') }}
+		</em>
+
+		<div class="visibility-dropdowns">
+			<VisibilityDropdown v-for="param in visibilityArray"
+				:key="param.id"
+				:param-id="param.id"
+				:display-id="param.displayId"
+				:visibility.sync="param.visibility" />
+		</div>
 	</section>
 </template>
 
@@ -42,7 +45,7 @@ import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 
 import HeaderBar from '../shared/HeaderBar'
 import VisibilityDropdown from '../shared/VisibilityDropdown'
-import { ACCOUNT_PROPERTY_ENUM, PROFILE_READABLE_ENUM } from '../../../constants/AccountPropertyConstants'
+import { PROFILE_READABLE_ENUM } from '../../../constants/AccountPropertyConstants'
 
 const { profileConfig } = loadState('settings', 'profileParameters', {})
 const { profileEnabled } = loadState('settings', 'personalInfoParameters', false)
@@ -60,9 +63,8 @@ export default {
 			heading: PROFILE_READABLE_ENUM.PROFILE_VISIBILITY,
 			profileEnabled,
 			visibilityArray: Object.entries(profileConfig)
-				// Filter for profile parameters registered by apps in this section as visibility controls for the rest (account properties) are handled in their respective property sections
-				.filter(([paramId, { displayId, visibility }]) => !Object.values(ACCOUNT_PROPERTY_ENUM).includes(paramId))
-				.map(([paramId, { displayId, visibility }]) => ({ id: paramId, displayId, visibility })),
+				.map(([paramId, { appId, displayId, visibility }]) => ({ id: paramId, appId, displayId, visibility }))
+				.sort((a, b) => a.appId === b.appId ? a.displayId.localeCompare(b.displayId) : (a.appId !== 'core' ? -1 : 1)),
 		}
 	},
 
@@ -91,10 +93,11 @@ export default {
 <style lang="scss" scoped>
 section {
 	padding: 10px 10px;
+	width: 980px;
 
 	em {
 		display: block;
-		margin-top: 16px;
+		margin: 16px 0;
 
 		&.disabled {
 			filter: grayscale(1);
@@ -110,6 +113,14 @@ section {
 		}
 	}
 
+	.visibility-dropdowns {
+		display: grid;
+		grid-auto-flow: column;
+		grid-template-rows: repeat(auto-fit, 44px);
+		height: 350px;
+		gap: 10px 80px;
+	}
+
 	&::v-deep button:disabled {
 		cursor: default;
 	}

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

@@ -30,11 +30,6 @@
 		<Role
 			:role.sync="primaryRole.value"
 			:scope.sync="primaryRole.scope" />
-
-		<VisibilityDropdown
-			:param-id="accountPropertyId"
-			:display-id="accountProperty"
-			:visibility.sync="visibility" />
 	</section>
 </template>
 
@@ -43,28 +38,23 @@ import { loadState } from '@nextcloud/initial-state'
 
 import Role from './Role'
 import HeaderBar from '../shared/HeaderBar'
-import VisibilityDropdown from '../shared/VisibilityDropdown'
 
-import { ACCOUNT_PROPERTY_ENUM, ACCOUNT_PROPERTY_READABLE_ENUM } from '../../../constants/AccountPropertyConstants'
+import { ACCOUNT_PROPERTY_READABLE_ENUM } from '../../../constants/AccountPropertyConstants'
 
 const { roleMap: { primaryRole } } = loadState('settings', 'personalInfoParameters', {})
-const { profileConfig: { role: { visibility } } } = loadState('settings', 'profileParameters', {})
 
 export default {
 	name: 'RoleSection',
 
 	components: {
 		Role,
 		HeaderBar,
-		VisibilityDropdown,
 	},
 
 	data() {
 		return {
 			accountProperty: ACCOUNT_PROPERTY_READABLE_ENUM.ROLE,
-			accountPropertyId: ACCOUNT_PROPERTY_ENUM.ROLE,
 			primaryRole,
-			visibility,
 		}
 	},
 }