@iservice365/layer-common 1.0.9 → 1.0.11

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @iservice365/layer-common
 
+## 1.0.11
+
+### Patch Changes
+
+- 368e98f: Invitation - Add key to API request
+
+## 1.0.10
+
+### Patch Changes
+
+- 4cdf32b: Invitation form - revise app selection
+
 ## 1.0.9
 
 ### Patch Changes

package/components/Avatar/Main.vue

@@ -0,0 +1,68 @@
+<template>
+    <v-avatar :color="getColor(name || id)" :size="size">
+        <v-img v-if="imageSrc" alt="John" :src="imageUrl" />
+        <span v-else :style="{
+            fontSize: `${fontSize}px`,
+            lineHeight: `${size}px`
+        }">{{ initials }}</span>
+    </v-avatar>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+    name: {
+        type: String,
+        default: ""
+    },
+    color: {
+        type: String,
+        default: 'red'
+    },
+    size: {
+        type: Number,
+        default: 40
+    },
+    id: {
+        type: String, //fallback for constant default color without name
+        default: ""
+    },
+    imageSrc:{
+        type: String,
+        default: ""
+    }
+
+})
+
+
+const { getNameInitials } = useUtils();
+const { getFileUrl } = useFile();
+
+const initials = computed(() => {
+    return getNameInitials(props.name)
+})
+
+const fontSize = computed(() => Math.round(props.size * 0.5))
+
+function getColor(str?: string): string {
+    if(!str) return "grey"
+
+    let hash = 0
+    for (let i = 0; i < str.length; i++) {
+        hash = (hash << 5) - hash + str.charCodeAt(i)
+        hash |= 0 // Convert to 32-bit integer
+    }
+
+    const hue = Math.abs(hash) % 360
+    const saturation = 60 + (Math.abs((hash >> 3) % 20)) // 60–80%
+    const lightness = 45 + (Math.abs((hash >> 5) % 15)) // 45–60%
+
+    return `hsl(${hue}, ${saturation}%, ${lightness}%)`
+}
+
+const imageUrl = computed(() => {
+    return getFileUrl(props?.imageSrc || '')
+})
+
+</script>
+
+<style scoped></style>

package/components/Chat/Information.vue

@@ -8,51 +8,19 @@
     <v-row class="pa-4">
       <v-sheet
         class="overflow-y-auto flex-grow-1"
-        :style="{ height: 'calc(100vh - 180px)', overflowX: 'hidden' }"
+        :style="{ height: 'calc(100vh - 250px)', overflowX: 'hidden' }"
       >
         <v-col
           cols="12"
           class="mb-2"
           style="position: sticky; top: 0; background-color: white; z-index: 1"
         >
-          <h3 class="text-h6">Information</h3>
+          <h3 class="text-h6">
+            {{ type === "workOrder" ? "Work Order" : "Feedback" }} Information
+          </h3>
         </v-col>
 
-        <v-col cols="12" class="text-center mb-3" v-if="item">
-          <!-- <v-avatar
-            size="48"
-            class="mb-1"
-            v-if="!item.attachments || !item.attachments.length"
-          >
-            <v-img v-if="currentUser?.profile" width="15" height="15" />
-            <span v-else class="text-h5">{{
-              getNameInitials(senderName)
-            }}</span>
-          </v-avatar>
-
-          <v-img
-            v-else-if="item.attachments.length === 1"
-            :src="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 cols="12" class="text-center mb-0" v-if="item">
           <v-img
             v-if="item.attachments.length === 1"
             :src="`/api/public/${item.attachments[0]}`"
@@ -61,7 +29,7 @@
             class="rounded mb-2"
           />
           <v-carousel
-            v-else
+            v-else-if="item.attachments.length > 1"
             hide-delimiter-background
             height="200"
             class="rounded mb-2"
@@ -82,10 +50,19 @@
         </v-col>
 
         <v-col cols="12" v-if="item">
-          <v-row dense class="my-1">
+          <v-row dense class="my-1" v-if="type === 'feedback'">
+            <v-col cols="12" class="py-1"><strong>Subject:</strong></v-col>
+            <v-col cols="12" class="py-1">
+              {{ item.subject }}
+            </v-col>
+          </v-row>
+
+          <v-divider />
+
+          <v-row dense class="my-1 pr-4">
             <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
+              item.categoryInfo
             }}</v-col>
           </v-row>
 
@@ -97,7 +74,7 @@
           </v-row>
           <v-divider />
 
-          <v-row dense class="my-1">
+          <v-row dense class="my-1" v-if="type === 'feedback'">
             <v-col cols="12" class="py-1"
               ><strong>Description Feedback:</strong></v-col
             >
@@ -107,22 +84,45 @@
           </v-row>
           <v-divider />
 
-          <v-row dense class="my-1">
+          <v-row dense class="my-1" v-if="type === 'workOrder'">
             <v-col cols="12" class="py-1"
               ><strong>Description Work Order:</strong></v-col
             >
             <v-col cols="12" class="py-1">
-              {{
-                item.workOrderDescription ||
-                "No work order description available"
-              }}
+              {{ item.description || "No work order description available" }}
             </v-col>
           </v-row>
           <v-divider />
 
-          <v-row dense class="my-1">
-            <v-col cols="6" class="py-1"><strong>Workorder:</strong></v-col>
-            <v-col cols="6" class="py-1 text-right">{{ item.workOrder }}</v-col>
+          <v-row dense class="my-1" v-if="type === 'feedback'">
+            <v-col cols="6" class="py-1"
+              ><strong>Work Order No.:</strong></v-col
+            >
+            <v-col v-if="item.workOrderNo" cols="6" class="py-1 text-right">
+              <NuxtLink :to="showWorkOrderInfo(item.workOrderId)">{{
+                item.workOrderNo
+              }}</NuxtLink>
+            </v-col>
+            <v-col v-else cols="6" class="py-1 text-right">
+              <v-btn
+                class="text-none text-capitalize text-blue"
+                rounded="pill"
+                variant="flat"
+                size="small"
+                @click="openWorOrderCreateDialog()"
+              >
+                Create WorkOrder
+              </v-btn>
+            </v-col>
+          </v-row>
+
+          <v-row dense class="my-1" v-if="type === 'workOrder'">
+            <v-col cols="6" class="py-1"
+              ><strong>Work Order Number:</strong></v-col
+            >
+            <v-col v-if="item.workOrderNo" cols="6" class="py-1 text-right"
+              >{{ item.workOrderNo }}
+            </v-col>
           </v-row>
 
           <v-divider />
@@ -149,22 +149,19 @@
             }}</v-col>
           </v-row>
         </v-col>
-
-        <v-col cols="12">
-          <v-btn
-            block
-            color="primary"
-            variant="flat"
-            class="mb-2 text-capitalize"
-            @click="$emit('edit')"
-          >
-            Edit
-          </v-btn>
-        </v-col>
       </v-sheet>
     </v-row>
 
     <v-sheet class="px-4 py-2">
+      <v-btn
+        block
+        color="primary"
+        variant="flat"
+        class="mb-2 text-capitalize"
+        @click="$emit('edit')"
+      >
+        Edit
+      </v-btn>
       <v-btn
         v-if="item?.status !== 'Completed'"
         block
@@ -186,13 +183,34 @@
         Delete
       </v-btn>
     </v-sheet>
+
+    <WorkOrderCreate
+      v-model="showCreateDialog"
+      :created-from="'feedback'"
+      :work-order="_workOrder"
+      @update:work-order="(val: TWorkOrderCreate) => (_workOrder = val)"
+      :is-edit-mode="isEditMode"
+      :loading="isSubmitting"
+      :categories="serviceProviders"
+      :theme="theme"
+      :errored-images="erroredImages"
+      :max-files="5"
+      :message-fn="showMessage"
+      @close="handleCloseDialog"
+      @file-added="handleFileAdded"
+      @file-deleted="deleteFile"
+      @submit="submitWorkOrder"
+    />
+
+    <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
   </v-sheet>
 </template>
 
 <script setup lang="ts">
+import { useTheme } from "vuetify";
 const { getColorStatus, formatDate } = useUtils();
 
-defineProps({
+const props = defineProps({
   item: {
     type: Object,
     default: () => ({}),
@@ -201,15 +219,181 @@ defineProps({
     type: String,
     default: "",
   },
+  type: {
+    type: String,
+    default: "feedback",
+  },
 });
 
-const emit = defineEmits([
-  "update:provider",
-  "mark-complete-request",
-  "delete",
-  "edit",
-]);
+const emit = defineEmits<{
+  (e: "update:provider", serviceProvider: string): void;
+  (e: "mark-complete-request"): void;
+  (e: "delete"): void;
+  (e: "edit"): void;
+  (e: "updateWorkOrderId", workOrderId: string): void;
+}>();
 
 const { currentUser } = useLocalAuth();
 const { getNameInitials } = useUtils();
+
+const showCreateDialog = ref(false);
+const isEditMode = ref(false);
+const isSubmitting = ref(false);
+const theme = useTheme().name;
+const erroredImages = ref<string[]>([]);
+
+const message = ref("");
+const messageColor = ref("");
+const messageSnackbar = ref(false);
+
+const route = useRoute();
+
+const { getWorkOrders: _getWorkOrders, createWorkOrder } = useWorkOrder();
+
+const _workOrder = ref<TWorkOrderCreate>({
+  attachments: [],
+  category: "",
+  subject: "",
+  location: "",
+  description: "",
+  highPriority: false,
+  block: "",
+  level: "",
+  unit: "",
+  serviceProvider: "",
+  assignee: "",
+  organization: "",
+  site: "",
+});
+
+const serviceProviders = ref<
+  Array<{ title: string; value: string; subtitle: string }>
+>([]);
+const { getAll: getAllServiceProvider } = useServiceProvider();
+
+const { data: getAllReq } = useLazyAsyncData("get-all-service-providers", () =>
+  getAllServiceProvider({
+    siteId: useRoute().params.site as string,
+  })
+);
+
+watchEffect(() => {
+  if (getAllReq.value) {
+    serviceProviders.value = getAllReq.value.items.map((i: any) => ({
+      title: i.nature.replace(/_/g, " "),
+      value: i.serviceProviderOrgId,
+      subtitle: i.name,
+    }));
+  }
+});
+
+function showMessage(msg: string, color: string) {
+  message.value = msg;
+  messageColor.value = color;
+  messageSnackbar.value = true;
+}
+
+function handleCloseDialog() {
+  resetWorkOrderForm();
+  isEditMode.value = false;
+  showCreateDialog.value = false;
+}
+
+function openWorOrderCreateDialog() {
+  let newWorkOrder = {
+    ..._workOrder.value,
+    attachments:
+      props.item.attachments.length > 0 ? props.item.attachments : [],
+    subject: props.item.subject ? props.item.subject : "",
+    category: props.item.category ? props.item.category : "",
+    location: props.item.location ? props.item.location : "",
+  };
+  _workOrder.value = newWorkOrder;
+  showCreateDialog.value = true;
+}
+
+function resetWorkOrderForm() {
+  _workOrder.value = {
+    attachments: [],
+    category: "",
+    subject: "",
+    location: "",
+    description: "",
+    highPriority: false,
+    block: "",
+    level: "",
+    unit: "",
+    serviceProvider: "",
+    assignee: "",
+    organization: "",
+    site: "",
+  };
+}
+
+const { addFile, deleteFile: _deleteFile } = useFile();
+
+const API_DO_STORAGE_ENDPOINT =
+  useRuntimeConfig().public.API_DO_STORAGE_ENDPOINT;
+
+async function handleFileAdded(file: File) {
+  try {
+    const res = await addFile(file);
+    const uploadedId = res?.id;
+    if (uploadedId) {
+      const url = `${API_DO_STORAGE_ENDPOINT}/${uploadedId}`;
+      _workOrder.value.attachments = _workOrder.value.attachments ?? [];
+      _workOrder.value.attachments.push(url);
+    }
+  } catch (error) {
+    console.error("Error uploading file:", error);
+    showMessage("Failed to upload file", "error");
+  }
+}
+
+async function deleteFile(value: string) {
+  try {
+    await _deleteFile(value);
+    _workOrder.value.attachments = (_workOrder.value.attachments ?? []).filter(
+      (file) => file !== value
+    );
+  } catch (error) {
+    console.log(error);
+    showMessage("Failed to delete file", "error");
+  }
+}
+
+async function submitWorkOrder() {
+  try {
+    isSubmitting.value = true;
+
+    const payload = {
+      ..._workOrder.value,
+      organization: route.params.org as string,
+      site: route.params.site as string,
+    };
+
+    const res = await createWorkOrder(payload);
+
+    showMessage(res.message, "success");
+    showCreateDialog.value = false;
+    resetWorkOrderForm();
+    emit("updateWorkOrderId", res.workOrderId);
+    // getAllReqRefresh();
+  } catch (err) {
+    showMessage((err as Error).message, "error");
+  } finally {
+    isSubmitting.value = false;
+  }
+}
+
+function showWorkOrderInfo(workOrderId: string) {
+  const route = useRoute();
+  const org = route.params.org;
+  const site = route.params.site;
+  const id = workOrderId;
+  return {
+    name: "org-site-work-orders-id",
+    params: { org, site, id },
+  };
+}
 </script>

package/components/Chat/Message.vue

@@ -6,7 +6,9 @@
     style="border-right: 1px solid #e0e0e0; border-top: 1px solid #e0e0e0"
   >
     <div style="border-bottom: 1px solid #e0e0e0" class="px-4 pt-4 pb-2 mb-2">
-      <h3 class="text-h6">Chat</h3>
+      <h3 class="text-h6">
+        {{ type === "workOrder" ? "Work Order" : "Feedback" }} Chat
+      </h3>
     </div>
 
     <v-sheet
@@ -94,6 +96,13 @@
 </template>
 
 <script setup lang="ts">
+defineProps({
+  type: {
+    type: String,
+    default: "feedback",
+  },
+});
+
 const messages = [
   {
     isCurrentUser: true,

package/components/FeedbackDetail.vue

@@ -1,8 +1,7 @@
 <template>
   <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">
+      <!-- <v-col cols="12" xl="3" lg="4" md="4" class="fill-height">
         <div class="panel-container border-e">
           <ChatNavigation
             :title="'Feedbacks'"
@@ -11,24 +10,24 @@
             @search="_getFeedbacks"
           />
         </div>
-      </v-col>
-
+      </v-col> -->
 
-      <v-col cols="12" xl="6" lg="5" md="5" class="fill-height">
+      <v-col cols="12" xl="7" lg="7" md="7" class="fill-height">
         <div class="panel-container border-e">
-          <ChatMessage />
+          <ChatMessage :type="'feedback'" />
         </div>
       </v-col>
 
-      
-      <v-col cols="12" xl="3" lg="3" md="3" class="fill-height">
+      <v-col cols="12" xl="5" lg="5" md="5" class="fill-height">
         <div class="panel-container">
           <ChatInformation
             :item="feedback"
             :service-providers="_serviceProviders"
+            :type="'feedback'"
             @edit="openEditDialog"
             @mark-complete-request="showCompleteDialog = true"
             @delete="showDeleteDialog = true"
+            @update-work-order-id="updateWorkOrderId"
           />
         </div>
       </v-col>
@@ -473,6 +472,25 @@ async function submitFeedback(payload: TFeedbackUpdate) {
     submitting.value = false;
   }
 }
+
+async function updateWorkOrderId(workOrderId: string) {
+  const payload = {
+    category: feedback.value.category,
+    subject: feedback.value.subject,
+    location: feedback.value.location,
+    description: feedback.value.description,
+    workOrderId: workOrderId,
+  };
+  const response = await updateFeedback(feedback.value._id, payload);
+  const message =
+    response?.message || "Feedback updated with Work Order Number successfully";
+  showMessage(message, "success");
+
+  showCreateDialog.value = false;
+  await _getFeedbackById();
+
+  resetFeedbackForm();
+}
 </script>
 
 <style scoped>
@@ -532,12 +550,13 @@ async function submitFeedback(payload: TFeedbackUpdate) {
     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));
+    border-bottom: 1px solid
+      rgba(var(--v-border-color), var(--v-border-opacity));
   }
-  
+
   .v-col {
     height: auto;
     min-height: 300px;

package/components/FeedbackMain.vue

@@ -21,7 +21,7 @@
         :items="items"
         :pages="pages"
         :page-range="pageRange"
-        :loading="loading"
+        :loading="loading || onNextPrevPageLoading"
         :height="'calc(100vh - 175px)'"
         v-model:page="page"
         :selected="selected"
@@ -31,6 +31,7 @@
         :viewPage="{ name: 'org-site-feedbacks-id' }"
         :clickable-rows="true"
         :length="pages"
+        @update:pagination="updatePage"
       >
         <template #title>
           <span class="text-h6 font-weight-regular">Feedbacks</span>
@@ -252,6 +253,7 @@ const {
 );
 
 const loading = computed(() => getAllReqStatus.value === "pending");
+const onNextPrevPageLoading = ref(false);
 
 watchEffect(() => {
   if (getAllFeedbackReq.value) {
@@ -261,6 +263,22 @@ watchEffect(() => {
   }
 });
 
+async function updatePage(pageVal: any) {
+  onNextPrevPageLoading.value = true;
+  page.value = pageVal;
+  const response = await _getFeedbacks({
+    page: page.value,
+    organization: route.params.org as string,
+    site: route.params.site as string,
+  });
+  if (response) {
+    items.value = response.items;
+    pages.value = response.pages;
+    pageRange.value = response.pageRange;
+    onNextPrevPageLoading.value = false;
+  }
+}
+
 function onSelectedUpdate(newSelected: string[]) {
   selected.value = newSelected;
 }
@@ -347,7 +365,6 @@ function handleCloseDialog() {
 const _feedbackId = ref<string | null>(null);
 
 async function _createFeedback(organization: string, site: string) {
-
   const userId = getUserFromCookie();
 
   const createPayload: TFeedbackCreate = {
@@ -361,7 +378,7 @@ async function _createFeedback(organization: string, site: string) {
     assignee: _feedback.value.assignee || "",
     organization,
     site,
-    ...(userId !== null ? {createdBy: userId } : {}),
+    ...(userId !== null ? { createdBy: userId } : {}),
   };
 
   const response = await createFeedback(createPayload);