@iservice365/layer-common 1.4.1 → 1.5.0

package/components/TableMain.vue

@@ -4,11 +4,18 @@
     <v-col cols="12" class="mb-2" v-if="(canCreate || $slots.actions)">
       <v-row no-gutters>
         <slot name="actions">
-          <v-btn v-if="canCreate" class="text-none" rounded="pill" variant="tonal" size="large"
-            @click="emits('create')">
-            {{ createLabel }}
-          </v-btn>
+          <v-col cols="12">
+            <v-row no-gutters justify="space-between">
+              <v-btn v-if="canCreate" class="text-none" rounded="pill" variant="tonal" size="large"
+                @click="emits('create')">
+                {{ createLabel }}
+              </v-btn>
+              <v-text-field v-if="props.canSearch" v-model="searchInput" density="compact" placeholder="Search" clearable max-width="300"
+                append-inner-icon="mdi-magnify" hide-details />
+            </v-row>
+          </v-col>
         </slot>
+
       </v-row>
     </v-col>
 
@@ -35,7 +42,7 @@
           </template>
 
           <template v-if="$slots.extension" #extension>
-            <slot name="extension"/>
+            <slot name="extension" />
           </template>
         </v-toolbar>
 
@@ -43,12 +50,13 @@
         <!-- Data Table -->
         <v-data-table :headers="headers" :items="items" :item-value="itemValue" :items-per-page="itemsPerPage"
           fixed-header hide-default-footer :hide-default-header="!showHeader"
-          @click:row="(_: any, data: any) => emits('row-click', data)" :style="`max-height: calc(100vh - (${offset}px))`">
+          @click:row="(_: any, data: any) => emits('row-click', data)"
+          :style="`max-height: calc(100vh - (${offset}px))`">
           <template v-for="(_, slotName) in $slots" #[slotName]="slotProps">
             <slot :name="slotName" v-bind="slotProps" />
           </template>
         </v-data-table>
-        <slot  name="footer"/>
+        <slot name="footer" />
       </v-card>
     </v-col>
   </v-row>
@@ -72,6 +80,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  canSearch: {
+    type: Boolean,
+    default: false,
+  },
   createLabel: {
     type: String,
     default: "Add",
@@ -112,6 +124,8 @@ const props = defineProps({
 
 const emits = defineEmits(["create", "refresh", "update:page", "row-click"]);
 
+const searchInput = defineModel('search', { default: "" })
+
 const internalPage = ref(props.page);
 watch(
   () => props.page,
@@ -121,4 +135,8 @@ watch(
 );
 </script>
 
-<style scoped></style>
+<style scoped>
+.v-data-table :deep(thead th) {
+  font-weight: bold !important;
+}
+</style>

package/components/WorkOrder/Main.vue

@@ -1,76 +1,72 @@
 <template>
-  <v-row align="start" justify="center" class="fill-height">
-    <v-col cols="12" lg="12" md="12">
-      <ListView
-        :headers="headers"
-        :items="items"
-        :pages="pages"
-        :page-range="pageRange"
-        :loading="loading || onNextPrevPageLoading"
-        :height="'calc(100vh - 175px)'"
-        v-model:page="page"
-        :selected="selected"
-        @update:value="getAllReqRefresh"
-        @update:selected="onSelectedUpdate"
-        @click:create="showCreateDialog = true"
-        :length="pages"
-        :clickable-rows="true"
-        @update:pagination="updatePage"
+  <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="canCreateWorkOrder"
+        >
+          Create Work Order
+        </v-btn>
+
+        <v-text-field
+          v-model="searchText"
+          placeholder="Search work order..."
+          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"
       >
-        <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"
-          >
-            Create 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>
-        <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="onViewWorkOrder(item)">View</v-list-item>
-              <v-list-item @click="editWorkOrder(item)">Edit</v-list-item>
-              <v-list-item
-                @click="confirmDeleteWorkOrder(item)"
-                v-if="canDeleteWorkOrder"
-                >Delete</v-list-item
-              >
-            </v-list>
-          </v-menu>
-        </template>
-      </ListView>
+        <v-toolbar density="compact" color="grey-lighten-4">
+          <template #prepend>
+            <v-btn fab icon density="comfortable" @click="updatePage">
+              <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
+          @click:row="tableRowClickHandler"
+          style="max-height: calc(100vh - (200px))"
+        >
+        </v-data-table>
+      </v-card>
     </v-col>
   </v-row>
 
@@ -93,11 +89,87 @@
   />
 
   <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
+
+  <!-- Preview Dialog -->
+  <v-dialog v-model="dialogPreview" width="450" persistent>
+    <v-card width="100%">
+      <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0">
+        <v-row no-gutters v-if="selectedWorkOrder" class="mb-4">
+          <v-col cols="12">
+            <strong>Subject:</strong> {{ selectedWorkOrder.subject }}
+          </v-col>
+          <v-col cols="12">
+            <strong>Category:</strong>
+            {{ selectedWorkOrder.category }}
+          </v-col>
+          <v-col cols="12">
+            <strong>Status:</strong>
+            {{ selectedWorkOrder.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 @click="onViewWorkOrder(selectedWorkOrder)">
+                  <v-list-item-title class="text-subtitle-2">
+                    View
+                  </v-list-item-title>
+                </v-list-item>
+                <v-list-item @click="editWorkOrder(selectedWorkOrder)">
+                  <v-list-item-title class="text-subtitle-2">
+                    Edit
+                  </v-list-item-title>
+                </v-list-item>
+
+                <v-list-item
+                  @click="confirmDeleteWorkOrder(selectedWorkOrder)"
+                  class="text-red"
+                  v-if="canDeleteWorkOrder"
+                >
+                  <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">
 import { useTheme } from "vuetify";
-import useBuilding from "../../composables/useBuilding";
 const emit = defineEmits(["click:create", "update:pagination"]);
 
 const props = defineProps({
@@ -172,7 +244,7 @@ function showMessage(msg: string, color: string) {
   messageSnackbar.value = true;
 }
 
-const headers = [
+const headers: Array<Record<string, any>> = [
   { title: "Created By", value: "createdByName", align: "start" },
   { title: "Subject", value: "subject", align: "start" },
   { title: "Category", value: "category", align: "start" },
@@ -221,7 +293,6 @@ async function updatePage(pageVal: any) {
   page.value = pageVal;
   const response = await _getWorkOrders({
     page: page.value,
-    organization: route.params.org as string,
     site: route.params.site as string,
   });
   if (response) {
@@ -290,7 +361,7 @@ watchEffect(() => {
     serviceProviders.value = getAllReq.value.map((i: any) => ({
       title: i.nature.replace(/_/g, " "),
       subtitle: i.title,
-      value: i.nature
+      value: i.nature,
     }));
   }
 });
@@ -369,4 +440,14 @@ function onViewWorkOrder(item: any) {
 function editWorkOrder(item: any) {}
 
 function confirmDeleteWorkOrder(item: any) {}
+
+function tableRowClickHandler(_: any, data: any) {
+  console.log(data.item);
+  selectedWorkOrder.value = data.item;
+  dialogPreview.value = true;
+}
+
+const dialogPreview = ref(false);
+const selectedWorkOrder = ref<TWorkOrder | null>(null);
+const searchText = ref("");
 </script>

package/composables/useFacility.ts

@@ -0,0 +1,246 @@
+export default function(){
+
+const facilityIcons = [
+  "001-coffee-4.svg",
+  "001-football.svg",
+  "001-ice-cream-3.svg",
+  "001-skin oil.svg",
+  "002-basketball.svg",
+  "002-cezve.svg",
+  "002-lollipop.svg",
+  "002-manicure.svg",
+  "003-aromatherapy.svg",
+  "003-latte.svg",
+  "003-sweet.svg",
+  "003-volleyball.svg",
+  "004-boxing.svg",
+  "004-chocolate.svg",
+  "004-honey.svg",
+  "004-hot tub.svg",
+  "005-candle.svg",
+  "005-coffee-grinder.svg",
+  "005-flour.svg",
+  "005-shuttlecock.svg",
+  "006-cake-3.svg",
+  "006-chess.svg",
+  "006-tea-bag-1.svg",
+  "006-teapot.svg",
+  "007-baseball.svg",
+  "007-cake-2.svg",
+  "007-juice.svg",
+  "007-wash feet.svg",
+  "008-baseball.svg",
+  "008-break.svg",
+  "008-cucumber slice.svg",
+  "008-tea-bag.svg",
+  "009-american football.svg",
+  "009-coffee-3.svg",
+  "009-gingerbread-man.svg",
+  "009-room heater.svg",
+  "010-coffee-2.svg",
+  "010-helmet.svg",
+  "010-sauna.svg",
+  "010-shrimp-1.svg",
+  "011-artichoke.svg",
+  "011-bowling.svg",
+  "011-can.svg",
+  "011-hot stone.svg",
+  "012-avocado.svg",
+  "012-soak.svg",
+  "012-Surfboard.svg",
+  "012-syrup.svg",
+  "013-beef.svg",
+  "013-kettle-1.svg",
+  "013-ping pong.svg",
+  "013-yoga mat.svg",
+  "014-carrot.svg",
+  "014-comb.svg",
+  "014-expresso.svg",
+  "014-football.svg",
+  "015-bucket.svg",
+  "015-coffee-machine-2.svg",
+  "015-ice-cream.svg",
+  "015-whistle.svg",
+  "016-coffee-machine-1.svg",
+  "016-coffee-shop.svg",
+  "016-football.svg",
+  "016-lotion.svg",
+  "017-basketball.svg",
+  "017-chinese-food.svg",
+  "017-coffee-machine.svg",
+  "017-humidifier.svg",
+  "018-chocolate.svg",
+  "018-medal.svg",
+  "018-olive branch.svg",
+  "018-orange-1.svg",
+  "019-brush.svg",
+  "019-kiwi.svg",
+  "019-mocha.svg",
+  "019-trophy.svg",
+  "020-lemon.svg",
+  "020-podium.svg",
+  "020-tea-1.svg",
+  "020-towel.svg",
+  "021-badminton.svg",
+  "021-bottle.svg",
+  "021-firewood.svg",
+  "021-pomegranate.svg",
+  "022-bullseye.svg",
+  "022-map.svg",
+  "022-noodles-1.svg",
+  "022-sponge.svg",
+  "023-mortar.svg",
+  "023-onigiri.svg",
+  "023-rafting.svg",
+  "023-spoons.svg",
+  "024-bamboo.svg",
+  "024-cocktail.svg",
+  "024-dart.svg",
+  "024-pie.svg",
+  "025-blender.svg",
+  "025-ice hockey.svg",
+  "025-potato.svg",
+  "025-sleeping mask.svg",
+  "026-chips.svg",
+  "026-football.svg",
+  "026-hair dryer.svg",
+  "026-sugar.svg",
+  "027-bathrobe.svg",
+  "027-croissant.svg",
+  "027-goal box.svg",
+  "027-spoon.svg",
+  "028-basketball.svg",
+  "028-sandals.svg",
+  "028-sandwich.svg",
+  "028-toast.svg",
+  "029-donut.svg",
+  "029-massage.svg",
+  "029-pretzel.svg",
+  "029-ski.svg",
+  "030-frappe.svg",
+  "030-rice-cooker-1.svg",
+  "030-sauna.svg",
+  "030-ski goggles.svg",
+  "031-beauty treatment.svg",
+  "031-flippers.svg",
+  "031-tea-pot.svg",
+  "031-watermelon.svg",
+  "032-apple.svg",
+  "032-cookies.svg",
+  "032-snorkeling.svg",
+  "032-wax.svg",
+  "033-archery.svg",
+  "033-skewer.svg",
+  "033-tea-bag.svg",
+  "034-cake-1.svg",
+  "034-milkshake.svg",
+  "034-tennis.svg",
+  "035-coffee-1.svg",
+  "035-pastry.svg",
+  "035-running shoe.svg",
+  "036-bowling.svg",
+  "036-french-press.svg",
+  "036-ham.svg",
+  "037-dumbbell.svg",
+  "037-milk.svg",
+  "037-pasta.svg",
+  "038-biscuit.svg",
+  "038-caviar.svg",
+  "038-kayak.svg",
+  "039-coffee-beans.svg",
+  "039-cricket.svg",
+  "039-shrimp.svg",
+  "040-golf.svg",
+  "040-pepper.svg",
+  "040-tea.svg",
+  "041-billiard.svg",
+  "041-coffee.svg",
+  "041-sauces.svg",
+  "042-bowling.svg",
+  "042-piece-of-cake.svg",
+  "042-pot.svg",
+  "043-coffee-maker.svg",
+  "043-golf.svg",
+  "043-popcorn.svg",
+  "044-bicycle.svg",
+  "044-rice-cooker.svg",
+  "044-water.svg",
+  "045-basketball.svg",
+  "045-kettle.svg",
+  "045-vegetables-1.svg",
+  "046-cake.svg",
+  "046-coffee-machine.svg",
+  "046-water bottle.svg",
+  "047-coffee-bag.svg",
+  "047-muffin.svg",
+  "047-tennis.svg",
+  "048-ice-cream-2.svg",
+  "048-muffin.svg",
+  "048-stopwatch.svg",
+  "049-croissant.svg",
+  "049-karate.svg",
+  "049-olives.svg",
+  "050-doughnut.svg",
+  "050-skipping rope.svg",
+  "050-take-away.svg",
+  "051-lobster.svg",
+  "052-breakfast.svg",
+  "053-fish-2.svg",
+  "054-burger.svg",
+  "055-steak.svg",
+  "056-ice-cream-1.svg",
+  "057-star-fruit.svg",
+  "058-salt.svg",
+  "059-cheese.svg",
+  "060-cracker.svg",
+  "061-turnip.svg",
+  "062-ribs-1.svg",
+  "063-tuna-1.svg",
+  "064-fried-egg-1.svg",
+  "065-tuna.svg",
+  "066-ribs.svg",
+  "067-feeder.svg",
+  "068-milk.svg",
+  "069-fish-1.svg",
+  "070-turkey.svg",
+  "071-vegetables.svg",
+  "072-fried-egg.svg",
+  "073-roast-chicken.svg",
+  "074-spaghetti.svg",
+  "075-french-fries.svg",
+  "076-fruit.svg",
+  "077-cake.svg",
+  "078-cinnamon-roll.svg",
+  "079-fish.svg",
+  "080-soup-1.svg",
+  "081-jelly.svg",
+  "082-dishes.svg",
+  "083-oil-bottle.svg",
+  "084-napkin.svg",
+  "085-meat-grinder-1.svg",
+  "086-meat-grinder.svg",
+  "087-soup.svg",
+  "088-ice-cream.svg",
+  "089-taco-1.svg",
+  "090-taco.svg",
+  "091-toaster.svg",
+  "092-sushi-2.svg",
+  "093-sushi-1.svg",
+  "094-sushi.svg",
+  "095-noodles.svg",
+  "096-rice.svg",
+  "097-corkscrew.svg",
+  "098-pear.svg",
+  "099-orange.svg",
+  "100-tomato.svg",
+];
+
+
+
+
+    return {
+      
+      facilityIcons,
+
+    }
+}

package/composables/useServiceProvider.ts

@@ -171,7 +171,10 @@ export default function useServiceProvider() {
     orgId = "",
     siteId = "",
     siteName = "",
-    serviceProviderOrgId = "",
+    // serviceProviderOrgId = "",
+    // org = "",
+    orgName = "",
+    category = "",
   } = {}) {
     return useNuxtApp().$api<Record<string, any>>("/api/service-providers", {
       method: "POST",
@@ -183,7 +186,10 @@ export default function useServiceProvider() {
         orgId,
         siteId,
         siteName,
-        serviceProviderOrgId,
+        // serviceProviderOrgId,
+        // org,
+        orgName,
+        category,
       },
     });
   }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@iservice365/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",
@@ -24,8 +24,10 @@
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
   "dependencies": {
+    "@ckeditor/ckeditor5-vue": "^7.3.0",
     "@iconify/vue": "^5.0.0",
     "@mdi/font": "^7.4.47",
+    "ckeditor5": "^47.2.0",
     "sass": "^1.80.6",
     "vue3-signature": "^0.2.4",
     "zod": "^3.24.2"