select template by slug

backend/Controllers/TemplateController.cs

@@ -61,6 +61,8 @@ public IActionResult Get( )
     public IActionResult Purposes( )
     {
         var templates = _templateService.GetAll();
-        return Ok(templates.Where((x)=>x.Active).Select((x)=>x.Purpose).ToArray<string>());
-    }
+        return Ok(templates.Where((x)=>x.Active).Select((x)=> new PurposeRequest{
+                Slug = x.Slug,
+                Purpose = x.Purpose
+            }).ToArray<PurposeRequest>());    }
 }

backend/Entities/EmailTemplate.cs

@@ -3,6 +3,7 @@ public class EmailTemplate
   {
     public int Id { get; set; }    
     public bool Active { get; set; }    
+    public string Slug { get; set; }
     public string Purpose { get; set; }
     public string To { get; set; }
     public string From { get; set; }

backend/Models/PurposeRequest.cs

@@ -0,0 +1,13 @@
+namespace ContRev.Backend;
+
+using System.ComponentModel.DataAnnotations;
+
+public class PurposeRequest
+{
+    [Required]
+    public string Purpose { get; set; }
+
+    [Required]
+    public string Slug { get; set; }
+
+}

backend/Models/TemplateRequest.cs

@@ -6,6 +6,9 @@ public class TemplateRequest
 {
     [Required]
     public bool Active { get; set; }
+
+    [Required]
+    public string Slug { get; set; }
 
     [Required]
     public string Purpose { get; set; }

backend/Services/TemplateService.cs

@@ -43,6 +43,7 @@ public string Message(EmailTemplate template, string link, string email) {
     public async Task<EmailTemplate> Add( TemplateRequest template ) {
         var entry = new EmailTemplate(){
             Active = template.Active,
+            Slug = template.Slug,
             Purpose = template.Purpose,
             To = template.To,
             From = template.From,
@@ -58,6 +59,7 @@ public async Task<bool> Update( EmailTemplate template ) {
         var entry = await _db.EmailTemplates.FindAsync(template.Id);
         if (entry is null) return false;
         entry.Active = template.Active;
+        entry.Slug = template.Slug;
         entry.Purpose = template.Purpose;
         entry.To = template.To;
         entry.From = template.From;

src/components/ButtonPrimary.vue

@@ -1,12 +1,12 @@
 <template>
     <div>
   <button :disabled="disabled"
-    class="disabled:cursor-not-allowed py-2.5 px-0.5 text-center rounded-md group bg-gradient-to-r from-skin-from via-skin-via to-skin-to focus:ring-4 text-skin-inverted focus:outline-none focus:ring-skin-focus dark:focus:ring-skin-dark'"
+    class="disabled:cursor-not-allowed py-2 px-0.5 text-center rounded-md group bg-gradient-to-r from-skin-from via-skin-via to-skin-to focus:ring-4 text-skin-inverted focus:outline-none focus:ring-skin-focus dark:focus:ring-skin-dark'"
   >
-    <span v-if="!disabled" class="px-5 py-2.5 transition-all ease-in duration-75 rounded-md group-hover:bg-opacity-50 group-hover:bg-white hover:text-skin-base dark:hover:text-skin-inverted"> 
+    <span v-if="!disabled" class="px-5 py-2 transition-all duration-75 ease-in rounded-md group-hover:bg-opacity-50 group-hover:bg-white hover:text-skin-base dark:hover:text-skin-inverted"> 
         <slot></slot>
     </span>
-    <span v-else class="px-5 py-2.5 bg-white bg-opacity-60" >
+    <span v-else class="px-5 py-2 bg-white bg-opacity-60" >
         <slot></slot>
     </span>
   </button>

src/locales/de.json

@@ -8,13 +8,14 @@
     "thankyou": "Danke!",
     "OK": "Ok",
     "cancel": "Abbruch",
+    "copy": "Kopieren",
     "delete": "Löschen",
     "error": "Fehler",
     "emailform": {
         "title": "Email senden",
         "intro": "Hier kannst du deine Email an die ausgewählte Person oder Funktion senden",
         "invalid": "Der Link ist fehlerhaft oder inzwischen veraltet. Bitte lass dir einen Neuen schicken.",
-        "your_email_to": "Deine Email an",
+        "your_email_to": "Deine ",
         "subject": "Betreff",
         "message": "Nachricht",
         "send": "Senden",
@@ -30,6 +31,7 @@
     "templates": {
         "active": "Aktiv",
         "purpose": "Ziel",
+        "slug": "Slug",
         "purpose_full": "Ziel der Email (Beschreibung des Empfängers)",
         "to": "An",
         "to_full": "Email des Empfämgers",

src/locales/en.json

@@ -8,13 +8,14 @@
     "thankyou": "Thank you!",
     "OK": "Ok",
     "cancel": "Cancel",
+    "copy": "Copy",
     "delete": "Delete",
     "error": "Error",
     "emailform": {
         "title": "Send Email",
         "intro": "Here you can send your email to the requested person or team or function",
         "invalid": "The Link is wrong or outdated. Please get a new link.",
-        "your_email_to": "Your Email to",
+        "your_email_to": "Your ",
         "subject": "Subject",
         "message": "Your message",
         "send": "Send",
@@ -30,6 +31,7 @@
     "templates": {
         "active": "Active",
         "purpose": "Purpose",
+        "slug": "Slug",
         "purpose_full": "Purpose of Email (describe the receiver)",
         "to": "To",
         "to_full": "Email of the receiver",

src/router.ts

@@ -12,6 +12,8 @@ export const router = createRouter({
     routes: [
         { path: '/', component: Contact },
         { path: '/en', component: Contact },
+        { path: '/:slug', component: Contact },
+        { path: '/en/:slug', component: Contact },
         { path: '/templates', component: Templates },
         { path: '/en/templates', component: Templates },
         { path: '/message/:slug', component: EmailForm },

src/views/Contact.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
+import { useRoute } from "vue-router";
 import { fetchWrapper, validateEmail } from "../services"
 import Header from "../components/Header.vue";
 import CleanContainer from "../components/CleanContainer.vue";
@@ -11,24 +12,29 @@ const { t, locale } = useI18n()
 const email = ref("");
 
 const thanks = ref(false)
-const options = ref([] as Array<string>)
-const purpose = ref("")
+const options = ref([] as Array<any>)
+const purpose = ref(0)
+const route = useRoute()
+const slug = route.params.slug
 const validated = computed(()=>{
     return validateEmail(email.value)
 })
 function refresh() {
-    fetchWrapper.get("/api/Template/purposes").then((x)=> options.value = x).then(()=>{
-      if (options.value.length>0)
-        purpose.value = options.value[0]
+    fetchWrapper.get("/api/Template/purposes").then((x)=> 
+    {
+      if (slug)
+        options.value = x.filter((item) => item.slug==slug)
+      if (options.value.length <1)
+        options.value=x
     })
-    }
+}
 refresh()
 function submit() {
   fetchWrapper.postraw("/api/Validation", 
   {
     email: email.value,
     language: (locale.value && locale.value!="de"?locale.value:""),
-    purpose: purpose.value
+    purpose: options.value[purpose.value].purpose
   }).then(()=> {
     thanks.value = true
   })
@@ -37,17 +43,17 @@ function submit() {
 
 <template>
   <div>
-    <Header :title="(thanks?t('thankyou'):t('contactform.title'))" 
+    <Header :title="(thanks?t('thankyou'):(options.length==1?options[0].purpose:t('contactform.title')))" 
     :intro="(thanks?t('contactform.check_your_email'):t('contactform.intro'))" />
     <CleanContainer>
     <div v-if="!thanks">
       <div class="flex flex-col">
-        <div>
+        <div v-if="(options.length!=1)">
             <label for="purpose" class="block mb-2 text-sm font-medium text-skin-muted">
             {{t('contactform.who_to_contact')}} 
               </label>
             <select id="purpose" class="h-10 w-full p-2.5" v-model="purpose">
-                <option v-for="(option, index) in options" :key="index" :value="option">{{ option }}</option>
+                <option v-for="(option, index) in options" :key="index">{{ option.purpose }}</option>
             </select>
         </div>
         <div class="mt-6">

src/views/Templates.vue

@@ -54,6 +54,10 @@ function remove() {
       refresh()
     })
 }
+function copy() {  
+  delete openitem.value.id
+  openitem.value.purpose += " (copy)"
+}
 function submit() {
   if (openitem.value.id) {
     fetchWrapper.put("/api/template",openitem.value).then(()=>{
@@ -82,6 +86,9 @@ function submit() {
                 <th scope="col" class="px-6 py-3">
                   {{t('templates.active')}}
                 </th>
+                <th scope="col" class="px-2 py-3">
+                  {{t('templates.slug')}}  
+                </th>
                 <th scope="col" class="px-6 py-3">
                   {{t('templates.purpose')}}  
                 </th>
@@ -102,6 +109,7 @@ function submit() {
               <div v-if="item.active">+</div>
               <div v-else>-</div>
             </td>
+            <td class="px-6 py-4">{{ item.slug }}</td>
             <td class="px-6 py-4">{{ item.purpose }}</td>
             <td class="px-6 py-4">{{ item.to }}</td>
             <td class="px-6 py-4">{{ item.subject }}</td>
@@ -110,33 +118,38 @@ function submit() {
       </table>
     <div v-if="isopen" class="w-2/3 border-b bg-skin-light">
         <from> 
-          <div class="grid gap-6 mt-10 columns-2">
+          <div class="grid gap-6 mt-10 columns-3">
           <div class="flex items-center mt-6">
             <input checked id="checked-checkbox" type="checkbox" v-model="openitem.acitve" class="w-8 h-8 text-skin-accent bg-skin-light border-skin-light focus:ring-skin-focus focus:ring-2">
             <label for="checked-checkbox" class="ml-2 text-sm font-medium text-skin-muted ">{{t('templates.active')}}</label>
           </div>
           <div>
             <label for="purpose" class="block mb-2 text-sm font-medium text-skin-muted">{{t('templates.purpose_full')}}</label>
             <input type="text" v-model="openitem.purpose" id="purpose" class="block w-full p-2.5" placeholder="Purpose" required>
+          </div>          
+          <div>
+            <label for="slug" class="block mb-2 text-sm font-medium text-skin-muted">{{t('templates.slug')}}</label>
+            <input type="text" v-model="openitem.slug" id="slug" class="block w-full p-2.5" placeholder="Slug" required>
           </div>
-          <div class="col-span-2">
+          <div class="col-span-3">
             <label for="to" class="block mb-2 text-sm font-medium text-skin-muted">{{t('templates.to_full')}}</label>
             <input type="text" v-model="openitem.to" id="to" class="block w-full p-2.5" placeholder="To" required>
           </div>
-          <div class="col-span-2">
+          <div class="col-span-3">
             <label for="from" class="block mb-2 text-sm font-medium text-skin-muted">{{t('templates.from_full')}}</label>
             <input type="text" v-model="openitem.from" id="from" class="block w-full p-2.5" placeholder="From" required>
           </div>
-          <div class="col-span-2">
+          <div class="col-span-3">
             <label for="subject" class="block mb-2 text-sm font-medium text-skin-muted">{{t('templates.subject')}}</label>
             <input type="text" v-model="openitem.subject" id="subject" class="block w-full p-2.5" placeholder="Subject" required>
           </div>
-          <div class="col-span-2">
+          <div class="col-span-3">
             <label for="html" class="block mb-2 text-sm font-medium text-skin-muted">{{t('templates.text')}}</label>
             <textarea type="text" v-model="openitem.html" id="html" class="h-40  block w-full p-2.5" placeholder="Message text" required />
           </div>
-        <div class="flex justify-end col-span-2 mt-4">
+        <div class="flex justify-end col-span-3 mt-4">
           <ButtonSecondary cancel @click="cancel">{{t('cancel')}}</ButtonSecondary>
+          <ButtonSecondary submit @click="copy">{{t('copy')}}</ButtonSecondary>
           <ButtonSecondary submit @click="remove">{{t('delete')}}</ButtonSecondary>
           <ButtonPrimary submit @click="submit">{{t('OK')}}</ButtonPrimary>
         </div>

startup-backend.sh

@@ -0,0 +1,2 @@
+cd ./backend
+dotnet run backend.csproj