@7365admin1/layer-common 1.9.0 → 1.10.1

package/components/HygieneUpdateMoreAction.vue

@@ -0,0 +1,238 @@
+<template>
+  <v-card width="100%">
+    <v-toolbar>
+      <template v-if="$slots.header">
+        <slot name="header" :title="title" :onClose="onClose" />
+      </template>
+      <template v-else>
+        <v-row no-gutters class="fill-height px-6" align="center">
+          <span class="font-weight-bold text-h5 text-capitalize">{{
+            title
+          }}</span>
+        </v-row>
+      </template>
+    </v-toolbar>
+
+    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0">
+      <slot name="content" />
+    </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="emit('close')"
+            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"
+                :disabled="disabled"
+                v-bind="props"
+                tile
+              >
+                More actions
+              </v-btn>
+            </template>
+
+            <v-list class="pa-0 rounded-0">
+              <v-list-item
+                v-if="showQrButton && qrButtonLabel"
+                @click="emit('showqr')"
+              >
+                <v-list-item-title class="text-subtitle-2">
+                  {{ qrButtonLabel }}
+                </v-list-item-title>
+              </v-list-item>
+
+              <v-list-item
+                v-if="showViewStock && viewButtonLabel"
+                @click="emit('viewStock')"
+              >
+                <v-list-item-title class="text-subtitle-2">
+                  {{ viewButtonLabel }}
+                </v-list-item-title>
+              </v-list-item>
+
+              <v-list-item
+                v-if="showAddStock && addStockButtonLabel"
+                @click="emit('addstock')"
+              >
+                <v-list-item-title class="text-subtitle-2">
+                  {{ addStockButtonLabel }}
+                </v-list-item-title>
+              </v-list-item>
+
+              <v-list-item
+                v-if="showApproveRequest && appproveRequestItemButtonLabel"
+                @click="emit('approveRequest')"
+              >
+                <v-list-item-title class="text-subtitle-2">
+                  {{ appproveRequestItemButtonLabel }}
+                </v-list-item-title>
+              </v-list-item>
+
+              <v-list-item
+                v-if="showDisapproveRequest && disapproveRequestItemButtonLabel"
+                @click="emit('disapproveRequest')"
+              >
+                <v-list-item-title class="text-subtitle-2">
+                  {{ disapproveRequestItemButtonLabel }}
+                </v-list-item-title>
+              </v-list-item>
+
+              <v-list-item
+                v-if="showRequestItem && requestItemButtonLabel"
+                @click="emit('requestItem')"
+              >
+                <v-list-item-title class="text-subtitle-2">
+                  {{ requestItemButtonLabel }}
+                </v-list-item-title>
+              </v-list-item>
+
+              <v-list-item v-if="canUpdate" @click="emit('edit')">
+                <v-list-item-title class="text-subtitle-2">
+                  {{ editButtonLabel }}
+                </v-list-item-title>
+              </v-list-item>
+
+              <v-list-item
+                v-if="canDelete"
+                @click="emit('delete')"
+                class="text-red"
+              >
+                <v-list-item-title class="text-subtitle-2">
+                  {{ deleteButtonLabel }}
+                </v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+        </v-col>
+      </v-row>
+    </v-toolbar>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+const prop = defineProps({
+  canUpdate: {
+    type: Boolean,
+    default: true,
+  },
+  canDelete: {
+    type: Boolean,
+    default: true,
+  },
+  editButtonLabel: {
+    type: String,
+    default: "Edit Area",
+  },
+  deleteButtonLabel: {
+    type: String,
+    default: "Delete Area",
+  },
+
+  qrButtonLabel: {
+    type: String,
+    default: "Show QR",
+  },
+  showQrButton: {
+    type: Boolean,
+    default: false,
+  },
+  addStockButtonLabel: {
+    type: String,
+    default: "Add Stock",
+  },
+  viewButtonLabel: {
+    type: String,
+    default: "View Stock",
+  },
+  showAddStock: {
+    type: Boolean,
+    default: false,
+  },
+  showViewStock: {
+    type: Boolean,
+    default: false,
+  },
+  requestItemButtonLabel: {
+    type: String,
+    default: "Request Item",
+  },
+
+  appproveRequestItemButtonLabel: {
+    type: String,
+    default: "Approve Request",
+  },
+
+  showApproveRequest: {
+    type: Boolean,
+    default: false,
+  },
+  showDisapproveRequest: {
+    type: Boolean,
+    default: false,
+  },
+  disapproveRequestItemButtonLabel: {
+    type: String,
+    default: "Disapprove Request",
+  },
+  showRequestItem: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: "Actions",
+  },
+});
+
+const emit = defineEmits([
+  "close",
+  "edit",
+  "delete",
+  "showqr",
+  "addstock",
+  "viewStock",
+  "requestItem",
+  "approveRequest",
+  "disapproveRequest",
+]);
+const {
+  canUpdate,
+  editButtonLabel,
+  deleteButtonLabel,
+
+  qrButtonLabel,
+  showQrButton,
+  addStockButtonLabel,
+  viewButtonLabel,
+  showAddStock,
+  showViewStock,
+  title,
+  requestItemButtonLabel,
+  showRequestItem,
+  disabled,
+} = prop;
+</script>
+
+<style scoped></style>

package/components/IncidentReport/Authorities.vue

@@ -0,0 +1,226 @@
+<template>
+  <v-row no-gutters class="px-5 pt-4">
+    <!-- Authorities (Police/SCDF/Ambulance called in at the scene) -->
+    <v-col cols="12" class="border-b pb-5 mb-5 mt-1">
+      <p class="mb-2" style="font-size: 17px; font-weight: 600">
+        Authorities (Police/SCDF/Ambulance called in at the scene)?
+      </p>
+      <p
+        v-if="authorities?.authoritiesValue == 'no'"
+        class="mt-2 text-h6 text-capitalize"
+      >
+        {{ authorities?.authoritiesValue }}
+      </p>
+
+      <v-data-table
+        v-else
+        :headers="authoritiesTableHeader"
+        :items="authorities?.authoritiesCalled"
+        fixed-header
+        hide-default-footer
+        :hide-default-header="false"
+        items-per-page="100"
+        style="max-height: calc(100vh - (200px))"
+        class="border mt-5"
+      >
+      </v-data-table>
+    </v-col>
+
+    <!-- Input lists -->
+    <v-col cols="12" class="pb-3 mb-5 mt-1">
+      <v-row no-gutters>
+        <v-col cols="12" class="px-1 mb-7">
+          <p class="mb-2" style="font-size: 17px; font-weight: 600">
+            What was done to address the incident thereafter?
+          </p>
+          <p class="mt-2 text-h6 text-capitalize">
+            {{ authorities?.incidentThereAfter }}
+          </p>
+        </v-col>
+
+        <v-col cols="12" class="px-1 mb-7">
+          <p class="mb-2" style="font-size: 17px; font-weight: 600">
+            Were the management notified and who was notified?
+          </p>
+          <v-row no-gutters>
+            <v-col cols="12" sm="6" class="px-1">
+              <InputLabel class="text-capitalize" title="Action Taken" />
+              <p class="mt-2 text-h6 text-capitalize">
+                {{ authorities?.managementNotified?.actionTaken }}
+              </p>
+            </v-col>
+            <v-col cols="12" sm="6" class="px-1">
+              <InputLabel
+                class="text-capitalize"
+                title="Management Notified Time"
+              />
+              <p class="mt-2 text-h6 text-capitalize">
+                {{ authorities?.managementNotified?.time }}
+              </p>
+            </v-col>
+          </v-row>
+        </v-col>
+
+        <v-col cols="12" class="px-1 mb-7">
+          <p class="mb-2" style="font-size: 17px; font-weight: 600">
+            How the incident resolved?
+          </p>
+          <p class="mt-2 text-h6 text-capitalize">
+            {{ authorities?.incidentResolved }}
+          </p>
+        </v-col>
+
+        <v-col cols="12" class="px-1 mb-7">
+          <p class="mb-2" style="font-size: 17px; font-weight: 600">
+            What was the cause of the incident?
+          </p>
+          <p class="mt-2 text-h6 text-capitalize">
+            {{ authorities?.causeOfIncident }}
+          </p>
+        </v-col>
+
+        <v-col cols="12" class="px-1 mb-6">
+          <p class="mb-2" style="font-size: 17px; font-weight: 600">
+            Any system used to verify incident?
+          </p>
+          <p class="mt-2 text-h6 text-capitalize">
+            {{ authorities?.systemUsed }}
+          </p>
+        </v-col>
+
+        <v-col cols="12" class="px-1 mb-6">
+          <p class="mb-2" style="font-size: 17px; font-weight: 600">
+            Any cctv records or picture taken?
+          </p>
+          <p class="mt-2 text-h6 text-capitalize">
+            {{ authorities?.cctvRecord }}
+          </p>
+        </v-col>
+
+        <v-col cols="12" class="px-1 mb-6">
+          <p class="mb-2" style="font-size: 17px; font-weight: 600">
+            Particulars of tenant/Owner (if any)
+          </p>
+          <p class="mt-2 text-h6 text-capitalize">
+            {{ authorities?.particularsOwner }}
+          </p>
+        </v-col>
+
+        <v-col cols="12" class="px-1 mb-6">
+          <p class="mb-2" style="font-size: 17px; font-weight: 600">
+            When was the incident resolved?
+          </p>
+          <v-row no-gutters>
+            <v-col cols="12" sm="6" class="px-1">
+              <InputLabel class="text-capitalize" title="Action Taken" />
+              <p class="mt-2 text-h6 text-capitalize">
+                {{ authorities?.whenIncidentResolve?.actionTaken }}
+              </p>
+            </v-col>
+            <v-col cols="12" sm="6" class="px-1">
+              <InputLabel
+                class="text-capitalize"
+                title="Incident Resolve Time"
+              />
+              <p class="mt-2 text-h6 text-capitalize">
+                {{ authorities?.whenIncidentResolve?.time }}
+              </p>
+            </v-col>
+          </v-row>
+        </v-col>
+
+        <v-col cols="12" class="px-1 mb-6">
+          <p class="mb-2" style="font-size: 17px; font-weight: 600">
+            Name of shift in charge?
+          </p>
+          <v-row no-gutters>
+            <v-col cols="12" sm="6" class="px-1">
+              <InputLabel class="text-capitalize" title="Person in Charge" />
+              <p class="mt-2 text-h6 text-capitalize">
+                {{ authorities?.nameOfShiftIncharge?.personInCharge }}
+              </p>
+            </v-col>
+            <v-col cols="12" sm="6" class="px-1">
+              <InputLabel class="text-capitalize" title="Action Taken" />
+              <p class="mt-2 text-h6 text-capitalize">
+                {{ authorities?.nameOfShiftIncharge?.actionTaken }}
+              </p>
+            </v-col>
+          </v-row>
+        </v-col>
+
+        <v-col cols="12" class="px-1 mb-6">
+          <p class="mb-2" style="font-size: 17px; font-weight: 600"></p>
+          <v-row no-gutters>
+            <v-col cols="12" sm="6" class="px-1">
+              <InputLabel class="text-capitalize" title="Shift Start" />
+              <p class="mt-2 text-h6 text-capitalize">
+                {{ authorities?.nameOfShiftIncharge?.shiftStart }}
+              </p>
+            </v-col>
+            <v-col cols="12" sm="6" class="px-1">
+              <InputLabel class="text-capitalize" title="Shift End" />
+              <p class="mt-2 text-h6 text-capitalize">
+                {{ authorities?.nameOfShiftIncharge?.shiftEnd }}
+              </p>
+            </v-col>
+          </v-row>
+        </v-col>
+
+        <v-col cols="12" class="px-1">
+          <p class="mb-2" style="font-size: 17px; font-weight: 600">
+            Any security implication due to the incident?
+          </p>
+          <p class="mt-2 text-h6 text-capitalize">
+            {{ authorities?.securityImplication }}
+          </p>
+        </v-col>
+      </v-row>
+    </v-col>
+  </v-row>
+</template>
+
+<script lang="ts" setup>
+definePageMeta({
+  middleware: ["01-auth", "02-org"],
+  memberOnly: true,
+});
+
+// imports
+
+// utilities
+
+// props
+const props = defineProps({
+  authorities: {
+    type: Object as PropType<Record<string, any> | null>,
+    required: true,
+  },
+});
+
+// emits
+
+// state
+const authoritiesTableHeader = [
+  {
+    title: "Type of Authorities",
+    value: "type",
+  },
+  {
+    title: "Vehicle Number",
+    value: "vehicleNumber",
+  },
+  {
+    title: "Person in Charge",
+    value: "personInCharge",
+  },
+  {
+    title: "Case Report Reference",
+    value: "caseReportReference",
+  },
+  {
+    title: "Description",
+    value: "description",
+  },
+];
+</script>