@iservice365/layer-common 0.1.0 → 0.2.0

package/components/FeedbackMain.vue

@@ -0,0 +1,454 @@
+<template>
+  <v-row no-gutters>
+    <v-col cols="12" class="mb-2">
+      <v-row no-gutters>
+        <v-btn
+          class="text-none text-capitalize"
+          rounded="pill"
+          variant="tonal"
+          @click="showCreateDialog = true"
+          size="large"
+          v-if="canCreateFeedback"
+        >
+          Create Feedback
+        </v-btn>
+      </v-row>
+    </v-col>
+
+    <v-col cols="12">
+      <ListView
+        :headers="headers"
+        :items="items"
+        :pages="pages"
+        :page-range="pageRange"
+        :loading="loading"
+        :height="'calc(100vh - 175px)'"
+        v-model:page="page"
+        :selected="selected"
+        @update:value="getAllReqRefresh"
+        @update:selected="onSelectedUpdate"
+        @click:create="showCreateDialog = true"
+        :viewPage="{ name: 'org-site-feedbacks-id' }"
+        :clickable-rows="true"
+        :length="pages"
+      >
+        <template #title>
+          <span class="text-h6 font-weight-regular">Feedbacks</span>
+        </template>
+
+        <template #category="{ item }">
+          <span class="text-capitalize">{{ item.category }}</span>
+        </template>
+
+        <template #status="{ item }">
+          <v-chip
+            :color="getColorStatus(item.status || 'No Status')"
+            text-color="white"
+            variant="flat"
+          >
+            {{ item.status || "No Status" }}
+          </v-chip>
+        </template>
+
+        <template #action-table="{ item }">
+          <v-menu
+            v-model="item.menuOpen"
+            :close-on-content-click="false"
+            offset-y
+            width="150"
+          >
+            <template v-slot:activator="{ props }">
+              <v-icon v-bind="props">mdi-dots-horizontal-circle-outline</v-icon>
+            </template>
+            <v-list>
+              <v-list-item @click="onViewFeedback(item)">View</v-list-item>
+              <v-list-item @click="editFeedback(item)">Edit</v-list-item>
+              <v-list-item
+                @click="confirmDeleteFeedback(item)"
+                v-if="canDeleteFeedback"
+                >Delete</v-list-item
+              >
+            </v-list>
+          </v-menu>
+        </template>
+      </ListView>
+    </v-col>
+  </v-row>
+
+  <FeedbackForm
+    v-model="showCreateDialog"
+    :feedback="_feedback"
+    :is-edit-mode="isEditMode"
+    :loading="submitting"
+    :categories="serviceProviders"
+    :errored-images="erroredImages"
+    :max-files="5"
+    :message-fn="showMessage"
+    @close="handleCloseDialog"
+    @submit="submitFeedback"
+    @file-added="handleFileAdded"
+    @file-deleted="deleteFile"
+  />
+
+  <ConfirmDialog
+    v-model="showDeleteDialog"
+    :loading="submitting"
+    @submit="submitDelete"
+    :image-src="'/images/icons/delete-icon.png'"
+  >
+    <template #image>
+      <v-img
+        height="120"
+        src="/images/icons/delete-icon.png"
+        alt="Delete Icon"
+        contain
+      />
+    </template>
+
+    <template #title> Are you sure you want to delete this feedback? </template>
+
+    <template #footer>
+      <v-btn
+        color="primary-button"
+        variant="flat"
+        class="font-weight-bold py-5 d-flex align-center justify-center"
+        @click="submitDelete"
+        :loading="submitting"
+        block
+      >
+        Confirm
+      </v-btn>
+    </template>
+  </ConfirmDialog>
+
+  <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  detailRoute: {
+    type: String,
+    default: "index",
+  },
+  permissions: {
+    type: Object,
+    required: true,
+    default: () => ({}),
+  },
+  orgId: {
+    type: String,
+    default: "",
+  },
+  customerId: {
+    type: String,
+    default: "",
+  },
+  siteId: {
+    type: String,
+    default: "",
+  },
+  canCreateFeedback: {
+    type: Boolean,
+    default: false,
+  },
+  canViewFeedback: {
+    type: Boolean,
+    default: false,
+  },
+  canViewFeedbackDetails: {
+    type: Boolean,
+    default: false,
+  },
+  canDeleteFeedback: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const isEditMode = ref(false);
+const showCreateDialog = ref(false);
+const showDeleteDialog = ref(false);
+const submitting = ref(false);
+const message = ref("");
+const messageColor = ref("");
+const messageSnackbar = ref(false);
+
+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,
+    }));
+  }
+});
+
+const _feedback = ref({
+  subject: "",
+  category: "",
+  location: "",
+  description: "",
+  highPriority: false,
+  attachments: [] as string[],
+  serviceProvider: "",
+  assignee: "",
+  organization: "",
+  site: "",
+});
+
+const selected = ref<string[]>([]);
+
+const { getColorStatus } = useUtils();
+
+const headers = [
+  { title: "Name", value: "createdByName", align: "start" },
+  { title: "Subject", value: "subject", align: "start" },
+  { title: "Category", value: "category", align: "start" },
+  { title: "Status", value: "status", align: "start" },
+  { title: "", value: "action-table", align: "end" },
+];
+
+// const loading = ref(false);
+const erroredImages = ref<string[]>([]);
+const route = useRoute();
+const { customers } = useCustomer();
+
+const {
+  getFeedbacks: _getFeedbacks,
+  deleteFeedback,
+  createFeedback,
+  getFeedbackById,
+  updateFeedback,
+} = useFeedback();
+
+const page = ref(1);
+const pages = ref(0);
+const pageRange = ref("-- - -- of --");
+const items = ref<Array<Record<string, any>>>([]);
+
+const {
+  data: getAllFeedbackReq,
+  status: getAllReqStatus,
+  refresh: getAllReqRefresh,
+} = useLazyAsyncData("get-all-feedbacks", () =>
+  _getFeedbacks({
+    page: page.value,
+    organization: route.params.org as string,
+    site: route.params.site as string,
+  })
+);
+
+const loading = computed(() => getAllReqStatus.value === "pending");
+
+watchEffect(() => {
+  if (getAllFeedbackReq.value) {
+    items.value = getAllFeedbackReq.value.items;
+    pages.value = getAllFeedbackReq.value.pages;
+    pageRange.value = getAllFeedbackReq.value.pageRange;
+  }
+});
+
+function onSelectedUpdate(newSelected: string[]) {
+  selected.value = newSelected;
+}
+
+async function editFeedback(item: any) {
+  try {
+    const _feedbacks = await getFeedbackById(item._id);
+    _feedback.value = {
+      attachments: (_feedbacks.attachments || []) as string[],
+      category: _feedbacks.category || "",
+      subject: _feedbacks.subject || "",
+      location: _feedbacks.location || "",
+      description: _feedbacks.description || "",
+      organization: _feedbacks.organization || "",
+      site: _feedbacks.site || "",
+      highPriority: _feedbacks.highPriority || false,
+      serviceProvider: _feedbacks.serviceProvider || "",
+      assignee: _feedbacks.assignee || "",
+    };
+    _feedbackId.value = item._id;
+    isEditMode.value = true;
+    showCreateDialog.value = true;
+  } catch (error) {
+    showMessage("Failed to load full feedback", "error");
+  }
+}
+
+function onViewFeedback(item: any) {
+  const route = useRoute();
+  const org = route.params.org;
+  const customer = route.params.customer;
+  const site = route.params.site;
+  const id = item._id;
+  useRouter().push({
+    name: props.detailRoute,
+    params: { org, site, id },
+  });
+}
+
+function confirmDeleteFeedback(item: any) {
+  feedbackToDelete.value = item;
+  showDeleteDialog.value = true;
+}
+
+const feedbackToDelete = ref<any>(null);
+
+async function submitDelete() {
+  if (!feedbackToDelete.value) return;
+  submitting.value = true;
+  try {
+    const response = await deleteFeedback(feedbackToDelete.value._id);
+    showMessage(response.message, "success");
+    await getAllReqRefresh();
+  } catch (error) {
+    console.error("Failed to delete feedback:", error);
+    showMessage("Failed to delete feedback!", "error");
+  } finally {
+    submitting.value = false;
+    showDeleteDialog.value = false;
+    feedbackToDelete.value = null;
+  }
+}
+
+const resetFeedbackForm = () => {
+  _feedback.value = {
+    attachments: [] as string[],
+    category: "",
+    subject: "",
+    location: "",
+    description: "",
+    highPriority: false,
+    serviceProvider: "",
+    assignee: "",
+    organization: "",
+    site: "",
+  };
+};
+
+function handleCloseDialog() {
+  resetFeedbackForm();
+  isEditMode.value = false;
+  showCreateDialog.value = false;
+}
+const _feedbackId = ref<string | null>(null);
+
+async function _createFeedback(organization: string, site: string) {
+  const createPayload: TFeedbackCreate = {
+    subject: _feedback.value.subject,
+    category: _feedback.value.category,
+    location: _feedback.value.location,
+    description: _feedback.value.description,
+    highPriority: _feedback.value.highPriority ?? false,
+    attachments: _feedback.value.attachments || [],
+    serviceProvider: _feedback.value.serviceProvider || "",
+    assignee: _feedback.value.assignee || "",
+    organization,
+    site,
+  };
+
+  const response = await createFeedback(createPayload);
+  showMessage(response?.message || "Feedback created successfully", "success");
+}
+
+async function _updateFeedback() {
+  if (!_feedbackId.value) return;
+
+  const updatePayload: TFeedbackUpdate = {
+    subject: _feedback.value.subject,
+    category: _feedback.value.category,
+    location: _feedback.value.location,
+    description: _feedback.value.description,
+    attachments: _feedback.value.attachments || [],
+  };
+
+  const response = await updateFeedback(_feedbackId.value, updatePayload);
+  showMessage(response?.message || "Feedback updated successfully", "success");
+}
+
+const submitFeedback = async () => {
+  submitting.value = true;
+
+  try {
+    const organization = route.params.org as string;
+    const site = route.params.site as string;
+
+    if (isEditMode.value) {
+      await _updateFeedback();
+    } else {
+      await _createFeedback(organization, site);
+    }
+
+    showCreateDialog.value = false;
+    await getAllReqRefresh();
+    resetFeedbackForm();
+  } catch (error) {
+    console.error(error);
+    showMessage("Something went wrong", "error");
+  } finally {
+    submitting.value = false;
+  }
+};
+
+function showMessage(msg: string, color: string) {
+  message.value = msg;
+  messageColor.value = color;
+  messageSnackbar.value = true;
+}
+
+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}`;
+      _feedback.value.attachments = _feedback.value.attachments ?? [];
+      _feedback.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);
+    _feedback.value.attachments = (_feedback.value.attachments ?? []).filter(
+      (file) => file !== value
+    );
+  } catch (error) {
+    console.log(error);
+    showMessage("Failed to delete file", "error");
+  }
+}
+
+const { serviceProviderCategories, getServiceProviderCategories } =
+  useServiceProvider();
+
+const categories = computed(() =>
+  serviceProviderCategories.value.map((name) => ({
+    title: name.charAt(0).toUpperCase() + name.slice(1),
+    value: name,
+  }))
+);
+
+getServiceProviderCategories();
+</script>

package/components/FormDialog.vue

@@ -0,0 +1,65 @@
+<template>
+  <v-dialog v-model="model" max-width="600" persistent>
+    <v-card
+      class="px-3 d-flex flex-column"
+      :class="`${theme.name.value === 'light' ? 'bg-white' : ''} ${
+        mdAndUp ? 'rounded-xl' : ''
+      }`"
+      :style="{ border: 'none', boxShadow: 'none' }"
+    >
+      <v-toolbar
+        :color="theme.name.value === 'dark' ? 'grey-darken-4' : 'white'"
+        class="flex-shrink-0 mb-3"
+        style="position: sticky; top: 0; z-index: 10"
+      >
+        <slot name="title">
+          <span class="text-h6 font-weight-medium pt-1 text-capitalize">
+            Dialog
+          </span>
+        </slot>
+        <v-spacer />
+        <v-btn icon="mdi-close" @click="closeDialog" />
+      </v-toolbar>
+
+      <v-sheet class="flex-grow-1 overflow-y-auto px-3">
+        <slot />
+      </v-sheet>
+
+      <v-sheet class="flex-shrink-0 px-3 py-2">
+        <slot name="footer" />
+      </v-sheet>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { useTheme, useDisplay } from "vuetify";
+
+const theme = useTheme().global;
+const { mdAndUp } = useDisplay();
+
+const props = defineProps<{
+  modelValue: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: boolean): void;
+  (e: "close"): void;
+}>();
+
+const model = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value),
+});
+
+function closeDialog() {
+  model.value = false;
+  emit("close");
+}
+</script>
+
+<style scoped>
+:deep(.v-dialog .v-overlay__content) {
+  margin: auto;
+}
+</style>

package/components/Input/File.vue

@@ -0,0 +1,203 @@
+<template>
+  <div>
+    <v-row class="mb-4" align="center" no-gutters>
+      <v-col cols="10" class="pr-2">
+        <div
+          class="d-flex align-center justify-center pa-4 rounded-lg border-dashed border border-grey"
+          @dragover.prevent
+          @drop="handleDrop"
+          style="position: relative; z-index: 1"
+        >
+          <v-file-input
+            ref="dropInput"
+            v-model="files"
+            multiple
+            hide-details
+            :max-files="maxFiles"
+            style="
+              opacity: 0;
+              position: absolute;
+              inset: 0;
+              z-index: 2;
+              cursor: pointer;
+            "
+            @change="onFileChange"
+          />
+          <div
+            class="d-flex align-center"
+            style="z-index: 1; pointer-events: none"
+          >
+            <v-icon size="28" class="mr-2" color="primary"
+              >mdi-cloud-upload-outline</v-icon
+            >
+            <span class="text-body-1 font-weight-medium"
+              >Drag and drop files here</span
+            >
+          </div>
+        </div>
+      </v-col>
+
+      <v-col cols="2" class="d-flex justify-center">
+        <v-btn
+          color="primary-button"
+          min-width="55"
+          width="55"
+          height="55"
+          elevation="0"
+          @click="selectAttachment"
+        >
+          <v-icon size="20">mdi-camera-outline</v-icon>
+        </v-btn>
+      </v-col>
+    </v-row>
+
+    <v-sheet v-if="attachments.length > 0" elevation="0" class="py-3" rounded>
+      <v-row no-gutters>
+        <v-col
+          v-for="(file, index) in attachments"
+          :key="index"
+          cols="12"
+          class="d-flex align-center pa-2 mr-2 mb-2 rounded bg-white border-sm"
+        >
+          <div class="mr-3">
+            <v-img
+              v-if="!localErroredImages.includes(file)"
+              :src="file"
+              width="40"
+              height="40"
+              class="rounded"
+              cover
+              @error="onImageError(file)"
+            />
+            <v-img
+              v-else
+              :src="getThumbnail(file)"
+              width="40"
+              height="40"
+              class="rounded"
+              cover
+            />
+          </div>
+
+          <div class="flex-grow-1 text-truncate">
+            {{ getDisplayName(file) }}
+          </div>
+
+          <v-icon size="small" @click.stop="$emit('delete', file)">
+            mdi-trash-can-outline
+          </v-icon>
+        </v-col>
+      </v-row>
+    </v-sheet>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  attachments: string[];
+  erroredImages?: string[];
+  maxFiles?: number;
+}>();
+
+const emit = defineEmits<{
+  (e: "add", file: File): void;
+  (e: "delete", url: string): void;
+  (e: "errored", url: string): void;
+}>();
+
+const dropInput = ref<any>(null);
+const files = ref<File[]>([]);
+const localErroredImages = ref<string[]>(props.erroredImages || []);
+// Store file names for display
+const fileNamesMap = ref<Record<string, string>>({});
+
+watch(
+  () => props.erroredImages,
+  (val) => {
+    if (val) {
+      localErroredImages.value = val;
+    }
+  }
+);
+
+function handleDrop(event: DragEvent) {
+  const droppedFiles = event.dataTransfer?.files;
+  if (droppedFiles?.length) {
+    files.value = Array.from(droppedFiles);
+    onFileChange();
+  }
+}
+
+function selectAttachment() {
+  const input = dropInput.value?.$el?.querySelector(
+    "input[type='file']"
+  ) as HTMLInputElement | null;
+  input?.click();
+}
+
+function onFileChange() {
+  if (files.value.length) {
+    console.log(
+      "onFileChange triggered with files:",
+      files.value.map((f) => f.name)
+    );
+
+    const maxFiles = props.maxFiles || 5;
+    if (files.value.length > maxFiles) {
+      console.warn(`Too many files selected. Maximum allowed: ${maxFiles}`);
+      files.value = [];
+      return;
+    }
+
+    files.value.forEach((file) => {
+      console.log(`Emitting 'add' event for file: ${file.name}`);
+      // For each file, we'll also need to store its original name
+      // This will be associated with the file URL in the parent component
+      emit("add", file);
+    });
+
+    files.value = [];
+  }
+}
+
+function onImageError(file: string) {
+  console.log(`Image error for file: ${file}`);
+  emit("errored", file);
+}
+
+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";
+}
+
+// Modified to try to display the friendly name
+function getFileName(fileUrl: string): string {
+  try {
+    const url = new URL(fileUrl);
+    return decodeURIComponent(url.pathname.split("/").pop() || "");
+  } catch (e) {
+    return fileUrl.split("/").pop() || "";
+  }
+}
+
+// This will use our stored file names when available
+function getDisplayName(fileUrl: string): string {
+  // If we have a friendly name stored, use it
+  if (fileNamesMap.value[fileUrl]) {
+    return fileNamesMap.value[fileUrl];
+  }
+  // Otherwise fall back to the ID/URL-based name
+  return getFileName(fileUrl);
+}
+
+// Method to update file names map - will be called from parent
+defineExpose({
+  updateFileName: (url: string, name: string) => {
+    fileNamesMap.value[url] = name;
+  },
+});
+</script>