From 6fec59b1720ce2b90fcc340a9367fc5344e2d25e Mon Sep 17 00:00:00 2001 From: Evorp <3vorpgaming@gmail.com> Date: Sun, 22 Sep 2024 13:41:44 -0700 Subject: [PATCH] completely redo social media section on profile page --- pages/profile/main.vue | 194 +++++++++++++------------------------ resources/strings/cs_CZ.js | 11 +-- resources/strings/de_DE.js | 11 +-- resources/strings/en_US.js | 16 +-- resources/strings/fr_FR.js | 11 +-- resources/strings/pt_BR.js | 11 +-- 6 files changed, 74 insertions(+), 180 deletions(-) diff --git a/pages/profile/main.vue b/pages/profile/main.vue index def5c7a..bb376ef 100644 --- a/pages/profile/main.vue +++ b/pages/profile/main.vue @@ -107,104 +107,34 @@
{{ $root.lang().profile.social.title }}
- - - - + + + + + - - - - - - - - mdi-plus - - - + + + mdi-minus + + + {{ $root.lang().profile.social.add }} + mdi-plus + @@ -214,7 +144,7 @@ {{ $root.lang().profile.delete.btn }} - + {{ $root.lang().profile.save_changes }} @@ -242,6 +172,12 @@ import axios from "axios"; import ModalForm from "@components/modal-form.vue"; +const emptySocial = () => ({ + key: crypto.randomUUID(), + type: "", + link: "", +}); + export default { name: "profile-page", components: { @@ -249,21 +185,25 @@ export default { }, data() { return { + localUser: {}, uuidMaxLength: 36, usernameMaxLength: 24, - everythingIsOk: false, - newMedia: { - type: "", - link: "", - }, - media: settings.socials, - urlAddRules: [(u) => this.validForm(this.validURL(u) || u === "", "URL must be valid.")], + mediaTypes: settings.socials, + validationObject: {}, urlRules: [(u) => this.validForm(this.validURL(u), "URL must be valid.")], + mediaTypeRules: [ + (u) => + this.validForm( + u && typeof u === "string" && u.trim().length > 0, + "Social type is required.", + ), + (u) => this.validForm(this.mediaTypes.includes(u), "Social type must be valid."), + ], uuidRules: [ (u) => this.validForm( (u && u.length === this.uuidMaxLength) || !u, - "The UUID needs to be 36 characters long.", + "UUID needs to be 36 characters long.", ), ], usernameRules: [ @@ -279,41 +219,24 @@ export default { `Username must be less than ${this.usernameMaxLength} characters.`, ), ], - localUser: {}, deleteModalOpened: false, }; }, methods: { - isMediaOk() { - if (this.newMedia.type !== "" && this.newMedia.link !== "") return false; - return true; - }, validURL(str) { return String.urlRegex.test(str); }, + addSocialMedia() { + this.localUser.media ||= []; + this.localUser.media.push(emptySocial()); + }, removeSocialMedia(index) { this.localUser.media.splice(index, 1); }, - addSocialMedia() { - if (!this.localUser.media) this.localUser.media = []; - - this.localUser.media.push({ - type: this.newMedia.type, - link: this.newMedia.link, - }); - - this.newMedia = { - type: "", - link: "", - }; - }, validForm(boolResult, sentence) { - if (boolResult) { - this.everythingIsOk = true; - return true; - } - - this.everythingIsOk = false; + // use object to override existing result + this.$set(this.validationObject, sentence, boolResult); + if (boolResult) return true; return sentence.toString(); }, send() { @@ -323,7 +246,7 @@ export default { const data = { uuid: this.localUser.uuid || "", username: this.localUser.username || "", - media: this.localUser.media || [], + media: this.cleanedMedia, }; axios @@ -361,9 +284,9 @@ export default { this.localUser = res.data; // fix if new user or empty user - this.localUser.uuid = this.localUser.uuid || ""; - this.localUser.username = this.localUser.username || ""; - this.localUser.media = this.localUser.media || []; + this.localUser.uuid ||= ""; + this.localUser.username ||= ""; + this.localUser.media ||= []; }) .catch((err) => { console.error(err); @@ -375,6 +298,19 @@ export default { this.$nextTick(() => this.getUserInfo()); }, }, + computed: { + cleanedMedia() { + return (this.localUser.media || []) + .filter((m) => m.link && m.type) + .map((m) => { + delete m.key; + return m; + }); + }, + canSubmit() { + return Object.values(this.validationObject).every((val) => val === true); + }, + }, mounted() { this.$root.addAccessTokenListener(this.update); }, diff --git a/resources/strings/cs_CZ.js b/resources/strings/cs_CZ.js index fd79df6..fc11cf3 100644 --- a/resources/strings/cs_CZ.js +++ b/resources/strings/cs_CZ.js @@ -343,16 +343,7 @@ export default { }, social: { title: "Odkazy na sociální sítě", - edit: { - label: "Upravit %s URL", - }, - select: { - label: "Vybrat stránku", - }, - new: { - placeholder: "https://www.příklad.cz/", - label: "Nová sociální síť", - }, + placeholder: "https://www.příklad.cz/", }, }, files: { diff --git a/resources/strings/de_DE.js b/resources/strings/de_DE.js index db59391..ad8912c 100644 --- a/resources/strings/de_DE.js +++ b/resources/strings/de_DE.js @@ -296,16 +296,7 @@ export default { }, social: { title: "Soziale Links", - edit: { - label: "URL %s bearbeiten", - }, - select: { - label: "Medien auswählen", - }, - new: { - placeholder: "https://www.beispiel.de/", - label: "Neue soziale Medien", - }, + placeholder: "https://www.beispiel.de/", }, }, }; diff --git a/resources/strings/en_US.js b/resources/strings/en_US.js index 1be3b76..6f9707c 100644 --- a/resources/strings/en_US.js +++ b/resources/strings/en_US.js @@ -427,7 +427,7 @@ export default { title: "General", uuid: { label: "Minecraft profile UUID", - hint: "Your skin will be displayed in submissions you authored.", + hint: "Your skin will be displayed with add-ons you authored.", }, username: { label: "Username", @@ -436,16 +436,10 @@ export default { }, social: { title: "Social Links", - edit: { - label: "Edit %s URL", - }, - select: { - label: "Select media", - }, - new: { - placeholder: "https://www.example.com/", - label: "New social media", - }, + link_label: "Edit link", + type_label: "Select media type", + placeholder: "https://www.example.com/", + add: "Add social media", }, save_changes: "Save changes", delete: { diff --git a/resources/strings/fr_FR.js b/resources/strings/fr_FR.js index 4dcb3a7..7a86030 100644 --- a/resources/strings/fr_FR.js +++ b/resources/strings/fr_FR.js @@ -360,16 +360,7 @@ export default { }, social: { title: "Réseaux Sociaux", - edit: { - label: "Éditer l'URL de %s", - }, - select: { - label: "Sélectionner un média", - }, - new: { - placeholder: "https://www.exemple.com/", - label: "Nouveau réseau social", - }, + placeholder: "https://www.exemple.com/", }, }, files: { diff --git a/resources/strings/pt_BR.js b/resources/strings/pt_BR.js index 961e9b1..73abb90 100644 --- a/resources/strings/pt_BR.js +++ b/resources/strings/pt_BR.js @@ -330,16 +330,7 @@ export default { }, social: { title: "Links sociais", - edit: { - label: "Editar URL de %s", - }, - select: { - label: "Selecionar site", - }, - new: { - placeholder: "https://www.example.com/", - label: "Nova rede social", - }, + placeholder: "https://www.example.com/", }, }, gallery: {