purityselect/resources/js/pages/patient/lab-kits.vue

<script setup>
import { computed, onMounted, reactive, ref } from "vue";
import { useStore } from "vuex";
const route = useRoute();
const isConfirmDialogVisible = ref(false);
const isUserInfoEditDialogVisible = ref(false);
const isEditAddressDialogVisible = ref(false);
const scheduleDate = ref('');
const scheduleTime = ref('');
const isLoading = ref(true);
const state = reactive({
    addLabOrder: false,
    selectedTestKitId: null,
    valid: false,
    testKits: [],
    item_id: null,
    labKitList: []
});
const props = defineProps({
    orderID: {
        type: Number,
        required: true,
    },
})
const getFieldRules = (fieldName, errorMessage) => {
    if (fieldName) {
        return [
            v => !!v || `${errorMessage}`,
            // Add more validation rules as needed
        ];
    }

};

const headersLab = [
    {
        title: "Product",
        key: "item_name",
    },
    {
        title: "Lab Kit",
        key: "lab_kit_name",
    },
    {
        title: "Status",
        key: "status",
    },
    {
        title: "Results",
        key: "result",
    },

];
const openDialog = (item) => {

    state.item_id = item.id
    state.addLabOrder = true
};
const openPdfInNewTab = (url) => {
    window.open(url, '_blank')
}
const storeTestKit = async () => {
    await store.dispatch('saveOrderLabKitBYitems', {
        lab_kit_id: state.selectedTestKitId,
        item_id: state.item_id,
        cart_id: route.params.id
    })

    console.log('Selected Test Kit:', state.selectedTestKitId);

    state.addLabOrder = false;
    state.selectedTestKitId = null
    state.item_id = null

};
const store = useStore();
const orderData = ref(null);
const pateintDetail = ref({});
const productItems = ref([]);
const filteredOrders = computed(() => {
    let filtered = store.getters.getPatientOrderDetail;

    return filtered;
});







const testKits = computed(async () => {
    //await store.dispatch('getLabKitProductList', {})
    // console.log(store.getters.getLabOrderProductList)

    //state.testKits = store.getters.getLabOrderProductList
});
onMounted(async () => {
    await store.dispatch('getOrderLabKitPatient', { cart_id: route.params.id })

    state.labKitList = store.getters.getOrderLabKitPatient
    console.log('state.testKits', state.labKitList)
    isLoading.value = false

});
const getStatusColor = (status) => {
    switch (status) {
        case "pending":
            return "orange";
        case "Shipped":
            return "blue";
        case "Delivered":
            return "green";
        case "Cancelled":
            return "red";
        default:
            return "gray";
    }

};
const getStatusColorLabKit = (status) => {
    switch (status) {
        case "Ordered":
            return "orange";
        case "Shipped":
            return "blue";
        case "Delivered":
            return "green";
        case "Cancelled":
            return "red";
        case "Waiting For Results":
            return "red";
        default:
            return "gray";
    }
};


</script>
<template>




    <!-- 👉 Order Details -->

    <v-dialog v-model="state.addLabOrder" max-width="400">
        <v-card>
            <v-card-title>Add Lab Kit</v-card-title>
            <v-card-text>
                <v-form ref="form" v-model="state.valid" class="mt-1">
                    <v-row v-if="testKits">
                        <v-col cols="12" md="12">
                            <v-autocomplete label="Test Kit" v-model="state.selectedTestKitId" style="column-gap: 0px;"
                                :items="state.testKits" item-title="name" item-value="id"
                                :rules="getFieldRules('Test Kit', 'Test Kit is required')"></v-autocomplete>
                        </v-col>
                    </v-row>
                </v-form>
            </v-card-text>
            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="primary" text @click="state.addLabOrder = false">Cancel</v-btn>
                <v-btn color="primary" @click="storeTestKit" :disabled="!state.valid">Save</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>


    <VCard title="Lab Kits" style="margin-bottom: 10px;" v-if="state.labKitList.length > 0">
        <VCardText>
            <div class="table-container">
                <VDataTable :headers="headersLab" :loading="isLoading" :items="state.labKitList" class="text-no-wrap ">
                    <template #item.item_name="{ item }">
                        <div class="d-flex gap-x-3">

                            <div class="d-flex flex-column align-center">
                                <h5 style="margin-bottom: 0px; font-size: 0.83em;">
                                    {{ item.item_name }}
                                </h5>

                            </div>
                        </div>
                    </template>
                    <template #item.lab_kit_name="{ item }">
                        <div class="d-flex gap-x-3">

                            <div class="d-flex flex-column align-center">
                                <h5 style="margin-bottom: 0px; font-size: 0.83em;">
                                    {{ item.lab_kit_name }}
                                </h5>

                            </div>
                        </div>
                    </template>


                    <template #item.status="{ item }">
                        <span>
                            <VChip variant="tonal" :color="getStatusColorLabKit(item.status)" size="small">
                                {{ item.status }}
                            </VChip>
                        </span>
                    </template>
                    <template #item.result="{ item }">
                        <span v-if="item.result">
                            <a href="#" @click="openPdfInNewTab(item.result)" target="_blank" class="custom-link">
                                <div class="d-inline-flex align-center">
                                    <img :src="pdf" height="20" class="me-2" alt="img">
                                    <span class="app-timeline-text font-weight-medium">
                                        results.pdf
                                    </span>
                                </div>
                            </a>

                        </span>
                        <span v-else>
                            Waiting For Result
                        </span>
                    </template>


                    <template #bottom />
                </VDataTable>
            </div>
        </VCardText>
    </VCard>





</template>
<style scoped>
.appointment-details {
    display: flex;
    flex-direction: column;
}

.detail-item {
    display: flex;
    margin-bottom: 10px;
}

.detail-label {
    font-weight: bold;
    min-width: 120px;
}

.detail-value {
    flex: 1;
}

::-webkit-scrollbar {
    width: 10px;
    /* Width of the scrollbar */
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
    /* Color of the track */
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
    /* Color of the handle */
    border-radius: 5px;
    /* Roundness of the handle */
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
    /* Color of the handle on hover */
}
</style>