@7365admin1/layer-common 1.8.0

package/components/WorkOrder/Create.vue

@@ -0,0 +1,284 @@
+<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"
+      :created-from="props.createdFrom"
+      @add="handleFileAdded"
+      @delete="deleteFile"
+      @errored="onImageError"
+    />
+
+    <v-autocomplete
+      v-model="workOrder.subject"
+      :items="subjects"
+      item-title="title"
+      item-value="value"
+      item-props
+      label="Subject"
+      variant="outlined"
+      density="compact"
+      class="mb-2"
+      :clearable="
+        props.createdFrom === 'feedback' && workOrder.subject !== ''
+          ? false
+          : true
+      "
+      :readonly="
+        props.createdFrom === 'feedback' && workOrder.subject !== ''
+          ? true
+          : false
+      "
+      :custom-filter="customFilter"
+      :rules="[requiredRule]"
+    >
+      <template #label> Subject <span class="text-red">*</span> </template>
+    </v-autocomplete>
+
+    <v-autocomplete
+      v-model="workOrder.category"
+      :items="categories"
+      item-title="title"
+      item-value="value"
+      item-props
+      label="Category"
+      variant="outlined"
+      density="compact"
+      class="mb-2"
+      :clearable="
+        props.createdFrom === 'feedback' && workOrder.category !== ''
+          ? false
+          : true
+      "
+      :readonly="
+        props.createdFrom === 'feedback' && workOrder.category !== ''
+          ? true
+          : false
+      "
+      :rules="[requiredRule]"
+    >
+      <template #label> Category <span class="text-red">*</span> </template>
+    </v-autocomplete>
+
+    <v-checkbox v-model="workOrder.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="workOrder.block"
+      :items="blocks"
+      class="mt-1"
+      clearable
+    /> -->
+
+    <!-- <v-autocomplete
+      label="Level"
+      variant="outlined"
+      density="compact"
+      v-model="workOrder.level"
+      :items="levels"
+      class="mt-1"
+      clearable
+    /> -->
+
+    <v-autocomplete
+      label="Unit"
+      variant="outlined"
+      density="compact"
+      v-model="workOrder.unit"
+      :items="units"
+      class="mt-1"
+      clearable
+      :rules="[requiredRule]"
+    >
+      <template #label> Unit <span class="text-red">*</span> </template>
+    </v-autocomplete>
+
+    <!-- <v-text-field
+      label="Specific Location"
+      variant="outlined"
+      density="compact"
+      v-model="workOrder.location"
+      class="mt-1"
+      dense
+      :readonly="
+        props.createdFrom === 'feedback' && workOrder.location !== ''
+          ? true
+          : false
+      "
+    /> -->
+
+    <v-textarea
+      label="Work Order Description"
+      variant="outlined"
+      density="compact"
+      v-model="workOrder.description"
+      class="mt-1"
+      rows="4"
+      clearable
+      auto-grow
+      :rules="[requiredRule]"
+    >
+      <template #label> Description <span class="text-red">*</span> </template>
+    </v-textarea>
+
+    <template #footer>
+      <v-btn
+        color="primary-button"
+        class="text-capitalize mb-4"
+        block
+        height="40"
+        :loading="loading"
+        :disabled="loading || !isFormValid"
+        @click="submitWorkOrder"
+      >
+        Submit
+      </v-btn>
+    </template>
+  </FormDialog>
+</template>
+
+<script setup lang="ts">
+import useBuildingUnit from "../../composables/useBuildingUnit";
+
+const props = defineProps<{
+  modelValue: boolean;
+  createdFrom: string;
+  isEditMode: boolean;
+  loading: boolean;
+  categories: { title: string; value: string }[];
+  erroredImages?: string[];
+  maxFiles?: number;
+  blocks?: string[];
+  levels?: string[];
+  units?: string[];
+  specificLocations?: string[];
+}>();
+
+const workOrder = defineModel("workOrder", {
+  default: {
+    subject: "",
+    category: "",
+    highPriority: false,
+    unit: "",
+    location: "",
+    description: "",
+    attachments: [],
+  },
+});
+
+const emit = defineEmits([
+  "update:modelValue",
+  "update:workOrder",
+  "close",
+  "submit",
+  "fileAdded",
+  "fileDeleted",
+]);
+
+const dialog = computed({
+  get: () => props.modelValue,
+  set: (val) => emit("update:modelValue", val),
+});
+
+const localErroredImages = ref<string[]>(props.erroredImages || []);
+
+watch(
+  () => props.erroredImages,
+  (val) => {
+    if (val) localErroredImages.value = val;
+  }
+);
+
+const displayedAttachments = computed(() => {
+  return workOrder.value.attachments || [];
+});
+
+const { requiredRule } = useUtils();
+
+const isFormValid = computed(() => {
+  return (
+    workOrder.value.subject &&
+    workOrder.value.category &&
+    workOrder.value.unit &&
+    workOrder.value.description
+  );
+});
+
+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", { ...workOrder.value });
+}
+
+const units = ref<Array<{ title: string; value: string }>>([]);
+
+const { getAll } = useBuildingUnit();
+const { data } = await useLazyAsyncData("get-building-units-by-status", () =>
+  getAll({ status: "active" })
+);
+
+watchEffect(() => {
+  if (data.value && data.value.items && data.value.items.length > 0) {
+    units.value = data.value.items.map((item: any) => {
+      return {
+        title: `${item.name} - ${item.level} - ${item.buildingName}`,
+        value: item._id,
+      };
+    });
+  }
+});
+
+const workOrderUnit = computed(() => {
+  return workOrder.value.unit;
+});
+
+watch(workOrderUnit, (val: string) => {
+  if (val) {
+    const unit = units.value.find((unit: any) => unit.value === val);
+    if (unit) {
+      workOrder.value.location = unit.title;
+    }
+  }
+});
+
+const { subjects } = useLocal();
+
+const customFilter = (value: string, query: string, item: any) => {
+  const title = item?.raw?.title?.toLowerCase() || "";
+  const subtitle = item?.raw?.subtitle?.toLowerCase() || "";
+  const search = query.toLowerCase();
+  return title.includes(search) || subtitle.includes(search);
+};
+</script>

package/components/WorkOrder/Detail.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="feedback-detail-wrapper">
+    <v-row no-gutters class="fill-height">
+      <v-col cols="12" xl="7" lg="7" md="7" class="fill-height">
+        <div class="panel-container border-e">
+          <ChatMessage :type="'workOrder'" />
+        </div>
+      </v-col>
+      <v-col cols="12" xl="5" lg="5" md="5" class="fill-height">
+        <div class="panel-container">
+          <ChatInformation
+            :item="workOrder"
+            :service-providers="_serviceProviders"
+            :type="'workOrder'"
+            @edit="openEditDialog"
+            @mark-complete-request="showCompleteDialog = true"
+            @delete="showDeleteDialog = true"
+          />
+        </div>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+<script lang="ts" setup>
+const route = useRoute();
+const id = route.params.id;
+
+const {
+  workOrder,
+  workOrders,
+  getWorkOrderById,
+  getWorkOrders: _getWorkOrders,
+} = useWorkOrder();
+
+const { getServiceProviderNames } = useServiceProvider();
+
+const _getWorkOrderById = async () => {
+  try {
+    const data = await getWorkOrderById(id as string);
+    workOrder.value = data;
+  } catch (error) {
+    console.error("Error fetching feedback:", error);
+  }
+};
+
+_getWorkOrderById();
+
+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);
+
+function openEditDialog() {}
+</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>