Add CompareSaveDialog component

owncloud · Apr 7, 2022 · 66a75f3 · 66a75f3
1 parent df6ad55
commit 66a75f3
Show file tree

Hide file tree

Showing 11 changed files with 201 additions and 34 deletions.
diff --git a/packages/web-app-user-management/src/components/CompareSaveDialog.vue b/packages/web-app-user-management/src/components/CompareSaveDialog.vue
@@ -0,0 +1,58 @@
+<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 v-translate :disabled="!unsavedChanges" @click="$emit('revert')"
+          >Revert</oc-button
+        >
+        <oc-button
+          v-translate
+          appearance="filled"
+          variation="primary"
+          :disabled="!unsavedChanges || confirmButtonDisabled"
+          @click="$emit('confirm')"
+          >Save</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,
+      required: false,
+      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-highlight);
+}
+</style>
diff --git a/packages/web-app-user-management/src/components/Groups/SideBar/EditPanel.vue b/packages/web-app-user-management/src/components/Groups/SideBar/EditPanel.vue
@@ -1,14 +1,63 @@
-<template><div>Edit in progress</div></template>
+<template>
+  <div 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"
+      />
+      <oc-button @click="$emit('confirm', editGroup)">ok</oc-button>
+    </div>
+  </div>
+</template>
 <script>
 export default {
   name: 'EditPanel',
   props: {
-    user: {
+    group: {
       type: Object,
-      required: false,
-      default: () => {
-        return {}
+      required: true
+    }
+  },
+  data() {
+    return {
+      editGroup: {},
+      formData: {
+        displayName: {
+          errorMessage: '',
+          valid: true
+        }
+      }
+    }
+  },
+  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
     }
   }
 }
@@ -21,15 +70,4 @@ export default {
 .group-info-display-name {
   font-size: 1.5rem;
 }
-.details-table {
-  text-align: left;
-
-  tr {
-    height: 1.5rem;
-  }
-
-  th {
-    font-weight: 600;
-  }
-}
 </style>
diff --git a/packages/web-app-user-management/src/components/Users/SideBar/EditPanel.vue b/packages/web-app-user-management/src/components/Users/SideBar/EditPanel.vue
@@ -5,7 +5,7 @@
       <span v-text="user.onPremisesSamAccountName"></span>
       <span class="oc-text-muted group-info-display-name" v-text="user.displayName"></span>
     </div>
-    <div v-if="editUser">
+    <div v-if="editUser" class="oc-background-highlight oc-p-m">
       <oc-text-input
         v-model="editUser.displayName"
         class="oc-mb-s"
@@ -38,15 +38,26 @@
         :options="roles"
         :clearable="false"
       />
-      <oc-button @click="$emit('confirm', { editUser, editUserRole })">ok</oc-button>
     </div>
+    <compare-save-dialog
+      class="edit-compare-save-dialog"
+      :original-object="originalObjectUser"
+      :compare-object="compareObjectUser"
+      :confirm-button-disabled="invalidFormData"
+      @revert="revertChanges"
+      @confirm="$emit('confirm', { editUser, editUserRole })"
+    ></compare-save-dialog>
   </div>
 </template>
 <script>
 import * as EmailValidator from 'email-validator'
+import CompareSaveDialog from '../../CompareSaveDialog.vue'
 
 export default {
   name: 'EditPanel',
+  components: {
+    CompareSaveDialog
+  },
   props: {
     user: {
       type: Object,
@@ -68,15 +79,28 @@ export default {
       formData: {
         displayName: {
           errorMessage: '',
-          valid: false
+          valid: true
         },
         email: {
           errorMessage: '',
-          valid: false
+          valid: true
         }
       }
     }
   },
+  computed: {
+    originalObjectUser() {
+      return { user: { ...this.user, passwordProfile: { password: '' }, role: this.userRole } }
+    },
+    compareObjectUser() {
+      return { user: { ...this.editUser, role: this.editUserRole } }
+    },
+    invalidFormData() {
+      return Object.keys(this.formData)
+        .map((k) => !!this.formData[k].valid)
+        .includes(false)
+    }
+  },
   watch: {
     user: {
       handler: function () {
@@ -112,11 +136,25 @@ export default {
       this.formData.email.errorMessage = ''
       this.formData.email.valid = true
       return true
+    },
+
+    revertChanges() {
+      this.editUser = { ...this.user, ...{ passwordProfile: { password: '' } } }
+      this.editUserRole = this.roles.find((role) => role.id === this.userRole.id)
+      Object.keys(this.formData).forEach((formDataKey) => {
+        this.formData[formDataKey].invalid = false
+        this.formData[formDataKey].errorMessage = ''
+      })
     }
   }
 }
 </script>
 <style lang="scss">
+.edit-compare-save-dialog {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
 .user-info {
   align-items: center;
   flex-direction: column;

diff --git a/packages/web-app-user-management/src/views/Groups.vue b/packages/web-app-user-management/src/views/Groups.vue
@@ -90,11 +90,12 @@
           @close="closeSideBar"
         >
           <template #body>
-            <DetailsPanel
-              v-if="activePanel === 'DetailsPanel'"
-              :groups="selectedGroups"
-            ></DetailsPanel>
-            <EditPanel v-if="activePanel === 'EditPanel'" :user="selectedGroups[0]"></EditPanel>
+            <DetailsPanel v-if="activePanel === 'DetailsPanel'" :groups="selectedGroups" />
+            <EditPanel
+              v-if="activePanel === 'EditPanel'"
+              :group="selectedGroups[0]"
+              @confirm="editGroup"
+            />
           </template>
         </side-bar>
       </template>
@@ -343,6 +344,24 @@ export default {
           status: 'danger'
         })
       }
+    },
+
+    async editGroup(editGroup) {
+      try {
+        await this.graphClient.groups.editGroup(editGroup.id, editGroup)
+        const groupRecordIndex = this.groups.findIndex((group) => group.id === editGroup.id)
+        this.$set(this.groups, groupRecordIndex, editGroup)
+
+        this.showMessage({
+          title: this.$gettext('Group was edited successfully')
+        })
+      } catch (error) {
+        console.error(error)
+        this.showMessage({
+          title: this.$gettext('Failed to edit group'),
+          status: 'danger'
+        })
+      }
     }
   }
 }

diff --git a/packages/web-app-user-management/src/views/Users.vue b/packages/web-app-user-management/src/views/Users.vue
@@ -95,14 +95,14 @@
               v-if="activePanel === 'DetailsPanel'"
               :users="selectedUsers"
               :user-roles="userRoles"
-            ></DetailsPanel>
+            />
             <EditPanel
               v-if="activePanel === 'EditPanel'"
               :user="selectedUsers[0]"
               :user-role="userRoles[selectedUsers[0].id]"
               :roles="roles"
               @confirm="editUser"
-            ></EditPanel>
+            />
           </template>
         </side-bar>
       </template>
@@ -435,8 +435,8 @@ export default {
           }
         )
 
-        const userRecord = this.users.find((user) => user.id === editUser.id)
-        Object.assign(userRecord, editUserResponse?.data)
+        const userRecordIndex = this.users.findIndex((user) => user.id === editUser.id)
+        this.$set(this.users, userRecordIndex, editUserResponse?.data)
 
         this.userAssignments = Object.assign({}, this.userAssignments, {
           [editUser.id]: [assignmentsAddResponse.data?.assignment]

diff --git a/packages/web-client/src/generated/api.ts b/packages/web-client/src/generated/api.ts
@@ -4,7 +4,7 @@
  * Libre Graph API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: v0.13.0
+ * The version of the OpenAPI document: v0.13.2
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
@@ -1024,6 +1024,18 @@ export interface RemoteItem {
      * @memberof RemoteItem
      */
     'name'?: string;
+    /**
+     * ETag for the item. Read-only.
+     * @type {string}
+     * @memberof RemoteItem
+     */
+    'eTag'?: string;
+    /**
+     * An eTag for the content of the item. This eTag is not changed if only the metadata is changed. Note This property is not returned if the item is a folder. Read-only.
+     * @type {string}
+     * @memberof RemoteItem
+     */
+    'cTag'?: string;
     /**
      * 
      * @type {ItemReference}

diff --git a/packages/web-client/src/generated/base.ts b/packages/web-client/src/generated/base.ts
@@ -4,7 +4,7 @@
  * Libre Graph API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: v0.13.0
+ * The version of the OpenAPI document: v0.13.2
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

diff --git a/packages/web-client/src/generated/common.ts b/packages/web-client/src/generated/common.ts
@@ -4,7 +4,7 @@
  * Libre Graph API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: v0.13.0
+ * The version of the OpenAPI document: v0.13.2
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

diff --git a/packages/web-client/src/generated/configuration.ts b/packages/web-client/src/generated/configuration.ts
@@ -4,7 +4,7 @@
  * Libre Graph API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: v0.13.0
+ * The version of the OpenAPI document: v0.13.2
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

diff --git a/packages/web-client/src/generated/index.ts b/packages/web-client/src/generated/index.ts
@@ -4,7 +4,7 @@
  * Libre Graph API
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * The version of the OpenAPI document: v0.13.0
+ * The version of the OpenAPI document: v0.13.2
  * 
  *
  * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).

diff --git a/packages/web-client/src/index.ts b/packages/web-client/src/index.ts
@@ -35,6 +35,7 @@ export interface Graph {
   groups: {
     listGroups: (orderBy?: string) => AxiosPromise<CollectionOfGroup>
     createGroup: (group: Group) => AxiosPromise<Group>
+    editGroup: (groupId: string, group: Group) => AxiosPromise<void>
     deleteGroup: (groupId: string) => AxiosPromise<void>
   }
 }
@@ -76,6 +77,7 @@ const graph = (baseURI: string, axiosClient: AxiosInstance): Graph => {
     },
     groups: {
       createGroup: (group: Group) => groupsApiFactory.createGroup(group),
+      editGroup: (groupId: string, group: Group) => groupApiFactory.updateGroup(groupId, group),
       deleteGroup: (groupId: string) => groupApiFactory.deleteGroup(groupId),
       listGroups: (orderBy?: any) =>
         groupsApiFactory.listGroups(0, 0, '', '', false, new Set<any>([orderBy]))