initial: bootstrap from BukidBountyApp base
This commit is contained in:
Jonathan Sykes
218
MIGRATION_PLAN.md
Normal file
218
MIGRATION_PLAN.md
Normal file
@@ -0,0 +1,218 @@
|
||||
# Migration Plan: Blade Templates to Vue Components
|
||||
|
||||
## Overview
|
||||
This document outlines the migration from Blade templates to Vue 3 components for the BukidBountyApp project.
|
||||
|
||||
---
|
||||
|
||||
## Already Migrated Templates (Excluded from this plan)
|
||||
|
||||
| Template | Destination |
|
||||
|----------|-------------|
|
||||
| `home.blade.php` | `Pages/Home.vue` |
|
||||
| `list_product.blade.php` | `Pages/Market/ListProductsMarket.vue` |
|
||||
| `list_store.blade.php` | `Pages/Market/ListStoreMarket.vue` |
|
||||
|
||||
---
|
||||
|
||||
## Remaining Blade Templates to Migrate
|
||||
|
||||
### Category 1: Core Photos (2 templates)
|
||||
|
||||
| Template | Functionality | Notes |
|
||||
|----------|---------------|-------|
|
||||
| `view_photo_admin.blade.php` | Photo view with admin controls | Simple display, use Vue component structure |
|
||||
| `view_photo_admin_advanced.blade.php` | Advanced photo view | Similar to above |
|
||||
|
||||
**Status:** Pending
|
||||
|
||||
---
|
||||
|
||||
### Category 2: Market Shared (4 templates)
|
||||
|
||||
| Template | Functionality | Dependencies |
|
||||
|----------|---------------|--------------|
|
||||
| `buy_view_product_market.blade.php` | Product buying view with images, description, quantity | Already migrated - use existing Vue component |
|
||||
| `create_store_market.blade.php` | Store creation form with photo upload | New store Pinia store needed |
|
||||
| `edit_store_market.blade.php` | Store editing form | Existing store data loading |
|
||||
|
||||
**Status:** Pending (some already have Vue equivalents)
|
||||
|
||||
---
|
||||
|
||||
### Category 3: User Shared Admin (3 templates)
|
||||
|
||||
| Template | Functionality | Notes |
|
||||
|----------|---------------|-------|
|
||||
| `view_buy_product_admin.blade.php` | Product view from admin perspective | Use existing product component pattern |
|
||||
|
||||
**Status:** Pending
|
||||
|
||||
---
|
||||
|
||||
### Category 4: User Shared AdminAdvanced (9 templates)
|
||||
|
||||
| Template | Functionality | Dependencies |
|
||||
|----------|---------------|--------------|
|
||||
| `create_user.blade.php` | Create new user form with role selection | User Pinia store needed |
|
||||
| `edit_user.blade.php` | Edit existing user profile | User Pinia store needed |
|
||||
| `view_store_market.blade.php` | Store market view page | Already migrated |
|
||||
| `manage_product_admin.blade.php` | Product management card view | ViewBuilder → Vue reactivity |
|
||||
| `edit_product_ultimate.blade.php` | Product edit form (categories, subcategories) | Category API calls |
|
||||
| `edit_store_ultimate.blade.php` | Store edit with owner selection | User list dropdown |
|
||||
| `remove_product_from_store_admin.blade.php` | Remove product from store | Confirmation dialog needed |
|
||||
| `manage_global_transactions.blade.php` | Transaction history table | DataTables → Vue table |
|
||||
|
||||
**Status:** Pending
|
||||
|
||||
---
|
||||
|
||||
### Category 5: User Shared All (2 templates)
|
||||
|
||||
| Template | Functionality | Notes |
|
||||
|----------|---------------|-------|
|
||||
| `account_settings.blade.php` | User profile display | Simple HTML structure, convert to Vue component |
|
||||
| `transfermycredit.blade.php` | Credit transfer form with modals | Use Pinia store for state |
|
||||
|
||||
**Status:** Pending
|
||||
|
||||
---
|
||||
|
||||
### Category 6: User Ultimate (4 templates)
|
||||
|
||||
| Template | Functionality | Dependencies |
|
||||
|----------|---------------|--------------|
|
||||
| `home.blade.php` | Ultimate home page menu | Already migrated |
|
||||
| `ultimatefunction.blade.php` | Navigation menu with service buttons | Use Vue component array |
|
||||
| `userlist.blade.php` | Child users table with DataTables | API endpoint: /admin/users/list |
|
||||
| `usermodify.blade.php` | User management (enable/disable, roles, notes) | Multiple admin endpoints |
|
||||
|
||||
**Status:** Pending
|
||||
|
||||
---
|
||||
|
||||
## Pinia Stores Required
|
||||
|
||||
### Existing Store
|
||||
- **`stores/network.js`** - Network status and loading states ✅
|
||||
|
||||
### New Stores to Create
|
||||
|
||||
#### 1. `stores/product.js`
|
||||
```javascript
|
||||
export const useProductStore = defineStore('product', {
|
||||
state: () => ({
|
||||
products: [],
|
||||
currentProduct: null,
|
||||
categories: [],
|
||||
subcategories: []
|
||||
}),
|
||||
actions: {
|
||||
async fetchProducts() { ... },
|
||||
async fetchProductById(id) { ... },
|
||||
async updateProduct(data) { ... }
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
#### 2. `stores/store.js`
|
||||
```javascript
|
||||
export const useStoreStore = defineStore('store', {
|
||||
state: () => ({
|
||||
stores: [],
|
||||
currentStore: null,
|
||||
storeProducts: []
|
||||
}),
|
||||
actions: {
|
||||
async fetchStores() { ... },
|
||||
async createStore(data) { ... }
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
#### 3. `stores/user.js`
|
||||
```javascript
|
||||
export const useUserStore = defineStore('user', {
|
||||
state: () => ({
|
||||
users: [],
|
||||
currentUser: null,
|
||||
roles: []
|
||||
}),
|
||||
actions: {
|
||||
async fetchUsers() { ... },
|
||||
async updateUser(data) { ... }
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Vue Component Patterns to Follow
|
||||
|
||||
### Navigation
|
||||
```vue
|
||||
<script setup>
|
||||
import { useNavigate } from '../composables/Core/useNavigate'
|
||||
|
||||
const { navigate } = useNavigate()
|
||||
navigate({ page: 'PageName', props: { id: 123 } })
|
||||
</script>
|
||||
```
|
||||
|
||||
### Modals
|
||||
```vue
|
||||
<script setup>
|
||||
import { useModal } from '../composables/Core/useModal'
|
||||
|
||||
const modal = useModal()
|
||||
modal.show('title', 'body content')
|
||||
</script>
|
||||
```
|
||||
|
||||
### API Calls (using axios)
|
||||
```javascript
|
||||
import axios from 'axios'
|
||||
|
||||
const response = await axios.post('/api/endpoint', data)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Migration Priority Order
|
||||
|
||||
### Phase 1: High Priority (Core Features)
|
||||
1. `create_user.blade.php` - User creation (admin feature)
|
||||
2. `edit_product_ultimate.blade.php` - Product editing
|
||||
3. `remove_product_from_store_admin.blade.php` - Product removal
|
||||
4. `transfermycredit.blade.php` - Credit transfer
|
||||
|
||||
### Phase 2: Medium Priority
|
||||
5. `account_settings.blade.php` - User settings
|
||||
6. `manage_global_transactions.blade.php` - Transaction history
|
||||
7. `userlist.blade.php` - User listing
|
||||
|
||||
### Phase 3: Lower Priority
|
||||
8. All admin advanced templates (9 files)
|
||||
9. Core photo templates (2 files)
|
||||
|
||||
---
|
||||
|
||||
## Implementation Steps
|
||||
|
||||
1. Create Pinia stores for products, stores, and users
|
||||
2. Convert each Blade template following Vue component structure:
|
||||
- `<template>` section with Vue directives
|
||||
- `<script setup>` with Composition API
|
||||
- `<style scoped>` for component-specific styles
|
||||
3. Replace `gotoPage()` with `navigate()` calls
|
||||
4. Replace jQuery/Ajax with axios or composables
|
||||
5. Test each migrated component
|
||||
|
||||
---
|
||||
|
||||
## Notes
|
||||
|
||||
- All migrated templates should be placed in `resources/js/Pages/`
|
||||
- Use the existing `VueMigration.md` for reference patterns
|
||||
- Maintain consistent styling with the rest of the Vue app
|
||||
- Ensure all routes are properly configured in routing system
|
||||
Reference in New Issue
Block a user