Merge pull request #61 from anyone-oslo/react-page-form

Rewrite Page form in React
anyone-oslo · May 13, 2024 · 050e498 · 050e498
2 parents efafa97 + 09a0da2
commit 050e498
Show file tree

Hide file tree

Showing 98 changed files with 2,571 additions and 1,360 deletions.
diff --git a/app/assets/builds/pages_core/admin-dist.js b/app/assets/builds/pages_core/admin-dist.js
diff --git a/app/assets/builds/pages_core/admin-dist.js.map b/app/assets/builds/pages_core/admin-dist.js.map
diff --git a/app/assets/builds/pages_core/admin.css b/app/assets/builds/pages_core/admin.css
@@ -7514,6 +7514,17 @@ form .field:last-child {
     margin-bottom: 0px;
   }
 
+form .field .date-select {
+      display: flex;
+      gap: 4px;
+      flex-wrap: wrap;
+    }
+
+form .field .date-select .time {
+        width: 4rem;
+        min-width: 2rem;
+      }
+
 form .field input[type="text"],
     form .field input[type="password"],
     form .field input[type="email"],
@@ -7605,10 +7616,6 @@ form .date-range-select .date {
       white-space: nowrap;
     }
 
-form .date-range-select .date .date-select {
-        display: inline-block;
-      }
-
 form .date-range-select .date input[type="text"] {
         display: inline;
         width: auto;
@@ -7687,6 +7694,10 @@ fieldset {
   border-bottom: 1px solid var(--border-color);
 }
 
+.buttons {
+  gap: 4px;
+}
+
 button,
 select {
   -webkit-appearance: none;
@@ -8569,6 +8580,12 @@ body {
   height: 100vh;
 }
 
+.wrapper > div[data-react-class] {
+    flex-grow: 1;
+    display: flex;
+    flex-flow: column nowrap;
+  }
+
 .wrapper > *,
   .wrapper .main-wrapper {
     flex-shrink: 0;
@@ -9551,20 +9568,6 @@ td.drag-handle {
   width: auto;
 }
 
-.edit-page .hidden-options {
-    display: none;
-  }
-
-.edit-page .autopublish-notice,
-  .edit-page .published-date,
-  .edit-page .advanced-options {
-    display: none;
-  }
-
-.edit-page .autopublish-notice.show, .edit-page .published-date.show, .edit-page .advanced-options.show {
-      display: block;
-    }
-
 .edit-page .advanced-options {
     margin-top: 1.5rem;
   }

diff --git a/app/assets/stylesheets/pages_core/admin/components/forms.css b/app/assets/stylesheets/pages_core/admin/components/forms.css
@@ -8,6 +8,16 @@ form {
     padding: 0;
     @mixin child-margins;
 
+    .date-select {
+      display: flex;
+      gap: 4px;
+      flex-wrap: wrap;
+      .time {
+        width: 4rem;
+        min-width: 2rem;
+      }
+    }
+
     input[type="text"],
     input[type="password"],
     input[type="email"],
@@ -93,10 +103,6 @@ form {
       display: inline-block;
       white-space: nowrap;
 
-      .date-select {
-        display: inline-block;
-      }
-
       input[type="text"] {
         display: inline;
         width: auto;
@@ -175,6 +181,12 @@ fieldset {
   border-bottom: 1px solid var(--border-color);
 }
 
+.buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
 button,
 select {
   appearance: none;

diff --git a/app/assets/stylesheets/pages_core/admin/components/layout.css b/app/assets/stylesheets/pages_core/admin/components/layout.css
@@ -17,6 +17,12 @@ body {
   flex-flow: column nowrap;
   height: 100vh;
 
+  & > div[data-react-class] {
+    flex-grow: 1;
+    display: flex;
+    flex-flow: column nowrap;
+  }
+
   & > *,
   & .main-wrapper {
     flex-shrink: 0;

diff --git a/app/assets/stylesheets/pages_core/admin/controllers/pages.css b/app/assets/stylesheets/pages_core/admin/controllers/pages.css
@@ -146,20 +146,6 @@ td.drag-handle {
 .edit-page {
   width: auto;
 
-  .hidden-options {
-    display: none;
-  }
-
-  .autopublish-notice,
-  .published-date,
-  .advanced-options {
-    display: none;
-
-    &.show {
-      display: block;
-    }
-  }
-
   .advanced-options {
     margin-top: 1.5rem;
   }

diff --git a/app/controllers/admin/pages_controller.rb b/app/controllers/admin/pages_controller.rb
@@ -2,7 +2,7 @@
 
 module Admin
   class PagesController < Admin::AdminController
-    include PagesCore::Admin::PageJsonHelper
+    include PagesCore::PageParameters
 
     before_action :find_page, only: %i[show edit update destroy move]
 
@@ -39,23 +39,25 @@ def edit; end
 
     def create
       @page = build_page(content_locale, page_params).tap(&:save)
-      if @page.valid?
-        respond_with_page(@page) do
+
+      respond_with_page(@page) do
+        if @page.valid?
           redirect_to(edit_admin_page_url(content_locale, @page))
+        else
+          render action: :new
         end
-      else
-        render action: :new
       end
     end
 
     def update
-      if @page.update(page_params)
-        respond_with_page(@page) do
+      @page.update(page_params)
+      respond_with_page(@page) do
+        if @page.valid?
           flash[:notice] = t("pages_core.changes_saved")
           redirect_to edit_admin_page_url(content_locale, @page)
+        else
+          render action: :edit
         end
-      else
-        render action: :edit
       end
     end
 
@@ -83,20 +85,8 @@ def default_author
       User.find_by(email: PagesCore.config.default_author)
     end
 
-    def page_attributes
-      %i[template user_id status feed_enabled published_at redirect_to
-         image_link news_page unique_name pinned parent_page_id serialized_tags
-         meta_image_id starts_at ends_at all_day image_id path_segment
-         meta_title meta_description open_graph_title open_graph_description]
-    end
-
     def page_params
-      params.require(:page).permit(
-        PagesCore::Templates::TemplateConfiguration.all_blocks +
-        page_attributes,
-        page_images_attributes: %i[id position image_id primary _destroy],
-        page_files_attributes: %i[id position attachment_id _destroy]
-      )
+      params.require(:page).permit(page_content_attributes)
     end
 
     def find_page
@@ -106,7 +96,12 @@ def find_page
     def respond_with_page(page, &block)
       respond_to do |format|
         format.html(&block)
-        format.json { render json: page_json(page) }
+        format.json do
+          render json: ::Admin::PageResource.new(
+            page,
+            params: { user: current_user }
+          )
+        end
       end
     end
   end

diff --git a/app/controllers/concerns/pages_core/page_parameters.rb b/app/controllers/concerns/pages_core/page_parameters.rb
@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module PagesCore
+  module PageParameters
+    extend ActiveSupport::Concern
+
+    def page_attachment_attributes
+      { page_images_attributes: %i[id position image_id primary _destroy],
+        page_files_attributes: %i[id position attachment_id _destroy] }
+    end
+
+    def page_content_attributes
+      locales = PagesCore.config.locales&.keys || [I18n.default_locale]
+      [page_static_attributes,
+       PagesCore::Templates::TemplateConfiguration.all_blocks,
+       :path_segment,
+       (PagesCore::Templates::TemplateConfiguration
+                  .localized_blocks + %i[path_segment])
+         .index_with { locales },
+       page_attachment_attributes]
+    end
+
+    def page_static_attributes
+      %i[template user_id status feed_enabled published_at redirect_to
+         news_page unique_name pinned parent_page_id serialized_tags
+         meta_image_id starts_at ends_at all_day]
+    end
+  end
+end
diff --git a/app/controllers/concerns/pages_core/preview_pages_controller.rb b/app/controllers/concerns/pages_core/preview_pages_controller.rb
@@ -3,11 +3,27 @@
 module PagesCore
   module PreviewPagesController
     extend ActiveSupport::Concern
+    include PagesCore::PageParameters
+
+    included do
+      before_action :disable_xss_protection, only: %i[preview]
+    end
 
     def preview?
       @preview || false
     end
 
+    def preview
+      render_error 403 unless logged_in?
+
+      @preview = true
+      @page = Page.find_by(id: params[:page_id]) || Page.new
+      @page.readonly!
+      @page.assign_attributes(preview_page_params)
+
+      render_page
+    end
+
     private
 
     def disable_xss_protection
@@ -17,31 +33,15 @@ def disable_xss_protection
       response.headers["X-XSS-Protection"] = "0"
     end
 
-    def permitted_page_attributes
-      %i[template user_id status feed_enabled published_at
-         redirect_to image_link news_page
-         unique_name pinned parent_page_id]
-    end
-
-    def page_params
-      params.require(:page).permit(
-        Page.localized_attributes + permitted_page_attributes
-      )
-    end
-
-    def preview_page(page)
-      redirect_to(page_url(content_locale, page)) && return unless logged_in?
-
-      disable_xss_protection
-
-      @preview = true
-      page.attributes = page_params.merge(
+    def preview_page_params
+      ActionController::Parameters.new(
+        JSON.parse(params.require(:preview_page))
+      ).permit(:id, page_content_attributes).merge(
         status: 2,
         published_at: Time.zone.now,
         locale: content_locale,
         redirect_to: nil
       )
-      render_page
     end
   end
 end
diff --git a/app/controllers/pages_core/frontend/pages_controller.rb b/app/controllers/pages_core/frontend/pages_controller.rb
@@ -12,8 +12,8 @@ class PagesController < ::FrontendController
 
       before_action :load_root_pages
       before_action :find_page_by_path, only: [:show]
-      before_action :find_page, only: %i[show preview]
-      before_action :require_page, only: %i[show preview]
+      before_action :find_page, only: %i[show]
+      before_action :require_page, only: %i[show]
       before_action :canonicalize_url, only: [:show]
       static_cache :index, :show
 
@@ -27,10 +27,6 @@ def index
         end
       end
 
-      def preview
-        preview_page(@page)
-      end
-
       def show
         respond_to do |format|
           format.html { render_published_page(@page) }

diff --git a/app/helpers/admin/pages_helper.rb b/app/helpers/admin/pages_helper.rb
@@ -2,8 +2,6 @@
 
 module Admin
   module PagesHelper
-    include PagesCore::Admin::PageBlocksHelper
-
     def autopublish_notice(page)
       return unless page.autopublish?
 
@@ -13,20 +11,6 @@ def autopublish_notice(page)
       end
     end
 
-    def available_templates_for_select
-      PagesCore::Templates.names.collect do |template|
-        if template == "index"
-          ["[Default]", "index"]
-        else
-          [template.humanize, template]
-        end
-      end
-    end
-
-    def file_embed_code(file)
-      "[file:#{file.id}]"
-    end
-
     def news_section_name(page, news_pages)
       if news_pages.count { |p| p.name == page.name } > 1
         page_name(page, include_parents: true)
@@ -83,10 +67,6 @@ def publish_time(time)
 
     private
 
-    def nested_array?(array)
-      array.present? && array.first.is_a?(Array)
-    end
-
     def page_name_with_fallback(page)
       if page.name?
         page.name.to_s

diff --git a/app/helpers/pages_core/admin/admin_helper.rb b/app/helpers/pages_core/admin/admin_helper.rb
@@ -7,7 +7,6 @@ module AdminHelper
       include PagesCore::Admin::DateRangeHelper
       include PagesCore::Admin::ImageUploadsHelper
       include PagesCore::Admin::LocalesHelper
-      include PagesCore::Admin::PageJsonHelper
       include PagesCore::Admin::LabelledFieldHelper
       include PagesCore::Admin::TagEditorHelper