merge user-list and user-select

Faithful-Resource-Pack · Apr 8, 2024 · 7f1c529 · 7f1c529
1 parent 22f6c7d
commit 7f1c529
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 239 deletions.
diff --git a/pages/addon/addon-form.vue b/pages/addon/addon-form.vue
@@ -158,7 +158,8 @@
 				<!-- eslint-enable vue/no-v-text-v-html-on-component -->
 
 				<!-- Addon authors selection -->
-				<user-list
+				<user-select
+					:users="users"
 					v-model="submittedForm.authors"
 					:label="$root.lang().addons.general.authors.label"
 					:hint="$root.lang().addons.general.authors.hint"
@@ -291,15 +292,17 @@
 </template>
 
 <script>
-import UserList from "./user-list.vue";
+import axios from "axios";
+
+import UserSelect from "../components/user-select.vue";
 import ImagePreviewer from "./image-previewer.vue";
 import FullscreenPreview from "./fullscreen-preview.vue";
 import DropZone from "../components/drop-zone.vue";
 
 export default {
 	name: "addon-form",
 	components: {
-		UserList,
+		UserSelect,
 		ImagePreviewer,
 		FullscreenPreview,
 		DropZone,
@@ -498,6 +501,7 @@ export default {
 			validForm: false,
 			editions: ["Java", "Bedrock"],
 			res: ["32x", "64x"],
+			users: [],
 		};
 	},
 	computed: {
@@ -672,6 +676,22 @@ export default {
 				reader.readAsDataURL(file);
 			});
 		},
+		getUsers() {
+			axios
+				.get(`${this.$root.apiURL}/users/names`)
+				.then((res) => {
+					this.users = res.data.sort((a, b) => {
+						if (!a.username && !b.username) return 0;
+						if (!a.username && b.username) return 1;
+						if (a.username && !b.username) return -1;
+
+						return a.username > b.username ? 1 : b.username > a.username ? -1 : 0;
+					});
+				})
+				.catch((err) => {
+					console.trace(err);
+				});
+		},
 	},
 	watch: {
 		addonData: {
@@ -690,6 +710,7 @@ export default {
 		},
 	},
 	beforeMount() {
+		this.getUsers();
 		this.submittedForm.authors = [this.$root.user.id];
 	},
 };

diff --git a/pages/addon/user-list.vue b/pages/addon/user-list.vue
diff --git a/pages/contribution/user-select.vue → pages/components/user-select.vue b/pages/contribution/user-select.vue → pages/components/user-select.vue
@@ -2,17 +2,13 @@
 	<v-autocomplete
 		v-bind="$attrs"
 		v-model="content"
-		:items="contributorList"
-		:loading="contributors.length == 0 || isSearching"
+		:items="userList"
+		:loading="users.length == 0 || isSearching"
 		:search-input.sync="search"
 		item-text="username"
 		item-value="id"
-		:placeholder="$root.lang().database.labels.one_contributor"
 		multiple
 		:dense="dense"
-		:error-messages="
-			content.length === 0 ? [$root.lang('database.subtitles.no_contributor_yet')] : []
-		"
 		chips
 	>
 		<!-- SELECTED THINGY -->
@@ -53,9 +49,14 @@
 			</template>
 			<template v-else>
 				<v-list-item-content>
-					<v-list-item-title>{{
-						data.item.username || $root.lang().database.labels.anonymous + ` (${data.item.id})`
-					}}</v-list-item-title>
+					<v-list-item-title>
+						{{
+							data.item.username || $root.lang().database.labels.anonymous + ` (${data.item.id})`
+						}}
+					</v-list-item-title>
+					<v-list-item-subtitle v-if="data.item.contributions">
+						{{ `${data.item.contributions} contribution${data.item.contributions > 1 ? "s" : ""}` }}
+					</v-list-item-subtitle>
 				</v-list-item-content>
 				<v-list-item-avatar :style="{ background: data.item.uuid ? 'transparent' : '#4e4e4e' }">
 					<template v-if="data.item.uuid">
@@ -82,7 +83,7 @@ const SEARCH_DELAY = 300;
 export default {
 	name: "user-select",
 	props: {
-		contributors: {
+		users: {
 			required: true,
 			type: Array,
 		},
@@ -101,8 +102,8 @@ export default {
 		},
 	},
 	computed: {
-		contributorList() {
-			return [...this.contributors, ...Object.values(this.loadedContributors)];
+		userList() {
+			return [...this.users, ...Object.values(this.loadedUsers)];
 		},
 	},
 	data() {
@@ -112,7 +113,7 @@ export default {
 			isSearching: false,
 			searchTimeout: undefined,
 			previousSearches: [],
-			loadedContributors: {},
+			loadedUsers: {},
 		};
 	},
 	watch: {
@@ -141,9 +142,9 @@ export default {
 				this.startSearch(val);
 			}, SEARCH_DELAY);
 		},
-		loadedContributors: {
+		loadedUsers: {
 			handler(n) {
-				window.eventBus.$emit("newContributor", this.contributorList);
+				window.eventBus.$emit("newutor", this.userList);
 			},
 			deep: true,
 		},
@@ -172,17 +173,13 @@ export default {
 			this.isSearching = true;
 
 			axios
-				.get(
-					// we can assume contribution editors are admin
-					`${this.$root.apiURL}/users/role/all/${val}`,
-					this.$root.apiOptions,
-				)
+				.get(`${this.$root.apiURL}/users/role/all/${val}`)
 				.then((res) => {
 					const results = res.data;
 					results.forEach((result) => {
 						// in case some clever guy forgot their username or uuid or whatever
 						Vue.set(
-							this.loadedContributors,
+							this.loadedUsers,
 							result.id,
 							Object.merge(
 								{

diff --git a/pages/contribution/contribution-form.vue b/pages/contribution/contribution-form.vue
@@ -71,10 +71,14 @@
 				</div>
 				<user-select
 					dense
-					:contributors="contributors"
+					:users="contributors"
 					v-model="content.authors"
 					class="my-0"
 					:limit="3"
+					:placeholder="$root.lang().database.labels.one_contributor"
+					:error-messages="
+						content.length === 0 ? [$root.lang('database.subtitles.no_contributor_yet')] : []
+					"
 				/>
 			</v-col>
 		</v-row>
@@ -84,7 +88,7 @@
 <script>
 import moment from "moment";
 
-import UserSelect from "./user-select.vue";
+import UserSelect from "../components/user-select.vue";
 import QuickDatePicker from "../components/quick-date-picker.vue";
 import MultiRangeInput from "../components/multi-range-input.vue";