UX: show all 3 states in the UI

UX: show all 3 states in the UI

Before this, not_going was available only after choosing going or interested.

diff --git a/assets/javascripts/discourse/widgets/discourse-post-event-status.js.es6 b/assets/javascripts/discourse/widgets/discourse-post-event-status.js.es6
index dbe751b..cc82623 100644
--- a/assets/javascripts/discourse/widgets/discourse-post-event-status.js.es6
+++ b/assets/javascripts/discourse/widgets/discourse-post-event-status.js.es6
@@ -12,117 +12,9 @@ export default createWidget("discourse-post-event-status", {
     }
   },
 
-  defaultState(attrs) {
-    const status = attrs.watchingInvitee ? attrs.watchingInvitee.status : null;
-
-    return {
-      onChange: (data) => {
-        this.state.icon = null;
-        this.state.label = data.label;
-        this.state.options.headerClass = "disabled";
-        this.sendWidgetAction("changeWatchingInviteeStatus", data.id);
-      },
-      icon: this._headerIconForStatus(status),
-      options: {
-        caret: true,
-        headerClass: "",
-      },
-      label: status
-        ? `discourse_post_event.models.invitee.status.${status}`
-        : "discourse_post_event.models.invitee.status.unknown",
-      statuses: this._statusesForStatus(status),
-    };
-  },
-
-  transform(attrs) {
-    return {
-      mightAttend:
-        attrs.watchingInvitee &&
-        (attrs.watchingInvitee.status === "going" ||
-          attrs.watchingInvitee.status === "interested"),
-    };
-  },
-
   template: hbs`
-    {{#if transformed.mightAttend}}
-      {{attach
-        widget="widget-dropdown"
-        attrs=(hash
-          id="discourse-post-event-status-dropdown"
-          label=state.label
-          icon=state.icon
-          content=state.statuses
-          onChange=state.onChange
-          options=state.options
-        )
-      }}
-    {{else}}
-      {{attach widget="interested-button"}}
-      {{attach widget="going-button"}}
-    {{/if}}
+    {{attach widget="going-button"}}
+    {{attach widget="interested-button"}}
+    {{attach widget="not-going-button"}}
   `,
-
-  _statusesForStatus(status) {
-    switch (status) {
-      case "going":
-        return [
-          {
-            id: "going",
-            label: "discourse_post_event.models.invitee.status.going",
-          },
-          {
-            id: "interested",
-            label: "discourse_post_event.models.invitee.status.interested",
-          },
-          "separator",
-          {
-            id: "not_going",
-            label: "discourse_post_event.models.invitee.status.not_going",
-          },
-        ];
-      case "interested":
-        return [
-          {
-            id: "going",
-            label: "discourse_post_event.models.invitee.status.going",
-          },
-          {
-            id: "interested",
-            label: "discourse_post_event.models.invitee.status.interested",
-          },
-          "separator",
-          {
-            id: "not_going",
-            label: "discourse_post_event.models.invitee.status.not_going",
-          },
-        ];
-      case "not_going":
-        return [
-          {
-            id: "going",
-            label: "discourse_post_event.models.invitee.status.going",
-          },
-          {
-            id: "not_going",
-            label: "discourse_post_event.models.invitee.status.not_going",
-          },
-          "separator",
-          {
-            id: "interested",
-            label: "discourse_post_event.models.invitee.status.interested",
-          },
-        ];
-    }
-  },
-
-  _headerIconForStatus(status) {
-    switch (status) {
-      case "going":
-        return "check";
-      case "interested":
-        return "star";
-      case "not_going":
-        return "times";
-    }
-  },
 });
diff --git a/assets/javascripts/discourse/widgets/discourse-post-event.js.es6 b/assets/javascripts/discourse/widgets/discourse-post-event.js.es6
index 256f729..bcb7a2d 100644
--- a/assets/javascripts/discourse/widgets/discourse-post-event.js.es6
+++ b/assets/javascripts/discourse/widgets/discourse-post-event.js.es6
@@ -217,12 +217,12 @@ export default createWidget("discourse-post-event", {
 
       {{#if state.eventModel.can_update_attendance}}
         <section class="event-actions">
-        {{attach
-          widget="discourse-post-event-status"
-          attrs=(hash
-            watchingInvitee=this.state.eventModel.watching_invitee
-          )
-        }}
+          {{attach
+            widget="discourse-post-event-status"
+            attrs=(hash
+              watchingInvitee=this.state.eventModel.watching_invitee
+            )
+          }}
         </section>
       {{/if}}
 
diff --git a/assets/javascripts/discourse/widgets/not-going-button.js.es6 b/assets/javascripts/discourse/widgets/not-going-button.js.es6
new file mode 100644
index 0000000..4e58cdd
--- /dev/null
+++ b/assets/javascripts/discourse/widgets/not-going-button.js.es6
@@ -0,0 +1,17 @@
+import hbs from "discourse/widgets/hbs-compiler";
+import { createWidget } from "discourse/widgets/widget";
+
+export default createWidget("not-going-button", {
+  tagName: "button.not-going-button.btn.btn-default",
+
+  click() {
+    this.sendWidgetAction("changeWatchingInviteeStatus", "not_going");
+  },
+
+  template: hbs`
+    {{d-icon "times"}}
+    <span class="label">
+      {{i18n "discourse_post_event.models.invitee.status.not_going"}}
+    </span>
+  `,
+});
diff --git a/assets/stylesheets/common/discourse-post-event.scss b/assets/stylesheets/common/discourse-post-event.scss
index b62258e..3055e03 100644
--- a/assets/stylesheets/common/discourse-post-event.scss
+++ b/assets/stylesheets/common/discourse-post-event.scss
@@ -150,34 +150,14 @@
     .event-status {
       margin: 0;
 
-      &.status-going {
-        .widget-dropdown-header {
-          .d-icon-check {
-            color: var(--success, $success);
-          }
-        }
-
-        .item-going {
-          font-weight: 700;
-        }
+      &.status-going .going-button .d-icon {
+        color: var(--success, $success);
       }
-
-      &.status-interested {
-        .item-interested {
-          font-weight: 700;
-        }
-
-        .widget-dropdown-header {
-          .d-icon-star {
-            color: adjust-hue($danger, 25%);
-          }
-        }
+      &.status-interested .interested-button .d-icon {
+        color: adjust-hue($danger, 25%);
       }
-
-      &.status-not_going {
-        .item-not_going {
-          font-weight: 700;
-        }
+      &.status-not_going .not-going-button .d-icon {
+        color: var(--danger, $danger);
       }
     }
   }

GitHub sha: 8e924b31

1 Like