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

package/templates/nuxt/components/image/ImageOrganization.vue.eta.vue

@@ -2,39 +2,59 @@
   <ImageToBase64Uploader
     v-if="changable"
     #default
-    class="w-20 h-20 place-content-center"
+    :class="`w-${sizenumber} h-${sizenumber} place-content-center bg-white`"
     @image-uploaded="handleBase64"
   >
-    <Image :src="imageData"></Image>
+    <NuxtImg
+      class="w-full h-full"
+      :key="imageKey"
+      provider="myProvider"
+      :src="imagepath"
+    />
   </ImageToBase64Uploader>
-  <div v-else class="inline-block border rounded-lg w-20 h-20">
-    <Image :src="imageData"></Image>
+  <div
+    v-else
+    :class="`inline-block border rounded-lg w-${sizenumber} h-${sizenumber} bg-white`"
+  >
+    <NuxtImg class="w-full h-full" provider="myProvider" :src="imagepath" />
   </div>
 </template>
 <script lang="ts" setup>
 // import {KeyValue} from ''
 const props = defineProps<{
-  changable: boolean;
+  changable?: boolean;
+  orgRecordId?: string;
+  size: number;
 }>();
+const imageKey = ref(0);
+const orgRecordId = computed(
+  () => props.orgRecordId ?? getUserProfile()?.orgRecordId,
+);
+const xorgpath= getCurrentXorg() ? `${getCurrentXorg()}/` : 'MC0wLTA/'
+
+const imagepath = `${xorgpath}images/organization/${
+  orgRecordId.value
+}`;
+const sizenumber = props.size ?? 16;
 const imageData = ref("");
+watch(
+  () => props.orgRecordId,
+  () => imageKey.value++,
+);
 const handleBase64 = async (data: string) => {
   const keyvalue = {
-    key: "organizationLogo",
+    key: "org-" + props.orgRecordId,
     value: data,
   };
-  
+  console.log("upload logo ", data);
   const uploadok = await useNuxtApp()
     .$OrganizationDoc()
     .getApi()
     .runUploadlogo(keyvalue);
   if (uploadok) {
-    await loadLogo();
+    const realpath = `/api/${imagepath}`;
+    await fetch(realpath, { cache: "reload", credentials: "include" });
+    imageKey.value++;
   }
 };
-const loadLogo = async () => {
-  await refreshOrgLogo();
-  imageData.value = getOrgLogo();  
-};
-
-onMounted(async () => await loadLogo());
 </script>

package/templates/nuxt/components/image/ImageToBase64Uploader.vue.eta.vue

@@ -1,73 +1,90 @@
 <template>
-  <button
+  <div
     @click="openUploadDialog"
     :title="selectedBase64Img"
-    class="place-content-center image-to-base64-uploader rounded-lg border block"
+    class="vvv place-content-center image-to-base64-uploader rounded-lg border block"
   >
-    <slot name="default">
-      <Image v-if="selectedBase64Img" :src="selectedBase64Img" />
-      <i v-else class="pi pi-upload text-3xl"></i>
-    </slot>
+    <ClientOnly>
+      <slot name="default">
+        <Image v-if="selectedBase64Img" :src="selectedBase64Img" />
+        <i v-else class="pi pi-upload text-3xl"></i>
+      </slot>
 
-    <Dialog
-      v-model:visible="dialogVisible"
-      header="Image Upload"
-      :pt="{ root: { class: 'w-4/5' } }"
-    >
-      <div class="upload-container">
-        <input
-          type="file"
-          ref="fileInput"
-          accept="image/*"
-          @change="handleImageUpload"
-        />
-        <div id="preview" v-if="scaledImage" class="w-7/8">
-          <Cropper
-            ref="cropperInstance"
-            :src="scaledImage"
-            :stencil-props="{ aspectRatio: 1 }"
-            :options="cropperOptions"
-            @change="changeChropper"
-          />
-          <!-- :maxWidth="50" 
-					  :maxHeight="50" -->
+      <Dialog
+        v-if="dialogVisible"
+        v-model:visible="dialogVisible"
+        header="Image Upload"
+        :pt="{ root: { class: 'w-4/5' } }"
+      >
+        <div class="w-full grid grid-cols-2 gap-2">
+          <div class="w-7/8 border rounded p-4">
+            <TabView lazy>
+              <TabPanel :header="t('upload')">
+                <div class="upload-container">
+                  <input
+                    type="file"
+                    ref="fileInput"
+                    accept="image/*"
+                    @change="handleImageUpload"
+                  />
+                </div>
+              </TabPanel>
+              <TabPanel :header="t('webcam')">
+                <div class="webcam-container h h-1/6">
+                  <WebCamUI :fullscreenState="false" @photoTaken="photoTaken" />
+                </div>
+              </TabPanel>
+            </TabView>
+          </div>
+          <div id="preview" class="w-7/8 border rounded p-4">
+            <Cropper
+              v-if="scaledImage"
+              ref="cropperInstance"
+              :src="scaledImage"
+              :stencil-props="{ aspectRatio: 1 }"
+              :options="cropperOptions"
+              @change="changeChropper"
+            />
+          </div>
         </div>
-      </div>
-      <template #footer>
-        <div class="flex flex-row gap-4">
-          <ButtonWarning @click="dialogVisible = false">{{
-            t("cancel")
-          }}</ButtonWarning>
-          <ButtonPrimary @click="confirm">{{ t("confirm") }}</ButtonPrimary>
-        </div>
-      </template>
-    </Dialog>
-  </button>
+
+        <template #footer>
+          <div class="flex flex-row gap-4">
+            <ButtonDefault @click="dialogVisible = false">{{
+              t("cancel")
+            }}</ButtonDefault>
+            <ButtonPrimary @click="confirm">{{ t("confirm") }}</ButtonPrimary>
+          </div>
+        </template>
+      </Dialog>
+    </ClientOnly>
+  </div>
 </template>
 
 <script setup lang="ts">
-/**
- * This file was automatically generated by simpleapp generator during initialization. 
- * IT IS NOT CHANGABLE
- * last change 2024-04-06
- * author: Ks Tan
- */
 // Assuming the Dialog component and Cropper component are globally available or imported in a parent component
-import { defineEmits } from "vue";
+// import { defineEmits } from "vue";
+import { WebCamUI } from "vue-camera-lib";
+import VueCameraLib from "vue-camera-lib";
+
 // import Cropper from 'cropperjs'; // Assuming CropperJS is installed using a package manager
 import { Cropper } from "vue-advanced-cropper";
 import "vue-advanced-cropper/dist/style.css";
+
 const selectedBase64Img = ref("");
 const cropedBase64Img = ref("");
 const dialogVisible = ref(false);
 const previewImage = ref<string | null>(null);
 const scaledImage = ref<string | null>(null);
-const image = ref<string | null>(null);
-
+// const image = ref<string | null>(null);
 const emit = defineEmits<{
   (event: "image-uploaded", imageData: string): void;
 }>();
 
+// Use camera reference to call functions
+const photoTaken = (data: any) => {
+  scaledImage.value = data.image_data_url;
+};
 const openUploadDialog = () => {
   dialogVisible.value = true;
 };
@@ -79,8 +96,8 @@ const handleImageUpload = (event) => {
     reader.onload = (e) => {
       const img = new Image();
       img.onload = () => {
-        const maxWidth = 800; // Set your desired maximum width
-        const maxHeight = 600; // Set your desired maximum height
+        const maxWidth = 400; // Set your desired maximum width
+        const maxHeight = 300; // Set your desired maximum height
         const scale = Math.min(maxWidth / img.width, maxHeight / img.height);
         const scaledWidth = img.width * scale;
         const scaledHeight = img.height * scale;

package/templates/nuxt/components/list/ListDocumentTable.vue.eta

@@ -1,5 +1,6 @@
 <template>
   <DataTable
+    ref="documentlisttable" 
     v-bind="$attrs"
     stripedRows
     dataKey="_id"
@@ -29,15 +30,17 @@
             </h1>
           </slot>
         </div>
-        <span class="p-input-icon-left flex-1">
-          
+        <div class="p-input-icon-left gap-2 flex flex-row">
+          <ButtonPrimary @click="exportData">
+            <i class="pi pi-external-link"/>
+          </ButtonPrimary>
           <InputText
             type="search"
             v-model="filters['global'].value"
             class="w-full dark:text-white text-sm"
             placeholder="Keyword Search"
           />
-        </span>
+        </div>
       </div>
     </template>
     <!-- no data found -->
@@ -46,10 +49,10 @@
         <div class="text-3xl text-gray-400 pi pi-exclamation-circle"></div>
         <div class="text-3xl text-gray-400">{{ t("noDataFound") }}</div>
       </div>
-    </template>    
-      <slot name="default">
-        <Column header="undefineColumns"></Column>
-      </slot>    
+    </template>
+    <slot name="default">
+      <Column header="undefineColumns"></Column>
+    </slot>
   </DataTable>
 </template>
 <script setup lang="ts" generic="T">
@@ -65,18 +68,23 @@ import DataTable from "primevue/datatable";
 import Column from "primevue/column";
 import renderComponent from "~/components/renderer";
 import { emit } from "process";
+import ButtonPrimary from "../button/ButtonPrimary.vue";
+const documentlisttable = ref()
 const props = defineProps<{
-  value: T[]
-  title: string
-  columns: string[]
-  uniqueKey: string
-  documentTitle: string
+  value: T[];
+  title: string;
+  columns: string[];
+  uniqueKey: string;
+  documentTitle: string;
 }>();
 const emits = defineEmits(["selectRow"]);
 const clickRow = (eventdata: any) => {
   emits("selectRow", eventdata.data);
 };
 
+const exportData = ()=>{
+  documentlisttable.value.exportCSV()
+}
 const filters = ref({
   global: { value: null, matchMode: FilterMatchMode.CONTAINS },
 });

package/templates/nuxt/components/list/ListView.vue.eta

@@ -1,30 +1,50 @@
 <template>
   <div class="relative">
+    <div v-if="header">
+      <slot name="header">
+        <TextMain class="text-gray-800 pl-2 pt-2">{{ header }}</TextMain>
+      </slot>
+      <hr class="mt-2" />
+    </div>
     <div v-if="withFilter" class="flex flex-row p-2">
-      <InputGroup>
-        <InputGroupAddon v-if="filter">
-          <ButtonText
-            @click="showMoreFilter"
-            v-if="Object.keys(filter) == 0"
-          >
-            <i class="pi pi-filter"></i>
-          </ButtonText>
-          <ButtonWarning @click="showMoreFilter" v-else>
-            <i class="pi pi-filter"></i>
-          </ButtonWarning>
+      <InputGroup :pt="{ root: { class: 'p-0' } }">
+        <InputGroupAddon
+          v-if="filter !== undefined && Object.keys(filter).length > 0"
+          :pt="{
+            root: {
+              class:
+                'p-0 pi pi-filter cursor-pointer bg-warning-400 text-white p-3',
+            },
+          }"
+          @click="showMoreFilter"
+        >
+        </InputGroupAddon>
+        <InputGroupAddon
+          v-else
+          :pt="{ root: { class: 'p-0 pi pi-filter cursor-pointer p-3' } }"
+          @click="showMoreFilter"
+        >        
         </InputGroupAddon>
         <InputText
           :placeholder="t('searchKeyword')"
           v-model="searchvalue"
-          class="w-full dark:text-white text-sm"
           type="search"
+          :pt="{ root: { class: 'p-1' } }"
           ref="listviewfilter"
         />
-        <InputGroupAddon v-if="withAddNew">
-          <ButtonPrimary @click="emits('add')">
-            <i class="pi pi-plus"></i>
-          </ButtonPrimary>
+        <InputGroupAddon
+          :pt="{
+            root: {
+              class:
+                'p-0 cursor-pointer bg-primary-400 pi pi-plus p-3 text-white',
+            },
+          }"
+          v-if="withAddNew"
+          @click="emits('add')"
+        >
+
         </InputGroupAddon>
+        <slot name="inputAddOn"></slot>
       </InputGroup>
     </div>
 
@@ -90,10 +110,14 @@
       </div>
     </div>
 
-    <Dialog v-model:visible="visibleMoreFilter" :header="t('filter')">
+    <Dialog
+      v-model:visible="visibleMoreFilter"
+      :header="t('filter')"
+      :pt="{ root: { class: 'w-1/3' } }"
+    >
       <slot name="filter"> define filter in #filter </slot>
       <template #footer>
-        <div class="flex flex-row">
+        <div class="flex flex-row gap-4">
           <ButtonDefault @click="clearFilter" class="flex flex-row p-2">
             <i class="pi pi-times mr-1" />
             <span class="mr-1">{{ t("clear") }}</span>
@@ -123,11 +147,13 @@ const props = withDefaults(
   defineProps<{
     list: T[];
     url?: string;
+    urlsuffix?: string;
+    header?: string;
     titleField?: string;
     idField?: string;
     subTitleField?: string;
     withFilter?: boolean;
-    filter?: Object;
+    filter?: { [key: string]: any };
     withAddNew?: boolean;
     showIndex?: boolean;
     showClickEffect?: boolean;
@@ -147,9 +173,14 @@ const clickRow = (item: ListItem) => {
   // selecteditem.value = item.code
 };
 const getUrl = (item: any) => {
+  const urlsuffix =
+    props.urlsuffix === undefined || props.urlsuffix == ""
+      ? ""
+      : "/" + props.urlsuffix;
   if (props.url && props.idField) {
-    if (_.last(props.url) == "/") return `${props.url}${item[props.idField]}`;
-    else return `${props.url}/${item[props.idField]}`;
+    if (_.last(props.url) == "/")
+      return `${props.url}${item[props.idField]}${urlsuffix}`;
+    else return `${props.url}/${item[props.idField]}${urlsuffix}`;
   } else return undefined;
   // :to="url ? `${url}/${item[idField]}` : undefined"
 };
@@ -159,22 +190,20 @@ const filterlist = computed(() => {
     return [];
   }
   if (props.list !== undefined) {
-    const searchstr = searchvalue.value.toLowerCase()
-    
+    const searchstr = searchvalue.value.toLowerCase();
+
     newlist = props.list.filter((item: T) => {
-      let res = false
-      if(searchstr.length==0) return true
-      if(props.titleField && item[props.titleField]){
-          res = item[props.titleField].toLowerCase()
-                .includes(searchstr)
-              }
-      if(res) return true
+      let res = false;
+      if (searchstr.length == 0) return true;
+      if (props.titleField && item[props.titleField]) {
+        res = item[props.titleField].toLowerCase().includes(searchstr);
+      }
+      if (res) return true;
+
+      if (props.subTitleField && item[props.subTitleField])
+        res = item[props.subTitleField].toLowerCase().includes(searchstr);
+      if (res) return true;
 
-      if(props.subTitleField && item[props.subTitleField])
-      res = item[props.subTitleField].toLowerCase()
-        .includes(searchstr)
-      if(res) return true
-      
       return false;
     });
   }

package/templates/nuxt/components/overlay/OverlayPanelWithToolBar.vue.eta

@@ -1,15 +1,16 @@
 <template>
   <Sidebar
-    :position="position??'right'"
+    :position="position ?? 'right'"
     v-if="showDialog"
     v-model:visible="showDialog"
     modal
     :show-close-icon="false"
     :dismissable="dismissable"
+    :pt="{root:{class:'w-2/3 border-0 border-l border-l-gray-500'}}"
     #container
   >
-    <div class="overflow-y-scroll border-l-2">
-      <MobileToolbar class="bg-gray-800 text-white">
+    <div class="overflow-y-scroll">
+      <MobileToolbar class="">
         <template #start>
           <slot name="headerLeft"></slot>
         </template>
@@ -37,7 +38,7 @@ const showDialog = defineModel<boolean>({ required: true });
 const props = defineProps<{
   closeEventName: string;
   dismissable?: boolean;
-  position?:string
+  position?: "right" | "full" | "left" | "top" | "bottom" | undefined;
 }>();
 // const position = ref(props?.position ?? 'right')
 useNuxtApp().$listen("CloseDialog", (closeEventName: string) => {

package/templates/nuxt/components/overlay/OverlayViewer.vue.eta

@@ -2,21 +2,22 @@
   <Dialog
     v-if="showDialog"
     v-model:visible="showDialog"
-    
     maximizable
     :dismissable="false"
     :show-close-icon="false"
     :closeOnEscape="false"
     :modal="true"
-    :pt="{root:{class:'w-11/12 border top-0'}, mask: {
-            style: 'backdrop-filter: blur(2px);background-color: red;'
-        }}"   
-
+    :pt="{
+      root: { class: 'w-11/12 border top-0' },
+      mask: {
+        style: 'backdrop-filter: blur(2px);background-color: red;',
+      },
+    }"
   >
     <template #header>
-      <slot name="header">{{t(title)}}</slot>
+      <slot name="header">{{ t(title) }}</slot>
     </template>
-    <div class="overflow-y-scroll bg-white">
+    <div class="overflow-y-scroll bodycolorclass">
       <slot name="default"></slot>
     </div>
   </Dialog>
@@ -32,5 +33,4 @@ const showDialog = defineModel<boolean>({ required: true });
 useNuxtApp().$listen("CloseDialog", (closeEventName: string) => {
   if (closeEventName == "viewer") showDialog.value = false;
 });
-
 </script>

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

@@ -8,6 +8,7 @@
       </div>
       <div>
         <ButtonText
+          v-if="allowAction('create')"
           @click="goTo(doc.getDocName(), 'new')"
           class="pi pi-plus"
         ></ButtonText>
@@ -36,12 +37,13 @@
     >
       <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>
@@ -65,6 +67,14 @@
                 :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>
@@ -78,6 +88,12 @@
               >
                 {{ 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>
@@ -105,15 +121,15 @@
       }}</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
+        @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">
@@ -135,7 +151,7 @@ import { ref } from "vue";
 import _ from "lodash";
 import { SearchBody } from "~/types";
 import { SimpleAppClient } from "~/simpleapp/generate/clients/SimpleAppClient";
-const sidebarposition = ref('right')
+const sidebarposition = ref("right");
 const props = defineProps<{
   document: SimpleAppClient<any, any>;
   data: T;
@@ -143,6 +159,7 @@ const props = defineProps<{
   columns: string[];
   mobileColumns?: string[];
   sorts?: string[][];
+  availableActions?:string[]
 }>();
 const maxcolumns = 16;
 const emits = defineEmits(["selectRow"]);
@@ -164,6 +181,12 @@ 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")

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>