tonym/spoolman2
1
0
Fork 0
Code Issues 19 Pull Requests Actions Packages Projects Releases Wiki Activity

Inline Creation Modals - Create filament/vendor without leaving page #1

New Issue
Closed
opened 2026-01-15 01:20:15 +00:00 by tonym · 0 comments
tonym commented 2026-01-15 01:20:15 +00:00
Owner
Copy Link
Copy Source

Problem

When adding a new spool, if the filament doesnt exist, you have to navigate away to create it. Same for vendor when creating filament. This breaks the workflow and is tedious.

Solution

Add inline creation modals:

  1. Spool creation page: Add "Create new filament" option in the filament dropdown that opens a modal
  2. Filament creation page: Add "Create new vendor" option in the vendor dropdown that opens a modal
  3. After creation, auto-select the new item and refresh the list

Implementation Notes

New Components Created

client/src/components/vendorCreateModal.tsx

  • Simple modal with just essential fields: name (required), comment, empty_spool_weight
  • Uses direct fetch() API call to create vendor
  • Shows success message via message.success()
  • Calls onSuccess(vendor) callback with the created vendor
  • Uses useInvalidate to refresh vendor lists after creation

client/src/components/filamentCreateModal.tsx

  • Modal with essential filament fields: vendor, name, material, color, density, diameter, weight
  • Nested vendor creation: Includes VendorCreateModal for inline vendor creation from within the filament modal
  • Pre-fills defaults: diameter=1.75mm, density=1.24 (PLA)
  • Uses useSelect hook for vendor dropdown
  • Uses dropdownRender pattern to add "Create Manufacturer" button at bottom of vendor dropdown

Files Modified

client/src/pages/filaments/create.tsx

  • Added VendorCreateModal import and component
  • Added isVendorModalOpen state
  • Added handleVendorCreated handler that invalidates vendor cache and selects new vendor
  • Added dropdownRender to vendor Select with "Create Manufacturer" button
  • Added Divider and PlusOutlined icon imports

client/src/pages/spools/create.tsx

  • Added FilamentCreateModal import and component
  • Added useInvalidate hook import
  • Added IFilament import
  • Added isFilamentModalOpen state
  • Added handleFilamentCreated handler that invalidates filament cache and selects new filament
  • Added dropdownRender to filament Select with "Create Filament" button

client/public/locales/en/common.json

  • Added vendor.form.created_success translation
  • Added vendor.form.name_required translation
  • Added filament.form.created_success translation
  • Added filament.form.vendor_placeholder translation
  • Added filament.form.name_placeholder translation
  • Added filament.fields_help.density translation

Design Decisions

  1. Pattern reuse: Used existing dropdownRender pattern from location select (lines 450-465 in spools/create.tsx)
  2. Cache invalidation: Used Refine's useInvalidate hook instead of trying to refetch queries directly
  3. Simplified modals: Quick-create modals only include essential fields, not the full form
  4. Default values: Pre-fill common defaults (diameter 1.75mm, density 1.24 g/cm³ for PLA)
  5. Nested creation: FilamentCreateModal can spawn VendorCreateModal for truly inline workflow

Testing Checklist

  • Create spool → click "Create Filament" → modal opens
  • Create filament from modal → filament auto-selected in dropdown
  • Create filament → click "Create Manufacturer" → nested modal opens
  • Create vendor from nested modal → vendor auto-selected
  • Verify cache invalidation works (new items appear without page refresh)
  • Verify translations display correctly

Priority

Highest - biggest UX win

## Problem When adding a new spool, if the filament doesnt exist, you have to navigate away to create it. Same for vendor when creating filament. This breaks the workflow and is tedious. ## Solution Add inline creation modals: 1. **Spool creation page**: Add "Create new filament" option in the filament dropdown that opens a modal 2. **Filament creation page**: Add "Create new vendor" option in the vendor dropdown that opens a modal 3. After creation, auto-select the new item and refresh the list --- ## Implementation Notes ### New Components Created **`client/src/components/vendorCreateModal.tsx`** - Simple modal with just essential fields: name (required), comment, empty_spool_weight - Uses direct `fetch()` API call to create vendor - Shows success message via `message.success()` - Calls `onSuccess(vendor)` callback with the created vendor - Uses `useInvalidate` to refresh vendor lists after creation **`client/src/components/filamentCreateModal.tsx`** - Modal with essential filament fields: vendor, name, material, color, density, diameter, weight - **Nested vendor creation**: Includes VendorCreateModal for inline vendor creation from within the filament modal - Pre-fills defaults: diameter=1.75mm, density=1.24 (PLA) - Uses `useSelect` hook for vendor dropdown - Uses `dropdownRender` pattern to add "Create Manufacturer" button at bottom of vendor dropdown ### Files Modified **`client/src/pages/filaments/create.tsx`** - Added `VendorCreateModal` import and component - Added `isVendorModalOpen` state - Added `handleVendorCreated` handler that invalidates vendor cache and selects new vendor - Added `dropdownRender` to vendor Select with "Create Manufacturer" button - Added `Divider` and `PlusOutlined` icon imports **`client/src/pages/spools/create.tsx`** - Added `FilamentCreateModal` import and component - Added `useInvalidate` hook import - Added `IFilament` import - Added `isFilamentModalOpen` state - Added `handleFilamentCreated` handler that invalidates filament cache and selects new filament - Added `dropdownRender` to filament Select with "Create Filament" button **`client/public/locales/en/common.json`** - Added `vendor.form.created_success` translation - Added `vendor.form.name_required` translation - Added `filament.form.created_success` translation - Added `filament.form.vendor_placeholder` translation - Added `filament.form.name_placeholder` translation - Added `filament.fields_help.density` translation ### Design Decisions 1. **Pattern reuse**: Used existing `dropdownRender` pattern from location select (lines 450-465 in spools/create.tsx) 2. **Cache invalidation**: Used Refine's `useInvalidate` hook instead of trying to refetch queries directly 3. **Simplified modals**: Quick-create modals only include essential fields, not the full form 4. **Default values**: Pre-fill common defaults (diameter 1.75mm, density 1.24 g/cm³ for PLA) 5. **Nested creation**: FilamentCreateModal can spawn VendorCreateModal for truly inline workflow ### Testing Checklist - [ ] Create spool → click "Create Filament" → modal opens - [ ] Create filament from modal → filament auto-selected in dropdown - [ ] Create filament → click "Create Manufacturer" → nested modal opens - [ ] Create vendor from nested modal → vendor auto-selected - [ ] Verify cache invalidation works (new items appear without page refresh) - [ ] Verify translations display correctly ## Priority Highest - biggest UX win
tonym closed this issue 2026-01-15 01:33:32 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
No items
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
tonym (Tony Moon)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: tonym/spoolman2#1