Noch mehr much

src/components/EssentialLink.vue

@@ -1,51 +0,0 @@
-<template>
-	<q-item
-		clickable
-		tag="a"
-		target="_blank"
-		:href="link"
-	>
-		<q-item-section
-			v-if="icon"
-			avatar
-		>
-			<q-icon :name="icon" />
-		</q-item-section>
-
-		<q-item-section>
-			<q-item-label>{{ title }}</q-item-label>
-			<q-item-label caption>
-				{{ caption }}
-			</q-item-label>
-		</q-item-section>
-	</q-item>
-</template>
-
-<script>
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-	name: 'EssentialLink',
-	props: {
-		title: {
-			type: String,
-			required: true,
-		},
-
-		caption: {
-			type: String,
-			default: '',
-		},
-
-		link: {
-			type: String,
-			default: '#',
-		},
-
-		icon: {
-			type: String,
-			default: '',
-		},
-	},
-});
-</script>

src/pages/RechnerSeite.vue

@@ -12,8 +12,10 @@
 					<q-card-section>
 						<q-input
 							v-model="personenNamensEingabeFeld"
-							outlined
 							label="Name"
+							maxlength="32"
+							counter
+							outlined
 						/>
 					</q-card-section>
 
@@ -83,23 +85,27 @@
 						<q-select
 							v-model="personenAuswähler"
 							class="q-my-md"
+							label="Person"
 							outlined
 							:options="personenAuswahlMöglichkeiten"
-							label="Person"
 						/>
 
 						<q-input
 							v-model.number="grundEingabeFeld"
 							class="q-my-md"
-							outlined
 							label="Grund / Ausgabe"
+							maxlength="32"
+							counter
+							outlined
 						/>
 
 						<q-input
 							v-model.number="geldEingabeFeld"
 							class="q-my-md"
-							outlined
 							label="Geld"
+							maxlength="8"
+							counter
+							outlined
 						/>
 					</q-card-section>
 
@@ -143,21 +149,12 @@
 					>
 						<!-- ZÜRLEDIGEN: Gespräch / Platzen-Hoch mit den einzelnen Blechwerten  -->
 						<template #body-cell-geblecht="props">
-							<q-td :props="props">
+							<q-td
+								:props="props"
+								class="cursor-pointer"
+								@click="blechGesprächÖffnen(props.key)"
+							>
 								{{ props.value }}
-								<q-tooltip
-									anchor="top middle"
-									class="bg-indigo"
-								>
-									<span
-										v-for="blech in blechGründe(props.key)"
-										:key="blech.grund"
-										class="text-subtitle2"
-									>
-										{{ blech.grund }}: {{ gleitzahlenAnalysierer(blech.geld) }} €
-										<br>
-									</span>
-								</q-tooltip>
 							</q-td>
 						</template>
 					</q-table>
@@ -165,6 +162,34 @@
 			</div>
 		</div>
 	</q-page>
+
+	<q-dialog
+		v-model="blechGespräch"
+		full-width
+	>
+		<q-card>
+			<q-card-section class="row items-center q-pb-none">
+				<q-space />
+				<q-btn
+					v-close-popup
+					icon="close"
+					flat
+					round
+					dense
+				/>
+			</q-card-section>
+		
+			<q-table
+				style="height: 350px"
+				:rows="blechGesprächZeilen"
+				:columns="blechGesprächSpalten"
+				separator="cell"
+				row-key="grund"
+				:rows-per-page-options="[0]"
+				virtual-scroll
+			/>
+		</q-card>
+	</q-dialog>
 </template>
 
 <script setup>
@@ -178,6 +203,22 @@ const personenAuswähler = ref(null);
 const geldEingabeFeld = ref(0.0);
 const grundEingabeFeld = ref('');
 
+const blechGespräch = ref(false);
+const blechGesprächPerson = ref(null);
+
+function blechGesprächÖffnen (nameDerPerson) {
+	blechGespräch.value = true;
+	blechGesprächPerson.value = nameDerPerson;
+}
+
+const blechGesprächZeilen = computed(() => {
+	if (!blechGesprächPerson.value) return [];
+
+	const person = personen.value[blechGesprächPerson.value];
+
+	return person.geblecht;
+});
+
 onMounted(() => {
 	try {
 		if (localStorage.personen)
@@ -241,6 +282,24 @@ function blechSumme (gesamtBlech) {
 	return gesamtBlechGeld;
 }
 
+const blechGesprächSpalten = [
+	{
+		name: 'grund',
+		required: true,
+		label: 'Grund / Ausgabe',
+		align: 'left',
+		field: 'grund',
+		sortable: true,
+	},
+	{
+		name: 'geld',
+		label: 'Geld / Kosten',
+		field: 'geld',
+		sortable: true,
+		format: (reihenWert) => reihenWert ? `${gleitzahlenAnalysierer(reihenWert) || '0.00'} €` : '',
+	},
+];
+
 const tabellenSpalten = computed(() => {
 	const cols = [
 		{