Edus and Bus are now having slugs for linking, generated from name.

This is to avoid special charaters in URLs that are encoded and encoded once again by server reroutes etc.

Author: antongit

community-app/frontend/package.json

@@ -17,6 +17,7 @@
     "lodash.debounce": "^4.0.8",
     "pinia": "^3.0.3",
     "showdown": "^2.1.0",
+    "slugify": "^1.6.6",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"
   },

community-app/frontend/src/components/InputField.vue

@@ -6,7 +6,7 @@ import { getValue } from "./profile/HelpTexts.js"
 import { isString } from '../utils.js'
 
 const model = defineModel();
-const props = defineProps(['path', 'type']);
+const props = defineProps(['path', 'type', 'disabled']);
 
 const help = ref(getValue(props.path, "help", props.type));
 const label = ref(getValue(props.path, "label", props.type));
@@ -21,7 +21,7 @@ const placeholder = ref(getValue(props.path, "placeholder", props.type));
             <InfoButton v-if="help" :info="help"/>
         </template>
         <template #default>
-            <n-input v-model:value="model" :placeholder="placeholder"/>
+            <n-input v-model:value="model" :placeholder="placeholder" :disabled="disabled"/>
         </template>
     </n-form-item>
 </template>

community-app/frontend/src/components/Maintains.vue

@@ -8,12 +8,12 @@ defineProps(['data']);
 <template>
 <div>
     <div class="mb-2">Maintains:</div>
-    <a v-if="data.company" :href="'/business/'+data.company.name" @click="(event) => showBusinessProfile(data.company.name, event)">
+    <a v-if="data.company" :href="'/business/'+data.company.slug" @click="(event) => showBusinessProfile(data.company.slug, event)">
         <div class="mb-1 d-flex text-align-center">
             {{ data.company.name }}
         </div>
     </a>
-    <a v-if="data.edu" :href="'/edu/'+data.edu.name" @click="(event) => showEduProfile(data.edu.name, event)">
+    <a v-if="data.edu" :href="'/edu/'+data.edu.slug" @click="(event) => showEduProfile(data.edu.slug, event)">
         <p class="mb-1">
             {{ data.edu.name }}
         </p>

community-app/frontend/src/components/overview/Businesses.vue

@@ -48,7 +48,7 @@ function showAll()
                 </template>
                 <template v-else-if="store">
                     <div v-if="store.items?.length > 0" v-for="item in store.items" class="logo" :key="item.text">
-                        <a :href="item.url" @click="(event)=>showBusinessProfile(item.text, event)">
+                        <a :href="item.url" @click="(event)=>showBusinessProfile(item.slug, event)">
                             <NTooltip trigger="hover" placement="top">
                                 <template #trigger>
                                     <img :src="item.img || defaultLogo" :alt="item.text"/>

community-app/frontend/src/components/overview/BusinessesStore.js

@@ -32,7 +32,7 @@ export const useBusinessesStore = defineStore ('businesses',{
 async function fetchBusinesses(){
 
     const imageParamsLogos = "?withoutEnlargement=true&quality=98&fit=cover&height=200&format=png";
-    const url = Constants.GET_COMPANIES+"?fields[]=name,logo&meta=filter_count";
+    const url = Constants.GET_COMPANIES+"?fields[]=name,logo,slug&meta=filter_count";
 
     const limit = 10;
 
@@ -44,8 +44,9 @@ async function fetchBusinesses(){
         const items = json.data?.map((b) => (
             {
                 img: b.logo ? createAssetUrl(b.logo) + imageParamsLogos : null,
-                url: '/business/'+b.name,
+                url: '/business/'+b.slug,
                 text: b.name,
+                slug: b.slug
             }
         ));
 

community-app/frontend/src/components/overview/Edus.vue

@@ -48,7 +48,7 @@ function showAll()
                 </template>
                 <template v-else-if="store">
                     <div v-if="store.items?.length > 0" v-for="item in store.items" class="logo" :key="item.text">
-                        <a :href="item.url" @click="(event)=>showEduProfile(item.text, event)">
+                        <a :href="item.url" @click="(event)=>showEduProfile(item.slug, event)">
                             <NTooltip trigger="hover" placement="top">
                                 <template #trigger>
                                         <img :src="item.img || defaultLogo" :alt="item.text"/>

community-app/frontend/src/components/overview/EdusStore.js

@@ -32,7 +32,7 @@ export const useEdusStore = defineStore ('edus',{
 async function fetchEdus(){
 
     const imageParamsLogos = "?withoutEnlargement=true&quality=98&fit=cover&height=200&format=png";
-    const url = Constants.GET_EDUS+"?fields[]=name,logo&meta=filter_count";
+    const url = Constants.GET_EDUS+"?fields[]=name,logo,slug&meta=filter_count";
 
     const limit = 10;
 
@@ -44,8 +44,9 @@ async function fetchEdus(){
         const items = json.data?.map((b) => (
             {
                 img: b.logo ? createAssetUrl(b.logo) + imageParamsLogos : null,
-                url: '/edu/'+b.name,
+                url: '/edu/'+b.slug,
                 text: b.name,
+                slug: b.slug
             }
         ));
 

community-app/frontend/src/components/profile/Business.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { ref, onMounted, computed } from 'vue'
+import slugify from 'slugify'
 import Constants from '../../constants.js'
 import FileUploader from './FileUploader.vue'
 import SocialFields from './SocialFields.vue'
@@ -31,6 +32,7 @@ const emptyCompany = {
   enabled: false,
   logo: null,
   name: "",
+  slug: "",
   tagline: "",
   description: "",
   internships: false,
@@ -89,7 +91,7 @@ const rules = {
     message: "Website is required",
     trigger: ['input', 'blur'],
     validator: (rule, value)=>{
-      return form.value[0].social.website.length > 0;
+      return form.value[0]?.social?.website?.length > 0;
     }
   },
   logo: {
@@ -130,6 +132,15 @@ const submit = async () => {
   delete formValue.status;
   delete formValue.website;
 
+  if (!form.value[0].slug)
+  {
+    formValue.slug = slug.value;
+  }
+  else
+  {
+    delete formValue.slug;
+  }
+
   if (tempLogo.value == null)
   {
     delete formValue.logo
@@ -183,6 +194,10 @@ const logoButtonText = computed(()=>{
   return logo.value !== null ? "Upload new" : "Upload Logo" 
 })
 
+const slug = computed(()=>{
+  return form.value[0].slug ? form.value[0].slug : slugify (form.value[0].name ?? "", { lower: true, strict: true});
+})
+
 </script>
 
 <template>
@@ -230,6 +245,7 @@ const logoButtonText = computed(()=>{
         <StatusTag :value="form[0].status"/>
 
           <InputField v-if="!companyExists" path="name" type="company" v-model="form[0].name"/>
+          <InputField path="slug" type="company" v-model="slug" :disabled="true"/>
         <div class="row">
           <div class="col">
           <InputField path="tagline" type="company" v-model="form[0].tagline"/>

community-app/frontend/src/components/profile/Edu.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { ref, watch, onMounted, computed } from 'vue'
+import slugify from 'slugify'
 import Constants from '../../constants.js'
 import FileUploader from './FileUploader.vue'
 import SocialFields from './SocialFields.vue'
@@ -31,6 +32,7 @@ const emptyData = {
   enabled: false,
   logo: null,
   name: "",
+  slug: "",
   description: "",
   status: 0,
   website: "",
@@ -76,7 +78,7 @@ const rules = {
     message: "Website is required",
     trigger: ['input', 'blur'],
     validator: (rule, value)=>{
-      return form.value[0].social.website.length > 0;
+      return form.value[0]?.social?.website?.length > 0;
     }
   },
   logo: {
@@ -118,6 +120,15 @@ const submit = async () => {
   delete formValue.status;
   delete formValue.website;
 
+  if (!form.value[0].slug)
+  {
+    formValue.slug = slug.value;
+  }
+  else
+  {
+    delete formValue.slug;
+  }
+
   if (tempLogo.value == null)
   {
     delete formValue.logo
@@ -171,6 +182,10 @@ const logoButtonText = computed(()=>{
   return logo.value !== null ? "Upload new" : "Upload Logo" 
 })
 
+const slug = computed(()=>{
+  return form.value[0].slug ? form.value[0].slug : slugify (form.value[0].name ?? "", { lower: true, strict: true});
+})
+
 </script>
 
 <template>
@@ -218,6 +233,7 @@ const logoButtonText = computed(()=>{
         <StatusTag :value="form[0].status"/>
 
         <InputField path="name" v-if="!eduExists" type="edu" v-model="form[0].name"/>
+        <InputField path="slug" type="edu" v-model="slug" :disabled="true"/>
 
         <FormItem path="description" type="edu">
           <template #content>

community-app/frontend/src/components/profile/HelpTexts.js

@@ -128,6 +128,11 @@ const data = Object({
             placeholder: "My Institution"
         }
     },
+    slug:{
+        label: "Slug",
+        help: "URL-safe version of a name or title, used in links.",
+        placeholder: "Auto-generated"
+    },
     tagline: {
         company: {
             label: "Tagline",