@iservice365/layer-common 1.0.8 → 1.0.9

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 1.0.9
+
+### Patch Changes
+
+- 681b0f4: Update dependencies - vuetify
+
 ## 1.0.8
 
 ### Patch Changes

package/components/Chat/Information.vue

@@ -19,7 +19,7 @@
         </v-col>
 
         <v-col cols="12" class="text-center mb-3" v-if="item">
-          <v-avatar
+          <!-- <v-avatar
             size="48"
             class="mb-1"
             v-if="!item.attachments || !item.attachments.length"
@@ -50,7 +50,33 @@
               v-for="(attachment, index) in item.attachments"
               :key="index"
             >
-              <v-img :src="attachment" cover class="w-100 h-100" />
+              <v-img :src="`/api/public/${attachment}`" cover class="w-100 h-100" />
+            </v-carousel-item>
+          </v-carousel> -->
+          <v-img
+            v-if="item.attachments.length === 1"
+            :src="`/api/public/${item.attachments[0]}`"
+            height="200"
+            cover
+            class="rounded mb-2"
+          />
+          <v-carousel
+            v-else
+            hide-delimiter-background
+            height="200"
+            class="rounded mb-2"
+            show-arrows
+            cycle
+          >
+            <v-carousel-item
+              v-for="(attachment, index) in item.attachments"
+              :key="index"
+            >
+              <v-img
+                :src="`/api/public/${attachment}`"
+                cover
+                class="w-100 h-100"
+              />
             </v-carousel-item>
           </v-carousel>
         </v-col>
@@ -58,7 +84,9 @@
         <v-col cols="12" v-if="item">
           <v-row dense class="my-1">
             <v-col cols="6" class="py-1"><strong>Category:</strong></v-col>
-            <v-col cols="6" class="py-1 text-right text-capitalize">{{ item.category }}</v-col>
+            <v-col cols="6" class="py-1 text-right text-capitalize">{{
+              item.category
+            }}</v-col>
           </v-row>
 
           <v-divider />

package/components/FeedbackDetail.vue

@@ -1,28 +1,39 @@
 <template>
-  <v-row no-gutters class="fill-height" align="stretch">
-    <v-col cols="12" md="3" class="fill-height">
-      <ChatNavigation
-        :title="'Feedbacks'"
-        :items="items"
-        @select="handleSelectFeedback"
-        @search="_getFeedbacks"
-      />
-    </v-col>
-
-    <v-col cols="12" md="6" class="fill-height">
-      <ChatMessage />
-    </v-col>
-
-    <v-col cols="12" md="3" class="fill-height">
-      <ChatInformation
-        :item="feedback"
-        :service-providers="_serviceProviders"
-        @edit="openEditDialog"
-        @mark-complete-request="showCompleteDialog = true"
-        @delete="showDeleteDialog = true"
-      />
-    </v-col>
-  </v-row>
+  <div class="feedback-detail-wrapper">
+    <v-row no-gutters class="fill-height">
+
+      <v-col cols="12" xl="3" lg="4" md="4" class="fill-height">
+        <div class="panel-container border-e">
+          <ChatNavigation
+            :title="'Feedbacks'"
+            :items="items"
+            @select="handleSelectFeedback"
+            @search="_getFeedbacks"
+          />
+        </div>
+      </v-col>
+
+
+      <v-col cols="12" xl="6" lg="5" md="5" class="fill-height">
+        <div class="panel-container border-e">
+          <ChatMessage />
+        </div>
+      </v-col>
+
+      
+      <v-col cols="12" xl="3" lg="3" md="3" class="fill-height">
+        <div class="panel-container">
+          <ChatInformation
+            :item="feedback"
+            :service-providers="_serviceProviders"
+            @edit="openEditDialog"
+            @mark-complete-request="showCompleteDialog = true"
+            @delete="showDeleteDialog = true"
+          />
+        </div>
+      </v-col>
+    </v-row>
+  </div>
 
   <FeedbackForm
     v-model="showCreateDialog"
@@ -463,3 +474,118 @@ async function submitFeedback(payload: TFeedbackUpdate) {
   }
 }
 </script>
+
+<style scoped>
+.feedback-detail-wrapper {
+  height: calc(100vh - 80px); /* Account for header and padding */
+  max-height: calc(100vh - 80px);
+  overflow: hidden;
+  position: relative;
+  background-color: rgb(var(--v-theme-surface));
+}
+
+.panel-container {
+  height: 100%;
+  max-height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background-color: rgb(var(--v-theme-surface));
+}
+
+.border-e {
+  border-right: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+}
+
+.fill-height {
+  height: 100%;
+  max-height: 100%;
+  overflow: hidden;
+}
+
+/* Ensure the root row doesn't create scrolling */
+.v-row.fill-height {
+  margin: 0;
+  height: 100%;
+  max-height: 100%;
+  overflow: hidden;
+  align-items: stretch;
+}
+
+/* Better column spacing */
+.v-col {
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Ensure responsive behavior */
+@media (max-width: 1280px) {
+  .feedback-detail-wrapper {
+    height: calc(100vh - 72px);
+    max-height: calc(100vh - 72px);
+  }
+}
+
+@media (max-width: 960px) {
+  .feedback-detail-wrapper {
+    height: calc(100vh - 64px); /* Mobile header height */
+    max-height: calc(100vh - 64px);
+  }
+  
+  .border-e {
+    border-right: none;
+    border-bottom: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  }
+  
+  .v-col {
+    height: auto;
+    min-height: 300px;
+  }
+}
+
+/* Individual component styling */
+:deep(.chat-navigation) {
+  height: 100%;
+  overflow-y: auto;
+  background-color: rgb(var(--v-theme-surface));
+}
+
+:deep(.chat-message) {
+  height: 100%;
+  overflow-y: auto;
+  background-color: rgb(var(--v-theme-surface));
+}
+
+:deep(.chat-information) {
+  height: 100%;
+  overflow-y: auto;
+  background-color: rgb(var(--v-theme-surface));
+  padding: 16px;
+}
+
+/* Smooth scrollbars */
+:deep(*::-webkit-scrollbar) {
+  width: 6px;
+}
+
+:deep(*::-webkit-scrollbar-track) {
+  background: transparent;
+}
+
+:deep(*::-webkit-scrollbar-thumb) {
+  background: rgba(var(--v-border-color), 0.3);
+  border-radius: 3px;
+}
+
+:deep(*::-webkit-scrollbar-thumb:hover) {
+  background: rgba(var(--v-border-color), 0.5);
+}
+
+/* Remove default margins/padding that might cause issues */
+:deep(.v-container) {
+  padding: 0;
+  margin: 0;
+  max-width: none;
+}
+</style>

package/components/FeedbackMain.vue

@@ -424,7 +424,7 @@ async function handleFileAdded(file: File) {
 
     const uploadedId = res?.id;
     if (uploadedId) {
-      const url = `${API_DO_STORAGE_ENDPOINT}/${uploadedId}`;
+      const url = `${uploadedId}`;
       _feedback.value.attachments = _feedback.value.attachments ?? [];
       _feedback.value.attachments.push(url);
     }

package/components/Input/File.vue

@@ -60,7 +60,7 @@
           class="d-flex align-center pa-2 mr-2 mb-2 rounded bg-white border-sm"
         >
           <div class="mr-3">
-            <v-img
+            <!-- <v-img
               v-if="!localErroredImages.includes(file)"
               :src="file"
               width="40"
@@ -76,6 +76,13 @@
               height="40"
               class="rounded"
               cover
+            /> -->
+            <v-img
+              :src="getThumbnail(file)"
+              width="40"
+              height="40"
+              class="rounded"
+              cover
             />
           </div>
 
@@ -166,12 +173,13 @@ function onImageError(file: string) {
 }
 
 function getThumbnail(fileUrl: string): string {
-  if (fileUrl.endsWith(".pdf")) return "mdi-file-pdf-outline";
-  if (fileUrl.match(/\.(doc|docx)$/i))
-    return "/images/file-thumbnails/word.png";
-  if (fileUrl.match(/\.(xls|xlsx)$/i))
-    return "/images/file-thumbnails/excel.png";
-  return "/images/file-thumbnails/file.png";
+  // if (fileUrl.endsWith(".pdf")) return "mdi-file-pdf-outline";
+  // if (fileUrl.match(/\.(doc|docx)$/i))
+  //   return "/images/file-thumbnails/word.png";
+  // if (fileUrl.match(/\.(xls|xlsx)$/i))
+  //   return "/images/file-thumbnails/excel.png";
+  // return "/images/file-thumbnails/file.png";
+  return `/api/public/${fileUrl}`
 }
 
 // Modified to try to display the friendly name

package/components/InvitationForm.vue

@@ -17,7 +17,8 @@
                 <v-text-field
                   v-model="invite.email"
                   density="comfortable"
-                  :rules="[requiredRule]"
+                  :rules="[requiredRule, emailRule]"
+                  :loading="loading.verifyingEmail"
                 ></v-text-field>
               </v-col>
             </v-row>
@@ -64,6 +65,7 @@
                   :items="sites"
                   density="comfortable"
                   :rules="[requiredRule]"
+                  @update:model-value="handleUpdateSite"
                 ></v-autocomplete>
               </v-col>
             </v-row>
@@ -118,7 +120,7 @@
             class="text-none"
             size="48"
             :disabled="!validForm"
-            :loading="submitting"
+            :loading="loading.submittingForm"
             @click="submit"
           >
             Submit
@@ -176,7 +178,11 @@ const emit = defineEmits(["cancel", "success", "success:create-more"]);
 const validForm = ref(false);
 const form = ref<HTMLFormElement | null>(null)
 const app = computed(() => useRuntimeConfig().public.APP ?? "");
-const submitting = ref(false);
+
+const loading = reactive({
+  submittingForm: false,
+  verifyingEmail: false
+})
 
 const invite = ref<Record<string, any>>({
   email: "",
@@ -279,7 +285,7 @@ function handleUpdateApp(value: string){
 const createMore = ref(false);
 const disable = ref(false);
 
-const { requiredRule } = useUtils();
+const { requiredRule, emailRule } = useUtils();
 
 const message = ref("");
 
@@ -290,10 +296,16 @@ function resetInvite() {
   message.value = "";
 }
 
+function handleUpdateSite(siteId: string){
+  const obj = sites.value.find( x => x?.value === siteId)
+  invite.value.siteName = obj?.title || ""
+}
+
 const { inviteUser } = useUser();
 
+
 async function submit() {
-  submitting.value = true;
+  loading.submittingForm = true;
   try {
     await inviteUser(invite.value);
 
@@ -305,7 +317,7 @@ async function submit() {
   } catch (error: any) {
     message.value = error.response._data.message;
   } finally {
-    submitting.value = false;
+    loading.submittingForm = false;
   }
 }
 

package/components/InvitationMain.vue

@@ -36,7 +36,7 @@
               <local-pagination
                 v-model="page"
                 :length="pages"
-                @update:value="_getVerifications({ search: headerSearch })"
+                @update:value="getVerifications"
               />
             </v-row>
           </template>
@@ -244,7 +244,8 @@ const {
     page: page.value,
     status: props.status,
     search: headerSearch.value,
-    type: "user-invite",
+    type: "user-invite,member-invite",
+    app: props.app
   })
 );
 
@@ -258,7 +259,7 @@ watchEffect(() => {
   }
 });
 
-watch([page, headerSearch], () => {
+watch([headerSearch], () => {
   getVerifications();
 });
 

package/components/TableMain.vue

@@ -4,14 +4,8 @@
     <v-col cols="12" class="mb-2" v-if="canCreate || $slots.actions">
       <v-row no-gutters>
         <slot name="actions">
-          <v-btn
-            v-if="canCreate"
-            class="text-none"
-            rounded="pill"
-            variant="tonal"
-            size="large"
-            @click="emits('create')"
-          >
+          <v-btn v-if="canCreate" class="text-none" rounded="pill" variant="tonal" size="large"
+            @click="emits('create')">
             {{ createLabel }}
           </v-btn>
         </slot>
@@ -20,13 +14,7 @@
 
     <!-- Table Card -->
     <v-col cols="12">
-      <v-card
-        width="100%"
-        variant="outlined"
-        border="thin"
-        rounded="lg"
-        :loading="loading"
-      >
+      <v-card width="100%" variant="outlined" border="thin" rounded="lg" :loading="loading">
         <!-- Toolbar -->
         <v-toolbar density="compact" color="grey-lighten-4">
           <template #prepend>
@@ -40,27 +28,20 @@
               <span class="mr-2 text-caption text-fontgray">
                 {{ pageRange }}
               </span>
-              <local-pagination
-                v-model="internalPage"
-                :length="pages"
-                @update:value="emits('update:page', internalPage)"
-              />
+              <local-pagination v-model="internalPage" :length="pages"
+                @update:value="emits('update:page', internalPage)" />
             </v-row>
           </template>
+
+          <template v-if="$slots.extension" #extension>
+            <slot name="extension" />
+          </template>
         </v-toolbar>
 
         <!-- Data Table -->
-        <v-data-table
-          :headers="headers"
-          :items="items"
-          :item-value="itemValue"
-          :items-per-page="itemsPerPage"
-          fixed-header
-          hide-default-footer
-          hide-default-header
-          @click:row="(_: any, data: any) => emits('row-click', data)"
-          style="max-height: calc(100vh - (200px))"
-        >
+        <v-data-table :headers="headers" :items="items" :item-value="itemValue" :items-per-page="itemsPerPage"
+          fixed-header hide-default-footer hide-default-header
+          @click:row="(_: any, data: any) => emits('row-click', data)" style="max-height: calc(100vh - (200px))">
           <template v-for="(_, slotName) in $slots" #[slotName]="slotProps">
             <slot :name="slotName" v-bind="slotProps" />
           </template>

package/composables/useUser.ts

@@ -5,10 +5,12 @@ export default function useUser() {
     role = "",
     name = "",
     org = "",
+    site="",
+    siteName="",
   } = {}) {
     return useNuxtApp().$api<Record<string, any>>("/api/auth/invite", {
       method: "POST",
-      body: { email, app, role, name, org },
+      body: { email, app, role, name, org, ...(site && {siteId: site}), ...(siteName && {siteName}) },
     });
   }
 
@@ -106,6 +108,12 @@ export default function useUser() {
     });
   }
 
+  function getUserByEmail(email = "") {
+    return useNuxtApp().$api<Record<string, any>>(`/api/users/email/${email}`, {
+      method: "GET"
+    });
+  }
+
   return {
     inviteUser,
     updateName,
@@ -119,5 +127,6 @@ export default function useUser() {
     createUserByInvite,
     getById,
     createUserByVerification,
+    getUserByEmail
   };
 }

package/composables/useVerification.ts

@@ -5,6 +5,7 @@ export default function useVerification() {
     search = "",
     page = 1,
     email = "",
+    app = ""
   } = {}): Promise<{
     items: TMiniVerification[];
     pages: number;
@@ -12,7 +13,7 @@ export default function useVerification() {
   }> {
     return useNuxtApp().$api("/api/verifications", {
       method: "GET",
-      query: { status, search, page, type, email },
+      query: { status, search, page, type, email, app },
     });
   }
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@iservice365/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",
@@ -20,7 +20,7 @@
     "typescript": "^5.8.3",
     "vite-plugin-vuetify": "^2.0.4",
     "vue": "latest",
-    "vuetify": "^3.7.3"
+    "vuetify": "^3.10.4"
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
   "dependencies": {

package/types/local.d.ts

@@ -7,6 +7,7 @@ declare type TToken = {
 declare type TNavigationRoute = {
   name: string;
   params?: TKeyValuePair;
+  query?: TKeyValuePair;
 };
 
 declare type TNavigationItem = {