Skip to content

Commit d47bd83

Browse files
azayatiazayati
committed
feat: Display multiselect email section when multi select emails from expanded mode of email box and email detail drawers - EXO-85344 - exoplatform/eXIP#40 
1 parent fa87be5 commit d47bd83

File tree

6 files changed

+182
-79
lines changed

6 files changed

+182
-79
lines changed

‎email-connector-webapps/src/main/resources/locale/portlet/emailConnector/emailConnectorMailBox_en.properties‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ emailConnector.mailBox.list.drawer.detail.attachment.download.title=Download {0}
3333
emailConnector.mailBox.list.drawer.newEmail.button.title=Write an email
3434
emailConnector.mailBox.list.drawer.detail.reply.button.title=Reply
3535
emailConnector.mailBox.list.drawer.selectEmail=Select an email
36+
emailConnector.mailBox.list.drawer.multiSelect.emailSelected=selected email
37+
emailConnector.mailBox.list.drawer.multiSelect.emailsSelected=selected emails
3638
emailConnector.mailBox.attachments.label=Attachments
3739
emailConnector.mailBox.attachment.download.inProgress.tooltip=Download in progress
3840
emailConnector.mailBox.attachment.download.confirmAbort.title=Cancel download

‎email-connector-webapps/src/main/webapp/vue-apps/email-connector-mail-box/components/drawer/EmailConnectorMailBoxDrawer.vue‎

Lines changed: 16 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
112112
<template v-else>
113113
<template v-if="hasEmails">
114114
<template v-if="expanded">
115-
<email-connector-mail-box-drawer-select-email v-if="selectEmailPlaceHolder" />
115+
<email-connector-mail-box-drawer-multi-select-email
116+
v-if="selectMode"
117+
:emails="emails"
118+
:selected-emails="selectedEmails" />
119+
<email-connector-mail-box-drawer-select-email v-else-if="selectEmailPlaceHolder" />
116120
<email-connector-mail-box-drawer-list-item-detail-content
117121
v-else
118122
:email="email"
@@ -169,33 +173,35 @@ export default {
169173
return;
170174
}
171175
this.openEmailDetailContent(mailRemoteId);
172-
this.selectEmailPlaceHolder = false;
173176
};
174177
this.onUpdateEmailReadStatus = (read, emails) => {
175178
this.updateEmailsReadStatus(read, emails);
176179
if (!this.emailBoxDrawer || this.$root.isDetailDrawerActive) {
177180
return;
178181
}
179-
if (this.expanded) {
180-
this.selectEmailPlaceHolder = true;
182+
this.selectEmailPlaceHolder = this.canDisplaySelectEmailPlaceHolder(emails);
183+
if (this.selectMode) {
184+
this.cancelSelectMode();
181185
}
182186
};
183187
this.onDeleteEmail = (emails) => {
184188
this.deleteEmails(emails);
185189
if (!this.emailBoxDrawer || this.$root.isDetailDrawerActive) {
186190
return;
187191
}
188-
if (this.expanded) {
189-
this.selectEmailPlaceHolder = true;
192+
this.selectEmailPlaceHolder = this.canDisplaySelectEmailPlaceHolder(emails);
193+
if (this.selectMode) {
194+
this.cancelSelectMode();
190195
}
191196
};
192197
this.onArchiveEmail = (emails) => {
193198
this.archiveEmails(emails);
194199
if (!this.emailBoxDrawer || this.$root.isDetailDrawerActive) {
195200
return;
196201
}
197-
if (this.expanded) {
198-
this.selectEmailPlaceHolder = true;
202+
this.selectEmailPlaceHolder = this.canDisplaySelectEmailPlaceHolder(emails);
203+
if (this.selectMode) {
204+
this.cancelSelectMode();
199205
}
200206
};
201207
this.$root.$on('open-email-detail-content', this.onOpenEmailDetailContent);
@@ -292,10 +298,8 @@ export default {
292298
this.$root.$emit('abort-download-attachment', this.activeDownload.mailRemoteId, this.activeDownload.attachmentRemoteId, this.activeDownload.abortController);
293299
this.close();
294300
},
295-
initializeEmail() {
296-
if (this.emails?.[0]) {
297-
this.openEmailDetailContent(this.emails[0].mailRemoteId);
298-
}
301+
canDisplaySelectEmailPlaceHolder(emails) {
302+
return this.expanded && (this.selectMode || this.email && emails.includes(this.email.mailRemoteId));
299303
},
300304
close() {
301305
this.stopAutoRefresh();
@@ -317,9 +321,6 @@ export default {
317321
}
318322
return false;
319323
});
320-
if (this.selectMode) {
321-
this.cancelSelectMode();
322-
}
323324
if (emailIdsToUpdate.length > 0) {
324325
this.$emailConnectorMailBoxService.updateEmailsReadStatus(
325326
emailIdsToUpdate,
@@ -331,9 +332,6 @@ export default {
331332
this.emails = this.emails.filter(
332333
e => !emailIdsToDelete.includes(e.mailRemoteId)
333334
);
334-
if (this.selectMode) {
335-
this.cancelSelectMode();
336-
}
337335
if (emailIdsToDelete.length > 0) {
338336
this.$emailConnectorMailBoxService.deleteEmails(emailIdsToDelete)
339337
.then((deleteResult) => {
@@ -366,9 +364,6 @@ export default {
366364
this.emails = this.emails.filter(
367365
e => !emailIdsToArchive.includes(e.mailRemoteId)
368366
);
369-
if (this.selectMode) {
370-
this.cancelSelectMode();
371-
}
372367
if (emailIdsToArchive.length > 0) {
373368
this.$emailConnectorMailBoxService.archiveEmails(emailIdsToArchive)
374369
.then(archiveResult => {

‎email-connector-webapps/src/main/webapp/vue-apps/email-connector-mail-box/components/drawer/EmailConnectorMailBoxDrawerActions.vue‎

Lines changed: 83 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -34,35 +34,82 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
3434
<v-icon size="20" class="icon-default-color">fa-edit</v-icon>
3535
</v-btn>
3636
</div>
37-
<div v-else>
38-
<v-btn
39-
v-if="canUpdateEmailsReadStatus(false)"
40-
:title="$t('emailConnector.mailBox.list.drawer.detail.unread.label')"
41-
@click="updateEmailsReadStatus(false)"
42-
icon>
43-
<v-icon size="20" class="icon-default-color">fa-mail-bulk</v-icon>
44-
</v-btn>
45-
<v-btn
46-
v-if="canUpdateEmailsReadStatus(true)"
47-
:title="$t('emailConnector.mailBox.list.drawer.detail.read.label')"
48-
@click="updateEmailsReadStatus(true)"
49-
icon>
50-
<v-icon size="20" class="icon-default-color">fa-envelope-open-text</v-icon>
51-
</v-btn>
52-
<v-btn
53-
v-if="hasSelectedEmails()"
54-
:title="$t('emailConnector.mailBox.list.drawer.detail.archive.label')"
55-
@click="archiveEmails()"
56-
icon>
57-
<v-icon size="20" class="icon-default-color">fa-archive</v-icon>
58-
</v-btn>
59-
<v-btn
60-
v-if="hasSelectedEmails()"
61-
:title="$t('emailConnector.mailBox.list.drawer.detail.delete.label')"
62-
@click="deleteEmails()"
63-
icon>
64-
<v-icon size="20" class="error--text">fa-trash</v-icon>
65-
</v-btn>
37+
<div v-else-if="hasSelectedEmails">
38+
<template v-if="top">
39+
<v-btn
40+
v-if="canUpdateEmailsReadStatus(false)"
41+
:title="$t('emailConnector.mailBox.list.drawer.detail.unread.label')"
42+
@click="updateEmailsReadStatus(false)"
43+
icon>
44+
<v-icon size="20" class="icon-default-color">fa-mail-bulk</v-icon>
45+
</v-btn>
46+
<v-btn
47+
v-if="canUpdateEmailsReadStatus(true)"
48+
:title="$t('emailConnector.mailBox.list.drawer.detail.read.label')"
49+
@click="updateEmailsReadStatus(true)"
50+
icon>
51+
<v-icon size="20" class="icon-default-color">fa-envelope-open-text</v-icon>
52+
</v-btn>
53+
<v-btn
54+
:title="$t('emailConnector.mailBox.list.drawer.detail.archive.label')"
55+
@click="archiveEmails()"
56+
icon>
57+
<v-icon size="20" class="icon-default-color">fa-archive</v-icon>
58+
</v-btn>
59+
<v-btn
60+
:title="$t('emailConnector.mailBox.list.drawer.detail.delete.label')"
61+
@click="deleteEmails()"
62+
icon>
63+
<v-icon size="20" class="error--text">fa-trash</v-icon>
64+
</v-btn>
65+
</template>
66+
<template v-else>
67+
<v-btn
68+
v-if="canUpdateEmailsReadStatus(false)"
69+
@click="updateEmailsReadStatus(false)"
70+
outlined
71+
class="btn btn-primary font-weight-bold">
72+
<v-icon
73+
size="16"
74+
class="pe-3"
75+
color="primary">
76+
fa-mail-bulk
77+
</v-icon>
78+
{{ $t('emailConnector.mailBox.list.drawer.detail.unread.label') }}
79+
</v-btn>
80+
<v-btn
81+
v-if="canUpdateEmailsReadStatus(true)"
82+
@click="updateEmailsReadStatus(true)"
83+
outlined
84+
class="btn btn-primary font-weight-bold">
85+
<v-icon
86+
size="16"
87+
class="pe-3"
88+
color="primary">
89+
fa-envelope-open-text
90+
</v-icon>
91+
{{ $t('emailConnector.mailBox.list.drawer.detail.read.label') }}
92+
</v-btn>
93+
<v-btn
94+
@click="archiveEmails()"
95+
outlined
96+
class="btn btn-primary font-weight-bold">
97+
<v-icon
98+
size="16"
99+
class="pe-3"
100+
color="primary">
101+
fa-archive
102+
</v-icon>
103+
{{ $t('emailConnector.mailBox.list.drawer.detail.archive.label') }}
104+
</v-btn>
105+
<v-btn
106+
@click="deleteEmails()"
107+
outlined
108+
class="btn error font-weight-bold">
109+
<v-icon size="16" class="error--text pe-3">fa-trash</v-icon>
110+
<span class="error--text"> {{ $t('emailConnector.mailBox.list.drawer.detail.delete.label') }} </span>
111+
</v-btn>
112+
</template>
66113
</div>
67114
</template>
68115

@@ -84,12 +131,19 @@ export default {
84131
syncInProgress: {
85132
type: Boolean,
86133
default: false,
134+
},
135+
top: {
136+
type: Boolean,
137+
default: true,
87138
}
88139
},
89140
computed: {
90141
emailsMap() {
91142
return Object.fromEntries(this.emails.map(e => [e.mailRemoteId, e]));
92143
},
144+
hasSelectedEmails() {
145+
return this.selectedEmails.length > 0;
146+
},
93147
},
94148
methods: {
95149
canUpdateEmailsReadStatus(read) {
@@ -110,9 +164,6 @@ export default {
110164
deleteEmails() {
111165
this.$root.$emit('delete-email', this.selectedEmails);
112166
},
113-
hasSelectedEmails() {
114-
return this.selectedEmails.length > 0;
115-
},
116167
synchronize() {
117168
this.$root.$emit('synchronize-in-progress');
118169
this.$emailConnectorMailBoxService.synchronize().then(() =>

‎email-connector-webapps/src/main/webapp/vue-apps/email-connector-mail-box/components/drawer/EmailConnectorMailBoxDrawerListItemDetail.vue‎

Lines changed: 22 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -70,11 +70,17 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
7070
expanded />
7171
</template>
7272
<template v-if="emailDetailDrawer && !loading" #content>
73-
<email-connector-mail-box-drawer-select-email v-if="expanded && selectEmailPlaceHolder" />
74-
<email-connector-mail-box-drawer-list-item-detail-content
75-
v-else
76-
:email="email"
77-
:expanded-drawer="expanded" />
73+
<email-connector-mail-box-drawer-multi-select-email
74+
v-if="selectMode"
75+
:emails="emails"
76+
:selected-emails="selectedEmails" />
77+
<template v-else>
78+
<email-connector-mail-box-drawer-select-email v-if="selectEmailPlaceHolder" />
79+
<email-connector-mail-box-drawer-list-item-detail-content
80+
v-else
81+
:email="email"
82+
:expanded-drawer="expanded" />
83+
</template>
7884
</template>
7985
</exo-drawer>
8086
</template>
@@ -120,37 +126,27 @@ export default {
120126
this.$set(email, 'read', read);
121127
}
122128
});
129+
this.selectEmailPlaceHolder = this.canDisplaySelectEmailPlaceHolder(emails);
123130
if (this.selectMode) {
124131
this.cancelSelectMode();
125132
}
126-
if (this.expanded) {
127-
this.selectEmailPlaceHolder = true;
128-
}
129133
};
130-
this.onDeleteEmail = (emails) => {
134+
this.onDeleteOrArchiveEmail = (emails) => {
131135
if (!this.emailDetailDrawer) {
132136
return;
133137
}
134138
this.refreshEmails(emails);
135-
if (this.expanded) {
136-
this.selectEmailPlaceHolder = true;
137-
}
138-
};
139-
this.onArchiveEmail = (emails) => {
140-
if (!this.emailDetailDrawer) {
141-
return;
142-
}
143-
this.refreshEmails(emails);
144-
if (this.expanded) {
145-
this.selectEmailPlaceHolder = true;
139+
this.selectEmailPlaceHolder = this.canDisplaySelectEmailPlaceHolder(emails);
140+
if (this.selectMode) {
141+
this.cancelSelectMode();
146142
}
147143
};
148144
this.$root.$on('open-email-detail-drawer', this.onOpenEmailDetailDrawer);
149145
this.$root.$on('close-email-detail-drawer', this.onCloseEmailDetailDrawer);
150146
this.$root.$on('open-email-detail-content', this.onOpenEmailDetailContent);
151147
this.$root.$on('update-email-read-status', this.onUpdateEmailReadStatus);
152-
this.$root.$on('delete-email', this.onDeleteEmail);
153-
this.$root.$on('archive-email', this.onArchiveEmail);
148+
this.$root.$on('delete-email', this.onDeleteOrArchiveEmail);
149+
this.$root.$on('archive-email', this.onDeleteOrArchiveEmail);
154150
this.$root.$on('attachment-download-started', (payload) => {
155151
this.activeDownload = payload;
156152
});
@@ -226,14 +222,14 @@ export default {
226222
this.emails = this.emails.filter(
227223
e => !emailIds.includes(e.mailRemoteId)
228224
);
229-
if (this.selectMode) {
230-
this.cancelSelectMode();
231-
}
232225
},
233226
cancelSelectMode() {
234227
this.selectMode = false;
235228
this.selectedEmails = [];
236229
},
230+
canDisplaySelectEmailPlaceHolder(emails) {
231+
return this.expanded && (this.selectMode || this.email && emails.includes(this.email.mailRemoteId));
232+
},
237233
onAbortDownloadConfirmed() {
238234
this.$root.$emit('abort-download-attachment', this.activeDownload.mailRemoteId, this.activeDownload.attachmentRemoteId, this.activeDownload.abortController);
239235
this.close();
@@ -247,7 +243,7 @@ export default {
247243
},
248244
updateExpand(expanded) {
249245
window.setTimeout(() => this.expanded = expanded, 200);
250-
if (!expanded && this.selectEmailPlaceHolder) {
246+
if (!expanded && (this.selectEmailPlaceHolder || this.selectMode)) {
251247
this.close();
252248
}
253249
},

0 commit comments

Comments
 (0)