Hook up Edit Project page

This commit is contained in:
Patrick Smith 2018-09-06 11:48:24 -04:00
parent 9c9374541b
commit c235e519fa
7 changed files with 129 additions and 193 deletions

View File

@ -1,7 +1,9 @@
from atst.database import db
from atst.domain.exceptions import NotFoundError
from atst.models.project import Project
from atst.domain.authz import Authorization
from atst.domain.environments import Environments
from atst.domain.exceptions import NotFoundError
from atst.models.permissions import Permissions
from atst.models.project import Project
class Projects(object):
@ -19,7 +21,10 @@ class Projects(object):
def get(cls, user, workspace, project_id):
# TODO: this should check permission for this particular project
Authorization.check_workspace_permission(
user, workspace, Permissions.VIEW_APPLICATION_IN_WORKSPACE,
user,
workspace,
Permissions.VIEW_APPLICATION_IN_WORKSPACE,
"view project in workspace",
)
try:

View File

@ -105,7 +105,7 @@ def new_project(workspace_id):
@bp.route("/workspaces/<workspace_id>/projects/new", methods=["POST"])
def update_project(workspace_id):
def create_project(workspace_id):
workspace = Workspaces.get_for_update(g.current_user, workspace_id)
form = NewProjectForm(http_request.form)
@ -126,6 +126,21 @@ def update_project(workspace_id):
)
@bp.route("/workspaces/<workspace_id>/projects/<project_id>/edit")
def edit_project(workspace_id, project_id):
workspace = Workspaces.get_for_update(g.current_user, workspace_id)
project = Projects.get(g.current_user, workspace, project_id)
form = NewProjectForm(
name=project.name,
environment_names=[env.name for env in project.environments],
description=project.description,
)
return render_template(
"workspaces/projects/edit.html", workspace=workspace, project=project, form=form
)
@bp.route("/workspaces/<workspace_id>/members/new")
def new_member(workspace_id):
workspace = Workspaces.get(g.current_user, workspace_id)

View File

@ -0,0 +1,86 @@
{% from "components/icon.html" import Icon %}
{% from "components/modal.html" import Modal %}
{% from "components/text_input.html" import TextInput %}
{% from "components/alert.html" import Alert %}
<new-project inline-template v-bind:initial-data='{{ form.data|tojson }}'>
{% set new_project = project is not defined %}
{% set form_action = url_for('workspaces.create_project', workspace_id=workspace.id) if new_project else url_for('workspaces.edit_project', workspace_id=workspace.id, project_id=project.id) %}
{% set action_text = 'Create' if new_project else 'Update' %}
{% set title_text = 'Add a new project' if new_project else 'Edit {} project'.format(project.name) %}
<form method="POST" action="{{ form_action }}" >
{% call Modal(name=modalName, dismissable=False) %}
<h1>{{ action_text }} project !{ name }</h1>
<p>
When you click <em>{{ action_text }} Project</em>, the environments
<span v-for="(environment, index) in environments">
<strong>!{environment.name}</strong><template v-if="index < (environments.length - 1)">, </template>
</span>
will be created as individual cloud resource groups under <strong>!{ name }</strong> project.
</p>
<div class='action-group'>
<button type='submit' class='action-group__action usa-button' tabindex='0'>{{ action_text }} Project</button>
<button type='button' v-on:click="closeModal('{{ modalName }}')" class='icon-link action-group__action' tabindex='0'>Cancel</button>
</div>
{% endcall %}
{{ form.csrf_token }}
<div class="panel">
<div class="panel__heading panel__heading--grow">
<h1>{{ title_text }}</h1>
</div>
<div class="panel__content">
<p>
AT-AT allows you to organize your workspace into multiple projects, each of which may have environments.
</p>
{{ TextInput(form.name) }}
{{ TextInput(form.description, paragraph=True) }}
</div>
</div>
{% if form.environment_names.errors %}
{% for error in form.environment_names.errors %}
{{ Alert(error, level="error") }}
{% endfor %}
{% endif %}
<div class="block-list project-list-item">
<header class="block-list__header block-list__header--grow">
<h2 class="block-list__title">Project Environments</h2>
<p>
Each environment created within a project is an enclave of cloud resources that is logically separated from each other for increased security.
</p>
</header>
<ul>
<li v-for="(environment, i) in environments" class="block-list__item project-edit__env-list-item">
<div class="usa-input">
<label :for="'environment_names-' + i">Environment Name</label>
<input type="text" :name="'environment_names-' + i" :id="'environment_names-' + i" v-model="environment.name">
</div>
<button v-on:click="removeEnvironment(i)" v-if="environments.length > 1" type="button" class='project-edit__env-list-item__remover'>
{{ Icon('trash') }}
<span>Remove</span>
</button>
</li>
</ul>
<div class="block-list__footer">
<button v-on:click="addEnvironment" class="icon-link" tabindex="0" type="button">Add another environment</button>
</div>
</div>
<div class="action-group">
<button v-on:click="openModal('{{ modalName }}')" class="usa-button usa-button-primary" tabindex="0" type="button">{{ action_text }} Project</button>
</div>
</div>
</form>
</new-project>

View File

@ -0,0 +1,17 @@
{% extends "workspaces/base.html" %}
{% from "components/alert.html" import Alert %}
{% from "components/icon.html" import Icon %}
{% block workspace_content %}
{{ Alert(
"UI Mock",
message="<p>Please note, this screen is a non-functional UI mockup.</p>",
level="warning"
) }}
{% set modalName = "updateProjectConfirmation" %}
{% include "fragments/edit_project_form.html" %}
{% endblock %}

View File

@ -1,108 +0,0 @@
{% extends "base_workspace.html.to" %}
{% from "components/alert.html" import Alert %}
{% block template_vars %}
{% set is_new_project = False %}
{% set project_name = "Code.mil" %}
{% set project_id = "789" %}
{% end %}
{% block workspace_content %}
{{ Alert(
"UI Mock",
message="<p>Please note, this screen is a non-functional UI mockup.</p>",
level="warning"
) }}
<form action=''>
<div class='panel'>
<div class='panel__heading'>
<h1 class='h2'>
{% if is_new_project %}
Add a new project
{% else %}
{{ project_name }}
<span class='subtitle'>Edit project</span>
{% end %}
</h1>
</div>
<div class='panel__content'>
<div class='usa-input'>
<label for='project-name'>Project Name</label>
<input id='project-name' type='text'/>
</div>
<div class='usa-input'>
<label for='project-description'>Description</label>
<textarea id='project-description'></textarea>
</div>
</div>
</div>
<section class='block-list'>
<header class='block-list__header'>
<h2 class='block-list__title'>Project Environments</h2>
</header>
{# All instances of .usa-input groups here should be replaced with {% module TextInput(wtforms.fields.Field) %} #}
<ul>
<li class='block-list__item project-edit__env-list-item'>
<div class='usa-input'>
<label for='environment-name-1'>Environment Name</label>
<input id='environment-name-1' type='text' placeholder="Environment 1" />
</div>
<button class='project-edit__env-list-item__remover'>
{% module Icon('trash') %}
<span>Remove</span>
</button>
</li>
<li class='block-list__item project-edit__env-list-item'>
<div class='usa-input'>
<label for='environment-name-2'>Environment Name</label>
<input id='environment-name-2' type='text' placeholder="Environment 2" />
</div>
<button class='project-edit__env-list-item__remover '>
{% module Icon('trash') %}
<span>Remove</span>
</button>
</li>
<li class='block-list__item project-edit__env-list-item'>
<div class='usa-input'>
<label for='environment-name-3'>Environment Name</label>
<input id='environment-name-3' type='text' placeholder="Environment 3" />
</div>
<button class='project-edit__env-list-item__remover'>
{% module Icon('trash') %}
<span>Remove</span>
</button>
</li>
</ul>
<footer class='block-list__footer'>
<a href='/' class='icon-link'>
{% module Icon('plus') %}
<span class="icon-link">Add another environment</span>
</a>
</footer>
</section>
<div class='action-group'>
<a href='/styleguide' class='action-group__action usa-button usa-button-big'>
{% if is_new_project %}Create{% else %}Save{% end %} Project
</a>
<a href='/styleguide' class='action-group__action icon-link'>
{% module Icon('x') %}
<span>Cancel</span>
</a>
</div>
</form>
{% end %}

View File

@ -25,7 +25,7 @@
<div class='block-list project-list-item'>
<header class='block-list__header'>
<h2 class='block-list__title'>{{ project.name }} ({{ project.environments|length }} environments)</h2>
<a class='icon-link' href='/workspaces/123456/projects/789/edit'>
<a class='icon-link' href='{{ url_for("workspaces.edit_project", workspace_id=workspace.id, project_id=project.id) }}'>
{{ Icon('edit') }}
<span>edit</span>
</a>

View File

@ -1,9 +1,3 @@
{% from "components/icon.html" import Icon %}
{% from "components/modal.html" import Modal %}
{% from "components/text_input.html" import TextInput %}
{% from "components/tooltip.html" import Tooltip %}
{% from "components/alert.html" import Alert %}
{% extends "workspaces/base.html" %}
{% block workspace_content %}
@ -18,79 +12,6 @@
) }}
{% endif %}
<new-project inline-template v-bind:initial-data='{{ form.data|tojson }}'>
<form method="POST" action="{{ url_for('workspaces.update_project', workspace_id=workspace.id) }}" >
{% call Modal(name=modalName, dismissable=False) %}
<h1>Create project !{ name }</h1>
{% include "fragments/edit_project_form.html" %}
<p>
When you click <em>Create Project</em>, the environments
<span v-for="(environment, index) in environments">
<strong>!{environment.name}</strong><template v-if="index < (environments.length - 1)">, </template>
</span>
will be created as individual cloud resource groups under <strong>!{ name }</strong> project.
</p>
<div class='action-group'>
<button type='submit' class='action-group__action usa-button' tabindex='0'>Create Project</button>
<button type='button' v-on:click="closeModal('{{ modalName }}')" class='icon-link action-group__action' tabindex='0'>Cancel</button>
</div>
{% endcall %}
{{ form.csrf_token }}
<div class="panel">
<div class="panel__heading panel__heading--grow">
<h1>Add a new project</h1>
</div>
<div class="panel__content">
<p>
AT-AT allows you to organize your workspace into multiple projects, each of which may have environments.
</p>
{{ TextInput(form.name) }}
{{ TextInput(form.description, paragraph=True) }}
</div>
</div>
{% if form.environment_names.errors %}
{% for error in form.environment_names.errors %}
{{ Alert(error, level="error") }}
{% endfor %}
{% endif %}
<div class="block-list project-list-item">
<header class="block-list__header block-list__header--grow">
<h2 class="block-list__title">Project Environments</h2>
<p>
Each environment created within a project is an enclave of cloud resources that is logically separated from each other for increased security.
</p>
</header>
<ul>
<li v-for="(environment, i) in environments" class="block-list__item project-edit__env-list-item">
<div class="usa-input">
<label :for="'environment_names-' + i">Environment Name</label>
<input type="text" :name="'environment_names-' + i" :id="'environment_names-' + i" v-model="environment.name">
</div>
<button v-on:click="removeEnvironment(i)" v-if="environments.length > 1" type="button" class='project-edit__env-list-item__remover'>
{{ Icon('trash') }}
<span>Remove</span>
</button>
</li>
</ul>
<div class="block-list__footer">
<button v-on:click="addEnvironment" class="icon-link" tabindex="0" type="button">Add another environment</button>
</div>
</div>
<div class="action-group">
<button v-on:click="openModal('{{ modalName }}')" class="usa-button usa-button-primary" tabindex="0" type="button">Create Project</button>
</div>
</div>
</form>
</new-project>
{% endblock %}