486 lines
12 KiB
Vue
486 lines
12 KiB
Vue
<template>
|
|
<div
|
|
class="component-general-list"
|
|
:style="{
|
|
height: props.height === 'fill' ? '100%' : props.height === 'static' ? undefined : `${props.height}px`,
|
|
}"
|
|
>
|
|
<AgGridVue
|
|
style="width: 100%; height: 100%"
|
|
class="ag-theme-balham-dark"
|
|
:getRowId="getRowId"
|
|
:rowHeight="rowHeight"
|
|
:columnDefs="columnDefs"
|
|
:rowData="list"
|
|
:defaultColDef="defaultColDef"
|
|
@grid-ready="onGridReady"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<script lang="ts"></script>
|
|
<script lang="ts" setup>
|
|
import type { GeneralListItem, GeneralListItemP2 } from "@/defs/API/Nation";
|
|
import { getIconPath } from "@/util/getIconPath";
|
|
import { inject, ref, watch, type PropType, type Ref, type StyleValue } from "vue";
|
|
import { AgGridVue } from "ag-grid-vue3";
|
|
import type {
|
|
CellClassParams,
|
|
CellStyle,
|
|
ColDef,
|
|
ColGroupDef,
|
|
ColumnApi,
|
|
GetRowIdParams,
|
|
GridApi,
|
|
GridReadyEvent,
|
|
} from "ag-grid-community";
|
|
import { getNpcColor } from "@/common_legacy";
|
|
import type {
|
|
BaseWithValueColDefParams,
|
|
ValueGetterParams,
|
|
} from "ag-grid-community/dist/lib/entities/colDef";
|
|
import type { GameConstStore } from "@/GameConstStore";
|
|
import { unwrap } from "@/util/unwrap";
|
|
|
|
const props = defineProps({
|
|
list: {
|
|
type: Array as PropType<GeneralListItem[]>,
|
|
required: true,
|
|
},
|
|
|
|
height: {
|
|
type: String as PropType<"static" | "fill" | number | `${number}px` | `${number}%`>,
|
|
required: false,
|
|
default: "static",
|
|
},
|
|
});
|
|
|
|
const gameConstStore = unwrap(inject<Ref<GameConstStore>>('gameConstStore'));
|
|
const iActionInfo = gameConstStore.value.iActionInfo;
|
|
console.log(iActionInfo);
|
|
//debug
|
|
console.log(`list`, props.list);
|
|
|
|
watch(
|
|
() => props.list,
|
|
() => {
|
|
setTimeout(() => {
|
|
//debug
|
|
console.log(`list`, props.list);
|
|
gridApi.value?.redrawRows();
|
|
}, 0);
|
|
}
|
|
);
|
|
|
|
watch(
|
|
() => props.height,
|
|
(val) => {
|
|
if (val === "static") {
|
|
gridApi.value?.setDomLayout("autoHeight");
|
|
} else {
|
|
gridApi.value?.setDomLayout("normal");
|
|
}
|
|
}
|
|
);
|
|
|
|
const gridApi = ref<GridApi>();
|
|
const columnApi = ref<ColumnApi>();
|
|
|
|
const rowHeight = ref(28);
|
|
|
|
function getRowId(params: GetRowIdParams): string {
|
|
const genID = (params.data as GeneralListItem).no;
|
|
return `${genID}`;
|
|
}
|
|
|
|
function onGridReady(params: GridReadyEvent) {
|
|
gridApi.value = params.api;
|
|
columnApi.value = params.columnApi;
|
|
if (props.height === "static") {
|
|
params.api.setDomLayout("autoHeight");
|
|
} else {
|
|
params.api.setDomLayout("normal");
|
|
}
|
|
setRowHeight();
|
|
}
|
|
|
|
function setRowHeight() {
|
|
if (!(columnRawDefs.value.icon as GenColDef | undefined)?.hide) {
|
|
rowHeight.value = 64 + 4;
|
|
return;
|
|
}
|
|
rowHeight.value = gridApi.value?.getSizesForCurrentTheme().rowHeight ?? 28;
|
|
}
|
|
|
|
type headerType =
|
|
| keyof Omit<GeneralListItemP2, "no" | "imgsvr" | "picture" | "lbonus">
|
|
| "stat"
|
|
| "icon"
|
|
| "goldRice"
|
|
| "expDedLv"
|
|
| "specials"
|
|
| "killturnAndConnect"
|
|
| "years";
|
|
|
|
interface GenValueParams extends BaseWithValueColDefParams {
|
|
data: GeneralListItem;
|
|
}
|
|
|
|
interface GenValueGetterParams extends ValueGetterParams {
|
|
data: GeneralListItem;
|
|
}
|
|
|
|
interface GenColDef extends ColDef {
|
|
field?: headerType;
|
|
valueFormatter?: string | ((params: GenValueParams) => string);
|
|
filterValueGetter?: string | ((params: GenValueGetterParams) => string);
|
|
}
|
|
|
|
interface GenColGroupDef extends ColGroupDef {
|
|
children: (GenColDef | GenColGroupDef)[];
|
|
groupId: headerType;
|
|
}
|
|
|
|
interface GenCellClassParams extends CellClassParams {
|
|
data: GeneralListItem;
|
|
}
|
|
|
|
function naiveCheClassNameFilter(value: string): string {
|
|
const text = value.split("_").pop() ?? "None";
|
|
if (text === "None") {
|
|
return "-";
|
|
}
|
|
return text;
|
|
}
|
|
|
|
function naiveCheClassNameFilterFromRow(key: keyof GeneralListItem) {
|
|
return (value: GenValueParams): string => {
|
|
return naiveCheClassNameFilter(value.data[key]?.toString() ?? "None");
|
|
};
|
|
}
|
|
|
|
function numberFormatter(value: GenValueParams): string {
|
|
return (value.value as number).toLocaleString();
|
|
}
|
|
|
|
const defaultCellClass = ["cell-middle"];
|
|
const centerCellClass = [...defaultCellClass, "cell-center"];
|
|
const rightAlignClass = [...defaultCellClass, "cell-right"];
|
|
const sortableNumber: GenColDef = {
|
|
sortable: true,
|
|
comparator: (a, b) => a - b,
|
|
sortingOrder: ["desc", "asc", null],
|
|
filter: "number",
|
|
cellClass: rightAlignClass,
|
|
};
|
|
const defaultColDef = ref<ColDef>({
|
|
resizable: true,
|
|
headerClass: "default-cell-header",
|
|
cellClass: centerCellClass,
|
|
floatingFilter: true,
|
|
width: 90,
|
|
});
|
|
|
|
const columnRawDefs = ref<Partial<Record<headerType, GenColDef | GenColGroupDef>>>({
|
|
icon: {
|
|
headerName: "아이콘",
|
|
width: 64 + 24,
|
|
suppressSizeToFit: true,
|
|
resizable: false,
|
|
cellRenderer: (obj: GenValueParams) => {
|
|
const { data: gen } = obj;
|
|
return `<img src="${getIconPath(gen.imgsvr, gen.picture)}" width="64">`;
|
|
},
|
|
pinned: "left",
|
|
lockPosition: true,
|
|
},
|
|
name: {
|
|
headerName: "장수명",
|
|
field: "name",
|
|
pinned: "left",
|
|
sortable: true,
|
|
width: 130,
|
|
sortingOrder: ["asc", "desc", null],
|
|
lockPosition: true,
|
|
cellStyle: (val: GenCellClassParams) => {
|
|
const gen = val.data;
|
|
const style: StyleValue = {
|
|
color: getNpcColor(gen.npc),
|
|
};
|
|
return style as CellStyle;
|
|
},
|
|
cellClass: defaultCellClass,
|
|
filter: true,
|
|
},
|
|
npc: { headerName: "NPC", field: "npc", hide: true },
|
|
stat: {
|
|
groupId: "stat",
|
|
openByDefault: false,
|
|
headerName: "능력치",
|
|
children: [
|
|
{
|
|
headerName: "통|무|지",
|
|
width: 90,
|
|
|
|
cellRenderer: (obj: GenValueParams) => {
|
|
const gen = obj.data;
|
|
return `${gen.leadership}|${gen.strength}|${gen.intel}`;
|
|
},
|
|
columnGroupShow: "closed",
|
|
},
|
|
{
|
|
headerName: "통솔",
|
|
field: "leadership",
|
|
...sortableNumber,
|
|
columnGroupShow: "open",
|
|
width: 70,
|
|
type: "numericColumn",
|
|
},
|
|
{
|
|
headerName: "무력",
|
|
field: "strength",
|
|
...sortableNumber,
|
|
columnGroupShow: "open",
|
|
width: 70,
|
|
},
|
|
{
|
|
headerName: "지력",
|
|
field: "intel",
|
|
...sortableNumber,
|
|
columnGroupShow: "open",
|
|
width: 70,
|
|
},
|
|
],
|
|
},
|
|
officerLevel: {
|
|
headerName: "관직",
|
|
field: "officerLevelText",
|
|
sortable: true,
|
|
comparator: (a, b, c, d) => c.data.officerLevel - d.data.officerLevel,
|
|
cellRenderer: ({ data }: GenValueParams) => {
|
|
if (data.permission == 2 && 2 <= data.officerLevel && 4 <= data.officerLevel) {
|
|
return `${data.officer_city} ${data.officerLevelText}`;
|
|
}
|
|
return data.officerLevelText;
|
|
},
|
|
filter: true,
|
|
cellClass: centerCellClass,
|
|
width: 90,
|
|
},
|
|
expDedLv: {
|
|
headerName: "명성",
|
|
groupId: "expDedLv",
|
|
width: 70,
|
|
children: [
|
|
{
|
|
headerName: "/계급",
|
|
columnGroupShow: "closed",
|
|
width: 70,
|
|
cellRenderer: ({ data }: GenValueParams) => {
|
|
return `Lv ${data.explevel}<br>${data.dedLevelText}`;
|
|
},
|
|
},
|
|
{
|
|
headerName: "명성",
|
|
field: "explevel",
|
|
width: 75,
|
|
cellRenderer: ({ data }: GenValueParams) => {
|
|
return `Lv ${data.explevel}<br>(${data.honorText})`;
|
|
},
|
|
...sortableNumber,
|
|
columnGroupShow: "open",
|
|
},
|
|
{
|
|
headerName: "계급",
|
|
field: "dedLevelText",
|
|
width: 75,
|
|
cellRenderer: ({ data }: GenValueParams) => {
|
|
return `${data.dedLevelText}<br>(${data.bill.toLocaleString()})`;
|
|
},
|
|
...sortableNumber,
|
|
cellClass: centerCellClass,
|
|
columnGroupShow: "open",
|
|
},
|
|
],
|
|
},
|
|
gold: { headerName: "금", field: "gold", ...sortableNumber, valueFormatter: numberFormatter, width: 75 },
|
|
rice: { headerName: "쌀", field: "rice", ...sortableNumber, valueFormatter: numberFormatter, width: 75 },
|
|
|
|
specials: {
|
|
headerName: "성격/내특/전특",
|
|
children: [
|
|
{
|
|
headerName: "요약",
|
|
cellRenderer: ({ data }: GenValueParams) => {
|
|
const personal = naiveCheClassNameFilter(data.personal);
|
|
const specialDomestic = naiveCheClassNameFilter(data.specialDomestic);
|
|
const specialWar = naiveCheClassNameFilter(data.specialWar);
|
|
return `${personal}<br><div class="row gx-1 m-0 cell-sp"><div class="col">${specialDomestic}</div><div class="col">${specialWar}</div>`;
|
|
},
|
|
width: 90,
|
|
columnGroupShow: "closed",
|
|
},
|
|
{
|
|
headerName: "성격",
|
|
field: "personal",
|
|
valueFormatter: naiveCheClassNameFilterFromRow("personal"),
|
|
width: 70,
|
|
sortable: true,
|
|
filter: true,
|
|
columnGroupShow: "open",
|
|
},
|
|
{
|
|
headerName: "내특",
|
|
field: "specialDomestic",
|
|
valueFormatter: naiveCheClassNameFilterFromRow("specialDomestic"),
|
|
width: 70,
|
|
sortable: true,
|
|
filter: true,
|
|
columnGroupShow: "open",
|
|
},
|
|
{
|
|
headerName: "전특",
|
|
field: "specialWar",
|
|
valueFormatter: naiveCheClassNameFilterFromRow("specialWar"),
|
|
width: 70,
|
|
sortable: true,
|
|
filter: true,
|
|
columnGroupShow: "open",
|
|
},
|
|
],
|
|
},
|
|
years: {
|
|
headerName: "연도",
|
|
children: [
|
|
{
|
|
headerName: "요약",
|
|
cellRenderer: ({ data }: GenValueParams) => {
|
|
return `${data.age}세<br>${data.belong}년`;
|
|
},
|
|
cellClass: centerCellClass,
|
|
columnGroupShow: "closed",
|
|
},
|
|
{
|
|
headerName: "연령",
|
|
field: "age",
|
|
...sortableNumber,
|
|
valueFormatter: (v: GenValueParams) => `${v.value}세`,
|
|
width: 70,
|
|
cellClass: centerCellClass,
|
|
columnGroupShow: "open",
|
|
},
|
|
{
|
|
headerName: "사관",
|
|
field: "belong",
|
|
...sortableNumber,
|
|
valueFormatter: (v: GenValueParams) => `${v.value}년`,
|
|
width: 70,
|
|
cellClass: centerCellClass,
|
|
columnGroupShow: "open",
|
|
},
|
|
],
|
|
},
|
|
killturnAndConnect: {
|
|
headerName: "기타",
|
|
children: [
|
|
{
|
|
headerName: "삭/벌",
|
|
cellRenderer: ({ data }: GenValueParams) => {
|
|
return `${data.killturn.toLocaleString()}턴<br>${data.connect.toLocaleString()}점`;
|
|
},
|
|
cellClass: rightAlignClass,
|
|
columnGroupShow: "closed",
|
|
},
|
|
{
|
|
headerName: "삭턴",
|
|
field: "killturn",
|
|
cellRenderer: ({ data }: GenValueParams) => {
|
|
return `${data.killturn.toLocaleString()}턴`;
|
|
},
|
|
...sortableNumber,
|
|
columnGroupShow: "open",
|
|
},
|
|
{
|
|
headerName: "벌점",
|
|
field: "connect",
|
|
cellRenderer: ({ data }: GenValueParams) => {
|
|
return `${data.connect.toLocaleString()}점`;
|
|
},
|
|
...sortableNumber,
|
|
columnGroupShow: "open",
|
|
},
|
|
],
|
|
},
|
|
});
|
|
|
|
const columnDefs = ref([...Object.values(columnRawDefs.value)]);
|
|
|
|
watch(columnRawDefs, (val) => {
|
|
setRowHeight();
|
|
columnDefs.value = [...Object.values(val)];
|
|
});
|
|
|
|
/*
|
|
let currentWidth = -1;
|
|
window.addEventListener("resize", (e) => {
|
|
setTimeout(() => {
|
|
const newWidth = document.querySelector(".container")?.clientWidth ?? -1;
|
|
if (currentWidth != newWidth) {
|
|
currentWidth = newWidth;
|
|
columnApi.value?.autoSizeAllColumns();
|
|
}
|
|
}, 1);
|
|
});
|
|
*/
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.g-tr {
|
|
border-bottom: solid gray 1px;
|
|
}
|
|
|
|
.g-thead-tr {
|
|
position: sticky;
|
|
top: 0px;
|
|
z-index: 5;
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss">
|
|
.component-general-list {
|
|
.ag-root-wrapper .cell-middle {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.ag-root-wrapper {
|
|
font-family: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic";
|
|
font-size: 14px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.ag-root {
|
|
overflow: auto;
|
|
}
|
|
|
|
.ag-header {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
.cell-center {
|
|
justify-content: space-around;
|
|
text-align: center;
|
|
}
|
|
|
|
.cell-right {
|
|
justify-content: flex-end;
|
|
text-align: right;
|
|
}
|
|
|
|
.cell-sp .col {
|
|
min-width: 30px;
|
|
}
|
|
}
|
|
</style>
|