You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

223 lines
7.5 KiB

<template lang="pug">
div(v-cloak="")
section.hero.project-image
div.container
div.columns
div.column.is-10.is-offset-1
h1.title.is-1.has-text-white Hello, {{ username | title }}.
h2.subtitle.is-4.has-text-white I hope you are having a great day!
p(v-if="isSuperuser")
a.button.is-medium.is-primary(v-on:click="isActive = !isActive") Create Project
div.modal(v-bind:class="{ 'is-active': isActive }")
div.modal-background
div.modal-card
header.modal-card-head
p.modal-card-title Create Project
button.delete(aria-label="close", v-on:click="isActive = !isActive")
section.modal-card-body
div.field
label.label Project Name
div.control
input.input(v-model="projectName", type="text", required, placeholder="Project name")
p.help.is-danger {{ projectNameError }}
div.field
label.label Description
div.control
textarea.textarea(v-model="description", required, placeholder="Project description")
p.help.is-danger {{ descriptionError }}
div.field
label.label Project Type
div.control
select(v-model="projectType", name="project_type", required)
option(value="", selected="selected") ---------
option(value="DocumentClassification") document classification
option(value="SequenceLabeling") sequence labeling
option(value="Seq2seq") sequence to sequence
p.help.is-danger {{ projectTypeError }}
footer.modal-card-foot.pt20.pb20.pr20.pl20.has-background-white-ter
button.button.is-primary(v-on:click="create()") Create
button.button(v-on:click="isActive = !isActive") Cancel
div.modal(v-bind:class="{ 'is-active': isDelete }")
div.modal-background
div.modal-card
header.modal-card-head
p.modal-card-title Delete Project
button.delete(aria-label="close", v-on:click="isDelete = !isDelete")
section.modal-card-body Are you sure you want to delete project?
footer.modal-card-foot.pt20.pb20.pr20.pl20.has-background-white-ter
button.button.is-danger(v-on:click="deleteProject()") Delete
button.button(v-on:click="isDelete = !isDelete") Cancel
section.hero
div.container
div.columns
div.column.is-10.is-offset-1
div.card.events-card
header.card-header
p.card-header-title {{ items.length }} Projects
div.field.card-header-icon
div.control
div.select
select(v-model="selected")
option(selected) All Project
option Text Classification
option Sequence Labeling
option Seq2seq
div.card-table
div.content
table.table.is-fullwidth
tbody
tr(v-for="project in selectedProjects", v-bind:key="project.id")
td.pl15r
div.thumbnail-wrapper.is-vertical
img.project-thumbnail(
v-bind:src="project.image"
alt="Project thumbnail"
)
div.dataset-item__main.is-vertical
div.dataset-item__main-title
div.dataset-item__main-title-link.dataset-item__link
a.has-text-black(v-bind:href="'/projects/' + project.id")
| {{ project.name }}
div.dataset-item__main-subtitle {{ project.description }}
div.dataset-item__main-info
span.dataset-item__main-update updated
span {{ project.updated_at | daysAgo }}
td.is-vertical
span.tag.is-normal {{ project.project_type }}
td.is-vertical(v-if="isSuperuser")
a(v-bind:href="'/projects/' + project.id + '/docs'") Edit
td.is-vertical(v-if="isSuperuser")
a.has-text-danger(v-on:click="setProject(project)") Delete
</template>
<script>
import axios from 'axios';
import { title, daysAgo } from './filter';
axios.defaults.xsrfCookieName = 'csrftoken';
axios.defaults.xsrfHeaderName = 'X-CSRFToken';
const baseUrl = window.location.href.split('/').slice(0, 3).join('/');
export default {
filters: { title, daysAgo },
data: () => ({
items: [],
isActive: false,
isDelete: false,
project: null,
selected: 'All Project',
projectName: '',
description: '',
projectType: '',
descriptionError: '',
projectTypeError: '',
projectNameError: '',
username: '',
isSuperuser: false,
}),
computed: {
selectedProjects() {
return this.items.filter(item => this.selected === 'All Project' || this.matchType(item.project_type));
},
},
created() {
Promise.all([
axios.get(`${baseUrl}/v1/projects`),
axios.get(`${baseUrl}/v1/me`),
]).then(([projects, me]) => {
this.items = projects.data;
this.username = me.data.username;
this.isSuperuser = me.data.is_superuser;
});
},
methods: {
deleteProject() {
axios.delete(`${baseUrl}/v1/projects/${this.project.id}`).then(() => {
this.isDelete = false;
const index = this.items.indexOf(this.project);
this.items.splice(index, 1);
});
},
setProject(project) {
this.project = project;
this.isDelete = true;
},
matchType(projectType) {
if (projectType === 'DocumentClassification') {
return this.selected === 'Text Classification';
}
if (projectType === 'SequenceLabeling') {
return this.selected === 'Sequence Labeling';
}
if (projectType === 'Seq2seq') {
return this.selected === 'Seq2seq';
}
return false;
},
create() {
const payload = {
name: this.projectName,
description: this.description,
project_type: this.projectType,
guideline: 'Please write annotation guideline.',
resourcetype: this.resourceType(),
};
axios.post(`${baseUrl}/v1/projects`, payload)
.then((response) => {
window.location = `${baseUrl}/projects/${response.data.id}/docs/create`;
})
.catch((error) => {
this.projectTypeError = '';
this.projectNameError = '';
this.descriptionError = '';
if ('resourcetype' in error.response.data) {
this.projectTypeError = error.response.data.resourcetype;
}
if ('name' in error.response.data) {
this.projectNameError = error.response.data.name[0];
}
if ('description' in error.response.data) {
this.descriptionError = error.response.data.description[0];
}
});
},
resourceType() {
if (this.projectType === 'DocumentClassification') {
return 'TextClassificationProject';
}
if (this.projectType === 'SequenceLabeling') {
return 'SequenceLabelingProject';
}
if (this.projectType === 'Seq2seq') {
return 'Seq2seqProject';
}
return '';
},
},
};
</script>