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:
Julien Calixte
@@ -1,165 +1,95 @@
|
||||
<template>
|
||||
<div class="refund-transaction card">
|
||||
<div class="card-content">
|
||||
<div class="content" v-if="refunded">Somme remboursée...</div>
|
||||
<div class="content" v-else>
|
||||
<span v-if="toMe">
|
||||
<span class="people">{{ refund.from.alias }}</span>
|
||||
vous doit
|
||||
<span class="numeric">{{
|
||||
refund.amount | money(account.mainCurrency)
|
||||
}}</span>
|
||||
</span>
|
||||
<span v-else-if="fromMe">
|
||||
Vous devez
|
||||
<span class="numeric">{{
|
||||
refund.amount | money(account.mainCurrency)
|
||||
}}</span>
|
||||
à
|
||||
<span class="people">{{ refund.to.alias }}</span>
|
||||
</span>
|
||||
<span v-else>
|
||||
<span class="people">{{ refund.from.alias }}</span>
|
||||
doit
|
||||
<span class="numeric">{{
|
||||
refund.amount | money(account.mainCurrency)
|
||||
}}</span>
|
||||
à
|
||||
<span class="people">{{ refund.to.alias }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="card-footer" v-if="canRefund && !refunded">
|
||||
<confirm-button class="is-text is-fullwidth" @confirm="refundTo"
|
||||
>Rembourser</confirm-button
|
||||
>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue, Prop } from 'vue-property-decorator'
|
||||
import { Getter } from 'vuex-class'
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import bus, { SYNC } from '@/utils/bus-event'
|
||||
import ClickOutside from 'vue-click-outside'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import transactionService from '@/services/TransactionService'
|
||||
import IAccount from '@/models/IAccount'
|
||||
import ICurrency from '@/models/ICurrency'
|
||||
import IRefund from '@/models/IRefund'
|
||||
import ITransaction from '@/models/ITransaction'
|
||||
import IUser from '@/models/IUser'
|
||||
import TransactionTag from '@/enums/TransactionTag'
|
||||
import TransactionType from '@/enums/TransactionType'
|
||||
import exchangeService from '@/services/ExchangeService'
|
||||
import { confirmation } from '@/utils'
|
||||
import { money } from '@/utils/format'
|
||||
import type IAccount from '@/models/IAccount'
|
||||
import type IRefund from '@/models/IRefund'
|
||||
import type ITransaction from '@/models/ITransaction'
|
||||
import TransactionTag from '@/enums/TransactionTag'
|
||||
import TransactionType from '@/enums/TransactionType'
|
||||
import ConfirmButton from '@/components/ConfirmButton.vue'
|
||||
|
||||
@Component({
|
||||
directives: {
|
||||
ClickOutside
|
||||
},
|
||||
components: {
|
||||
'confirm-button': () => import('@/components/ConfirmButton.vue')
|
||||
}
|
||||
const props = defineProps<{ refund: IRefund; account: IAccount }>()
|
||||
|
||||
const userStore = useUserStore()
|
||||
const { user } = storeToRefs(userStore)
|
||||
|
||||
const refunded = ref(false)
|
||||
|
||||
const canRefund = computed(() => {
|
||||
if (!user.value || !props.account.admin) return true
|
||||
return [props.account.admin.email, props.refund.from.email].includes(user.value.email)
|
||||
})
|
||||
export default class RefundTransaction extends Vue {
|
||||
@Getter
|
||||
public user!: IUser | null
|
||||
@Prop({ type: Object, required: true })
|
||||
public refund!: IRefund
|
||||
@Prop({ type: Object, required: true })
|
||||
public account!: IAccount
|
||||
public firstTap: boolean = true
|
||||
public refunded: boolean = false
|
||||
public resetTap(): void {
|
||||
this.firstTap = true
|
||||
}
|
||||
|
||||
public async refundTo(done: any): Promise<void> {
|
||||
if (!this.account._id) {
|
||||
done()
|
||||
return
|
||||
}
|
||||
const date: Date = new Date()
|
||||
const currencies: string[] = this.account.currencies.map(
|
||||
(c: ICurrency) => c.code
|
||||
)
|
||||
const transaction: ITransaction = {
|
||||
accountId: this.account._id,
|
||||
doctype: 'transaction',
|
||||
name: 'Remboursement',
|
||||
date,
|
||||
tag: TransactionTag.None,
|
||||
amount: this.refund.amount || 0,
|
||||
payBy: this.refund.from.alias || '',
|
||||
payFor: [
|
||||
{
|
||||
alias: this.refund.to.alias || '',
|
||||
weight: 1
|
||||
}
|
||||
],
|
||||
userIds: this.account.userIds,
|
||||
mainCurrency: this.account.mainCurrency,
|
||||
currencies: this.account.currencies,
|
||||
transactionType: TransactionType.refund,
|
||||
exchange: await exchangeService.get(
|
||||
this.account.mainCurrency.code,
|
||||
date,
|
||||
currencies
|
||||
)
|
||||
}
|
||||
const response: PouchDB.Core.Response = await transactionService.add(
|
||||
this.account._id,
|
||||
transaction
|
||||
)
|
||||
if (response.ok) {
|
||||
this.refunded = true
|
||||
confirmation('Remboursement effectué avec succès')
|
||||
}
|
||||
bus.$emit(SYNC)
|
||||
const fromMe = computed(
|
||||
() => !!user.value && !!props.refund.from && props.refund.from.userId === user.value.userId
|
||||
)
|
||||
const toMe = computed(
|
||||
() => !!user.value && !!props.refund.to && props.refund.to.userId === user.value.userId
|
||||
)
|
||||
|
||||
const refundTo = async (done: () => void) => {
|
||||
if (!props.account._id) {
|
||||
done()
|
||||
return
|
||||
}
|
||||
|
||||
public get canRefund(): boolean {
|
||||
if (!this.user || !this.account.admin) {
|
||||
return true
|
||||
}
|
||||
const emails: string[] = [this.account.admin.email, this.refund.from.email]
|
||||
return emails.includes(this.user.email)
|
||||
const date = new Date()
|
||||
const currencies = props.account.currencies.map((c) => c.code)
|
||||
const transaction: ITransaction = {
|
||||
accountId: props.account._id,
|
||||
doctype: 'transaction',
|
||||
name: 'Remboursement',
|
||||
date,
|
||||
tag: TransactionTag.None,
|
||||
amount: props.refund.amount || 0,
|
||||
payBy: props.refund.from.alias || '',
|
||||
payFor: [{ alias: props.refund.to.alias || '', weight: 1 }],
|
||||
userIds: props.account.userIds,
|
||||
mainCurrency: props.account.mainCurrency,
|
||||
currencies: props.account.currencies,
|
||||
transactionType: TransactionType.refund,
|
||||
exchange: await exchangeService.get(props.account.mainCurrency.code, date, currencies)
|
||||
}
|
||||
|
||||
public get fromMe(): boolean {
|
||||
if (!this.user || !this.refund.from) {
|
||||
return false
|
||||
}
|
||||
return this.refund.from.userId === this.user.userId
|
||||
}
|
||||
|
||||
public get toMe(): boolean {
|
||||
if (!this.user || !this.refund.to) {
|
||||
return false
|
||||
}
|
||||
return this.refund.to.userId === this.user.userId
|
||||
const response = await transactionService.add(props.account._id, transaction)
|
||||
if (response.ok) {
|
||||
refunded.value = true
|
||||
confirmation('Remboursement effectué avec succès')
|
||||
}
|
||||
bus.emit(SYNC)
|
||||
done()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.people {
|
||||
font-size: 12pt;
|
||||
font-weight: bold;
|
||||
&.to-me {
|
||||
font-style: italic;
|
||||
&:after {
|
||||
font-style: normal;
|
||||
content: ' (🤗)';
|
||||
}
|
||||
}
|
||||
&.from-me {
|
||||
font-style: italic;
|
||||
&:after {
|
||||
font-style: normal;
|
||||
content: ' (🤨)';
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="refund-transaction card bg-base-100 shadow my-2">
|
||||
<div class="card-body">
|
||||
<div v-if="refunded">Somme remboursée...</div>
|
||||
<div v-else>
|
||||
<span v-if="toMe">
|
||||
<span class="font-bold">{{ refund.from.alias }}</span> vous doit
|
||||
<span class="numeric">{{ money(refund.amount, account.mainCurrency) }}</span>
|
||||
</span>
|
||||
<span v-else-if="fromMe">
|
||||
Vous devez
|
||||
<span class="numeric">{{ money(refund.amount, account.mainCurrency) }}</span> à
|
||||
<span class="font-bold">{{ refund.to.alias }}</span>
|
||||
</span>
|
||||
<span v-else>
|
||||
<span class="font-bold">{{ refund.from.alias }}</span> doit
|
||||
<span class="numeric">{{ money(refund.amount, account.mainCurrency) }}</span> à
|
||||
<span class="font-bold">{{ refund.to.alias }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="canRefund && !refunded" class="card-actions justify-end p-2 border-t">
|
||||
<ConfirmButton class="btn-ghost btn-block" @confirm="refundTo">
|
||||
Rembourser
|
||||
</ConfirmButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user