PC-82: Develop the Form Component for Customer Info page

Gemfile

@@ -6,15 +6,16 @@ gem "activeadmin", "~> 3.3.0"                                       # A framewor
 # gem "bcrypt", "~> 3.1"                                            # Use Active Model has_secure_password [https://guides.rubyonrails.org/active_model_basics.html#securepassword]
 gem "bootsnap", '~> 1.18.4', require: false                         # Reduces boot times through caching; required in config/boot.rb
 gem "cssbundling-rails", '~> 1.4.3'                                 # Bundle and process CSS [https://github.com/rails/cssbundling-rails]
-# gem "image_processing", "~> 1.2"                                  # Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
 gem "devise", "~> 4.9.4"                                            # Authentication
+gem "image_processing", "~> 1.2"                                    # Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
 gem "jbuilder", '~> 2.13.0'                                         # Build JSON APIs with ease [https://github.com/rails/jbuilder]
 gem "jsbundling-rails", '~> 1.3.1'                                  # Bundle and transpile JavaScript [https://github.com/rails/jsbundling-rails]
 gem "jsonapi-serializer", "~> 2.2.0"                                # Fast, simple and easy to use JSON:API serialization library (also known as fast_jsonapi).
 gem "kamal", '~> 2.5.3', require: false                             # Deploy this application anywhere as a Docker container [https://kamal-deploy.org]
 gem "pg", "~> 1.5.9"                                                # Use postgresql as the database for Active Record
 gem "puma", "~> 6.6.0"                                              # Use the Puma web server [https://github.com/puma/puma]
 gem "rails", "~> 8.0.2"                                             # Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main"
+gem "ruby-vips", "~> 2.2"                                           # Ruby extension for the libvips image processing library.
 gem 'sass-rails', '~> 6.0.0'                                        # Ruby on Rails stylesheet engine for Sass
 gem "solid_cable", '~> 3.0.7'                                       # Use the database-backed adapters for Action Cable
 gem "solid_cache", '~> 1.0.7'                                       # Use the database-backed adapters for Rails.cache

Gemfile.lock

@@ -165,6 +165,9 @@ GEM
       activesupport (>= 5.2)
     i18n (1.14.7)
       concurrent-ruby (~> 1.0)
+    image_processing (1.14.0)
+      mini_magick (>= 4.9.5, < 6)
+      ruby-vips (>= 2.0.17, < 3)
     inherited_resources (1.14.0)
       actionpack (>= 6.0)
       has_scope (>= 0.6)
@@ -229,6 +232,9 @@ GEM
       net-pop
       net-smtp
     marcel (1.0.4)
+    mini_magick (5.2.0)
+      benchmark
+      logger
     mini_mime (1.1.5)
     minitest (5.25.5)
     msgpack (1.8.0)
@@ -370,6 +376,9 @@ GEM
       rubocop (~> 1.72, >= 1.72.1)
       rubocop-rspec (~> 3.5)
     ruby-progressbar (1.13.0)
+    ruby-vips (2.2.3)
+      ffi (~> 1.12)
+      logger
     ruby2_keywords (0.0.5)
     sass-rails (6.0.0)
       sassc-rails (~> 2.1, >= 2.1.1)
@@ -449,6 +458,7 @@ GEM
     zeitwerk (2.7.2)
 
 PLATFORMS
+  arm64-darwin-23
   arm64-darwin-24
   x86_64-darwin-24
   x86_64-linux
@@ -465,6 +475,7 @@ DEPENDENCIES
   dotenv
   factory_bot_rails
   faker
+  image_processing (~> 1.2)
   jbuilder (~> 2.13.0)
   jsbundling-rails (~> 1.3.1)
   jsonapi-serializer (~> 2.2.0)
@@ -478,6 +489,7 @@ DEPENDENCIES
   rubocop
   rubocop-rails
   rubocop-rspec_rails
+  ruby-vips (~> 2.2)
   sass-rails (~> 6.0.0)
   shoulda-matchers
   solid_cable (~> 3.0.7)

app/assets/stylesheets/application.bootstrap.scss

@@ -22,4 +22,7 @@ $utilities: map-merge(
 @import 'application/buttons';
 @import 'application/customer_info';
 @import 'application/layout';
-@import 'application/login_page';
+@import 'application/login_page';
+@import 'application/customer_form.scss';
+@import 'application/input.scss';
+@import 'application/header';

app/assets/stylesheets/application/buttons.scss

@@ -15,8 +15,8 @@
     }
 
     &:disabled {
-      border-color: $gray-disable !important;
-      color: $text-gray-disable !important;
+      border-color: $secondary!important;
+      color: $secondary!important;
       background: $white !important;
     }
   }

app/assets/stylesheets/application/customer_form.scss

@@ -0,0 +1,27 @@
+.customer-form {
+  max-width: 1120px;
+  padding: 31px;
+}
+
+.image-placeholder {
+  max-width: 136px;
+  width: 136px;
+
+  label:hover {
+    cursor: pointer;
+  }
+}
+
+.client-input {
+  max-width: 615px;
+}
+
+.title-input {
+  max-width: 241px;
+}
+
+@media (max-width: 575px) {
+  .title-input {
+    max-width: 100%;
+  }
+}

app/assets/stylesheets/application/input.scss

@@ -0,0 +1,98 @@
+.border-label {
+  position: absolute;
+  top: -0.4rem;
+  left: 0.8rem;
+  background: linear-gradient(to bottom, $light 50%, $white 50%);
+}
+
+.form-control::placeholder {
+  color: $gray;
+}
+
+textarea {
+  resize: none;
+}
+
+.form-control:focus,
+.form-control:active,
+.form-select:focus,
+.form-select:active {
+  box-shadow: none !important;
+  background-color: $white !important;
+}
+
+.form-control:-webkit-autofill,
+.form-select:-webkit-autofill {
+  background-color: white !important;
+  transition: background-color 5000s ease-in-out 0s;
+}
+
+.form-control:-webkit-autofill:focus,
+.form-select:-webkit-autofill:focus {
+  background-color: white !important;
+}
+
+.rbt-input-main {
+  border: none !important;
+  border-radius: 4px;
+}
+
+.rbt-menu .dropdown-item:hover,
+.rbt-menu .dropdown-item:focus {
+  background-color: $light;
+  color: $primary;
+}
+
+.rbt-menu .dropdown-item {
+  padding: 6px 12px;
+  color: $gray-700;
+}
+
+.rbt-menu.dropdown-menu.show {
+  margin-top: 5px;
+  outline: 1px solid $primary;
+  border-inline: 5px solid $white;
+  width: calc(100% + 2px) !important;
+  margin-left: -2px;
+  max-height: 185px !important;
+}
+
+.rbt-highlight-text {
+  background-color: $light;
+  color: $primary;
+  padding: 0;
+}
+
+.rbt-input-hint {
+  color: transparent;
+}
+
+/**
+ *** TYPEAHEAD CUSTOM STYLES for "Customer info" Page ***
+ **/
+.pc-typeahead-customer-info {
+  .pc-icon-reserve-place {
+    padding-right: 60px;
+  }
+
+  .pc-typeahead-controls {
+    width: 60px;
+  }
+
+  .pc-typeahead-button {
+    width: 24px;
+  }
+}
+
+/**
+ *** LOGO UPLOADER ***
+ **/
+.pc-logo-uploader {
+  width: 136px;
+  height: 117px;
+
+  &-display {
+    width: 130px;
+    height: 110px;
+  }
+}

app/assets/stylesheets/application/layout.scss

@@ -1,5 +1,3 @@
-@import 'layout/header';
-
 .layout {
   background-image: url('./assets/bg-calculator.png');
   background-position: left calc(#{min(50vh, 504px)});

app/assets/stylesheets/application/login_page.scss

@@ -21,36 +21,6 @@
   height: 24px;
 }
 
-.border-label {
-  position: absolute;
-  top: -0.4rem;
-  left: 0.8rem;
-  background: linear-gradient(to bottom, $light 50%, $white 50%);
-}
-
-.form-control {
-  height: 42px;
-}
-
-.form-control::placeholder {
-  color: $gray;
-}
-
-.form-control:focus,
-.form-control:active {
-  box-shadow: none !important;
-  background-color: $white !important;
-}
-
-.form-control:-webkit-autofill {
-  background-color: white !important;
-  transition: background-color 5000s ease-in-out 0s;
-}
-
-.form-control:-webkit-autofill:focus {
-  background-color: white !important;
-}
-
 .or-divider {
   display: flex;
   align-items: center;

app/assets/stylesheets/application/typography.scss

@@ -35,6 +35,7 @@ h2,
 $custom-colors: (
   'gray': $gray,
   'gray-light': $gray-light,
+  'gray-700': $gray-700,
   'blue-light': $blue-light,
   'blue-sky': $blue-sky,
   'red-light': $red-light,

app/assets/stylesheets/application/variables.scss

@@ -10,6 +10,7 @@ $danger: #f12711;
 // Other Colors
 $gray: #9e9e9e;
 $gray-light: #d9d9d9;
+$gray-700: #616161;
 $blue-light: #e2e6f9;
 $blue-sky: #3f84bd;
 $red-light: #f5b8b8;

app/controllers/api/v1/base_controller.rb

@@ -0,0 +1,7 @@
+module Api
+  module V1
+    class BaseController < ApplicationController
+      before_action :authenticate_user!
+    end
+  end
+end

app/controllers/api/v1/customers_controller.rb

@@ -0,0 +1,30 @@
+module Api
+  module V1
+    class CustomersController < BaseController
+      def index
+        customers = Customer.order(updated_at: :desc)
+        render json: CustomerSerializer.new(customers).serializable_hash, status: :ok
+      end
+
+      def upsert
+        company_name = customer_params[:company_name].downcase
+        customer = Customer.where('LOWER(company_name) = ?', company_name).first_or_initialize
+        customer.assign_attributes(customer_params)
+
+        if customer.save
+          render json: CustomerSerializer.new(customer).serializable_hash, status: :ok
+        else
+          render json: ErrorSerializer.new(customer.errors).serializable_hash, status: :unprocessable_entity
+        end
+      end
+
+      private
+
+      def customer_params
+        params.expect(customer: [:company_name, :first_name, :last_name,
+                                 :email, :position, :address,
+                                 :notes, :logo])
+      end
+    end
+  end
+end

app/controllers/api/v1/quotes_controller.rb

@@ -1,7 +1,6 @@
 module Api
   module V1
-    class QuotesController < ApplicationController
-      before_action :authenticate_user!
+    class QuotesController < BaseController
       before_action :set_quote, only: [:update]
 
       def create

app/controllers/application_controller.rb

@@ -1,10 +1,16 @@
 class ApplicationController < ActionController::Base
   allow_browser versions: :modern
+
   before_action :authenticate_user!, unless: :active_admin_controller?
+  before_action :set_active_storage_url_options
 
   private
 
   def active_admin_controller?
     is_a?(ActiveAdmin::BaseController)
   end
+
+  def set_active_storage_url_options
+    ActiveStorage::Current.url_options = { protocol: request.protocol, host: request.host, port: request.port }
+  end
 end