Improved contributor modal hash and support for new authors

pages/contribution/contribution-form.vue

@@ -65,6 +65,7 @@
 					:error-messages="
 						content.length === 0 ? [$root.lang('database.subtitles.no_contributor_yet')] : []
 					"
+					@newUsers="(l) => this.$emit('newUser', l) "
 				/>
 			</v-col>
 		</v-row>

pages/contribution/contribution-modal.vue

@@ -50,7 +50,7 @@
 									<v-list-item-title>{{ panelLabels[form.formId] }}</v-list-item-title>
 									<v-list-item-subtitle class="text-truncate">
 										<span v-if="form.authors.length">
-											{{ contributorsFromIds(form.authors) }}
+											{{ formAuthorNames[form.formId] || '...' }}
 										</span>
 										<i v-else>{{ $root.lang("database.subtitles.no_contributor_yet") }}</i>
 									</v-list-item-subtitle>
@@ -101,11 +101,17 @@
 			:disabled="activeForm === undefined"
 			:contributors="contributors"
 			:multiple="multiple"
+			@newUser="
+				(l) => {
+					this.contributors = l;
+				}
+			"
 		/>
 	</modal-form>
 </template>
 
 <script>
+import axios from "axios";
 import moment from "moment";
 
 import ModalForm from "@components/modal-form.vue";
@@ -143,11 +149,54 @@ export default {
 			modalOpened: false,
 			closeOnSubmit: true,
 			formRecords: {},
+			formAuthorNames: {},
 			packsList: [],
-			lastFormId: 0,
 			openedFormId: undefined,
 		};
 	},
+	computed: {
+		activeForm() {
+			if (this.openedFormId === undefined) return undefined;
+
+			const formObj = this.formRecords[this.openedFormId];
+			if (formObj === undefined) return undefined;
+
+			const res = JSON.parse(JSON.stringify(formObj));
+			return res;
+		},
+		formRecordsList() {
+			return Object.values(this.formRecords);
+		},
+		formRecordsLength() {
+			return this.formRecordsList.length;
+		},
+		formRecordsAuthors() {
+			return Object.entries(this.formRecords).map(([formID, form]) => ([ formID, form.authors ]));
+		},
+		panelLabels() {
+			const acc = {};
+			for (const formID of Object.keys(this.formRecords)) {
+				const form = this.formRecords[formID];
+				acc[formID] = `${this.formatPack(form.pack)} • ${moment(new Date(form.date)).format("ll")}`;
+			}
+			return acc;
+		}
+	},
+	watch: {
+		formRecordsAuthors: {
+			handler(formEntriesAuthorIds) {
+				Promise.all(formEntriesAuthorIds.map(async ([formID, formAuthorsIDs]) => [
+						formID, await this.contributorsFromIds(formAuthorsIDs)
+				])).then((allAuthorNames) => {
+					this.formAuthorNames = allAuthorNames.reduce((acc, [formID, formAuthorNames]) => {
+						acc[formID] = formAuthorNames;
+						return acc;
+					}, {});
+				})
+			},
+			deep: true
+		}
+	},
 	methods: {
 		addNewForm() {
 			// create new form
@@ -192,23 +241,33 @@ export default {
 			this.openedFormId = createdFormObj.formId;
 			this.closeOnSubmit = !!closeOnSubmit;
 		},
-		contributorsFromIds(authorIds) {
+		async contributorsFromIds(authorIds) {
 			if (!authorIds || authorIds.length === 0) return "";
 
-			const contributorNames = this.contributors
-				.filter((c) => authorIds.includes(c.id))
-				.map((c) => c.username);
+			const total = authorIds.length;
 
-			const total = contributorNames.length;
-			const anonymousTotal = contributorNames.filter((username) => !username).length;
-			const knownNames = contributorNames.filter((username) => username);
+			const alreadyAuthors = this.contributors.filter((c) => authorIds.includes(c.id));
+			const alreadyAuthorsIds = alreadyAuthors.map(c => c.id);
+			const notAlreadyAuthorsIds = authorIds.filter((id) => !alreadyAuthorsIds.includes(id));
+			const searchIDsparam = notAlreadyAuthorsIds.join(',')
+			const notAlreadyAuthorsFound = (!searchIDsparam) ? [] :
+				await axios.get(`${this.$root.apiURL}/users/${searchIDsparam}`)
+					.then((res) => res.data)
+					.then((data) => Array.isArray(data) ? data : [data]);
+
+			const allAuthorsFound = Array.from(new Set([...alreadyAuthors, ...notAlreadyAuthorsFound]));
+			const anonymousTotal = allAuthorsFound.filter(a => !a.username).length;
+			const notAnonymous = allAuthorsFound.filter(a => !!a.username);
+			const notAnonymousNames = notAnonymous.map(user => user.username);
+			let allNames = notAnonymousNames;
 
 			if (anonymousTotal > 0) {
 				const anonymousStr = `${anonymousTotal} ${this.$root.lang("database.labels.anonymous")}`;
-				knownNames.splice(0, 0, anonymousStr);
+				allNames.splice(0, 0, anonymousStr); // insert first anonymous
 			}
 
-			return `[${total}]: ${knownNames.join(", ")}`;
+			allNames = Array.from(new Set(allNames));
+			return `[${total}]: ${allNames.join(", ")}`;
 		},
 		changeOpenedForm(formId) {
 			if (this.openedFormId === formId) this.openedFormId = undefined;
@@ -248,8 +307,7 @@ export default {
 			};
 		},
 		getNewFormId() {
-			this.lastFormId++;
-			return String(this.lastFormId);
+			return crypto.randomUUID();
 		},
 		onFormInput(form) {
 			// stop undefined object
@@ -286,31 +344,5 @@ export default {
 			this.$set(this, "formRecords", newFormRecords); // affect
 		},
 	},
-	computed: {
-		activeForm() {
-			if (this.openedFormId === undefined) return undefined;
-
-			const formObj = this.formRecords[this.openedFormId];
-			if (formObj === undefined) return undefined;
-
-			const res = JSON.parse(JSON.stringify(formObj));
-			return res;
-		},
-		formRecordsList() {
-			return Object.values(this.formRecords);
-		},
-		formRecordsLength() {
-			return this.formRecordsList.length;
-		},
-		panelLabels() {
-			// faster than using Object.entries + reduce
-			const acc = {};
-			for (const formID of Object.keys(this.formRecords)) {
-				const form = this.formRecords[formID];
-				acc[formID] = `${this.formatPack(form.pack)} • ${moment(new Date(form.date)).format("ll")}`;
-			}
-			return acc;
-		},
-	},
 };
 </script>