Breadcrumbs refactor

Added personal area breadcrumbs and users breadcrumb
sunengine · Jan 19, 2020 · b6408ec · b6408ec
1 parent 728bd97
commit b6408ec
Show file tree

Hide file tree

Showing 64 changed files with 219 additions and 130 deletions.
diff --git a/Client/package.json b/Client/package.json
@@ -1,6 +1,6 @@
 {
     "name": "sunengine-client",
-    "version": "2.2.5",
+    "version": "2.2.6",
     "description": "SunEngine - web engine with support of blog, forum and articles functionality",
     "productName": "SunEngine",
     "author": "Dimitrij Polianin",

diff --git a/Client/quasar.conf.js b/Client/quasar.conf.js
@@ -22,7 +22,8 @@ module.exports = function (ctx) {
             'iconPicker',
             'components',
             'throttle',
-            'vueDevTools'
+            'vueDevTools',
+            'getBreadcrumbs'
         ],
         css: [
             'app.scss',

diff --git a/Client/quasar.extensions.json b/Client/quasar.extensions.json
@@ -2,7 +2,7 @@
   "ide-helper": {
     "addToGitIgnore": true,
     "__internal": {
-      "lastQuasarVersion": "1.7.3",
+      "lastQuasarVersion": "1.7.4",
       "lastIdeHelperVersion": "1.0.0-alpha.3"
     }
   },

diff --git a/Client/src/admin/AdminInformation.vue b/Client/src/admin/AdminInformation.vue
@@ -122,7 +122,7 @@ export default {
 	},
 	computed: {
 		breadcrumbsCategory() {
-			return this.$store.getters.breadcrumbsAdmin;
+			return this.$getBreadcrumbs("Admin");
 		},
 		additionalData() {
 			const {

diff --git a/Client/src/admin/ConfigurationAdmin.vue b/Client/src/admin/ConfigurationAdmin.vue
@@ -151,7 +151,7 @@ export default {
 	},
 	computed: {
 		breadcrumbsCategory() {
-          return this.$store.getters.breadcrumbsAdmin;
+			return this.$getBreadcrumbs("Admin");
 		},
 		filterLowerCase() {
 			return this.filter.toLowerCase();

diff --git a/Client/src/admin/CypherSecrets.vue b/Client/src/admin/CypherSecrets.vue
@@ -36,7 +36,7 @@ export default {
 	name: "CypherSecrets",
 	computed: {
 		breadcrumbsCategory() {
-          return this.$store.getters.breadcrumbsAdmin;
+			return this.$getBreadcrumbs("Admin");
 		}
 	},
 	methods: {

diff --git a/Client/src/admin/DeletedElements.vue b/Client/src/admin/DeletedElements.vue
@@ -41,7 +41,7 @@ export default {
 	},
 	computed: {
 		breadcrumbsCategory() {
-          return this.$store.getters.breadcrumbsAdmin;
+			return this.$getBreadcrumbs("Admin");
 		}
 	},
 	beforeCreate() {

diff --git a/Client/src/admin/ImagesCleaner.vue b/Client/src/admin/ImagesCleaner.vue
@@ -64,7 +64,7 @@ export default {
 	},
 	computed: {
 		breadcrumbsCategory() {
-          return this.$store.getters.breadcrumbsAdmin;
+			return this.$getBreadcrumbs("Admin");
 		}
 	},
 	methods: {

diff --git a/Client/src/admin/categories/CategoriesAdmin.vue b/Client/src/admin/categories/CategoriesAdmin.vue
@@ -41,9 +41,9 @@ export default {
 		};
 	},
 	computed: {
-       breadcrumbsCategory() {
-           return this.$store.getters.breadcrumbsAdmin;
-       }
+		breadcrumbsCategory() {
+			return this.$getBreadcrumbs("Admin");
+		}
 	},
 	methods: {
 		up(category) {

diff --git a/Client/src/admin/categories/CreateCategory.vue b/Client/src/admin/categories/CreateCategory.vue
@@ -66,7 +66,7 @@ export default {
 	},
 	computed: {
 		breadcrumbsCategory() {
-			return this.$store.getters.breadcrumbsCategoriesAdmin;
+			return this.$getBreadcrumbs("CategoriesAdmin");
 		}
 	},
 	methods: {

diff --git a/Client/src/admin/categories/EditCategory.vue b/Client/src/admin/categories/EditCategory.vue
@@ -59,8 +59,8 @@ export default {
 		};
 	},
 	computed: {
-	    breadcrumbsCategory() {
-           return this.$store.getters.breadcrumbsCategoriesAdmin;
+       breadcrumbsCategory() {
+           return this.$getBreadcrumbs("CategoriesAdmin");
        }
 	},
 	methods: {

diff --git a/Client/src/admin/components/ComponentsAdmin.vue b/Client/src/admin/components/ComponentsAdmin.vue
@@ -57,7 +57,7 @@ export default {
 	},
 	computed: {
 		breadcrumbsCategory() {
-			return this.$store.getters.breadcrumbsAdmin;
+			return this.$getBreadcrumbs("Admin");
 		}
 	},
 	methods: {
@@ -85,4 +85,4 @@ export default {
 		font-size: 1.15em;
 	}
 }
-</style>
+</style>
diff --git a/Client/src/admin/components/CreateComponent.vue b/Client/src/admin/components/CreateComponent.vue
@@ -48,9 +48,9 @@ export default {
 		};
 	},
 	computed: {
-		breadcrumbsCategory() {
-			return this.$store.getters.breadcrumbsComponentsAdmin;
-		}
+       breadcrumbsCategory() {
+           return this.$getBreadcrumbs("ComponentsAdmin");
+       }
 	},
 	methods: {
 		save() {

diff --git a/Client/src/admin/components/EditComponent.vue b/Client/src/admin/components/EditComponent.vue
@@ -57,7 +57,7 @@ export default {
 	},
 	computed: {
 		breadcrumbsCategory() {
-			return this.$store.getters.breadcrumbsComponentsAdmin;
+			return this.$getBreadcrumbs("ComponentsAdmin");
 		}
 	},
 	data() {

diff --git a/Client/src/admin/menuItems/CreateMenuItem.vue b/Client/src/admin/menuItems/CreateMenuItem.vue
@@ -41,7 +41,7 @@ export default {
 	},
 	computed: {
 		breadcrumbsCategory() {
-			return this.$store.getters.breadcrumbsMenuAdmin;
+			return this.$getBreadcrumbs("MenuItemsAdmin");
 		}
 	},
 	data() {
@@ -104,4 +104,4 @@ export default {
 		margin-top: $flex-gutter-md;
 	}
 }
-</style>
+</style>
diff --git a/Client/src/admin/menuItems/EditMenuItem.vue b/Client/src/admin/menuItems/EditMenuItem.vue
@@ -59,7 +59,7 @@ export default {
 	},
 	computed: {
 		breadcrumbsCategory() {
-			return this.$store.getters.breadcrumbsMenuAdmin;
+			return this.$getBreadcrumbs("MenuItemsAdmin");
 		}
 	},
 	methods: {

diff --git a/Client/src/admin/menuItems/MenuItemsAdmin.vue b/Client/src/admin/menuItems/MenuItemsAdmin.vue
@@ -46,7 +46,7 @@ export default {
 			return this.menuItems.length - 1;
 		},
 		breadcrumbsCategory() {
-			return this.$store.getters.breadcrumbsAdmin;
+			return this.$getBreadcrumbs("Admin");
 		}
 	},
 	methods: {

diff --git a/Client/src/admin/roles/RolesPage.vue b/Client/src/admin/roles/RolesPage.vue
@@ -47,7 +47,7 @@ export default {
 	},
 	computed: {
 		breadcrumbsCategory() {
-			return this.$store.getters.breadcrumbsAdmin;
+			return this.$getBreadcrumbs("Admin");
 		}
 	},
 

diff --git a/Client/src/admin/roles/RolesPermissions.vue b/Client/src/admin/roles/RolesPermissions.vue
@@ -67,7 +67,7 @@ export default {
 	},
 	computed: {
 		breadcrumbsCategory() {
-			return this.$store.getters.breadcrumbsAdmin;
+			return this.$getBreadcrumbs("Admin");
 		}
 	},
 	methods: {

diff --git a/Client/src/admin/skins/SkinsAdmin.vue b/Client/src/admin/skins/SkinsAdmin.vue
@@ -45,7 +45,7 @@ export default {
 	},
 	computed: {
 		breadcrumbsCategory() {
-			return this.$store.getters.breadcrumbsAdmin;
+			return this.$getBreadcrumbs("Admin");
 		}
 	},
 	beforeCreate() {

diff --git a/Client/src/boot/getBreadcrumbs.js b/Client/src/boot/getBreadcrumbs.js
@@ -0,0 +1,5 @@
+import { getBreadcrumbs } from "sun";
+
+export default ({ Vue }) => {
+    Vue.prototype.$getBreadcrumbs = getBreadcrumbs;
+};
diff --git a/Client/src/components/Breadcrumbs.vue b/Client/src/components/Breadcrumbs.vue
@@ -10,6 +10,7 @@
 			<q-breadcrumbs-el
 				:key="cat.id"
 				:exact="true"
+				:class="{ 'q-breadcrumbs--grey': !cat.route }"
 				v-for="cat of breadCrumbsCategories"
 				:to="cat.route"
 				:label="cat.title"
@@ -65,8 +66,9 @@ export default {
 	color: #00acc1;
 }
 
-.q-breadcrumbs--last {
-	.q-breadcrumbs__el {
+.q-breadcrumbs {
+	.q-breadcrumbs__el.q-breadcrumbs--grey,
+	.q-breadcrumbs--last {
 		color: $grey-6;
 	}
 }

diff --git a/Client/src/components/getBreadcrumbs.js b/Client/src/components/getBreadcrumbs.js
@@ -0,0 +1,74 @@
+import { app } from "sun";
+
+const breadcrumbs = {};
+
+export function makeBreadcrumbs() {
+	breadcrumbs.Personal = {
+		title: app.$t("BreadcrumbsNames.personal"),
+		route: {
+			name: "ProfileInSettings"
+		},
+		showInBreadcrumbs: true,
+		id: "ProfileInSettings"
+	};
+
+	breadcrumbs.Users = {
+		title: app.$t("BreadcrumbsNames.user"),
+		route: null,
+		showInBreadcrumbs: true,
+		id: "Users"
+	};
+
+	/*	breadcrumbs.PersonalUser = {
+		title: app.$t("BreadcrumbsNames.you"),
+		route: {},
+		showInBreadcrumbs: true,
+		id: "PersonalUser",
+		parent: breadcrumbs.Personal
+	};*/
+
+	breadcrumbs.Admin = {
+		title: app.$t("BreadcrumbsNames.adminPanel"),
+		route: {
+			name: "AdminInformation"
+		},
+		showInBreadcrumbs: true,
+		id: "AdminInformation"
+	};
+
+	breadcrumbs.CategoriesAdmin = {
+		title: app.$t("BreadcrumbsNames.adminPanelCategories"),
+		route: {
+			name: "CategoriesAdmin"
+		},
+		showInBreadcrumbs: true,
+		id: "CategoriesAdmin",
+		parent: breadcrumbs.Admin
+	};
+
+	breadcrumbs.ComponentsAdmin = {
+		title: app.$t("BreadcrumbsNames.adminPanelComponents"),
+		route: {
+			name: "ComponentsAdmin"
+		},
+		showInBreadcrumbs: true,
+		id: "ComponentsAdmin",
+		parent: breadcrumbs.Admin
+	};
+
+	breadcrumbs.MenuItemsAdmin = {
+		title: app.$t("BreadcrumbsNames.adminPanelMenu"),
+		route: {
+			name: "MenuItemsAdmin"
+		},
+		showInBreadcrumbs: true,
+		id: "MenuItemsAdmin",
+		parent: breadcrumbs.Admin
+	};
+
+	Object.freeze(breadcrumbs);
+}
+
+export default function getBreadcrumbs(name) {
+	return breadcrumbs[name];
+}
diff --git a/Client/src/i18n/en-us/components.js b/Client/src/i18n/en-us/components.js
@@ -14,5 +14,13 @@ export default {
 	},
 	Breadcrumbs: {
 		home: "Home"
+	},
+	BreadcrumbsNames: {
+		adminPanel: "Admin panel",
+		adminPanelCategories: "Categories",
+		adminPanelComponents: "Components",
+		adminPanelMenu: "Menu",
+		personal: "Personal area",
+		user: "Users",
 	}
 };
diff --git a/Client/src/i18n/ru/components.js b/Client/src/i18n/ru/components.js
@@ -14,5 +14,13 @@ export default {
 	},
 	Breadcrumbs: {
 		home: "Главная"
+	},
+	BreadcrumbsNames: {
+		adminPanel: "Админка",
+		adminPanelCategories: "Категории",
+		adminPanelComponents: "Компоненты",
+		adminPanelMenu: "Меню",
+		personal: "Личный кабинет",
+		user: "Пользователи"
 	}
 };
diff --git a/Client/src/modules/account/ChangeEmail.vue b/Client/src/modules/account/ChangeEmail.vue
@@ -86,6 +86,11 @@ export default {
 			showPassword: false
 		};
 	},
+	computed: {
+		breadcrumbsCategory() {
+			return this.$getBreadcrumbs("Personal");
+		}
+	},
 	methods: {
 		async save() {
 			this.$refs.email.validate();

diff --git a/Client/src/modules/account/ChangePassword.vue b/Client/src/modules/account/ChangePassword.vue
@@ -122,6 +122,11 @@ export default {
 			showPassword2: false
 		};
 	},
+	computed: {
+		breadcrumbsCategory() {
+			return this.$getBreadcrumbs("Personal");
+		}
+	},
 	methods: {
 		changePassword() {
 			this.$refs.passwordOld.validate();

diff --git a/Client/src/modules/account/ResetPassword.vue b/Client/src/modules/account/ResetPassword.vue
@@ -96,6 +96,11 @@ export default {
 			token: null
 		};
 	},
+	computed: {
+		breadcrumbsCategory() {
+			return this.$getBreadcrumbs("Personal");
+		}
+	},
 	methods: {
 		send() {
 			this.$refs.email.validate();

diff --git a/Client/src/modules/personal/ChangeLink.vue b/Client/src/modules/personal/ChangeLink.vue
@@ -74,6 +74,9 @@ export default {
 		};
 	},
 	computed: {
+		breadcrumbsCategory() {
+			return this.$getBreadcrumbs("Personal");
+		},
 		userLink() {
 			const route = this.$router.resolve({
 				name: "User",

diff --git a/Client/src/modules/personal/ChangeName.vue b/Client/src/modules/personal/ChangeName.vue
@@ -93,6 +93,11 @@ export default {
 			submitting: false
 		};
 	},
+	computed: {
+		breadcrumbsCategory() {
+			return this.$getBreadcrumbs("Personal");
+		}
+	},
 	methods: {
 		checkNameInDb() {
 			if (