remove keycloak use cookie auth

This commit is contained in:
Warunee Tamkoo 2024-08-28 15:29:09 +07:00
parent 035db71697
commit 5a5e37c12d
27 changed files with 501 additions and 440 deletions

View file

@ -2,7 +2,6 @@
import avatar from "@/assets/avatar_user.jpg";
import { ref, reactive, onMounted } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import keycloak from "@/plugins/keycloak";
import { useRoute, useRouter } from "vue-router";
@ -11,13 +10,13 @@ import config from "@/app.config";
import { useQuasar, type QTableProps } from "quasar";
interface ListMain {
id: string
id: string;
round_no: number;
date_start: string
date_finish: string
mentors: string
commander: string
chairman: string
date_start: string;
date_finish: string;
mentors: string;
commander: string;
chairman: string;
}
const profileId = ref<string>("");
@ -38,7 +37,7 @@ const mode = ref<any>($q.screen.gt.xs);
const profileImg = ref<string>("");
const router = useRouter();
const route = useRoute();
const idEva = ref<string>(route.params.id as string)
const idEva = ref<string>(route.params.id as string);
const formData = reactive<any>({
prefix: "",
firstName: "",
@ -123,7 +122,7 @@ function onMobile(type: string) {
function getMain() {
showLoader();
http
.get(config.API.profilePosition+`/${idEva.value}`)
.get(config.API.profilePosition + `/${idEva.value}`)
.then(async (res) => {
const data = res.data.result;
formData.prefix = data.prefix;
@ -182,7 +181,7 @@ onMounted(async () => {
});
</script>
<template>
<div class="toptitle col-12 row items-center">
<div class="toptitle col-12 row items-center">
<q-btn
icon="mdi-arrow-left"
unelevated
@ -195,104 +194,102 @@ onMounted(async () => {
/>
รายละเอยดงานทไดบมอบหมาย
</div>
<div class="row q-col-gutter-md">
<div v-if="$q.screen.gt.xs" class="col-12">
<q-card>
<div class="bg-grey-1 row q-pa-sm items-center">
<span class="text-teal text-weight-bold text-body2">{{
formData.firstName
? `${formData.prefix}${formData.firstName} ${formData.lastName}`
: "-"
}}</span>
<div class="row q-col-gutter-md">
<div v-if="$q.screen.gt.xs" class="col-12">
<q-card>
<div class="bg-grey-1 row q-pa-sm items-center">
<span class="text-teal text-weight-bold text-body2">{{
formData.firstName
? `${formData.prefix}${formData.firstName} ${formData.lastName}`
: "-"
}}</span>
</div>
<q-resize-observer @resize="onResize" />
<q-card-section class="q-pa-md">
<div class="row">
<div class="col-2 text-center self-center">
<q-avatar :size="sizeImg" rounded>
<img
:src="profileImg"
style="border-radius: 10px; object-fit: cover"
/>
</q-avatar>
</div>
<q-resize-observer @resize="onResize" />
<q-card-section class="q-pa-md">
<div class="col-10 column justify-center no-wrap">
<div class="row text-grey-6">
<div class="col-4">ตำแหนงในสายงาน</div>
<div class="col-4">ระด</div>
<div class="col-4">งก</div>
</div>
<div class="row">
<div class="col-2 text-center self-center">
<q-avatar :size="sizeImg" rounded>
<img
:src="profileImg"
style="border-radius: 10px; object-fit: cover"
/>
</q-avatar>
<div class="col-4">
{{ formData.position ? formData.position : "-" }}
</div>
<div class="col-10 column justify-center no-wrap">
<div class="row text-grey-6">
<div class="col-4">ตำแหนงในสายงาน</div>
<div class="col-4">ระด</div>
<div class="col-4">งก</div>
</div>
<div class="row">
<div class="col-4">
{{ formData.position ? formData.position : "-" }}
</div>
<div class="col-4">
{{ formData.posLevelName ? formData.posLevelName : "-" }}
</div>
<div class="col-4">
{{ formData.org ? formData.org : "-" }}
</div>
</div>
<div class="col-4">
{{ formData.posLevelName ? formData.posLevelName : "-" }}
</div>
<div class="col-4">
{{ formData.org ? formData.org : "-" }}
</div>
</div>
</q-card-section>
</q-card>
</div>
<div v-else class="col-12">
<q-card bordered>
<div class="bg-grey-1 row q-pa-sm items-center">
<span class="text-teal text-weight-bold text-body2">{{
formData.firstName
? `${formData.prefix}${formData.firstName} ${formData.lastName}`
: "-"
}}</span>
</div>
<q-resize-observer @resize="onResize" />
<q-card-section>
<div class="text-center q-mt-md">
<q-avatar :size="sizeImg" rounded>
<img
:src="profileImg"
style="border-radius: 10px; object-fit: cover"
/>
</q-avatar>
</div>
</q-card-section>
<q-list class="q-mt-md">
<q-item>
<q-item-section>
<q-item-label class="text-grey-6"
>ตำแหนงในสายงาน</q-item-label
>
<q-item-label>{{
formData.position ? formData.position : "-"
}}</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-item-label class="text-grey-6">ระด</q-item-label>
<q-item-label>{{
formData.posLevelName ? formData.posLevelName : "-"
}}</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-item-label class="text-grey-6">งก</q-item-label>
<q-item-label>{{
formData.org ? formData.org : "-"
}}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</q-card-section>
</q-card>
</div>
<div v-else class="col-12">
<q-card bordered>
<div class="bg-grey-1 row q-pa-sm items-center">
<span class="text-teal text-weight-bold text-body2">{{
formData.firstName
? `${formData.prefix}${formData.firstName} ${formData.lastName}`
: "-"
}}</span>
</div>
<div class="col-12 row">
<q-card bordered class="col-12 q-pa-md">
<div class="row">
<!-- <q-btn
<q-resize-observer @resize="onResize" />
<q-card-section>
<div class="text-center q-mt-md">
<q-avatar :size="sizeImg" rounded>
<img
:src="profileImg"
style="border-radius: 10px; object-fit: cover"
/>
</q-avatar>
</div>
</q-card-section>
<q-list class="q-mt-md">
<q-item>
<q-item-section>
<q-item-label class="text-grey-6">ตำแหนงในสายงาน</q-item-label>
<q-item-label>{{
formData.position ? formData.position : "-"
}}</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-item-label class="text-grey-6">ระด</q-item-label>
<q-item-label>{{
formData.posLevelName ? formData.posLevelName : "-"
}}</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-item-label class="text-grey-6">งก</q-item-label>
<q-item-label>{{
formData.org ? formData.org : "-"
}}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
<div class="col-12 row">
<q-card bordered class="col-12 q-pa-md">
<div class="row">
<!-- <q-btn
@click="router.push(`/probation/add/${profileId}`)"
size="12px"
flat
@ -302,141 +299,133 @@ onMounted(async () => {
>
<q-tooltip>เพมงานทไดบมอบหมาย</q-tooltip>
</q-btn> -->
<q-space />
<q-input
class="inputgreen"
outlined
dense
v-model="filter"
label="ค้นหา"
:style="mode ? `max-width: 200px` : `max-width: 150px`"
>
<template v-slot:append>
<q-icon
v-if="filter !== ''"
name="clear"
class="cursor-pointer"
@click="filter = ''"
/>
<q-icon
v-else
name="search"
class="cursor-pointer"
@click="filter = ''"
/>
</template>
</q-input>
<q-select
v-if="$q.screen.gt.xs"
class="q-ml-sm"
dense
multiple
outlined
emit-value
map-options
options-cover
options-dense
option-value="name"
style="min-width: 150px"
v-model="visibleColumns"
:options="columns"
:display-value="$q.lang.table.columns"
<q-space />
<q-input
class="inputgreen"
outlined
dense
v-model="filter"
label="ค้นหา"
:style="mode ? `max-width: 200px` : `max-width: 150px`"
>
<template v-slot:append>
<q-icon
v-if="filter !== ''"
name="clear"
class="cursor-pointer"
@click="filter = ''"
/>
</div>
<div class="q-mt-sm">
<d-table
flat
dense
bordered
ref="table"
virtual-scroll
:rows="rows"
:columns="columns"
:grid="!$q.screen.gt.xs"
:filter="filter"
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
:virtual-scroll-sticky-size-start="48"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
</q-tr>
</template>
<q-icon
v-else
name="search"
class="cursor-pointer"
@click="filter = ''"
/>
</template>
</q-input>
<q-select
v-if="$q.screen.gt.xs"
class="q-ml-sm"
dense
multiple
outlined
emit-value
map-options
options-cover
options-dense
option-value="name"
style="min-width: 150px"
v-model="visibleColumns"
:options="columns"
:display-value="$q.lang.table.columns"
/>
</div>
<div class="q-mt-sm">
<d-table
flat
dense
bordered
ref="table"
virtual-scroll
:rows="rows"
:columns="columns"
:grid="!$q.screen.gt.xs"
:filter="filter"
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
:virtual-scroll-sticky-size-start="48"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
</q-tr>
</template>
<template v-if="$q.screen.gt.xs" v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td
v-for="(col, index) in props.cols"
:key="col.name"
<template v-if="$q.screen.gt.xs" v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td
v-for="(col, index) in props.cols"
:key="col.name"
@click="onDetail(props.row.id)"
>
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name == 'status'">
{{ props.row.status ? props.row.status : "-" }}
</div>
<div v-else>
{{ col.value ? col.value : "-" }}
</div>
</q-td>
</q-tr>
</template>
<template v-else v-slot:item="props">
<div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
<q-card bordered flat>
<q-list dense class="q-mt-lg relative-position">
<q-btn
icon="info"
color="info"
flat
dense
round
size="14px"
class="absolute_button"
@click="onDetail(props.row.id)"
>
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name == 'status'">
{{ props.row.status ? props.row.status : "-" }}
</div>
<div v-else>
{{ col.value ? col.value : "-" }}
</div>
</q-td>
</q-tr>
</template>
<template v-else v-slot:item="props">
<div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
<q-card bordered flat>
<q-list dense class="q-mt-lg relative-position">
<q-btn
icon="info"
color="info"
flat
dense
round
size="14px"
class="absolute_button"
@click="onDetail(props.row.id)"
>
<q-tooltip>ประวแกไขตำแหน/เงนเดอน</q-tooltip>
</q-btn>
<q-item v-for="col in props.cols" :key="col.name">
<q-item-section class="fix_top">
<q-item-label
class="text-grey-6 text-weight-medium"
>{{ col.label }}</q-item-label
>
</q-item-section>
<q-item-section class="fix_top">
<q-item-label
class="text-dark text-weight-medium"
>{{ col.value ? col.value : "-" }}</q-item-label
>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</template>
<template v-slot:no-data>
<div
class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
>
<span> ไมพบขอม </span>
</div>
</template>
</d-table>
</div>
</q-card>
<q-tooltip>ประวแกไขตำแหน/เงนเดอน</q-tooltip>
</q-btn>
<q-item v-for="col in props.cols" :key="col.name">
<q-item-section class="fix_top">
<q-item-label class="text-grey-6 text-weight-medium">{{
col.label
}}</q-item-label>
</q-item-section>
<q-item-section class="fix_top">
<q-item-label class="text-dark text-weight-medium">{{
col.value ? col.value : "-"
}}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</template>
<template v-slot:no-data>
<div
class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
>
<span> ไมพบขอม </span>
</div>
</template>
</d-table>
</div>
</div>
</q-card>
</div>
</div>
</template>
<style scoped>
.absolute_button {