diff --git a/backend/toolshed/migrations/0009_alter_workflowinstance_payload.py b/backend/toolshed/migrations/0009_alter_workflowinstance_payload.py new file mode 100644 index 0000000..4d88ff5 --- /dev/null +++ b/backend/toolshed/migrations/0009_alter_workflowinstance_payload.py @@ -0,0 +1,21 @@ +# Generated manually: WorkflowInstance.payload changes from a native JSONField +# to a plain opaque TextField. The frontend now serializes/deserializes the +# JSON itself; the backend just stores whatever string it receives. + +from django.db import migrations, models + + +class Migration(migrations.Migration): + + dependencies = [ + ('toolshed', '0008_alter_inventoryitem_storage_location'), + ] + + operations = [ + migrations.AlterField( + model_name='workflowinstance', + name='payload', + field=models.TextField(blank=True, default=''), + ), + ] + diff --git a/frontend/src/components/workflow/ComponentRegistry.js b/frontend/src/components/workflow/ComponentRegistry.js deleted file mode 100644 index 48a83ca..0000000 --- a/frontend/src/components/workflow/ComponentRegistry.js +++ /dev/null @@ -1,112 +0,0 @@ -/** - * Workflow Step Component Registry - * - * This module handles the dynamic loading and registration of workflow step components. - * It provides a centralized way to map workflow types and steps to their corresponding Vue components. - */ - -// Import all step components -import FotoFirstStep1 from './steps/FotoFirstStep1.vue'; -import FotoFirstStep2 from './steps/FotoFirstStep2.vue'; -import FotoFirstStep3 from './steps/FotoFirstStep3.vue'; -import FotoFirstStep4 from './steps/FotoFirstStep4.vue'; -import BulkImportStep1 from './steps/BulkImportStep1.vue'; -import BulkImportStep6 from './steps/BulkImportStep6.vue'; - -/** - * Component registry mapping workflow types and steps to components - * Format: 'workflowType-step' -> Component - */ -const componentRegistry = { - // Foto First Import Workflow components - 'foto-first-bulk-import-1': FotoFirstStep1, - 'foto-first-bulk-import-2': FotoFirstStep2, - 'foto-first-bulk-import-3': FotoFirstStep3, - 'foto-first-bulk-import-4': FotoFirstStep4, - - // Bulk Item Import Workflow components - 'import-items-1': BulkImportStep1, - 'import-items-6': BulkImportStep6, - // Additional steps can be added as needed - // 'import-items-2': BulkImportStep2, - // 'import-items-3': BulkImportStep3, - // ... etc -}; - -/** - * Get a step component for a given workflow type and step - * @param {string} workflowType - The workflow type identifier - * @param {string|number} step - The step identifier - * @returns {Object|null} Vue component or null if not found - */ -export function getStepComponent(workflowType, step) { - const componentKey = `${workflowType}-${step}`; - return componentRegistry[componentKey] || null; -} - -/** - * Register a new step component - * @param {string} workflowType - The workflow type identifier - * @param {string|number} step - The step identifier - * @param {Object} component - The Vue component - */ -export function registerStepComponent(workflowType, step, component) { - const componentKey = `${workflowType}-${step}`; - componentRegistry[componentKey] = component; -} - -/** - * Get all registered components for a workflow type - * @param {string} workflowType - The workflow type identifier - * @returns {Object} Object with step numbers as keys and components as values - */ -export function getWorkflowComponents(workflowType) { - const workflowComponents = {}; - - Object.keys(componentRegistry).forEach(key => { - if (key.startsWith(`${workflowType}-`)) { - const step = key.replace(`${workflowType}-`, ''); - workflowComponents[step] = componentRegistry[key]; - } - }); - - return workflowComponents; -} - -/** - * Check if a step component exists for a workflow type and step - * @param {string} workflowType - The workflow type identifier - * @param {string|number} step - The step identifier - * @returns {boolean} True if component exists, false otherwise - */ -export function hasStepComponent(workflowType, step) { - const componentKey = `${workflowType}-${step}`; - return componentKey in componentRegistry; -} - -/** - * Get all registered workflow types - * @returns {Array} Array of workflow type identifiers - */ -export function getRegisteredWorkflowTypes() { - const workflowTypes = new Set(); - - Object.keys(componentRegistry).forEach(key => { - const parts = key.split('-'); - if (parts.length >= 2) { - // Reconstruct workflow type (everything except the last part which is the step) - const workflowType = parts.slice(0, -1).join('-'); - workflowTypes.add(workflowType); - } - }); - - return Array.from(workflowTypes); -} - -export default { - getStepComponent, - registerStepComponent, - getWorkflowComponents, - hasStepComponent, - getRegisteredWorkflowTypes -}; diff --git a/frontend/src/components/workflow/ExampleUsage.js b/frontend/src/components/workflow/ExampleUsage.js deleted file mode 100644 index dc22fc7..0000000 --- a/frontend/src/components/workflow/ExampleUsage.js +++ /dev/null @@ -1,193 +0,0 @@ -/** - * Workflow Step Component Example Usage - * - * This file demonstrates how to use the workflow step component dispatching system - * and provides examples for developers who want to create new workflow steps. - */ - -import { - getStepComponent, - registerStepComponent, - hasStepComponent, - getWorkflowComponents, - getRegisteredWorkflowTypes -} from './ComponentRegistry.js'; - -/** - * Example: Creating and registering a new workflow step component - */ - -// 1. Create your step component (example) -const ExampleWorkflowStep1 = { - name: 'ExampleWorkflowStep1', - props: { - workflowInstance: { type: Object, required: true }, - step: { type: String, required: true }, - payload: { type: Object, default: () => ({}) } - }, - template: ` -
-

Example Workflow - Step 1

-

This is a custom workflow step component.

- -
- ` -}; - -// 2. Register the component -registerStepComponent('example-workflow', '1', ExampleWorkflowStep1); - -/** - * Example: Using the component registry programmatically - */ -export function demonstrateComponentRegistry() { - console.log('=== Workflow Component Registry Demo ==='); - - // Check if a component exists - console.log('Has foto-first step 1:', hasStepComponent('foto-first-bulk-import', '1')); - console.log('Has non-existent step:', hasStepComponent('non-existent', '999')); - - // Get a specific component - const step1Component = getStepComponent('foto-first-bulk-import', '1'); - console.log('Retrieved component:', step1Component?.name); - - // Get all components for a workflow - const fotoFirstComponents = getWorkflowComponents('foto-first-bulk-import'); - console.log('Foto First components:', Object.keys(fotoFirstComponents)); - - // Get all registered workflow types - const workflowTypes = getRegisteredWorkflowTypes(); - console.log('Registered workflow types:', workflowTypes); - - return { - availableWorkflows: workflowTypes, - fotoFirstSteps: Object.keys(fotoFirstComponents), - totalComponents: workflowTypes.reduce((total, type) => { - return total + Object.keys(getWorkflowComponents(type)).length; - }, 0) - }; -} - -/** - * Example: Dynamic component loading in a Vue component - */ -export const WorkflowStepLoader = { - name: 'WorkflowStepLoader', - props: { - workflowType: { type: String, required: true }, - currentStep: { type: [String, Number], required: true }, - workflowInstance: { type: Object, required: true }, - payload: { type: Object, default: () => ({}) } - }, - computed: { - stepComponent() { - return getStepComponent(this.workflowType, this.currentStep); - }, - hasStepComponent() { - return hasStepComponent(this.workflowType, this.currentStep); - } - }, - template: ` -
- - - - -
-
{{ workflowType }} - Step {{ currentStep }}
-

No custom component found for this step.

-
- - -
-
-
- ` -}; - -/** - * Development utilities for workflow components - */ -export const WorkflowDevUtils = { - /** - * List all available workflow steps - */ - listAllSteps() { - const workflowTypes = getRegisteredWorkflowTypes(); - const allSteps = {}; - - workflowTypes.forEach(type => { - allSteps[type] = Object.keys(getWorkflowComponents(type)); - }); - - return allSteps; - }, - - /** - * Validate workflow step coverage - */ - validateWorkflowCoverage(workflowDefinitions) { - const results = {}; - - Object.entries(workflowDefinitions).forEach(([type, definition]) => { - const requiredSteps = definition.getStepDefinitions().map(s => s.step.toString()); - const availableSteps = Object.keys(getWorkflowComponents(type)); - - results[type] = { - required: requiredSteps, - available: availableSteps, - missing: requiredSteps.filter(step => !availableSteps.includes(step)), - coverage: (availableSteps.length / requiredSteps.length) * 100 - }; - }); - - return results; - }, - - /** - * Generate component registry report - */ - generateReport() { - const workflowTypes = getRegisteredWorkflowTypes(); - const report = { - totalWorkflowTypes: workflowTypes.length, - totalComponents: 0, - workflows: {} - }; - - workflowTypes.forEach(type => { - const components = getWorkflowComponents(type); - const stepCount = Object.keys(components).length; - - report.totalComponents += stepCount; - report.workflows[type] = { - steps: stepCount, - stepNumbers: Object.keys(components).sort((a, b) => parseInt(a) - parseInt(b)) - }; - }); - - return report; - } -}; - -export default { - demonstrateComponentRegistry, - WorkflowStepLoader, - WorkflowDevUtils -}; diff --git a/frontend/src/components/workflow/README.md b/frontend/src/components/workflow/README.md index 50969e1..6a56215 100644 --- a/frontend/src/components/workflow/README.md +++ b/frontend/src/components/workflow/README.md @@ -1,147 +1,123 @@ -# Workflow Step Component Dispatching System +# Workflow System ## Overview -This system enables dynamic dispatching of Vue.js components based on workflow type and current step in the WorkflowDetail view. It provides a flexible, extensible architecture for creating custom step-specific user interfaces for different workflow types. +Each workflow type (e.g. `foto-first-bulk-import`, `import-items`) is +implemented by **one** Vue file that contains **all of its steps** and +**its own metadata** (name, category, description, icons, duration, step +list, initial payload). There is no separate per-step component registry and +no parallel class hierarchy for metadata - a single flat catalog in +`@/workflows.js` ties everything together. ## Architecture -### 1. Component Registry (`/components/workflow/ComponentRegistry.js`) +### 1. Workflow components (`/components/workflow/workflows/*.vue`) -The central registry that maps workflow types and steps to their corresponding Vue components using the format: `workflowType-step` → Component. +Each file is fully self-contained: -**Key Functions:** -- `getStepComponent(workflowType, step)` - Retrieves a step component -- `registerStepComponent(workflowType, step, component)` - Registers new components -- `hasStepComponent(workflowType, step)` - Checks component existence -- `getWorkflowComponents(workflowType)` - Gets all components for a workflow -- `getRegisteredWorkflowTypes()` - Lists all registered workflow types +- **Metadata**: a static `meta: { id, name, category, description, icons, + estimatedDuration, stepDefinitions, getInitialPayload() }` option on the + component's options object, right alongside `name`/`components`/`props`. +- **UI**: the same component implements every step internally, branching on + the `step` prop (e.g. `v-if="step === '1'"`, `v-else-if="step === '2'"`, ...). -### 2. Step Components (`/components/workflow/steps/`) +Currently implemented: +- **FotoFirstBulkImportWorkflow.vue** - all 4 steps of `foto-first-bulk-import`: + photo capture (camera + upload), image processing/compression, per-item + detail entry, and import completion. +- **BulkItemImportWorkflow.vue** - `import-items`' file upload (step 1) and + item creation (step 6) with full UI; steps 2-5 and 7 render a generic + placeholder using this same file's own `meta.stepDefinitions` (accessed via + `this.$options.meta` inside the component) until their UI is built out. -Individual Vue components that handle specific workflow steps: +### 2. The catalog (`@/workflows.js`) -#### Foto First Import Workflow -- **FotoFirstStep1.vue** - Photo capture/upload with camera and file upload support -- **FotoFirstStep2.vue** - Image processing with compression and optimization -- **FotoFirstStep3.vue** - Item details entry with form-based data collection -- **FotoFirstStep4.vue** - Import completion with summary and finalization +A single flat array assembled from: +- `implementedWorkflows` - workflows with a real component, built by + importing the component and reading its static `.meta` property: + `{ ...Component.meta, component: Component }` +- `plannedWorkflows` - workflows that exist conceptually (so they show up in + the catalog, can be started/tracked, and get a progress sidebar) but don't + have a dedicated UI yet; these are plain metadata objects with + `component: null`, defined directly in `workflows.js` since there's no + component file to attach `meta` to -#### Bulk Import Workflow -- **BulkImportStep1.vue** - File upload with CSV/Excel support and column mapping +Exposed functions: +- `getAllWorkflows()` - the full catalog, used by the `Workflows.vue` list +- `getWorkflow(id)` - a single workflow definition by id +- `getWorkflowComponent(id)` - the Vue component for a workflow, or `null` +- `getWorkflowsByCategory(category)` / `getWorkflowCategories()` +- `buildWorkflowApiPayload(workflow)` - builds the request body used to start + a new `WorkflowInstance`, merging the common `workflow_config` block with + the workflow's own `getInitialPayload()` +- `serializeWorkflowPayload(workflow)` / `deserializeWorkflowPayload(workflow)` + - JSON (de)serialization of `WorkflowInstance.payload`, also used by `store.js` -### 3. Dynamic Component Loading in WorkflowDetail.vue - -The `stepComponent` computed property now uses the registry: +### 3. Usage in the views +`WorkflowDetail.vue`: ```javascript -stepComponent() { +import { getWorkflow, getWorkflowComponent } from '@/workflows.js'; + +workflowDefinition() { // `name` on the WorkflowInstance doubles as the workflow type identifier - const workflowType = this.workflowInstance?.name; - if (workflowType && this.currentStep) { - return getStepComponent(workflowType, this.currentStep); - } - return null; + return getWorkflow(this.workflowInstance?.name); +}, +workflowComponent() { + return getWorkflowComponent(this.workflowInstance?.name); } ``` -## How Content Dispatching Works +The resolved component is rendered once via `` +and receives the `step` prop on every step change - there's no need to swap +components as the user navigates between steps of the same workflow. -### 1. **Workflow Active State Management** -- Components connect to Vuex store's `active_workflows` state -- `loadWorkflowInstance()` fetches and finds specific workflow instances -- State determines which workflow type and step are active +`Workflows.vue` uses `getAllWorkflows()` for the catalog grid and +`buildWorkflowApiPayload(workflow)` when starting a new instance. -### 2. **Dynamic Component Resolution** -- System looks up components using workflow type + step combination -- Registry returns the appropriate Vue component or null -- Vue's `` renders the resolved component +### 4. Component contract -### 3. **Component Communication** -- Step components receive props: `workflowInstance`, `step`, `payload` -- Components emit events: `@update`, `@next`, `@prev`, `@complete` -- Parent WorkflowDetail handles state updates and navigation +Every workflow component receives props `workflowInstance`, `step`, `payload` +and emits `update`, `next`, `prev`, `complete`. `WorkflowDetail.vue` handles +persisting payload updates (`handleStepUpdate`) and step navigation +(`handleNextStep` / `handlePrevStep` / `completeWorkflow`), independent of +which workflow is active. -### 4. **Workflow Active Classes** -- `isStepCurrent(stepNumber)` - Identifies active step -- `isStepCompleted(stepNumber)` - Tracks completed steps -- `getStepClass(stepNumber)` - Applies appropriate CSS classes: - - `step-indicator-completed bg-success` - Completed steps - - `step-indicator-current bg-primary text-white` - Current step - - `step-indicator-pending bg-light border` - Pending steps +### 5. Workflow progress sidebar -## Component Features - -### FotoFirstStep1 (Photo Capture) -- **Camera Integration**: Uses `navigator.mediaDevices.getUserMedia()` -- **File Upload**: Drag-and-drop and file selection -- **Image Preview**: Real-time photo gallery -- **Data Persistence**: Photos saved to workflow payload - -### FotoFirstStep2 (Image Processing) -- **Batch Processing**: Processes multiple images sequentially -- **Image Optimization**: Compression and resizing -- **Progress Tracking**: Visual progress indicators -- **Processing Options**: Configurable compression and dimensions - -### FotoFirstStep3 (Item Details) -- **Item-by-Item Entry**: Navigate through captured photos -- **Comprehensive Forms**: Name, category, quantity, location, pricing -- **Progress Tracking**: Shows completion status -- **Data Validation**: Required field validation -- **Edit Support**: Ability to modify previously entered items - -### FotoFirstStep4 (Completion) -- **Import Summary**: Statistics and breakdowns -- **Data Review**: Grid and list view of items -- **Final Options**: QR codes, notifications, reports -- **Completion Workflow**: Final import execution - -### BulkImportStep1 (File Upload) -- **File Type Support**: CSV and Excel files -- **Drag-and-Drop**: Modern file upload interface -- **Column Mapping**: Automatic and manual field mapping -- **Data Preview**: Shows first 5 rows of data -- **Template Download**: Provides sample CSV template -- **File Analysis**: Validates data structure and content +Step metadata (name/description, total step count) comes from +`workflowDefinition.stepDefinitions` (the catalog entry, i.e. `Component.meta.stepDefinitions`), +used to render the progress sidebar and step list regardless of whether a +custom UI exists yet. `isStepCurrent(stepNumber)` / `isStepCompleted(stepNumber)` / +`getStepClass(stepNumber)` in `WorkflowDetail.vue` drive the sidebar styling. ## Extensibility -### Adding New Workflow Types -1. Create step components in `/components/workflow/steps/` -2. Import components in `ComponentRegistry.js` -3. Add mappings to `componentRegistry` object -4. Define workflow in `workflows.js` +### Adding UI for a planned workflow +1. Create `/components/workflow/workflows/MyWorkflow.vue`: + - Add a `meta: {...}` option to the exported component (copy the matching + entry out of `plannedWorkflows` in `workflows.js` and delete it there) + - Implement every step internally (`v-if="step === '1'"`, etc.) +2. In `workflows.js`, import the component and add + `{ ...MyWorkflow.meta, component: MyWorkflow }` to `implementedWorkflows` -### Adding New Steps -1. Create component: `WorkflowTypeStepN.vue` -2. Import and register in ComponentRegistry -3. Update workflow step definitions -4. Component automatically dispatched when step is reached +### Adding a brand new workflow type +1. Create the `.vue` file as above with a unique `id` +2. Add it to `implementedWorkflows` in `workflows.js` (if it has UI) or add a + plain metadata object to `plannedWorkflows` (if it doesn't, yet) + +### Adding steps to an existing workflow +1. Add another `v-else-if="step === 'N'"` branch to the workflow's `.vue` file +2. Add the step to that same file's `meta.stepDefinitions` +3. Add any step-specific data/methods to the same file - no other file needs + to change ## Benefits -1. **Modularity**: Each step is an independent, reusable component -2. **Flexibility**: Easy to create workflow-specific UI experiences -3. **Maintainability**: Clear separation of concerns -4. **Extensibility**: Simple process to add new workflows and steps -5. **Type Safety**: Registry provides centralized component management -6. **Performance**: Components only loaded when needed -7. **Consistency**: Standardized props and events across all step components +1. **Single source of truth**: metadata and UI for a workflow live in one file +2. **No indirection**: one array, no separate component registry to keep in sync +3. **Cohesion**: all state and logic for a workflow's steps lives together +4. **Extensibility**: new workflows are a single new file + one array entry +5. **Consistency**: standardized props (`workflowInstance`, `step`, `payload`) + and events (`update`, `next`, `prev`, `complete`) across all workflow components -## Usage Example - -```javascript -// Register a new step component -registerStepComponent('custom-workflow', '1', CustomStep1Component); - -// Check if component exists -if (hasStepComponent('foto-first-bulk-import', '1')) { - // Component is available -} - -// Get all components for a workflow -const components = getWorkflowComponents('import-items'); -``` - -This system provides a robust foundation for building complex, multi-step workflows with rich, interactive user interfaces while maintaining clean separation between workflow logic and presentation components. diff --git a/frontend/src/components/workflow/steps/BulkImportStep1.vue b/frontend/src/components/workflow/steps/BulkImportStep1.vue deleted file mode 100644 index 54ede66..0000000 --- a/frontend/src/components/workflow/steps/BulkImportStep1.vue +++ /dev/null @@ -1,495 +0,0 @@ - - - - - diff --git a/frontend/src/components/workflow/steps/BulkImportStep6.vue b/frontend/src/components/workflow/steps/BulkImportStep6.vue deleted file mode 100644 index ff67fa6..0000000 --- a/frontend/src/components/workflow/steps/BulkImportStep6.vue +++ /dev/null @@ -1,124 +0,0 @@ - - - - diff --git a/frontend/src/components/workflow/steps/FotoFirstStep1.vue b/frontend/src/components/workflow/steps/FotoFirstStep1.vue deleted file mode 100644 index 10d5157..0000000 --- a/frontend/src/components/workflow/steps/FotoFirstStep1.vue +++ /dev/null @@ -1,274 +0,0 @@ - - - - - diff --git a/frontend/src/components/workflow/steps/FotoFirstStep2.vue b/frontend/src/components/workflow/steps/FotoFirstStep2.vue deleted file mode 100644 index 5557242..0000000 --- a/frontend/src/components/workflow/steps/FotoFirstStep2.vue +++ /dev/null @@ -1,360 +0,0 @@ - - - - - diff --git a/frontend/src/components/workflow/steps/FotoFirstStep3.vue b/frontend/src/components/workflow/steps/FotoFirstStep3.vue deleted file mode 100644 index 6ac4bbd..0000000 --- a/frontend/src/components/workflow/steps/FotoFirstStep3.vue +++ /dev/null @@ -1,419 +0,0 @@ - - - - - diff --git a/frontend/src/components/workflow/steps/FotoFirstStep4.vue b/frontend/src/components/workflow/steps/FotoFirstStep4.vue deleted file mode 100644 index e9887c4..0000000 --- a/frontend/src/components/workflow/steps/FotoFirstStep4.vue +++ /dev/null @@ -1,376 +0,0 @@ - - - - - diff --git a/frontend/src/components/workflow/workflows/BackupRestoreWorkflow.vue b/frontend/src/components/workflow/workflows/BackupRestoreWorkflow.vue new file mode 100644 index 0000000..2c99d06 --- /dev/null +++ b/frontend/src/components/workflow/workflows/BackupRestoreWorkflow.vue @@ -0,0 +1,125 @@ + + + + + + diff --git a/frontend/src/components/workflow/workflows/BulkItemImportWorkflow.vue b/frontend/src/components/workflow/workflows/BulkItemImportWorkflow.vue new file mode 100644 index 0000000..93f352a --- /dev/null +++ b/frontend/src/components/workflow/workflows/BulkItemImportWorkflow.vue @@ -0,0 +1,655 @@ + + + + + + diff --git a/frontend/src/components/workflow/workflows/ExpiryCheckWorkflow.vue b/frontend/src/components/workflow/workflows/ExpiryCheckWorkflow.vue new file mode 100644 index 0000000..db4e4f9 --- /dev/null +++ b/frontend/src/components/workflow/workflows/ExpiryCheckWorkflow.vue @@ -0,0 +1,126 @@ + + + + + + diff --git a/frontend/src/components/workflow/workflows/FotoFirstBulkImportWorkflow.vue b/frontend/src/components/workflow/workflows/FotoFirstBulkImportWorkflow.vue new file mode 100644 index 0000000..bd26e09 --- /dev/null +++ b/frontend/src/components/workflow/workflows/FotoFirstBulkImportWorkflow.vue @@ -0,0 +1,1352 @@ + + + + + + diff --git a/frontend/src/components/workflow/workflows/InventoryAuditWorkflow.vue b/frontend/src/components/workflow/workflows/InventoryAuditWorkflow.vue new file mode 100644 index 0000000..94e7c61 --- /dev/null +++ b/frontend/src/components/workflow/workflows/InventoryAuditWorkflow.vue @@ -0,0 +1,127 @@ + + + + + + diff --git a/frontend/src/components/workflow/workflows/MaintenanceScheduleWorkflow.vue b/frontend/src/components/workflow/workflows/MaintenanceScheduleWorkflow.vue new file mode 100644 index 0000000..59ccb8c --- /dev/null +++ b/frontend/src/components/workflow/workflows/MaintenanceScheduleWorkflow.vue @@ -0,0 +1,122 @@ + + + + + + diff --git a/frontend/src/components/workflow/workflows/StorageOptimizationWorkflow.vue b/frontend/src/components/workflow/workflows/StorageOptimizationWorkflow.vue new file mode 100644 index 0000000..2098299 --- /dev/null +++ b/frontend/src/components/workflow/workflows/StorageOptimizationWorkflow.vue @@ -0,0 +1,123 @@ + + + + + + diff --git a/frontend/src/router.js b/frontend/src/router.js index b63d124..ab9f4c6 100644 --- a/frontend/src/router.js +++ b/frontend/src/router.js @@ -10,6 +10,7 @@ import Friends from '@/views/Friends.vue'; import Inventory from '@/views/Inventory.vue'; import Search from '@/views/Search.vue'; import InventoryDetail from '@/views/InventoryDetail.vue'; +import InventoryDetailForeign from '@/views/InventoryDetailForeign.vue'; import InventoryNew from '@/views/InventoryNew.vue'; import InventoryEdit from '@/views/InventoryEdit.vue'; import StorageLocation from '@/views/StorageLocation.vue'; @@ -45,6 +46,11 @@ const routes = [{path: '/', component: Dashboard, meta: {requiresAuth: true}}, { component: InventoryEdit, meta: {requiresAuth: true}, props: true +}, { + path: '/inventory/shared/:user/:id', + component: InventoryDetailForeign, + meta: {requiresAuth: true, foreign: true}, + props: true }, {path: '/inventory/new', component: InventoryNew, meta: {requiresAuth: true}}, { path: '/friends', component: Friends, diff --git a/frontend/src/views/InventoryDetailForeign.vue b/frontend/src/views/InventoryDetailForeign.vue new file mode 100644 index 0000000..29513bd --- /dev/null +++ b/frontend/src/views/InventoryDetailForeign.vue @@ -0,0 +1,102 @@ + + + + + \ No newline at end of file diff --git a/frontend/src/views/Search.vue b/frontend/src/views/Search.vue index 298b35e..16c6e57 100644 --- a/frontend/src/views/Search.vue +++ b/frontend/src/views/Search.vue @@ -27,20 +27,13 @@ - {{ item.name }} + {{ item.name }} {{ item.owned_quantity }} - @@ -56,7 +49,7 @@ class="card-img-top img-preview"/>
- + {{ item.name }}
@@ -78,7 +71,7 @@