@iservice365/layer-common 0.1.0 → 0.2.1

package/components/WorkOrder/Create.vue

@@ -0,0 +1,197 @@
+<template>
+  <FormDialog v-model="dialog" @close="closeDialog">
+    <template #title>
+      <span class="text-h6 font-weight-medium pt-1 text-capitalize">
+        {{ isEditMode ? "Edit Work Order" : "Create Work Order" }}
+      </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="localWorkOrder.subject"
+      class="mb-1"
+      dense
+    />
+
+    <v-autocomplete
+      v-model="localWorkOrder.category"
+      :items="categories"
+      item-title="title"
+      item-value="value"
+      item-props
+      label="Category"
+      variant="outlined"
+      density="compact"
+      class="mb-2"
+      clearable
+    />
+
+    <v-checkbox
+      v-model="localWorkOrder.highPriority"
+      density="compact"
+      class="ma-0"
+    >
+      <template #label>
+        <span class="text-caption">
+          Set work order as High Priority (Optional)
+        </span>
+      </template>
+    </v-checkbox>
+
+    <v-autocomplete
+      label="Block"
+      variant="outlined"
+      density="compact"
+      v-model="localWorkOrder.block"
+      :items="blocks"
+      class="mt-1"
+      clearable
+    />
+
+    <v-autocomplete
+      label="Level"
+      variant="outlined"
+      density="compact"
+      v-model="localWorkOrder.level"
+      :items="levels"
+      class="mt-1"
+      clearable
+    />
+
+    <v-autocomplete
+      label="Unit"
+      variant="outlined"
+      density="compact"
+      v-model="localWorkOrder.unit"
+      :items="units"
+      class="mt-1"
+      clearable
+    />
+
+    <v-text-field
+      label="Specific Location"
+      variant="outlined"
+      density="compact"
+      v-model="localWorkOrder.location"
+      class="mt-1"
+      dense
+    />
+
+    <v-textarea
+      label="Work Order Description"
+      variant="outlined"
+      density="compact"
+      v-model="localWorkOrder.description"
+      class="mt-1"
+      rows="4"
+      clearable
+      auto-grow
+    />
+
+    <template #footer>
+      <v-btn
+        color="primary-button"
+        class="text-capitalize mb-4"
+        block
+        height="40"
+        :loading="loading"
+        @click="submitWorkOrder"
+      >
+        Submit
+      </v-btn>
+    </template>
+  </FormDialog>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  modelValue: boolean;
+  workOrder: TWorkOrderCreate & { specificLocation?: string };
+  isEditMode: boolean;
+  loading: boolean;
+  categories: { title: string; value: string }[];
+  erroredImages?: string[];
+  maxFiles?: number;
+  blocks?: string[];
+  levels?: string[];
+  units?: string[];
+  specificLocations?: string[];
+}>();
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: boolean): void;
+  (e: "update:workOrder", value: TWorkOrderCreate): void;
+  (e: "close"): void;
+  (e: "submit", payload: TWorkOrderCreate): void;
+  (e: "fileAdded", file: File): void;
+  (e: "fileDeleted", url: string): void;
+}>();
+
+const dialog = computed({
+  get: () => props.modelValue,
+  set: (val) => emit("update:modelValue", val),
+});
+
+const localWorkOrder = computed({
+  get: () => props.workOrder,
+  set: (val) => emit("update:workOrder", val),
+});
+
+const localErroredImages = ref<string[]>(props.erroredImages || []);
+
+watch(
+  () => props.erroredImages,
+  (val) => {
+    if (val) localErroredImages.value = val;
+  }
+);
+
+const displayedAttachments = computed(() => {
+  return localWorkOrder.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 submitWorkOrder() {
+  emit("submit", { ...localWorkOrder.value });
+}
+
+// expose location fields as fallback empty arrays if not passed
+// const blocks = computed(() => props.blocks || []);
+// const levels = computed(() => props.levels || []);
+// const units = computed(() => props.units || []);
+
+const blocks = computed(() => ["Block A", "Block B", ...(props.blocks || [])]);
+const levels = computed(() => ["Level 1", "Level 2", ...(props.levels || [])]);
+const units = computed(() => ["Unit 101", "Unit 102", ...(props.units || [])]);
+
+const specificLocations = computed(() => props.specificLocations || []);
+</script>

package/components/WorkOrder/ListView.vue

@@ -0,0 +1,96 @@
+<template>
+  <TableListSecondary
+    :headers="headers"
+    :items="workOrders"
+    :pages="pages"
+    :page-range="pageRange"
+    :loading="loading"
+    :height="'calc(100vh - 177px)'"
+    v-model:page="page"
+    v-model="selected"
+    @update:pagination="_getWorkOrders"
+    @row-click="handleRowClick"
+    @click:create="emit('click:create')"
+    :length="pages"
+  >
+    <template #title>
+      <span class="text-h6 font-weight-regular">Work Order</span>
+    </template>
+    <template #action-button>
+      <v-btn
+        color="primary-button"
+        variant="flat"
+        class="ml-4 text-capitalize"
+        @click="emit('click:create')"
+      >
+        Work Order
+      </v-btn>
+    </template>
+
+    <template #createdAt="{ item }">
+      {{
+        new Date(item.createdAt).toLocaleString("en-GB", {
+          day: "2-digit",
+          month: "2-digit",
+          year: "numeric",
+          hour: "2-digit",
+          minute: "2-digit",
+          hour12: false,
+        })
+      }}
+    </template>
+
+    <template #status="{ item }">
+      <v-chip
+        :color="getColorStatus(item.status || 'No Status')"
+        text-color="white"
+        variant="flat"
+      >
+        {{ item.status || "No Status" }}
+      </v-chip>
+    </template>
+  </TableListSecondary>
+</template>
+
+<script lang="ts" setup>
+const emit = defineEmits(["click:create", "update:pagination"]);
+
+const { page, pages, pageRange, workOrders, getWorkOrders } = useWorkOrder();
+const { getColorStatus } = useUtils();
+
+const message = ref("");
+const messageColor = ref("");
+const messageSnackbar = ref(false);
+const loading = ref(false);
+const height = ref("500px");
+const selected = ref<string[]>([]);
+
+const headers = ref([
+  { title: "Created By", value: "createdByName" },
+  { title: "Subject", value: "subject" },
+  { title: "Category", value: "application" },
+  { title: "Status", value: "status" },
+  { title: "Date", value: "createdAt" },
+]);
+
+async function _getWorkOrders() {
+  loading.value = true;
+
+  try {
+    await getWorkOrders({
+      page: page.value,
+    });
+
+    emit("update:pagination", {
+      page: page.value,
+      pages: pages.value,
+    });
+  } catch (error) {
+    console.error("Error fetching feedbacks:", error);
+  } finally {
+    loading.value = false;
+  }
+}
+
+_getWorkOrders();
+</script>

package/components/WorkOrder/Main.vue

@@ -0,0 +1,308 @@
+<template>
+  <v-row align="start" justify="center" class="fill-height">
+    <v-col cols="12" lg="11" md="10">
+      <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"
+        :length="pages"
+      >
+        <template #title>
+          <span class="text-h6 font-weight-regular">Work Orders</span>
+        </template>
+
+        <template #action-button>
+          <v-btn
+            color="primary-button"
+            variant="flat"
+            @click="showCreateDialog = true"
+            class="text-capitalize"
+          >
+            Work Order
+          </v-btn>
+        </template>
+
+        <template #category="{ item }">
+          <span class="text-capitalize">{{ item.category }}</span>
+        </template>
+
+        <template #createdAt="{ item }">
+          {{ formatDate(item.createdAt) }}
+        </template>
+
+        <template #status="{ item }">
+          <v-chip
+            :color="getColorStatus(item.status || 'No Status')"
+            text-color="white"
+            variant="flat"
+          >
+            {{ item.status || "No Status" }}
+          </v-chip>
+        </template>
+      </ListView>
+    </v-col>
+  </v-row>
+
+  <WorkOrderCreate
+    v-model="showCreateDialog"
+    :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" />
+</template>
+
+<script setup lang="ts">
+import { useTheme } from "vuetify";
+const emit = defineEmits(["click:create", "update:pagination"]);
+
+defineProps({
+  detailRoute: {
+    type: String,
+    default: "index",
+  },
+  orgId: {
+    type: String,
+    default: "",
+  },
+  customerId: {
+    type: String,
+    default: "",
+  },
+  siteId: {
+    type: String,
+    default: "",
+  },
+  canCreateWorkOrder: {
+    type: Boolean,
+    default: false,
+  },
+  canViewWorkOrders: {
+    type: Boolean,
+    default: false,
+  },
+  canViewWorkOrderDetails: {
+    type: Boolean,
+    default: false,
+  },
+  canDeleteWorkOrder: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const theme = useTheme().name;
+const showCreateDialog = ref(false);
+const isEditMode = ref(false);
+const erroredImages = ref<string[]>([]);
+
+const message = ref("");
+const messageColor = ref("");
+const messageSnackbar = ref(false);
+
+const { getColorStatus, formatDate } = useUtils();
+
+const _workOrder = ref<TWorkOrderCreate>({
+  attachments: [],
+  category: "",
+  subject: "",
+  location: "",
+  description: "",
+  highPriority: false,
+  block: "",
+  level: "",
+  unit: "",
+  serviceProvider: "",
+  assignee: "",
+  organization: "",
+  site: "",
+});
+
+function showMessage(msg: string, color: string) {
+  message.value = msg;
+  messageColor.value = color;
+  messageSnackbar.value = true;
+}
+
+const headers = [
+  { title: "Created By", value: "createdByName", align: "start" },
+  { title: "Subject", value: "subject", align: "start" },
+  { title: "Category", value: "category", align: "start" },
+  { title: "Date", value: "createdAt", align: "start" },
+  { title: "Status", value: "status", align: "start" },
+];
+
+const submitting = ref(false);
+const selected = ref<string[]>([]);
+const route = useRoute();
+const { customers } = useCustomer();
+
+const { getWorkOrders: _getWorkOrders, createWorkOrder } = useWorkOrder();
+
+const page = ref(1);
+const pages = ref(0);
+const pageRange = ref("-- - -- of --");
+const items = ref<Array<Record<string, any>>>([]);
+
+const {
+  data: getAllWorkOrderReq,
+  refresh: getAllReqRefresh,
+  status: getAllReqStatus,
+} = useLazyAsyncData("get-all-work-orders", () =>
+  _getWorkOrders({
+    page: page.value,
+    organization: route.params.org as string,
+    site: route.params.site as string,
+  })
+);
+
+const loading = computed(() => getAllReqStatus.value === "pending");
+
+watchEffect(() => {
+  if (getAllWorkOrderReq.value) {
+    items.value = getAllWorkOrderReq.value.items;
+    pages.value = getAllWorkOrderReq.value.pages;
+    pageRange.value = getAllWorkOrderReq.value.pageRange;
+  }
+});
+function onSelectedUpdate(newSelected: string[]) {
+  selected.value = newSelected;
+}
+
+function handleRowClick(row: any) {
+  const org = useRoute().params.org || "defaultOrg";
+  const site = useRoute().params.site || "defaultSite";
+  const id = row._id;
+  useRouter().push({
+    name: "work-order-details",
+    params: {
+      org,
+      site,
+      id,
+    },
+  });
+}
+
+function resetWorkOrderForm() {
+  _workOrder.value = {
+    attachments: [],
+    category: "",
+    subject: "",
+    location: "",
+    description: "",
+    highPriority: false,
+    block: "",
+    level: "",
+    unit: "",
+    serviceProvider: "",
+    assignee: "",
+    organization: "",
+    site: "",
+  };
+}
+
+function handleCloseDialog() {
+  resetWorkOrderForm();
+  isEditMode.value = false;
+  showCreateDialog.value = 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 { 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");
+  }
+}
+
+const _workOrderId = ref<string | null>(null);
+
+const isSubmitting = ref(false);
+
+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();
+    getAllReqRefresh();
+  } catch (err) {
+    showMessage((err as Error).message, "error");
+  } finally {
+    isSubmitting.value = false;
+  }
+}
+</script>

package/components/Workorder.vue

@@ -0,0 +1 @@
+<template><PlaceholderComponent /></template>

package/composables/useAddress.ts

@@ -0,0 +1,107 @@
+export default function useAddress() {
+  function add({
+    type = "",
+    user = "",
+    org = "",
+    country = "",
+    countryCode = "",
+    phoneNumber = "",
+    address = "",
+    continuedAddress = "",
+    city = "",
+    province = "",
+    postalCode = "",
+    taxId = "",
+  } = {}) {
+    return useNuxtApp().$api("/api/addresses", {
+      method: "POST",
+      body: {
+        type,
+        user,
+        org,
+        country,
+        countryCode,
+        phoneNumber,
+        address,
+        continuedAddress,
+        city,
+        province,
+        postalCode,
+        taxId,
+      },
+    });
+  }
+
+  function getByUserId(user = "") {
+    return useNuxtApp().$api<TAddress>(`/api/addresses/user/${user}`);
+  }
+
+  const _address = useState("address", (): TAddress => {
+    return {
+      type: "",
+      user: "",
+      org: "",
+      country: "",
+      address: "",
+      continuedAddress: "",
+      city: "",
+      province: "",
+      postalCode: "",
+      taxId: "",
+    };
+  });
+
+  function reset() {
+    _address.value.type = "";
+    _address.value.user = "";
+    _address.value.org = "";
+    _address.value.country = "";
+    _address.value.address = "";
+    _address.value.continuedAddress = "";
+    _address.value.city = "";
+    _address.value.province = "";
+    _address.value.postalCode = "";
+    _address.value.taxId = "";
+  }
+
+  function set({
+    type = "",
+    user = "",
+    org = "",
+    country = "",
+    address = "",
+    continuedAddress = "",
+    city = "",
+    province = "",
+    postalCode = "",
+    taxId = "",
+  } = {}) {
+    _address.value.type = type;
+    _address.value.user = user;
+    _address.value.org = org;
+    _address.value.country = country;
+    _address.value.address = address;
+    _address.value.continuedAddress = continuedAddress;
+    _address.value.city = city;
+    _address.value.province = province;
+    _address.value.postalCode = postalCode;
+    _address.value.taxId = taxId;
+  }
+
+  const { address, city, province, postalCode, country } = _address.value;
+
+  const completeAddress = computed(() => {
+    return `${address ? `${address}, ` : ""}${
+      city ? `${city}, ` : ""
+    } ${province} ${postalCode ? `${postalCode}, ` : ""} ${country}`;
+  });
+
+  return {
+    add,
+    reset,
+    set,
+    getByUserId,
+    address: _address,
+    completeAddress,
+  };
+}