@simitgroup/simpleapp-generator 1.0.8 → 1.0.14

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

@@ -0,0 +1,95 @@
+<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" @click="newData" type="reset">New</button>
+            <button class="bg-primary" @click="saveData" type="submit">Save</button>
+            <button class="bg-danger" @click="deleteData($event)">Delete</button>
+            <ConfirmPopup></ConfirmPopup>
+          </div>
+        <slot :data="o.data" :getField="o.getField" name="default"></slot>
+      </SimpleAppForm>
+    </Dialog>
+</template>
+<script setup lang="ts">
+
+import { SimpleAppClient } from '@simitgroup//simpleapp-vue-component/src/SimpleAppClient';
+import SimpleAppForm from '@simitgroup/simpleapp-vue-component/src/components/SimpleAppForm.vue';
+import SimpleAppDatatable from '@simitgroup/simpleapp-vue-component/src/components/SimpleAppDatatable.vue';
+import Dialog from 'primevue/dialog';
+import ConfirmPopup from 'primevue/confirmpopup';
+import { useConfirm } from "primevue/useconfirm";
+
+const confirm = useConfirm();
+const props = defineProps<{
+    document:SimpleAppClient<any,any>
+    listColumns:string[]
+    title:string
+}>()
+const visible = ref(false)
+const obj = props.document
+const data = obj.getReactiveData()
+const recordlist = ref();
+
+
+const refresh = () => {
+  obj.list().then((res:any) => {    
+    recordlist.value = res;
+  });
+};
+const newData = () => {
+    obj.setNew()
+    visible.value=true;
+};
+
+const editRecord = (event: any) => {
+  obj.getById(event.data._id);
+  visible.value=true
+};
+
+const saveData = () => {
+  if (data.value._id == "") {
+    obj.create().then(()=>visible.value=false).finally(() => refresh());
+  } else {
+    obj.update().then(()=>visible.value=false).finally(() => refresh());
+  }
+};
+const deleteData = (event:Event) => {
+    console.log("deleteData")
+    confirm.require({
+        target: event.currentTarget as HTMLElement,
+        message:'Delete?',
+        icon: 'pi pi-exclamation-triangle',
+        acceptClass: 'p-button-danger',
+        accept: ()=>{
+            obj.delete(data.value._id ?? "").then(()=>visible.value=false).finally(() => {
+                refresh();    
+            });
+        },
+        reject: () => {
+            console.log("Cancel delete")
+        }
+    })
+  
+};
+refresh();
+</script>
+<style scoped>
+.crudsimple-dialog{
+    z-index: 100;
+}
+</style>

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

@@ -0,0 +1,20 @@
+<template>
+    <div class="floatright">
+        <h3>data in json</h3>
+            <pre>
+            {{ modelValue }}
+            </pre>
+        </div>
+</template>
+<script setup lang="ts">
+const modelValue = defineModel()
+</script>
+<style scoped>
+.floatright{
+    position: fixed;
+    right: 0;
+    background-color: antiquewhite;
+    font-size: large;    
+    top: 0;
+}
+</style>

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

@@ -0,0 +1,79 @@
+<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">
+
+import { useToast, } from 'primevue/usetoast';
+import type {  ToastMessageOptions } from 'primevue/toast';
+import Toast from 'primevue/toast';
+import { stringify } from 'ajv';
+const toast = useToast();
+const { $event,$listen } = useNuxtApp()
+let resmsg:ToastMessageOptions = {} as ToastMessageOptions
+
+$listen('*',(type:string,data:any)=>{
+    
+    
+    let duration = 3000
+    let severity:typeof resmsg['severity'] 
+    let isshow=true
+    let toastgroup='default'
+    if(type.indexOf('error')>=0){
+        duration = 0
+        severity='error'
+        
+    }
+    else if(type.indexOf('warn')>=0){
+        duration = 10000
+        severity='warn'
+    }
+    else if(type.indexOf('info')>=0){
+        duration = 3000
+        severity='info'
+        isshow=false
+    }
+    else if(type.indexOf('success')>=0){
+        duration = 3000
+        severity='success'
+    }
+    if(Array.isArray(data)){
+        toastgroup='list'
+    }
+    // let msg:string=prepareMsg(data,severity?.toString()??'')
+
+    if(isshow){
+        toast.removeAllGroups()
+        resmsg = { severity: severity, summary: type, detail :data, life: duration, group:toastgroup}
+        toast.add(resmsg)
+    }
+    
+    
+})
+const prepareMsg=(data:any,msgtype:string):string=>{
+    let res : string =''
+    
+    if(typeof data == 'string'){
+        res = data
+    }else if(Array.isArray(data)){
+        res+='<ul>'
+        for(let i=0;i<data.length;i++){
+            const d=data[i]
+            res+= '<li>'+d['instancePath']+':'+(d['message']?? JSON.stringify(d))+'</li>'
+        }
+        res+='</ul>'
+    }else if(typeof data =='object'){
+        res=JSON.stringify(data)
+    }
+    return res
+
+    
+}
+
+</script>

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

@@ -0,0 +1,8 @@
+<template>
+    <header>      
+        <MegaMenu :model="getMenus()" orientation="horizontal" />              
+    </header>
+</template>
+<script setup lang="ts">
+    import MegaMenu from 'primevue/megamenu';
+</script>

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

@@ -0,0 +1,24 @@
+
+import * as o from "../simpleapp/openapi";
+
+const getAutoComplete = (apiname: string): any => {
+  const config: o.Configuration = {
+    basePath: useRuntimeConfig().public.APP_URL + "/api",
+    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),
+        <%}%>
+  };
+  if (!docsOpenapi[apiname]) {
+    console.error(
+      `api for '${apiname}' does not exists, most probably define wrong x-foreignkey`,
+    );
+    return undefined;
+  } else {
+    return docsOpenapi[apiname];
+  }
+};
+export default getAutoComplete;

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

@@ -0,0 +1,8 @@
+export const getMenus =()=>
+[
+  {label: 'Home',icon: 'pi pi-fw pi-home',to: '/'},
+  <% for(let i=0;i<it.length; i++){ %>
+    <% let obj = it[i]%>
+    {label: '<%=obj.docname.toLowerCase()%>', to:'/<%=obj.docname.toLowerCase()%>'},
+  <%}%>
+]

package/templates/nuxt/env.eta

@@ -0,0 +1,3 @@
+PORT=8800
+SIMPLEAPP_BACKEND_URL=http://localhost:8000
+APP_URL=http://localhost:8800

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

@@ -0,0 +1,10 @@
+
+<template>
+    <div>
+        <Menus />
+        <slot></slot>
+    </div>
+</template>
+<script lang="ts" setup>
+import Menus from '~/components/Menus.vue'
+</script>

package/templates/{nuxt.config.eta → nuxt/nuxt.config.ts.eta}

@@ -3,6 +3,7 @@ export default defineNuxtConfig({
   runtimeConfig:{    
     public:{
       SIMPLEAPP_BACKEND_URL: process.env.SIMPLEAPP_BACKEND_URL,
+      APP_URL: process.env.APP_URL,
     }
   },
   vite: {
@@ -13,14 +14,16 @@ export default defineNuxtConfig({
         }
     }
 },
+tailwindcss: {
+    // Options
+  },
   modules: [
-    // '@nuxtjs/tailwindcss',
+    '@nuxtjs/tailwindcss',
     // '@nuxtjs/color-mode'
 
   ],  
-  ssr: false,
+  ssr: true,
   css: [
-    // "assets/css/index.css",
     "primevue/resources/themes/lara-light-blue/theme.css",
     'primeicons/primeicons.css'
   ],

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

@@ -0,0 +1,3 @@
+<template>
+  <div>index page</div>
+</template>

package/templates/{nuxt.plugins.eta → nuxt/plugins.simpleapp.ts.eta}

@@ -1,4 +1,3 @@
-
 import { defineNuxtPlugin } from "#app";
 import PrimeVue from "primevue/config";
 import SimpleAppAutocomplete from '@simitgroup/simpleapp-vue-component/src/components/SimpleAppAutocomplete.vue'
@@ -23,8 +22,12 @@ import SimpleAppText from '@simitgroup/simpleapp-vue-component/src/components/Si
 import SimpleAppTextarea from '@simitgroup/simpleapp-vue-component/src/components/SimpleAppTextarea.vue'
 import SimpleAppValue from '@simitgroup/simpleapp-vue-component/src/components/SimpleAppValue.vue'
 import SimpleFieldContainer from '@simitgroup/simpleapp-vue-component/src/components/SimpleFieldContainer.vue'
+import SimpleAppDatatable from '@simitgroup/simpleapp-vue-component/src/components/SimpleAppDatatable.vue'
+import mitt from 'mitt'
+import ToastService from 'primevue/toastservice';
+import ConfirmationService from 'primevue/confirmationservice';
 
-
+const emitter = mitt()
 
 
 
@@ -53,6 +56,13 @@ export default defineNuxtPlugin((nuxtApp) => {
     .component("SimpleAppTextarea",SimpleAppTextarea)
     .component("SimpleAppValue",SimpleAppValue)
     .component("SimpleFieldContainer",SimpleFieldContainer)
+    .use(ToastService).use(ConfirmationService)
     ;
+    return {
+        provide: {
+          event: emitter.emit, // Will emit an event
+          listen: emitter.on // Will register a listener for an event
+        }
+    }
     //other components that you need
 });

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

@@ -0,0 +1,131 @@
+import axios from 'axios';
+// import { getServerSession } from '#auth'
+// import type { Session } from 'next-auth';
+
+export default defineEventHandler(async (event) => {
+    // let session: Session | null = null
+    // try {
+    //     session = await getServerSession(event)
+    // } catch (error) {
+    //     return sendRedirect(event, '/login', 401)
+    // }
+
+    return new Promise<any>(async (resolve, reject) => {
+        // if(!session || !session.accessToken) {
+            // reject({ statusMessage: 'Unauthorized', statusCode: 401 });
+            // throw createError({ statusMessage: 'Unauthorized', statusCode: 401 })
+        // }
+        // console.log("------hihi------")
+        const seperateSymbol = '.';
+        // const seperateSymbol = '&';
+        const key = event.context.params?.key ?? ''
+        const platform = event.context.params?.platform ?? ''
+        const otherLink = event.context.params?._ ?? ''
+
+        // 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 +platform + '/' + otherLink;
+        // console.warn('backend server-----',req.method,url,forwardData)
+        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'
+        // })
+    })
+    
+})

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

@@ -0,0 +1,9 @@
+import type { Config } from 'tailwindcss'
+
+// Default are on https://tailwindcss.nuxtjs.org/tailwind/config#default-configuration
+export default <Partial<Config>>{
+  theme: {},
+  plugins: [],
+  content: [],
+  darkMode: 'class',
+}

package/templates/nuxt/tailwind.css.eta

@@ -0,0 +1,28 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+button {
+    @apply p-2  border-2
+}
+
+.input-error{
+   @apply text-red-500   
+}
+.simpleapp-tool-bar button{
+    margin-right: 1rem;
+}
+
+.bg-primary{
+    @apply bg-green-600 text-white
+
+}
+.bg-default{
+    @apply bg-white
+}
+.bg-danger{
+    @apply bg-red-500  text-white
+}
+.bg-warning{
+    @apply bg-orange-600  text-white
+}

package/templates/nuxt.env.eta

@@ -1,2 +0,0 @@
-PORT=8800
-SIMPLEAPP_BACKEND_URL=http://localhost:8000