feat: colorize function
This commit is contained in:
@@ -2,9 +2,7 @@
|
||||
import { Dialog } from "primevue";
|
||||
import { useErrorStore } from "./stores/error.store";
|
||||
import CommentScheme from "./comment/CommentScheme.vue";
|
||||
import PostScheme from "./post/PostScheme.vue";
|
||||
import PosttypeScheme from "./posttype/PosttypeScheme.vue";
|
||||
import AuthorScheme from "./author/AuthorScheme.vue";
|
||||
|
||||
const errorStore = useErrorStore();
|
||||
</script>
|
||||
@@ -19,9 +17,6 @@ const errorStore = useErrorStore();
|
||||
<h1 class="text-red-500 text-2xl">{{ errorStore.message }}</h1>
|
||||
</Dialog>
|
||||
<main class="w-screen h-screen">
|
||||
<CommentScheme></CommentScheme>
|
||||
<PostScheme></PostScheme>
|
||||
<PosttypeScheme></PosttypeScheme>
|
||||
<AuthorScheme></AuthorScheme>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
@@ -7,7 +7,6 @@ import type { Scheme } from "../types/scheme.type";
|
||||
import { PostType } from "../../bindings/app/internal/services";
|
||||
import { ref } from "vue";
|
||||
import type { Validate } from "../types/validate.type";
|
||||
import { ImportFromExcel } from "../../bindings/app/internal/services/posttypeservice.ts";
|
||||
|
||||
const service = new Service();
|
||||
|
||||
@@ -20,7 +19,6 @@ const load = async () => {
|
||||
|
||||
onMounted(async () => {
|
||||
await load();
|
||||
await ImportFromExcel();
|
||||
});
|
||||
|
||||
const scheme: Scheme<PostType> = reactive({
|
||||
@@ -48,10 +46,17 @@ const validate: Validate<PostType> = (entity) => {
|
||||
status: "success",
|
||||
};
|
||||
};
|
||||
|
||||
const colorize = (data: PostType): string => {
|
||||
if (data.Name === "test") {
|
||||
return "red";
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="w-screen h-screen">
|
||||
<Table :scheme :service :get-defaults :load :items :validate></Table>
|
||||
<Table :scheme :service :get-defaults :load :items :validate :colorize></Table>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
@@ -64,6 +64,18 @@ const slots = defineSlots();
|
||||
|
||||
const createSlotName = (key: any) => key + "Create";
|
||||
const updateSlotName = (key: any) => key + "Update";
|
||||
|
||||
watch(() => props.items, () => {
|
||||
if (props.colorize) {
|
||||
const trs = document.querySelectorAll("tr");
|
||||
props.items.forEach(item => {
|
||||
const tr = trs[item.Id];
|
||||
if (tr) {
|
||||
tr.style.backgroundColor = props.colorize(item);
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -117,7 +129,7 @@ const updateSlotName = (key: any) => key + "Update";
|
||||
v-if="!props.scheme[key].hidden"
|
||||
>
|
||||
<template #body="{ data }">
|
||||
<p>
|
||||
<p class="">
|
||||
{{
|
||||
viewDate(manyStructsView(
|
||||
data[key],
|
||||
|
||||
@@ -11,4 +11,5 @@ export interface TableProps<T extends IEntity> {
|
||||
validate: Validate<T>
|
||||
load(): Promise<T[]>
|
||||
items: T[]
|
||||
colorize?: (data: T) => string
|
||||
}
|
||||
Reference in New Issue
Block a user