enh: Add unique DOM identifiers for nav entries

Signed-off-by: Christopher Ng <chrng8@gmail.com>
nextcloud · Nov 15, 2023 · cdb9513 · cdb9513
1 parent cd41849
commit cdb9513
Showing 1 changed file with 37 additions and 13 deletions.
diff --git a/src/Photos.vue b/src/Photos.vue
@@ -25,51 +25,75 @@
 		<NcAppNavigation>
 			<template #list>
 				<NcAppNavigationItem :to="{name: 'all_media'}"
-					class="app-navigation__all_media"
 					:name="t('photos', 'All media')"
+					class="app-navigation__all_media"
+					data-id-app-nav-item="all-media"
 					exact>
 					<ImageIcon slot="icon" :size="20" />
 				</NcAppNavigationItem>
-				<NcAppNavigationItem to="/photos" :name="t('photos', 'Photos')">
+				<NcAppNavigationItem to="/photos"
+					:name="t('photos', 'Photos')"
+					data-id-app-nav-item="photos">
 					<Camera slot="icon" :size="20" />
 				</NcAppNavigationItem>
-				<NcAppNavigationItem to="/videos" :name="t('photos', 'Videos')">
+				<NcAppNavigationItem to="/videos"
+					:name="t('photos', 'Videos')"
+					data-id-app-nav-item="videos">
 					<VideoIcon slot="icon" :size="20" />
 				</NcAppNavigationItem>
-				<NcAppNavigationItem :to="{name: 'albums'}" :name="t('photos', 'Albums')">
+				<NcAppNavigationItem :to="{name: 'albums'}"
+					:name="t('photos', 'Albums')"
+					data-id-app-nav-item="albums">
 					<FolderMultipleImage slot="icon" :size="20" />
 				</NcAppNavigationItem>
-				<NcAppNavigationItem :to="{name: 'sharedAlbums'}" :name="t('photos', 'Collaborative albums')">
+				<NcAppNavigationItem :to="{name: 'sharedAlbums'}"
+					:name="t('photos', 'Collaborative albums')"
+					data-id-app-nav-item="shared-albums">
 					<AccountGroup slot="icon" :size="20" />
 				</NcAppNavigationItem>
-				<NcAppNavigationItem v-if="showPeopleMenuEntry" :to="{name: 'faces'}" :name="t('photos', 'People')">
+				<NcAppNavigationItem v-if="showPeopleMenuEntry"
+					:to="{name: 'faces'}"
+					:name="t('photos', 'People')"
+					data-id-app-nav-item="faces">
 					<template #icon>
 						<AccountBoxMultipleOutline :size="20" />
 					</template>
 				</NcAppNavigationItem>
-				<NcAppNavigationItem :to="{name: 'folders'}" :name="t('photos', 'Folders')">
+				<NcAppNavigationItem :to="{name: 'folders'}"
+					:name="t('photos', 'Folders')"
+					data-id-app-nav-item="folders">
 					<Folder slot="icon" :size="20" />
 				</NcAppNavigationItem>
-				<NcAppNavigationItem to="/favorites" :name="t('photos', 'Favorites')">
+				<NcAppNavigationItem to="/favorites"
+					:name="t('photos', 'Favorites')"
+					data-id-app-nav-item="favorites">
 					<Star slot="icon" :size="20" />
 				</NcAppNavigationItem>
-				<NcAppNavigationItem :to="{name: 'thisday'}" :name="t('photos', 'On this day')">
+				<NcAppNavigationItem :to="{name: 'thisday'}"
+					:name="t('photos', 'On this day')"
+					data-id-app-nav-item="this-day">
 					<CalendarToday slot="icon" :size="20" />
 				</NcAppNavigationItem>
-				<NcAppNavigationItem :to="{name: 'shared'}" :name="t('photos', 'Shared with you')">
+				<NcAppNavigationItem :to="{name: 'shared'}"
+					:name="t('photos', 'Shared with you')"
+					data-id-app-nav-item="shared">
 					<ShareVariant slot="icon" :size="20" />
 				</NcAppNavigationItem>
 				<NcAppNavigationItem v-if="areTagsInstalled"
 					:to="{name: 'tags'}"
-					:name="t('photos', 'Tags')">
+					:name="t('photos', 'Tags')"
+					data-id-app-nav-item="tags">
 					<Tag slot="icon" :size="20" />
 				</NcAppNavigationItem>
-				<NcAppNavigationItem :to="{name: 'places'}" :name="t('photos', 'Places')">
+				<NcAppNavigationItem :to="{name: 'places'}"
+					:name="t('photos', 'Places')"
+					data-id-app-nav-item="places">
 					<MapMarker slot="icon" :size="20" />
 				</NcAppNavigationItem>
 				<NcAppNavigationItem v-if="showLocationMenuEntry"
 					:to="{name: 'maps'}"
-					:name="t('photos', 'Map')">
+					:name="t('photos', 'Map')"
+					data-id-app-nav-item="maps">
 					<MapIcon slot="icon" :size="20" />
 				</NcAppNavigationItem>
 			</template>