feat: Add option to withdraw sessions (#4686)

app/controllers/public/sessions/view.js

@@ -1,44 +1,33 @@
 import Controller from '@ember/controller';
-import { computed, action } from '@ember/object';
-import moment from 'moment';
+import { action } from '@ember/object';
 
 export default class extends Controller {
 
-  @computed('model.endsAt')
-  get isUpcoming() {
-    let endAt = this.model.endsAt;
-    if (endAt < moment()) {
-      return false;
-    }
-
-    return true;
-  }
-
   @action
-  openProposalDeleteModal() {
-    this.set('isProposalDeleteModalOpen', true);
+  openProposalWithdrawModal() {
+    this.set('isProposalWithdrawModalOpen', true);
   }
 
   @action
-  deleteProposal() {
+  async withdrawProposal() {
     this.set('isLoading', true);
-    this.model.destroyRecord()
-      .then(() => {
-        this.transitionToRoute('my-sessions.index');
-        this.notify.success(this.l10n.t('Proposal has been deleted successfully.'),
-          {
-            id: 'prop_del'
-          });
-      })
-      .catch(() => {
-        this.notify.error(this.l10n.t('An unexpected error has occurred.'),
-          {
-            id: 'view_unex_error'
-          });
-      })
-      .finally(() => {
-        this.set('isLoading', false);
-        this.set('isProposalDeleteModalOpen', false);
-      });
+    this.model.set('state', 'withdrawn');
+    try {
+      await this.model.save();
+      this.transitionToRoute('my-sessions.index');
+      this.notify.success(this.l10n.t('Proposal has been withdrawn successfully.'),
+        {
+          id: 'prop_withdraw'
+        });
+    } catch (e) {
+      console.error('Error while withdrawing session', e);
+      this.notify.error(this.l10n.t('An unexpected error has occurred.'),
+        {
+          id: 'view_unex_error'
+        });
+    } finally {
+      this.set('isLoading', false);
+      this.set('isProposalWithdrawModalOpen', false);
+    }
   }
 }

app/models/session.js

@@ -4,6 +4,7 @@ import ModelBase from 'open-event-frontend/models/base';
 import { belongsTo, hasMany } from 'ember-data/relationships';
 import { computedDateTimeSplit, computedSegmentedLink } from 'open-event-frontend/utils/computed-helpers';
 import { computed } from '@ember/object';
+import { stateColorMap } from 'open-event-frontend/utils/dictionary/sessions';
 
 const detectedTimezone = moment.tz.guess();
 
@@ -49,6 +50,10 @@ export default ModelBase.extend({
     }
   }),
 
+  color: computed('status', function() {
+    return stateColorMap[this.status];
+  }),
+
   startAtDate : computedDateTimeSplit.bind(this)('startsAt', 'date', 'endsAt'),
   startAtTime : computedDateTimeSplit.bind(this)('startsAt', 'time', 'endsAt'),
   endsAtDate  : computedDateTimeSplit.bind(this)('endsAt', 'date'),

app/templates/components/modals/proposal-withdraw-modal.hbs

@@ -0,0 +1,21 @@
+<div class="header">
+  {{t 'Are you sure you would like to withdraw this proposal?'}}
+  <div class="muted small text">
+    {{t 'This action is final and cannot be reverted.'}}
+  </div>
+</div>
+<div class="content">
+  <div class="field">
+    <div class="label">
+      {{t 'Proceeding forward will withdraw the proposal titled:'}} {{this.proposalName}}
+    </div>
+  </div>
+</div>
+<div class="actions">
+  <button type="button" class="ui black button" {{action 'close'}}>
+    {{t 'Cancel'}}
+  </button>
+  <button type="button" class="ui red button" {{action this.withdrawProposal}}>
+    {{t 'Withdraw Proposal'}}
+  </button>
+</div>

app/templates/components/session-card.hbs

@@ -11,9 +11,9 @@
       <div class="header">
         <span>{{this.session.title}}</span>
         <div class="right floated author">
-          <div class="ui {{if (eq this.session.state 'confirmed') 'green' (if (eq this.session.state 'rejected') 'red' 'yellow')}}
+          <div class="ui {{session.color}}
           large label">
-            {{this.session.state}}
+            {{capitalize this.session.state}}
           </div>
         </div>
       </div>

app/templates/public/sessions/view.hbs

@@ -24,9 +24,9 @@
         </LinkTo>
       {{/if}}
     {{/each}}
-    {{#if this.isUpcoming}}
+    {{#if (not-eq this.model.status 'withdrawn')}}
       <button class="ui red button {{if this.device.isMobile 'fluid' 'right floated'}}"
-        {{action 'openProposalDeleteModal'}}>{{t 'Withdraw Proposal'}}</button>
+        {{action 'openProposalWithdrawModal'}}>{{t 'Withdraw Proposal'}}</button>
       {{#if this.device.isMobile}}
         <div class="ui hidden fitted divider"></div>
       {{/if}}
@@ -39,15 +39,7 @@
     <div class="ui segment">
       <h3 class="ui header">
         <div>
-          {{#if (eq this.model.state 'confirmed')}}
-            <div class="ui green large label">{{t 'Confirmed'}}</div>
-          {{else if (eq this.model.state 'pending')}}
-            <div class="ui yellow large label">{{t 'Pending'}}</div>
-          {{else if (eq this.model.state 'accepted')}}
-            <div class="ui yellow large label">{{t 'Accepted'}}</div>
-          {{else if (eq this.model.state 'rejected')}}
-            <div class="ui red large label">{{t 'Rejected'}}</div>
-          {{/if}}
+          <div class="ui {{ this.model.color }} large label">{{t (capitalize this.model.status)}}</div>
         </div>
       </h3>
       <div class="field">
@@ -91,7 +83,7 @@
   </div>
 </div>
 
-<Modals::ProposalDeleteModal
-  @isOpen={{this.isProposalDeleteModalOpen}}
+<Modals::ProposalWithdrawModal
+  @isOpen={{this.isProposalWithdrawModalOpen}}
   @proposalName={{this.model.title}}
-  @deleteProposal={{action "deleteProposal"}} />
+  @withdrawProposal={{action "withdrawProposal"}} />

tests/integration/components/session-card-test.js

@@ -12,6 +12,6 @@ module('Integration | Component | session card', function(hooks) {
   test('it renders', async function(assert) {
     this.set('session', session);
     await render(hbs`{{session-card session=session}}`);
-    assert.ok(this.element.innerHTML.trim().includes('rejected'));
+    assert.dom(this.element).includesText('Rejected');
   });
 });