Create Contact

Author: Andres Vargas

demo/models.py

@@ -34,7 +34,9 @@ class Contact(EntityMix):
 
     class Meta:
         ordering = ("first_name", "last_name")
-
+    @property
+    def name(self):
+        return f"{self.first_name} {self.last_name}"
     def __str__(self):
         return f"{self.first_name} {self.last_name}"
 

demo/static/src/Pages/Contacts.Create.vue

@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <h1 class="mb-8 font-bold text-3xl">
+      <inertia-link class="text-indigo-400 hover:text-indigo-600" :href="route('demo:contacts')">Contacts</inertia-link>
+      <span class="text-indigo-400 font-medium">/</span> Create
+    </h1>
+    <div class="bg-white rounded shadow overflow-hidden max-w-3xl">
+      <form @submit.prevent="submit">
+        <div class="p-8 -mr-6 -mb-8 flex flex-wrap">
+          <text-input v-model="form.first_name" :errors="$page.errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" />
+          <text-input v-model="form.last_name" :errors="$page.errors.last_name" class="pr-6 pb-8 w-full lg:w-1/2" label="Last name" />
+          <select-input v-model="form.organization_id" :errors="$page.errors.organization_id" class="pr-6 pb-8 w-full lg:w-1/2" label="Organization">
+            <option :value="null" />
+            <option v-for="organization in organizations" :key="organization.id" :value="organization.id">{{ organization.name }}</option>
+          </select-input>
+          <text-input v-model="form.email" :errors="$page.errors.email" class="pr-6 pb-8 w-full lg:w-1/2" label="Email" />
+          <text-input v-model="form.phone" :errors="$page.errors.phone" class="pr-6 pb-8 w-full lg:w-1/2" label="Phone" />
+          <text-input v-model="form.address" :errors="$page.errors.address" class="pr-6 pb-8 w-full lg:w-1/2" label="Address" />
+          <text-input v-model="form.city" :errors="$page.errors.city" class="pr-6 pb-8 w-full lg:w-1/2" label="City" />
+          <text-input v-model="form.region" :errors="$page.errors.region" class="pr-6 pb-8 w-full lg:w-1/2" label="Province/State" />
+          <select-input v-model="form.country" :errors="$page.errors.country" class="pr-6 pb-8 w-full lg:w-1/2" label="Country">
+            <option :value="null" />
+            <option value="CA">Canada</option>
+            <option value="US">United States</option>
+          </select-input>
+          <text-input v-model="form.postal_code" :errors="$page.errors.postal_code" class="pr-6 pb-8 w-full lg:w-1/2" label="Postal code" />
+        </div>
+        <div class="px-8 py-4 bg-gray-100 border-t border-gray-200 flex justify-end items-center">
+          <loading-button :loading="sending" class="btn-indigo" type="submit">Create Contact</loading-button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+import Layout from '../Shared/Layout'
+import LoadingButton from '../Shared/LoadingButton'
+import SelectInput from '../Shared/SelectInput'
+import TextInput from '../Shared/TextInput'
+
+export default {
+  metaInfo: { title: 'Create Contact' },
+  layout: Layout,
+  components: {
+    LoadingButton,
+    SelectInput,
+    TextInput,
+  },
+  props: {
+    organizations: Array,
+  },
+  remember: 'form',
+  data() {
+    return {
+      sending: false,
+      form: {
+        first_name: null,
+        last_name: null,
+        organization_id: null,
+        email: null,
+        phone: null,
+        address: null,
+        city: null,
+        region: null,
+        country: null,
+        postal_code: null,
+      },
+    }
+  },
+  methods: {
+    submit() {
+      this.sending = true
+      this.$inertia.post(this.route('demo:contacts.create'), this.form)
+        .then(() => this.sending = false)
+    },
+  },
+}
+</script>

demo/static/src/app.js

@@ -23,13 +23,15 @@ import Contacts from "./Pages/Contacts";
 import Organization from "./Pages/Organizations";
 import ContactEdit from "./Pages/Contacts.Edit";
 import OrganizationEdit from "./Pages/Organizations.Edit";
-
+import ContactCreate from "./Pages/Contacts.Create";
 const pages = {
   'Index': Index,
   'Contacts': Contacts,
   'Contacts.Edit': ContactEdit,
+  'Contacts.Create': ContactCreate,
   'Organizations': Organization,
   "Organizations.Edit": OrganizationEdit,
+  
 }
 
 new Vue({

demo/urls.py

@@ -2,6 +2,7 @@
 from django.urls import path
 from demo.views import index , contacts,organizations
 from demo.views import contact_edit, organization_edit
+from demo.views import contact_create
 
 app_name="demo"
 
@@ -12,7 +13,7 @@
     path('users/logout', index, name='logout'),
     path('users/edit/<int:id>', index, name='users.edit'),
     path('contacts/edit/<int:id>', contact_edit, name='contacts.edit'),
-    path('contacts/create/', index, name='contacts.create'),
+    path('contacts/create/', contact_create, name='contacts.create'),
     path('contacts', contacts, name='contacts'),
     path('organizations/edit/<int:id>', organization_edit, name='organizations.edit'),
     path('organizations/create/', organizations, name='organizations.create'),

demo/views.py

@@ -92,6 +92,26 @@ def contact_edit(request, id):
     }
     return render_inertia(request, "Contacts.Edit", props)
 
+def contact_create(request):
+    contact_schema = ContactSchema()
+    org_schema = OrganizationSchema(many=True, only=("id","name"))
+    orgs = Organization.objects.all()
+
+    if request.method == "POST":
+        try:
+            c = contact_schema.loads(request.body,  unknown=INCLUDE)
+            obj = Contact.objects.create(**c)
+        except ValidationError as err:
+            share_flash(request, error="Exists errors on form")
+            print(err)
+            share_flash(request, errors= err.messages)
+        else:
+            share_flash(request, success=f"Contact {obj.name} created")
+            return redirect(reverse("demo:contacts"))
+    props = {
+        'organizations': org_schema.dump(orgs)
+    }
+    return render_inertia(request, "Contacts.Create", props)
 
 
 def index(request):