Frontend changes

ReleaseNote.md

@@ -1,3 +1,10 @@
+[2.0.2l-alpha]
+
+1. change date to [dd/mm/yyyy]
+2. add new role such isBillingUser, isInternalUser and isDevSupport to access certain page
+3. adjust template for make the banner free and expired warning appear
+4. Added new paras prop for passing additional parameters on input
+
 [2.0.2k-alpha]
 
 1. add permission devbilling can access tenant invoice page

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simitgroup/simpleapp-generator",
-  "version": "2.0.2k-alpha",
-  "description": "frontend nuxtjs and backend nests code generator using jsonschema",
+  "version": "2.0.2-l-alpha",
+  "description": "frontend nuxtjs and backend nests code generator using jsonschema.",
   "main": "dist/index.js",
   "scripts": {
     "generate": "ts-node src/index.ts -c ./sampleconfig.json; pnpm exec prettier ./backend  --write;pnpm exec prettier ./frontend  --write",
@@ -39,7 +39,7 @@
     "tslog": "4.9.1"
   },
   "bin": {
-    "simpleapp-generator": "./dist/index.js"
+    "simpleapp-generator": "dist/index.js"
   },
   "devDependencies": {
     "@types/node": "^20.5.2",

templates/nest/src/simple-app/_core/features/user-context/user.context.ts.eta

@@ -37,8 +37,8 @@ import { StepData } from 'src/simple-app/_core/resources/permission/permission.s
 @Injectable({ scope: Scope.REQUEST })
 export class UserContext extends UserContextInfo {
   sessionId: string = crypto.randomUUID();
-  protected isTransaction = false  
-  protected transSteps:StepData[] = []
+  protected isTransaction = false;
+  protected transSteps: StepData[] = [];
   protected logger = new Logger(this.constructor.name);
 
   // protected uid: string = '';
@@ -152,7 +152,7 @@ export class UserContext extends UserContextInfo {
 
   getDBSession = (): ClientSession => this.dbsession;
   getTransSteps = () => this.transSteps;
-  setTransSteps = (steps: StepData[]) => this.transSteps = steps;
+  setTransSteps = (steps: StepData[]) => (this.transSteps = steps);
   getId = () => this._id;
 
   getUid = () => this.uid;
@@ -578,6 +578,42 @@ export class UserContext extends UserContextInfo {
         }
       }
 
+      // Tenant permissions for DevSupport role
+      if (this.roles.includes(Role.DevSupport)) {
+        const tenantRoles = [
+          Role.Tenant_access,
+          Role.Tenant_search,
+          Role.Tenant_create,
+          Role.Tenant_update,
+          Role.Tenant_delete,
+        ];
+        for (let r = 0; r < tenantRoles.length; r++) {
+          if (!this.roles.includes(tenantRoles[r])) {
+            this.roles.push(tenantRoles[r]);
+          }
+        }
+      }
+
+      // TenantInvoice permissions for DevBilling role
+      if (this.roles.includes(Role.DevBilling)) {
+        const tenantInvoiceRoles = [
+          Role.TenantInvoice_access,
+          Role.TenantInvoice_search,
+          Role.TenantInvoice_create,
+          Role.TenantInvoice_update,
+          Role.TenantInvoice_delete,
+          Role.TenantInvoice_draft,
+          Role.TenantInvoice_void,
+          Role.TenantInvoice_confirm,
+          Role.TenantInvoice_print,
+        ];
+        for (let r = 0; r < tenantInvoiceRoles.length; r++) {
+          if (!this.roles.includes(tenantInvoiceRoles[r])) {
+            this.roles.push(tenantInvoiceRoles[r]);
+          }
+        }
+      }
+
       this.moreProps = this.setMoreProps(userProfile);
       // this.package = userProfile['package'];
       // this.appintegration = await this.setAppIntegration();
@@ -1123,40 +1159,6 @@ export class UserContext extends UserContextInfo {
         }
       }
 
-      if (this.roles.includes(Role.DevSupport)) {
-        const tenantRoles = [
-          Role.Tenant_access,
-          Role.Tenant_search,
-          Role.Tenant_create,
-          Role.Tenant_update,
-          Role.Tenant_delete,
-        ];
-        for (let r = 0; r < tenantRoles.length; r++) {
-          if (!this.roles.includes(tenantRoles[r])) {
-            this.roles.push(tenantRoles[r]);
-          }
-        }
-      }
-
-      if (this.roles.includes(Role.DevBilling)) {
-        const tenantInvoiceRoles = [
-          Role.TenantInvoice_access,
-          Role.TenantInvoice_search,
-          Role.TenantInvoice_create,
-          Role.TenantInvoice_update,
-          Role.TenantInvoice_delete,
-          Role.TenantInvoice_draft,
-          Role.TenantInvoice_void,
-          Role.TenantInvoice_confirm,
-          Role.TenantInvoice_print,
-        ];
-        for (let r = 0; r < tenantInvoiceRoles.length; r++) {
-          if (!this.roles.includes(tenantInvoiceRoles[r])) {
-            this.roles.push(tenantInvoiceRoles[r]);
-          }
-        }
-      }
-
       this.moreProps = this.setMoreProps(userProfile);
     } else {
       this.logger.debug(`User ${this.uid} not exists in tenant (${this.tenantId})`);
@@ -1255,54 +1257,44 @@ export class UserContext extends UserContextInfo {
     return isodate;
   }
 
+  addTransactionStep(action: string, collection: string, id: string[], data: any[]) {
+    this.transSteps.push({ action: action, collection: collection, id: id, data: data });
+  }
 
-  addTransactionStep (action:string,collection:string,id:string[], data:any[]) {
-    this.transSteps.push({action:action,collection:collection,id:id,data:data})
-  } 
-
-
-  inTransaction(){
-    if(process.env.MONGO_TRANS==='false')
-      return this.isTransaction
-    else 
-      return this.dbsession && this.dbsession.inTransaction() ? true : false
+  inTransaction() {
+    if (process.env.MONGO_TRANS === 'false') return this.isTransaction;
+    else return this.dbsession && this.dbsession.inTransaction() ? true : false;
   }
-  startTransaction(){
-    if(process.env.MONGO_TRANS==='false'){
-      this.isTransaction=true
-      this.transSteps=[]      
-
-
-    }else{
-      this.dbsession.startTransaction({ readConcern: { level: 'snapshot' }, writeConcern: { w: 'majority' }, readPreference: 'primary' });    
+  startTransaction() {
+    if (process.env.MONGO_TRANS === 'false') {
+      this.isTransaction = true;
+      this.transSteps = [];
+    } else {
+      this.dbsession.startTransaction({ readConcern: { level: 'snapshot' }, writeConcern: { w: 'majority' }, readPreference: 'primary' });
     }
   }
-  async commitTransaction(){
-    if(process.env.MONGO_TRANS==='false'){
-      this.isTransaction=false
-      this.transSteps=[]
-    }else{
-      if(this.dbsession.inTransaction())
-      await this.dbsession.commitTransaction()
+  async commitTransaction() {
+    if (process.env.MONGO_TRANS === 'false') {
+      this.isTransaction = false;
+      this.transSteps = [];
+    } else {
+      if (this.dbsession.inTransaction()) await this.dbsession.commitTransaction();
     }
   }
-  async rollBackTransaction(dbService:SimpleAppDbRevertService){
-    if(process.env.MONGO_TRANS==='false'){
-      await dbService.revertSteps(this.transSteps)
-      this.isTransaction=false
-      this.transSteps=[]
-
-    }else{
-      if(this.dbsession.inTransaction())
-      await this.dbsession.abortTransaction()
+  async rollBackTransaction(dbService: SimpleAppDbRevertService) {
+    if (process.env.MONGO_TRANS === 'false') {
+      await dbService.revertSteps(this.transSteps);
+      this.isTransaction = false;
+      this.transSteps = [];
+    } else {
+      if (this.dbsession.inTransaction()) await this.dbsession.abortTransaction();
     }
   }
-  async endSession(){    
-      await this.dbsession.endSession()    
+  async endSession() {
+    await this.dbsession.endSession();
   }
 }
 
-
 // type StepData = {action:string,collection:string,id:string[],data:any[]}
 /**
  * Define a type for userinfo

templates/nuxt/app.vue.eta

@@ -9,6 +9,8 @@
     <EventDocumentViewer></EventDocumentViewer>      
     <EventDecision/>
     <EventNotification/>
+    <SubscriptionExpirationWarning/>
+    <SubscriptionFreeBanner/>
     <NuxtPage/>
   </NuxtLayout>
 </template>
@@ -20,6 +22,7 @@
  * last change 2024-03-17
  * Author: Ks Tan
  */
+import SubscriptionFreeBanner from "~/components/subscription/SubscriptionFreeBanner.vue";
 let currentXorg = getCurrentXorg()
 watch(()=>useRoute().fullPath,async (newval,oldvalue)=>{
    if(getCurrentXorg()!=currentXorg){
@@ -29,9 +32,9 @@ watch(()=>useRoute().fullPath,async (newval,oldvalue)=>{
   if(getPathPara('xorg','')!=''){
 
     if(getCurrentXorg()===''){
-      navigateTo('/picktenant')
+      goTo('/picktenant')
     }else if(!getUserProfile()?.currentGroup){
-      goTo('pickgroup')
+      navigateTo('pickgroup')
     }
     setGraphqlServer()
   }  
@@ -54,9 +57,9 @@ onMounted(async()=>{
     const currentgroup = useCookie('currentGroup').value
     //if no xorg, no enforce pick group
     if(getCurrentXorg()===''){
-      navigateTo('/picktenant')
+      goTo('/picktenant')
     }else if(!currentgroup){
-      goTo('/pickgroup')
+      navigateTo('/pickgroup')
     }
     setGraphqlServer()
   }else{

templates/nuxt/components/simpleApp/SimpleAppAutocomplete.vue.eta

@@ -160,6 +160,7 @@
                 getDocument(setting.fieldsetting['x-foreignkey']).viewer,
               )
             "
+            :paras="props.paras"
             @after="
               async (eventType: FormCrudEvent, data: any, result: any) =>
                 await afterRenderMobileForm(eventType, data)
@@ -206,6 +207,7 @@ const props = withDefaults(
     componentProps?: AutoCompleteProps;
     autocompleteFilter?: any;
     pt?: any;
+    paras?: any;
   }>(),
   {
     allowAddNew: true,
@@ -358,6 +360,7 @@ const openViewer = (readonly: boolean) => {
       readonly: readonly,
       viewer: getDocument(docname)?.viewer,
       documentName: docname,
+      paras: props.paras,
 
       //after create, auto copy value into auto complete
       after: async (eventType: FormCrudEvent, data: any) => {

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

@@ -205,6 +205,7 @@
       :readonly="isReadonly"
       :placeholder="placeholder"
       :autocomplete-filter="autocompleteFilter"
+      :paras="paras"
       @change="onChange"
     >
       <template #header>

templates/nuxt/composables/date.generate.ts.eta

@@ -16,24 +16,24 @@ export const today = () => useDayjs()().format('YYYY-MM-DD')
 /**
  * convert date object or ISO8601 date become local datetime string
  * @param date date|string
- * @returns local shortform date-time
+ * @returns local shortform date-time (DD/MM/YYYY HH:mm)
  */
 export const dateRenderToDateTimeStr = (date:Date|string) => 
-  convertToDate(date).toLocaleString().replace(',', ' ').slice(0,-3)
+  useDayjs()(date).format('DD/MM/YYYY HH:mm')
 /**
  * convert date object or ISO datestring become local date string
  * @param date date|string
- * @returns local short form date
+ * @returns local short form date (DD/MM/YYYY)
  */
 export const dateRenderToDateStr = (date:Date|string) => 
-  convertToDate(date).toLocaleDateString().replace(',', ' ')
+  useDayjs()(date).format('DD/MM/YYYY')
 /**
  * convert date object or ISO datestring become time string (without seconds)
  * @param date date|string
  * @returns 
  */
 export const dateRenderToTimeStr = (date:Date|string) => 
-  convertToDate(date).toLocaleTimeString().slice(0,-3)
+  useDayjs()(date).format('HH:mm')
 
 
 /**

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

@@ -327,6 +327,17 @@ export default defineNuxtPlugin(async (nuxtApp) => {
       isExecutive() {
         return this.currentGroup == "executive";
       },
+      isBillingUser() {
+        const roles = this.roles;
+        return roles.includes("tenantowner") || roles.includes("billing") || roles.includes("superadmin") || roles.includes("devbilling") || roles.includes("devsupport");
+      },
+      isInternalUser() {
+        const roles = this.roles;
+        return roles.includes("superadmin") || roles.includes("devbilling") || roles.includes("devsupport");
+      },
+      isDevSupport() {
+        return this.groups.includes("devsupport");
+      },
     },
   });