Organization Announcements (Tier 1)

Gemfile

@@ -228,3 +228,5 @@ gem "rack-timeout", require: "rack/timeout/base"
 gem "irb"
 
 gem "pstore"
+
+gem "prosemirror_to_html"

Gemfile.lock

@@ -588,6 +588,8 @@ GEM
       net-smtp
       premailer (~> 1.7, >= 1.7.9)
     prism (1.4.0)
+    prosemirror_to_html (0.2.0)
+      nokogiri
     pry (0.15.2)
       coderay (~> 1.1)
       method_source (~> 1.0)
@@ -953,6 +955,7 @@ DEPENDENCIES
   plaid (~> 34.0)
   poppler
   premailer-rails
+  prosemirror_to_html
   pry-byebug
   pry-rails
   pstore

app/assets/stylesheets/application.scss

@@ -252,6 +252,7 @@ summary {
 @import 'components/event_settings';
 @import 'components/reactions';
 @import 'components/tags';
+@import 'components/tiptap';
 @import 'components/filter_tabs';
 @import 'components/filter_menu';
 @import 'components/home_page';

app/assets/stylesheets/components/_forms.scss

@@ -530,6 +530,8 @@ input:where([data-behavior='otp_input']) {
   display: flex;
   border-radius: 0.75rem;
 
+  width: fit-content;
+
   transform: scale(1);
   transition:
     transform 0.125s ease-in-out,

app/assets/stylesheets/components/_tiptap.scss

@@ -0,0 +1,15 @@
+.tiptap p.is-editor-empty:first-child::before {
+  color: #adb5bd;
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+
+.tiptap p:first-child {
+  margin-top: 0px;
+}
+
+.tiptap p:last-child {
+  margin-bottom: 0px;
+}

app/controllers/announcements_controller.rb

@@ -0,0 +1,107 @@
+# frozen_string_literal: true
+
+class AnnouncementsController < ApplicationController
+  before_action :set_event
+  before_action :set_announcement, except: [:index, :new]
+  before_action :set_event_follow
+
+  def index
+    @announcement = Announcement.new
+    @announcement.event = @event
+
+    authorize @announcement
+
+    @all_announcements = Announcement.where(event: @event).order(published_at: :desc, created_at: :desc)
+    @announcements = @all_announcements.page(params[:page]).per(10)
+
+    raise ActionController::RoutingError.new("Not Found") if [email protected]_public && @all_announcements.empty? && !organizer_signed_in?
+  end
+
+  def new
+    @announcement = Announcement.new
+    @announcement.event = @event
+
+    authorize @announcement
+  end
+
+  def create
+    @announcement = @event.announcements.build(params.require(:announcement).permit(:title, :content).merge(author: current_user))
+
+    authorize @announcement
+
+    @announcement.save!
+
+    unless params[:announcement][:draft] == "true"
+      @announcement.publish!
+    end
+
+    flash[:success] = "Announcement successfully #{params[:announcement][:draft] == "true" ? "drafted" : "published"}!"
+
+  rescue => e
+    puts e.message
+    flash[:error] = "Something went wrong. #{e.message}"
+    Rails.error.report(e)
+  ensure
+    redirect_to event_announcement_path(@event, @announcement)
+  end
+
+  def show
+    authorize @announcement
+  end
+
+  def edit
+    authorize @announcement
+
+    render "announcements/show", locals: { editing: true }
+  end
+
+  def update
+    authorize @announcement
+
+    @announcement.update!(params.require(:announcement).permit(:title, :content))
+
+    if params[:announcement][:autosave] != "true"
+      flash[:success] = "Updated announcement"
+      redirect_to event_announcement_path(@event, @announcement)
+    end
+  end
+
+  def destroy
+    authorize @announcement
+
+    @announcement.destroy!
+
+    flash[:success] = "Deleted announcement"
+
+    redirect_to event_announcements_path(@event)
+  end
+
+  def publish
+    authorize @announcement
+
+    @announcement.publish!
+
+    flash[:success] = "Published announcement"
+
+    redirect_to event_announcement_path(@event, @announcement)
+  end
+
+  private
+
+  def set_announcement
+    if params[:id].present?
+      @announcement = @event.announcements.find(params[:id])
+    end
+  end
+
+  def set_event
+    if params[:event_id].present?
+      @event = Event.find_by!(slug: params[:event_id])
+    end
+  end
+
+  def set_event_follow
+    @event_follow = Event::Follow.where({ user_id: current_user.id, event_id: @event.id }).first if current_user
+  end
+
+end

app/controllers/event/follows_controller.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+class Event
+  class FollowsController < ApplicationController
+    include SetEvent
+    skip_before_action :signed_in_user, only: :create
+    before_action :set_event, only: :create
+
+    def create
+      unless signed_in?
+        skip_authorization
+        return redirect_to auth_users_path(return_to: event_url(@event), require_reload: true)
+      end
+
+      attrs = {
+        user_id: current_user.id,
+        event: @event
+      }
+      follow = Event::Follow.new(attrs)
+      authorize follow
+      follow.save!
+      redirect_to event_announcements_path(@event)
+    end
+
+    def destroy
+      @event_follow = Event::Follow.find(params[:id])
+      authorize @event_follow
+      slug = @event_follow.event.slug
+      @event_follow.destroy!
+      redirect_to event_path(slug)
+    end
+
+  end
+
+end

app/controllers/events_controller.rb

@@ -14,6 +14,7 @@ class EventsController < ApplicationController
   end
   skip_before_action :signed_in_user
   before_action :set_mock_data
+  before_action :set_event_follow, only: [:show, :transactions]
 
   before_action :redirect_to_onboarding, unless: -> { @event&.is_public? }
 
@@ -1116,4 +1117,8 @@ def set_mock_data
     end
   end
 
+  def set_event_follow
+    @event_follow = Event::Follow.where({ user_id: current_user.id, event_id: @event.id }).first if current_user
+  end
+
 end

app/controllers/my_controller.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 class MyController < ApplicationController
-  skip_after_action :verify_authorized, only: [:activities, :toggle_admin_activities, :cards, :missing_receipts_list, :missing_receipts_icon, :inbox, :reimbursements, :reimbursements_icon, :tasks, :payroll, :toggle_three_teens_banner] # do not force pundit
+  skip_after_action :verify_authorized, only: [:activities, :toggle_admin_activities, :cards, :missing_receipts_list, :missing_receipts_icon, :inbox, :reimbursements, :reimbursements_icon, :tasks, :payroll, :toggle_three_teens_banner, :feed] # do not force pundit
 
   def activities
     @before = params[:before] || Time.now
@@ -146,4 +146,10 @@ def payroll
     @payout_method = current_user.payout_method
   end
 
+  def feed
+    @event_follows = current_user.event_follows
+    @all_announcements = Announcement.published.where(event: @event_follows.map(&:event)).order(published_at: :desc, created_at: :desc)
+    @announcements = @all_announcements.page(params[:page]).per(10)
+  end
+
 end

app/helpers/application_helper.rb

@@ -392,18 +392,18 @@ def ugc_link_to(name, string, *options)
   def dropdown_button(button_class: "bg-success", template: ->(value) { value }, **options)
     return content_tag :div, class: "relative w-fit #{options[:class]}", data: { controller: "dropdown-button", "dropdown-button-target": "container" } do
       (content_tag :div, class: "dropdown-button__container", **options[:button_container_options] do
-        (content_tag :button, class: "btn !transform-none rounded-l-xl rounded-r-none #{button_class}" do
+        (content_tag :button, class: "btn !transform-none rounded-l-xl rounded-r-none #{button_class}", **options[:button_options] do
           (inline_icon options[:button_icon]) +
           (content_tag :span, template.call(options[:options][0][1]), data: { "dropdown-button-target": "text", "template": template })
         end) +
         (content_tag :button, type: "button", class: "btn !transform-none rounded-r-xl rounded-l-none !w-12 ml-[2px] #{button_class}", data: { action: "click->dropdown-button#toggle" } do
           inline_icon "down-caret", class: "!mr-0"
         end)
       end) +
-      (content_tag :div, class: "dropdown-button__menu fade-card-hide", data: { "dropdown-button-target": "menu" } do
+      (content_tag :div, class: "dropdown-button__menu fade-card-hide #{options[:menu_class]}", data: { "dropdown-button-target": "menu" } do
         content_tag :div do
-          (options[:options].map do |option|
-            (options[:form].radio_button options[:name], option[1], { data: { action: "change->dropdown-button#change", "dropdown-button-target": "select", "label": template.call(option[1]) } }) +
+          (options[:options].map.with_index do |option, index|
+            (options[:form].radio_button options[:name], option[1], { checked: index == 0, data: { action: "change->dropdown-button#change", "dropdown-button-target": "select", "label": template.call(option[1]) } }) +
             (options[:form].label options[:name], value: option[1] do
               (tag.strong option[0]) + (tag.p option[2])
             end)

app/javascript/controllers/tiptap_controller.js

@@ -0,0 +1,136 @@
+import { Controller } from '@hotwired/stimulus'
+import { debounce } from 'lodash/function'
+import { Editor } from '@tiptap/core'
+import StarterKit from '@tiptap/starter-kit'
+import Underline from '@tiptap/extension-underline'
+import Placeholder from '@tiptap/extension-placeholder'
+import Link from '@tiptap/extension-link'
+import Image from '@tiptap/extension-image'
+
+export default class extends Controller {
+  static targets = ['editor', 'form', 'contentInput', 'autosaveInput']
+  static values = { content: String }
+
+  editor = null
+
+  connect() {
+    const debouncedSubmit = debounce(this.submit.bind(this), 1000, {
+      leading: true,
+    })
+
+    this.editor = new Editor({
+      element: this.editorTarget,
+      extensions: [
+        StarterKit.configure({
+          heading: {
+            levels: [1, 2, 3],
+          },
+        }),
+        Underline,
+        Placeholder.configure({
+          placeholder: 'Write a message to your followers...',
+        }),
+        Link,
+        Image,
+      ],
+      editorProps: {
+        attributes: {
+          class: 'outline-none',
+        },
+      },
+      content: this.hasContentValue ? JSON.parse(this.contentValue) : null,
+      onUpdate: () => {
+        if (this.hasContentValue) {
+          debouncedSubmit(true)
+        }
+      },
+    })
+  }
+
+  disconnect() {
+    this.editor.destroy()
+  }
+
+  submit(autosave) {
+    this.autosaveInputTarget.value = autosave === true ? 'true' : 'false'
+    this.contentInputTarget.value = JSON.stringify(this.editor.getJSON())
+    this.formTarget.requestSubmit()
+  }
+
+  bold() {
+    this.editor.chain().focus().toggleBold().run()
+  }
+
+  italic() {
+    this.editor.chain().focus().toggleItalic().run()
+  }
+
+  underline() {
+    this.editor.chain().focus().toggleUnderline().run()
+  }
+
+  h1() {
+    this.editor.chain().focus().toggleHeading({ level: 1 }).run()
+  }
+
+  h2() {
+    this.editor.chain().focus().toggleHeading({ level: 2 }).run()
+  }
+
+  h3() {
+    this.editor.chain().focus().toggleHeading({ level: 3 }).run()
+  }
+
+  strike() {
+    this.editor.chain().focus().toggleStrike().run()
+  }
+
+  link() {
+    const url = window.prompt('Link URL')
+
+    if (url === null) {
+      return
+    }
+
+    if (url === '') {
+      this.editor.chain().focus().extendMarkRange('link').unsetLink().run()
+    } else {
+      this.editor
+        .chain()
+        .focus()
+        .extendMarkRange('link')
+        .setLink({ href: url })
+        .run()
+    }
+  }
+
+  code() {
+    this.editor.chain().focus().toggleCode().run()
+  }
+
+  codeBlock() {
+    this.editor.chain().focus().toggleCodeBlock().run()
+  }
+
+  bulletList() {
+    this.editor.chain().focus().toggleBulletList().run()
+  }
+
+  orderedList() {
+    this.editor.chain().focus().toggleOrderedList().run()
+  }
+
+  blockQuote() {
+    this.editor.chain().focus().toggleBlockquote().run()
+  }
+
+  image() {
+    const url = window.prompt('Image URL')
+
+    if (url === null || url === '') {
+      return
+    }
+
+    this.editor.chain().focus().setImage({ src: url }).run()
+  }
+}