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

2022-04-07 03:03:38 +09:00
parent 20bd638af7
commit 4b8a8d722a
4 changed files with 125 additions and 24 deletions
@@ -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>