@simitgroup/simpleapp-generator 1.6.3-alpha → 1.6.4-b-alpha

package/templates/nuxt/components/user/UserButtonPermissionInfo.vue.eta

@@ -1,56 +1,92 @@
 <template>
-    
-  <div>        
-        <button class="" @click="previewPermission">
-            <i class="pi pi-question-circle" ></i>
-        </button>
-        <Sidebar
-                v-model:visible="showpermissioninfo"
-                modal                
-                :header="permissiontitle"
-                position="right"
-            >
-            <SelectButton v-model="selectedgroup"  @change="selectGroup" :options="grouplist" option-label="label" option-value="value"></SelectButton>                                          
-            <div v-if="selectedgroup">
-                    <div  v-if="useRuntimeConfig().public.DEBUGDATA" class="flex flex-row gap-2 p-2 ">
-                        <div class="flex align-items-center">
-                            <RadioButton v-model="mode" inputId="modepreview" name="pizza" value="preview" />
-                            <label for="modepreview" class="ml-2">Preview</label>
-                        </div>
-                        <div class="flex align-items-center">
-                            <RadioButton v-model="mode" inputId="modeedit" name="edit" value="edit" />
-                            <label for="modeedit" class="ml-2">Edit</label>
-                        </div>
-                        <div class="flex align-items-center">
-                            <RadioButton v-model="mode" inputId="modejson" name="json" value="json" />
-                            <label for="modejson" class="ml-2">JSON</label>
-                        </div>
-                        
-                    </div>
-                    <div v-if="mode=='json'">
-                        <div class="flex-row">
-                            <div><Button @click="copyText">copy</Button> </div>
-                            <div class="text text-gray-400">{{ copied }}</div>
-                        </div>
-                        <pre id="permissionstr">
-                            {{ permissions }}
-                        </pre>
-                    </div>
-                    <div class="permission-block flex flex-col m mt-4" v-for="res in allresources" v-else="showjson">
-                    <div class="m mr-3 ">{{ res }}</div>
-                    <div class="gap-4" v-if="allactions">                
-                            <SelectButton v-if="mode=='edit'" multiple :options="allactions[res]" v-model="permissions[res]"></SelectButton>
-                            
-                            <span v-else v-for="actionname in allactions[res]" class="m m-1">
-                                <Chip class="bg-primary" v-if="canPerformAction(selectedgroup,res,actionname)" severity="success" :label="actionname" ></Chip>
-                                <Chip v-else :label="actionname" ></Chip>
-                            </span>
-                        
-                        
-                    </div>
-                    </div>
-            </div>
-        </Sidebar>
+  <div>
+    <button class="" @click="previewPermission">
+      <i class="pi pi-question-circle"></i>
+    </button>
+    <Sidebar
+      v-model:visible="showpermissioninfo"
+      modal
+      :pt="{ root: { class: 'w-2/3' } }"
+      :header="permissiontitle"
+      position="right"
+    >
+      <SelectButton
+        v-model="selectedgroup"
+        @change="selectGroup"
+        :options="grouplist"
+        option-label="label"
+        option-value="value"
+      ></SelectButton>
+      <div v-if="selectedgroup">
+        <div
+          v-if="useRuntimeConfig().public.DEBUGDATA"
+          class="flex flex-row gap-2 p-2"
+        >
+          <div class="flex align-items-center">
+            <RadioButton
+              v-model="mode"
+              inputId="modepreview"
+              name="pizza"
+              value="preview"
+            />
+            <label for="modepreview" class="ml-2">Preview</label>
+          </div>
+          <div class="flex align-items-center">
+            <RadioButton
+              v-model="mode"
+              inputId="modeedit"
+              name="edit"
+              value="edit"
+            />
+            <label for="modeedit" class="ml-2">Edit</label>
+          </div>
+          <div class="flex align-items-center">
+            <RadioButton
+              v-model="mode"
+              inputId="modejson"
+              name="json"
+              value="json"
+            />
+            <label for="modejson" class="ml-2">JSON</label>
+          </div>
+        </div>
+        <div v-if="mode == 'json'">
+          <div class="flex-row">
+            <div><Button @click="copyText">copy</Button></div>
+            <div class="text text-gray-400">{{ copied }}</div>
+          </div>
+          <pre id="permissionstr">
+                            {{ computedpermissions }}
+                        </pre
+          >
+        </div>
+        <div
+          class="permission-block flex flex-col m mt-4"
+          v-for="res in allresources"
+          v-else="showjson"
+        >
+          <div class="m mr-3">{{ res }}</div>
+          <div class="gap-4" v-if="allactions" >
+            <SelectButton
+              v-if="mode == 'edit'"
+              multiple
+              :options="allactions[res]"
+              v-model="permissions[res]"
+            ></SelectButton>
+
+            <span v-else v-for="actionname in allactions[res]" class="m m-1">
+              <Chip
+                class="bg-primary-600 text-white"
+                v-if="canPerformAction(selectedgroup, res, actionname)"
+                severity="success"
+                :label="t(actionname)"
+              ></Chip>
+              <Chip v-else :label="t(actionname)"></Chip>
+            </span>
+          </div>
+        </div>
+      </div>
+    </Sidebar>
   </div>
 </template>
 <script setup lang="ts">
@@ -61,54 +97,61 @@
  * Author: Ks Tan
  */
 import _ from "lodash";
-import Chip from 'primevue/chip';
-import RadioButton from 'primevue/radiobutton';
-import {ref} from 'vue'
-
-
-const showpermissioninfo = ref(false)
+import Chip from "primevue/chip";
+import RadioButton from "primevue/radiobutton";
+import { ref } from "vue";
+const isdebug = ref(useRuntimeConfig().public.DEBUGDATA);
+const showpermissioninfo = ref(false);
 const permissiontitle = "Permission Information";
-const selectedgroup = ref('')
-const grouplist = getAllGroups().map((item)=>{return {value:item,label:_.capitalize(item)}})
-const mode = ref('preview')
+const selectedgroup = ref("");
+const grouplist = getAllGroups().map((item) => {
+  return { value: item, label: _.capitalize(item) };
+});
+const mode = ref("preview");
 
-const allresources = getUniqueResource()
-const allactions = ref()
-const permissions=ref()
-
-const activeroles = ref()
-const copied = ref('')
+const allresources = getUniqueResource();
+const allactions = ref();
+const permissions = ref<{ [key: string]: string[] }>();
+const computedpermissions = computed(() => {
+  const tmp: { [key: string]: string[] } = {};
+  for (const keyname in permissions.value) {
+    if (permissions.value[keyname].length > 0)
+      tmp[keyname] = permissions.value[keyname];
+  }
+  return tmp;
+  // return permissions.value.filter((item:string[],key:string)=>item.length>0)
+});
+const activeroles = ref();
+const copied = ref("");
 
 const previewPermission = () => {
   showpermissioninfo.value = true;
 };
 
-
 const copyText = () => {
-    copied.value="copied!"
-    const storage = document.createElement('textarea');
-    storage.value = String(document.getElementById('permissionstr')?.innerHTML)
-    document.body.appendChild(storage);
-    storage.select();
-    storage.setSelectionRange(0, 99999);
-    document.execCommand('copy');
-    document.body.removeChild(storage);
-    
-
-
-}
-const selectGroup = (selectedgroup:any) => {
-    const groupname = selectedgroup.value
-    activeroles.value= getGroupRoles(groupname)
-    allactions.value={}
-    permissions.value={}
-    for(let i=0; i< allresources.length; i++){
-        const r = allresources[i]
-        console.log(r)
-        const actions = getActionFromResource(r)
-        allactions.value[r]=actions
-        permissions.value[r]=getGroupResourcePermission(groupname,r).map(item=>item.action)
-    }
-    console.log(allactions.value,permissions.value)
-}
-</script>
+  copied.value = "copied!";
+  const storage = document.createElement("textarea");
+  storage.value = String(document.getElementById("permissionstr")?.innerHTML);
+  document.body.appendChild(storage);
+  storage.select();
+  storage.setSelectionRange(0, 99999);
+  document.execCommand("copy");
+  document.body.removeChild(storage);
+};
+const selectGroup = (selectedgroup: any) => {
+  const groupname = selectedgroup.value;
+  activeroles.value = getGroupRoles(groupname);
+  allactions.value = {};
+  permissions.value = {};
+  for (let i = 0; i < allresources.length; i++) {
+    const r = allresources[i];
+    // console.log(r);
+    const actions = getActionFromResource(r);
+    allactions.value[r] = actions;
+    permissions.value[r] = getGroupResourcePermission(groupname, r).map(
+      (item) => item.action,
+    );
+  }
+  console.log(allactions.value, permissions.value);
+};
+</script>

package/templates/nuxt/components/user/UserInvitation.vue.eta

@@ -1,19 +1,29 @@
 <template>
-<Dialog v-model:visible="visible" modal :header="popuptitle" class="crudsimple-dialog" :autoZIndex="false" :style="{zIndex:100 }">            
+  <Dialog
+    v-model:visible="visible"
+    modal
+    :header="popuptitle"
+    class="crudsimple-dialog">
     <div v-if="invites">
-        
-        <div v-for="item in invites" class="w w-auto p p-2 grid grid-cols-3 hover-list-primary border">
-            <div class="flex flex-col col-span-2">
-                <div class="font font-bold">{{item.tenantName}}</div>
-                <div class="text text-xs text-gray-500 italic">{{ item.created }}</div>
-            </div>
-            <div >
-                <Button class="btn-primary" @click="approve(item._id)">Approve</Button>
-                <Button class="btn-danger" @click="decline(item._id)">Decline</Button>
-            </div>
+      <div
+        v-for="item in invites"
+        class="w w-auto p p-2 grid grid-cols-3 hover-list-primary border"
+      >
+        <div class="flex flex-col col-span-2">
+          <div class="font font-bold">{{ item.tenantName }}</div>
+          <div class="text text-xs text-gray-500 italic">
+            {{ item.created }}
+          </div>
         </div>
-    </div>        
-</Dialog>
+        <div class="flex flex-row gap-2">
+          <ButtonPrimary @click="approve(item._id)"
+            >{{t('approve')}}</ButtonPrimary
+          >
+          <ButtonDanger @click="decline(item._id)">{{t('decline')}}</ButtonDanger>
+        </div>
+      </div>
+    </div>
+  </Dialog>
 </template>
 <script setup lang="ts">
 /**
@@ -22,35 +32,33 @@
  * last change 2023-10-28
  * Author: Ks Tan
  */
-    import Dialog from 'primevue/dialog';
-    import {onMounted, ref} from 'vue'
-    import {EventType} from '../types'
-    import ProgressSpinner from 'primevue/progressspinner'
-    const {$userstore,$event}= useNuxtApp()
-    const disabled = ref(false)
-    const visible=ref(false)
-    const invites = ref()
-    const invitationmsg = "There is some invitation to join their organization:"
-    const popuptitle = ref(invitationmsg)
-    onMounted(()=>{
-        invites.value =  getUserProfile().invites
-        if(invites.value.length>0){
-            visible.value=true
-        }
-    })
-    
-    const approve = async (id:string) =>{
-       
-    //    await reloadUserStore()
-       await $userstore.decideInvitation(id,'accept')
-       $event('InvitationAccepted',id)
-       visible.value=false
-    }
-    const decline = async (id:string) => {
-    //    await reloadUserStore()
-       await $userstore.decideInvitation(id,'reject')
-       $event('InvitationRejected',id)
-       visible.value=false
-    }
-    
-    </script>
+import Dialog from "primevue/dialog";
+import { onMounted, ref } from "vue";
+import { EventType } from "../types";
+import ProgressSpinner from "primevue/progressspinner";
+const { $userstore, $event } = useNuxtApp();
+const disabled = ref(false);
+const visible = ref(false);
+const invites = ref();
+const invitationmsg = "There is some invitation to join their organization:";
+const popuptitle = ref(invitationmsg);
+onMounted(() => {
+  invites.value = getUserProfile().invites;
+  if (invites.value.length > 0) {
+    visible.value = true;
+  }
+});
+
+const approve = async (id: string) => {
+  //    await reloadUserStore()
+  await $userstore.decideInvitation(id, "accept");
+  $event("InvitationAccepted", id);
+  visible.value = false;
+};
+const decline = async (id: string) => {
+  //    await reloadUserStore()
+  await $userstore.decideInvitation(id, "reject");
+  $event("InvitationRejected", id);
+  visible.value = false;
+};
+</script>

package/templates/nuxt/components/user/UserTenantPicker.vue.eta

@@ -1,71 +1,30 @@
 <template>
   <div class="w-full">
-    <div v-if="waiting" class="p-4  w-full">
-        waiting..
-    </div>
-    <div v-else  class="w-full p-4">
-      
+    <div v-if="waiting" class="p-4 w-full">waiting..</div>
+    <div v-else class="w-full p-2 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
       <div v-for="tenant in alltenants" class="border rounded-lg p-2 m-2">
+        
         <TextTitle>{{ tenant.tenantName }}</TextTitle>
-        <ListView :list="tenant.permissions" url="/" idField="xOrg">
-          <template #default="{item,index}">
-            <div class="flex flex-row w-full justify-end">
-              <TextPrimary class="flex-1">{{ item.orgName }}</TextPrimary>
-              <TextPrimary>{{ item.branchCode }}</TextPrimary>
-              
-            </div>
-          </template>
-        </ListView>
+        <div v-for=" item in tenant.permissions">
+          <NuxtLink :to="`/${item.xOrg}`" external>
+            <div class="flex flex-row gap-2 hover:bg-primary-100">        
+              <div class="min-w-14 p=2">
+                <ImageOrganization :orgRecordId="item.orgRecordId" :size="12"/>
+              </div>      
+              <div class="flex flex-col w-full justify-end gap-2">              
+                <div class="flex flex-row gap-2">
+                  <TextMain>{{ item.branchCode }}</TextMain>
+                  <Tag v-for="groupname in item.groups">{{ t(groupname) }}</Tag>
+                </div>
+                <TextSubsubtitle>{{ item.orgName }}</TextSubsubtitle>
+                
+                
+              </div>
+          </div>
+          </NuxtLink>
+        </div>
       </div>
-     
-      <!-- <card :pt="{ header: { class: 'text-xl text-gray-600' } }">
-        <template #header>
-          {{ tenant.tenantName }}
-        </template>
-        <template #content>
-          <ul>
-            <li v-for="o in getOrglist(tenant)">
-              <h1 class="subtitle-text">{{ o.orgName }}</h1>
-              <ul
-                role="list"
-                class="divide-y divide-gray-100 rounded-md border border-gray-200"
-              >
-                <li
-                  v-for="b in getBranchlist(tenant)"
-                  class="w-full items-center justify-between py-4 pl-4 pr-4 text-sm route-link-list"
-                >
-                  <NuxtLink
-                    :href="`/${b.xOrg}`"
-                    v-if="o.orgId == b.orgId"
-                    :external="true"
-                  >
-                    <div class="flex w-full flex-1 items-center">
-                      <p class="flex-1 flex-shrink-0 font-bold text-primary-600">
-                        {{ b.branchCode }}
-                      </p>
-                      <p class="text-right min-w-0 flex-1 gap-2">
-                        <span href="#" class="font-medium text-gray-600">{{
-                          b.group
-                        }}</span>
-                      </p>
-                    </div>
-                    <div class="flex-shrink-0">
-                      <span class="font-medium text-gray-400"
-                        >{{ useRuntimeConfig().public.APP_URL }}/{{
-                          b.xOrg
-                        }}</span
-                      >
-                    </div>
-                  </NuxtLink>
-                </li>
-              </ul>
-            </li>
-          </ul>
-
-        </template>
-      </card> -->
     </div>
-    
   </div>
 </template>
 <script setup lang="ts">
@@ -77,12 +36,13 @@
  */
 import _ from "lodash";
 import TextPrimary from "../text/TextPrimary.vue";
-const waiting = ref(true)
+import ImageOrganization from "../image/ImageOrganization.vue";
+const waiting = ref(true);
 const alltenants = ref();
 
 const loadAllTenants = async () => {
-  waiting.value=false
-  alltenants.value = (await getPorfileApi().getAllTenants()).data;
+  waiting.value = false;
+  alltenants.value = (await getProfileApi().getAllTenants()).data;
 };
 
 // const props = defineProps<{
@@ -90,12 +50,13 @@ const loadAllTenants = async () => {
 // }>()
 const getBranchlist = (tenant: any) => tenant.permissions;
 
-const getOrglist = (tenant: any) =>
-  _.uniqBy(getBranchlist(tenant), "orgId").map((item: any) => ({
-    orgId: item.orgId,
-    orgCode: item.orgCode,
-    orgName: item.orgName,
-  }));
+// const getOrglist = (tenant: any) =>
+//   _.uniqBy(getBranchlist(tenant), "orgId").map((item: any) => ({
+//     orgId: item.orgId,
+    // orgRecordId:'aaa',// item.orgRecordId,
+  //   orgCode: item.orgCode,
+  //   orgName: item.orgName,
+  // }));
 
 onNuxtReady(() => {
   loadAllTenants();

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

@@ -6,6 +6,92 @@
  */
 import { DurationType } from "~/types"
 
+const convertToDate= (date:Date|string)=>{
+  return date instanceof Date ? date : new Date(date)
+}
+
+//after review
+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
+ */
+export const dateRenderToDateTimeStr = (date:Date|string) => 
+  convertToDate(date).toLocaleString().replace(',', ' ').slice(0,-3)
+/**
+ * convert date object or ISO datestring become local date string
+ * @param date date|string
+ * @returns local short form date
+ */
+export const dateRenderToDateStr = (date:Date|string) => 
+  convertToDate(date).toLocaleDateString().replace(',', ' ')
+/**
+ * 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)
+
+
+/**
+ * convert date object or ISO datestring become DD/MM format
+ * @param date date|string
+ * @returns 
+ */
+export const dateRenderToDDMM = (date:Date|string) => 
+  getDayJs()(date).format('DD/MM')
+  
+
+
+/**
+ * convert iso8601 date string to date object
+ * @param datestr :string
+ * @returns date object
+ */
+export const stringToDate = (datestr:string) => new Date(datestr)
+
+/**
+ * convert date object to ISO string YYYY-MM-DDTHH:mm:ssZ
+ * @param date :Date 
+ * @returns 
+ */
+export const dateToISOString = (date:Date|string) => convertToDate(date).toISOString().split('.')[0]+"Z"
+//useDayjs()(date).toISOString().split('.')[0]+"Z"
+/**
+ * convert date object to date string (YYYY-MM-DD)
+ * @param date :Date  
+ * @returns date return string in YYYY-MM-DD
+ */
+export const dateToString = (date:Date|string) => useDayjs()(date).format('YYYY-MM-DD')
+/**
+ * convert date object to time string (HH:mm:ss)
+ * @param date 
+ * @returns timestring
+ */
+export const dateToTimeString = (date:Date) => useDayjs()(date).format('HH:mm:ss')
+/**
+ * get 3 char day name sun/mon/tue in lower case
+ * @param date : Date|string date obj or iso8601 date 
+ * @returns string
+ */
+export const getDayNameInWeek = (date:Date|string) => useDayjs()(date).format('ddd').toLowerCase();
+/**
+ * get last date of the specific date
+ * @param dates: Date|string
+ * @returns string
+ */
+export const lastDateOfMonth = (date:Date|string) =>  useDayjs()(date).endOf('month').format('YYYY-MM-DD');
+
+
+
+
+
+
+//before reevaluate
+
 export const setDateLocale = (localename:string) =>  useDayjs().locale(localename)
 export const dateExists = (date:Date,listDate:Date[]) => {
     const existsrecord = listDate.find(item=>{
@@ -14,15 +100,26 @@ export const dateExists = (date:Date,listDate:Date[]) => {
     return existsrecord===undefined ? false :true
   }
 export const getDayJs = ()=>useDayjs()
-export const lastDateOfMonth = (datestr:string) =>  useDayjs()(datestr).endOf('month').format('YYYY-MM-DD');
-export const today = () => useDayjs()().format('YYYY-MM-DD')
-export const dateToString = (date:Date) => useDayjs()(date).format('YYYY-MM-DD')
-export const dateToISOString = (date:Date) => useDayjs()(date).toISOString()
-export const dateToTimeString = (date:Date) => useDayjs()(date).format('HH:mm:ss')
-export const stringToDate = (datestr:string) => new Date(datestr)
+
+
+
+
+export const dateToISOWithoutConvert=(date:Date)=>{  
+    const timestamp = date.getTime() - date.getTimezoneOffset() * 60000;
+    return  new Date(timestamp).toISOString().split('.')[0]+"Z"
+}
+export const convertIsoToDateToWithoutConvert=(datestr:string)=>{  
+  // const timestamp = date.getTime() - date.getTimezoneOffset() * 60000;
+  const offsets  = (new Date()).getTimezoneOffset() * 60000
+  const timestamp = stringToDate(datestr).getTime() + offsets
+  return  new Date(timestamp)
+}
+
+
 export const dateToDateTimeString = (date:Date)=> useDayjs().utc(date).format('YYYY-MM-DD HH:mm:ss')
-export const toLocalDate = (date:string | Date)=> useDayjs().utc(date).format(getDateFormat())
+export const toLocalDate = (date:string | Date)=> useDayjs()(date).format(getDateFormat())
 export const toLocalDateTime = (date:string | Date)=> useDayjs().utc(date).format(getDateTimeFormat())
+
 export const toUTCDate = (date:string | Date)=> useDayjs().utc(date).format(getDateFormat())
 export const toUTCDateTime = (date:string | Date)=> useDayjs().utc(date).format(getDateTimeFormat())
 export const toUTCTime = (date:string | Date)=> useDayjs().utc(date).format('HH:mm')
@@ -33,5 +130,5 @@ export const getPrimevueCalendarDateFormat = () => {
   const country = <string>getUserProfile()?.country
   return 'dd/mm/yy'
 }
-export const getDayNameInWeek = (date:Date|string) => useDayjs()(date).format('ddd').toLowerCase();
+
 export const addTime = (date:Date|string,duration:number,unit:DurationType) => getDayJs()(date).add(duration, 'hour').toDate()