Initial Commit

Author: astarrh

Project/__init__.py

@@ -0,0 +1,22 @@
+import json
+
+from django.views.decorators.csrf import ensure_csrf_cookie
+from django.http import JsonResponse
+
+from .forms import MODEL_FORMS
+
+
+@ensure_csrf_cookie
+def create_object(request):
+    form_data = json.loads(request.body)
+    model_class = form_data.pop('model')
+    model_form = MODEL_FORMS[model_class](form_data)
+
+    result = {'success': False}
+    if model_form.is_valid():
+        model_form.save()
+        result["success"] = True
+    else:
+        result["errors"] = model_form.errors.as_json()
+
+    return JsonResponse(result)

Project/actions.py

@@ -0,0 +1,6 @@
+from django.contrib import admin
+
+from .models import Project, Resource, Article, Author
+
+admin.site.register(Project)
+admin.site.register(Resource)

Project/admin.py

@@ -0,0 +1,5 @@
+from django.apps import AppConfig
+
+
+class ProjectConfig(AppConfig):
+    name = 'Project'

Project/apps.py

@@ -0,0 +1,31 @@
+from django.forms import ModelForm
+
+from .models import Project, Resource, Binder
+
+
+class ProjectForm(ModelForm):
+
+    class Meta:
+        model = Project
+        fields = ['name',]
+
+
+class BinderForm(ModelForm):
+
+    class Meta:
+        model = Binder
+        fields = ['name',]
+
+
+class ResourceForm(ModelForm):
+
+    class Meta:
+        model = Resource
+        fields = ['url',]
+
+
+MODEL_FORMS = {
+    "project": ProjectForm,
+    "binder": BinderForm,
+    "resource": ResourceForm
+}

Project/forms.py

@@ -0,0 +1,30 @@
+# Generated by Django 3.1.3 on 2020-11-24 01:40
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Project',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=24)),
+            ],
+        ),
+        migrations.CreateModel(
+            name='Resource',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('url', models.URLField()),
+                ('project', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='Project.project')),
+            ],
+        ),
+    ]

Project/migrations/0001_initial.py

@@ -0,0 +1,38 @@
+# Generated by Django 3.1.3 on 2020-11-24 01:53
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('Project', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Author',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=64)),
+                ('slug', models.CharField(default='', max_length=64)),
+            ],
+        ),
+        migrations.AddField(
+            model_name='project',
+            name='slug',
+            field=models.SlugField(default=1),
+            preserve_default=False,
+        ),
+        migrations.CreateModel(
+            name='Article',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=64)),
+                ('content', models.TextField()),
+                ('slug', models.CharField(default='', max_length=64)),
+                ('author', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='Project.author')),
+            ],
+        ),
+    ]

Project/migrations/0002_auto_20201123_1753.py

@@ -0,0 +1,22 @@
+# Generated by Django 3.1.3 on 2020-11-24 19:46
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('Project', '0002_auto_20201123_1753'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Binder',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=36)),
+                ('project', models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.SET_NULL, to='Project.project')),
+            ],
+        ),
+    ]

Project/migrations/0003_binder.py

@@ -0,0 +1,39 @@
+from django.db import models
+
+
+class Project(models.Model):
+    name = models.CharField(max_length=24)
+    slug = models.SlugField()
+
+    def __str__(self):
+        return self.name
+
+
+class Binder(models.Model):
+    name = models.CharField(max_length=36)
+    project = models.ForeignKey(Project, blank=True, null=True, on_delete=models.SET_NULL)
+
+
+class Resource(models.Model):
+    url = models.URLField()
+    project = models.ForeignKey(Project, on_delete=models.CASCADE)
+
+
+class Article(models.Model):
+    """Table schema to store articles."""
+    name = models.CharField(max_length=64)
+    author = models.ForeignKey('Author', on_delete=models.CASCADE)
+    content = models.TextField()
+    slug = models.CharField(default='', max_length=64)
+
+    def __str__(self):
+        return '%s' % self.name
+
+
+class Author(models.Model):
+    """Table schema to store auhtors."""
+    name = models.CharField(max_length=64)
+    slug = models.CharField(default='', max_length=64)
+
+    def __str__(self):
+        return '%s' % self.name

Project/migrations/__init__.py

@@ -0,0 +1,71 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+
+    <title>Django and Vue.js</title>
+    <style>
+      .router-link-active {
+        color: black;
+        text-decoration: none;
+      }
+    </style>
+  </head>
+  <body class="bg-light">
+    <div class="bg-white container">
+
+      <div class="jumbotron">
+        <h1 class="display-4">Django and Vue.js</h1>
+        <p class="lead">
+          Wouldn’t it be cool if you could prototype a custom web application that’s responsive (mobile ready), reactive (light-speed fast), with a full–featured back office site to manage the content; all of that in no time? Actually, with a mashup between Django’s and Vue.js, you can! 😁
+        </p>
+      </div>
+
+      <!-- Content -->
+      <div id="myapp">
+        <nav class="navbar navbar-expand-lg navbar-light bg-light">
+          <ul class="navbar-nav mr-auto">
+            <li class="nav-item">
+              <router-link
+                class="nav-link text-primary"
+                to="/author/"
+              >
+                Go to Authors
+              </router-link>
+            </li>
+            <li class="nav-item">
+              <router-link
+                class="nav-link text-primary"
+                to="/article/"
+              >
+                Go to Articles
+              </router-link>
+            </li>
+          </ul>
+        </nav>
+        <br />
+        <router-view></router-view>
+      </div>
+    </div>
+
+    <!-- Vue.js -->
+    <script src="https://unpkg.com/vue"></script>
+    <script src="https://unpkg.com/vue-router"></script>
+    <script src="https://unpkg.com/vuex"></script>
+
+    {% include 'vue/template.vue' %}
+
+    <!-- Vue app -->
+
+
+    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
+  </body>
+</html>

Project/models.py

@@ -0,0 +1,34 @@
+{%  load static %}
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  </head>
+
+  <body>
+
+  <div id="projects">
+      <h1>Triage</h1>
+
+      <div id="triageApp">
+        <project-list></project-list>
+      </div>
+  </div>
+   <!-- Vue.js -->
+   <script src="https://unpkg.com/vue@next"></script>
+   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <script>
+        axios.defaults.xsrfCookieName = 'csrftoken'
+        axios.defaults.xsrfHeaderName = "X-CSRFTOKEN"
+    </script>
+
+    {% include 'vue/triage.vue' %}
+    {% include 'scripts/triage.html' %}
+
+    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
+  </body>
+
+</html>

Project/templates/__init__.py

@@ -0,0 +1,82 @@
+<script>
+
+  // store
+  const store = new Vuex.Store({
+    state: {
+        authors: [
+        {% for author in authors %}
+            {
+              name: '{{ author.name }}',
+              slug: '{{ author.slug }}',
+              bio: 'Generic Bio'
+            },
+        {% endfor %}
+        ],
+        articles: [
+        {% for article in articles %}
+            {
+              content: '{{ article.content | linebreaksbr }}',
+              name: '{{ article.name }}',
+              slug: '{{ article.slug }}',
+            },
+        {% endfor %}
+        ],
+    },
+    getters: {
+      getArticleBySlug: (state) => (slug) => {
+        return state.articles.find(articles => articles.slug === slug)
+      },
+      getAuthorBySlug: (state) => (slug) => {
+        return state.authors.find(authors => authors.slug === slug)
+      },
+    }
+  });
+
+  // components
+  ArticleList = Vue.component('article-list', {
+    data: function () { return { articles: store.state.articles } },
+    template: '#article-list-template',
+  });
+
+  AuthorList = Vue.component('author-list', {
+    data: function () { return { authors: store.state.authors } },
+    template: '#author-list-template',
+  });
+
+  ArticleItem = Vue.component('article-item', {
+    delimiters: ['[[', ']]'],
+    props: ['name', 'slug', 'content'],
+    template: '#article-item-template',
+  });
+
+  AuthorItem = Vue.component('author-item', {
+    delimiters: ['[[', ']]'],
+    props: ['name', 'slug', 'bio'],
+    template: '#author-item-template',
+    methods: {
+        reverseName: function() {
+            this.name = this.name.split('').reverse().join('')
+        }
+    }
+  });
+
+  // router
+  const routes = [
+    { component: ArticleList, path: '/article/', },
+    { component: AuthorList,  path: '/author/',  },
+    { component: ArticleItem, path: '/article/:slug/', },
+    { component: AuthorItem,  path: '/author/:slug/',  },
+  ]
+
+  const router = new VueRouter({
+    mode: 'history',
+    routes: routes,
+  })
+
+  // app
+  const vm = new Vue({
+      router,
+      store,
+  }).$mount('#myapp');
+
+</script>