UX: Events UI Edits

assets/javascripts/discourse/components/discourse-post-event/dates.gjs

@@ -7,6 +7,7 @@ import { service } from "@ember/service";
 import { htmlSafe } from "@ember/template";
 import { applyLocalDates } from "discourse/lib/local-dates";
 import { cook } from "discourse/lib/text";
+import icon from "discourse-common/helpers/d-icon";
 import guessDateFormat from "../../lib/guess-best-date-format";
 
 export default class DiscoursePostEventDates extends Component {
@@ -76,9 +77,7 @@ export default class DiscoursePostEventDates extends Component {
   }
 
   <template>
-    <section
-      class="event__section event-dates"
-      {{didInsert this.computeDates}}
-    >{{this.htmlDates}}</section>
+    <section class="event__section event-dates" {{didInsert this.computeDates}}>
+      {{icon "clock"}}{{this.htmlDates}}</section>
   </template>
 }

assets/javascripts/discourse/components/discourse-post-event/index.gjs

@@ -67,6 +67,10 @@ export default class DiscoursePostEvent extends Component {
     return this.currentUser && this.args.event.can_act_on_discourse_post_event;
   }
 
+  get watchingInviteeStatus() {
+    return this.args.event.watchingInvitee?.status;
+  }
+
   <template>
     <div
       class={{concatClass
@@ -108,12 +112,6 @@ export default class DiscoursePostEvent extends Component {
             />
           </header>
 
-          {{#if @event.canUpdateAttendance}}
-            <section class="event__section event-actions">
-              <Status @event={{@event}} />
-            </section>
-          {{/if}}
-
           <PluginOutlet
             @name="discourse-post-event-info"
             @outletArgs={{hash
@@ -122,11 +120,15 @@ export default class DiscoursePostEvent extends Component {
               Url=(component Url [email protected])
               Dates=(component Dates event=@event)
               Invitees=(component Invitees event=@event)
+              Status=(component Status event=@event)
             }}
           >
             <Url @url={{@event.url}} />
             <Dates @event={{@event}} />
             <Invitees @event={{@event}} />
+            {{#if @event.canUpdateAttendance}}
+              <Status @event={{@event}} />
+            {{/if}}
           </PluginOutlet>
         {{/if}}
       </div>

assets/javascripts/discourse/components/discourse-post-event/invitees.gjs

@@ -2,6 +2,7 @@ import Component from "@glimmer/component";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
 import DButton from "discourse/components/d-button";
+import icon from "discourse-common/helpers/d-icon";
 import i18n from "discourse-common/helpers/i18n";
 import PostEventInvitees from "../modal/post-event-invitees";
 import Invitee from "./invitee";
@@ -70,11 +71,21 @@ export default class DiscoursePostEventInvitees extends Component {
               @action={{this.showAllInvitees}}
             />
           </div>
-          <ul class="event-invitees-avatars">
-            {{#each @event.sampleInvitees as |invitee|}}
-              <Invitee @invitee={{invitee}} />
-            {{/each}}
-          </ul>
+          <div class="event-invitees-avatars-container">
+            {{icon "users"}}
+            <ul class="event-invitees-avatars">
+              {{#each @event.sampleInvitees as |invitee|}}
+                <Invitee @invitee={{invitee}} />
+              {{/each}}
+            </ul>
+          </div>
+        </section>
+      {{else}}
+        <section class="event__section event-invitees no-rsvp">
+          <p class="no-rsvp-description">{{i18n
+              "discourse_post_event.models.invitee.status.going_count.other"
+              count="0"
+            }}</p>
         </section>
       {{/if}}
     {{/unless}}

assets/javascripts/discourse/components/discourse-post-event/status.gjs

@@ -12,10 +12,6 @@ export default class DiscoursePostEventStatus extends Component {
   @service discoursePostEventApi;
   @service siteSettings;
 
-  get watchingInviteeStatus() {
-    return this.args.event.watchingInvitee?.status;
-  }
-
   get eventButtons() {
     return this.siteSettings.event_participation_buttons.split("|");
   }
@@ -36,6 +32,10 @@ export default class DiscoursePostEventStatus extends Component {
     return this.args.event.watchingInvitee && this.args.event.isPublic;
   }
 
+  get watchingInviteeStatus() {
+    return this.args.event.watchingInvitee?.status;
+  }
+
   @action
   async leaveEvent() {
     try {
@@ -107,9 +107,9 @@ export default class DiscoursePostEventStatus extends Component {
   }
 
   <template>
-    <div
+    <section
       class={{concatClass
-        "event-status"
+        "event__section event-actions event-status"
         (if
           this.watchingInviteeStatus
           (concat "status-" this.watchingInviteeStatus)
@@ -177,6 +177,6 @@ export default class DiscoursePostEventStatus extends Component {
           {{/unless}}
         {{/if}}
       </PluginOutlet>
-    </div>
+    </section>
   </template>
 }

assets/javascripts/discourse/components/modal/post-event-builder.hbs

@@ -123,7 +123,7 @@
           <GroupSelector
             @fullWidthWrap={{true}}
             @groupFinder={{this.groupFinder}}
-            @groupNames={{@model.event.raw_invitees}}
+            @groupNames={{@model.event.rawInvitees}}
             @onChangeCallback={{this.setRawInvitees}}
             @placeholderKey="topic.invite_private.group_name"
           />
@@ -232,7 +232,7 @@
               <Input
                 class="custom-field-input"
                 @value={{readonly
-                  (get @model.event.custom_fields allowedCustomField)
+                  (get @model.event.customFields allowedCustomField)
                 }}
                 placeholder={{i18n
                   "discourse_post_event.builder_modal.custom_fields.placeholder"

assets/javascripts/discourse/components/modal/post-event-builder.js

@@ -146,7 +146,7 @@ export default class PostEventBuilder extends Component {
 
   @action
   setCustomField(field, e) {
-    this.event[field] = e.target.value;
+    this.event.customFields[field] = e.target.value;
   }
 
   @action

assets/javascripts/discourse/models/discourse-post-event-event.js

@@ -26,6 +26,7 @@ export default class DiscoursePostEventEvent {
   @tracked rawInvitees;
   @tracked url;
   @tracked timezone;
+  @tracked status;
   @tracked post;
   @tracked minimal;
   @tracked canUpdateAttendance;