Toggle graphs in the training board olena

[iamsherlocked1891]

Client-side

Additions & Modifications:

1. Enhanced DropdownCard Component:

   • The DropdownCard component was refactored to allow dynamic control over its state (collapsed or expanded) based on a passed parameter.
   • By default, the component remains open.

2. Refinements in the Training Information Section:

   • Graphs within the Training Information section were encapsulated within the newly refactored DropdownCard component. This provides users the option to expand or collapse the graphical data, improving the clarity and organization of training details.

3. Removed Training Logs from Training Information:

   • The Training Logs information was removed from the Training Information section, streamlining the display and focusing user attention on more important information.

[tharvik]

thanks for the work! a few comments on how to improve it, please also fix the tests/lint found by the CI

[tharvik]

I personally find it clearer to use type-only props declarations. also, you can have a preciser type (only two value are possible here, true or false) and avoid JSON.parse at all.

Suggested change

	const props = defineProps({
	initiallyOpen: {
	type: String,
	default: "true", //open by default
	},
	});
	const props = withDefaults(
	defineProps<{
	initiallyOpen?: boolean;
	}>(),
	{ initiallyOpen: true },
	);

[tharvik]

onMounted is quite special, it doesn't get triggered when data change for example. better to watch for prop to change instead, so that if someone change the prop from the outside, it will behave as expected.

Suggested change

	onMounted(() => {
	opened.value = JSON.parse(props.initiallyOpen);
	});
	watch(props, ({ initiallyOpen }) => {
	opened.value = initiallyOpen;
	});

[tharvik]

now that it is a boolean, parsing as to be updated, as close as the loading point you can. it helps with debugging because you know where the value is created. an easy parser is shown below.
also, the "or" op is quite unsafe (as many values can be falsy), better to use a nullish coaslescing which only check for null and undefined.

Suggested change

	const currentOpen = ref(localStorage.getItem('initiallyOpen') || 'false');
	const currentOpen = ref(localStorage.getItem("initiallyOpen") === "true" ? true : false);

one can even make it safer by checking for the full valid range, which would be the nicest (as it fails on unexpected values, which is always nice for finding logical bugs)

function loadCurrentOpen(): boolean {
  const raw = localStorage.getItem("initiallyOpen");
  switch (raw) {
    case "true":
      return true;
    case "false":
    case null:
      return false;
    default:
      throw new Error(`unexpected loadCurrent stored value: ${raw}`);
  }
}
const currentOpen = ref(loadCurrentOpen());

[tharvik]

consider renaming currentOpen to initiallyOpen, then you can use the short version of the attribute, which is a bit nicer

Suggested change

	<DropdownCard :initiallyOpen="currentOpen" @click="toggleAdvancedInfo">
	<DropdownCard :initiallyOpen @click="toggleAdvancedInfo">