Merge branch 'dev/phat-2' into develop
This commit is contained in:
puriphatt
commit
34c7b1c65f
8 changed files with 125 additions and 39 deletions
|
|
@ -1,9 +1,10 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
import AppBox from './app/AppBox.vue';
|
||||
|
||||
defineProps<{
|
||||
title: string;
|
||||
category?: string;
|
||||
isEdit?: boolean;
|
||||
bgOn?: boolean;
|
||||
statusBranch?: string;
|
||||
|
|
@ -16,7 +17,6 @@ defineProps<{
|
|||
undo?: (...args: unknown[]) => void;
|
||||
}>();
|
||||
|
||||
// const drawerWidth = ref(window.screen.width * 0.8);
|
||||
const drawerOpen = defineModel<boolean>('drawerOpen', {
|
||||
default: false,
|
||||
});
|
||||
|
|
@ -33,7 +33,6 @@ function reset() {
|
|||
<q-drawer
|
||||
@before-hide="reset"
|
||||
@hide="close"
|
||||
:width="$q.screen.gt.md ? 1200 : $q.screen.gt.xs ? 700 : 900"
|
||||
:breakpoint="1366"
|
||||
v-model="drawerOpen"
|
||||
behavior="mobile"
|
||||
|
|
@ -91,6 +90,7 @@ function reset() {
|
|||
</div>
|
||||
|
||||
<div class="col text-subtitle1 text-weight-bold text-center">
|
||||
<text v-if="category" class="app-text-muted">{{ category }} /</text>
|
||||
{{ title }}
|
||||
|
||||
<text
|
||||
|
|
|
|||
|
|
@ -6,9 +6,9 @@ const props = withDefaults(
|
|||
branch: {
|
||||
count: number;
|
||||
label: string;
|
||||
color?: 'pink' | 'purple';
|
||||
}[];
|
||||
dark?: boolean;
|
||||
color?: 'pink' | 'purple';
|
||||
isBranch?: boolean;
|
||||
}>(),
|
||||
{
|
||||
|
|
@ -29,7 +29,7 @@ const colorRotate = ['pink', 'purple'];
|
|||
v-for="(v, i) in props.branch"
|
||||
:key="v.label"
|
||||
class="bordered wave col-12"
|
||||
:class="{ [`stat__${color || colorRotate[i % 2]}`]: true }"
|
||||
:class="{ [`stat__${v.color || colorRotate[i % 2]}`]: true }"
|
||||
style="width: 200px; min-width: 150px; box-shadow: var(--shadow-2)"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
|
||||
|
|
|
|||
|
|
@ -77,6 +77,10 @@ html {
|
|||
transition: 100ms background ease-in-out;
|
||||
}
|
||||
|
||||
aside.q-drawer.q-drawer--right.fixed.q-drawer--on-top.q-drawer--mobile.q-drawer--top-padding {
|
||||
width: 85% !important;
|
||||
}
|
||||
|
||||
.bordered {
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
export default {
|
||||
personnelTitle: 'Personnel',
|
||||
personnelManagement: 'Personnel Management',
|
||||
personnelTooltipTitle: 'No personnel yet?',
|
||||
personnelTooltipCaption: 'Click + to add a personnel',
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
export default {
|
||||
personnelTitle: 'บุคลากร',
|
||||
personnelManagement: 'จัดการบุคลากร',
|
||||
personnelTooltipTitle: 'ยังไม่มีข้อมูลบุคลากร',
|
||||
personnelTooltipCaption: 'คลิก + เพื่อเพิ่มบุคลากร',
|
||||
|
|
|
|||
|
|
@ -41,14 +41,16 @@ const leftDrawerOpen = ref(false);
|
|||
const filterUnread = ref(false);
|
||||
const unread = ref<number>(1);
|
||||
const filterRole = ref<string[]>();
|
||||
const userImage = ref<string>();
|
||||
|
||||
const currentLanguage = ref<string>('ไทย');
|
||||
const language: {
|
||||
value: string;
|
||||
label: string;
|
||||
icon: string;
|
||||
}[] = [
|
||||
{ value: 'th-th', label: 'ไทย' },
|
||||
{ value: 'en-US', label: 'English' },
|
||||
{ value: 'th-th', label: 'ไทย', icon: 'circle-flags:th' },
|
||||
{ value: 'en-US', label: 'English', icon: 'circle-flags:us' },
|
||||
];
|
||||
|
||||
const notiOpen = ref(false);
|
||||
|
|
@ -84,8 +86,14 @@ const notification = ref<Notification[]>([
|
|||
read: true,
|
||||
},
|
||||
]);
|
||||
|
||||
const userImage = ref<string>();
|
||||
const options = ref([
|
||||
{
|
||||
icon: 'mdi-lock-outline',
|
||||
label: 'เปลี่ยนรหัสผ่าน',
|
||||
value: 'op1',
|
||||
color: 'primary',
|
||||
},
|
||||
]);
|
||||
|
||||
function setActive(button: NotificationButton) {
|
||||
notiMenu.value = notiMenu.value.map((current) => ({
|
||||
|
|
@ -130,7 +138,6 @@ onMounted(async () => {
|
|||
|
||||
const userRoles = getRole();
|
||||
if (userRoles) {
|
||||
console.log(userRoles);
|
||||
filterRole.value = userRoles.filter(
|
||||
(role) =>
|
||||
role !== 'default-roles-dev' &&
|
||||
|
|
@ -263,7 +270,8 @@ onMounted(async () => {
|
|||
dense
|
||||
flat
|
||||
no-caps
|
||||
:menu-offset="[0, 10]"
|
||||
content-style="border: 1px solid var(--border-color)"
|
||||
:menu-offset="[30, 10]"
|
||||
color="dark"
|
||||
class="q-pa-none account-menu-down dropdown-menu"
|
||||
>
|
||||
|
|
@ -296,32 +304,61 @@ onMounted(async () => {
|
|||
</q-item>
|
||||
</template>
|
||||
|
||||
<q-list class="dropdown-menu">
|
||||
<q-item clickable>
|
||||
<q-item-section avatar style="min-width: 30px">
|
||||
<q-icon
|
||||
color="secondary"
|
||||
size="18px"
|
||||
name="mdi-lock-outline"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label>เปลี่ยนรหัสผ่าน</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable v-close-popup @click="doLogout()">
|
||||
<q-item-section avatar style="min-width: 30px">
|
||||
<q-icon
|
||||
color="primary"
|
||||
size="18px"
|
||||
name="mdi-logout-variant"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label>ออกจากระบบ</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
<div no-padding class="row justify-center" style="width: 273.797px">
|
||||
<div class="column col-12 items-center">
|
||||
<div
|
||||
class="full-width row justify-center"
|
||||
style="position: relative"
|
||||
>
|
||||
<div
|
||||
class="full-width account-cover"
|
||||
:class="{ dark: $q.dark.isActive }"
|
||||
></div>
|
||||
<div class="avartar-border">
|
||||
<q-avatar size="72px" class="bg-primary">
|
||||
<img :src="userImage" v-if="userImage" />
|
||||
</q-avatar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="text-subtitle2 q-mb-xs text-center"
|
||||
style="margin-top: 58px"
|
||||
>
|
||||
{{ getName() }}
|
||||
</div>
|
||||
<div
|
||||
class="badge q-px-sm q-mb-md text-caption"
|
||||
:class="{ dark: $q.dark.isActive }"
|
||||
>
|
||||
{{ getRoleName(userStore.userOption.roleOpts, filterRole) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column col-12">
|
||||
<q-separator />
|
||||
<div class="column justify-center">
|
||||
<q-list dense v-for="op in options" :key="op.label">
|
||||
<q-item clickable>
|
||||
<q-item-section avatar>
|
||||
<q-icon :name="op.icon" :color="op.color" size="20px" />
|
||||
</q-item-section>
|
||||
<q-item-section class="q-py-sm">
|
||||
{{ op.label }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</div>
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
class="q-ma-sm logout-btn"
|
||||
:class="{ dark: $q.dark.isActive }"
|
||||
label="ออกจากระบบ"
|
||||
@click="doLogout()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-btn-dropdown>
|
||||
|
||||
<!-- theme -->
|
||||
|
|
@ -411,4 +448,41 @@ onMounted(async () => {
|
|||
color: var(--foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
border-radius: var(--radius-6);
|
||||
background-color: var(--indigo-0);
|
||||
text-wrap: nowrap;
|
||||
|
||||
&.dark {
|
||||
background-color: var(--surface-3);
|
||||
}
|
||||
}
|
||||
|
||||
.account-cover {
|
||||
height: 65px;
|
||||
background-color: var(--indigo-0);
|
||||
|
||||
&.dark {
|
||||
background-color: var(--surface-3);
|
||||
}
|
||||
}
|
||||
|
||||
.avartar-border {
|
||||
margin-top: 24px;
|
||||
border: 5px solid var(--surface-1);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
color: hsl(var(--negative-bg));
|
||||
background-color: hsl(var(--stone-3-hsl));
|
||||
|
||||
&.dark {
|
||||
background-color: transparent;
|
||||
border: 1px solid hsl(var(--negative-bg));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -89,6 +89,9 @@ const hqId = ref<string>();
|
|||
const brId = ref<string>();
|
||||
const formDialogRef = ref();
|
||||
const userStats = ref<BranchUserStats[]>();
|
||||
const sortedUserStats = computed(() => {
|
||||
return userStats.value?.slice().sort((a, b) => b.count - a.count);
|
||||
});
|
||||
const typeStats = ref<UserTypeStats>();
|
||||
const agencyFile = ref<File[]>([]);
|
||||
const agencyFileList = ref<{ name: string; url: string }[]>([]);
|
||||
|
|
@ -568,11 +571,12 @@ watch(
|
|||
</div>
|
||||
<div class="row full-width q-py-md" style="overflow-x: auto">
|
||||
<StatCardComponent
|
||||
v-if="userStats"
|
||||
v-if="sortedUserStats"
|
||||
:branch="
|
||||
userStats.map((v) => ({
|
||||
sortedUserStats.map((v) => ({
|
||||
count: v.count,
|
||||
label: $i18n.locale === 'en-US' ? v.nameEN : v.name,
|
||||
color: v.isHeadOffice ? 'pink' : 'purple',
|
||||
}))
|
||||
"
|
||||
:dark="$q.dark.isActive"
|
||||
|
|
@ -702,6 +706,7 @@ watch(
|
|||
|
||||
<DrawerInfo
|
||||
v-if="currentUser"
|
||||
:category="$t('personnelTitle')"
|
||||
bg-on
|
||||
:badgeClass="formData.gender === 'male' ? 'app-bg-male' : 'app-bg-female'"
|
||||
:badgeLabel="userCode"
|
||||
|
|
|
|||
|
|
@ -65,4 +65,5 @@ export type BranchUserStats = {
|
|||
nameEN: string;
|
||||
name: string;
|
||||
count: 0;
|
||||
isHeadOffice: boolean;
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue