bank account

components/Form/Organization/BankAccount.vue

@@ -0,0 +1,98 @@
+<!-- Component d'un formulaire d'un banque account d'organization -->
+<template>
+  <main>
+    <LayoutContainer>
+      <v-card class="margin-bottom-20">
+        <FormToolbar title="bank_account" icon="fa-euro-sign"/>
+
+        <UiForm
+          :id="id"
+          :model="model"
+          :query="query()"
+          :submitActions="submitActions">
+          <template #form.input="{entry, updateRepository}">
+            <v-container fluid class="container">
+              <v-row>
+
+                <v-col cols="12" sm="6">
+                  <UiInputText field="bankName" :data="entry['bankName']" @update="updateRepository" />
+                </v-col>
+
+                <v-col cols="12" sm="6">
+                  <UiInputText field="bic" :data="entry['bic']" @update="updateRepository" />
+                </v-col>
+
+                <v-col cols="12" sm="6">
+                  <UiInputText field="iban" :data="entry['iban']" @update="updateRepository" :mask="['AA ## ##### ##### XXXXXXXXXXX ##']" />
+                </v-col>
+
+                <v-col cols="12" sm="6">
+                  <UiInputText field="debitAddress" :data="entry['debitAddress']" @update="updateRepository" />
+                </v-col>
+
+                <v-col cols="12" sm="6">
+                  <UiInputText field="holder" :data="entry['holder']" @update="updateRepository" />
+                </v-col>
+
+                <v-col cols="12" sm="6">
+                  <UiInputCheckbox field="principal" :data="entry['principal']" @update="updateRepository" />
+                </v-col>
+
+              </v-row>
+            </v-container>
+
+          </template>
+
+          <template #form.button>
+            <NuxtLink :to="{ path: '/organization', query: { accordion: 'bank_account' }}" class="no-decoration">
+              <v-btn class="mr-4 ot_light_grey ot_grey--text">
+                {{ $t('back') }}
+              </v-btn>
+            </NuxtLink>
+          </template>
+
+        </UiForm>
+      </v-card>
+    </LayoutContainer>
+  </main>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed} from '@nuxtjs/composition-api'
+import { Repository as VuexRepository } from '@vuex-orm/core/dist/src/repository/Repository'
+import { Query, Model } from '@vuex-orm/core'
+import {SUBMIT_TYPE} from '~/types/enums'
+import { repositoryHelper } from '~/services/store/repository'
+import {AnyJson} from "~/types/interfaces";
+import {BankAccount} from "~/models/Core/BankAccount";
+
+export default defineComponent({
+  props: {
+    id:{
+      type: [Number, String],
+      required: true
+    }
+  },
+  setup () {
+    const repository: VuexRepository<Model> = repositoryHelper.getRepository(BankAccount)
+    const query: Query = repository.query()
+
+    const submitActions = computed(() => {
+      let actions:AnyJson = {}
+      actions[SUBMIT_TYPE.SAVE_AND_BACK] = { path: `/organization`, query: { accordion: 'bank_account' } }
+      actions[SUBMIT_TYPE.SAVE] = { path: `/organization/bank_account/` }
+      return actions
+    })
+
+    return {
+      model: BankAccount,
+      query: () => query,
+      submitActions
+    }
+  },
+  beforeDestroy() {
+    repositoryHelper.cleanRepository(BankAccount)
+  }
+})
+
+</script>

models/Core/BankAccount.ts

@@ -1,4 +1,4 @@
-import {Str, Bool, Model, Uid} from '@vuex-orm/core'
+import {Str, Bool, Model, Uid, Attr} from '@vuex-orm/core'
 
 export class BankAccount extends Model {
   static entity = 'bank_accounts'
@@ -6,21 +6,30 @@ export class BankAccount extends Model {
   @Uid()
   id!: number | string | null
 
-  @Str('', { nullable: true })
+  @Str(null, { nullable: true })
   bankName!: string
 
-  @Str('', { nullable: true })
+  @Str(null, { nullable: true })
   bic!: string
 
-  @Str('', { nullable: true })
+  @Str(null, { nullable: true })
+  bicInvalid!: string
+
+  @Str(null, { nullable: true })
   iban!: string
 
-  @Str('', { nullable: true })
+  @Str(null, { nullable: true })
+  ibanInvalid!: string
+
+  @Str(null, { nullable: true })
   debitAddress!: string
 
-  @Str('', { nullable: true })
+  @Str(null, { nullable: true })
   holder!: string
 
   @Bool(false, { nullable: false })
   principal!: boolean
+
+  @Attr([])
+  organization!: []
 }

pages/organization/bank_account/_id.vue

@@ -0,0 +1,32 @@
+<!-- Page de détails d'un IBAN (Edit mode) -->
+
+<template>
+  <main>
+    <v-skeleton-loader
+      v-if="fetchState.pending"
+      type="text"
+    />
+    <FormOrganizationBankAccount :id="id" v-else></FormOrganizationBankAccount>
+  </main>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@nuxtjs/composition-api'
+import {UseDataUtils} from "~/use/data/useDataUtils";
+import {BankAccount} from "~/models/Core/BankAccount";
+
+export default defineComponent({
+  name: 'EditBankAccount',
+  setup () {
+    const {getItemToEdit} = new UseDataUtils().invoke()
+    const {id, fetchState} = getItemToEdit(BankAccount)
+
+    return {
+      id,
+      fetchState
+    }
+  }
+})
+</script>
+<style>
+</style>

pages/organization/bank_account/new.vue

@@ -0,0 +1,35 @@
+<!-- Page de détails d'une adresse postale -->
+<template>
+  <main>
+    <v-skeleton-loader
+      v-if="loading"
+      type="text"
+    />
+    <FormOrganizationBankAccount :id="item.id" v-else></FormOrganizationBankAccount>
+  </main>
+</template>
+
+<script lang="ts">
+import {defineComponent, useContext} from '@nuxtjs/composition-api'
+import {UseDataUtils} from "~/use/data/useDataUtils";
+import {BankAccount} from "~/models/Core/BankAccount";
+
+export default defineComponent({
+  name: 'NewBankAccount',
+  setup (){
+    const {store} = useContext()
+    const {createItem} = new UseDataUtils().invoke()
+    const {create, loading, item} = createItem()
+
+    if(process.client){
+      const itemToCreate: BankAccount = new BankAccount({organization:[`/api/organizations/${store.state.profile.organization.id}`]})
+      create(itemToCreate, BankAccount)
+    }
+
+    return {
+      loading,
+      item
+    }
+  }
+})
+</script>

plugins/vueTheMask.js

@@ -0,0 +1,3 @@
+import Vue from 'vue'
+import VueTheMask from 'vue-the-mask'
+Vue.use(VueTheMask)