(feat) save new limitations

app/controllers/api/plans_controller.rb

@@ -85,7 +85,7 @@ class API::PlansController < API::ApiController
                                        plan_file_attributes: %i[id attachment _destroy],
                                        prices_attributes: %i[id amount],
                                        advanced_accounting_attributes: %i[code analytical_section],
-                                       plan_limitations_attributes: %i[limitable_id limitable_type limit])
+                                       plan_limitations_attributes: %i[id limitable_id limitable_type limit])
     end
   end
 end

app/frontend/src/javascript/components/plans/plan-limit-form.tsx

@@ -6,7 +6,7 @@ import { FabButton } from '../base/fab-button';
 import { PencilSimple, Trash } from 'phosphor-react';
 import { PlanLimitModal } from './plan-limit-modal';
 import { Plan, PlanLimitation } from '../../models/plan';
-import { useFieldArray, UseFormRegister } from 'react-hook-form';
+import { useFieldArray, UseFormRegister, useWatch } from 'react-hook-form';
 import { Machine } from '../../models/machine';
 import { MachineCategory } from '../../models/machine-category';
 import MachineAPI from '../../api/machine';
@@ -26,6 +26,7 @@ interface PlanLimitFormProps<TContext extends object> {
 export const PlanLimitForm = <TContext extends object> ({ register, control, formState, onError }: PlanLimitFormProps<TContext>) => {
   const { t } = useTranslation('admin');
   const { fields, append, remove } = useFieldArray<Plan, 'plan_limitations_attributes'>({ control, name: 'plan_limitations_attributes' });
+  const limiting = useWatch<Plan>({ control, name: 'limiting' });
 
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [machines, setMachines] = useState<Array<Machine>>([]);
@@ -90,7 +91,7 @@ export const PlanLimitForm = <TContext extends object> ({ register, control, for
         </div>
       </section>
 
-      <div className="plan-limit-grp">
+      {limiting && <div className="plan-limit-grp">
         <header>
           <p>{t('app.admin.plan_limit_form.all_limitations')}</p>
           <div className="grpBtn">
@@ -100,82 +101,86 @@ export const PlanLimitForm = <TContext extends object> ({ register, control, for
           </div>
         </header>
 
-        <div className='plan-limit-list'>
-          <p className="title">{t('app.admin.plan_limit_form.by_categories')}</p>
-          <div className="plan-limit-item">
-            <div className="grp">
-              <div>
-                <span>{t('app.admin.plan_limit_form.category')}</span>
-                <p>Plop</p>
-              </div>
-              <div>
-                <span>{t('app.admin.plan_limit_form.max_hours_per_day')}</span>
-                <p>5</p>
-              </div>
-            </div>
+        {fields.filter(f => f.limitable_type === 'MachineCategory').length > 0 &&
+          <div className='plan-limit-list'>
+            <p className="title">{t('app.admin.plan_limit_form.by_categories')}</p>
+            {fields.filter(f => f.limitable_type === 'MachineCategory' && !f.modified).map(limitation => (
+              <div className="plan-limit-item" key={limitation.id}>
+                <div className="grp">
+                  <div>
+                    <span>{t('app.admin.plan_limit_form.category')}</span>
+                    <p>{categories.find(c => c.id === limitation.limitable_id)?.name}</p>
+                  </div>
+                  <div>
+                    <span>{t('app.admin.plan_limit_form.max_hours_per_day')}</span>
+                    <p>{limitation.limit}</p>
+                  </div>
+                </div>
 
-            <div className='actions'>
-              <div className='grpBtn'>
-                {/* TODO, use <EditDestroyButtons> */}
-                <FabButton className='edit-btn'>
-                  <PencilSimple size={20} weight="fill" />
-                </FabButton>
-                <FabButton className='delete-btn'>
-                  <Trash size={20} weight="fill" />
-                </FabButton>
+                <div className='actions'>
+                  <div className='grpBtn'>
+                    <FabButton className='edit-btn'>
+                      <PencilSimple size={20} weight="fill" />
+                    </FabButton>
+                    <FabButton className='delete-btn'>
+                      <Trash size={20} weight="fill" />
+                    </FabButton>
+                  </div>
+                </div>
               </div>
-            </div>
+            ))}
+            <FormUnsavedList fields={fields}
+                             remove={remove}
+                             register={register}
+                             title={t('app.admin.plan_limit_form.ongoing_limitations')}
+                             shouldRenderField={(limit: PlanLimitation) => limit.limitable_type === 'MachineCategory' && limit.modified}
+                             formAttributeName="plan_limitations_attributes"
+                             formAttributes={['id', 'limitable_type', 'limitable_id', 'limit']}
+                             renderField={renderOngoingLimit}
+                             cancelLabel={t('app.admin.plan_limit_form.cancel')} />
           </div>
-        </div>
+        }
 
-        <FormUnsavedList fields={fields}
-                         remove={remove}
-                         register={register}
-                         title={t('app.admin.plan_limit_form.ongoing_limitations')}
-                         shouldRenderField={(limit: PlanLimitation) => limit.limitable_type === 'MachineCategory'}
-                         formAttributeName="plan_limitations_attributes"
-                         formAttributes={['limitable_id', 'limit']}
-                         renderField={renderOngoingLimit}
-                         cancelLabel={t('app.admin.plan_limit_form.cancel')} />
+        {fields.filter(f => f.limitable_type === 'Machine').length > 0 &&
+          <div className='plan-limit-list'>
+            <p className="title">{t('app.admin.plan_limit_form.by_machine')}</p>
+            {fields.filter(f => f.limitable_type === 'Machine' && !f.modified).map(limitation => (
+              <div className="plan-limit-item" key={limitation.id}>
+                <div className="grp">
+                  <div>
+                    <span>{t('app.admin.plan_limit_form.machine')}</span>
+                    <p>{machines.find(m => m.id === limitation.limitable_id)?.name}</p>
+                  </div>
+                  <div>
+                    <span>{t('app.admin.plan_limit_form.max_hours_per_day')}</span>
+                    <p>{limitation.limit}</p>
+                  </div>
+                </div>
 
-        <div className='plan-limit-list'>
-          <p className="title">{t('app.admin.plan_limit_form.by_machine')}</p>
-          <div className="plan-limit-item">
-            <div className="grp">
-              <div>
-                <span>{t('app.admin.plan_limit_form.machine')}</span>
-                <p>Pouet</p>
+                <div className='actions'>
+                  <div className='grpBtn'>
+                    <FabButton className='edit-btn'>
+                      <PencilSimple size={20} weight="fill" />
+                    </FabButton>
+                    <FabButton className='delete-btn'>
+                      <Trash size={20} weight="fill" />
+                    </FabButton>
+                  </div>
+                </div>
               </div>
-              <div>
-                <span>{t('app.admin.plan_limit_form.max_hours_per_day')}</span>
-                <p>5</p>
-              </div>
-            </div>
-
-            <div className='actions'>
-              <div className='grpBtn'>
-                <FabButton className='edit-btn'>
-                  <PencilSimple size={20} weight="fill" />
-                </FabButton>
-                <FabButton className='delete-btn'>
-                  <Trash size={20} weight="fill" />
-                </FabButton>
-              </div>
-            </div>
+            ))}
+            <FormUnsavedList fields={fields}
+                             remove={remove}
+                             register={register}
+                             title={t('app.admin.plan_limit_form.ongoing_limitations')}
+                             shouldRenderField={(limit: PlanLimitation) => limit.limitable_type === 'Machine' && limit.modified}
+                             formAttributeName="plan_limitations_attributes"
+                             formAttributes={['id', 'limitable_type', 'limitable_id', 'limit']}
+                             renderField={renderOngoingLimit}
+                             cancelLabel={t('app.admin.plan_limit_form.cancel')} />
           </div>
-        </div>
-      </div>
-
-      <FormUnsavedList fields={fields}
-                       remove={remove}
-                       register={register}
-                       title={t('app.admin.plan_limit_form.ongoing_limit')}
-                       shouldRenderField={(limit: PlanLimitation) => limit.limitable_type === 'Machine'}
-                       formAttributeName="plan_limitations_attributes"
-                       formAttributes={['limitable_id', 'limit']}
-                       renderField={renderOngoingLimit}
-                       saveReminderLabel={t('app.admin.plan_limit_form.save_reminder')}
-                       cancelLabel={t('app.admin.plan_limit_form.cancel')} />
+        }
+      </div>}
 
       <PlanLimitModal isOpen={isOpen}
                       machines={machines}

app/frontend/src/javascript/components/plans/plan-limit-modal.tsx

@@ -47,7 +47,7 @@ export const PlanLimitModal: React.FC<PlanLimitModalProps> = ({ isOpen, toggleMo
       event.preventDefault();
     }
     return handleSubmit((data: PlanLimitation) => {
-      onSuccess(data);
+      onSuccess({ ...data, modified: true });
       toggleModal();
     })(event);
   };

app/frontend/src/javascript/models/plan.ts

@@ -17,7 +17,8 @@ export interface PlanLimitation {
     id?: number,
     limitable_id: number,
     limitable_type: LimitableType,
-    limit: number
+    limit: number,
+    modified?: boolean,
 }
 
 export interface Plan {
@@ -42,6 +43,7 @@ export interface Plan {
     plan_file_url?: string,
     partner_id?: number,
     partnership?: boolean,
+    limiting?: boolean,
     partners?: Array<Partner>,
     advanced_accounting_attributes?: AdvancedAccounting,
     plan_limitations_attributes?: Array<PlanLimitation>

app/frontend/src/stylesheets/modules/plans/plan-limit-form.scss

@@ -22,7 +22,7 @@
       flex-direction: column;
       overflow-y: auto;
 
-      .title { @include text-base(500); }
+      & > .title { @include text-base(500); }
       .plan-limit-item {
         width: 100%;
         margin-bottom: 2.4rem;

app/models/plan_limitation.rb

@@ -8,5 +8,6 @@ class PlanLimitation < ApplicationRecord
   belongs_to :machine, foreign_type: 'Machine', foreign_key: 'limitable_id', inverse_of: :plan_limitations
   belongs_to :machine_category, foreign_type: 'MachineCategory', foreign_key: 'limitable_id', inverse_of: :plan_limitations
 
-  validates :limitable_id, :limitable_type, :limit, presence: true
+  validates :limitable_id, :limitable_type, :limit, :plan_id, presence: true
+  validates :plan_id, :limitable_id, :limitable_type, uniqueness: true
 end

app/views/api/plans/_plan.json.jbuilder

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 json.extract! plan, :id, :base_name, :name, :interval, :interval_count, :group_id, :training_credit_nb, :is_rolling, :description, :type,
-              :ui_weight, :disabled, :monthly_payment, :plan_category_id
+              :ui_weight, :disabled, :monthly_payment, :plan_category_id, :limiting
 json.amount plan.amount / 100.00
 json.prices_attributes plan.prices, partial: 'api/prices/price', as: :price
 if plan.plan_file

db/migrate/20230307123841_create_plan_limitations.rb

@@ -4,11 +4,13 @@
 class CreatePlanLimitations < ActiveRecord::Migration[5.2]
   def change
     create_table :plan_limitations do |t|
-      t.references :plan, foreign_key: true, index: true
-      t.references :limitable, polymorphic: true
+      t.references :plan, foreign_key: true, index: true, null: false
+      t.references :limitable, polymorphic: true, null: false
       t.integer :limit, null: false, default: 0
 
       t.timestamps
     end
+
+    add_index :plan_limitations, %i[plan_id limitable_id limitable_type], unique: true, name: 'index_plan_limitations_on_plan_and_limitable'
   end
 end

db/schema.rb

@@ -740,13 +740,14 @@ ActiveRecord::Schema.define(version: 2023_03_09_094535) do
   end
 
   create_table "plan_limitations", force: :cascade do |t|
-    t.bigint "plan_id"
-    t.string "limitable_type"
-    t.bigint "limitable_id"
+    t.bigint "plan_id", null: false
+    t.string "limitable_type", null: false
+    t.bigint "limitable_id", null: false
     t.integer "limit", default: 0, null: false
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
     t.index ["limitable_type", "limitable_id"], name: "index_plan_limitations_on_limitable_type_and_limitable_id"
+    t.index ["plan_id", "limitable_id", "limitable_type"], name: "index_plan_limitations_on_plan_and_limitable", unique: true
     t.index ["plan_id"], name: "index_plan_limitations_on_plan_id"
   end