UI: uses widget-dropdown and slightly changes update attendance UI

UI: uses widget-dropdown and slightly changes update attendance UI

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 ab909b1..3520425 100644
--- a/assets/javascripts/discourse/widgets/discourse-post-event-status.js.es6
+++ b/assets/javascripts/discourse/widgets/discourse-post-event-status.js.es6
@@ -1,12 +1,10 @@
-import { h } from "virtual-dom";
 import { createWidget } from "discourse/widgets/widget";
+import hbs from "discourse/widgets/hbs-compiler";
 
 export default createWidget("discourse-post-event-status", {
-  tagName: "select.event-status",
+  tagName: "div.event-status",
 
-  change(event) {
-    this.sendWidgetAction("changeWatchingInviteeStatus", event.target.value);
-  },
+  buildKey: attrs => `discourse-post-event-status-${attrs.id}`,
 
   buildClasses(attrs) {
     if (attrs.watchingInvitee) {
@@ -14,38 +12,113 @@ export default createWidget("discourse-post-event-status", {
     }
   },
 
-  html(attrs) {
-    const statuses = [
-      {
-        value: null,
-        name: I18n.t("discourse_post_event.models.invitee.status.unknown")
-      },
-      {
-        value: "going",
-        name: I18n.t("discourse_post_event.models.invitee.status.going")
+  defaultState(attrs) {
+    return {
+      onChange: data => {
+        this.state.label = data.label;
+        this.state.options.headerClass = "disabled";
+        this.sendWidgetAction("changeWatchingInviteeStatus", data.id);
       },
-      {
-        value: "interested",
-        name: I18n.t("discourse_post_event.models.invitee.status.interested")
+      icon: this._headerIconForStatus(attrs.watchingInvitee.status),
+      options: {
+        caret: true,
+        headerClass: ""
       },
-      {
-        value: "not_going",
-        name: I18n.t("discourse_post_event.models.invitee.status.not_going")
-      }
-    ];
-
-    const value = attrs.watchingInvitee ? attrs.watchingInvitee.status : null;
-
-    return statuses.map(status =>
-      h(
-        "option",
-        {
-          value: status.value,
-          class: `status-${status.value}`,
-          selected: status.value === value
-        },
-        status.name
-      )
-    );
+      label: attrs.watchingInvitee.status
+        ? `discourse_post_event.models.invitee.status.${attrs.watchingInvitee.status}`
+        : "discourse_post_event.models.invitee.status.unknown",
+      statuses: this._statusesForStatus(attrs.watchingInvitee.status)
+    };
+  },
+
+  transform(attrs) {
+    return {
+      mightAttend:
+        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}}
+  `,
+
+  _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/going-button.js.es6 b/assets/javascripts/discourse/widgets/going-button.js.es6
new file mode 100644
index 0000000..39415d8
--- /dev/null
+++ b/assets/javascripts/discourse/widgets/going-button.js.es6
@@ -0,0 +1,17 @@
+import hbs from "discourse/widgets/hbs-compiler";
+import { createWidget } from "discourse/widgets/widget";
+
+export default createWidget("interested-button", {
+  tagName: "button.interested-button.btn.btn-default",
+
+  click() {
+    this.sendWidgetAction("changeWatchingInviteeStatus", "going");
+  },
+
+  template: hbs`
+    {{d-icon "check"}}
+    <span class="label">
+      {{i18n "discourse_post_event.models.invitee.status.going"}}
+    </span>
+  `
+});
diff --git a/assets/javascripts/discourse/widgets/interested-button.js.es6 b/assets/javascripts/discourse/widgets/interested-button.js.es6
new file mode 100644
index 0000000..f04e06b
--- /dev/null
+++ b/assets/javascripts/discourse/widgets/interested-button.js.es6
@@ -0,0 +1,17 @@
+import hbs from "discourse/widgets/hbs-compiler";
+import { createWidget } from "discourse/widgets/widget";
+
+export default createWidget("interested-button", {
+  tagName: "button.interested-button.btn.btn-default",
+
+  click() {
+    this.sendWidgetAction("changeWatchingInviteeStatus", "interested");
+  },
+
+  template: hbs`
+    {{d-icon "star"}}
+    <span class="label">
+      {{i18n "discourse_post_event.models.invitee.status.interested"}}
+    </span>
+  `
+});
diff --git a/assets/stylesheets/common/discourse-post-event.scss b/assets/stylesheets/common/discourse-post-event.scss
index 8ee0e1e..021d312 100644
--- a/assets/stylesheets/common/discourse-post-event.scss
+++ b/assets/stylesheets/common/discourse-post-event.scss
@@ -121,12 +121,33 @@
 
     .event-status {
       margin: 0;
+
+      .widget-dropdown {
+        margin: 0;
+      }
+
       &.status-going {
-        color: $success;
+        .widget-dropdown-header {
+          .d-icon-check {
+            color: $success;
+          }
+        }
+
+        .item-going {
+          font-weight: 700;
+        }
+      }
+
+      &.status-interested {
+        .item-interested {
+          font-weight: 700;
+        }
       }
 
       &.status-not_going {
-        color: $danger;
+        .item-not_going {
+          font-weight: 700;
+        }
       }
     }
   }
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 01d47cf..e95b108 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -23,7 +23,7 @@ en:
       models:
         invitee:
           status:
-            unknown: "Undecided?"
+            unknown: "Not interested"
             going: "Going"
             not_going: "Not Going"
             interested: "Interested"
diff --git a/plugin.rb b/plugin.rb
index ca33d3e..3d5677a 100644
--- a/plugin.rb
+++ b/plugin.rb
@@ -28,6 +28,7 @@ register_svg_icon "fas fa-calendar-day"
 register_svg_icon "fas fa-question"
 register_svg_icon "fas fa-clock"
 register_svg_icon "fas fa-clock"
+register_svg_icon "fas fa-star"
 
 after_initialize do
   module ::DiscourseCalendar

GitHub sha: 86857758

Nice use of the inline hbs

1 Like