Feature: redesign orderscreen

app/assets/stylesheets/order_screen.scss

@@ -11,20 +11,27 @@
 
   .flash {
     display: flex;
-    align-self: flex-end;
-    height: 100%;
+    position: fixed;
+    bottom: 1.5rem;
+    right: 1.5rem;
+    z-index: 1000;
+    height: auto;
+    min-width: 250px;
+    max-width: 450px;
     font-size: $font-size-lg;
     vertical-align: middle;
     color: $font-color-light;
     text-align: center;
     background-color: $gray-800;
+    border-radius: 0.5rem;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   }
 
   .flash-text {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 0 1rem;
+    padding: 1rem 1.5rem;
 
     a {
       &:hover {
@@ -112,6 +119,11 @@
     }
   }
 
+  .header-actions {
+    display: flex;
+    flex-direction: row-reverse;
+  }
+
   .side-panel {
     z-index: 4;
     display: flex;
@@ -124,6 +136,12 @@
     background-color: $gray-200;
     border-right: 2px solid $gray-400;
     box-shadow: 2px 0 4px -2px $transparent-200;
+
+    &.edit-mode-disabled {
+      opacity: 0.5;
+      pointer-events: none;
+      user-select: none;
+    }
   }
 
   .user-details {
@@ -241,6 +259,11 @@
     gap: 2px;
     justify-content: flex-start;
     background-color: $gray-400;
+    grid-auto-flow: dense;
+  }
+
+  .products-container {
+    display: contents;
   }
 
   .product-grid-product {
@@ -279,4 +302,169 @@
     grid-area: order-grid;
     overflow-y: auto;
   }
+
+  .folder-container {
+    display: contents;
+  }
+
+  .folder-tile {
+    position: relative;
+    background-color: $gray-600;
+    color: $white;
+
+    .folder-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 0.5rem;
+      font-size: 3.5rem;
+      position: relative;
+    }
+
+    .folder-back-arrow {
+      position: absolute;
+      font-size: 1rem;
+      bottom: 0;
+      right: -0.5rem;
+      color: $white;
+      background: rgba(0, 0, 0, 0.5);
+      border-radius: 50%;
+      padding: 0.2rem;
+    }
+
+    .product-grid-product-name {
+      color: $font-color-dark;
+      font-size: $font-size-lg;
+      text-shadow: none;
+    }
+
+    &.edit-mode {
+      cursor: grab;
+    }
+  }
+
+  .folder-edit-btn {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    width: 56px;
+    height: 56px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(255, 255, 255, 0.9);
+    border-radius: 50%;
+    cursor: pointer;
+    font-size: 1.6rem;
+    color: $gray-700;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background-color: $white;
+      transform: scale(1.1);
+    }
+  }
+
+  .add-folder-tile {
+    background-color: $gray-400;
+    border: 2px dashed $gray-600;
+
+    .folder-icon {
+      color: $gray-600;
+    }
+
+    .product-grid-product-name {
+      color: $gray-600;
+    }
+
+    &:hover {
+      background-color: $gray-300;
+    }
+  }
+
+  .drop-home-tile {
+    background-color: $gray-500;
+    border: 2px dashed $gray-700;
+  }
+
+  .back-button-tile {
+    pointer-events: auto;
+
+    .folder-icon {
+      font-size: 2rem;
+    }
+  }
+
+  .draggable {
+    cursor: grab;
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+
+  .drag-handle {
+    position: absolute;
+    top: 8px;
+    left: 8px;
+    color: rgba(0, 0, 0, 0.3);
+    font-size: 1rem;
+  }
+
+  .sortable-ghost {
+    opacity: 0.4;
+  }
+
+  .sortable-chosen {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  }
+
+  .sortable-drag {
+    background-color: $white;
+  }
+
+  .folder-modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1050;
+  }
+
+  .folder-modal {
+    background-color: $white;
+    border-radius: 8px;
+    width: 90%;
+    max-width: 400px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  }
+
+  .folder-modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem;
+    border-bottom: 1px solid $gray-300;
+
+    h5 {
+      margin: 0;
+    }
+  }
+
+  .folder-modal-body {
+    padding: 1rem;
+  }
+
+  .folder-modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    padding: 1rem;
+    border-top: 1px solid $gray-300;
+  }
 }

app/controllers/activities_controller.rb

@@ -86,17 +86,25 @@ def destroy
   def order_screen # rubocop:disable Metrics/MethodLength, Metrics/AbcSize
     authorize Activity
 
-    @activity = Activity.includes([:price_list, { price_list: { product_price: :product } }])
+    @activity = Activity.includes([:price_list, { price_list: { product_prices: :product } }])
                         .find(params[:id])
 
     @product_prices_json = sorted_product_price(@activity).to_json(
+      only: %i[id price position product_price_folder_id],
       include: { product: { only: %i[id name category color], methods: %i[requires_age] } }
     )
 
+    @folders_json = @activity.price_list.product_price_folders.order(:position).to_json(
+      only: %i[id name position color]
+    )
+
     @users_json = users_hash.to_json
 
     @activity_json = @activity.to_json(only: %i[id title start_time end_time])
 
+    @is_treasurer = current_user.treasurer?
+    @price_list_id = @activity.price_list_id
+
     @sumup_key = Rails.application.config.x.sumup_key
     @sumup_enabled = @sumup_key.present?
 
@@ -174,7 +182,7 @@ def users_hash
   end
 
   def sorted_product_price(activity)
-    activity.price_list.product_price.sort_by { |p| p.product.id }
+    activity.price_list.product_prices.includes(:product).order(:position)
   end
 
   def activity_params

app/controllers/errors_controller.rb

@@ -15,8 +15,8 @@ def unacceptable
     render_error_page('errors/unacceptable', :not_acceptable, '406 Not Acceptable')
   end
 
-  def unprocessable_entity
-    render_error_page('errors/unprocessable_entity', :unprocessable_entity, '422 Unprocessable Entity')
+  def unprocessable_content
+    render_error_page('errors/unprocessable_content', :unprocessable_content, '422 Unprocessable Entity')
   end
 
   def internal_server_error

app/controllers/product_price_folders_controller.rb

@@ -0,0 +1,78 @@
+class ProductPriceFoldersController < ApplicationController
+  before_action :authenticate_user!
+  before_action :set_price_list, only: %i[index create reorder]
+  before_action :set_folder, only: %i[update destroy]
+
+  def index
+    authorize ProductPriceFolder, :index?
+    @folders = @price_list.product_price_folders.order(:position)
+    render json: @folders
+  end
+
+  def create
+    @folder = @price_list.product_price_folders.new(folder_params)
+    authorize @folder
+
+    if @folder.save
+      render json: @folder, status: :created
+    else
+      render json: { errors: @folder.errors.full_messages }, status: :unprocessable_content
+    end
+  end
+
+  def update
+    authorize @folder
+
+    if @folder.update(folder_params)
+      render json: @folder
+    else
+      render json: { errors: @folder.errors.full_messages }, status: :unprocessable_content
+    end
+  end
+
+  def destroy
+    authorize @folder
+
+    orphaned_products = @folder.product_prices
+    max_position = @folder.price_list.product_prices.without_folder.maximum(:position) || -1
+
+    orphaned_products.each_with_index do |product_prices, index|
+      product_prices.update(product_price_folder_id: nil, position: max_position + index + 1)
+    end
+
+    @folder.destroy
+
+    head :no_content
+  end
+
+  def reorder # rubocop:disable Metrics/MethodLength
+    authorize ProductPriceFolder, :reorder?
+
+    folder_positions = params.require(:folder_positions)
+
+    ActiveRecord::Base.transaction do
+      folder_positions.each do |folder_data|
+        folder = @price_list.product_price_folders.find(folder_data[:id])
+        folder.update!(position: folder_data[:position])
+      end
+    end
+
+    render json: { success: true }
+  rescue ActiveRecord::RecordInvalid => e
+    render json: { errors: [e.message] }, status: :unprocessable_content
+  end
+
+  private
+
+  def set_price_list
+    @price_list = PriceList.find(params[:price_list_id])
+  end
+
+  def set_folder
+    @folder = ProductPriceFolder.find(params[:id])
+  end
+
+  def folder_params
+    params.require(:product_price_folder).permit(:name, :color, :position)
+  end
+end