fix(settings): migrate from checked to model-value

- split modelValue array for checkboxes

Signed-off-by: Maksim Sukharev <[email protected]>

Author: Antreesy

src/components/settings/SettingsDatetimeFormat.vue

@@ -7,38 +7,38 @@
 	<fieldset>
 		<legend>{{ fieldsetLegend }}</legend>
 		<NcCheckboxRadioSwitch
-			:checked="dateTimeFormat"
+			:model-value="dateTimeFormat"
 			value="raw"
 			name="timestamp_format"
 			type="radio"
-			@update:checked="setDateTimeFormat">
+			@update:model-value="setDateTimeFormat">
 			{{ t('logreader', 'Raw data') }}
 		</NcCheckboxRadioSwitch>
 		<NcCheckboxRadioSwitch
-			:checked="dateTimeFormat"
+			:model-value="dateTimeFormat"
 			:disabled="isLocalLogfile"
 			value="local"
 			name="timestamp_format"
 			type="radio"
-			@update:checked="setDateTimeFormat">
+			@update:model-value="setDateTimeFormat">
 			{{ t('logreader', 'Local time') }}
 		</NcCheckboxRadioSwitch>
 		<NcCheckboxRadioSwitch
-			:checked="dateTimeFormat"
+			:model-value="dateTimeFormat"
 			:disabled="isLocalLogfile"
 			value="utc"
 			name="timestamp_format"
 			type="radio"
-			@update:checked="setDateTimeFormat">
+			@update:model-value="setDateTimeFormat">
 			{{ t('logreader', 'UTC time') }}
 		</NcCheckboxRadioSwitch>
 		<NcCheckboxRadioSwitch
-			:checked="dateTimeFormat"
+			:model-value="dateTimeFormat"
 			:disabled="isLocalLogfile"
 			value="relative"
 			name="timestamp_format"
 			type="radio"
-			@update:checked="setDateTimeFormat">
+			@update:model-value="setDateTimeFormat">
 			{{ t('logreader', 'Relative') }}
 		</NcCheckboxRadioSwitch>
 	</fieldset>

src/components/settings/SettingsLiveView.vue

@@ -8,7 +8,7 @@
 		<NcNoteCard v-if="!settingsStore.enabled" type="info">
 			{{ t('logreader', 'Polling is disabled because server is not configured to log to file') }}
 		</NcNoteCard>
-		<NcCheckboxRadioSwitch :checked.sync="liveLog" :disabled="!settingsStore.enabled">
+		<NcCheckboxRadioSwitch v-model="liveLog" :disabled="!settingsStore.enabled">
 			{{
 				t('logreader', 'Polling (live view)')
 			}}

src/components/settings/SettingsLogLevels.vue

@@ -8,12 +8,10 @@
 		<fieldset>
 			<legend>{{ t('logreader', 'Filter logging levels') }}</legend>
 			<NcCheckboxRadioSwitch
-				v-for="levelName, levelId in LOGGING_LEVEL_NAMES"
+				v-for="(levelName, levelId) in LOGGING_LEVEL_NAMES"
 				:key="levelId"
-				:checked="shownLevels"
-				:value="`${levelId}`"
-				name="logging_level"
-				@update:checked="setShowLevels">
+				:model-value="shownLevels[levelId]"
+				@update:model-value="setShowLevels(levelId)">
 				{{ levelName }}
 			</NcCheckboxRadioSwitch>
 		</fieldset>
@@ -36,10 +34,21 @@ const settingsStore = useSettingsStore()
 /**
  * Get shown logging levels (to allow filter levels)
  */
-const shownLevels = computed(() => settingsStore.shownLevels.map((l) => `${l}`))
-
-const setShowLevels = debounce((levels: string[]) => {
-	const numericLevels = levels.map((level) => parseInt(level)) as IAppSettings['shownLevels']
+const shownLevels = computed(() => {
+	return Object.fromEntries(Object.keys(LOGGING_LEVEL_NAMES).map((level) => {
+		return [level, settingsStore.shownLevels.includes(parseInt(level))]
+	}))
+})
+
+const setShowLevels = debounce((level: number) => {
+	const newShownLevels = {
+		...shownLevels.value,
+		[level]: !shownLevels.value[level],
+	}
+
+	const numericLevels = Object.keys(newShownLevels)
+		.filter((level) => newShownLevels[level])
+		.map((level) => parseInt(level)) as IAppSettings['shownLevels']
 
 	settingsStore.setSetting('shownLevels', numericLevels)
 		.catch(() => showError(t('logreader', 'Could not set logging levels to show')))

src/components/settings/SettingsSetLogLevel.vue

@@ -7,13 +7,13 @@
 	<fieldset>
 		<legend>{{ t('logreader', 'Set backend loglevel') }}</legend>
 		<NcCheckboxRadioSwitch
-			v-for="levelName, levelId in LOGGING_LEVEL_NAMES"
+			v-for="(levelName, levelId) in LOGGING_LEVEL_NAMES"
 			:key="levelId"
-			:checked="logLevel"
+			:model-value="logLevel"
 			:value="`${levelId}`"
 			type="radio"
 			name="loglevel"
-			@update:checked="setLogLevel">
+			@update:model-value="setLogLevel">
 			{{ levelName }}
 		</NcCheckboxRadioSwitch>
 	</fieldset>