feat!: rewrite frontend in Vue 3 with Pinia, DaisyUI, vite-plugin-pwa
Migrates every component from class-based vue-property-decorator to
<script setup> + Composition API. Replaces Vuex 3 + vuex-class with a
single Pinia store (persisted via pinia-plugin-persistedstate). Swaps
Bulma + bulma-{checkradio,switch,pricingtable} for DaisyUI 5 utilities
on Tailwind 4. Replaces register-service-worker with vite-plugin-pwa
(workbox, skipWaiting/clientsClaim preserved).
Plugins replaced:
- vue-class-component / vue-property-decorator -> <script setup>
- vuex / vuex-class / vuex-persist -> pinia + persistedstate
- vue-i18n 8 -> vue-i18n 11 (composition mode, legacy: false)
- vue-click-outside -> @vueuse/core onClickOutside
- @xkeshi/vue-qrcode -> qrcode.vue
- vue-currency-input 1 -> vue-currency-input 3 (composable wrapper)
- bus-event (Vue instance) -> mitt
- Vue filters -> plain functions imported per component
BREAKING: drops Stripe / pricing entirely (Payment, PricingTable,
/pricing route, vue-stripe-checkout, bulma-pricingtable).
Clears unused Cypress and Jest test scaffolding; leaves a Vitest
harness behind for future tests.
This commit is contained in:
@@ -1,46 +1,43 @@
|
||||
<template>
|
||||
<div class="transaction-update no-margin" v-if="account && transaction">
|
||||
<transaction-create :account="account" :transaction="transaction" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator'
|
||||
import { Getter } from 'vuex-class'
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import bus, { SYNC } from '@/utils/bus-event'
|
||||
import IAccount from '@/models/IAccount'
|
||||
import ITransaction from '@/models/ITransaction'
|
||||
import type IAccount from '@/models/IAccount'
|
||||
import type ITransaction from '@/models/ITransaction'
|
||||
import accountService from '@/services/AccountService'
|
||||
import transactionService from '@/services/TransactionService'
|
||||
import queueNotifService from '@/services/QueueNotifService'
|
||||
import TransactionCreate from '@/components/TransactionCreate.vue'
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
'transaction-create': () => import('@/components/TransactionCreate.vue')
|
||||
}
|
||||
})
|
||||
export default class TransactionUpdate extends Vue {
|
||||
@Prop({ type: String, required: true })
|
||||
public id!: string
|
||||
public transaction: ITransaction | null = null
|
||||
public account: IAccount | null = null
|
||||
const props = defineProps<{ id: string }>()
|
||||
const router = useRouter()
|
||||
|
||||
public created(): void {
|
||||
this.getData()
|
||||
bus.$on(SYNC, this.getData)
|
||||
}
|
||||
const account = ref<IAccount | null>(null)
|
||||
const transaction = ref<ITransaction | null>(null)
|
||||
|
||||
public async getData(docIds?: string[]): Promise<void> {
|
||||
if (docIds && !docIds.find((i: string) => i === this.id)) {
|
||||
return
|
||||
}
|
||||
this.transaction = await transactionService.get(this.id)
|
||||
if (!this.transaction) {
|
||||
this.$router.push({ name: 'home' })
|
||||
queueNotifService.error('Compte inexistant.')
|
||||
return
|
||||
}
|
||||
this.account = await accountService.get(this.transaction.accountId)
|
||||
const getData = async (docIds?: string[]) => {
|
||||
if (docIds && !docIds.find((i) => i === props.id)) return
|
||||
transaction.value = await transactionService.get(props.id)
|
||||
if (!transaction.value) {
|
||||
router.push({ name: 'home' })
|
||||
queueNotifService.error('Compte inexistant.')
|
||||
return
|
||||
}
|
||||
account.value = await accountService.get(transaction.value.accountId)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getData()
|
||||
bus.on(SYNC, getData)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
bus.off(SYNC, getData)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="account && transaction" class="transaction-update p-4">
|
||||
<TransactionCreate :account="account" :transaction="transaction" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user