fix:#69 format, lint, tiny info buttons

This commit is contained in:
masterElmar
2023-11-20 18:38:01 +01:00
parent bdf95059dd
commit 104861eb73
9 changed files with 246 additions and 114 deletions

View File

@@ -1,13 +1,13 @@
<script lang="ts" setup>
import {defineAsyncComponent, ref, Ref} from "vue";
import {Module} from "../model/module.ts";
import {fetchAllModules} from "../api/fetchCourse.ts";
import { defineAsyncComponent, ref, Ref } from "vue";
import { Module } from "../model/module.ts";
import { fetchAllModules } from "../api/fetchCourse.ts";
import moduleStore from "../store/moduleStore.ts";
import {MultiSelectAllChangeEvent} from "primevue/multiselect";
import { MultiSelectAllChangeEvent } from "primevue/multiselect";
import router from "../router";
import {fetchModule} from "../api/fetchModule.ts";
import {useDialog} from "primevue/usedialog";
import {useI18n} from "vue-i18n";
import { fetchModule } from "../api/fetchModule.ts";
import { useDialog } from "primevue/usedialog";
import { useI18n } from "vue-i18n";
const dialog = useDialog();
const { t } = useI18n({ useScope: "global" });
@@ -76,11 +76,19 @@ function selectChange() {
}
function itemsLabel(selectedModules: Module[]): string {
return (selectedModules ? selectedModules.length : 0) != 1 ? t("additionalModules.modules") : t("additionalModules.module");
return (selectedModules ? selectedModules.length : 0) != 1
? t("additionalModules.modules")
: t("additionalModules.module");
}
function itemsLabelWithNumber(selectedModules: Module[]): string {
return selectedModules.length.toString() + " " + itemsLabel(selectedModules) + " " + t("additionalModules.dropDownFooterSelected");
return (
selectedModules.length.toString() +
" " +
itemsLabel(selectedModules) +
" " +
t("additionalModules.dropDownFooterSelected")
);
}
</script>
@@ -104,9 +112,9 @@ function itemsLabelWithNumber(selectedModules: Module[]): string {
:placeholder="$t('additionalModules.dropDown')"
:auto-filter-focus="true"
:show-toggle-all="false"
:selected-items-label="itemsLabelWithNumber(selectedModules)"
@change="selectChange()"
@selectall-change="onSelectAllChange($event)"
:selectedItemsLabel="itemsLabelWithNumber(selectedModules)"
>
<template #option="slotProps">
<div class="flex justify-content-between w-full">
@@ -117,6 +125,7 @@ function itemsLabelWithNumber(selectedModules: Module[]): string {
</div>
<div class="flex align-items-center justify-content-center ml-2">
<Button
class="small-button"
icon="pi pi-info"
severity="secondary"
rounded
@@ -140,7 +149,9 @@ function itemsLabelWithNumber(selectedModules: Module[]): string {
</MultiSelect>
</div>
<div class="flex align-items-center justify-content-center h-4rem m-2">
<Button @click="nextStep()">{{ $t("additionalModules.nextStep") }}</Button>
<Button @click="nextStep()">{{
$t("additionalModules.nextStep")
}}</Button>
</div>
</div>
</template>
@@ -153,4 +164,10 @@ function itemsLabelWithNumber(selectedModules: Module[]): string {
:deep(.custom-multiselect li) {
height: unset;
}
.small-button.p-button {
width: 2rem;
height: 2rem;
padding: 0;
}
</style>