Refaktoryzacja zarządzania stanem w raporcie administracji

- Zastąpienie `props` na `storeToRefs(useReportStore())` w komponentach administracji.
- Refaktoryzacja interfejsu `AccordionItem` do `AccordionItems` i dostosowanie typów.
- Usunięcie zbędnych właściwości `turn` i `state` z `AdministrationBurgCard.vue`.
- Przebudowa sposobu obliczania pojemności rządu w `administrationDetails.vue`.
- Poprawienie inicjalizacji `state` i `turn` w `reportStore.ts`.

Zmiany poprawiają zarządzanie stanem i czytelność kodu.

src/components/report/administration/administrationAccordion.vue

@@ -1,17 +1,18 @@
 <script lang="ts" setup>
-import type { StatesResponse, TurnsResponse } from '@/types/pb-types';
+import type { BurgsResponse, ProvincesResponse } from '@/types/pb-types';
 
-interface AccordionItem {
+interface AccordionItems {
 	title: string;
-	content: any[];
+	content:
+		| ProvincesResponse<unknown>[]
+		| BurgsResponse<unknown>[]
+		| { name: string; amount: number }[];
 	len: number;
 	type: 'provinces' | 'burgs' | 'chart';
 }
 
 const props = defineProps<{
-	turn: TurnsResponse<unknown>;
+	accordionItems: AccordionItems[];
-	state: StatesResponse<unknown, unknown, unknown, unknown, unknown>;
-	accordionItems: AccordionItem[];
 }>();
 
 const provinces = props.accordionItems.find(item => item.type === 'provinces')?.content ?? [];
@@ -47,13 +48,7 @@ const burgs = props.accordionItems.find(item => item.type === 'burgs')?.content
 			<AccordionContent v-else-if="item.type === 'burgs'">
 				<ScrollArea class="h-[500px]">
 					<div class="flex flex-wrap justify-center gap-6">
-						<AdministrationBurgCard
+						<AdministrationBurgCard v-for="burg in burgs" :key="burg.id" :burg="burg" />
-							v-for="burg in burgs"
-							:key="burg.id"
-							:burg="burg"
-							:turn="props.turn"
-							:state="props.state"
-						/>
 					</div>
 				</ScrollArea>
 			</AccordionContent>

src/components/report/administration/administrationBurgCard.vue

@@ -1,14 +1,14 @@
 <script lang="ts" setup>
-import type { BurgsResponse, StatesResponse, TurnsResponse } from '@/types/pb-types';
+import type { BurgsResponse } from '@/types/pb-types';
 import { Icon } from '@iconify/vue';
 
 const props = defineProps<{
 	burg: BurgsResponse<unknown>;
-	turn: TurnsResponse<unknown>;
-	state: StatesResponse<unknown, unknown, unknown, unknown, unknown>;
 }>();
 
-const { cultureNames, religionNames } = await useFetchAdministrationReport(props.turn, props.state);
+const { state, turn } = storeToRefs(useReportStore());
+
+const { cultureNames, religionNames } = await useFetchAdministrationReport(turn.value, state.value);
 </script>
 
 <template>

src/components/report/administration/administrationDetails.vue

@@ -1,17 +1,12 @@
 <script lang="ts" setup>
-import type { StatesResponse, TurnsResponse } from '@/types/pb-types';
+const { state, turn } = storeToRefs(useReportStore());
 
-const props = defineProps<{
+const { cultureNames, burgsData } = await useFetchAdministrationReport(turn.value, state.value);
-	turn: TurnsResponse<unknown>;
-	state: StatesResponse<unknown, unknown, unknown, unknown, unknown>;
-}>();
 
-const { cultureNames, burgsData } = await useFetchAdministrationReport(props.turn, props.state);
+const primaryCulture = cultureNames.find(c => c.id === state.value.culture)?.id;
-
-const primaryCulture = cultureNames.find(c => c.id === props.state.culture)?.id;
 
 const nonPrimaryCultureCells: number = (
-	Object.entries(props.state.culturesCells as Record<string, string>) as [string, string][]
+	Object.entries(state.value.culturesCells as Record<string, string>) as [string, string][]
 ).reduce(
 	(sum: number, [key, value]: [string, string]) =>
 		key !== primaryCulture ? sum : sum + parseInt(value),
@@ -21,19 +16,19 @@ const nonPrimaryCultureCells: number = (
 const nonPrimaryCultureBurgs = burgsData.value.filter(b => b.culture !== primaryCulture).length;
 
 const governmentCapacityPoints =
-	props.state.cells + nonPrimaryCultureCells + burgsData.value.length + nonPrimaryCultureBurgs;
+	state.value.cells + nonPrimaryCultureCells + burgsData.value.length + nonPrimaryCultureBurgs;
 
 const technologieGovernmentCapacityLimit = 1 * 50;
 
 const governmentCapacityLimit =
-	(constGovernmentTypes.find(g => g.name === props.state.form)?.governmentCapacityLimit || 0) +
+	(constGovernmentTypes.find(g => g.name === state.value.form)?.governmentCapacityLimit || 0) +
 	technologieGovernmentCapacityLimit;
 
 const governmentCapacity = Math.round((governmentCapacityPoints / governmentCapacityLimit) * 100);
 const progress = ref(Math.min(governmentCapacity, 100));
 
 const governmentCapacityRows = [
-	{ type: 'Kratki', points: 1, value: props.state.cells },
+	{ type: 'Kratki', points: 1, value: state.value.cells },
 	{ type: 'Kratki ob. kultura', points: 1, value: nonPrimaryCultureCells },
 	{ type: 'Miasta', points: 1, value: burgsData.value.length },
 	{ type: 'Miasta ob. kultura', points: 1, value: nonPrimaryCultureBurgs }
@@ -42,7 +37,7 @@ const governmentCapacityRows = [
 const governmentCapacityLimitRows = [
 	{
 		type: 'Forma rządu',
-		value: constGovernmentTypes.find(g => g.name === props.state.form)?.governmentCapacityLimit || 0
+		value: constGovernmentTypes.find(g => g.name === state.value.form)?.governmentCapacityLimit || 0
 	},
 	{ type: 'Technologia', value: technologieGovernmentCapacityLimit }
 ];

src/components/report/administrationReport.vue

@@ -2,6 +2,16 @@
 // TODO: Administracja (GovCap, Prowincje, Miasta)
 import type { BurgsResponse, ProvincesResponse } from '@/types/pb-types';
 
+interface AccordionItems {
+	title: string;
+	content:
+		| ProvincesResponse<unknown>[]
+		| BurgsResponse<unknown>[]
+		| { name: string; amount: number }[];
+	len: number;
+	type: 'provinces' | 'burgs' | 'chart';
+}
+
 const { state, turn } = storeToRefs(useReportStore());
 
 const { provincesData, burgsData } = await useFetchAdministrationReport(turn.value, state.value);
@@ -10,7 +20,7 @@ const biomesChartData = prepareChartData(state.value.biomesCells as object);
 const religionsChartData = prepareChartData(state.value.religionsCells as object);
 const culturesChartData = prepareChartData(state.value.culturesCells as object);
 
-const accordionItems = [
+const accordionItems: AccordionItems[] = [
 	{
 		title: 'Prowincje',
 		content: provincesData.value as ProvincesResponse<unknown>[],
@@ -53,12 +63,7 @@ function prepareChartData(content: object) {
 
 <template>
 	<div class="grid grid-cols-12 gap-3">
-		<AdministrationAccordion
+		<AdministrationAccordion class="col-span-4" :accordionItems="accordionItems" />
-			class="col-span-4"
-			:accordionItems="accordionItems"
-			:turn="turn"
-			:state="state"
-		/>
 
 		<AdministrationDetails
 			class="col-span-8 flex w-full flex-col items-center justify-center"

src/stores/reportStore.ts

@@ -1,8 +1,10 @@
 import type { StatesResponse, TurnsResponse } from '@/types/pb-types';
 
 export const useReportStore = defineStore('useReportStore', () => {
-	const state = ref<StatesResponse<unknown, unknown, unknown, unknown, unknown>>();
+	const state = ref<StatesResponse<unknown, unknown, unknown, unknown, unknown>>(
-	const turn = ref<TurnsResponse<unknown>>();
+		{} as StatesResponse<unknown, unknown, unknown, unknown, unknown>
+	);
+	const turn = ref<TurnsResponse<unknown>>({} as TurnsResponse<unknown>);
 
 	function setState(newState: StatesResponse<unknown, unknown, unknown, unknown, unknown>): void {
 		state.value = newState;