@simitgroup/simpleapp-generator 1.0.64 → 1.1.0

package/templates/nuxt/components/simpleApp/SimpleAppForm.vue.eta

@@ -5,10 +5,10 @@
     </form>
 </template>
 <script setup lang="ts" >
-import type {SimpleAppFieldSetting} from './type'    
-import { SimpleAppClient } from  '../simpleapp/generate/clients/SimpleAppClient'
+// import type {SimpleAppFieldSetting} from '/types'    
+import { SimpleAppClient } from  '~/simpleapp/generate/clients/SimpleAppClient'
 import type { JSONSchema7,JSONSchema7Definition } from 'json-schema';
-
+import _ from 'lodash'
     const props = defineProps<{
         title?:string,
         document: SimpleAppClient<any,any>
@@ -28,6 +28,7 @@ import type { JSONSchema7,JSONSchema7Definition } from 'json-schema';
         
         return {
             path: path,
+            key: _.last(path.split('/')),
             instancepath: getInstancePath(schema,path),
             fieldsetting: fieldsetting,
             modelObject: data,
@@ -37,7 +38,7 @@ import type { JSONSchema7,JSONSchema7Definition } from 'json-schema';
             isrequired: getIsRequired(schema,path),
             errors: props.document.getErrors(),
             readonly: props.readonly
-        } as SimpleAppFieldSetting
+        } //as SimpleAppFieldSetting
     }
 
     //    "schemaPath": "#/properties/email/format",

package/templates/nuxt/components/simpleApp/SimpleAppInput.vue.eta

@@ -0,0 +1,288 @@
+<template>
+    <SimpleAppFieldContainer :hidelabel="hidelabel" v-model="modelValue" 
+                :label="label" :description="description" 
+                :setting="setting" :instancepath="instancepath" :error="error" #default="slotprops">        
+        <!-- binary input -->
+        <component :is="inputComponent" :readonly="isReadonly" :pt="pt"
+                v-if="[SimpleAppInputType.checkbox,SimpleAppInputType.switch ].includes(inputType)" 
+                :inputId="slotprops.uuid" :path="setting.instancepath"
+                v-model="modelValue" :binary="true"/>
+
+        <!-- date component -->        
+        <component :is="inputComponent" type="date" :pt="pt" 
+            v-else-if="inputType == SimpleAppInputType.date"
+            :inputId="slotprops.uuid" :path="setting.instancepath"
+            v-model="datevalue" @update:modelValue="updateDate" :readonly="isReadonly"/>
+        <!-- calendar component -->        
+        <component :is="inputComponent" type="date" :pt="pt" class="flex flex-col"
+            v-else-if="SimpleAppInputType.calendar==inputType"
+            :inputId="slotprops.uuid" :path="setting.instancepath"
+            v-model="datevalue" @update:modelValue="updateDate" :readonly="isReadonly"/>
+        
+        <!-- select/list component -->                
+        <component :is="inputComponent" v-model="modelValue"  :pt="pt"
+            v-else-if="[SimpleAppInputType.select,SimpleAppInputType.list].includes(inputType)"
+            :inputId="slotprops.uuid" :path="setting.instancepath"  
+            :readonly="isReadonly"
+                :options="getListOptions()" optionLabel="label" optionValue="value"/>
+        
+        <!-- radio component -->                
+        <div v-else-if="inputType == SimpleAppInputType.radio" >
+            <div v-for="(item,index) in getListOptions()">
+                <component :pt="pt" :is="inputComponent" v-model="modelValue" 
+                        :inputId="setting.key+'-'+index" name="smaple" :value="item.value"
+                        :readonly="isReadonly"
+                        />  {{ ' ' }}
+                <label :for="setting.key+'-'+index"> {{ item.label  }} </label>
+            </div>            
+        </div>
+        
+        <!-- autocomplete -->
+        <AutoComplete :is="inputComponent" v-model="modelValue"  
+            v-else-if="inputType==SimpleAppInputType.autocomplete"  
+                forceSelection optionLabel="label" :dropdown="true"                                
+                @item-select="pickAutoComplete"
+                @complete="getListFromAutocompleteApi"          
+                
+                :pt="{
+                    root:{class:'rounded-lg flex flex-row'},
+                    input:{class:'w-full font-sans text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40  rounded-lg  rounded-tr-none rounded-br-none transition-colors duration-200 appearance-none hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]  text-base'},
+                    loadingIcon:{class:'hidden'},
+                    dropdownbutton: {
+                        root:' bg-primary-600 hover:bg-primary-400 text-white rounded flex flex-row  p-3 rounded-tl-none rounded-bl-none '
+                    }
+                }"
+                :disabled="isReadonly"
+                :suggestions="list"                                
+                @blur="onBlurAutocomplete"
+                :inputId="slotprops.uuid" :path="setting.instancepath"
+                :readonly="isReadonly"
+                 />
+                 
+        <!--  document no input-->
+        <SimpleAppDocumentNo v-else-if="inputType == SimpleAppInputType.documentno" 
+            :setting="setting" v-model="modelValue" :inputId="slotprops.uuid"
+            :readonly="isReadonly" @update:docNoFormat="triggerDocNoFormatChange"            
+             :path="setting.instancepath"/>
+           
+        
+        <!-- password -->
+        <component :is="inputComponent"
+                v-else-if="inputType == SimpleAppInputType.password" 
+                :type="type" v-model="modelValue" :pt="pt" 
+                :readonly="isReadonly" class="flex flex-col"
+                :inputId="slotprops.uuid" :path="setting.instancepath"/>
+
+        <!-- rating -->
+        <Rating v-else-if="inputType == SimpleAppInputType.rating" 
+         :is="inputComponent" :type="type" v-model="modelValue" :pt="pt" 
+                :readonly="isReadonly"                 
+                :inputId="slotprops.uuid" :path="setting.instancepath"/>
+            
+        <!-- chip -->
+        <component  v-else-if="inputType == SimpleAppInputType.chip" 
+         :is="inputComponent" :type="type" v-model="modelValue"
+                 :pt="pt" 
+                :disabled="isReadonly" 
+                
+                
+                :inputId="slotprops.uuid" :path="setting.instancepath"/>
+        <!-- simple component -->        
+        <component v-else :is="inputComponent" :type="type" v-model="modelValue" :pt="pt" 
+                :readonly="isReadonly" 
+                class="w-full flex flex-col"
+                :inputId="slotprops.uuid" :path="setting.instancepath"/>
+            
+        
+        <!-- component require special treatment -->
+        
+    </SimpleAppFieldContainer>    
+</template>
+
+<script lang="ts" setup>
+import { isNull, pick } from 'lodash';
+import {autocompletetype} from '~/types'
+import moment from 'moment'
+import AutoComplete from 'primevue/autocomplete';
+import Calendar from 'primevue/calendar';
+import Checkbox from 'primevue/checkbox';
+import Chips from 'primevue/chips';
+import SimpleAppDocumentNo from './SimpleAppDocumentNo.vue';
+import Dropdown from 'primevue/dropdown';
+import InputNumber from 'primevue/inputnumber';
+import InputSwitch from 'primevue/inputswitch';
+import InputText from 'primevue/inputtext';
+import Listbox from 'primevue/listbox';
+import MultiSelect from 'primevue/multiselect';
+import Password from 'primevue/password';
+import RadioButton from 'primevue/radiobutton';
+import Rating from 'primevue/rating';
+import Slider from 'primevue/slider';
+import Textarea from 'primevue/textarea';
+import {SimpleAppInputType} from '~/types'
+
+let inputComponent :Component
+const emptyautocomplete =():autocompletetype=> ({_id:'',label:''})
+const autocompleteitem = ref<autocompletetype>(emptyautocomplete())
+const datevalue = ref('')
+const modelValue = defineModel()
+const list = ref([])
+const props = withDefaults( defineProps<{
+    inputType:SimpleAppInputType,
+    label?:string,
+    description?:string,
+    error?:string,
+    setting:any,
+    type?:string,
+    instancepath?:string,
+    hidelabel?: boolean
+    readonly?: boolean
+    pt?:any
+}>(),{type:'text'})
+
+
+switch(props.inputType){
+    case SimpleAppInputType.text:
+        inputComponent = InputText
+        break;
+    case SimpleAppInputType.textarea:
+        inputComponent = Textarea
+        break;
+    case SimpleAppInputType.number:
+        inputComponent = InputNumber
+    break   
+    case SimpleAppInputType.date:
+        inputComponent = InputText
+    break;
+    case SimpleAppInputType.calendar:
+        inputComponent = Calendar
+        break;
+    case SimpleAppInputType.autocomplete: 
+        inputComponent = AutoComplete
+        break;
+    case SimpleAppInputType.autocompletemultiple: //*
+        inputComponent = AutoComplete
+        break;
+    case SimpleAppInputType.selectmultiple: //*
+        inputComponent = MultiSelect
+        break;
+    case SimpleAppInputType.listmultiple: //*
+        break;    
+    case SimpleAppInputType.radio: //*
+        inputComponent = RadioButton
+        break;
+    case SimpleAppInputType.select: //*
+        inputComponent = Dropdown
+        break;
+    case SimpleAppInputType.list: //*
+        inputComponent = Listbox
+        break;
+    case SimpleAppInputType.chip: //*
+        inputComponent = Chips
+        break;
+    case SimpleAppInputType.checkbox:
+        inputComponent = Checkbox
+        break;
+    case SimpleAppInputType.switch:
+        inputComponent = InputSwitch
+        break;    
+    case SimpleAppInputType.documentno:  //*
+        break;
+    case SimpleAppInputType.password: 
+        inputComponent = Password
+        break;    
+    case SimpleAppInputType.rating:
+        inputComponent = Rating
+        break;
+    case SimpleAppInputType.slider:
+        inputComponent = Slider
+        break;
+
+}
+const isReadonly = computed(()=>{
+    if(props.readonly){
+        return props.readonly
+    }else if(props.setting.readonly){
+        return props.setting.readonly
+    }else{
+        return false
+    }
+})
+
+const updateDate = (value:any)=>{
+    modelValue.value = moment(value).toISOString()    
+}
+
+
+const getListOptions = () =>{
+    
+    const options = []
+    if(props.setting.fieldsetting.enum){
+        for(let i=0;i<props.setting.fieldsetting.enum.length;i++){
+            const v = props.setting.fieldsetting.enum[i]
+            options.push({value:v, label: camelCaseToWords(v)})
+        }
+
+
+    }
+    return options
+}
+
+
+const emits = defineEmits(['change','update:modelValue','update:docNoFormat'])
+
+watch(modelValue ,(newvalue:any)=>{
+
+    if([SimpleAppInputType.date,SimpleAppInputType.calendar].includes(props.inputType)){
+        datevalue.value = moment(modelValue.value as string ).format('YYYY-MM-DD')
+    }else if(props.inputType==SimpleAppInputType.autocomplete){            
+            modelValue.value=autocompleteitem.value                
+    }
+
+    emits('change',modelValue.value)
+    emits('update:modelValue',modelValue.value)    
+})
+
+
+/************ start autocomplete only ***************/
+const onBlurAutocomplete = ()=>{
+    
+    if(  autocompleteitem.value === null){
+        autocompleteitem.value = emptyautocomplete()
+    }
+    if(isNull(modelValue.value )){
+        modelValue.value = autocompleteitem.value
+    }
+    else if(typeof modelValue.value =='object'){
+     
+    }else{
+        modelValue.value = autocompleteitem.value
+    }
+
+}
+const getListFromAutocompleteApi =  (event:any)=>{    
+  const keyword = event.query??''  
+  //props.setting.document.getDocType()
+  const targetDocument = props.setting.fieldsetting['x-foreignkey']
+  getDocumentApi(targetDocument).autoComplete(keyword).then((res:any)=>{
+    list.value = res.data 
+  })
+}
+const pickAutoComplete = (event:any)=>{
+  if(typeof event.value.query == 'undefined'){      
+      modelValue.value=event.value
+      autocompleteitem.value = event.value      
+  }
+}
+/************ end autocomplete only ***************/
+
+
+
+
+
+const triggerDocNoFormatChange=(formatdata:any)=>{
+    emits('update:docNoFormat',formatdata)
+}
+</script>
+<style scoped>
+</style>

package/templates/nuxt/components/simpleApp/SimpleAppInputTable.vue.eta

@@ -8,7 +8,7 @@
         </div>
     </template>
     <slot>
-        <!-- <template> -->
+        
             
             <Column class="text-center" header="undefine columns">
                 <template #body>
@@ -18,30 +18,11 @@
             </Column> 
       
         
-            <!-- </template> -->
             
-    </slot>
             
-
-        
-    
-                    
-                
-                            
+    </slot>
             
-        
-    
 
-            <!-- <Column v-for="(col,index) in columns" :field="col.field" :style="col.style" :header="camelCaseToWords(col.title??'')">            
-                <template #body="{ data, field,index }">                                
-                    <SimpleAppDynamicInput v-if="modelValue" :instancepath="getInstancePath(index,field)" :setting="getChildFieldSetting(field)" v-model="modelValue[index][field]" :getAutocomplete="getAutocomplete" :hidelabel="true" />                
-                </template>
-            </Column>
-            <Column v-if="!readonly">
-                <template #body="{data,field,index}">
-                    <Button class="simpleapp-inputtable-delrow button-danger" @click="deleteRow(index)" type="button">X</Button>
-                </template>
-            </Column> -->
     </DataTable>
 </template>
 <script setup lang="ts">
@@ -49,13 +30,11 @@
 import {ref} from 'vue'
 import DataTable from 'primevue/datatable';
 import Column from 'primevue/column';
-import {camelCaseToWords} from './helper'
-import type {InputTableColumn} from './type'
+
 const props = defineProps<{
     // columns:InputTableColumn[],
     setting:any,
-    getField:Function,
-    getAutocomplete:Function, readonly?:boolean
+    getField:Function,    
 }>()
 
 
@@ -63,33 +42,6 @@ const props = defineProps<{
 const modelValue = defineModel<any[]>()
     
     
-const fieldsetting = props.setting.fieldsetting
-
-const readonly = ref(false)
-if(props.setting.readonly!==undefined ){
-    readonly.value = props.setting.readonly
-}
-if(props.readonly!==undefined ){
-    readonly.value = props.readonly
-}
-// const columns = ref(props.columns)
-// for(let i=0;i<props.columns.length;i++){
-//     if(columns.value[i].title ===undefined){
-//         columns.value[i].title=columns.value[i].field
-//     }
-// }
-const getChildFieldSetting=(field:string)=>{
-    return props.getField(`${props.setting.path}/items/properties/${field}`)
-}
-const getInstancePath=(index:number,field:string)=>{
-    return `${props.setting.instancepath}/${index}/${field}`
-}
-
-const deleteRow=(index: number)=>{
-    if(modelValue.value){
-        modelValue.value.splice(index,1)
-    }    
-}
 const addNew = () => {
     const field = props.setting.path.split('/').at(-1)    
     props.setting.document[`add${field}`]()

package/templates/nuxt/components/simpleApp/{SimpleAppAutocomplete.vue.eta → pending/SimpleAppAutocomplete.vue}

@@ -115,8 +115,7 @@ const onblur = ()=>{
   selecteditem.value={...modelValue.value}
   if(typeof selecteditem.value[labelfield]=='undefined'){
       selecteditem.value[labelfield]=''
-  }
-  // console.log("selecteditem.value",selecteditem.value)
+  }  
 }
 const capitalizeFirstLetter = (str: string) => {
   const res = str == '' ? '' : str.slice(0, 1).toUpperCase() + str.slice(1);

package/templates/nuxt/components/simpleApp/pending/SimpleAppDocumentNo.vue

@@ -0,0 +1,90 @@
+
+<template>
+    <FieldContainer :hidelabel="hidelabel" v-model="modelValue" :label="label" :description="description"  :setting="setting" :instancepath="instancepath" :error="error" #default="slotprops">
+        <div class="p-inputgroup ">
+            <InputText class="simpleapp-inputfield" 
+                :inputId="slotprops.uuid"
+                v-model="modelValue"    
+                :placeholder="placeholder"
+                :path="setting.instancepath"
+                :pt="{input:{class:'text-right w-full'}}"                          
+            />
+            <span class="p-inputgroup-addon p p-0">
+                <Button class="pi pi-angle-down"  type="button" @click="toggle"></Button>
+
+                <OverlayPanel ref="op">                    
+                    <ul>                      
+                        <li v-for="docno in docFormatlist" class="hover-list-primary " >
+                            <a class="flex-row p-2 mt-4" @click="chooseFormat(docno)">
+                                <span class="pi pi-hashtag mr-2"></span>
+                                <span class="">{{docno.docNoFormatName}}</span>
+                                <span class="ml-2 text text-green-600">{{docno.sample}}</span>
+                            </a>
+                        </li>                    
+                    </ul>
+                </OverlayPanel>
+            </span>
+            <!-- {{ Object.getOwnPropertyNames(setting) }} -->
+        </div>
+    </FieldContainer>
+</template>
+<script lang="ts" setup>
+import {ForeignKey} from '~/types'
+import OverlayPanel from 'primevue/overlaypanel';
+import {computed,watch,ref} from 'vue'
+import InputText from 'primevue/inputtext';
+import FieldContainer from './SimpleAppFieldContainer.vue'
+import {DocNoFormat} from "~/types"
+const selectedformat = ref()
+const op = ref();
+const placeholder = ref('')
+const docFormatlist = ref()
+const modelValue = defineModel<string>()
+const docNoFormat = defineModel<ForeignKey>('docNoFormat')
+// const emit = defineEmits(['update:docNoFormat'])
+
+const props = withDefaults(defineProps<{
+    // docNoFormat:object,
+    // docFormatlist?:DocNoFormat[]
+    label?:string,
+    description?:string,
+    setting:any
+    error?:string,
+    instancepath?:string,
+    hidelabel?:boolean, 
+    
+}>(),{
+    hidelabel:false
+})
+const documenttype = props.setting.document.doctype
+
+
+const toggle = async (event:any) => {
+    op.value.toggle(event);
+    
+        
+}
+
+const chooseFormat =  (item:any) =>{
+    placeholder.value = item.sample    
+    const f = item
+    docNoFormat.value = { _id : f._id, label : f.docNoFormatName}
+    op.value.toggle();
+}
+
+const loadDocFormats = async () =>{
+    docFormatlist.value= await getDocFormats(documenttype)    
+    if(docFormatlist.value.length>0){
+        const f = docFormatlist.value[0]
+        docNoFormat.value = { _id : f._id, label : f.docNoFormatName}
+        placeholder.value = docFormatlist.value[0].sample
+        
+    }
+}
+
+
+onMounted(()=>{
+    loadDocFormats()
+
+})
+</script>

package/templates/nuxt/components/simpleApp/pending/SimpleAppInputTable.vue

@@ -0,0 +1,83 @@
+<template>
+    <DataTable v-bind="$attrs" stripedRows resizableColumns
+     class="simpleapp-datatable p-datatable-sm" :value="modelValue">
+    <template #empty> <div class="text-center">No record found.</div> </template>
+    <template #header >
+        <div>
+            <Button icon="pi pi-plus" @click="addNew()" class="simpleapp-datatable-add btn-primary" type="button">Add</Button>
+        </div>
+    </template>
+    <slot>
+        <!-- <template> -->
+            
+            <Column class="text-center" header="undefine columns">
+                <template #body>
+                    <div class="text-center">Missing {{ '<Column></Column>' }}</div>
+                </template>
+                
+            </Column> 
+      
+        
+            <!-- </template> -->
+            
+    </slot>            
+    </DataTable>
+</template>
+<script setup lang="ts">
+
+import {ref} from 'vue'
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import {camelCaseToWords} from './helper'
+import type {InputTableColumn} from './type'
+const props = defineProps<{
+    // columns:InputTableColumn[],
+    setting:any,
+    getField:Function,
+    getAutocomplete:Function, readonly?:boolean
+}>()
+
+
+//{path: '#/properties/details', instancepath: '/details', fieldsetting: {…}, modelObject: Proxy(Object), apiObj: INVApi, …}
+const modelValue = defineModel<any[]>()
+    
+    
+const fieldsetting = props.setting.fieldsetting
+
+const readonly = ref(false)
+if(props.setting.readonly!==undefined ){
+    readonly.value = props.setting.readonly
+}
+if(props.readonly!==undefined ){
+    readonly.value = props.readonly
+}
+// const columns = ref(props.columns)
+// for(let i=0;i<props.columns.length;i++){
+//     if(columns.value[i].title ===undefined){
+//         columns.value[i].title=columns.value[i].field
+//     }
+// }
+const getChildFieldSetting=(field:string)=>{
+    return props.getField(`${props.setting.path}/items/properties/${field}`)
+}
+const getInstancePath=(index:number,field:string)=>{
+    return `${props.setting.instancepath}/${index}/${field}`
+}
+
+const deleteRow=(index: number)=>{
+    if(modelValue.value){
+        modelValue.value.splice(index,1)
+    }    
+}
+const addNew = () => {
+    const field = props.setting.path.split('/').at(-1)    
+    props.setting.document[`add${field}`]()
+}
+/** 
+ * 1. support array with field to label
+ * 2. auto add edit button
+ * 3. option readonly or not readonly
+ * 4. 
+ */
+
+</script>

package/templates/nuxt/components/simpleApp/{SimpleAppText.vue.eta → pending/SimpleAppText.vue}

@@ -1,8 +1,6 @@
 
 <template>
     <FieldContainer :hidelabel="hidelabel" v-model="modelValue" :label="label" :description="description" :setting="setting" :instancepath="instancepath" :error="error" #default="slotprops">        
-       
-        
         <InputText v-if="slotprops.error"
             class="simpleapp-inputfield simpleapp-invalid-input"
             :id="slotprops.uuid"

package/templates/nuxt/composables/getOpenApi.generate.ts.eta

@@ -1,6 +1,37 @@
+/**
+ * This file was automatically generated by simpleapp generator during initialization.
+ * DO NOT MODIFY IT BY HAND.
+ * last change 2023-09-09
+ * author: Ks Tan
+ */
+ 
 import * as o from "../simpleapp/generate/openapi";
 import axios from 'axios'
+export const getDocumentApi = (apiname: string): any => {
+  //const { csrf } = useCsrf()    
+  //axios.defaults.headers.common = {"CSRF-TOKEN": csrf};
+  const route = useRoute();
 
-export const getApi=()=>{
+  const config: o.Configuration = {
+    basePath: `${useRuntimeConfig().public.APP_URL}/api/${route.params.xorg}`,
+    isJsonMime: () => true,
+  };
+  const docsOpenapi: any = {
+            <% for(let i=0;i<it.modules.length; i++){ %>
+                '<%=it.modules[i].docname.toLowerCase()%>': new o.<%=it.modules[i].doctype.toUpperCase()%>Api(config),                
+              <%}%>
+          };
+  if (!docsOpenapi[apiname]) {
+    console.error(
+      `api for '${apiname}' does not exists, most probably define wrong x-foreignkey`,
+    );
+    return undefined;
+  } else {
+    return docsOpenapi[apiname];
+  }
+};
+
+
+export const getAllApi=()=>{
     return o
 }

package/templates/nuxt/layouts/default.vue.eta

@@ -4,7 +4,7 @@
 <template>
     <div>
         <HeaderBar />
-        <Invitation/>
+        <UserInvitation/>
         <slot></slot>
     </div>
 </template>

package/templates/nuxt/layouts/documentlist.vue.eta

@@ -148,8 +148,8 @@ watch(()=> useRoute().meta ,(newvalue,oldvalue)=>{
     <div>
 
         <HeaderBar />
-        <Invitation/>      
-         <DocumentDatatable :value="recordlist" :columns="tablecolumns" :title="String(useRoute().meta.name)"> 
+        <UserInvitation/>      
+         <TableDocuments :value="recordlist" :columns="tablecolumns" :title="String(useRoute().meta.name)"> 
             <template #toolbar>
                 <div class="w-full text-left">
                     <slot>
@@ -162,10 +162,10 @@ watch(()=> useRoute().meta ,(newvalue,oldvalue)=>{
             </template>
             <Column header=" ">
                 <template #body="{index,data}">                    
-                        <Button @click="goTo(String(useRoute().meta.documentName),data._id)" icon="pi pi-pencil" class="bg-primary-600 hover:bg-primary-400 text-white" >Edit</Button>                    
+                        <Button @click="goTo(String(useRoute().meta.documentName),data._id)" icon="pi pi-pencil" class="btn btn-primary" >Edit</Button>                    
                 </template>
             </Column>
-        </DocumentDatatable>  
+        </TableDocuments>  
         <!--      
         <DebugDocumentData v-model="data"/>
         -->