@simitgroup/simpleapp-generator 1.0.19 → 1.0.21

package/frontend1/README.md

@@ -0,0 +1,63 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

package/frontend1/app.vue

@@ -0,0 +1,8 @@
+<template>
+  <div>
+    <NuxtLayout>
+      <EventMonitor/>
+      <NuxtPage />
+    </NuxtLayout>
+    </div>
+</template>

package/frontend1/assets/css/tailwind.css

@@ -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/frontend1/components/CrudSimple.vue

@@ -0,0 +1,112 @@
+<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">
+
+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 axios from 'axios'
+import ProgressSpinner from 'primevue/progressspinner';
+
+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 disabled=ref(false)
+const recordlist = ref();
+const setCsrf=()=>{
+  // const { csrf } = useCsrf()
+  //   console.log('csrf',csrf)
+  //   axios.defaults.headers.common = {      
+  //     "X-CSRF-TOKEN": csrf
+  //   };
+}
+
+const refresh = () => {
+  obj.list().then((res:any) => {    
+    recordlist.value = res;
+    disabled.value=false
+  });
+};
+const newData = () => {
+    obj.setNew()
+    setCsrf()
+    visible.value=true;
+};
+
+const editRecord = (event: any) => {
+  obj.getById(event.data._id);
+  setCsrf()
+  visible.value=true
+};
+
+const saveData = () => {
+  disabled.value=true
+  if (data.value._id == "") {
+    obj.create().then(()=>{visible.value=false}).catch(()=>setCsrf()).finally(() => refresh());
+  } else {
+    obj.update().then(()=>visible.value=false).catch(()=>setCsrf()).finally(() => refresh());
+  }
+};
+const deleteData = (event:Event) => {
+    
+    confirm.require({
+        target: event.currentTarget as HTMLElement,
+        message:'Delete?',
+        icon: 'pi pi-exclamation-triangle',
+        acceptClass: 'p-button-danger',
+        accept: ()=>{
+            disabled.value=true 
+            obj.delete(data.value._id ?? "").then(()=>visible.value=false).finally(() => {
+                refresh();    
+            });
+        },
+        reject: () => {
+            setCsrf()            
+            console.log("Cancel delete")
+        }
+    })
+  
+};
+refresh();
+</script>
+<style scoped>
+.crudsimple-dialog{
+    z-index: 100;
+}
+</style>

package/frontend1/components/DebugDocumentData.vue

@@ -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/frontend1/components/EventMonitor.vue

@@ -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/frontend1/components/Menus.vue

@@ -0,0 +1,18 @@
+<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>
+    </header>
+</template>
+<script setup lang="ts">
+    // import MegaMenu from 'primevue/megamenu';
+    import Menubar from 'primevue/menubar';
+
+</script>

package/frontend1/layouts/default.vue

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

package/frontend1/nuxt.config.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = defineNuxtConfig({
+    // colorMode: {}  ,  
+    runtimeConfig: {
+        public: {
+            SIMPLEAPP_BACKEND_URL: process.env.SIMPLEAPP_BACKEND_URL,
+            APP_URL: process.env.APP_URL,
+        }
+    },
+    vite: {
+        vue: {
+            script: {
+                defineModel: true,
+                propsDestructure: true
+            }
+        }
+    },
+    tailwindcss: {
+    // Options
+    },
+    modules: [
+        //    '@sidebase/nuxt-auth',
+        "nuxt-security",
+        '@nuxtjs/tailwindcss',
+        '@vueuse/nuxt',
+        // '@nuxtjs/color-mode'
+    ],
+    ssr: true,
+    security: {
+        csrf: true,
+    },
+    css: [
+        "primevue/resources/themes/lara-light-blue/theme.css",
+        'primeicons/primeicons.css'
+    ],
+    devtools: { enabled: true },
+    build: {
+        transpile: ["primevue"]
+    },
+});
+//# sourceMappingURL=nuxt.config.js.map

package/frontend1/nuxt.config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nuxt.config.js","sourceRoot":"","sources":["nuxt.config.ts"],"names":[],"mappings":";;AAAA,kBAAe,gBAAgB,CAAC;IAC9B,qBAAqB;IACrB,aAAa,EAAC;QACZ,MAAM,EAAC;YACL,qBAAqB,EAAE,OAAO,CAAC,GAAG,CAAC,qBAAqB;YACxD,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC,OAAO;SAC7B;KACF;IACD,IAAI,EAAE;QACJ,GAAG,EAAE;YACD,MAAM,EAAE;gBACJ,WAAW,EAAE,IAAI;gBACjB,gBAAgB,EAAE,IAAI;aACzB;SACJ;KACJ;IACD,WAAW,EAAE;IACT,UAAU;KACX;IACD,OAAO,EAAE;QACX,4BAA4B;QACxB,eAAe;QACf,qBAAqB;QACrB,cAAc;QACd,uBAAuB;KAExB;IACD,GAAG,EAAE,IAAI;IACT,QAAQ,EAAE;QACR,IAAI,EAAE,IAAI;KACX;IACD,GAAG,EAAE;QACH,qDAAqD;QACrD,2BAA2B;KAC5B;IACD,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;IAC3B,KAAK,EAAE;QACO,SAAS,EAAE,CAAC,UAAU,CAAC;KAC9B;CAGR,CAAC,CAAA"}

package/frontend1/nuxt.config.ts

@@ -0,0 +1,42 @@
+export default defineNuxtConfig({
+  // colorMode: {}  ,  
+  runtimeConfig:{    
+    public:{
+      SIMPLEAPP_BACKEND_URL: process.env.SIMPLEAPP_BACKEND_URL,
+      APP_URL: process.env.APP_URL,
+    }
+  },
+  vite: {
+    vue: {
+        script: {
+            defineModel: true,
+            propsDestructure: true
+        }
+    }
+},
+tailwindcss: {
+    // Options
+  },
+  modules: [
+//    '@sidebase/nuxt-auth',
+    "nuxt-security",
+    '@nuxtjs/tailwindcss',
+    '@vueuse/nuxt',
+    // '@nuxtjs/color-mode'
+
+  ],  
+  ssr: true,
+  security: {
+    csrf: true,
+  },
+  css: [
+    "primevue/resources/themes/lara-light-blue/theme.css",
+    'primeicons/primeicons.css'
+  ],
+  devtools: { enabled: true },
+  build: {
+                transpile: ["primevue"]
+        },
+  
+
+})