@simitgroup/simpleapp-generator 1.1.28 → 1.2.0

package/README.md

@@ -33,6 +33,7 @@ SimpleApp generator is a typescript code generator for convert jsonschemas becom
 3. [frontend walk through](./docs/frontend.md)
 4. [End to End test](./docs/test.md)
 5. [BPMN walk through](./docs/bpmn.md)
+6. [Language](./doc/language.md)
 
 # Quick start
 1. Simpleapp implement database transaction, and require mongodb cluster, below setup 3 nodes

package/ReleaseNote.md

@@ -1,3 +1,14 @@
+[1.2.0]
+1. lot of house keeping
+2. frontend more stable login using keycloak
+3. reduce too much console log at backend
+4. build frontend/lang/df.ts instead of directly edit
+5. some improvement of simpleappinput, like add more probs and reduce console error
+6. simplified generated frontend page by using centralize tool bar
+7. support document status
+8. give frontend freedom to edit header bar and menu bar
+
+
 [1.1.24]
 1. fix cannot create tenant due to fullname miss-spell
 2. fix viewer create record auto redirect

package/docs/language.md

@@ -0,0 +1,19 @@
+# Introduction
+
+To support multiple language in simpleapp project, you shall understand basic ideal of:
+1. i18n
+2. file & folder structures related to languages 
+3. how to use language key in source code
+
+# i18n
+Simpleapp generator use @nuxt/i18n page, you can learn basic ideal from it
+
+# file & folders
+After project initialize correctly, everything is preconfigure as nuxt3 i18n practises. However, you shall know
+1. you shall define all default language key/message in `project-root/lang/default.json`, it will later copy into `frontend/lang/df.ts`.
+2. `fontend/lang/df.ts` consider as "unpolish" language file, will be override every time to frontend code regenerate, you shall maintain all language key as (1)
+3. after project completed, developer may pass `frontend/lang/df.ts` to suitable person (or chatgpt) to create proper `en.ts`, `cn.ts`
+4. put after translated file (`en.ts, cn.ts,...`) into `frontend/lang`
+
+# how to use language key
+in source code, just use syntax `t('yourkey')`, it will auto pick correct language file and language key

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simitgroup/simpleapp-generator",
-  "version": "1.1.28",
+  "version": "1.2.0",
   "description": "frontend nuxtjs and backend nests code generator using jsonschema",
   "main": "dist/index.js",
   "scripts": {

package/src/framework.ts

@@ -71,7 +71,7 @@ export const prepareNest = (callback:Function)=>{
     if(!fs.existsSync(`${targetfolder}/.env`)){
 
     
-        exec(`cd ${targetfolder};pnpm install --save @nestjs/event-emitter dayjs bpmn-server@2.0.6-alpha2 moment @casl/ability jsonpath yaml lodash @types/lodash nest-keycloak-connect keycloak-connect bpmn-client @nestjs/serve-static jsonwebtoken axios @darkwolf/base64url json-schema @wearenova/mongoose-tenant @nestjs/swagger @nestjs/mongoose mongoose  ajv ajv-formats ajv-errors @nestjs/config`,async (error, stdout, stderr)=>{
+        exec(`cd ${targetfolder};pnpm install --save @nestjs/event-emitter dayjs bpmn-server@2.0.8-alpha2 moment @casl/ability jsonpath yaml lodash @types/lodash nest-keycloak-connect keycloak-connect bpmn-client @nestjs/serve-static jsonwebtoken axios @darkwolf/base64url json-schema @wearenova/mongoose-tenant @nestjs/swagger @nestjs/mongoose mongoose  ajv ajv-formats ajv-errors @nestjs/config`,async (error, stdout, stderr)=>{
             // log.info(`dependency installed`)
             if(!error){
                 // fs.mkdirSync(`${targetfolder}/public_html`,{recursive:true})

package/templates/nest/src/simpleapp/generate/commons/middlewares/tenant.middleware.ts.eta

@@ -27,7 +27,7 @@ import { UserContext } from '../user.context';
 @Injectable()
 export class TenantMiddleware implements NestMiddleware {
   protected defaultxorg = Base64URL.encodeText('0-0-0');
-  protected excludeXorgs = ['/profile', '/profile/tenant'];
+  protected excludeXorgs = ['/profile', '/profile/tenant','/profile/session'];
   protected logger = new Logger();
   protected transController;
   constructor(

package/templates/nest/src/simpleapp/services/docno.service.ts.eta

@@ -71,7 +71,7 @@ export class DocnoformatService extends DocnoformatProcessor {
      undefined,
      {default:'desc'}
     );
-    console.log('searchresult',searchresult);
+    //console.log('searchresult',searchresult);
     let data: any = [];
     for (let i = 0; i < searchresult.length; i++) {
       const s = searchresult[i];

package/templates/nuxt/app.vue.eta

@@ -12,6 +12,7 @@ watch(()=>useRoute().params['xorg'],(newval,oldvalue)=>{
 <template>
   <div>    
     <NuxtLayout>      
+      <SessionBlock/>
       <EventDocumentViewer></EventDocumentViewer>      
       <EventDecision/>
       <EventNotification/>

package/templates/nuxt/components/session/SessionBlock.vue.eta

@@ -0,0 +1,49 @@
+<template>
+
+  <Dialog  v-model:visible="showDialog" modal :pt="{root:{class:'w-1/3'}}"
+    :header="t('sessionExpire')">          
+        <div>
+          {{ t('reloginMessage') }}
+        </div>
+        <div class="text-right">
+          <Button @click="relogin" class="btn-primary">
+            {{ t('login') }}
+          </Button>
+        </div>
+        
+      
+      </Dialog>
+  
+  
+    
+      
+  </template>
+  <script lang="ts" setup>
+  import {PROFILEApi} from '~/simpleapp/generate/openapi'
+  const showDialog = ref(false)
+  const tabvisible = ref('')
+  
+  
+  addEventListener("visibilitychange", async (event) => {
+    tabvisible.value = document.visibilityState  
+    
+    if(document.visibilityState  ==='visible'){
+      //focus tab, try session still active?    
+      const result = await getApiSession()    
+      if(result){
+        showDialog.value=false
+      }else{
+        showDialog.value=true
+      }
+    }
+  });
+  
+  
+  const relogin= ()=>{
+      window.open(useRuntimeConfig().public.APP_URL+'/relogin')
+  }
+  
+  
+  
+  
+  </script>

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

@@ -14,14 +14,14 @@
         <InputText type="date" :pt="pt" 
             v-else-if="inputType == SimpleAppInputType.date"            
             :inputId="slotprops.uuid" :path="setting.instancepath"
-            v-model="(datevalue as string)" @update:modelValue="updateDate" :readonly="isReadonly"
+            v-model="datevalue" @update:modelValue="updateDate" :readonly="isReadonly"
             :placeholder="placeholder"
             v-bind="(componentProps as InputTextProps)"/>
         <!-- calendar component -->        
         <Calendar type="date" :pt="pt" class="flex flex-col"
             v-else-if="SimpleAppInputType.calendar==inputType"
             :inputId="slotprops.uuid" :path="setting.instancepath"
-            v-model="(datevalue as string)" @update:modelValue="updateDate" :readonly="isReadonly"
+            v-model="datevalue" @update:modelValue="updateDate" :readonly="isReadonly"
             :placeholder="placeholder"
             v-bind="(componentProps as CalendarProps)"/>
         <!-- time component -->        

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

@@ -1,7 +1,7 @@
 /**
  * This file was automatically generated by simpleapp generator during initialization.
  * DO NOT MODIFY IT BY HAND.
- * last change 2023-09-09
+ * last change 2024-01-24
  * author: Ks Tan
  */
  
@@ -16,7 +16,10 @@ const getAxiosConfig = () => {
   };
   return config
 }
-export const getApiSession = async ()=> await (new o.PROFILEApi(getAxiosConfig())).getSession()
+export const getApiSession = async ()=> {
+  const res = await (new o.PROFILEApi(getAxiosConfig(),undefined,useNuxtApp().$axios)).getSession()
+  return res
+}
 
 export const getDocumentApi = (documentName: string): any => {
   //const { csrf } = useCsrf()    
@@ -25,11 +28,53 @@ export const getDocumentApi = (documentName: string): any => {
 
   const config = getAxiosConfig()
   const docsOpenapi: any = {
-    <%for(let i=0; i<it.modules.length;i++){ %>
-    <% const d = it.modules[i] %>
-    '<%= d['docname'].toLowerCase() %>': new o.<%= d['doctype'].toUpperCase() %>Api(config),
+            'tenant': new o.TENANTApi(config),
+
+            'organization': new o.ORGApi(config),
+
+            'branch': new o.BRANCHApi(config),
+
+            'permission': new o.PERMApi(config),
+
+            'autoincreament': new o.AUTOINCApi(config),
+
+            'docnoformat': new o.DOCNOApi(config),
+
+            'category': new o.CATApi(config),
+
+            'customer': new o.CUSTApi(config),
+
+            'enrollment': new o.ENROLLApi(config),
+
+            'invoice': new o.INVApi(config),
+
+            'level': new o.LVLApi(config),
+
+            'payment': new o.PAYApi(config),
+
+            'paymentmethod': new o.PAYMETHODApi(config),
+
+            'period': new o.PERIODApi(config),
+
+            'product': new o.PRDApi(config),
+
+            'room': new o.ROOMApi(config),
+
+            'schedule': new o.SCHEDULEApi(config),
+
+            'school': new o.SCHOOLApi(config),
+
+            'student': new o.STUApi(config),
+
+            'studentgroup': new o.STUGROUPApi(config),
+
+            'teacher': new o.TEACHERApi(config),
+
+            'tuitionclass': new o.TUITIONApi(config),
+
+            'user': new o.USERApi(config),
 
-    <%}%>              
+                  
     };
   if (!docsOpenapi[documentName]) {
     console.error(

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

@@ -7,11 +7,14 @@ export const reloadUserStore = async () =>{
     await $userstore.loadRemoteUserInfo()
 }
 
-export const getUserProfile =  () =>{
+export const getUserProfile =  () =>{    
+    const userstore = getUserStore()
+    
     return getUserStore().getUserInfo()
 }
+
 export const getCurrentXorg = () =>{
-    return getUserStore().getCurrentXorg()
+    return  (useRoute().params.xorg) ? String(useRoute().params.xorg) : undefined            
 }
 export const getPageBaseUrl = (resourcename:string) =>{
     return `/${getCurrentXorg()}/${resourcename}`;

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

@@ -1,22 +1,11 @@
-export const logout = async () => {
+export const logout = async (redirecturl:string='') => {
+    const redirectdata = encodeURIComponent(redirecturl)
     const { signOut } = useAuth();    
     const { data } = await <any>useFetch('/api/auth/logout');    
-    const signoutres = await signOut({redirect:false});
-    console.log("signout data", signoutres)
-    // console.log(data.value)
-    if(data['value']&& data['value']['path']){
-        // const logoutkeycloak = await <any>useFetch(data.value.path); 
-        // console.log('logoutkeycloak',data['value']['path'])
-        if(data['value']['path']){
-            navigateTo(data.value.path, { external: true })
-        }
-        // 
-    }
+    // remove session
+    await signOut({redirect:false});
+    let addPath = encodeURIComponent(`/login?callbackUrl=${redirectdata}`);    
+    const tourl= `${data.value.path}${addPath}`
+    navigateTo(tourl, { external: true })
     
-    // console.log('logout data',data.value)
-    
-    
-    // const addPath = encodeURIComponent("/login");
-    //
-  
-};
+};

package/templates/nuxt/middleware/30.acl.global.ts.eta

@@ -1,18 +1,18 @@
 /**
  * This file was automatically generated by simpleapp generator. Every
  * MODIFICATION OVERRIDE BY GENERATEOR
- * last change 2023-10-28
+ * last change 2024-01-23
  * Author: Ks Tan
  */
 import { getUserProfile } from './../composables/getUserStore.generate';
 import  {MenuData} from '~/types'
 export default defineNuxtRouteMiddleware((to, from) => {  
   
+  // return true;
   const userprofile = getUserProfile()
-  
-
-  //is public resource
-  if( getPublicResource(String(to.params['xorg'])).filter((item:MenuData)=>to.fullPath === item.url)){        
+  if(to.path=='/relogin'){
+    return true
+  }else if( getPublicResource(String(to.params['xorg'])).filter((item:MenuData)=>to.fullPath === item.url)){        
     return true
   }// no permission control needed yet    
     else if(!to.params['xorg']){

package/templates/nuxt/nuxt.config.ts._eta

@@ -33,7 +33,7 @@ tailwindcss: {
     'nuxt-primevue',
     // "nuxt-security",     //temporary avoid nuxt-security cause cors
     '@vueuse/nuxt', 
-    '@nuxt/ui',
+    //'@nuxt/ui',
     '@nuxtjs/tailwindcss',
     ['@pinia/nuxt',{
       autoImports: [

package/templates/nuxt/pages/login.vue.eta

@@ -1,27 +1,30 @@
+<template>
+  <NuxtPage />
+</template>
 <script setup lang="ts">
 /**
  * This file was automatically generated by simpleapp generator. Every
  * MODIFICATION OVERRIDE BY GENERATEOR
- * last change 2023-10-28
+ * last change 2024-01-22
  * Author: Ks Tan
  */
-definePageMeta({
-  name: "Login",
+
+definePageMeta({ 
+  name: 'Login',
   auth: false,
-});
+})
 
-// const route = useRoute();
-const { signIn } = useAuth();
-onMounted(async () => {
-  // logout();
-  let callbackUrl = "/";
-  // console.log("redirect to login");
-  // if(route.params.redirect) {
-  //     callbackUrl = <string>route.params.redirect;
-  // }
-  await signIn("keycloak", { callbackUrl: callbackUrl });
-});
-</script>
-<template>
-  <NuxtPage />
-</template>
+const route = useRoute();
+const { signIn } = useAuth()
+const callbackUrl = ref('')
+onMounted(async () => {  
+  if(route.query.callbackUrl) {
+      callbackUrl.value = <string>route.query.callbackUrl;      
+  }else{
+    callbackUrl.value = '/'
+  }
+  callbackUrl.value = decodeURIComponent(callbackUrl.value)
+  console.log("callbackUrlcallbackUrlcallbackUrl",callbackUrl.value)
+  await signIn('keycloak', { callbackUrl: callbackUrl.value })
+})
+</script>

package/templates/nuxt/pages/relogin.vue.eta

@@ -0,0 +1,6 @@
+<template>
+    <div>relogin success</div>
+</template>
+<script lang="ts" setup>
+window.close()
+</script>

package/templates/nuxt/plugins/10.simpleapp-event.ts.eta

@@ -31,8 +31,7 @@ export default defineNuxtPlugin( async(nuxtApp) => {
         
       }
       else if(error.response.status==401){        
-        console.error("axios 401 session expired, redirect to logout page1")
-        logout()
+        console.error("axios 401 session expired, pop up for relogin")
       }else if(error.response && error.response.status){
         console.error("have error response")
         createError({

package/templates/nuxt/plugins/20.simpleapp-userstore.ts.eta

@@ -1,7 +1,7 @@
 /**
  * This file was automatically generated by simpleapp generator. Every
  * MODIFICATION OVERRIDE BY GENERATEOR
- * last change 2023-10-28
+ * last change 2024-01-23
  * Author: Ks Tan
  */
 import { defineNuxtPlugin } from "#app";
@@ -11,8 +11,7 @@ import _ from 'lodash'
 
 
 export default defineNuxtPlugin( async(nuxtApp) => {
-
-
+    console.log("start plugin 20")
     const useUserStore = defineStore('userstore', {
         state: ()=>({      
           _id: ref(''),  
@@ -91,10 +90,21 @@ export default defineNuxtPlugin( async(nuxtApp) => {
                 return Promise.reject(errdata)
               }
             })            
-          },         
+          },                  
           getCurrentXorg(){
             return  (useRoute().params.xorg) ? String(useRoute().params.xorg) : undefined            
           },
+          async pingSession(){
+            let xorg = this.getCurrentXorg()    
+            let apiurl=''
+            if(xorg===undefined){
+              apiurl = `${useRuntimeConfig().public.APP_URL}/api`
+            }else{
+              apiurl = `${useRuntimeConfig().public.APP_URL}/api/${xorg}`
+            }
+            const {$axios} = useNuxtApp()
+            return await new PROFILEApi(undefined,apiurl,$axios).getSession()
+          },
           async decideInvitation(id:string,decision:string){
             const apiurl = `${useRuntimeConfig().public.APP_URL}/api`
             const {$axios} = useNuxtApp()
@@ -170,12 +180,17 @@ export default defineNuxtPlugin( async(nuxtApp) => {
           }
         }        
       })
-
-      const route = useRoute();      
-      
-      if(route.meta.auth !==false){
+    console.log("after define user store")
+    
+    if( useRoute().meta.auth !==false){
+      if(await useUserStore().pingSession()){
+        console.log("ping session ok")
         await useUserStore().loadRemoteUserInfo()
-      }
+      }else{
+        console.log("No login session", useRoute().path)
+        await logout(useRoute().path)
+      }    
+    }
     
     return {
 

package/templates/nuxt/server/api/auth/[...].ts.eta

@@ -1,12 +1,12 @@
 /**
  * This file was automatically generated by simpleapp generator. Every
  * MODIFICATION OVERRIDE BY GENERATEOR
- * last change 2023-10-28
+ * last change 2024-01-24
  * Author: Ks Tan
  */
 import { NuxtAuthHandler } from "#auth";
 import KeycloakProvider from "next-auth/providers/keycloak";
-
+// import GithubProvider from "next-auth/providers/github";
 
 export default NuxtAuthHandler({
     secret: process.env.AUTH_SECRET_KEY,
@@ -14,7 +14,10 @@ export default NuxtAuthHandler({
         maxAge: 60 * 60 * 24 * 30,
     },
     providers: [
-        
+        // GithubProvider.default({
+        //     clientId: process.env.GITHUB_ID ?? '',
+        //     clientSecret: process.env.GITHUB_SECRET ?? '',
+        // }),
         // @ts-expect-error
         KeycloakProvider.default({
             clientId: process.env.OAUTH2_CLIENTID ?? "",
@@ -28,7 +31,7 @@ export default NuxtAuthHandler({
                 token: `${process.env.OAUTH2_CONFIGURL}/protocol/openid-connect/token`,
                 logout:
                     `${process.env.OAUTH2_CONFIGURL}/protocol/openid-connect/logout?redirect_uri=` +
-                    encodeURIComponent(String(process.env.APP_URL)),
+                    encodeURIComponent(String(process.env.NUXT_PUBLIC_API_BASE)),
             },
             // accessTokenUrl: `${process.env.OAUTH2_CONFIGURL}/protocol/openid-connect/token`,
             // requestTokenUrl: `${process.env.OAUTH2_CONFIGURL}/protocol/openid-connect/token`,
@@ -49,8 +52,8 @@ export default NuxtAuthHandler({
             codeChallengeMethod: "S256",
             redirect: {
                 logout: "/",
-                callback: "/",
-                home: "/",
+                // callback: "/",
+                // home: "/",
             },
         }),
     ],
@@ -58,17 +61,56 @@ export default NuxtAuthHandler({
         signIn: "/login",
     },
     callbacks: {
+        // async redirect({ url, baseUrl }) {
+
+        //     console.log(url, baseUrl)
+        //     return baseUrl
+        // },
         async jwt({ token, account }) {
+            // Persist the OAuth access_token to the token right after signin
             if (account) {
                 token.accessToken = account.access_token;
+                token.refreshToken = account.refresh_token;
+                token.expiresAt = account.expires_at;
+            } else if (Date.now() < (<number>token.expiresAt) * 1000) {
+                return token;
+            }
+
+            // try refresh token
+            const response = await fetch(`${process.env.OAUTH2_CONFIGURL}/protocol/openid-connect/token`, {
+                headers: { "Content-Type": "application/x-www-form-urlencoded" },
+                body: new URLSearchParams({
+                    client_id: process.env.OAUTH2_CLIENTID ?? "",
+                    client_secret: process.env.OAUTH2_CLIENTSECRET ?? "",
+                    grant_type: "refresh_token",
+                    refresh_token: <string>token.refreshToken ?? "",
+                }),
+                method: "POST",
+            })
+
+            const newToken = await response.json();
+
+            if(!response.ok) {
+                /** @todo handle refresh token failed */
+                return token
+            }
+
+            return {
+                ...token,
+                accessToken: newToken.access_token,
+                // record next access token expires time
+                expiresAt: Math.floor(Date.now() / 1000 + newToken.expires_in),
+                // Fall back to old refresh token, but note that
+                // many providers may only allow using a refresh token once.
+                refreshToken: newToken.refresh_token ?? token.refresh_token,
             }
-            return token;
         },
-        async session({ session , token, user }) {
-            const sessiondata:any = {...session}             
+        async session({ session, token, user }) {
+            // console.log("session", session);
+            // Send properties to the client, like an access_token from a provider.
+            const sessiondata:any = {...session}
             sessiondata.accessToken = <string>token.accessToken;
             return sessiondata;
         },
-
     },
-});
+});

package/templates/nuxt/server/api/auth/logout.ts.eta

@@ -1,13 +1,15 @@
 /**
  * This file was automatically generated by simpleapp generator. Every
  * MODIFICATION OVERRIDE BY GENERATEOR
- * last change 2023-10-28
+ * last change 2024-01-24
  * Author: Ks Tan
  */
 export default defineEventHandler(async (event) => {
     const path = `${
         process.env.OAUTH2_CONFIGURL
-    }/protocol/openid-connect/logout?redirect_uri=${encodeURIComponent(process.env.AUTH_ORIGIN??'')}`;
+    }/protocol/openid-connect/logout?redirect_uri=${encodeURIComponent(
+        process.env.AUTH_ORIGIN ?? ""
+    )}`;
 
     return {
         path: path

package/templates/nuxt/types/events.ts.eta

@@ -29,4 +29,5 @@ export type EventType ={
     'RefreshUser' :string
     'RefreshDocumentList': RefreshDocumentList
     'ViewRecord': ViewRecord
+    'SessionExpire': string
 }

package/templates/project/lang/default._json

@@ -1,4 +1,5 @@
 {
+    "home":"Home",
     "welcome": "Welcome",
     "create": "Create",
     "update": "Update",