refactor: enhance routing and state management in CoopBuilder, add migration checks on startup, and update Tailwind configuration for improved component styling
This commit is contained in:
parent
848386e3dd
commit
4cea1f71fe
55 changed files with 4053 additions and 1486 deletions
|
|
@ -53,58 +53,22 @@
|
|||
v-for="(member, index) in members"
|
||||
:key="member.id"
|
||||
class="p-6 border-3 border-black rounded-xl bg-white shadow-md">
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<UFormField label="Name" required class="md:col-span-2">
|
||||
<!-- Header row with name and coverage chip -->
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<UInput
|
||||
v-model="member.displayName"
|
||||
placeholder="Alex Chen"
|
||||
size="xl"
|
||||
class="text-lg font-medium w-full"
|
||||
placeholder="Member name"
|
||||
size="lg"
|
||||
class="text-lg font-bold w-48"
|
||||
@update:model-value="saveMember(member)"
|
||||
@blur="saveMember(member)" />
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Pay relationship" required>
|
||||
<USelect
|
||||
v-model="member.payRelationship"
|
||||
:items="payRelationshipOptions"
|
||||
size="xl"
|
||||
class="text-lg font-medium w-full"
|
||||
@update:model-value="saveMember(member)" />
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Hours/month" required>
|
||||
<UInput
|
||||
v-model="member.capacity.targetHours"
|
||||
type="text"
|
||||
placeholder="120"
|
||||
size="xl"
|
||||
class="text-xl font-bold w-full"
|
||||
@update:model-value="validateAndSaveHours($event, member)"
|
||||
@blur="saveMember(member)" />
|
||||
</UFormField>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-3">
|
||||
<UFormField label="External income coverage %" class="md:col-span-1">
|
||||
<UInput
|
||||
v-model="member.externalCoveragePct"
|
||||
type="text"
|
||||
placeholder="50"
|
||||
size="xl"
|
||||
class="text-lg font-medium w-full"
|
||||
@update:model-value="validateAndSavePercentage($event, member)"
|
||||
@blur="saveMember(member)" />
|
||||
<template #help>
|
||||
<span class="text-xs text-neutral-500"
|
||||
>% of needs covered by other income</span
|
||||
>
|
||||
</template>
|
||||
</UFormField>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex justify-end mt-6 pt-6 border-t-3 border-black">
|
||||
<CoverageChip
|
||||
:coverage-min-pct="memberCoverage(member).minPct"
|
||||
:coverage-target-pct="memberCoverage(member).targetPct"
|
||||
:member-name="member.displayName || 'This member'"
|
||||
/>
|
||||
</div>
|
||||
<UButton
|
||||
size="xs"
|
||||
variant="solid"
|
||||
|
|
@ -116,6 +80,78 @@
|
|||
<UIcon name="i-heroicons-trash" class="w-4 h-4" />
|
||||
</UButton>
|
||||
</div>
|
||||
|
||||
<!-- Compact grid for pay and hours -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-3 mb-3">
|
||||
<UFormField label="Pay relationship" required>
|
||||
<USelect
|
||||
v-model="member.payRelationship"
|
||||
:items="payRelationshipOptions"
|
||||
size="md"
|
||||
class="text-sm font-medium w-full"
|
||||
@update:model-value="saveMember(member)" />
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Hours/month" required>
|
||||
<UInput
|
||||
v-model="member.capacity.targetHours"
|
||||
type="text"
|
||||
placeholder="120"
|
||||
size="md"
|
||||
class="text-sm font-medium w-full"
|
||||
@update:model-value="validateAndSaveHours($event, member)"
|
||||
@blur="saveMember(member)" />
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Role (optional)">
|
||||
<UInput
|
||||
v-model="member.role"
|
||||
placeholder="Developer"
|
||||
size="md"
|
||||
class="text-sm font-medium w-full"
|
||||
@update:model-value="saveMember(member)"
|
||||
@blur="saveMember(member)" />
|
||||
</UFormField>
|
||||
</div>
|
||||
|
||||
<!-- Compact needs section -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-3 p-3 bg-gray-50 rounded-lg">
|
||||
<div>
|
||||
<label class="text-xs font-medium text-gray-600 mb-1 block">Minimum needs (€/mo)</label>
|
||||
<UInput
|
||||
v-model="member.minMonthlyNeeds"
|
||||
type="text"
|
||||
placeholder="2000"
|
||||
size="sm"
|
||||
class="text-sm font-medium w-full"
|
||||
@update:model-value="validateAndSaveAmount($event, member, 'minMonthlyNeeds')"
|
||||
@blur="saveMember(member)" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-xs font-medium text-gray-600 mb-1 block">Target pay (€/mo)</label>
|
||||
<UInput
|
||||
v-model="member.targetMonthlyPay"
|
||||
type="text"
|
||||
placeholder="3500"
|
||||
size="sm"
|
||||
class="text-sm font-medium w-full"
|
||||
@update:model-value="validateAndSaveAmount($event, member, 'targetMonthlyPay')"
|
||||
@blur="saveMember(member)" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-xs font-medium text-gray-600 mb-1 block">External income (€/mo)</label>
|
||||
<UInput
|
||||
v-model="member.externalMonthlyIncome"
|
||||
type="text"
|
||||
placeholder="1500"
|
||||
size="sm"
|
||||
class="text-sm font-medium w-full"
|
||||
@update:model-value="validateAndSaveAmount($event, member, 'externalMonthlyIncome')"
|
||||
@blur="saveMember(member)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Member -->
|
||||
|
|
@ -139,14 +175,30 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import { useDebounceFn } from "@vueuse/core";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { coverage } from "~/types/members";
|
||||
|
||||
const emit = defineEmits<{
|
||||
"save-status": [status: "saving" | "saved" | "error"];
|
||||
}>();
|
||||
|
||||
// Store
|
||||
const membersStore = useMembersStore();
|
||||
const { members } = storeToRefs(membersStore);
|
||||
const coop = useCoopBuilder();
|
||||
const members = computed(() =>
|
||||
coop.members.value.map(m => ({
|
||||
// Map store fields to component expectations
|
||||
id: m.id,
|
||||
displayName: m.name,
|
||||
role: m.role || '',
|
||||
capacity: {
|
||||
targetHours: m.hoursPerMonth || 0
|
||||
},
|
||||
payRelationship: 'FullyPaid', // Default since not in store yet
|
||||
minMonthlyNeeds: m.minMonthlyNeeds || 0,
|
||||
targetMonthlyPay: m.targetMonthlyPay || 0,
|
||||
externalMonthlyIncome: m.externalMonthlyIncome || 0,
|
||||
monthlyPayPlanned: m.monthlyPayPlanned || 0
|
||||
}))
|
||||
);
|
||||
|
||||
// Options
|
||||
const payRelationshipOptions = [
|
||||
|
|
@ -181,7 +233,19 @@ const debouncedSave = useDebounceFn((member: any) => {
|
|||
emit("save-status", "saving");
|
||||
|
||||
try {
|
||||
membersStore.upsertMember(member);
|
||||
// Convert component format back to store format
|
||||
const memberData = {
|
||||
id: member.id,
|
||||
name: member.displayName || '',
|
||||
role: member.role || '',
|
||||
hoursPerMonth: member.capacity?.targetHours || 0,
|
||||
minMonthlyNeeds: member.minMonthlyNeeds || 0,
|
||||
targetMonthlyPay: member.targetMonthlyPay || 0,
|
||||
externalMonthlyIncome: member.externalMonthlyIncome || 0,
|
||||
monthlyPayPlanned: member.monthlyPayPlanned || 0,
|
||||
};
|
||||
|
||||
coop.upsertMember(memberData);
|
||||
emit("save-status", "saved");
|
||||
} catch (error) {
|
||||
console.error("Failed to save member:", error);
|
||||
|
|
@ -208,29 +272,38 @@ function validateAndSavePercentage(value: string, member: any) {
|
|||
saveMember(member);
|
||||
}
|
||||
|
||||
function validateAndSaveAmount(value: string, member: any, field: string) {
|
||||
const numValue = parseFloat(value.replace(/[^\d.]/g, ""));
|
||||
member[field] = isNaN(numValue) ? 0 : Math.max(0, numValue);
|
||||
saveMember(member);
|
||||
}
|
||||
|
||||
function memberCoverage(member: any) {
|
||||
return coverage(
|
||||
member.minMonthlyNeeds || 0,
|
||||
member.targetMonthlyPay || 0,
|
||||
member.monthlyPayPlanned || 0,
|
||||
member.externalMonthlyIncome || 0
|
||||
);
|
||||
}
|
||||
|
||||
function addMember() {
|
||||
const newMember = {
|
||||
id: Date.now().toString(),
|
||||
displayName: "",
|
||||
roleFocus: "", // Hidden but kept for compatibility
|
||||
payRelationship: "FullyPaid",
|
||||
capacity: {
|
||||
minHours: 0,
|
||||
targetHours: 0,
|
||||
maxHours: 0,
|
||||
},
|
||||
riskBand: "Medium", // Hidden but kept with default
|
||||
externalCoveragePct: 50,
|
||||
privacyNeeds: "aggregate_ok",
|
||||
deferredHours: 0,
|
||||
quarterlyDeferredCap: 240,
|
||||
name: "",
|
||||
role: "",
|
||||
hoursPerMonth: 0,
|
||||
minMonthlyNeeds: 0,
|
||||
targetMonthlyPay: 0,
|
||||
externalMonthlyIncome: 0,
|
||||
monthlyPayPlanned: 0,
|
||||
};
|
||||
|
||||
membersStore.upsertMember(newMember);
|
||||
coop.upsertMember(newMember);
|
||||
}
|
||||
|
||||
function removeMember(id: string) {
|
||||
membersStore.removeMember(id);
|
||||
coop.removeMember(id);
|
||||
}
|
||||
|
||||
function exportMembers() {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue