hgh_admin/resources/js/pages/pages/patient-labkits/labkit.vue

<script setup>
import { onBeforeMount, onMounted, onUnmounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
const store = useStore()
const route = useRoute()
const router = useRouter()
const patientId = route.params.patient_id;
const search = ref('')
const getSelectedCart = ref('');
const patientLabKitList = ref([])
const getIsTonalSnackbarVisible = ref(false);
const labkitStatus = ref('');



onBeforeMount(async () => {});
onMounted(async () => {
  store.dispatch('updateIsLoading', true)
  await store.dispatch('patientLabKitList', {
    patient_id : patientId
  })
  console.log('patientLabKitList',store.getters.getPatientLabKitList.cart)
  store.dispatch('updateIsLoading', false)
 
});
const getPatientLabKitList = computed(async () => {
  patientLabKitList.value =  store.getters.getPatientLabKitList.cart;
    
  return patientLabKitList.value;  
    
});

const onChange = (id)=> {
  getSelectedCart.value = id;
  
}
const onStatusChange = async(status) => {
  console.log('Selected status:', status, getSelectedCart.value);
  store.dispatch('updateIsLoading', true)
  await store.dispatch('updateLabkitListStatus', {
    cart_id : getSelectedCart.value,
    status: status
  })
  labkitStatus.value =   store.getters.getPatientLabKitStatus.status;
  getIsTonalSnackbarVisible.value = true;
};

onUnmounted(async () => {});
const headers = [
  {
    title: 'NAME',
    key: 'first_name',
  },
  {
    title: 'Address',
    key: 'shipping_address1',
  },
  {
    title: 'Amount',
    key: 'shipping_amount',
  },
  {
    title: 'Status',
    key: 'status',
  },
]
const breadcrums = [
    {
        title: 'Patient',
        disabled: false,
        to: '/admin/patients',
    },
    {
        title: 'Labkit',
        disabled: false,
    }
    
];


</script>

<template>
  <v-breadcrumbs :items="breadcrums" class="text-primary pt-0 pb-0 mb-5">
        <template v-slot:divider style="padding-top:0px; padding-bottom:0px">
            >
        </template>
    </v-breadcrumbs>
  <v-row>
    <VSnackbar class="pl-0"  v-model="getIsTonalSnackbarVisible" :timeout="50000" location="top end" variant="flat"
              color="success">
              <VIcon
                    class="ri-success-line success-icon pl-0"
                  /> {{labkitStatus }}
            </VSnackbar>
    <v-col cols="12" md="12" v-if="getPatientLabKitList">
      <v-card title="LabKits">
      <VCardText >
          <VRow>
            <VCol
              cols="12"
              offset-md="8"
              md="4"
            >
              <VTextField
                v-model="search"
                label="Search"
                placeholder="Search ..."
                append-inner-icon="ri-search-line"
                single-line
                hide-details
                dense
                outlined
              />
            </VCol>
          </VRow>
        </VCardText>
      <VDataTable
        :headers="headers"
        :items="patientLabKitList"
        :search="search"
        :items-per-page="5"
        class="text-no-wrap"
      >
      <template #item.id="{ item }">
    {{ item.id }}
  </template>
        <!-- full name -->
        <template #item.first_name="{ item }">
          <div class="d-flex align-center">
            <!-- avatar -->
            <VAvatar
              size="32"
              :color="item.avatar ? '' : 'primary'"
              :class="item.avatar ? '' : 'v-avatar-light-bg primary--text'"
              :variant="!item.avatar ? 'tonal' : undefined"
            >
              <VImg
                v-if="item.avatar"
                :src="item.avatar"
              />
              <span
                v-else
                class="text-sm"
              >{{ avatarText(item.first_name) }}</span>
            </VAvatar>

            <div class="d-flex flex-column ms-3">
              <span class="d-block font-weight-medium text-high-emphasis text-truncate">{{ item.first_name }} {{ item.last_name }}</span>
              <!-- <small>{{ item.post }}</small> -->
            </div>
          </div>
        </template>
        <!-- <template #item.first_name="{ item }">
          <div class="d-flex align-center">
            <span>{{ item.first_name }} {{ item.last_name }}</span>
          </div>
        </template> -->
        <template #item.shipping_address1="{ item }">
          <div class="d-flex align-center">
            
                
            <span>{{ item.shipping_address1 }},
               {{ item.shipping_address2 }},
              {{ item.shipping_city }},
              {{item.shipping_state}},
              {{ item.shipping_zipcode}},
              {{ item.shipping_country }}
              </span>
            
          </div>
        </template>
        

        

        <!-- status -->
        <template #item.status="{ item }">
          <VSelect
                  v-model="item.status"
                  placeholder="Status"
                  density="comfortable"
                  :items="['Pending', 'Shipped', 'Delivered', 'Transit', 'Recevied', 'Result']"
                  @update:model-value="onStatusChange"
                  @click="onChange(item.id)"
                  
          />
        </template>
      </VDataTable>
      </v-card>
    </v-col>
  </v-row>
</template>
<style scoped>
.v-snackbar__content{
  padding: 0px !important;
}
</style>