Add user messaging modal to user's tab on institutional dashboard

CenterForOpenScience · Dec 6, 2024 · 8375eb7 · 8375eb7
1 parent 951bcb2
commit 8375eb7
Show file tree

Hide file tree

Showing 6 changed files with 133 additions and 0 deletions.
diff --git a/app/adapters/user-message.ts b/app/adapters/user-message.ts
@@ -0,0 +1,13 @@
+// app/adapters/user-message.js
+import { inject as service } from '@ember/service';
+import config from 'ember-osf-web/config/environment';
+const { OSF: { apiUrl } } = config;
+import OsfAdapter from './osf-adapter';
+
+export default class UserMessageAdapter extends OsfAdapter {
+    @service session;
+    urlForCreateRecord(modelName, snapshot) {
+        const userId = snapshot.record.user;
+        return `${apiUrl}/v2/users/${userId}/messages/`;
+    }
+}
diff --git a/app/institutions/dashboard/-components/institutional-users-list/component.ts b/app/institutions/dashboard/-components/institutional-users-list/component.ts
@@ -26,6 +26,8 @@ interface InstitutionalUsersListArgs {
 export default class InstitutionalUsersList extends Component<InstitutionalUsersListArgs> {
     @service analytics!: Analytics;
     @service intl!: Intl;
+    @service store;
+    @service currentUser!: CurrentUser;
 
     institution?: InstitutionModel;
 
@@ -36,6 +38,10 @@ export default class InstitutionalUsersList extends Component<InstitutionalUsers
     @tracked sort = 'user_name';
     @tracked selectedDepartments: string[] = [];
     @tracked filteredUsers = [];
+    @tracked messageModalShown = false;
+    @tracked messageText = '';
+    @tracked selectedUserId = null;
+    @service toast!: Toast;
 
     @tracked columns: Column[] = [
         {
@@ -238,4 +244,37 @@ export default class InstitutionalUsersList extends Component<InstitutionalUsers
         this.hasOrcid = !hasOrcid;
     }
 
+    @action
+    openMessageModal(userId: string) {
+        this.selectedUserId = userId;
+        this.messageModalShown = true;
+    }
+
+    @action
+    updateMessageText(event: Event) {
+        this.messageText = (event.target as HTMLTextAreaElement).value;
+    }
+
+    @action
+    async sendMessage() {
+        if (!this.selectedUserId || !this.messageText.trim()) {
+            return;
+        }
+
+        try {
+            const userMessage = this.store.createRecord('user-message', {
+                messageText: this.messageText.trim(),
+                messageType: 'institutional_request',
+                institution: this.args.institution,
+                user: this.selectedUserId,
+            });
+            await userMessage.save();
+            this.toast.success(this.intl.t('institutions.dashboard.send_message_modal.message_sent_success'));
+        } catch (error) {
+            this.toast.error(this.intl.t('institutions.dashboard.send_message_modal.message_sent_failed'));
+        } finally {
+            this.messageModalShown = false;
+            this.messageText = '';
+        }
+    }
 }
diff --git a/app/institutions/dashboard/-components/institutional-users-list/styles.scss b/app/institutions/dashboard/-components/institutional-users-list/styles.scss
@@ -306,3 +306,23 @@ input:checked + .slider::before {
     justify-content: flex-end;
     margin-right: 15px;
 }
+
+
+.icon-message {
+    opacity: 0;
+    color: $color-text-blue-dark;
+    /* !important used to override ember Button border scripting  */
+    background-color: inherit !important;
+    border: 0 !important;
+    box-shadow: 0 !important;
+}
+
+.icon-message:hover {
+    opacity: 1;
+    background-color: inherit !important;
+}
+
+.message-textarea {
+    min-width: 450px;
+    min-height: 280px;
+}
diff --git a/app/institutions/dashboard/-components/institutional-users-list/template.hbs b/app/institutions/dashboard/-components/institutional-users-list/template.hbs
@@ -156,6 +156,12 @@
                             <OsfLink @href={{concat '/' institutionalUser.userGuid '/'}}>
                                 {{institutionalUser.userName}}
                             </OsfLink>
+                            <Button
+                                local-class='icon-message'
+                                {{on 'click' (fn this.openMessageModal institutionalUser.userGuid)}}
+                            >
+                                <FaIcon @icon='comment' />
+                            </Button>
                         {{else if (eq column.type 'osf_link')}}
                             <OsfLink @href={{concat '/' institutionalUser.userGuid '/'}}>
                                 {{institutionalUser.userGuid}}
@@ -185,4 +191,44 @@
             {{t 'institutions.dashboard.users_list.empty'}}
         </list.empty>
     </PaginatedList::HasMany>
+    <OsfDialog
+        @isOpen={{this.messageModalShown}}
+        @onClose={{fn (mut this.messageModalShown) false}}
+        as |dialog|
+    >
+        <dialog.heading>
+            {{t 'institutions.dashboard.send_message_modal.title'}}
+        </dialog.heading>
+        <dialog.main>
+            <div >
+                <div for='message-text'>
+                    {{t 'institutions.dashboard.send_message_modal.opening_message_label'}}
+                </div>
+                <textarea
+                    id='message-text'
+                    local-class='message-textarea'
+                    value={{this.messageText}}
+                    {{on 'input' this.updateMessageText}}
+                ></textarea>
+                <div>
+                    {{t 'institutions.dashboard.send_message_modal.closing_message_label' adminName=this.currentUser.user.fullName}}
+                </div>
+            </div>
+        </dialog.main>
+        <dialog.footer>
+            <Button
+                @type='secondary'
+                {{on 'click' (fn (mut this.messageModalShown) false)}}
+            >
+                {{t 'general.cancel'}}
+            </Button>
+            <Button
+                @type='primary'
+                @disabled={{not this.messageText}}
+                {{on 'click' (queue this.sendMessage dialog.close)}}
+            >
+                {{t 'institutions.dashboard.send_message_modal.send'}}
+            </Button>
+        </dialog.footer>
+    </OsfDialog>
 {{/if}}
diff --git a/app/models/user-message.ts b/app/models/user-message.ts
@@ -0,0 +1,8 @@
+// app/models/user-message.js
+import Model, { attr, belongsTo } from '@ember-data/model';
+
+export default class UserMessageModel extends Model {
+    @attr('string') messageText;
+    @attr('string') messageType;
+    @belongsTo('institution') institution;
+}
diff --git a/translations/en-us.yml b/translations/en-us.yml
@@ -799,6 +799,13 @@ institutions:
     search_placeholder: 'Search institutions'
     load_more: 'Load more institutions'
     dashboard:
+        send_message_modal:
+          title: 'Send Email'
+          opening_message_label: 'Comments:'
+          closing_message_label: 'Sincerely Yours, {adminName}'
+          message_sent_success: 'Message has been sent'
+          message_sent_failed: 'Message has failed to send of the issue persists contact your administrator'
+          send: 'Send'
         tabs:
             summary: Summary
             users: Users