@simitgroup/simpleapp-generator 1.1.0 → 1.1.2

package/templates/nuxt/components/user/UserProfileListItem.vue.eta

@@ -1,64 +1,64 @@
 <template>
-  <!-- <ul role="list" class="divide-y divide-gray-100">
-    <li v-for="person in people" :key="person.email" class="flex justify-between gap-x-6 py-5"> -->
-      <div class="flex justify-between gap-x-6 py-5 cursor-pointer">
-        <div class="flex min-w-0 gap-x-4">
-          <img class="h-12 w-12 flex-none rounded-full bg-gray-50" :src="`${getAvatarLink(data.email,32)}`" alt="" />
-          <div class="min-w-0 flex-auto">
-            <p class="text-sm font-semibold leading-6 text-gray-900">{{ data.fullName }}</p>
-            <p class="mt-1 truncate text-xs leading-5 text-gray-500">{{ data.email }}</p>
-          </div>
+<!-- <ul role="list" class="divide-y divide-gray-100">
+  <li v-for="person in people" :key="person.email" class="flex justify-between gap-x-6 py-5"> -->
+    <div class="flex justify-between gap-x-6 py-5 cursor-pointer">
+      <div class="flex min-w-0 gap-x-4">
+        <img class="h-12 w-12 flex-none rounded-full bg-gray-50" :src="`${getAvatarLink(data.email,32)}`" alt="" />
+        <div class="min-w-0 flex-auto">
+          <p class="text-sm font-semibold leading-6 text-gray-900 dark:text-gray-200">{{ data.fullName }}</p>
+          <p class="mt-1 truncate text-xs leading-5 text-gray-500 dark:text-gray-400">{{ data.email }}</p>
         </div>
-        <div class="hidden shrink-0 sm:flex sm:flex-col sm:items-end">
-          
-          <div v-if="isOnline" class="mt-1 flex items-center gap-x-1.5">
-            <div class="flex-none rounded-full bg-emerald-500/20 p-1">
-              <div class="h-1.5 w-1.5 rounded-full bg-emerald-500" />
-            </div>
-            <p class="text-xs leading-5 text-gray-500">Online</p>
+      </div>
+      <div class="hidden shrink-0 sm:flex sm:flex-col sm:items-end">
+        
+        <div v-if="isOnline" class="mt-1 flex items-center gap-x-1.5">
+          <div class="flex-none rounded-full bg-emerald-500/20 p-1">
+            <div class="h-1.5 w-1.5 rounded-full bg-emerald-500" />
           </div>
-          <p v-else class="mt-1 text-xs leading-5 text-gray-500">            
-            <span v-if="datedifferent.get('years')>0">{{ datedifferent.get('years') }} year(s)</span>
-            <span v-if="datedifferent.get('months')>0">{{ datedifferent.get('months') }} month(s)</span>
-            <span v-if="datedifferent.get('days')>0">{{ datedifferent.get('days') }} day(s)</span>
-            <span v-if="datedifferent.get('hours')>0">{{ datedifferent.get('hours') }} Hour(s)</span>
-            <span v-if="datedifferent.get('minutes')>0">{{ datedifferent.get('minutes') }} min(s)</span>                        
-          </p>          
-          <p class="text-sm text-right leading-6 text-gray-400 w-[120px] truncate ...">
-            {{ data.description }}
-          </p>
+          <p class="text-xs leading-5 text-gray-500 dark:text-gray-400">Online</p>
         </div>
+        <p v-else class="mt-1 text-xs leading-5 text-gray-500">            
+          <span v-if="datedifferent.get('years')>0">{{ datedifferent.get('years') }} year(s)</span>
+          <span v-if="datedifferent.get('months')>0">{{ datedifferent.get('months') }} month(s)</span>
+          <span v-if="datedifferent.get('days')>0">{{ datedifferent.get('days') }} day(s)</span>
+          <span v-if="datedifferent.get('hours')>0">{{ datedifferent.get('hours') }} Hour(s)</span>
+          <span v-if="datedifferent.get('minutes')>0">{{ datedifferent.get('minutes') }} min(s)</span>                        
+        </p>          
+        <p class="text-sm text-right leading-6 text-gray-400 w-[120px] truncate ...">
+          {{ data.description }}
+        </p>
       </div>
-    
+    </div>
+  
 </template>
 
 <script setup lang="ts">
 import {computed} from 'vue'
 import moment from 'moment'
 const props = defineProps<{
-  data:any
+data:any
 }>()
 
 
 
 const datedifferent = computed(()=>{  
-  const data = moment.duration(differentTime.value)
-  return data
+const data = moment.duration(differentTime.value)
+return data
 })
 const differentTime =  computed(()=>{
-    const lasttime = new Date(props.data.lastActivity).getTime()
-    const current = new Date().getTime()
-    const result  =  current - lasttime
-    return result
+  const lasttime = new Date(props.data.lastActivity).getTime()
+  const current = new Date().getTime()
+  const result  =  current - lasttime
+  return result
 })
 const isOnline = computed(()=>{
-  if(props.data.lastActivity) {
-    const diffminutes = differentTime.value/ 1000/60
-    return diffminutes < 1
-  }else{
-    return false
-  }
-  
+if(props.data.lastActivity) {
+  const diffminutes = differentTime.value/ 1000/60
+  return diffminutes < 1
+}else{
+  return false
+}
+
 })
 
 

package/templates/nuxt/components/user/UserTenantPicker.vue.eta

@@ -1,16 +1,18 @@
 <template>
-    <card>
+    <div v-if="alltenants" v-for="tenant in alltenants">
+    <card  :pt="{ header:{class:'text-xl text-gray-600'}}">
+        
         <template #header>
-            <h1 class="font font-bold text text-gray-700">{{ tenant.tenantName }}</h1>
+            {{tenant.tenantName }}
         </template>
         <template #content>   
             
             <ul >
-                <li v-for="o in orglist">
-                    <h1>{{ o.orgName }}</h1>
+                <li v-for="o in getOrglist(tenant)">
+                    <h1 class="subtitle-text">{{ o.orgName }}</h1>
                     <ul role="list" class="divide-y divide-gray-100 rounded-md border border-gray-200">
-                        <li v-for="b in branchlist"   class="flex items-center justify-between py-4 pl-4 pr-5 text-sm leading-6">
-                            <NuxtLink :href="`/${b.xOrg }`"  v-if="o.orgId==b.orgId" :external="true" class="hover:bg-primary-100">                    
+                        <li v-for="b in getBranchlist(tenant)"   class="w-full items-center justify-between py-4 pl-4 pr-4  text-sm route-link-list">
+                            <NuxtLink :href="`/${b.xOrg }`"  v-if="o.orgId==b.orgId" :external="true" >                    
                                 <div class="flex w-full flex-1 items-center ">
                                     <!-- <i class="pi pi-sitemap"></i> -->
                                     <p class="flex-1 flex-shrink-0 font-bold text-primary-600 ">
@@ -53,23 +55,33 @@
            </ul> -->
         </template>
     </card>
+    </div>
 </template>
 
 <script setup lang="ts">
 import _ from 'lodash'
-const props = defineProps<{
-   tenant:any
-}>()
-const branchlist = computed(()=>props.tenant.permissions)
+const profileapi = getAllApi().PROFILEApi;
+const alltenants = ref() 
 
 
-const orglist = computed(()=>_.uniqBy(branchlist.value,'orgId')
-        .map((item:any)=>({ orgId:item.orgId,orgCode:item.orgCode,orgName:item.orgName}) ) )
 
 
+const loadAllTenants = async () =>{
+    const api = new profileapi(undefined,useRuntimeConfig().public.API_URL,)
+    alltenants.value =  (await api.getAllTenants()).data
+}
 
-onMounted(()=>{
+// const props = defineProps<{
+//    tenant:any
+// }>()
+const getBranchlist = (tenant:any)=>tenant.permissions
 
-})
 
+const getOrglist = (tenant:any) => _.uniqBy(getBranchlist(tenant),'orgId')
+        .map((item:any)=>({ orgId:item.orgId,orgCode:item.orgCode,orgName:item.orgName}) ) 
+
+
+onNuxtReady(()=>{
+    loadAllTenants()
+})
 </script>

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

@@ -1,4 +1,4 @@
 import {getAllDocuments} from '~/simpleapp/generate/commons/documents'
 export const getDocument = (docname:string) =>{
-        return getAllDocuments().find((item)=>item.docName==docname)?.docClass
+        return getAllDocuments().find((item)=>item.docName==docname)   //?.docClass
 }

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

@@ -24,4 +24,7 @@ export const getPageBaseUrl = (resourcename:string) =>{
  */
 export const canPerform = (resource:string,action:string):boolean =>{
     return getUserStore().canPerform(resource,action)
-}
+}
+
+export const getProfileEmail = () => getUserProfile().email
+export const getProfileFullName = () => getUserProfile().fullName

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

@@ -1,4 +1,6 @@
+import plugin from 'primevue/config';
 import {Md5} from 'ts-md5'
+
 export const camelCaseToWords = (s: string) =>{
     const result = s.replace(/([A-Z])/g, ' $1');
     return result.charAt(0).toUpperCase() + result.slice(1);
@@ -13,4 +15,6 @@ export const getAvatarLink = (email:string, size:number):string=>{
 }
 
 export const toLocalDate = (dateiso8601:string)=> new Date(String(dateiso8601)).toLocaleDateString()
-export const t = (txt:string):string=> camelCaseToWords(txt)
+export const t = (txt:string,options?:any):string => useNuxtApp().$i18n.t(txt,options)
+
+ 

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

@@ -0,0 +1 @@
+export const getAvatarColor = computed(()=>useColorMode().preference == 'dark' ? '#ffffff' : '#000000')

package/templates/nuxt/i18n.config.ts.eta

@@ -0,0 +1,5 @@
+export default defineI18nConfig(() => ({
+    legacy: false,
+    locale: 'df',
+    
+  }))

package/templates/nuxt/lang/cn.ts._eta

@@ -0,0 +1,9 @@
+export default {
+    welcome:'欢迎',
+    welcomeSimpleApp: '你好,欢迎来到 SimpleApp',
+    changeHomePageMsg: '改了这面',
+    category: '类别',
+    /*manually fix from df.ts.eta*/
+}
+
+// or

package/templates/nuxt/lang/df.ts.eta

@@ -0,0 +1,18 @@
+export default {
+    welcome: 'Welcome',
+    create: 'Create',
+    profile: 'Profile',
+    logout: 'logout',
+    language: 'Language',
+    theme: 'Theme',
+    welcomeSimpleApp: 'Welcome To SimpleApp',
+    changeHomePageMsg: '{fullName}, it is product front page and by right you shall replace it with something else.',
+    realman:'Real man code with simpleapp',
+
+    //auto generate from schema
+    <% for(let i=0; i< it.allfields.length; i++){ %>
+    <% let f = it.allfields[i] %>
+        <%=f%> : '<%= camelCaseToWords(f) %>',
+    <%}%>    
+
+}

package/templates/nuxt/lang/en.ts._eta

@@ -0,0 +1,6 @@
+export default {
+      welcome: 'Welcome',
+      welcomeSimpleApp: 'Welcome To SimpleApp',
+      changeHomePageMsg: 'It is product front page and by right you shall replace it with something else.',
+      category: 'Category'
+    }

package/templates/nuxt/layouts/{documentlist.vue.eta → documentlist.vue.eta.disabled}

@@ -149,7 +149,7 @@ watch(()=> useRoute().meta ,(newvalue,oldvalue)=>{
 
         <HeaderBar />
         <UserInvitation/>      
-         <TableDocuments :value="recordlist" :columns="tablecolumns" :title="String(useRoute().meta.name)"> 
+         <TableDocuments :value="recordlist" :columns="tablecolumns" :title="t(useRoute().meta.name as string)"> 
             <template #toolbar>
                 <div class="w-full text-left">
                     <slot>

package/templates/nuxt/nuxt.config.ts.eta

@@ -7,11 +7,11 @@
 import path from 'path'
 export default defineNuxtConfig({
   // colorMode: {}  ,  
-  runtimeConfig:{    
+  runtimeConfig:{     
     public:{
       APP_URL: process.env.APP_URL,
       API_URL: process.env.API_URL,
-      DEBUGDATA: process.env.DEBUGDATA,      
+      DEBUGDATA: process.env.DEBUGDATA,        
     }
   },
   vite: {
@@ -26,14 +26,51 @@ tailwindcss: {
     // Options
   },
   modules: [
+    // "@hebilicious/authjs-nuxt",
+    '@nuxtjs/i18n',
     '@sidebase/nuxt-auth',
     'nuxt-primevue',
     // "nuxt-security",     //temporary avoid nuxt-security cause cors
     '@vueuse/nuxt', 
     '@nuxt/ui',
     '@nuxtjs/tailwindcss',
-    '@pinia/nuxt'
+    ['@pinia/nuxt',{
+      autoImports: [
+        // automatically imports `defineStore`
+        'defineStore', // import { defineStore } from 'pinia'
+        ['defineStore', 'definePiniaStore'], // import { defineStore as definePiniaStore } from 'pinia'
+      ],
+    }],
+    '@nuxtjs/color-mode',
+    
+
   ],  
+  i18n: {
+    lazy: true,
+    langDir: "lang/",
+    strategy: "no_prefix",
+    locales: [
+      {
+        code: "df",
+        iso: "df",
+        name: "Default",
+        file: "df.ts",
+      },
+      {
+        code: "en",
+        iso: "en",
+        name: "English",
+        file: "en.ts",
+      },
+      {
+        code: "cn",
+        iso: "cn",
+        name: "Chinese",
+        file: "cn.ts",
+      },
+    ],
+    defaultLocale: "df",    
+  },
   primevue: {
     options: {
       unstyled: true,
@@ -52,13 +89,9 @@ tailwindcss: {
     
 
   },
-  pinia: {
-    autoImports: [
-      // automatically imports `defineStore`
-      'defineStore', // import { defineStore } from 'pinia'
-      ['defineStore', 'definePiniaStore'], // import { defineStore as definePiniaStore } from 'pinia'
-    ],
-  },
+  // pinia: {
+
+  // },
   auth: {
     globalAppMiddleware: true
   },
@@ -81,12 +114,12 @@ tailwindcss: {
     // },
     //csrf: true,   // been force to off csrf cash it crash with nuxt-auth
   // },
-  ssr: false,
-  content: [
-      "./index.html",
-      "./src/**/*.{vue,js,ts,jsx,tsx}",
-      "./node_modules/primevue/**/*.{vue,js,ts,jsx,tsx}"
-  ],
+  // ssr: false,
+  // content: [
+  //     "./index.html",
+  //     "./src/**/*.{vue,js,ts,jsx,tsx}",
+  //     "./node_modules/primevue/**/*.{vue,js,ts,jsx,tsx}"
+  // ],
   css: [ 
     'primeicons/primeicons.css',
     path.resolve(__dirname,'./assets/css/style.css')

package/templates/nuxt/pages/[xorg]/docnoformat.vue.eta

@@ -1,24 +1,19 @@
 <template>
   <div class="grid grid-cols-5 p-4">
-    <ListView :list="getAllDocFormats()" 
-      idField="docType" 
-      titleField="docName" 
+    <ListView
+      :list="getAllDocFormats()"
+      idField="docType"
+      titleField="docName"
       subTitleField="docType"
       :withFilter="true"
-      :url="getDocumentUrl('docnoformat')"></ListView>
+      :url="getDocumentUrl('docnoformat')"
+    ></ListView>
     <div class="col-span-4">
       <NuxtPage></NuxtPage>
     </div>
   </div>
-  
 </template>
-<script setup lang="ts">  
-
-  
-
-</script>
-
-<!-- <script setup lang="ts">
+<script setup lang="ts">
 /**
  * This file was automatically generated by simpleapp everytime regenerate code.
  * delete file "delete-me-for-avoid-override" if you want to modify this file and
@@ -27,74 +22,9 @@
  * author: Ks Tan
  */
 
-import { CellSetting } from "~/types";
-const { $DocnoformatDoc } = useNuxtApp();
-const doc = $DocnoformatDoc();
-const data = doc.getReactiveData();
-const visible = ref(false);
-
-definePageMeta({
-  name: "Docnoformat",
-  layout: "documentlist",
-  documentName: "docnoformat",
-  columns: [
-    {
-      title: t("branch"),
-      field: "branch",
-      rendererName: "RendererForeignKey",
-      rendererSetting: { collection: "branch" },
-    },
-    "docNoFormatNo",
-    "docNoFormatName",
-    "docNoType",
-    "docNoPattern",
-    "nextNumber",
-  ] as CellSetting[],
-  sorts: [["docNoFormatNo", "asc"]],
-});
-
-const newData = () => {
-  doc.setNew();
-  goTo(doc.getDocName(), "new");
-  visible.value = true;
-};
-
-const exitRecord = () => {
-  goTo(doc.getDocName());
-  console.log("exitRecord");
-};
-
-watch(
-  () => useRoute().fullPath,
-  (newvalue, oldvalue) => {
-    visible.value = useRoute().params.id ? true : false;
-  },
-);
-
-onNuxtReady(() => {
-  visible.value = useRoute().params.id ? true : false;
+ definePageMeta({
+  name: "docnoformat",
+  title: "docnoformat",
 });
 </script>
-<template>
-  <div>
-    <Button
-      class="bg-primary-600 hover:bg-primary-400 text-white"
-      v-if="canPerform(String(useRoute().meta.name), 'create')"
-      @click="newData"
-      >New</Button
-    >
-    <Dialog
-      v-model:visible="visible"
-      :pt="{
-        root: { class: 'w-full h-full bg-white' },
-        headertitle: { class: 'm-2 ml-6 text-2xl font-bold' },
-      }"
-      modal
-      :header="t(doc.getDocName())"
-      :autoZIndex="false"
-      @update:visible="exitRecord"
-    >
-      <NuxtPage />
-    </Dialog>
-  </div>
-</template> -->
+

package/templates/nuxt/pages/[xorg]/organization/[id]/branches/new.vue

@@ -144,6 +144,6 @@ if (bid.value) {
         :setting="o.getField('#/properties/description')"
       />      
     </SimpleAppForm>
-    <DebugDocumentData v-model="data" label="branch" />
+    <DebugDocumentData v-model="data" :label="doc.getDocName()"/>
   </div>
 </template>

package/templates/nuxt/pages/[xorg]/organization.vue.eta

@@ -44,6 +44,13 @@ const refresh = () => {
   $event("RefreshDocumentList", { documentName: doc.getDocName() });
 };
 
+
+  definePageMeta({
+    name: 'organization',
+    title: 'organization'
+  })
+
+
 //branch record update then reload
 $listen("RefreshDocumentList", (data) => {
   console.log("refresh from branch", data.documentName, "==", doc.getDocName());
@@ -56,6 +63,9 @@ if (id) {
   fetchRecord(id.value);
 }
 
+
+
+
 getCurrentOrg();
 </script>
 <template>

package/templates/nuxt/pages/[xorg]/profile.vue.eta

@@ -3,4 +3,7 @@
   </template>
   <script setup lang="ts">
   import profile from '../profile.vue'
+  definePageMeta({
+    title: 'profile'
+  })
   </script>

package/templates/nuxt/pages/[xorg]/user.vue.eta

@@ -129,6 +129,11 @@ $listen("RefreshUser", () => {
 onMounted(() => {
   refreshList();
 });
+
+definePageMeta({
+  name: 'user',
+  title: 'user'
+  })
 </script>
 <template>
   <div class="grid grid-cols-4">

package/templates/nuxt/pages/index.vue._eta

@@ -1,67 +1,30 @@
 <script lang="ts" setup>
 /**
- * This file was automatically generated by simpleapp generator. Every
- * MODIFICATION OVERRIDE BY GENERATEOR
- * last change 2023-10-28
+ * This file was automatically generated by simpleapp generator
+ * CHANGE IT!!
+ * last change 2023-11-12
  * Author: Ks Tan
  */
-
-import _ from "lodash";
-// import InputText from "primevue/inputtext";
-// import Dialog from "primevue/dialog";
-import { ref, Ref } from "vue";
-// import { EventType } from "~/types";
-// import { TenantDoc } from "../simpleapp/docs/TenantDoc";
-// import ProgressSpinner from "primevue/progressspinner";
-// import Panel from "primevue/panel";
-// import Card from "primevue/card";
-// import { AxiosResponse } from "axios";
-import {computed} from 'vue'
-const { $event, $listen, $userstore } = useNuxtApp();
-const branches = ref([]);
-const userprofile = ref();
-const orgList = ref();
-const alltenants = ref()
-
-const loadTenants = async () => {
-  const profileapi = getApi().PROFILEApi;
-    const axiosreturn = await new profileapi(
-      undefined,
-      useRuntimeConfig().public.API_URL,
-    ).getAllTenants();
-    alltenants.value = axiosreturn.data
-};
-
-// $listen("InvitationAccepted", async () => {
-//   loadProfile();
-// });
-
-onMounted(() => {
-  loadTenants();
-
-//   const profileapi = getApi().PROFILEApi;
-});
 </script>
 <template>
-  <div
-    class="mx-4 md:mx-12 py-8 md:py-12 grid place-content-center px-4 md:px-0"
-  >
-    <div class="lg:flex justify-start lg:gap-28">
-      <div class="">
-        <h1 class="font-bold text-5xl text-gray-800 dark:text-white">
-          Welcome To SimpleApp
+  <div class="grid place-content-center">
+    <ClientOnly><div class="flex flex-row">
+      <div class="block">
+        <h1
+          class="font-bold text-3xl md:text-5xl text-gray-800 dark:text-white"
+        >
+          {{ t("welcomeSimpleApp") }}
         </h1>
-        <p class="pt-8 md:pt-4 text-gray-600 dark:text-gray-200">
-          It is product front page and by right you shall replace it with
-          something else.
+        <p class="text-gray-600 dark:text-gray-200">
+          {{ t("changeHomePageMsg",{fullName:getProfileFullName()}) }}
         </p>
-        <div class="mt-8 md:flex justify-start md:gap-4">
+        <div class="">
           <UserButtonCreateTenant></UserButtonCreateTenant>
         </div>
       </div>
-      <div class="pt-8 lg:pt-0">
+      <div class="hidden lg:block">      
         <svg
-          fill="#000000"
+          :fill="getAvatarColor"
           viewBox="0 0 512 512"
           xmlns="http://www.w3.org/2000/svg"
         >
@@ -91,11 +54,11 @@ onMounted(() => {
             </g>
           </g>
         </svg>
-        <p class="text-gray-500">Real man code with simpleapp</p>
+        <p class="text-gray-500 dark:text-gray-200">{{ t('realman') }}</p>
       </div>
-    </div>
-    <div  class="grid grid-cols-2">
-      <UserTenantPicker v-for="tenant in alltenants" :tenant="tenant" class="col col-span-1"></UserTenantPicker>
+    </div></ClientOnly>
+    <div class="grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3">
+      <UserTenantPicker></UserTenantPicker>
     </div>
   </div>
 </template>