refactor(backend): RemoteResource-systeem dat vervangen werd door TanStack verwijderd.
This commit is contained in:
Gerald Schmittinger
parent
be78e7f44d
commit
a33ec6c452
9 changed files with 0 additions and 193 deletions
|
|
@ -1,41 +0,0 @@
|
|||
<script setup lang="ts" generic="T">
|
||||
import {RemoteResource} from "@/services/api-client/remote-resource.ts";
|
||||
import {computed} from "vue";
|
||||
import {useI18n} from "vue-i18n";
|
||||
|
||||
const props = defineProps<{
|
||||
resource: RemoteResource<T>
|
||||
}>()
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const isLoading = computed(() => props.resource.state.type === 'loading');
|
||||
const isError = computed(() => props.resource.state.type === 'error');
|
||||
const data = computed(() => props.resource.state.type === 'success' ? props.resource.state.data : null);
|
||||
|
||||
const error = computed(() => props.resource.state.type === "error" ? props.resource.state : null);
|
||||
const errorMessage = computed(() =>
|
||||
error.value?.error.message ? error.value.error.message : JSON.stringify(error.value?.error)
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="loading-div" v-if="isLoading">
|
||||
<v-progress-circular indeterminate></v-progress-circular>
|
||||
</div>
|
||||
<div v-if="isError">
|
||||
<v-empty-state
|
||||
icon="mdi-alert-circle-outline"
|
||||
:text="errorMessage"
|
||||
:title="t('error_title')"
|
||||
></v-empty-state>
|
||||
</div>
|
||||
<slot v-if="data" :data="data!"></slot>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.loading-div {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import {type Params, RestEndpoint} from "@/services/api-client/endpoints/rest-endpoint.ts";
|
||||
|
||||
export class DeleteEndpoint<PP extends Params, QP extends Params, R> extends RestEndpoint<PP, QP, undefined, R> {
|
||||
readonly method = "GET";
|
||||
|
||||
public delete(pathParams: PP, queryParams: QP): Promise<R> {
|
||||
return super.request(pathParams, queryParams, undefined);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import {type Params, RestEndpoint} from "@/services/api-client/endpoints/rest-endpoint.ts";
|
||||
|
||||
export class GetEndpoint<PP extends Params, QP extends Params, R> extends RestEndpoint<PP, QP, undefined, R> {
|
||||
readonly method = "GET";
|
||||
|
||||
public get(pathParams: PP, queryParams: QP): Promise<R> {
|
||||
return super.request(pathParams, queryParams, undefined);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import {type Params, RestEndpoint} from "@/services/api-client/endpoints/rest-endpoint.ts";
|
||||
|
||||
export class GetHtmlEndpoint<PP extends Params, QP extends Params> extends RestEndpoint<PP, QP, undefined, Document> {
|
||||
readonly method: "GET" | "POST" | "PUT" | "DELETE" = "GET";
|
||||
|
||||
public get(pathParams: PP, queryParams: QP): Promise<Document> {
|
||||
return super.request(pathParams, queryParams, undefined, "document");
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import {type Params, RestEndpoint} from "@/services/api-client/endpoints/rest-endpoint.ts";
|
||||
|
||||
export class PostEndpoint<PP extends Params, QP extends Params, B, R> extends RestEndpoint<PP, QP, B, R> {
|
||||
readonly method = "POST";
|
||||
|
||||
public post(pathParams: PP, queryParams: QP, body: B): Promise<R> {
|
||||
return super.request(pathParams, queryParams, body);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
import apiClient from "@/services/api-client/api-client.ts";
|
||||
import {HttpErrorStatusException} from "@/services/api-client/api-exceptions.ts";
|
||||
import type {ResponseType} from "axios";
|
||||
|
||||
export abstract class RestEndpoint<PP extends Params, QP extends Params, B, R> {
|
||||
public abstract readonly method: "GET" | "POST" | "PUT" | "DELETE";
|
||||
constructor(public readonly url: string) {
|
||||
}
|
||||
|
||||
protected async request(pathParams: PP, queryParams: QP, body: B, responseType?: ResponseType): Promise<R> {
|
||||
let urlFilledIn = this.url.replace(/:(\w+)(\/|$)/g, (_, key, after) =>
|
||||
(pathParams[key] ? encodeURIComponent(pathParams[key]) : `:${key}`) + after
|
||||
);
|
||||
const response = await apiClient.request<R>({
|
||||
url: urlFilledIn,
|
||||
method: this.method,
|
||||
params: queryParams,
|
||||
data: body,
|
||||
responseType: responseType || 'json'
|
||||
});
|
||||
if (response.status / 100 !== 2) {
|
||||
throw new HttpErrorStatusException(response);
|
||||
}
|
||||
return response.data;
|
||||
}
|
||||
}
|
||||
|
||||
export type Params = {[key: string]: string | number | boolean | undefined};
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
import {type ShallowReactive, shallowReactive} from "vue";
|
||||
|
||||
export type NotLoadedState = {
|
||||
type: "notLoaded"
|
||||
};
|
||||
export type LoadingState = {
|
||||
type: "loading"
|
||||
};
|
||||
export type ErrorState = {
|
||||
type: "error",
|
||||
error: any
|
||||
};
|
||||
export type SuccessState<T> = {
|
||||
type: "success",
|
||||
data: T
|
||||
};
|
||||
export type RemoteResourceState<T> = NotLoadedState | LoadingState | ErrorState | SuccessState<T>;
|
||||
|
||||
export type RemoteResource<T> = ShallowReactive<{
|
||||
state: RemoteResourceState<T>
|
||||
}>;
|
||||
|
||||
export function remoteResource<T>(): RemoteResource<T> {
|
||||
return shallowReactive({
|
||||
state: {
|
||||
type: "notLoaded"
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function loadResource<T>(resource: RemoteResource<T>, promise: Promise<T>): void {
|
||||
resource.state = { type: "loading" }
|
||||
promise.then(
|
||||
data => resource.state = { type: "success", data },
|
||||
error => resource.state = { type: "error", error }
|
||||
);
|
||||
}
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
import {GetEndpoint} from "@/services/api-client/endpoints/get-endpoint.ts";
|
||||
import type {LearningObject} from "@/data-objects/learning-object.ts";
|
||||
import type {Language} from "@/data-objects/language.ts";
|
||||
import {GetHtmlEndpoint} from "@/services/api-client/endpoints/get-html-endpoint.ts";
|
||||
|
||||
const getLearningObjectMetadataEndpoint = new GetEndpoint<{hruid: string}, {language: Language, version: number}, LearningObject>(
|
||||
"/learningObject/:hruid"
|
||||
);
|
||||
|
||||
const getLearningObjectHtmlEndpoint = new GetHtmlEndpoint<{hruid: string}, {language: Language, version: number}>(
|
||||
"/learningObject/:hruid/html"
|
||||
);
|
||||
|
||||
export function getLearningObjectMetadata(
|
||||
hruid: string,
|
||||
language: Language,
|
||||
version: number
|
||||
): Promise<LearningObject> {
|
||||
return getLearningObjectMetadataEndpoint.get({hruid}, {language, version});
|
||||
}
|
||||
|
||||
export function getLearningObjectHTML(
|
||||
hruid: string,
|
||||
language: Language,
|
||||
version: number
|
||||
): Promise<Document> {
|
||||
return getLearningObjectHtmlEndpoint.get({hruid}, {language, version});
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
import {GetEndpoint} from "@/services/api-client/endpoints/get-endpoint.ts";
|
||||
import {LearningPath, type LearningPathDTO} from "@/data-objects/learning-path.ts";
|
||||
import type {Language} from "@/data-objects/language.ts";
|
||||
import {single} from "@/utils/response-assertions.ts";
|
||||
|
||||
const learningPathEndpoint = new GetEndpoint<
|
||||
{},
|
||||
{search?: string, hruid?: string, language?: Language, forGroup?: string, forStudent?: string},
|
||||
LearningPathDTO[]
|
||||
>("/learningPath");
|
||||
|
||||
export async function searchLearningPaths(query: string): Promise<LearningPath[]> {
|
||||
let dtos = await learningPathEndpoint.get({}, {search: query})
|
||||
return dtos.map(dto => LearningPath.fromDTO(dto));
|
||||
}
|
||||
|
||||
export async function getLearningPath(hruid: string, language: Language, options?: {forGroup?: string, forStudent?: string}): Promise<LearningPath> {
|
||||
let dtos = await learningPathEndpoint.get(
|
||||
{},
|
||||
{hruid, language, forGroup: options?.forGroup, forStudent: options?.forStudent}
|
||||
);
|
||||
return LearningPath.fromDTO(single(dtos));
|
||||
}
|
||||
Reference in a new issue