Organization CRUD

Author: Andres Vargas

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

@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <h1 class="mb-8 font-bold text-3xl">
+      <inertia-link class="text-indigo-400 hover:text-indigo-600" :href="route('demo:organizations')">Organizations</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.name" :errors="$page.errors.name" class="pr-6 pb-8 w-full lg:w-1/2" label="Name" />
+          <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 Organization</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 Organization' },
+  layout: Layout,
+  components: {
+    LoadingButton,
+    SelectInput,
+    TextInput,
+  },
+  remember: 'form',
+  data() {
+    return {
+      sending: false,
+      form: {
+        name: 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:organizations.create'), this.form)
+        .then(() => this.sending = false)
+    },
+  },
+}
+</script>

demo/static/src/app.js

@@ -24,16 +24,20 @@ import Organization from "./Pages/Organizations";
 import ContactEdit from "./Pages/Contacts.Edit";
 import OrganizationEdit from "./Pages/Organizations.Edit";
 import ContactCreate from "./Pages/Contacts.Create";
+import OrganizationCreate from "./Pages/Organizations.Create";
+
+
 const pages = {
   'Index': Index,
   'Contacts': Contacts,
   'Contacts.Edit': ContactEdit,
   'Contacts.Create': ContactCreate,
   'Organizations': Organization,
   "Organizations.Edit": OrganizationEdit,
-  
+  "Organizations.Create": OrganizationCreate
 }
 
+
 new Vue({
   render: h => h(InertiaApp, {
     props: {

demo/urls.py

@@ -2,7 +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
+from demo.views import contact_create, organization_create
 
 app_name="demo"
 
@@ -16,7 +16,7 @@
     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'),
+    path('organizations/create/', organization_create, name='organizations.create'),
     path('organizations', organizations, name='organizations'),
     path('dashboard', index, name='dashboard'),
     path('', index, name='index'),

demo/views.py

@@ -12,13 +12,30 @@
 from marshmallow import  INCLUDE, ValidationError
 
 
+def organization_create(request):
+    props = {}
+    org_schema = OrganizationSchema()
+
+    if request.method == "POST":
+        try:
+            data = org_schema.loads(request.body)
+            obj = Organization.objects.create(**data)
+        except ValidationError as err:
+            share_flash(request, error="Exists errors on form")
+            share_flash(request, errors= err.messages)
+        else:
+            share_flash(request, success=f"Organization {obj.name} created")
+            return redirect(reverse("demo:organizations"))
+    return render_inertia(request, "Organizations.Create", {})
+
+
 def organization_edit(request, id):
     organization = Organization.objects.get(id=id)
     schema = OrganizationSchema()
 
     if request.method == "POST":
         try:
-            schema.loads(request.body)
+            data = schema.loads(request.body)
         except ValidationError as err:
             share_flash(request, error="Exists errors on form")
             share_flash(request, errors= err.messages)
@@ -124,7 +141,7 @@ def contact_create(request):
             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")