@7365admin1/layer-common 1.8.0

package/components/FeedbackMain.vue

@@ -0,0 +1,588 @@
+<template>
+  <v-row no-gutters>
+    <v-col cols="12" class="mb-2">
+      <v-row no-gutters align="center" justify="space-between">
+        <v-btn
+          class="text-none text-capitalize"
+          rounded="pill"
+          variant="tonal"
+          size="large"
+          @click="showCreateDialog = true"
+          v-if="canCreateFeedback"
+        >
+          Create Feedback
+        </v-btn>
+
+        <v-text-field
+          v-model="searchText"
+          placeholder="Search feedback..."
+          variant="outlined"
+          density="comfortable"
+          clearable
+          hide-details
+          class="ml-2"
+          style="max-width: 250px"
+        />
+      </v-row>
+    </v-col>
+
+    <v-col cols="12">
+      <v-card
+        width="100%"
+        variant="outlined"
+        border="thin"
+        rounded="lg"
+        :loading="loading"
+      >
+        <v-toolbar density="compact" color="grey-lighten-4">
+          <template #prepend>
+            <v-btn fab icon density="comfortable" @click="updatePage(1)">
+              <v-icon>mdi-refresh</v-icon>
+            </v-btn>
+          </template>
+
+          <template #append>
+            <v-row no-gutters justify="end" align="center">
+              <span class="mr-2 text-caption text-fontgray">
+                {{ pageRange }}
+              </span>
+              <local-pagination
+                v-model="page"
+                :length="pages"
+                @update:value="updatePage"
+              />
+            </v-row>
+          </template>
+        </v-toolbar>
+
+        <v-data-table
+          :headers="headers"
+          :items="items"
+          item-value="_id"
+          items-per-page="20"
+          fixed-header
+          hide-default-footer
+          :hide-default-header="false"
+          @click:row="tableRowClickHandler"
+          style="max-height: calc(100vh - (200px))"
+        >
+        </v-data-table>
+      </v-card>
+    </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" />
+
+  <!-- Preview Dialog -->
+  <v-dialog
+    v-model="dialogPreview"
+    width="450"
+    persistent
+    v-if="canViewFeedback"
+  >
+    <v-card width="100%">
+      <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0">
+        <v-row no-gutters v-if="selectedFeedback" class="mb-4">
+          <v-col cols="12">
+            <strong>Subject:</strong> {{ selectedFeedback.subject }}
+          </v-col>
+          <v-col cols="12">
+            <strong>Category:</strong>
+            {{ selectedFeedback.category }}
+          </v-col>
+          <v-col cols="12">
+            <strong>Status:</strong>
+            {{ selectedFeedback.status }}
+          </v-col>
+        </v-row>
+      </v-card-text>
+      <v-toolbar class="pa-0" density="compact">
+        <v-row no-gutters>
+          <v-col cols="6" class="pa-0">
+            <v-btn
+              block
+              variant="text"
+              class="text-none"
+              size="large"
+              @click="dialogPreview = false"
+              height="48"
+            >
+              Close
+            </v-btn>
+          </v-col>
+          <v-col cols="6" class="pa-0">
+            <v-menu>
+              <template #activator="{ props }">
+                <v-btn
+                  block
+                  variant="flat"
+                  color="black"
+                  class="text-none"
+                  height="48"
+                  v-bind="props"
+                  tile
+                >
+                  More actions
+                </v-btn>
+              </template>
+
+              <v-list class="pa-0">
+                <v-list-item
+                  v-if="canViewFeedbackDetails"
+                  @click="onViewFeedback(selectedFeedback)"
+                >
+                  <v-list-item-title class="text-subtitle-2">
+                    View
+                  </v-list-item-title>
+                </v-list-item>
+                <v-list-item
+                  v-if="canUpdateFeedback"
+                  @click="editFeedback(selectedFeedback)"
+                >
+                  <v-list-item-title class="text-subtitle-2">
+                    Edit
+                  </v-list-item-title>
+                </v-list-item>
+
+                <v-list-item
+                  v-if="canDeleteFeedback"
+                  @click="confirmDeleteFeedback(selectedFeedback)"
+                  class="text-red"
+                >
+                  <v-list-item-title class="text-subtitle-2">
+                    Delete
+                  </v-list-item-title>
+                </v-list-item>
+              </v-list>
+            </v-menu>
+          </v-col>
+        </v-row>
+      </v-toolbar>
+    </v-card></v-dialog
+  >
+</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,
+  },
+  canUpdateFeedback: {
+    type: Boolean,
+    default: false,
+  },
+  category: {
+    type: String,
+    default: "",
+  },
+});
+
+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 { getUserFromCookie } = useLocal();
+
+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,
+//   })
+// );
+
+const { getBySiteAsServiceProvider } = useCustomerSite();
+
+const { data: getAllReq } = useLazyAsyncData(
+  "get-by-site-as-service-provider",
+  () => getBySiteAsServiceProvider(useRoute().params.site as string)
+);
+
+watchEffect(() => {
+  if (getAllReq.value) {
+    serviceProviders.value = getAllReq.value.map((i: any) => ({
+      title: i.nature.replace(/_/g, " "),
+      subtitle: i.title,
+      value: i.nature,
+    }));
+  }
+});
+
+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: Array<Record<string, any>> = [
+  { 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-" + props.category, () =>
+  _getFeedbacks({
+    page: page.value,
+    site: route.params.site as string,
+    category: props.category,
+  })
+);
+
+const loading = computed(() => getAllReqStatus.value === "pending");
+const onNextPrevPageLoading = ref(false);
+
+watchEffect(() => {
+  if (getAllFeedbackReq.value) {
+    items.value = getAllFeedbackReq.value.items;
+    pages.value = getAllFeedbackReq.value.pages;
+    pageRange.value = getAllFeedbackReq.value.pageRange;
+  }
+});
+
+async function updatePage(pageVal: any) {
+  onNextPrevPageLoading.value = true;
+  page.value = pageVal;
+  const response = await _getFeedbacks({
+    page: page.value,
+    site: route.params.site as string,
+    category: props.category,
+  });
+  if (response) {
+    items.value = response.items;
+    pages.value = response.pages;
+    pageRange.value = response.pageRange;
+    onNextPrevPageLoading.value = false;
+  }
+}
+
+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;
+    dialogPreview.value = false;
+  } 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 },
+  });
+  dialogPreview.value = false;
+}
+
+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;
+    dialogPreview.value = false;
+  }
+}
+
+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 userId = getUserFromCookie();
+
+  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,
+    ...(userId !== null ? { createdBy: userId } : {}),
+  };
+
+  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 = `${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,
+  }))
+);
+
+function tableRowClickHandler(_: any, data: any) {
+  console.log(data.item);
+  selectedFeedback.value = data.item;
+  dialogPreview.value = true;
+}
+
+const dialogPreview = ref(false);
+const selectedFeedback = ref<TFeedback | null>(null);
+const searchText = ref("");
+
+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>