feat: ag-grid에서 iActionInfo를 툴팁으로 띄움

This commit is contained in:
2022-04-07 03:03:38 +09:00
parent 20bd638af7
commit 4b8a8d722a
4 changed files with 125 additions and 24 deletions
-11
View File
@@ -113,8 +113,6 @@ class GeneralList extends \sammo\BaseAPI
$customViewColumns = [
'officerLevel' => 0,
'officerLevelText' => 0,
'specialDomesticTest' => 0,
'specialWarText' => 0,
'lbonus' => 0,
'ownerName' => 0,
'honorText' => 0,
@@ -131,15 +129,6 @@ class GeneralList extends \sammo\BaseAPI
$level = $this->getOfficerLevel($rawGeneral);
return getOfficerLevelText($level, $nationArr['level']);
},
'specialDomesticTest' => function ($rawGeneral) {
return getGeneralSpecialDomesticName($rawGeneral['special']);
},
'specialWarText' => function ($rawGeneral) {
return getGeneralSpecialWarName($rawGeneral['special2']);
},
'personal' => function ($rawGeneral) {
return getGenChar($rawGeneral['personal']);
},
'lbonus' => function ($rawGeneral) use ($nationArr) {
return calcLeadershipBonus($rawGeneral['officer_level'], $nationArr['level']);
},
+34 -13
View File
@@ -34,12 +34,12 @@ import type {
GridReadyEvent,
} from "ag-grid-community";
import { getNpcColor } from "@/common_legacy";
import type {
BaseWithValueColDefParams,
ValueGetterParams,
} from "ag-grid-community/dist/lib/entities/colDef";
import type { BaseWithValueColDefParams, ValueGetterParams } from "ag-grid-community/dist/lib/entities/colDef";
import type { GameConstStore } from "@/GameConstStore";
import { unwrap } from "@/util/unwrap";
import SimpleTooltipCell from "@/gridCellRenderer/SimpleTooltipCell.vue";
import GridTooltipCell from "@/gridCellRenderer/GridTooltipCell.vue";
import type { GameIActionInfo } from "@/defs/GameObj";
const props = defineProps({
list: {
@@ -54,7 +54,7 @@ const props = defineProps({
},
});
const gameConstStore = unwrap(inject<Ref<GameConstStore>>('gameConstStore'));
const gameConstStore = unwrap(inject<Ref<GameConstStore>>("gameConstStore"));
const iActionInfo = gameConstStore.value.iActionInfo;
console.log(iActionInfo);
//debug
@@ -144,6 +144,12 @@ interface GenCellClassParams extends CellClassParams {
data: GeneralListItem;
}
type GridCellInfo = {
iActionMap?: Record<string, GameIActionInfo>;
info?: string;
target: keyof GeneralListItem;
};
function naiveCheClassNameFilter(value: string): string {
const text = value.split("_").pop() ?? "None";
if (text === "None") {
@@ -310,11 +316,17 @@ const columnRawDefs = ref<Partial<Record<headerType, GenColDef | GenColGroupDef>
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>`;
cellRenderer: GridTooltipCell,
cellRendererParams: {
cells: ((): GridCellInfo[][] => {
return [
[{ target: "personal", iActionMap: gameConstStore.value.iActionInfo.personality }],
[
{ target: "specialDomestic", iActionMap: gameConstStore.value.iActionInfo.specialDomestic },
{ target: "specialWar", iActionMap: gameConstStore.value.iActionInfo.specialWar },
],
];
})(),
},
width: 90,
columnGroupShow: "closed",
@@ -322,7 +334,10 @@ const columnRawDefs = ref<Partial<Record<headerType, GenColDef | GenColGroupDef>
{
headerName: "성격",
field: "personal",
valueFormatter: naiveCheClassNameFilterFromRow("personal"),
cellRenderer: SimpleTooltipCell,
cellRendererParams: {
iActionMap: gameConstStore.value.iActionInfo.personality,
},
width: 70,
sortable: true,
filter: true,
@@ -331,7 +346,10 @@ const columnRawDefs = ref<Partial<Record<headerType, GenColDef | GenColGroupDef>
{
headerName: "내특",
field: "specialDomestic",
valueFormatter: naiveCheClassNameFilterFromRow("specialDomestic"),
cellRenderer: SimpleTooltipCell,
cellRendererParams: {
iActionMap: gameConstStore.value.iActionInfo.specialDomestic,
},
width: 70,
sortable: true,
filter: true,
@@ -340,7 +358,10 @@ const columnRawDefs = ref<Partial<Record<headerType, GenColDef | GenColGroupDef>
{
headerName: "전특",
field: "specialWar",
valueFormatter: naiveCheClassNameFilterFromRow("specialWar"),
cellRenderer: SimpleTooltipCell,
cellRendererParams: {
iActionMap: gameConstStore.value.iActionInfo.specialWar,
},
width: 70,
sortable: true,
filter: true,
@@ -0,0 +1,49 @@
<template>
<div>
<div v-for="(rowValue, rowIdx) in props.params.cells" :key="rowIdx" class="row gx-1 m-0 cell-sp">
<template v-for="colValue of rowValue" :key="colValue.target">
<div
v-if="colValue.iActionMap"
v-b-tooltip.hover
class="col"
:title="colValue.iActionMap[params.data[colValue.target ] as string ].info??''"
>
{{ colValue.iActionMap[params.data[colValue.target] as string ].name }}
</div>
<div v-else v-b-tooltip.hover class="col" :title="colValue.info ?? ''">
{{params.data[colValue.target] as string}}
</div>
</template>
</div>
</div>
</template>
<script lang="ts" setup>
import type { GeneralListItem } from "@/defs/API/Nation";
import type { GameIActionInfo } from "@/defs/GameObj";
import type { CellClassParams } from "ag-grid-community";
import type { PropType } from "vue";
interface GenCellClassParams extends CellClassParams {
data: GeneralListItem;
}
type GridCellInfo = {
iActionMap?: Record<string, GameIActionInfo>;
info?: string;
target: keyof GeneralListItem;
};
const props = defineProps({
params: {
type: Object as PropType<
GenCellClassParams & {
cells: GridCellInfo[][];
}
>,
required: true,
},
});
console.log(props.params.cells);
</script>
@@ -0,0 +1,42 @@
<template>
<span v-if="params.iActionMap" v-b-tooltip.hover :title="params.iActionMap[props.params.value].info??''">{{ params.iActionMap[props.params.value].name }}</span>
<span v-else-if="params.info" v-b-tooltip.hover :title="params.info">{{ displayValue }}</span>
<span v-else>{{ displayValue }}</span>
</template>
<script lang="ts" setup>
import type { GameIActionInfo } from "@/defs/GameObj";
import type { ValueFormatterParams } from "ag-grid-community";
import { isNumber, isString } from "lodash";
import { ref, watch, type PropType } from "vue";
const props = defineProps({
params: {
type: Object as PropType<
ValueFormatterParams & {
info?: string;
iActionMap?: Record<string, GameIActionInfo>
}
>,
required: true,
},
});
function convertValue(value: unknown): string {
if (isString(value)) {
return value;
}
if (isNumber(value)) {
return value.toLocaleString();
}
return `${value}`;
}
const displayValue = ref<string>(convertValue(props.params.value));
watch(
() => props.params,
(newParams) => {
displayValue.value = convertValue(newParams.value);
}
);
</script>