@simitgroup/simpleapp-generator 1.6.2-alpha → 1.6.4-alpha

package/templates/nuxt/components/page/PageDocList.vue.eta

@@ -1,12 +1,14 @@
 <template>
   <title v-if="!id">{{ t(doc.getDocName()) }}</title>
+
   <div v-if="isMobile()" class="w-full">
     <div class="p-2 flex flex-row justify-end place-items-center h-14">
       <div class="flex-1">
-        <TextTitle>{{ t(doc.getDocName()) }}</TextTitle>
+        <TextMain>{{ t(doc.getDocName()) }}</TextMain>
       </div>
       <div>
         <ButtonText
+          v-if="allowAction('create')"
           @click="goTo(doc.getDocName(), 'new')"
           class="pi pi-plus"
         ></ButtonText>
@@ -35,47 +37,107 @@
     >
       <template #toolbar>
         <div class="w-full text-left">
-          <ButtonPrimary
-            class="pi pi-plus"
+          <ButtonPrimary          
             @click="newData"
             v-tooltip="t('new')"
-            v-if="canPerform(resourcename, 'create')"
-          ></ButtonPrimary>
+            v-if="allowAction('create') && canPerform(resourcename, 'create')"
+          >
+            <i class="pi pi-plus"></i>
+          </ButtonPrimary>
         </div>
       </template>
       <template #default>
         <slot name="dataTableColumns">
-          <Column
-            v-for="col in columns.filter((item, index) => index < 6)"
-            :header="t(col)"
-            class="min-w-[5rem]"
-            #body="{ index, data }"
+          <!-- :sortable="schemacols[col] && schemacols[col].type!='object'" -->
+          <template
+            v-for="col in columns.filter((item, index) => index < maxcolumns)"
           >
-            <RendererLink
-              v-if="uniqueKey === col || documentTitle === col"
-              :value="data"
-              :setting="{ path: resourcename.toLocaleLowerCase() }"
-              :fields="[col]"
+            <Column
+              v-if="schemacols[col]"
+              :header="t(col)"
+              sortable
+              :field="schemacols[col]['x-foreignkey'] ? col + '.label' : col"
+              :class="`min-w-[5rem] ${getCssClass(col)}`"
+              #body="{ index, data }"
             >
-              {{ data[col] }}
-            </RendererLink>
-            <span v-else-if="data[col]?.label !== undefined">{{
-              data[col].label
-            }}</span>
-            <span v-else>{{ data[col] }}</span>
-          </Column>
+              <RendererLink
+                v-if="uniqueKey === col || documentTitle === col"
+                :value="data"
+                :setting="{ path: resourcename.toLocaleLowerCase() }"
+                :fields="[col]"
+              >
+              </RendererLink>
+              <TextMain v-else-if="col == 'documentStatus'">{{
+                t(data[col])
+              }}</TextMain>
+              <RendererMoney
+                v-else-if="schemacols[col]['format'] == 'money'"
+                v-model="data[col]"
+              >
+              </RendererMoney>
+              <span v-else-if="typeof schemacols[col].enum != 'undefined'">
+                {{ t(data[col]) }}
+              </span>
+              <span v-else-if="schemacols[col].type == 'boolean'">
+                <RendererBoolean v-model="data[col]" />
+              </span>
+              <RendererForeignKey
+                v-else-if="schemacols[col]['x-foreignkey']"
+                v-model="data[col]"
+                :setting="{ collection: schemacols[col]['x-foreignkey'] }"
+              >
+                {{ data[col]?.label ?? data[col]?.code ?? data[col] }}
+              </RendererForeignKey>
+              <span v-else-if="schemacols[col].format == 'date'">
+                <RendererDate v-model="data[col]" />
+              </span>
+              <span v-else-if="schemacols[col].format == 'datetime'">
+                <RendererDateTime v-model="data[col]" />
+              </span>
+              <span v-else-if="data[col]?.label !== undefined">{{
+                data[col].label
+              }}</span>
+              <span v-else>{{ data[col] }}</span>
+            </Column>
+          </template>
         </slot>
       </template>
     </ListDocumentTable>
   </div>
-  <OverlaySideBarCrud
+  <OverlayPanelWithToolBar
     v-model="showDialog"
     :closeEventName="doc.getDocName()"
-    #default
-    ><slot name="default">
-      <NuxtPage :_id="id"></NuxtPage>
-    </slot>
-  </OverlaySideBarCrud>
+    :dismissable="false"
+    :position="sidebarposition"
+  >
+    <template #headerLeft>
+      <ButtonText @click="showDialog = false">
+        <i class="pi pi-times"></i>
+      </ButtonText>
+    </template>
+    <template #headerCenter>
+      <TextTitle class="text-center text-white">{{
+        t(doc.getDocName())
+      }}</TextTitle>
+    </template>
+    <template #headerRight>
+      <ButtonText
+        @click="
+          sidebarposition =
+            sidebarposition == 'right' ? (sidebarposition = 'full') : 'right'
+        "
+      >
+        <i v-if="sidebarposition == 'right'" class="pi pi-window-maximize" />
+        <i v-if="sidebarposition == 'full'" class="pi pi-window-minimize" />
+      </ButtonText>
+    </template>
+
+    <div class="p-2">
+      <slot name="default">
+        <NuxtPage :_id="id"></NuxtPage>
+      </slot>
+    </div>
+  </OverlayPanelWithToolBar>
 </template>
 
 <script setup lang="ts" generic="T extends { [key: string]: any }">
@@ -89,14 +151,17 @@ import { ref } from "vue";
 import _ from "lodash";
 import { SearchBody } from "~/types";
 import { SimpleAppClient } from "~/simpleapp/generate/clients/SimpleAppClient";
+const sidebarposition = ref("right");
 const props = defineProps<{
   document: SimpleAppClient<any, any>;
   data: T;
+  dismissable?: boolean;
   columns: string[];
   mobileColumns?: string[];
   sorts?: string[][];
+  availableActions?:string[]
 }>();
-
+const maxcolumns = 16;
 const emits = defineEmits(["selectRow"]);
 const id = computed(() => getPathPara("id"));
 const resourcename = ref(_.upperFirst(props.document.getDocName()));
@@ -115,7 +180,19 @@ const { $event, $listen } = useNuxtApp();
 const recordlist = ref<T[]>();
 const uniqueKey = doc.getSchema()["x-simpleapp-config"].uniqueKey;
 const documentTitle = doc.getSchema()["x-simpleapp-config"].documentTitle;
-
+const schemacols = doc.getSchema().properties;
+const allowAction = (actname:string)=>{
+  if(props.availableActions === undefined) return true
+  else if(Array.isArray(props.availableActions) &&  props.availableActions.length>0 && !props.availableActions.includes(actname)) 
+    return false
+  else return true
+}
+const getCssClass = (col: string) => {
+  if (schemacols[col]?.type == "number") return "text-right";
+  else if (schemacols[col]?.type == "boolean")
+    return "text-center place-items-center";
+  else return "text-left";
+};
 const refresh = () => {
   const searchbody: SearchBody = {
     fields: props.columns,
@@ -154,7 +231,7 @@ watch(showDialog, () => {
 watch(
   () => useRoute().path,
   async () => {
-    if(!isMobile()){
+    if (!isMobile()) {
       if (getPathPara("id")) {
         showDialog.value = true;
       } else {

package/templates/nuxt/components/renderer/RendererDate.vue.eta

@@ -1,5 +1,10 @@
 <template>
-  <span v-if="modelValue">{{ toUTCDate(modelValue) }}</span>
+  <span v-if="modelValue">
+    {{ dateRenderToDateStr(modelValue) }}
+  </span>
+  <span v-else-if="value">
+    {{ dateRenderToDateStr(value) }}
+  </span>
   <span v-else>-</span>
 </template>
 <script lang="ts" setup>
@@ -9,5 +14,6 @@
  * last change 2024-02-04
  * author: Ks Tan
  */
-const modelValue = defineModel<Date|string>()
+const modelValue = defineModel<Date | string>();
+  const props = defineProps<{value:Date|string}>()
 </script>

package/templates/nuxt/components/renderer/RendererDateTime.vue.eta

@@ -1,5 +1,10 @@
 <template>
-  <span v-if="modelValue">{{ toUTCDateTime(modelValue) }}</span>
+  <span v-if="modelValue">
+    {{ dateRenderToDateTimeStr(modelValue) }}
+  </span>
+  <span v-else-if="value">
+    {{ dateRenderToDateTimeStr(value) }}
+  </span>
   <span v-else>-</span>
 </template>
 <script lang="ts" setup>
@@ -10,4 +15,5 @@
  * author: Ks Tan
  */
 const modelValue = defineModel<Date | string>();
+const props = defineProps<{value:Date|string}>()
 </script>

package/templates/nuxt/components/renderer/RendererDocHistories.vue.eta

@@ -0,0 +1,56 @@
+<template>
+  <div class="flex flex-row text-xs cursor-pointer" 
+    v-if="data?.updated && data?.updated !=''" @click="viewHistories">    
+    <ImageAvatar v-if="data?.updatedBy" :id="data.updatedBy" :size="12"></ImageAvatar>
+    <div class="flex flex-col p-2">
+      <TextDocStatus v-if="data?.docStatus" :docStatus="data?.docStatus" />
+      <TextSubsubtitle class=" text-gray-400 italic">{{ t('updated') }}:</TextSubsubtitle>
+      <RendererDateTime :value="data?.updated" class="text-gray-400 italic"/>
+    </div>
+    
+
+    <Dialog v-model:visible="visibleHistories" modal
+      :header="t('histories')" :pt="{root:{class:'w-1/4'}}">
+      <Timeline :value="events" class="w-full md:w-20rem">
+        <template #opposite="slotProps">
+          <RendererDateTime class="italic text-gray-400 text-xs" :value="slotProps.item.date"/>
+        </template>
+        <template #content="slotProps">
+          <div>
+            <div>{{ slotProps.item.status }}</div>
+          </div>  
+          
+        </template>
+    </Timeline>
+    </Dialog>
+  </div>
+  
+</template>
+<script lang="ts" setup>
+import TextSubsubtitle from '../text/TextSubsubtitle.vue';
+import RendererDateTime from './RendererDateTime.vue';
+  const visibleHistories = ref(false)
+  const props=defineProps<{data:any}>()
+  const events = computed(()=>{
+    const list =  [{ status: t('created'), date: props.data.created },]
+
+    if(props.data.updated != props.data.created){
+      list.push({ status: t('paidFeature'), date:''})
+      list.push( { status:  t('lastUpdate'), date: props.data.updated })
+    }     
+    return list   
+  })
+  const severity = computed(()=>{
+    const stat = props.data.docStatus 
+    if(props.data.docStatus=='confirm') return "success"
+    else if(props.data.docStatus=='void') return "danger"
+    else if(props.data.docStatus=='draft') return "secondary"
+    else return "warning"
+  })
+
+
+  const viewHistories = () =>{
+    visibleHistories.value=true
+    console.log("histories")
+  }
+</script>

package/templates/nuxt/components/renderer/RendererForeignKey.vue.eta

@@ -21,25 +21,26 @@ import { ForeignKey, FormCrudEvent, SimpleAppDocumentType } from "~/types";
 
 type SettingProp = { collection: SimpleAppDocumentType; displayField?: string };
 const modelValue = defineModel<ForeignKey>();
+
 const emits = defineEmits(["after"]);
-const props = defineProps<{ setting: SettingProp }>();
+const props = defineProps<{value?:ForeignKey;  setting: SettingProp }>();
 const displayText = computed(() => {
   const s = props.setting;
-  if (!modelValue.value) return undefined;
-  else if (!s.collection) return modelValue.value;
-  else if (s.displayField) return modelValue.value[s.displayField];
-  else return modelValue.value.label;
+  if (!modelValue.value && !props.value) return undefined;
+  else if (!s.collection) return modelValue.value??props.value;
+  else if (s.displayField) return modelValue.value[s.displayField] ??props.value[s.displayField];
+  else return modelValue.value?.label ??props.value?.label;
 });
 const { $event } = useNuxtApp();
 const viewer = ref();
 const viewRecord = () => {
   viewer.value = getDocument(props.setting.collection)?.viewer;
-
+  const value = modelValue.value?? props.value
   // getDocumentUrl(setting.collection,modelValue ? modelValue['_id']:'')
   //getDocumentUrl(setting.collection,modelValue ? modelValue['_id']:'')
   $event("ViewRecord", {
-    _id: modelValue.value?._id as string,
-    label: modelValue.value?.label as string,
+    _id: value?._id as string,
+    label: value?.label as string,
     eventId: randomUUID(),
     documentName: props.setting.collection,
     viewer: viewer.value,

package/templates/nuxt/components/renderer/RendererLink.vue.eta

@@ -1,7 +1,10 @@
 <template>
-  <a @click="go" class="text-primary-700 dark:text-primary-300 dark:hover:text-primary-200 hover:text-primary-500 cursor-pointer">
+  <a
+    @click="go"
+    class="text-primary-700 dark:text-primary-300 dark:hover:text-primary-200 hover:text-primary-500 cursor-pointer"
+  >
     <slot name="default">
-      <div>{{ value[fields[0]] }}</div>
+      <div>{{ value[fields[0]] ?? t('undefined') }}</div>
     </slot>
   </a>
 </template>
@@ -20,6 +23,6 @@ const props = defineProps<{
 }>();
 
 const go = () => {
-  goTo(props.setting.path, props.value._id);  
+  goTo(props.setting.path, props.value._id);
 };
-</script>
+</script>

package/templates/nuxt/components/renderer/RendererMoney.vue.eta

@@ -1,11 +1,15 @@
 <template>
-  <span v-if="typeof modelValue == 'undefined' || typeof modelValue == 'string'"
-    >-</span
-  >
-  <span v-else-if="showCurrency"> {{ currenyValue }}</span>
-  <span v-else>
-    {{ modelValue.toLocaleString(useI18n().defaultLocale, options) }}</span
-  >
+  
+  <span>
+    <span class="mr-1" v-if="showCurrency">{{ getCurrency() }}</span>    
+    <span v-if="typeof modelValue != 'undefined'">{{
+    modelValue.toLocaleString(useI18n().defaultLocale, options)
+      }}</span>
+    <span v-else-if="typeof props.value != 'undefined'">{{
+      props.value.toLocaleString(useI18n().defaultLocale, options)
+      }}</span>
+    <span v-else>-</span>
+  </span>
 </template>
 <script lang="ts" setup>
 /**
@@ -14,20 +18,24 @@
  * last change 2024-02-04
  * author: Ks Tan
  */
-const currenyValue = computed(() => {
-  if (modelValue.value === undefined) return "-";
-  return Intl.NumberFormat(useI18n().defaultLocale, {
-    // style: "currency",
-    // currency: getUserProfile()?.currency ?? '',
-    // currencyDisplay: "symbol",
-  }).format(modelValue.value);
-});
 const options = {
   style: "decimal", // Other options: 'currency', 'percent', etc.
   minimumFractionDigits: 2,
   maximumFractionDigits: 2,
 };
-const modelValue = defineModel<number>({ required: true });
-const props = defineProps<{ showCurrency?: boolean }>();
+const modelValue = defineModel<number>();
+const props = defineProps<{ showCurrency?: boolean ; value?:number }>();
+
+const currenyValue = computed(() => {
+  if (typeof modelValue.value == 'number'){
+    return Intl.NumberFormat(useI18n().defaultLocale, 
+        {}).format(modelValue.value);
+  }else if(typeof props.value == 'number'){
+    return Intl.NumberFormat(useI18n().defaultLocale,{}).format(props.value);
+  }else return '-'
+  
+  
+});
+
 
 </script>

package/templates/nuxt/components/renderer/RendererTime.vue.eta

@@ -1,5 +1,10 @@
 <template>
-  <span v-if="modelValue">{{ toUTCTime(modelValue) }}</span>
+  <span v-if="modelValue">
+    {{ dateRenderToTimeStr(modelValue) }}
+  </span>
+  <span v-else-if="value">
+    {{ dateRenderToTimeStr(value) }}
+  </span>
   <span v-else>-</span>
 </template>
 <script lang="ts" setup>
@@ -10,4 +15,5 @@
  * author: Ks Tan
  */
 const modelValue = defineModel<Date | string>();
+const props = defineProps<{ value: Date | string }>();
 </script>

package/templates/nuxt/components/renderer/RendererViewer.vue.eta

@@ -1,12 +1,17 @@
 <template>
-  <a
+  <div v-if="!value"></div>
+  <a v-else
     @click="openViewer"
     class="text-primary-700 dark:text-primary-400 hover:text-primary-500 cursor-pointer"
   >
     <slot name="default">
-      <div v-if="fields">{{ value[fields[0]] }}</div>
+      
+      <TextDanger v-if="!value">{{t('undefined')}}</TextDanger>
+      <TextDanger v-else-if="!Array.isArray(fields) || !fields[0]">{{t('undefinedFields')}}</TextDanger>
+      <div v-else-if="value[fields[0]]">{{ value[fields[0]] }}</div>
+      <div v-else></div>
     </slot>
-  </a>
+  </a> 
 </template>
 <script setup lang="ts">
 /**
@@ -21,18 +26,23 @@ const props = defineProps<{
   setting: RendererSetting;
   value: any;
 }>();
-
+const viewervalue = computed(()=>{
+  return props.value ?? {}
+})
 const openViewer = () => {
   useNuxtApp().$event("ViewRecord", {
     _id: props.value._id,
     documentName: props.setting.documentName,
     viewer: getDocument(props.setting.documentName)?.viewer,
-    label: props.fields !== undefined ? props.value[props.fields[0]] : props.setting.documentName,
+    label:
+      props.fields !== undefined
+        ? props.value[props.fields[0]]
+        : props.setting.documentName,
     document: getDocument(props.setting.documentName)?.docClass,
-    eventId: randomUUID(),    
-    after:()=>{
-      useNuxtApp().$event('CloseDialog',props.setting.documentName)
-    }
+    eventId: randomUUID(),
+    after: () => {
+      useNuxtApp().$event("CloseDialog", props.setting.documentName);
+    },
   });
 };
 </script>

package/templates/nuxt/components/select/SelectTemplate.vue.eta

@@ -1,14 +1,19 @@
 <template>
-  <div>
-    <div class="flex flex-row ">
-      <label v-if="!hideLabel" :for="fieldid" class="pt-2">
-      {{t(documentName)}}
+  <div class="w-full">
+    <div class="flex flex-row">
+      <label v-if="!hideLabel" :for="fieldid">
+        {{ t(documentName) }}
       </label>
-      <ButtonText v-if="allowAddNew" @click="addnew" class="text-xs text-blue-600">
-        <span>{{t('new')}}</span>
-      </ButtonText>
+      <div
+        v-if="allowAddNew"
+        @click="addnew"
+        class="cursor-pointer ml-2 pt-1 text-xs text-blue-600"
+      >
+        <span>{{ t("new") }}</span>
+      </div>
     </div>
     <MultiSelect
+      class="w-full md:w-full"
       :input-id="fieldid"
       v-if="multiple"
       display="chip"
@@ -17,19 +22,39 @@
       :options="options"
       optionLabel="label"
       optionValue="value"
+      filter
       :placeholder="placeholder"
-    />
+    >
+    <template #value="slotProps">
+      <slot name="value" :slotProps="slotProps">
+      </slot>
+    </template>
+    <template #option="slotProps">
+      <slot name="default" :option="slotProps.option" :index="slotProps.index">
+      </slot>
+    </template>
+      
+    </MultiSelect>
     <Dropdown
-
+      class="w-full md:w-full"
       :input-id="fieldid"
       v-else
       @update:modelValue="change"
+      filter
       v-model="modelValue"
       :options="options"
       optionLabel="label"
       optionValue="value"
       :placeholder="placeholder"
-    />
+    >
+    <template #value="slotProps">
+      <slot name="value" :item="getItem(modelValue)"></slot>
+    </template>
+      <template #option="slotProps" >
+        <slot name="default" :option="slotProps.option" :index="slotProps.index"></slot>        
+      </template>
+
+    </Dropdown>
   </div>
 </template>
 <script setup lang="ts">
@@ -40,24 +65,30 @@
  * Author: Ks Tan
  */
 import Dropdown from "primevue/dropdown";
-import { ForeignKey, FormCrudEvent } from "~/types";
+
+import { ForeignKey, SimpleAppDocuments, FormCrudEvent } from "~/types";
 const emits = defineEmits(["change"]);
-const modelValue = defineModel<string | string[]>();
-const list = ref<ForeignKey[]>([]);
-const fieldid = randomUUID()
+
 const props = defineProps<{
-  documentName: string;
+  documentName: keyof SimpleAppDocuments;
   placeholder?: string;
   showNull?: boolean;
   allowAddNew?: boolean;
   filter?: any;
   multiple?: boolean;
-  hideLabel?:boolean
+  hideLabel?: boolean;
 }>();
+// const initvalue = props.multiple==true ? [] : ''
+const modelValue = defineModel<string | string[]>();
+
+const list = ref<ForeignKey[]>([]);
+const fieldid = randomUUID();
+
 const options = ref<
   {
     value: string;
     label: string;
+    more:any;
   }[]
 >([]);
 const getListOptions = async () => {
@@ -71,38 +102,45 @@ const getListOptions = async () => {
   options.value = list.value.map((item) => ({
     value: item._id,
     label: item.label,
+    more: item
   }));
 };
 onMounted(async () => {
+  
   await getListOptions();
   if (modelValue.value) change(modelValue.value);
 });
-const getItem = (id: string) => list.value?.find((item) => item._id == id);
+const getItem = (id: string) => list.value?.find((item) => {  
+return  item._id == id
+});
 
-const change = (id: string) => {
+const change = (id: string | string[]) => {
   const selectedItem = getItem(id);
   emits("change", id, selectedItem);
-  
+  // console.log("changed",selectedItem)
 };
 
-const addnew=()=>{
-  
-    const doc = getDocument(props.documentName)?.docClass;
-    if (doc) {
-      const tmpdata = doc?.getReactiveData();
-      type DataType = typeof tmpdata.value;
-      onScreenAddDocument<DataType>(
-        props.documentName,
-        undefined,
-        async (eventType: FormCrudEvent, data: DataType) => {
-          if (eventType == FormCrudEvent.create) {
-            await getListOptions();
-            modelValue.value = data._id;
-            emits("change", data._id, getItem(data._id));
-          }
-        },
-      );
-   
+const addnew = () => {
+  const doc = getDocument(props.documentName)?.docClass;
+  if (doc) {
+    const tmpdata = doc?.getReactiveData();
+    type DataType = typeof tmpdata.value;
+    onScreenAddDocument<DataType>(
+      props.documentName,
+      undefined,
+      async (eventType: FormCrudEvent, data: DataType) => {
+        if (eventType == FormCrudEvent.create) {
+          await getListOptions();
+          if (props.multiple) {
+            if (modelValue.value === undefined) modelValue.value = [data._id];
+            else if (Array.isArray(modelValue.value))
+              modelValue.value.push(data._id);
+          } else modelValue.value = data._id;
+          refreshDocumentList(props.documentName);
+          emits("change", data._id, getItem(data._id));
+        }
+      },
+    );
   }
-}
+};
 </script>