@iservice365/layer-common 0.0.6 → 0.2.0

package/components/ConfirmDialog.vue

@@ -0,0 +1,66 @@
+<template>
+  <v-dialog v-model="dialog" max-width="400" persistent>
+    <v-card class="rounded-xl pa-6" elevation="2">
+      <!-- Close Button -->
+      <v-btn
+        icon
+        variant="text"
+        size="small"
+        class="position-absolute"
+        style="top: 8px; right: 8px"
+        @click="closeDialog"
+      >
+        <v-icon>mdi-close</v-icon>
+      </v-btn>
+
+      <v-card-text class="text-center">
+        <v-row v-if="imageSrc" justify="center" class="py-10">
+          <v-img height="120" :src="imageSrc" alt="Dialog Image" contain />
+        </v-row>
+
+        <!-- Title Slot -->
+        <div class="text-h6 font-weight-medium mb-2">
+          <slot name="title"></slot>
+        </div>
+
+        <!-- Description Slot -->
+        <div class="text-body-1 mb-4">
+          <slot name="description"></slot>
+        </div>
+      </v-card-text>
+
+      <!-- Footer Slot -->
+      <v-card-actions>
+        <slot name="footer"></slot>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  imageSrc: {
+    type: String,
+    default: "",
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["update:modelValue", "submit"]);
+
+const dialog = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value),
+});
+
+function closeDialog() {
+  dialog.value = false;
+}
+</script>

package/components/Container/Standard.vue

@@ -0,0 +1,33 @@
+<template>
+  <v-row no-gutters>
+    <v-col cols="12">
+      <span
+        class="font-weight-medium text-subtitle-1 text-decoration-underline cursor-pointer"
+        @click="emit('back')"
+      >
+        Back
+      </span>
+    </v-col>
+    <v-col cols="12">
+      <span class="text-h5 font-weight-medium">{{ props.title }}</span>
+    </v-col>
+
+    <v-col cols="12" class="mt-4">
+      <slot name="default"> </slot>
+    </v-col>
+
+    <v-col cols="12" class="mt-4">
+      <slot name="footer"> </slot>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+const emit = defineEmits(["back"]);
+const props = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+});
+</script>

package/components/Feedback/Form.vue

@@ -0,0 +1,136 @@
+<template>
+  <FormDialog v-model="dialog" @close="closeDialog">
+    <template #title>
+      <span class="text-h6 font-weight-medium pt-1 text-capitalize">
+        {{ isEditMode ? "Edit Feedback" : "Create Feedback" }}
+      </span>
+    </template>
+
+    <InputFile
+      :attachments="displayedAttachments"
+      :errored-images="localErroredImages"
+      :max-files="maxFiles"
+      @add="handleFileAdded"
+      @delete="deleteFile"
+      @errored="onImageError"
+    />
+
+    <v-text-field
+      label="Subject"
+      variant="outlined"
+      density="compact"
+      v-model="localFeedback.subject"
+      class="mb-2"
+      dense
+    />
+
+    <v-autocomplete
+      v-model="localFeedback.category"
+      :items="categories"
+      item-title="title"
+      item-value="value"
+      item-props
+      label="Category"
+      variant="outlined"
+      density="compact"
+      class="mb-2"
+      clearable
+    />
+
+    <v-text-field
+      label="Location"
+      variant="outlined"
+      density="compact"
+      v-model="localFeedback.location"
+    />
+
+    <v-textarea
+      label="Description"
+      variant="outlined"
+      density="compact"
+      auto-grow
+      rows="4"
+      v-model="localFeedback.description"
+    />
+
+    <template #footer>
+      <v-btn
+        color="primary-button"
+        class="text-capitalize mb-4"
+        block
+        height="40"
+        :loading="loading"
+        @click="submitFeedback"
+      >
+        Submit
+      </v-btn>
+    </template>
+  </FormDialog>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  modelValue: boolean;
+  feedback: TFeedbackCreate;
+  isEditMode: boolean;
+  loading: boolean;
+  categories: { title: string; value: string }[];
+  erroredImages?: string[];
+  maxFiles?: number;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: boolean): void;
+  (e: "update:feedback", value: TFeedbackCreate): void;
+  (e: "close"): void;
+  (e: "submit", payload: TFeedbackCreate): void;
+  (e: "fileAdded", file: File): void;
+  (e: "fileDeleted", url: string): void;
+}>();
+
+const dialog = computed({
+  get: () => props.modelValue,
+  set: (val) => emit("update:modelValue", val),
+});
+
+const localFeedback = computed({
+  get: () => props.feedback,
+  set: (val) => emit("update:feedback", val),
+});
+
+const localErroredImages = ref<string[]>(props.erroredImages || []);
+
+watch(
+  () => props.erroredImages,
+  (val) => {
+    if (val) localErroredImages.value = val;
+  }
+);
+
+const displayedAttachments = computed(() => {
+  return localFeedback.value.attachments || [];
+});
+
+function handleFileAdded(file: File) {
+  emit("fileAdded", file);
+}
+
+function deleteFile(url: string) {
+  emit("fileDeleted", url);
+}
+
+function onImageError(file: string) {
+  if (!localErroredImages.value.includes(file)) {
+    localErroredImages.value.push(file);
+  }
+}
+
+function closeDialog() {
+  dialog.value = false;
+  emit("close");
+}
+
+function submitFeedback() {
+  emit("submit", { ...localFeedback.value });
+}
+</script>

package/components/FeedbackDetail.vue

@@ -0,0 +1,465 @@
+<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>
+
+  <FeedbackForm
+    v-model="showCreateDialog"
+    :feedback="_feedback"
+    @update:feedback="(val: TFeedbackUpdate) => (_feedback = val)"
+    :is-edit-mode="isEditMode"
+    :loading="submitting"
+    :categories="categories"
+    :theme="'light'"
+    :errored-images="[]"
+    :max-files="5"
+    :message-fn="(msg:any) => console.log(msg)"
+    @close="handleCloseDialog"
+    @submit="submitFeedback"
+    @file-added="handleFileAdded"
+    @file-deleted="deleteFile"
+  />
+
+  <v-dialog v-model="showCompleteDialog" max-width="450px">
+    <v-card class="rounded-xl pa-0 d-flex flex-column" style="max-height: 90vh">
+      <!-- Title Bar -->
+      <v-card-title class="d-flex justify-space-between align-center pa-4">
+        <span class="text-h6">Completion Confirmation</span>
+        <v-icon @click="showCompleteDialog = false">mdi-close</v-icon>
+      </v-card-title>
+
+      <!-- Scrollable form content -->
+      <v-card-text class="px-4 pt-0 overflow-y-auto" style="flex: 1 1 auto">
+        <InputFile
+          ref="completionFileInput"
+          :attachments="completionAttachments"
+          :max-files="3"
+          :errored-images="[]"
+          @add="handleCompletionFileAdded"
+          @delete="handleCompletionFileDeleted"
+        />
+
+        <div class="mb-4">
+          <label class="text-subtitle-2 mb-1 d-block">
+            Full Name <span class="text-error">*</span>
+          </label>
+          <v-text-field
+            placeholder="Enter your full name"
+            variant="outlined"
+            density="comfortable"
+            v-model="feedback.name"
+            hide-details
+            class="mt-1"
+          ></v-text-field>
+        </div>
+
+        <div class="mb-4">
+          <label class="text-subtitle-2 mb-1 d-block">
+            Signature <span class="text-error">*</span>
+          </label>
+          <SignaturePad v-model="feedback.signature" />
+        </div>
+      </v-card-text>
+
+      <v-card-actions class="px-4 pb-4">
+        <v-btn
+          block
+          color="primary-button"
+          size="large"
+          variant="flat"
+          :loading="completeLoading"
+          @click="markFeedbackAsComplete"
+          class="text-capitalize"
+        >
+          Mark as complete
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+
+  <ConfirmDialog
+    v-model="showDeleteDialog"
+    :loading="deleteLoading"
+    @submit="deleteFeedback"
+    :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 text-capitalize align-center justify-center"
+        @click="deleteFeedback"
+        :loading="deleteLoading"
+        block
+      >
+        Confirm
+      </v-btn>
+    </template>
+  </ConfirmDialog>
+
+  <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
+</template>
+
+<script lang="ts" setup>
+const route = useRoute();
+const id = route.params.id;
+
+const {
+  feedback,
+  getFeedbackById,
+  feedbacks,
+  getFeedbacks: _getFeedbacks,
+  updateFeedback,
+  updateFeedbackServiceProvider,
+  updateStatusComplete,
+  deleteFeedback: _deleteFeedback,
+} = useFeedback();
+
+const { getServiceProviderNames } = useServiceProvider();
+
+const _getFeedbackById = async () => {
+  try {
+    const data = await getFeedbackById(id as string);
+    feedback.value = data;
+  } catch (error) {
+    console.error("Error fetching feedback:", error);
+  }
+};
+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;
+  }
+});
+
+const handleSelectFeedback = async (id: string) => {
+  try {
+    await useRouter().push({ params: { id } });
+
+    const data = await getFeedbackById(id);
+    feedback.value = data;
+  } catch (error) {
+    console.error("Error selecting feedback:", error);
+  }
+};
+
+_getFeedbackById();
+
+const _serviceProviders = ref<TServiceProviderName[]>([]);
+
+const _getServiceProviderNames = async () => {
+  try {
+    const response = await getServiceProviderNames();
+    if (!response) return;
+
+    _serviceProviders.value = response.items.map((provider) => ({
+      _id: provider._id as string,
+      name: provider.name,
+    }));
+  } catch (error) {
+    console.error("Error fetching service providers:", error);
+  }
+};
+
+_getServiceProviderNames();
+
+const showCreateDialog = ref(false);
+const showCompleteDialog = ref(false);
+const showDeleteDialog = ref(false);
+const completeNotes = ref("");
+
+const completionAttachments = ref<string[]>([]);
+
+const completeLoading = ref(false);
+const deleteLoading = ref(false);
+
+const isEditMode = ref(false);
+
+const _feedback = ref<TFeedbackCreate>({
+  attachments: [],
+  category: "",
+  subject: "",
+  location: "",
+  description: "",
+});
+
+const submitting = ref(false);
+const message = ref("");
+const messageColor = ref("");
+const messageSnackbar = ref(false);
+
+function showMessage(msg: string, color: string) {
+  message.value = msg;
+  messageColor.value = color;
+  messageSnackbar.value = true;
+}
+
+function openEditDialog() {
+  isEditMode.value = true;
+  _feedback.value = { ...feedback.value };
+  showCreateDialog.value = true;
+}
+
+function handleCloseDialog() {
+  resetFeedbackForm();
+  isEditMode.value = false;
+  showCreateDialog.value = false;
+}
+
+const { addFile, deleteFile: _deleteFile } = useFile();
+
+async function handleFileAdded(file: File) {
+  try {
+    const res = await addFile(file);
+
+    if (res?.id && res?.name) {
+      const url = `https://seven365-storage.sgp1.cdn.digitaloceanspaces.com/dev/${res.id}`;
+
+      _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) {
+    showMessage("Failed to delete file", "error");
+  }
+}
+
+const resetFeedbackForm = () => {
+  _feedback.value = {
+    attachments: [],
+    category: "",
+    subject: "",
+    location: "",
+    description: "",
+  };
+};
+
+const completionFileInput = ref<any>(null);
+const completionFileNames = ref<Record<string, string>>({});
+
+async function handleCompletionFileAdded(file: File) {
+  try {
+    file.name;
+
+    const res = await addFile(file);
+
+    if (res?.id && res?.name) {
+      const url = `https://seven365-storage.sgp1.cdn.digitaloceanspaces.com/dev/${res.id}`;
+
+      if (!completionAttachments.value) {
+        completionAttachments.value = [];
+      }
+
+      completionAttachments.value.push(url);
+
+      completionFileNames.value[url] = res.name;
+
+      if (completionFileInput.value) {
+        completionFileInput.value.updateFileName(url, res.name);
+      }
+    }
+  } catch (error) {
+    console.error("Error uploading completion file:", error);
+    showMessage("Failed to upload file", "error");
+  }
+}
+
+async function handleCompletionFileDeleted(value: string) {
+  try {
+    await _deleteFile(value);
+
+    completionAttachments.value = completionAttachments.value || [];
+
+    completionAttachments.value = completionAttachments.value.filter(
+      (file) => file !== value
+    );
+  } catch (error) {
+    console.log(error);
+    showMessage("Failed to delete file", "error");
+  }
+}
+
+const resetCompletionForm = () => {
+  completionAttachments.value = [];
+
+  if (completionFileInput.value) {
+    completionFileInput.value.clearFiles?.();
+  }
+
+  feedback.value.name = "";
+  feedback.value.signature = "";
+};
+
+const { serviceProviderCategories, getServiceProviderCategories } =
+  useServiceProvider();
+
+const categories = computed(() =>
+  serviceProviderCategories.value.map((name) => ({
+    title: name.charAt(0).toUpperCase() + name.slice(1),
+    value: name,
+  }))
+);
+
+getServiceProviderCategories();
+async function markFeedbackAsComplete() {
+  if (!feedback.value?._id) {
+    console.warn("Update called without valid feedback ID.");
+    return;
+  }
+
+  if (!feedback.value.name || !feedback.value.signature) {
+    console.warn("Signature or name is missing:", feedback.value.signature);
+    showMessage("Please provide both name and signature.", "error");
+    return;
+  }
+
+  try {
+    completeLoading.value = true;
+
+    const payload: TFeedbackStatusComplete = {
+      name: feedback.value.name,
+      signature: feedback.value.signature,
+      attachments: completionAttachments.value || [],
+    };
+
+    const response = await updateStatusComplete(feedback.value._id, payload);
+    const message = response?.message || "Feedback marked as complete";
+    showMessage(message, "success");
+
+    showCompleteDialog.value = false;
+    resetCompletionForm();
+    await _getFeedbackById();
+  } catch (error) {
+    showMessage("Failed to mark feedback as complete", "error");
+    console.error("Error updating feedback status:", error);
+  } finally {
+    completeLoading.value = false;
+  }
+}
+
+async function deleteFeedback() {
+  if (!feedback.value?._id) {
+    console.warn("Delete called without valid feedback ID.");
+    return;
+  }
+
+  try {
+    deleteLoading.value = true;
+
+    const response = await _deleteFeedback(feedback.value._id);
+    const message = response?.message || "Feedback deleted successfully";
+    showMessage(message, "success");
+
+    showDeleteDialog.value = false;
+    await _getFeedbacks();
+
+    const org = useRoute().params.org || "customer1";
+    const site = useRoute().params.site || "site1";
+
+    await useRouter().push({
+      name: "org-site-feedbacks",
+      params: { org, site },
+    });
+  } catch (error) {
+    showMessage("Failed to delete feedback", "error");
+    console.error("Error deleting feedback:", error);
+  } finally {
+    deleteLoading.value = false;
+  }
+}
+
+async function submitFeedback(payload: TFeedbackUpdate) {
+  if (!isEditMode.value || !feedback.value?._id) {
+    console.warn("Update called without valid edit mode or feedback ID.");
+    return;
+  }
+
+  try {
+    submitting.value = true;
+
+    const payload = {
+      category: _feedback.value.category,
+      subject: _feedback.value.subject,
+      location: _feedback.value.location,
+      description: _feedback.value.description,
+    };
+
+    const response = await updateFeedback(feedback.value._id, payload);
+    const message = response?.message || "Feedback updated successfully";
+    showMessage(message, "success");
+
+    showCreateDialog.value = false;
+    await _getFeedbackById();
+
+    resetFeedbackForm();
+  } catch (error) {
+    showMessage("Something went wrong", "error");
+    console.error("Error updating feedback:", error);
+  } finally {
+    submitting.value = false;
+  }
+}
+</script>