@simitgroup/simpleapp-generator 1.0.23 → 1.0.25

package/templates/nuxt/components.crudsimple.vue.eta

@@ -1,32 +1,10 @@
-<template>
-    <div class="simpleapp-crudsimple">    
-        <button class="bg-primary" type="reset" @click="newData">New</button>
-        
-      
-      <SimpleAppDatatable
-            @row-dblclick="editRecord"
-            v-model="recordlist"
-            :setting="{}"
-            :columns="listColumns"
-          ></SimpleAppDatatable>
-
-      <DebugDocumentData v-model="data"/>
-    </div>
-
-    <Dialog v-model:visible="visible" modal header="Header" class="crudsimple-dialog" :autoZIndex="false" :style="{zIndex:100, width: '80vw' }">        
-        <SimpleAppForm :document="obj" :title="title" #default="o">     
-          <div class="simpleapp-tool-bar"   >
-            <button class="bg-default" :disabled="disabled" @click="newData" type="reset">New</button>
-            <button class="bg-primary" :disabled="disabled" @click="saveData" type="submit">Save</button>
-            <button class="bg-danger" :disabled="disabled" @click="deleteData($event)">Delete</button>
-            <ProgressSpinner v-if="disabled==true" style="width: 2rem; height: 2rem" ></ProgressSpinner>
-            <ConfirmPopup></ConfirmPopup>
-          </div>
-        <slot :data="o.data" :getField="o.getField" name="default"></slot>
-      </SimpleAppForm>
-    </Dialog>
-</template>
 <script setup lang="ts">
+/**
+* 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 { SimpleAppClient } from '@simitgroup//simpleapp-vue-component/src/SimpleAppClient';
 import SimpleAppForm from '@simitgroup/simpleapp-vue-component/src/components/SimpleAppForm.vue';
@@ -34,7 +12,6 @@ import SimpleAppDatatable from '@simitgroup/simpleapp-vue-component/src/componen
 import Dialog from 'primevue/dialog';
 import axios from 'axios'
 import ProgressSpinner from 'primevue/progressspinner';
-
 import ConfirmPopup from 'primevue/confirmpopup';
 import { useConfirm } from "primevue/useconfirm";
 
@@ -42,6 +19,7 @@ const confirm = useConfirm();
 const props = defineProps<{
     document:SimpleAppClient<any,any>
     listColumns:string[]
+    path:string
     title:string
 }>()
 const visible = ref(false)
@@ -49,14 +27,12 @@ const obj = props.document
 const data = obj.getReactiveData()
 const disabled=ref(false)
 const recordlist = ref();
-const setCsrf=()=>{
-  // const { csrf } = useCsrf()
-  //   console.log('csrf',csrf)
-  //   axios.defaults.headers.common = {      
-  //     "X-CSRF-TOKEN": csrf
-  //   };
-}
-
+const router = useRouter()
+const route = useRoute()
+const filters = ref()
+defineShortcuts({
+  'ctrl_i': () => newData()
+})
 const refresh = () => {
   obj.list().then((res:any) => {    
     recordlist.value = res;
@@ -64,23 +40,26 @@ const refresh = () => {
   });
 };
 const newData = () => {
-    obj.setNew()
-    setCsrf()
-    visible.value=true;
+  router.push({ path: `${props.path}` })  
+  obj.setNew()    
+  visible.value=true;
 };
 
-const editRecord = (event: any) => {
-  obj.getById(event.data._id);
-  setCsrf()
+const triggerEdit = (event: any) => {
+  let id = event.data._id.toString()
+  router.push({ path: `${props.path}/${id}` })  
+};
+const editRecord = (id:string) => {
+  obj.getById(id);
   visible.value=true
 };
 
 const saveData = () => {
   disabled.value=true
   if (data.value._id == "") {
-    obj.create().then(()=>{visible.value=false}).catch(()=>setCsrf()).finally(() => refresh());
+    obj.create().then(()=>{visible.value=false}).finally(() => refresh());
   } else {
-    obj.update().then(()=>visible.value=false).catch(()=>setCsrf()).finally(() => refresh());
+    obj.update().then(()=>visible.value=false).finally(() => refresh());
   }
 };
 const deleteData = (event:Event) => {
@@ -97,14 +76,47 @@ const deleteData = (event:Event) => {
             });
         },
         reject: () => {
-            setCsrf()            
             console.log("Cancel delete")
         }
-    })
-  
+    })  
 };
+
+if (route.params.id) {
+  const recordid:string = route.params.id.toString()
+  editRecord(recordid)  
+}
+
 refresh();
 </script>
+ 
+<template>
+    <div class="simpleapp-crudsimple">    
+      <button class="bg-primary" @click="newData" v-tooltip="'Add new(ctrl+i)'" >New</button>
+      <SimpleAppDatatable
+            @row-dblclick="triggerEdit"
+            v-model="recordlist"                                 
+            :setting="{}"
+            :columns="listColumns"
+          >         
+        </SimpleAppDatatable>
+
+      <DebugDocumentData v-model="data"/>
+    </div>
+
+    <Dialog v-model:visible="visible" modal header="Header" class="crudsimple-dialog" :autoZIndex="false" :style="{zIndex:100, width: '80vw' }">        
+        <SimpleAppForm :document="obj" :title="title" #default="o">     
+          <div class="simpleapp-tool-bar"   >
+            <button class="bg-default" :disabled="disabled" @click="newData" type="button">New</button>
+            <button class="bg-primary" :disabled="disabled" @click="saveData" type="submit">Save</button>
+            <button class="bg-danger" :disabled="disabled" @click="deleteData($event)" type="button">Delete</button>
+            <ProgressSpinner v-if="disabled==true" style="width: 2rem; height: 2rem" ></ProgressSpinner>
+            <ConfirmPopup></ConfirmPopup>
+          </div>
+        <slot :data="o.data" :getField="o.getField" name="default"></slot>
+      </SimpleAppForm>
+    </Dialog>
+</template>
+
 <style scoped>
 .crudsimple-dialog{
     z-index: 100;

package/templates/nuxt/components.debugdocdata.vue.eta

@@ -1,14 +1,22 @@
+<script setup lang="ts">
+/**
+ * This file was automatically generated by simpleapp generator during initialization.
+ * DO NOT MODIFY IT BY HAND.
+ * last change 2023-09-09
+ * author: Ks Tan
+ */
+
+const modelValue = defineModel()
+const isdebug = ref(useRuntimeConfig().public.DEBUGDATA)
+</script>
 <template>
-    <div class="floatright">
+    <div class="floatright" v-if="isdebug=='1'">
         <h3>data in json</h3>
             <pre>
             {{ modelValue }}
             </pre>
         </div>
 </template>
-<script setup lang="ts">
-const modelValue = defineModel()
-</script>
 <style scoped>
 .floatright{
     position: fixed;

package/templates/nuxt/components.eventmonitor.vue.eta

@@ -1,14 +1,10 @@
-<template>
-    <Toast group="default"/>
-    <Toast group="list">
-        <template #message="p">
-            <ol>
-                <li v-for="(item,index) in  p.message.detail" :key="index">{{item.instancePath}} {{ item.message }}</li>
-            </ol>            
-        </template>
-    </Toast>
-</template>
 <script setup lang="ts">
+/**
+ * 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 { useToast, } from 'primevue/usetoast';
 import type {  ToastMessageOptions } from 'primevue/toast';
@@ -76,4 +72,14 @@ const prepareMsg=(data:any,msgtype:string):string=>{
     
 }
 
-</script>
+</script>
+<template>
+    <Toast group="default"/>
+    <Toast group="list">
+        <template #message="p">
+            <ol>
+                <li v-for="(item,index) in  p.message.detail" :key="index">{{item.instancePath}} {{ item.message }}</li>
+            </ol>            
+        </template>
+    </Toast>
+</template>

package/templates/nuxt/components.menus.vue.eta

@@ -1,18 +1,20 @@
+<script setup lang="ts">
+/**
+ * This file was automatically generated by simpleapp generator during initialization.
+ * You may modify it by hand
+ * last change 2023-09-10
+ * author: Ks Tan
+ */
+
+// import MegaMenu from 'primevue/megamenu';
+import Menubar from 'primevue/menubar';
+const route = useRoute()
+const menus = getMenus(route.params.xorg)
+</script>
 <template>
     <header>      
         <!-- <MegaMenu :model="getMenus()" orientation="horizontal" />               -->
-        <Menubar :model="getMenus()">
-            <template #start>
-                <h1>[Logo Container]</h1>
-            </template>
-            <template #end>
-                <InputText placeholder="Search" type="text" />
-            </template>
+        <Menubar :model="menus">
         </Menubar>
     </header>
 </template>
-<script setup lang="ts">
-    // import MegaMenu from 'primevue/megamenu';
-    import Menubar from 'primevue/menubar';
-
-</script>

package/templates/nuxt/composables.getautocomplete.ts.eta

@@ -1,17 +1,28 @@
-
+/**
+ * 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/openapi";
-
+import axios from 'axios'
 const getAutoComplete = (apiname: string): any => {
+  const { csrf } = useCsrf()    
+  axios.defaults.headers.common = {"CSRF-TOKEN": csrf};
+  const route = useRoute();
+
   const config: o.Configuration = {
-    basePath: useRuntimeConfig().public.APP_URL + "/api",
+    basePath: `${useRuntimeConfig().public.APP_URL}/api/${route.params.xorg}`,
     isJsonMime: () => true,
   };
   const docsOpenapi: any = {
-    <% for(let i=0;i<it.length; i++){ %>
-        <% let obj = it[i]%>
-        '<%=obj.docname.toLowerCase()%>' : new o.<%=obj.doctype.toUpperCase()%>Api(config),
-        <%}%>
-  };
+                    'category' : new o.CATApi(config),
+                        'leadtype' : new o.LEADTApi(config),
+                        'level' : new o.LVLApi(config),
+                        'product' : new o.PRDApi(config),
+                        'studentgroup' : new o.STGApi(config),
+          };
   if (!docsOpenapi[apiname]) {
     console.error(
       `api for '${apiname}' does not exists, most probably define wrong x-foreignkey`,

package/templates/nuxt/composables.getmenus.ts.eta

@@ -1,9 +1,27 @@
-export const getMenus =()=>[
-  {label: 'Cruds',icon: 'pi pi-fw pi-pencil',items:[
-  <% for(let i=0;i<it.length; i++){ %>
-    <% let obj = it[i]%>
-    {label: '<%=obj.docname.toLowerCase()%>', to:'/<%=obj.docname.toLowerCase()%>'},
-  <%}%>
-]},
-  {label: 'Profile',icon: 'pi pi-fw pi-user'},
-]
+/**
+ * This file was automatically generated by simpleapp generator during initialization.
+ * DO NOT MODIFY IT BY HAND.
+ * last change 2023-09-10
+ * author: Ks Tan
+ */
+
+export const getMenus =()=>{
+  
+  const route = useRoute();
+  const xorg = route.params.xorg
+  let data =[];
+  if(xorg){
+    data =[
+      {label: 'Home',icon: 'pi pi-fw pi-home', url:'/'},
+      {label: 'Cruds',icon: 'pi pi-fw pi-pencil',items:[
+               <% for(let i=0;i<it.length; i++){ %>
+                <% let obj = it[i]%>
+                {label: '<%=obj.docname.toLowerCase()%>', to:`/${xorg}/<%=obj.docname.toLowerCase()%>`},
+              <%}%>
+      ]},      
+    ]
+  }else{
+    data= [{label: 'Home',icon: 'pi pi-fw pi-home', url:'/'},]
+  }
+  return data
+}

package/templates/nuxt/env.eta

@@ -3,3 +3,15 @@ PORT=<%=it.frontendPort%>
 SIMPLEAPP_BACKEND_URL=http://localhost:<%=it.backendPort%>
 
 APP_URL=http://localhost:<%=it.frontendPort%>
+
+DEBUGDATA=1
+
+OAUTH2_CONFIGURL=<%=it.keycloaksetting.OAUTH2_CONFIGURL%>
+
+OAUTH2_CLIENTID=<%=it.keycloaksetting.OAUTH2_CLIENTID%>
+
+OAUTH2_CLIENTSECRET=<%=it.keycloaksetting.OAUTH2_CLIENTSECRET%>
+
+AUTH_SECRET_KEY=<%=it.keycloaksetting.AUTH_SECRET_KEY%>
+
+AUTH_ORIGIN=http://localhost:<%=it.frontendPort%>

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

@@ -1,10 +1,17 @@
+<script lang="ts" setup>
+/**
+ * This file was automatically generated by simpleapp generator during initialization.
+ * You may modify it
+ * last change 2023-09-09
+ * author: Ks Tan
+ */
+ 
 
+import Menus from '~/components/Menus.vue'
+</script>
 <template>
     <div>
         <Menus />
         <slot></slot>
     </div>
 </template>
-<script lang="ts" setup>
-import Menus from '~/components/Menus.vue'
-</script>

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

@@ -4,6 +4,7 @@ export default defineNuxtConfig({
     public:{
       SIMPLEAPP_BACKEND_URL: process.env.SIMPLEAPP_BACKEND_URL,
       APP_URL: process.env.APP_URL,
+      DEBUGDATA: process.env.DEBUGDATA,      
     }
   },
   vite: {
@@ -18,17 +19,19 @@ tailwindcss: {
     // Options
   },
   modules: [
-//    '@sidebase/nuxt-auth',
-    "nuxt-security",
-    '@nuxtjs/tailwindcss',
+    '@sidebase/nuxt-auth',
+    "nuxt-security",    
     '@vueuse/nuxt',
-    // '@nuxtjs/color-mode'
-
+    '@nuxt/ui'
   ],  
-  ssr: true,
+  auth: {
+    globalAppMiddleware: true
+  },
   security: {
     csrf: true,
   },
+  ssr: true,
+  
   css: [
     "primevue/resources/themes/lara-light-blue/theme.css",
     'primeicons/primeicons.css'
@@ -38,5 +41,6 @@ tailwindcss: {
                 transpile: ["primevue"]
         },
   
+  
 
 })

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

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+/**
+ * This file was automatically generated by simpleapp generator during initialization.
+ * You may modify it for your need
+ * last change 2023-09-09
+ * author: Ks Tan
+ */
+ </script>
+<template>
+  <div>
+  <h1>index page</h1>
+  <ul>
+    <li><NuxtLink :external="true" to="/MS0xLTE" >MS0xLTE (1-1-1)</NuxtLink></li>
+    <li><NuxtLink :external="true" to="/Mi0yLTI" >Mi0yLTI (2-2-2)</NuxtLink></li>
+  </ul>
+  
+  </div>
+  
+</template>

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

@@ -1,3 +1,19 @@
+<script lang="ts" setup>
+/**
+ * This file was automatically generated by simpleapp generator during initialization.
+ * You may modify it for your need
+ * last change 2023-09-09
+ * author: Ks Tan
+ */
+ </script>
 <template>
-  <div>index page</div>
+  <div>
+  <h1>index page</h1>
+  <ul>
+    <li><NuxtLink :external="true" to="/MS0xLTE" >MS0xLTE (1-1-1)</NuxtLink></li>
+    <li><NuxtLink :external="true" to="/Mi0yLTI" >Mi0yLTI (2-2-2)</NuxtLink></li>
+  </ul>
+  
+  </div>
+  
 </template>

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

@@ -0,0 +1,20 @@
+<template>
+    <NuxtPage />
+</template>
+<script setup lang="ts">
+definePageMeta({ 
+    name: 'Login',
+    auth: false,
+})
+
+// const route = useRoute();
+const { signIn } = useAuth()
+onMounted(async () => {
+    let callbackUrl = '/';
+    // if(route.params.redirect) {
+    //     callbackUrl = <string>route.params.redirect;
+    // }
+    await signIn('keycloak', { callbackUrl: callbackUrl })
+})
+
+</script>

package/templates/nuxt/plugins.simpleapp.ts.eta

@@ -1,3 +1,9 @@
+/**
+ * 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 { defineNuxtPlugin } from "#app";
 import axios from 'axios'
 import PrimeVue from "primevue/config";
@@ -27,15 +33,15 @@ import SimpleAppDatatable from '@simitgroup/simpleapp-vue-component/src/componen
 import mitt from 'mitt'
 import ToastService from 'primevue/toastservice';
 import ConfirmationService from 'primevue/confirmationservice';
+import Tooltip from 'primevue/tooltip';
 //import Quill from 'quill'
 const emitter = mitt()
 
 
 
 export default defineNuxtPlugin((nuxtApp) => {
-  const { csrf } = useCsrf()    
-  axios.defaults.headers.common = {"CSRF-TOKEN": csrf};
-
+    const { csrf } = useCsrf()    
+    axios.defaults.headers.common = {"CSRF-TOKEN": csrf};
     nuxtApp.vueApp.use(PrimeVue, { ripple: true });
     nuxtApp.vueApp
     .component("SimpleAppAutocomplete",SimpleAppAutocomplete)
@@ -61,7 +67,9 @@ export default defineNuxtPlugin((nuxtApp) => {
     .component("SimpleAppValue",SimpleAppValue)
     .component("SimpleFieldContainer",SimpleFieldContainer)
     //.component("Quill",Quill)  // cause problem in ssr mode
-    .use(ToastService).use(ConfirmationService)
+    .use(ToastService)
+    .use(ConfirmationService)
+    .directive('tooltip', Tooltip)
     ;
     return {
         provide: {

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

@@ -0,0 +1,12 @@
+// give keycloak for 
+export default defineEventHandler(async (event) => {
+    const path = `${
+        process.env.OAUTH2_CONFIGURL
+    }/protocol/openid-connect/logout?redirect_uri=${encodeURIComponent(
+        process.env.AUTH_ORIGIN ?? ""
+    )}`;
+
+    return {
+        path: path
+    }
+});

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

@@ -0,0 +1,144 @@
+/**
+ * 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 axios from 'axios';
+import { getServerSession } from '#auth'
+import type { Session } from 'next-auth';
+
+export default defineEventHandler(async (event) => {
+    let session:any=null
+    // console.log('---------hihi---------')
+    
+    try {
+        session = await getServerSession(event)
+        
+    } catch (error) {
+        return sendRedirect(event, '/login', 401)
+    }
+    // console.log(session)
+    return new Promise<any>(async (resolve, reject) => {
+        if(!session) {
+        //if(!session || !session.accessToken) {    
+            reject({ statusMessage: 'Unauthorized', statusCode: 401 });
+            throw createError({ statusMessage: 'Unauthorized', statusCode: 401 })
+        }
+        // console.log("------hihi------")
+        const seperateSymbol = '.';
+        // const seperateSymbol = '&';
+        const xOrg = event.context.params?.xorg ?? ''
+        const documentLink = event.context.params?._ ?? ''
+        // const platform = event.context.params?.platform ?? ''
+        
+
+        // console.error("event.context???",event.context)
+        const accessToken = session?.accessToken;
+        
+        // const allowPlatform = ['report-api', 'cloudapi'];
+        // if(!key || !platform || !allowPlatform.includes(platform) || !accessToken) {
+        //     reject({ statusMessage: 'Unauthorized', statusCode: 401 });
+        //     // throw createError({ statusMessage: 'Unauthorized', statusCode: 401 })
+        // }
+
+        // let tenantKey = '', organizationKey = '';
+        // let xOrg = '';
+
+        // if(key !== 'system') {
+        //     [tenantKey, organizationKey] = key.split(seperateSymbol);
+        //     xOrg = `${tenantKey}/${organizationKey}/`;
+        // }
+
+        // if(key === 'system' && platform == 'cloudapi') {
+        //     // xOrg = 'MC0wLTA'
+        // }
+
+        let forwardData: any = {};
+
+        const req = event.node.req;
+
+        if(req.method == 'POST' || req.method == 'PUT') {
+
+            forwardData = await readBody(event);
+        } else {
+            forwardData = getQuery(event);
+        }
+
+        // if(typeof forwardData === "object" && "_branch" in forwardData) {
+        //     xOrg = xOrg + forwardData._branch;
+        //     delete forwardData._branch;
+        // }
+
+        const frontEndRes = event.node.res;
+        const url = process.env.SIMPLEAPP_BACKEND_URL + '/' + documentLink;
+        // console.warn('backend server-----',url,'xorg',xOrg,'documentLink',documentLink)
+        const axiosConfig: any = {
+            method: req.method,
+            url: url,
+            headers: {
+                Authorization: `Bearer ${accessToken}`,
+                'X-Org': xOrg,
+            },
+            data: forwardData,
+            params: forwardData,
+        }
+        
+        // if(key === 'system') {
+        //     axiosConfig.headers["X-Global"] = true;
+        //     delete axiosConfig.headers["X-Org"];
+        // }
+
+        // if(otherLink.includes('avatar')) {
+        //     axiosConfig.responseType = 'arraybuffer';
+        //     // axiosConfig.headers['Acceptable'] = 'text/html,image/avif,image/webp,image/apng';
+        // }
+
+        axios(axiosConfig).then((res) => {
+            if (res.headers['content-type'] === 'image/png') {
+                // Set the response headers for the image
+                frontEndRes.setHeader('Content-Type', 'image/png');
+                frontEndRes.setHeader('Content-Disposition', 'inline');
+
+                // Send the image data as the response body
+                frontEndRes.end(Buffer.from(res.data, 'binary'));
+            } else {
+                // For non-image responses, set the Content-Type header and send the response body
+                // setHeader(event, 'Content-type', <string>res.headers['Content-Type']);
+
+                frontEndRes.statusCode = res.status;
+                if(res.statusText) {
+                    frontEndRes.statusMessage = res.statusText;
+                }
+
+                resolve(res.data);
+            }
+
+        }).catch((error) => {
+            // console.log("==============================================================")
+            // console.log('@@@@@@@@@@@@@ API error', error)
+            // console.log("@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@")
+            // console.log('######### response', error.response)
+            // console.log('#####################################')
+            // console.log(axiosConfig);
+            // console.log('#####################################')
+
+            if (error.response?.status && error.response.status == '401') {
+                return reject({ statusMessage: 'Unauthorized', statusCode: 401 });
+                // throw createError({ statusMessage: 'Unauthorized', statusCode: 401 })
+            }
+
+            // reject(error.data)
+            reject({ statusMessage: error.response.statusText, statusCode: error.response.status });
+            // resolve({ status: 'ok' })
+            // throw createError({ statusMessage: 'Bad Requests', statusCode: 404 })
+        })
+
+        // resolve({
+        //     status: 'ok'
+        // })
+    })
+    
+})