Migrate grateWizard from React/Next.js to native Nuxt integration
- Port all React components to Vue 3 (GwTabs, GwMN, GwCRA, GwCRS, GwMap, GwRelations, GwPerimeterList) - Port hooks to Vue composables (useCesiumProfiles, useSavedPerimeters) - Copy pure TS services and utils (duniter/, ss58, gratewizard utils) - Add Leaflet + Geoman + MarkerCluster dependencies - Serve grateWizard as popup via /gratewizard?popup (layout: false) and info page on /gratewizard (with Librodrome layout) - Remove public/gratewizard-app/ static Next.js export - Refine UI: compact tabs, buttons, inputs, cards, perimeter list - Use Ğ1 breve everywhere, French locale for all dates and amounts - Rename roles: vendeur→offre / acheteur→reçoit le produit ou service - Rename prix→évaluation in all visible text - Add calculated result column in CRA and CRS relation tables - DU/Ğ1 selector uses toggle switch (same as role toggle) - Auto-scroll to monetary data card on polygon selection Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
41
app/components/gratewizard/GwTabs.vue
Normal file
41
app/components/gratewizard/GwTabs.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="flex flex-col items-center">
|
||||
<p class="gw-metric pb-3" style="font-size: 1.75rem">grateWizard</p>
|
||||
|
||||
<!-- Tab buttons -->
|
||||
<div class="flex gap-0.5 p-0.5 rounded-full bg-surface-200">
|
||||
<button
|
||||
v-for="tab in tabs"
|
||||
:key="tab.key"
|
||||
class="gw-tab-btn"
|
||||
:class="activeTab === tab.key
|
||||
? 'gw-tab-active'
|
||||
: 'gw-tab-inactive'"
|
||||
:disabled="tab.disabled"
|
||||
@click="activeTab = tab.key"
|
||||
>
|
||||
{{ tab.label }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Tab content with KeepAlive -->
|
||||
<div class="w-full">
|
||||
<KeepAlive>
|
||||
<GratewizardGwMN v-if="activeTab === '1'" />
|
||||
<GratewizardGwCRA v-else-if="activeTab === '2'" />
|
||||
<GratewizardGwCRS v-else-if="activeTab === '3'" />
|
||||
</KeepAlive>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const tabs = [
|
||||
{ key: '1', label: 'M/N local', disabled: false },
|
||||
{ key: '2', label: "A l'anciennet\u00e9", disabled: false },
|
||||
{ key: '3', label: 'Au solde', disabled: false },
|
||||
{ key: '4', label: 'Au volume', disabled: true },
|
||||
];
|
||||
|
||||
const activeTab = ref('1');
|
||||
</script>
|
||||
Reference in New Issue
Block a user