diff --git a/src/assets/icon-detail-on.svg b/src/assets/icon-detail-on.svg new file mode 100644 index 0000000..cf418b6 --- /dev/null +++ b/src/assets/icon-detail-on.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icon-edit-off.svg b/src/assets/icon-edit-off.svg new file mode 100644 index 0000000..df0cbe6 --- /dev/null +++ b/src/assets/icon-edit-off.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icon-edit-on.svg b/src/assets/icon-edit-on.svg new file mode 100644 index 0000000..a91d938 --- /dev/null +++ b/src/assets/icon-edit-on.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icon-edit.svg b/src/assets/icon-edit.svg deleted file mode 100644 index bcc1b71..0000000 --- a/src/assets/icon-edit.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/i18n/en.json b/src/i18n/en.json index 56d8ca6..4d27cd2 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -20,6 +20,7 @@ "AccountActivation": "Account Activation", "Detail": "Detail", "Edit": "Edit", + "Delete": "Delete", "AccountEdit": "Account Edit", "AccountInformation": "Account Information", "Password": "Password", diff --git a/src/stores/acctMgmt.js b/src/stores/acctMgmt.js index 87aa4bf..5a530f0 100644 --- a/src/stores/acctMgmt.js +++ b/src/stores/acctMgmt.js @@ -43,6 +43,7 @@ export default defineStore('acctMgmtStore', { const response = await this.$axios.get(apiGetUserList); const customizedResponseData = await this.customizeAllUserList(response.data); this.allUserAccoutList = customizedResponseData; + console.log('getAllUserAccounts success'); } catch(error) { apiError(error, 'Failed to get all users.'); } @@ -54,7 +55,8 @@ export default defineStore('acctMgmtStore', { return rawResponseData.map(user => ({ ...user, // 保留後端傳來的欄位 isDeleteHovered: false, // 針對前端顯示而額外增加的欄位 - isRowHovered: true, + isRowHovered: false, + isEditHovered: false, })); }, /** @@ -79,5 +81,16 @@ export default defineStore('acctMgmtStore', { userToChange.isRowHovered = isRowHovered; } }, + /** + * According to mouseover or mouseleave status, change the bool value. + * @param {string} username + * @param {boolean} isEditHovered + */ + changeIsEditHoveredByUser(username, isEditHovered) { + const userToChange = this.allUserAccoutList.find(user => user.username === username); + if (userToChange) { + userToChange.isEditHovered = isEditHovered; + } + }, }, }) \ No newline at end of file diff --git a/src/views/AccountManagement/AccountAdmin/index.vue b/src/views/AccountManagement/AccountAdmin/index.vue index ed5108d..02e378e 100644 --- a/src/views/AccountManagement/AccountAdmin/index.vue +++ b/src/views/AccountManagement/AccountAdmin/index.vue @@ -6,65 +6,84 @@
- - + + + - -