Fix donation links in project settings (#1609)

pages/[type]/[id]/settings/links.vue

@@ -93,14 +93,16 @@
           :disabled="!hasPermission"
           @input="updateDonationLinks"
         />
-        <Multiselect
+        <DropdownSelect
-          v-model="donationLink.platform"
+          v-model="donationLink.id"
+          name="Donation platform selector"
+          :options="tags.donationPlatforms.map((x) => x.short)"
+          :display-name="
+            (option) => tags.donationPlatforms.find((platform) => platform.short === option)?.name
+          "
           placeholder="Select platform"
-          :options="tags.donationPlatforms.map((x) => x.name)"
+          render-up
-          :searchable="false"
+          class="platform-selector"
-          :close-on-select="true"
-          :show-labels="false"
-          :disabled="!hasPermission"
           @update:model-value="updateDonationLinks"
         />
       </div>
@@ -119,16 +121,13 @@
   </div>
 </template>
 
-<script>
+<script setup>
-import { Multiselect } from 'vue-multiselect'
+import { DropdownSelect } from 'omorphia'
 import SaveIcon from '~/assets/images/utils/save.svg'
 
-export default defineNuxtComponent({
+const tags = useTags()
-  components: {
+
-    Multiselect,
+const props = defineProps({
-    SaveIcon,
-  },
-  props: {
   project: {
     type: Object,
     default() {
@@ -144,121 +143,111 @@ export default defineNuxtComponent({
   patchProject: {
     type: Function,
     default() {
-        return () => {
+      return () => {}
-          this.$notify({
+    },
-            group: 'main',
+  },
-            title: 'An error occurred',
-            text: 'Patch project function not found',
-            type: 'error',
 })
-        }
-      },
-    },
-  },
-  setup() {
-    const tags = useTags()
 
-    return { tags }
+const issuesUrl = ref(props.project.issues_url)
-  },
+const sourceUrl = ref(props.project.source_url)
-  data() {
+const wikiUrl = ref(props.project.wiki_url)
-    const donationLinks = JSON.parse(JSON.stringify(this.project.donation_urls))
+const discordUrl = ref(props.project.discord_url)
-    donationLinks.push({
+
+const rawDonationLinks = JSON.parse(JSON.stringify(props.project.donation_urls))
+rawDonationLinks.push({
   id: null,
   platform: null,
   url: null,
 })
+const donationLinks = ref(rawDonationLinks)
 
-    return {
+const hasPermission = computed(() => {
-      issuesUrl: this.project.issues_url,
-      sourceUrl: this.project.source_url,
-      wikiUrl: this.project.wiki_url,
-      discordUrl: this.project.discord_url,
-
-      donationLinks,
-    }
-  },
-  computed: {
-    hasPermission() {
   const EDIT_DETAILS = 1 << 2
-      return (this.currentMember.permissions & EDIT_DETAILS) === EDIT_DETAILS
+  return (props.currentMember.permissions & EDIT_DETAILS) === EDIT_DETAILS
-    },
+})
-    patchData() {
+
+const patchData = computed(() => {
   const data = {}
 
-      if (this.checkDifference(this.issuesUrl, this.project.issues_url)) {
+  if (checkDifference(issuesUrl.value, props.project.issues_url)) {
-        data.issues_url = this.issuesUrl === '' ? null : this.issuesUrl.trim()
+    data.issues_url = issuesUrl.value === '' ? null : issuesUrl.value.trim()
   }
-      if (this.checkDifference(this.sourceUrl, this.project.source_url)) {
+  if (checkDifference(sourceUrl.value, props.project.source_url)) {
-        data.source_url = this.sourceUrl === '' ? null : this.sourceUrl.trim()
+    data.source_url = sourceUrl.value === '' ? null : sourceUrl.value.trim()
   }
-      if (this.checkDifference(this.wikiUrl, this.project.wiki_url)) {
+  if (checkDifference(wikiUrl.value, props.project.wiki_url)) {
-        data.wiki_url = this.wikiUrl === '' ? null : this.wikiUrl.trim()
+    data.wiki_url = wikiUrl.value === '' ? null : wikiUrl.value.trim()
   }
-      if (this.checkDifference(this.discordUrl, this.project.discord_url)) {
+  if (checkDifference(discordUrl.value, props.project.discord_url)) {
-        data.discord_url = this.discordUrl === '' ? null : this.discordUrl.trim()
+    data.discord_url = discordUrl.value === '' ? null : discordUrl.value.trim()
   }
 
-      const donationLinks = this.donationLinks.filter((link) => link.url && link.platform)
+  const validDonationLinks = donationLinks.value.filter((link) => link.url && link.id)
+
   if (
-        donationLinks !== this.project.donation_urls &&
+    validDonationLinks !== props.project.donation_urls &&
     !(
-          this.project.donation_urls &&
+      props.project.donation_urls &&
-          this.project.donation_urls.length === 0 &&
+      props.project.donation_urls.length === 0 &&
-          donationLinks.length === 0
+      validDonationLinks.length === 0
     )
   ) {
-        data.donation_urls = donationLinks
+    data.donation_urls = validDonationLinks
   }
 
   if (data.donation_urls) {
     data.donation_urls.forEach((link) => {
-          link.id = link.platform.toLowerCase()
+      const platform = tags.value.donationPlatforms.find((platform) => platform.short === link.id)
+      link.platform = platform.name
     })
   }
 
   return data
-    },
+})
-    hasChanges() {
+
-      return Object.keys(this.patchData).length > 0
+const hasChanges = computed(() => {
-    },
+  return Object.keys(patchData.value).length > 0
-  },
+})
-  methods: {
+
-    async saveChanges() {
+async function saveChanges() {
-      if (this.patchData && (await this.patchProject(this.patchData))) {
+  if (patchData.value && (await props.patchProject(patchData.value))) {
-        this.donationLinks = JSON.parse(JSON.stringify(this.project.donation_urls))
+    donationLinks.value = JSON.parse(JSON.stringify(props.project.donation_urls))
-        this.donationLinks.push({
+    donationLinks.value.push({
       id: null,
       platform: null,
       url: null,
     })
   }
-    },
+}
-    updateDonationLinks() {
+
-      this.donationLinks.forEach((link) => {
+function updateDonationLinks() {
+  const links = donationLinks.value
+  links.forEach((link) => {
     if (link.url) {
       const url = link.url.toLowerCase()
       if (url.includes('patreon.com')) {
-            link.platform = 'Patreon'
+        link.id = 'patreon'
       } else if (url.includes('ko-fi.com')) {
-            link.platform = 'Ko-fi'
+        link.id = 'ko-fi'
       } else if (url.includes('paypal.com') || url.includes('paypal.me')) {
-            link.platform = 'PayPal'
+        link.id = 'paypal'
       } else if (url.includes('buymeacoffee.com') || url.includes('buymeacoff.ee')) {
-            link.platform = 'Buy Me a Coffee'
+        link.id = 'bmac'
       } else if (url.includes('github.com/sponsors')) {
-            link.platform = 'GitHub Sponsors'
+        link.id = 'github'
       }
     }
   })
-      if (!this.donationLinks.find((link) => !(link.url && link.platform))) {
+  if (!links.find((link) => !(link.url && link.id))) {
-        this.donationLinks.push({
+    links.push({
       id: null,
       platform: null,
       url: null,
     })
   }
-    },
+  donationLinks.value = links
-    checkDifference(newLink, existingLink) {
+}
+function checkDifference(newLink, existingLink) {
   if (newLink === '' && existingLink !== null) {
     return true
   }
@@ -266,9 +255,7 @@ export default defineNuxtComponent({
     return false
   }
   return newLink !== existingLink
-    },
+}
-  },
-})
 </script>
 <style lang="scss" scoped>
 .donation-link-group {
@@ -276,9 +263,9 @@ export default defineNuxtComponent({
     flex-grow: 2;
     max-width: 26rem;
   }
-}
 
-.multiselect {
+  :deep(.animated-dropdown .selected) {
-  max-width: 15rem;
+    height: 40px;
+  }
 }
 </style>