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