legonzaur/webapp-front
Template
1
0
Fork 0
Code Pull Requests Activity

remove concept

Browse Source
This commit is contained in:
legonzaur
2025-05-06 14:25:09 +02:00
parent 1259e48681
commit ae373b3528
4 changed files with 0 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/concept/grid.vue
-66
View File
@@ -1,66 +0,0 @@
<script setup lang="ts">
import type { ConceptResponseDTO } from '~/netcode/events/dto/conceptresponse.dto';
import { useConceptStore } from '~/store/concepts.store';
const conceptStore = useConceptStore();
const concepyByType = computed(() => {
const byType: Record<string, ConceptResponseDTO[]> = {}
for (const concept of Object.values(conceptStore.concepts)) {
if (!(concept.type.id in byType)) {
byType[concept.type.id] = []
}
byType[concept.type.id].push(concept)
}
return byType
})
</script>
<template>
<div class="conceptGrid">
<div class="conceptType" v-for="concepts, conceptType in concepyByType">
<div class="conceptTypeHeader">{{ conceptStore.conceptTypes[conceptType].value }}</div>
<div class="concept" v-for="[index, concept] in Object.entries(concepts)">
<NuxtImg class="conceptImg" placeholder :alt="concept.value" :src="'/icons/concept/drawing.svg'"
@click="$emit('click', concept.id)">
</NuxtImg>
</div>
</div>
</div>
</template>
<style lang="css">
div.conceptGrid {
max-height: 100%;
display: flex;
justify-content: center;
gap: 50px;
}
div.conceptType {
display: grid;
align-content: start;
grid-template-columns: 1fr 1fr;
flex: 1 1 0px;
}
.concept {
border: 1px solid black;
box-sizing: border-box;
font-size: x-small;
aspect-ratio: 1/1;
}
div.conceptType>div.conceptTypeHeader {
grid-column: 1/3;
}
.conceptImg {
max-height: 100%;
max-width: 100%;
object-fit: contain;
}
</style>
netcode/handlers/concept.handler.ts
-31
View File
@@ -1,31 +0,0 @@
import { useConceptStore } from "~/store/concepts.store";
import type {
ConceptCreateEvent,
ConceptDeleteEvent,
ConceptDisableEvent,
ConceptEditEvent,
ConceptEnableEvent,
} from "../events/concept.events";
export const handlers = {
create: (event: ConceptCreateEvent) => {
const conceptStore = useConceptStore();
conceptStore.concepts[event.concept.id] = event.concept;
},
edit: (event: ConceptEditEvent) => {
const conceptStore = useConceptStore();
conceptStore.concepts[event.concept.id].value = event.concept.value;
},
delete: (event: ConceptDeleteEvent) => {
const conceptStore = useConceptStore();
delete conceptStore.concepts[event.id];
},
// enable: (event: ConceptEnableEvent) => {
// const conceptStore = useConceptStore();
// conceptStore.concepts[event.id].enabled = true;
// },
// disable: (event: ConceptDisableEvent) => {
// const conceptStore = useConceptStore();
// conceptStore.concepts[event.id].enabled = false;
// },
};
pages/concepts.vue
-6
View File
@@ -1,6 +0,0 @@
<script setup lang="ts">
</script>
<template>
<ConceptGrid></ConceptGrid>
</template>
store/concepts.store.ts
-106
View File
@@ -1,106 +0,0 @@
import { defineStore } from "pinia";
import { subscribe } from "~/netcode";
import type {
ConceptResponseDTO,
ConceptTypeResponseDTO,
} from "~/netcode/events/dto/conceptresponse.dto";
import type { ConceptEvent } from "~/netcode/events/events";
import { handlers } from "~/netcode/handlers/concept.handler";
export const useConceptStore = defineStore("concept", {
state: () => ({
concepts: {} as Record<string, ConceptResponseDTO>,
eventSource: null as null | EventSource,
conceptTypes: {} as Record<string, ConceptTypeResponseDTO>,
}),
actions: {
subscribe() {
this.eventSource = subscribe(`/concepts/subscribe`);
this.eventSource.addEventListener("message", (message) => {
const data = JSON.parse(message.data) as ConceptEvent;
const type = data.type;
if (type in handlers) {
handlers[type as keyof typeof handlers](data);
}
});
},
close() {
this.eventSource?.close();
},
async fetchConceptTypes() {
const config = useRuntimeConfig();
const data = await useFetch<ConceptTypeResponseDTO[]>(
config.public.endpoint + `/concepts/types`,
{
credentials: "include",
},
);
if (data.data.value && !data.error.value) {
for (const conceptType of data.data.value) {
this.conceptTypes[conceptType.id] = conceptType;
}
}
return this.conceptTypes;
},
async fetchConceptList() {
const config = useRuntimeConfig();
const data = await useFetch<ConceptResponseDTO[]>(
config.public.endpoint + `/concepts/all`,
{
credentials: "include",
},
);
if (data.data.value && !data.error.value) {
for (const concept of data.data.value) {
this.concepts[concept.id] = concept;
}
}
return data;
},
async enableConcept(concepts: ConceptResponseDTO) {
const config = useRuntimeConfig();
const data = await $fetch<ConceptResponseDTO>(
config.public.endpoint + `/concepts/` + concepts.id + "/enable",
{
credentials: "include",
method: "PUT",
},
);
// word.enabled = true;
// return data;
},
async disableConcept(concepts: ConceptResponseDTO) {
const config = useRuntimeConfig();
const data = await $fetch<ConceptResponseDTO>(
config.public.endpoint + `/concepts/` + concepts.id + "/disable",
{
credentials: "include",
method: "PUT",
},
);
// word.enabled = false;
// return data;
},
async createConcept(value: string) {
const config = useRuntimeConfig();
const data = await $fetch<ConceptResponseDTO>(
config.public.endpoint + `/concepts/`,
{
credentials: "include",
body: { value },
method: "POST",
},
);
},
async deleteConcept(id: number) {
const config = useRuntimeConfig();
const data = await $fetch<ConceptResponseDTO>(
config.public.endpoint + `/concepts/` + id,
{
credentials: "include",
method: "DELETE",
},
);
},
},
});