Skip to content

Commit

Permalink
feat: Update property setting options display order and remove the pa…
Browse files Browse the repository at this point in the history 
…rent option - MEED-8030,MEED-8119 - Meeds-io/MIPs#171 (#4380)

 Update property setting option display order and remove the parent
option
  • Loading branch information
@hakermi
hakermi committed Jan 28, 2025
1 parent 35d3820 commit 30ce592
Showing 1 changed file with 123 additions and 161 deletions.
284 changes: 123 additions & 161 deletions ...src/main/webapp/vue-apps/profile-settings/components/drawers/ProfileSettingFormDrawer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,33 +97,133 @@
</span>
</v-tooltip>
</label>
<label
for="settingParentField"
class="mx-4 mt-2">
{{ $t('profileSettings.label.parent') }}
<v-autocomplete
ref="settingParentField"
id="settingParentField"
v-model="setting.parentId"
:items="parents"
:placeholder="$t('profileSettings.placeholder.parent')"
class="py-4"
outlined
dense
width="100%"
max-width="100%"
item-text="resolvedLabel"
item-value="id"
@blur="blurAutocomplete()" />
</label>
<v-list-item class="mt-4">
<v-list-item-content transition="fade-transition" class="d-flex activeLabel py-0">
<v-list-item-title class="d-flex activedLabel flex-grow-1 text-no-wrap pb-2">
<div>
{{ $t('profileSettings.label.active') }}
</div>
</v-list-item-title>
</v-list-item-content>
<v-list-item-action>
<v-switch
v-model="setting.active"
:disabled="saving"
:ripple="false"
color="primary"
class="activeSwitcher my-auto" />
</v-list-item-action>
</v-list-item>
<v-list-item>
<v-list-item-content transition="fade-transition" class="d-flex visibleLabel py-0">
<v-list-item-title class="d-flex visibleLabel flex-grow-1 text-no-wrap pb-2">
<div>
{{ $t('profileSettings.label.visible') }}
</div>
</v-list-item-title>
</v-list-item-content>
<v-list-item-action>
<v-switch
v-model="setting.visible"
:disabled="saving"
:ripple="false"
color="primary"
class="visibleSwitcher my-auto" />
</v-list-item-action>
</v-list-item>
<v-list-item>
<v-list-item-content
transition="fade-transition"
class="d-flex activeLabel py-0">
<v-list-item-title
class="d-flex activedLabel flex-grow-1 text-no-wrap pb-2">
<div>
{{ $t('profileSettings.label.hiddenable') }}
</div>
</v-list-item-title>
<v-list-item-subtitle
class="mt-n3">
<span
v-if="setting.hiddenable"
class="caption">
{{ $t('profileSettings.label.hiddenable.enabled') }}
</span>
<span
v-else
class="caption">
{{ $t('profileSettings.label.hiddenable.disabled') }}
</span>
</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-tooltip
bottom
:disabled="!unHiddenableSetting">
<template #activator="{ on, attrs }">
<div
v-bind="attrs"
v-on="on">
<v-switch
v-model="setting.hiddenable"
:disabled="saving || unHiddenableSetting"
:alt="setting.hiddenable && $t('profileSettings.show.property.alt')
|| $t('profileSettings.hide.property.alt')"
:ripple="false"
color="primary"
:aria-labelledBy="$t('profileSettings.label.hiddenable')"
class="activeSwitcher my-auto" />
</div>
</template>
<span v-if="setting?.children?.length">
{{ $t('profileSettings.hiddenable.parentProperty.disabled') }}
</span>
<span v-else>
{{ $t('profileSettings.unHiddenable.property.tooltip') }}
</span>
</v-tooltip>
</v-list-item-action>
</v-list-item>
<v-list-item>
<v-list-item-content transition="fade-transition" class="d-flex editableLabel py-0">
<v-list-item-title class="d-flex editableLabel flex-grow-1 text-no-wrap pb-2">
<div>
{{ $t('profileSettings.label.editable') }}
</div>
</v-list-item-title>
</v-list-item-content>
<v-list-item-action>
<v-switch
v-model="setting.editable"
:disabled="saving"
:ripple="false"
color="primary"
class="editableSwitcher my-auto" />
</v-list-item-action>
</v-list-item>
<v-list-item>
<v-list-item-content transition="fade-transition" class="d-flex requiredField py-0">
<v-list-item-title class="d-flex requiredLabel flex-grow-1 text-no-wrap pb-2">
<div>
{{ $t('profileSettings.label.required') }}
</div>
</v-list-item-title>
</v-list-item-content>
<v-list-item-action>
<v-switch
v-model="setting.required"
:disabled="saving"
:ripple="false"
color="primary"
class="requiredSwitcher my-auto" />
</v-list-item-action>
</v-list-item>
<v-tooltip
bottom
:disabled="!isUserType">
<template #activator="{ on, attrs }">
<div
v-bind="attrs"
v-on="on"
class="mt-4">
v-on="on">
<v-list-item>
<v-list-item-content
:class="{'text--disabled': isUserType}"
Expand Down Expand Up @@ -172,59 +272,6 @@
{{ $t('profileSettings.dropdownList.available.info') }}
</span>
</v-tooltip>
<v-list-item>
<v-list-item-content transition="fade-transition" class="d-flex visibleLabel py-0">
<v-list-item-title class="d-flex visibleLabel flex-grow-1 text-no-wrap pb-2">
<div>
{{ $t('profileSettings.label.visible') }}
</div>
</v-list-item-title>
</v-list-item-content>
<v-list-item-action>
<v-switch
v-model="setting.visible"
:disabled="saving"
:ripple="false"
color="primary"
class="visibleSwitcher my-auto" />
</v-list-item-action>
</v-list-item>

<v-list-item>
<v-list-item-content transition="fade-transition" class="d-flex editableLabel py-0">
<v-list-item-title class="d-flex editableLabel flex-grow-1 text-no-wrap pb-2">
<div>
{{ $t('profileSettings.label.editable') }}
</div>
</v-list-item-title>
</v-list-item-content>
<v-list-item-action>
<v-switch
v-model="setting.editable"
:disabled="saving"
:ripple="false"
color="primary"
class="editableSwitcher my-auto" />
</v-list-item-action>
</v-list-item>

<v-list-item>
<v-list-item-content transition="fade-transition" class="d-flex requiredField py-0">
<v-list-item-title class="d-flex requiredLabel flex-grow-1 text-no-wrap pb-2">
<div>
{{ $t('profileSettings.label.required') }}
</div>
</v-list-item-title>
</v-list-item-content>
<v-list-item-action>
<v-switch
v-model="setting.required"
:disabled="saving"
:ripple="false"
color="primary"
class="requiredSwitcher my-auto" />
</v-list-item-action>
</v-list-item>
<v-list-item>
<v-list-item-content transition="fade-transition" class="d-flex multiValuedField py-0">
<v-list-item-title class="d-flex multiValuedLabel flex-grow-1 text-no-wrap pb-2">
Expand All @@ -245,7 +292,6 @@
class="requiredSwitcher my-auto" />
</v-list-item-action>
</v-list-item>

<v-list-item>
<v-list-item-content transition="fade-transition" class="d-flex groupSynchronizedField py-0">
<v-list-item-title class="d-flex groupSynchronizedLabel flex-grow-1 text-no-wrap pb-2">
Expand All @@ -263,76 +309,6 @@
class="groupSynchronizedSwitcher my-auto" />
</v-list-item-action>
</v-list-item>

<v-list-item>
<v-list-item-content transition="fade-transition" class="d-flex activeLabel py-0">
<v-list-item-title class="d-flex activedLabel flex-grow-1 text-no-wrap pb-2">
<div>
{{ $t('profileSettings.label.active') }}
</div>
</v-list-item-title>
</v-list-item-content>
<v-list-item-action>
<v-switch
v-model="setting.active"
:disabled="saving"
:ripple="false"
color="primary"
class="activeSwitcher my-auto" />
</v-list-item-action>
</v-list-item>
<v-list-item>
<v-list-item-content
transition="fade-transition"
class="d-flex activeLabel py-0">
<v-list-item-title
class="d-flex activedLabel flex-grow-1 text-no-wrap pb-2">
<div>
{{ $t('profileSettings.label.hiddenable') }}
</div>
</v-list-item-title>
<v-list-item-subtitle
class="mt-n3">
<span
v-if="setting.hiddenable"
class="caption">
{{ $t('profileSettings.label.hiddenable.enabled') }}
</span>
<span
v-else
class="caption">
{{ $t('profileSettings.label.hiddenable.disabled') }}
</span>
</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-tooltip
bottom
:disabled="!unHiddenableSetting">
<template #activator="{ on, attrs }">
<div
v-bind="attrs"
v-on="on">
<v-switch
v-model="setting.hiddenable"
:disabled="saving || unHiddenableSetting"
:alt="setting.hiddenable && $t('profileSettings.show.property.alt')
|| $t('profileSettings.hide.property.alt')"
:ripple="false"
color="primary"
:aria-labelledBy="$t('profileSettings.label.hiddenable')"
class="activeSwitcher my-auto" />
</div>
</template>
<span v-if="setting?.children?.length">
{{ $t('profileSettings.hiddenable.parentProperty.disabled') }}
</span>
<span v-else>
{{ $t('profileSettings.unHiddenable.property.tooltip') }}
</span>
</v-tooltip>
</v-list-item-action>
</v-list-item>
<v-list-item>
<v-list-item-content
transition="fade-transition"
Expand Down Expand Up @@ -427,7 +403,6 @@ export default {
saving: false,
confirmNewPassword: null,
setting: {},
parents: [],
labels: [],
changes: false,
labelsObjectType: 'profileProperty',
Expand Down Expand Up @@ -514,10 +489,6 @@ export default {
this.$root.$on('setting-updated', this.handleSettingUpdated);
},
methods: {
blurAutocomplete() {
this.$refs.settingParentField.isFocused = false;
this.$refs.settingParentField.isMenuActive = false;
},
getResolvedName(item){
const lang = eXo && eXo.env.portal.language || 'en';
const resolvedLabel = !item.labels ? null : item.labels.find(v => v.language === lang);
Expand All @@ -529,9 +500,6 @@ export default {
addNewSetting() {
this.setting = {visible: true, editable: true, groupSynchronized: false, active: true, groupSynchronizationEnabled: true};
this.labels = [{language: 'en', label: '', objectType: this.labelsObjectType}];
this.parents = Object.assign([], this.settings);
this.parents = this.parents.filter(setting => setting.id !== this.setting.id && !setting.parentId && !setting.multiValued);
this.parents.forEach(setting => setting.resolvedLabel = this.getResolvedName(setting));
this.newSetting = true;
this.changes= false;
this.drawer = true;
Expand All @@ -540,17 +508,14 @@ export default {
this.initialSetting = structuredClone(setting);
this.initialLabels = JSON.parse(JSON.stringify(setting.labels));
this.setting = { ...setting};
this.parents = Object.assign([], this.settings);
this.parents = !(Array.isArray(this.setting?.children) && this.setting?.children.length) && this.parents.filter(setting => setting.id !== this.setting.id && !setting.parentId && !setting.multiValued) || [];
this.parents.forEach(setting => setting.resolvedLabel = this.getResolvedName(setting));
this.parents.unshift({resolvedLabel: ''});
this.newSetting = false;
this.labels = JSON.parse(JSON.stringify(this.setting.labels));
this.changes= false;
this.drawer = true;
},
handleSettingUpdated(setting) {
this.initialSetting = structuredClone(setting);
this.areLabelsChanged = false;
},
saveSetting(event) {
this.changes=true;
Expand Down Expand Up @@ -639,13 +604,10 @@ export default {
return true;
},
areSettingsEqual(initialSetting, setting) {
const fields = ['id', 'parentId', 'active', 'groupSynchronized', 'multiValued', 'propertyOptions',
const fields = ['id', 'active', 'groupSynchronized', 'multiValued', 'propertyOptions',
'dropdownList', 'visible', 'required', 'editable', 'hiddenable', 'indexInAnalytics'
];
for (const field of fields) {
if (field === 'parentId' && setting[field] === '') {
setting[field] = null;
}
if (field === 'propertyOptions') {
if (!this.arePropertyOptionsEqual(initialSetting?.[field], setting?.[field])) {
return false;
Expand Down

0 comments on commit 30ce592

Please sign in to comment.