start commit for admin system

src/components/CardProfile.vue

@@ -0,0 +1,170 @@
+<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, findOrgNameOld, findOrgName } = useCounterMixin();
+
+/** propsDataProfile*/
+const props = defineProps({
+  data: { type: Object, required: true },
+  type: { type: String, default: "" },
+});
+
+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 ?? ""
+  } `;
+
+  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 = findOrgNameOld(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 = 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">
+              {{ props.type == "employee" ? "ตำแหน่ง" : "ตำแหน่งในสายงาน" }}
+            </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">
+              {{ props.type == "employee" ? "กลุ่มงาน" : "ประเภทตำแหน่ง" }}
+            </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"
+    :type="props.type"
+  />
+</template>
+
+<style scoped></style>