Skip to content
Permalink
Browse files

Episode 42 Complete

  • Loading branch information...
JeffreyWay committed Apr 16, 2019
1 parent 0cea5cb commit e7e3037d7a3c518c1f1037e11a699b8971328c3f
Showing with 75 additions and 13 deletions.
  1. +56 −0 resources/js/components/BirdboardForm.js
  2. +19 −13 resources/js/components/NewProjectModal.vue
@@ -0,0 +1,56 @@
class BirdboardForm {
constructor(data) {
this.originalData = JSON.parse(JSON.stringify(data));

Object.assign(this, data);

this.errors = {};
this.submitted = false;
}

data() {
return Object.keys(this.originalData).reduce((data, attribute) => {
data[attribute] = this[attribute];

return data;
}, {});
}

post(endpoint) {
return this.submit(endpoint);
}

patch(endpoint) {
return this.submit(endpoint, 'patch');
}

delete(endpoint) {
return this.submit(endpoint, 'delete');
}

submit(endpoint, requestType = 'post') {
return axios[requestType](endpoint, this.data())
.catch(this.onFail.bind(this))
.then(this.onSuccess.bind(this));
}

onSuccess(response) {
this.submitted = true;
this.errors = {};

return response;
}

onFail(error) {
this.errors = error.response.data.errors;
this.submitted = false;

throw error;
}

reset() {
Object.assign(this, this.originalData);
}
}

export default BirdboardForm;
@@ -12,18 +12,23 @@
type="text"
id="title"
class="border p-2 text-xs block w-full rounded"
:class="errors.title ? 'border-error' : 'border-muted-light'"
:class="form.errors.title ? 'border-error' : 'border-muted-light'"
v-model="form.title">

<span class="text-xs italic text-error" v-if="errors.title" v-text="errors.title[0]"></span>
<span class="text-xs italic text-error" v-if="form.errors.title" v-text="form.errors.title[0]"></span>
</div>

<div class="mb-4">
<label for="description" class="text-sm block mb-2">Description</label>

<textarea id="description" class="border border-muted-light p-2 text-xs block w-full rounded" rows="7" v-model="form.description"></textarea>
<textarea
id="description"
class="border border-muted-light p-2 text-xs block w-full rounded"
:class="form.errors.description ? 'border-error' : 'border-muted-light'"
rows="7"
v-model="form.description"></textarea>

<span class="text-xs italic text-error" v-if="errors.description" v-text="errors.description[0]"></span>
<span class="text-xs italic text-error" v-if="form.errors.description" v-text="form.errors.description[0]"></span>
</div>
</div>

@@ -60,32 +65,33 @@
</template>

<script>
import BirdboardForm from './BirdboardForm';
export default {
data() {
return {
form: {
form: new BirdboardForm({
title: '',
description: '',
tasks: [
{ body: ''},
]
},
errors: {}
})
};
},
methods: {
addTask() {
this.form.tasks.push({ value: '' });
this.form.tasks.push({ body: '' });
},
async submit() {
try {
location = (await axios.post('/projects', this.form)).data.message;
} catch (error) {
this.errors = error.response.data.errors;
if (! this.form.tasks[0].body) {
delete this.form.originalData.tasks;
}
this.form.submit('/projects')
.then(response => location = response.data.message);
}
}
}

0 comments on commit e7e3037

Please sign in to comment.
You can’t perform that action at this time.