Stores

Pinia stores structure

Balance uses Pinia stores and, as mentioned earlier, most of the stores will be divided into two files: index and single.

For more info check the offical Pinia documentation.

Here's an example of an index store:

interface IndexThreadState {
    data: Array<Thread>
    total: number
    query: Query
    loading: boolean
    filters: Array<Filter>
    links: Array<any>
}

export const useThreadsIndexStore = defineStore('cruds-threads-index', {
    state: (): IndexThreadState => ({
        data: [],
        total: 0,
        query: {
            sort: 'id',
            order: 'desc',
            limit: 50,
            s: '',
            page: 1,
        },
        loading: false,
        links: [],
        filters: [],
    }),

    actions: {
        async fetchIndexData() {
            this.loading = true
            const filters = this.filters
            const params: any = {
                ...this.query,
                filters,
            }
            try {
                fetchIndexDataResponse.value = executeSWRV(route, params)
                if (!fetchIndexDataResponse.value.data) {
                    await fetchIndexDataResponse.value.mutate()
                }
            } finally {
                this.loading = false
            }
        },

        async destroyData(id: string | number, confirm = false) {
            try {
                await axios.delete(`${route}/${id}`, { params: { confirm } })
                this.fetchIndexData()
            } catch (error: any) {
                //const message = error.response.data.messages
            }
        },
        setQuery(query: Query) {
            this.query = query
        },
        setFilters(filters: Array<Filter>) {
            this.filters = filters
        },
        resetState() {
            this.$reset()
        },
    },
})

Here's an example of a single store:

interface ThreadState {
    entry:
        | {
              id: null
              slug: null
              name: null
              status: ThreadStatusEnum
              color: string
              channel_id: null
              channel: null
              description: null
              created_at?: null
              updated_at?: null
              deleted_at?: null
          }
        | Thread
    loading: boolean
    dataEntry:
        | {
              id: null
              slug: null
              name: null
              status: ThreadStatusEnum
              color: string
              channel_id: null
              channel: null
              description: null
              created_at?: null
              updated_at?: null
              deleted_at?: null
          }
        | Thread
    errorRequest: { [key: string]: Array<string> }
}

export const useThreadsSingleStore = defineStore('cruds-threads-single', {
    state: (): ThreadState => ({
        entry: {
            id: null,
            slug: null,
            status: ThreadStatusEnum.OPEN,
            name: null,
            color: '#04a9f4',
            channel_id: null,
            channel: null,
            description: null,
            created_at: null,
            updated_at: null,
            deleted_at: null,
        },
        loading: false,
        dataEntry: {
            id: null,
            slug: null,
            status: ThreadStatusEnum.OPEN,
            name: null,
            color: '#04a9f4',
            channel_id: null,
            channel: null,
            description: null,
            created_at: null,
            updated_at: null,
            deleted_at: null,
        },
        errorRequest: {},
    }),

    actions: {
        async storeData() {
            this.loading = true
            try {
                const params = objectToFormData(this.entry, {
                    indices: true,
                    booleansAsIntegers: true,
                })
                await axios.post(route, params)
                this.notify({
                    title: this.t('global.create_success'),
                    type: 'success',
                })
            } catch (error: any) {
                this.errorRequest = error.response.data.errors
            } finally {
                this.loading = false
            }
        },

        async updateData() {
            this.loading = true
            this.errorRequest = {}
            try {
                const params = objectToFormData(this.dataEntry, {
                    indices: true,
                    booleansAsIntegers: true,
                })
                params.set('_method', 'PUT')
                await axios.post(`${route}/${this.entry?.slug}`, params)
                this.notify({
                    title: this.t('global.update_success'),
                    type: 'warn',
                })
            } catch (error: any) {
                this.errorRequest = error.response.data.errors
            } finally {
                this.loading = false
            }
        },

        async fetchEditData(id: string) {
            this.loading = true
            try {
                fetchEditDataResponse.value = executeSWRV(`${route}/${id}/edit`)
                if (!fetchEditDataResponse.value.data) {
                    await fetchEditDataResponse.value.mutate()
                }
            } finally {
                this.loading = false
            }
        },

        async fetchShowData(id: string) {
            fetchShowDataResponse.value = executeSWRV(`${route}/${id}`)
            if (!fetchShowDataResponse.value.data) {
                await fetchShowDataResponse.value.mutate()
            }
        },

        resetState() {
            this.$reset()
        },
    },
})

And here's an example of a generic store:

interface ConfigurationStore {
    distro: null | Distro
}

export const useConfigurationStore = defineStore('utility-configuration', {
    state: (): ConfigurationStore => ({
        distro: {
            type: DistroTypeEnum.SELF_HOSTED,
            version: '',
        },
    }),

    getters: {
        getDistro: (state) => state.distro,
    },

    actions: {
        async fetchDistroInfo() {
            fetchDistroInfoResponse.value = executeSWRV(
                route + '/getDistroInfo'
            )
            if (!fetchDistroInfoResponse.value.data) {
                await fetchDistroInfoResponse.value.mutate()
            }
        },

        resetState() {
            this.$reset()
        },
    },
})