hrms-mgt/src/components/CardProfile.vue

<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";

/** importType*/
import type { FormProfile } from "@/interface/main";
import type { DataProfile } from "@/modules/05_placement/interface/index/Main";

/** importComponents*/
import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";

/** impoerStore*/
import { useCounterMixin } from "@/stores/mixin";

/** use*/
const $q = useQuasar();
const { messageError, findOrgName } = useCounterMixin();

/** propsDataProfile*/
const props = defineProps({
  data: { type: Object, required: true },
});

const profile = reactive<FormProfile>({
  id: "",
  avatar: "",
  fullName: "",
  position: "",
  positionLevel: "",
  organization: "",
});
const modalPersonal = ref<boolean>(false);

const profileId = ref<string | null>("");

function fetchDataProfile(data: DataProfile) {
  if (data.profileId) {
    fetchProfile(data.profileId);
  }
  profile.id = data.profileId;
  profile.fullName = `${data.prefix}${data.firstName} ${data.lastName}`;
  profile.position =
    data.position == "" || data.position === null ? "-" : data.position;
  if (data.posTypeName && data.posLevelName) {
    profile.positionLevel = `${data.posTypeName} (${data.posLevelName})`;
  } else if (data.posTypeName) {
    profile.positionLevel = `${data.posTypeName}`;
  } else if (data.posLevelName) {
    profile.positionLevel = `(${data.posLevelName})`;
  } else profile.positionLevel = "-";
  profile.organization = findOrgName(data);
}

function fetchProfile(id: string) {
  if (profile.avatar === "") {
    http
      .get(
        config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, `profile-${id}`)
      )
      .then(async (res) => {
        profile.avatar = res.data.downloadUrl;
      });
  }
}

function updatemodalPersonal(modal: boolean) {
  modalPersonal.value = modal;
}

function onclickViewinfo() {
  modalPersonal.value = true;
}

watch(
  () => props.data,
  () => {
    const dataMain = props.data as DataProfile;
    profileId.value = dataMain.profileId;
    fetchDataProfile(dataMain);
  }
);
</script>

<template>
  <q-card bordered class="row col-12 text-dark">
    <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
      <div class="q-pl-sm text-weight-bold text-subtitle2">
        {{ profile.fullName }}
      </div>
      <q-space />
      <q-btn
        v-if="profileId"
        outline
        color="blue"
        dense
        icon-right="mdi-open-in-new"
        class="q-px-sm"
        label="ดูข้อมูลทะเบียนประวัติ"
        @click="onclickViewinfo()"
      />
    </div>
    <div class="col-12"><q-separator /></div>
    <div class="row col-12 q-pa-md">
      <div class="col-12 row bg-white q-col-gutter-md">
        <div class="col-xs-3 col-sm-2 col-md-1 row">
          <q-img :src="profile.avatar" v-if="profile.avatar !== ''" />
          <q-img src="@/assets/avatar_user.jpg" v-else />
        </div>
        <div class="col-xs-6 col-sm-3 row items-center">
          <div class="col-12 q-pl-md">
            <div class="col-12 text-top">ตำแหน่งในสายงาน</div>
            <div class="col-12 text-detail">
              {{ profile.position }}
            </div>
          </div>
        </div>
        <div class="col-xs-6 col-sm-3 row items-center">
          <div class="col-12">
            <div class="col-12 text-top">ประเภทตำแหน่ง</div>
            <div class="col-12 text-detail">
              {{ profile.positionLevel }}
            </div>
          </div>
        </div>
        <div class="col-xs-6 col-sm-3 row items-center">
          <div class="col-12">
            <div class="col-12 text-top">สังกัด</div>
            <div class="col-12 text-detail">
              {{ profile.organization }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </q-card>

  <PopupPersonal
    :modal="modalPersonal"
    :id="profile.id"
    @update:modal="updatemodalPersonal"
  />
</template>

<style scoped></style>