-
Notifications
You must be signed in to change notification settings - Fork 155
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
User/group details and edit panel (#6724)
* Implement details and edit sidebar
- Loading branch information
Jan
authored
Apr 12, 2022
1 parent
aea9378
commit 186139d
Showing
27 changed files
with
1,805 additions
and
171 deletions.
There are no files selected for viewing
57 changes: 57 additions & 0 deletions
57
packages/web-app-user-management/src/components/CompareSaveDialog.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| <template> | ||
| <div class="compare-save-dialog oc-p-s oc-width-1-1"> | ||
| <div class="oc-flex oc-flex-between oc-flex-middle oc-width-1-1"> | ||
| <span>{{ unsavedChangesText }}</span> | ||
| <div> | ||
| <oc-button :disabled="!unsavedChanges" @click="$emit('revert')"> | ||
| <translate>Revert</translate> | ||
| </oc-button> | ||
| <oc-button | ||
| appearance="filled" | ||
| variation="primary" | ||
| :disabled="!unsavedChanges || confirmButtonDisabled" | ||
| @click="$emit('confirm')" | ||
| > | ||
| <translate>Save</translate> | ||
| </oc-button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script lang="js"> | ||
| import isEqual from 'lodash-es/isEqual' | ||
| export default { | ||
| name: 'CompareSaveDialog', | ||
| props: { | ||
| originalObject: { | ||
| type: Object, | ||
| required: true | ||
| }, | ||
| compareObject: { | ||
| type: Object, | ||
| required: true | ||
| }, | ||
| confirmButtonDisabled: { | ||
| type: Boolean, | ||
| default: () => { | ||
| return false | ||
| } | ||
| }, | ||
| }, | ||
| computed: { | ||
| unsavedChanges(){ | ||
| return !isEqual(this.originalObject, this.compareObject) | ||
| }, | ||
| unsavedChangesText(){ | ||
| return this.unsavedChanges ? this.$gettext('Unsaved changes') : this.$gettext('No changes') | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
| <style lang="scss"> | ||
| .compare-save-dialog { | ||
| background: var(--oc-color-background-muted); | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
79 changes: 79 additions & 0 deletions
79
packages/web-app-user-management/src/components/Groups/SideBar/DetailsPanel.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| <template> | ||
| <div class="oc-mt-xl"> | ||
| <div v-if="noGroups" class="oc-flex group-info"> | ||
| <oc-icon name="group-2" size="xxlarge" /> | ||
| <p v-translate>Select a group to view details</p> | ||
| </div> | ||
| <div v-if="multipleGroups" class="oc-flex group-info"> | ||
| <oc-icon name="group-2" size="xxlarge" /> | ||
| <p>{{ multipleGroupsSelectedText }}</p> | ||
| </div> | ||
| <div v-if="group"> | ||
| <div class="oc-flex group-info oc-mb-l"> | ||
| <avatar-image | ||
| class="oc-mb-m" | ||
| :width="80" | ||
| :userid="group.id" | ||
| :user-name="group.displayName" | ||
| /> | ||
| <span class="oc-text-muted group-info-display-name" v-text="group.displayName"></span> | ||
| </div> | ||
| <table | ||
| class="details-table" | ||
| :aria-label="$gettext('Overview of the information about the selected group')" | ||
| > | ||
| <tr> | ||
| <th scope="col" class="oc-pr-s" v-text="$gettext('Group name')" /> | ||
| <td v-text="group.displayName" /> | ||
| </tr> | ||
| </table> | ||
| </div> | ||
| </div> | ||
| </template> | ||
| <script> | ||
| export default { | ||
| name: 'DetailsPanel', | ||
| props: { | ||
| groups: { | ||
| type: Array, | ||
| required: true | ||
| } | ||
| }, | ||
| computed: { | ||
| group() { | ||
| return this.groups.length === 1 ? this.groups[0] : null | ||
| }, | ||
| noGroups() { | ||
| return !this.groups.length | ||
| }, | ||
| multipleGroups() { | ||
| return this.groups.length > 1 | ||
| }, | ||
| multipleGroupsSelectedText() { | ||
| return this.$gettextInterpolate('%{count} groups selected', { | ||
| count: this.groups.length | ||
| }) | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
| <style lang="scss"> | ||
| .group-info { | ||
| align-items: center; | ||
| flex-direction: column; | ||
| } | ||
| .group-info-display-name { | ||
| font-size: 1.5rem; | ||
| } | ||
| .details-table { | ||
| text-align: left; | ||
| tr { | ||
| height: 1.5rem; | ||
| } | ||
| th { | ||
| font-weight: 600; | ||
| } | ||
| } | ||
| </style> |
110 changes: 110 additions & 0 deletions
110
packages/web-app-user-management/src/components/Groups/SideBar/EditPanel.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| <template> | ||
| <div v-if="group" class="oc-mt-xl"> | ||
| <div class="oc-flex group-info oc-mb-l"> | ||
| <avatar-image class="oc-mb-m" :width="80" :userid="group.id" :user-name="group.displayName" /> | ||
| <span class="oc-text-muted group-info-display-name" v-text="group.displayName"></span> | ||
| </div> | ||
| <div v-if="editGroup" class="oc-background-highlight oc-p-m"> | ||
| <oc-text-input | ||
| v-model="editGroup.displayName" | ||
| class="oc-mb-s" | ||
| :label="$gettext('Group name')" | ||
| :error-message="formData.displayName.errorMessage" | ||
| :fix-message-line="true" | ||
| @input="validateDisplayName" | ||
| /> | ||
| </div> | ||
| <compare-save-dialog | ||
| class="edit-compare-save-dialog" | ||
| :original-object="group" | ||
| :compare-object="editGroup" | ||
| :confirm-button-disabled="invalidFormData" | ||
| @revert="revertChanges" | ||
| @confirm="$emit('confirm', editGroup)" | ||
| ></compare-save-dialog> | ||
| </div> | ||
| </template> | ||
| <script> | ||
| import CompareSaveDialog from '../../CompareSaveDialog.vue' | ||
| export default { | ||
| name: 'EditPanel', | ||
| components: { | ||
| CompareSaveDialog | ||
| }, | ||
| props: { | ||
| groups: { | ||
| type: Array, | ||
| required: true | ||
| } | ||
| }, | ||
| data() { | ||
| return { | ||
| editGroup: {}, | ||
| formData: { | ||
| displayName: { | ||
| errorMessage: '', | ||
| valid: true | ||
| } | ||
| } | ||
| } | ||
| }, | ||
| computed: { | ||
| group() { | ||
| return this.groups.length === 1 ? this.groups[0] : null | ||
| }, | ||
| invalidFormData() { | ||
| return Object.values(this.formData) | ||
| .map((v) => !!v.valid) | ||
| .includes(false) | ||
| } | ||
| }, | ||
| watch: { | ||
| group: { | ||
| handler: function () { | ||
| this.editGroup = { ...this.group } | ||
| }, | ||
| deep: true, | ||
| immediate: true | ||
| } | ||
| }, | ||
| methods: { | ||
| validateDisplayName() { | ||
| this.formData.displayName.valid = false | ||
| if (this.editGroup.displayName.trim() === '') { | ||
| this.formData.displayName.errorMessage = this.$gettext('Display name cannot be empty') | ||
| return false | ||
| } | ||
| this.formData.displayName.errorMessage = '' | ||
| this.formData.displayName.valid = true | ||
| return true | ||
| }, | ||
| revertChanges() { | ||
| this.editGroup = { ...this.group } | ||
| Object.values(this.formData).forEach((formDataValue) => { | ||
| formDataValue.valid = true | ||
| formDataValue.errorMessage = '' | ||
| }) | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
| <style lang="scss"> | ||
| .edit-compare-save-dialog { | ||
| position: absolute; | ||
| bottom: 0; | ||
| left: 0; | ||
| } | ||
| .group-info { | ||
| align-items: center; | ||
| flex-direction: column; | ||
| } | ||
| .group-info-display-name { | ||
| font-size: 1.5rem; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.