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 { PropType } from "vue";
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 { findOrgNameOldHtml, findOrgNameHtml } = useCounterMixin();

/** propsDataProfile*/
const props = defineProps({
  data: { type: Object as PropType<DataProfile>, default: () => ({}) },
  type: { type: String, default: "" },
});

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

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

async function fetchDataProfile(data: DataProfile) {
  if (data.profileId) {
    fetchCheckAvatar(data.profileId);
  }
  profile.id = data.profileId;
  profile.fullName = `${data.prefix ?? ""}${data.firstName ?? ""} ${
    data.lastName ?? ""
  } `;

  if (data["posTypeNameOld"] !== undefined) {
    profile.position =
      data.positionOld == "" || data.positionOld == null
        ? "-"
        : data.positionOld;
    if (data.posTypeNameOld && data.posLevelNameOld) {
      profile.positionLevel = `${data.posTypeNameOld} (${data.posLevelNameOld})`;
    } else if (data.posTypeNameOld) {
      profile.positionLevel = `${data.posTypeNameOld}`;
    } else if (data.posLevelNameOld) {
      profile.positionLevel = `(${data.posLevelNameOld})`;
    } else profile.positionLevel = "-";
    profile.organization = findOrgNameOldHtml(data);
  } else {
    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 = findOrgNameHtml(data);
  }
}

function fetchCheckAvatar(id: string) {
  const path =
    props.type === "employee"
      ? `profile-employee/avatar/profileEmployeeId-admin/${id}`
      : `profile/avatar/profileId-admin/${id}`;
  http.get(config.API.orgCheckAvatarCard(path)).then((res) => {
    const data = res.data.result;
    if (data.avatarName) {
      fetchProfile(id, data.avatarName);
    }
  });
}

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

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

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

watch(
  () => props.data,
  async () => {
    const dataMain = (await props.data) as DataProfile;
    profileId.value = dataMain.profileId;
    await 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-12 col-sm-1 row">
          <q-img
            :src="profile.avatar"
            v-if="profile.avatar !== ''"
            style="height: 140px"
          />
          <q-img src="@/assets/avatar_user.jpg" v-else style="height: 140px" />
        </div>
        <div class="col-xs-12 col-sm-3 row">
          <div class="col-12">
            <div class="col-12 text-top">
              {{ props.type == "employee" ? "ตำแหน่ง" : "ตำแหน่งในสายงาน" }}
            </div>
            <div class="col-12 text-detail">
              {{ profile.position }}
            </div>
          </div>
        </div>
        <div class="col-xs-12 col-sm-3 row">
          <div class="col-12">
            <div class="col-12 text-top">
              {{
                props.type.toLowerCase() == "employee"
                  ? "กลุ่มงาน"
                  : "ตำแหน่งประเภท"
              }}
            </div>
            <div class="col-12 text-detail">
              {{ profile.positionLevel }}
            </div>
          </div>
        </div>
        <div class="col-xs-12 col-sm-5 row">
          <div class="col-12">
            <div class="col-12 text-top">สังกัด</div>
            <div class="col-12 text-detail text-html">
              {{ profile.organization }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </q-card>

  <PopupPersonal
    :modal="modalPersonal"
    :id="profile.id"
    @update:modal="updatemodalPersonal"
    :type="props.type"
    :is-employee="props.type"
  />
</template>

<style scoped></style>