mirror of
https://github.com/indentlabs/notebook.git
synced 2025-10-26 11:19:22 +00:00
hook up collection#edit form
This commit is contained in:
drusepth
parent
5396ef5301
commit
f47a536f50
@ -1,180 +0,0 @@
|
||||
/*
|
||||
Usage:
|
||||
<%= react_component("PageCollectionCreationForm", {}) %>
|
||||
*/
|
||||
|
||||
import React from "react"
|
||||
import PropTypes from "prop-types"
|
||||
|
||||
import Stepper from '@material-ui/core/Stepper';
|
||||
import Step from '@material-ui/core/Step';
|
||||
import StepLabel from '@material-ui/core/StepLabel';
|
||||
import StepContent from '@material-ui/core/StepContent';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import Paper from '@material-ui/core/Paper';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
|
||||
class PageCollectionCreationForm extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
active_step: 0
|
||||
}
|
||||
|
||||
this.handleNext = this.handleNext.bind(this);
|
||||
this.handleBack = this.handleBack.bind(this);
|
||||
this.handleReset = this.handleReset.bind(this);
|
||||
}
|
||||
|
||||
handleNext() {
|
||||
this.setState({ active_step: this.state.active_step + 1 });
|
||||
};
|
||||
|
||||
handleBack() {
|
||||
this.setState({ active_step: this.state.active_step - 1 });
|
||||
};
|
||||
|
||||
handleReset() {
|
||||
this.setState({ active_step: 0 });
|
||||
};
|
||||
|
||||
classIcon(class_name) {
|
||||
return window.ContentTypeData[class_name].icon;
|
||||
}
|
||||
|
||||
classColor(class_name) {
|
||||
return window.ContentTypeData[class_name].color;
|
||||
}
|
||||
|
||||
steps() {
|
||||
return ['Basic information', 'Acceptable pages', 'Privacy settings'];
|
||||
}
|
||||
|
||||
getStepContent(step) {
|
||||
switch (step) {
|
||||
case 0:
|
||||
return(
|
||||
<div className="spaced-paragraphs">
|
||||
<Typography>
|
||||
Let's get started with some basic information.
|
||||
</Typography>
|
||||
<div className="input-field">
|
||||
<label>Collection title</label>
|
||||
<input type="text" name="page_collection[title]" />
|
||||
</div>
|
||||
<div className="input-field">
|
||||
<label>Subtitle <span className="grey-text">(optional)</span></label>
|
||||
<input type="text" name="page_collection[subtitle]" />
|
||||
</div>
|
||||
<div className="input-field">
|
||||
<label>Description</label>
|
||||
<input type="text" name="page_collection[description]" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="grey-text">Header image (optional)</p>
|
||||
<div className="file-field input-field">
|
||||
<div className="blue btn">
|
||||
<span>Upload</span>
|
||||
<input type="file" name="page_collection[header_image]" />
|
||||
</div>
|
||||
<div className="file-path-wrapper">
|
||||
<input className="file-path validate" type="text" placeholder="Upload an image" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="help-text">
|
||||
Supported file types: .png, .jpg, .jpeg, .gif
|
||||
</div>
|
||||
</div>
|
||||
<br /><br />
|
||||
</div>
|
||||
);
|
||||
case 1:
|
||||
return (
|
||||
<div>
|
||||
<Typography>
|
||||
Please check the types of pages you would like to allow in this collection. A small number of page types is recommended.
|
||||
</Typography>
|
||||
<div className="row">
|
||||
{this.props.all_content_types.map(function(type) {
|
||||
return(
|
||||
<p className="col s12 m6 l4">
|
||||
<label>
|
||||
<input name="page_collection[page_types[Universe]]" type="hidden" value="0" />
|
||||
<input type="checkbox" value="1" name="page_collection[page_types[Universe]]" />
|
||||
<span className="purple-text">
|
||||
<i className="material-icons left">language</i>
|
||||
Universes
|
||||
</span>
|
||||
</label>
|
||||
</p>
|
||||
);
|
||||
})}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
case 2:
|
||||
return (
|
||||
<div>
|
||||
<Typography>
|
||||
By default, all Collections are private. However, you can choose to make your Collection public at any time, and you can also choose to
|
||||
accept submissions from other users!
|
||||
</Typography>
|
||||
</div>
|
||||
);
|
||||
|
||||
default:
|
||||
return 'Unknown step';
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div className='card-panel'>
|
||||
<Stepper activeStep={this.state.active_step} orientation="vertical">
|
||||
{this.steps().map((label, index) => (
|
||||
<Step key={label}>
|
||||
<StepLabel>{label}</StepLabel>
|
||||
<StepContent>
|
||||
{this.getStepContent(index)}
|
||||
<div>
|
||||
<div>
|
||||
<Button
|
||||
disabled={this.state.active_step === 0}
|
||||
onClick={this.handleBack}
|
||||
>
|
||||
Back
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={this.handleNext}
|
||||
>
|
||||
{this.state.active_step === this.steps().length - 1 ? 'Finish' : 'Next'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</StepContent>
|
||||
</Step>
|
||||
))}
|
||||
</Stepper>
|
||||
{this.state.active_step === this.steps().length && (
|
||||
<Paper square elevation={0}>
|
||||
<Typography>All steps completed - you're finished!</Typography>
|
||||
<Button onClick={this.handleReset}>
|
||||
Reset
|
||||
</Button>
|
||||
</Paper>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
PageCollectionCreationForm.propTypes = {
|
||||
document_id: PropTypes.number
|
||||
};
|
||||
|
||||
export default PageCollectionCreationForm;
|
||||
@ -9,7 +9,7 @@
|
||||
|
||||
<a href="#" class="text-gray-600 hover:text-gray-800 hover:bg-gray-50 group rounded-md px-3 py-2 flex items-center text-sm font-medium">
|
||||
<i class="material-icons float-left -ml-1 mr-3">inbox</i>
|
||||
<span class="truncate">Privacy & Submissions</span>
|
||||
<span class="truncate">Submissions</span>
|
||||
</a>
|
||||
|
||||
<!--
|
||||
@ -26,23 +26,22 @@
|
||||
</svg>
|
||||
<span class="truncate"> Plan & Billing </span>
|
||||
</a>
|
||||
|
||||
-->
|
||||
<!--
|
||||
<a href="#" class="text-gray-900 hover:text-gray-900 hover:bg-gray-50 group rounded-md px-3 py-2 flex items-center text-sm font-medium">
|
||||
<svg class="text-gray-400 group-hover:text-gray-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<svg class="flex-shrink-0 -ml-1 mr-3 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
|
||||
</svg>
|
||||
<span class="truncate"> Team </span>
|
||||
<span class="truncate"> Collaborators </span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="text-gray-900 hover:text-gray-900 hover:bg-gray-50 group rounded-md px-3 py-2 flex items-center text-sm font-medium">
|
||||
<svg class="text-gray-400 group-hover:text-gray-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 14v6m-3-3h6M6 10h2a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2zm10 0h2a2 2 0 002-2V6a2 2 0 00-2-2h-2a2 2 0 00-2 2v2a2 2 0 002 2zM6 20h2a2 2 0 002-2v-2a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<i class="material-icons float-left -ml-1 mr-3"><%= User.icon %></i>
|
||||
<span class="truncate"> Followers </span>
|
||||
</a>
|
||||
|
||||
<a href="#" class="text-gray-900 hover:text-gray-900 hover:bg-gray-50 group rounded-md px-3 py-2 flex items-center text-sm font-medium">
|
||||
<svg class="text-gray-400 group-hover:text-gray-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<svg class="flex-shrink-0 -ml-1 mr-3 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 14v6m-3-3h6M6 10h2a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2zm10 0h2a2 2 0 002-2V6a2 2 0 00-2-2h-2a2 2 0 00-2 2v2a2 2 0 002 2zM6 20h2a2 2 0 002-2v-2a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<span class="truncate"> Integrations </span>
|
||||
@ -51,8 +50,21 @@
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<form action="#" method="POST" class="space-y-6 sm:px-6 lg:px-0 lg:col-span-9">
|
||||
<div class="shadow sm:rounded-md sm:overflow-hidden">
|
||||
<%# todo: audit usage of form_with and local:true %>
|
||||
<%= form_with(model: page_collection, local: true, class: 'sm:px-6 lg:px-0 lg:col-span-9') do |f| %>
|
||||
<% if page_collection.errors.any? %>
|
||||
<div id="error_explanation">
|
||||
<h2 style="font-size: 1.5em"><%= pluralize(page_collection.errors.count, "error") %> prohibited this Collection from being saved:</h2>
|
||||
|
||||
<ul class="browser-default">
|
||||
<% page_collection.errors.full_messages.each do |message| %>
|
||||
<li class="red-text"><%= message %></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class="shadow sm:rounded-md sm:overflow-hidden mb-8">
|
||||
<div class="bg-white py-6 px-4 space-y-6 sm:p-6">
|
||||
<div>
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900">Look & feel</h3>
|
||||
@ -75,21 +87,21 @@
|
||||
-->
|
||||
|
||||
<div class="col-span-3">
|
||||
<label for="title" class="block text-sm font-medium text-gray-700">Collection title</label>
|
||||
<input type="text" name="title" id="title" placeholder="My Awesome Collection" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-brown-500 focus:border-brown-500 sm:text-sm">
|
||||
<%= f.label :title, class: 'block text-sm font-medium text-gray-700' %>
|
||||
<%= f.text_field :title, placeholder: 'My Awesome Collection', class: 'mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-brown-500 focus:border-brown-500 sm:text-sm' %>
|
||||
</div>
|
||||
|
||||
<div class="col-span-3">
|
||||
<label for="subtitle" class="block text-sm font-medium text-gray-700">Subtitle</label>
|
||||
<input type="text" name="subtitle" id="subtitle" placeholder="Where my awesome stuff is" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-brown-500 focus:border-brown-500 sm:text-sm">
|
||||
<%= f.label :subtitle, class: 'block text-sm font-medium text-gray-700' %>
|
||||
<%= f.text_field :subtitle, placeholder: 'My favorite pages', class: 'mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-brown-500 focus:border-brown-500 sm:text-sm' %>
|
||||
</div>
|
||||
|
||||
<div class="col-span-3">
|
||||
<label for="about" class="block text-sm font-medium text-gray-700">Description</label>
|
||||
<%= f.label :description, class: 'block text-sm font-medium text-gray-700' %>
|
||||
<div class="mt-1">
|
||||
<textarea id="about" name="about" rows="3" class="shadow-sm focus:ring-brown-500 focus:border-brown-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md" placeholder="Write as little or as much as you'd like!"></textarea>
|
||||
<%= f.text_area :description, placeholder: "Write as little or as much as you'd like!", rows: 5, class: 'shadow-sm focus:ring-brown-500 focus:border-brown-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md' %>
|
||||
</div>
|
||||
<p class="mt-2 text-sm text-gray-500">Brief description for your collection. <code><strong></code> and <code><em></em></code> tags are supported.</p>
|
||||
<p class="mt-2 text-xs text-gray-500">Brief description for your collection. <code><strong></code> and <code><em></em></code> tags are supported.</p>
|
||||
</div>
|
||||
|
||||
<div class="col-span-3 -mb-6">
|
||||
@ -109,10 +121,10 @@
|
||||
<path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
<div class="flex text-sm text-gray-600">
|
||||
<label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-brown-600 hover:text-brown-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-brown-500">
|
||||
<%= f.label :header_image, class: 'relative cursor-pointer bg-white rounded-md font-medium text-brown-600 hover:text-brown-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-brown-500' do %>
|
||||
<span>Upload a file</span>
|
||||
<input id="file-upload" name="file-upload" type="file" class="sr-only">
|
||||
</label>
|
||||
<%= f.file_field :header_image, class: 'sr-only' %>
|
||||
<% end %>
|
||||
<p class="pl-1">to change your header</p>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500">PNG, JPG, GIF up to 10MB</p>
|
||||
@ -122,21 +134,21 @@
|
||||
|
||||
|
||||
<fieldset class="col-span-3">
|
||||
<legend class="text-base text-gray-900">Allowed page types</legend>
|
||||
<div class="mt-4 border-t border-b border-gray-200 divide-y divide-gray-200 grid grid-cols-3">
|
||||
<label class="block text-sm font-medium text-gray-700">Allowed page types</label>
|
||||
<div class="mt-2 border-t border-b border-gray-200 divide-y divide-gray-200 grid grid-cols-3">
|
||||
<%# todo: show user's ACTIVATED page types here and put the others behind an "all types" expander %>
|
||||
<% Rails.application.config.content_types[:all].each do |content_type| %>
|
||||
<div class="relative flex items-start py-4 col-span-1">
|
||||
<div class="mr-3 flex items-center h-5">
|
||||
<input id="<%= content_type.name %>" name="<%= content_type.name %>" type="checkbox" class="focus:ring-notebook-blue h-5 w-5 border-gray-300 rounded">
|
||||
</div>
|
||||
<div class="min-w-0 flex-1 text-sm">
|
||||
<label for="<%= content_type.name %>" class="font-medium text-gray-700 select-none">
|
||||
<i class="material-icons float-left <%= content_type.text_color %> mr-2 -mt-0.5">
|
||||
<%= content_type.icon %>
|
||||
</i>
|
||||
<div class="relative flex items-start py-2 col-span-1 text-sm">
|
||||
<%= f.label "page_types[#{content_type.name}]", class: 'font-medium text-gray-700 select-none' do %>
|
||||
<%= f.check_box "page_types[#{content_type.name}]", checked: page_collection.page_types.include?(content_type.name), class: 'focus:ring-notebook-blue h-6 w-6 border-gray-300 rounded mr-3 -mt-3' %>
|
||||
|
||||
<i class="material-icons <%= content_type.text_color %> mr-2 relative top-0.5">
|
||||
<%= content_type.icon %>
|
||||
</i>
|
||||
<span class="flex-1 relative -top-1">
|
||||
<%= content_type.name.pluralize %>
|
||||
</label>
|
||||
</div>
|
||||
</span>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
@ -144,44 +156,32 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
|
||||
<button type="submit" class="<%= PageCollection.color %> border border-transparent rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white hover:bg-brown-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brown-500">Save</button>
|
||||
<%= f.submit 'Save', class: "#{PageCollection.color} border border-transparent rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white hover:bg-brown-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brown-500" %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="shadow sm:rounded-md sm:overflow-hidden">
|
||||
<div class="bg-white py-6 px-4 space-y-6 sm:p-6">
|
||||
<div>
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900">Privacy & Submissions</h3>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
You can always add pages to your own collections.
|
||||
Collections are better with contributors!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="gap-6">
|
||||
|
||||
<fieldset class="my-6">
|
||||
<legend class="text-base font-medium text-gray-900">Visibility</legend>
|
||||
<p class="text-sm text-gray-500">This setting controls who can see this collection.</p>
|
||||
<div class="mt-4 space-y-4">
|
||||
<div class="flex items-center">
|
||||
<input id="public" name="push-notifications" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
||||
<label for="public" class="ml-3">
|
||||
<span class="inline-block text-sm font-medium text-gray-700">Public</span><span class="text-sm"> - Visible to anyone browsing collections</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<input id="by-url" name="push-notifications" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
||||
<label for="by-url" class="ml-3">
|
||||
<span class="inline-block text-sm font-medium text-gray-700">By URL</span><span class="text-sm"> - Visible to anyone with the URL</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<input id="private" name="push-notifications" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
||||
<label for="private" class="ml-3">
|
||||
<span class="inline-block text-sm font-medium text-gray-700">Private</span><span class="text-sm"> - Visible only to you</span>
|
||||
</label>
|
||||
</div>
|
||||
<%= f.label :privacy, class: 'block' do %>
|
||||
<%= f.radio_button :privacy, 'public', class: 'focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300' %>
|
||||
<span class="inline-block ml-2 text-sm font-medium text-gray-700">Public</span><span class="text-sm"> - Visible to anyone browsing collections</span>
|
||||
<% end %>
|
||||
<%= f.label :privacy, class: 'block' do %>
|
||||
<%= f.radio_button :privacy, 'private', class: 'focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300' %>
|
||||
<span class="inline-block ml-2 text-sm font-medium text-gray-700">Private</span><span class="text-sm"> - Visible only to you</span>
|
||||
<% end %>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
@ -189,33 +189,33 @@
|
||||
<legend class="text-base font-medium text-gray-900">Page submissions</legend>
|
||||
<div class="my-4 space-y-4">
|
||||
<div class="flex items-start">
|
||||
<div class="h-5 flex items-center">
|
||||
<input id="comments" name="comments" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
|
||||
</div>
|
||||
<div class="ml-3 text-sm">
|
||||
<label for="comments" class="font-medium text-gray-700">Allow submissions from other users</label>
|
||||
<p class="text-gray-500">Submissions are added to a review queue for you to approve or deny.</p>
|
||||
<div class="text-sm items-center">
|
||||
<%= f.label :allow_submissions, class: 'font-medium text-gray-700' do %>
|
||||
<%= f.check_box :allow_submissions, class: 'mr-2 focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded' %>
|
||||
Allow submissions from other users
|
||||
<p class="text-gray-500 ml-7">Submissions are added to a review queue for you to approve or deny.</p>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ml-6">
|
||||
<div class="ml-7">
|
||||
<label for="about" class="block text-sm font-medium text-gray-700">Submission guidelines</label>
|
||||
<div class="mt-1">
|
||||
<textarea id="about" name="about" rows="3" class="shadow-sm focus:ring-brown-500 focus:border-brown-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md" placeholder="Write as little or as much as you'd like!"></textarea>
|
||||
</div>
|
||||
<p class="mt-2 text-sm text-gray-500">
|
||||
What kinds of pages are you looking for? This prompt will be shown to users who are about to submit a page.
|
||||
<p class="mt-2 text-xs text-gray-500">
|
||||
What kinds of pages are you looking for? Anything you write here will be shown to users who are about to submit a page.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex items-start">
|
||||
<div class="h-5 flex items-center">
|
||||
<input id="candidates" name="candidates" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
|
||||
</div>
|
||||
<div class="ml-3 text-sm">
|
||||
<label for="candidates" class="font-medium text-gray-700">Auto-accept all submissions</label>
|
||||
<p class="text-gray-500">Submissions will skip the review queue and automatically publish.</p>
|
||||
<div class="text-sm items-center">
|
||||
<%= f.label :auto_accept, class: 'font-medium text-gray-700' do %>
|
||||
<%= f.check_box :auto_accept, class: 'mr-2 focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded' %>
|
||||
Auto-accept all submissions
|
||||
<p class="text-gray-500 ml-7">Submissions will skip the review queue and automatically publish.</p>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -224,143 +224,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
|
||||
<button type="submit" class="<%= PageCollection.color %> border border-transparent rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white hover:bg-brown-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brown-500">Save</button>
|
||||
<%= f.submit 'Save', class: "#{PageCollection.color} border border-transparent rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white hover:bg-brown-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brown-500" %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<%# react_component("PageCollectionCreationForm", {
|
||||
all_content_types: Rails.application.config.content_types[:all].map(&:name),
|
||||
active_content_types: page_collection.page_types
|
||||
}) %>
|
||||
|
||||
<%= form_with(model: page_collection, local: true) do |f| %>
|
||||
<% if page_collection.errors.any? %>
|
||||
<div id="error_explanation">
|
||||
<h2 style="font-size: 1.5em"><%= pluralize(page_collection.errors.count, "error") %> prohibited this Collection from being saved:</h2>
|
||||
|
||||
<ul class="browser-default">
|
||||
<% page_collection.errors.full_messages.each do |message| %>
|
||||
<li class="red-text"><%= message %></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="card-title">Basic information</div>
|
||||
|
||||
<div class="input-field">
|
||||
<%= f.label :title %>
|
||||
<%= f.text_field :title %>
|
||||
</div>
|
||||
|
||||
<div class="input-field">
|
||||
<%= f.label :subtitle %>
|
||||
<%= f.text_field :subtitle %>
|
||||
</div>
|
||||
|
||||
<div class="input-field">
|
||||
<%= f.label :description %>
|
||||
<%= f.text_field :description %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="card-title">Header image</div>
|
||||
|
||||
<div>
|
||||
<label>This image will be used as a header for the page.</label>
|
||||
<div class="file-field input-field">
|
||||
<div class="blue btn">
|
||||
<span>Upload</span>
|
||||
<%= f.file_field :header_image %>
|
||||
</div>
|
||||
<div class="file-path-wrapper">
|
||||
<input class="file-path validate" type="text" placeholder="Upload an image">
|
||||
</div>
|
||||
</div>
|
||||
<div class="help-text">
|
||||
Supported file types: .png, .jpg, .jpeg, .gif
|
||||
</div>
|
||||
<div class="help-text">
|
||||
Don't forget to save your changes below for any new upload to take effect.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="card-title">Acceptable pages</div>
|
||||
|
||||
<p class="grey-text">
|
||||
Please check the types of pages you'll allow to be submitted or added to this in this collection. A small number of page types is recommended.
|
||||
You can change this at any time.
|
||||
</p>
|
||||
<br />
|
||||
|
||||
<div class="row">
|
||||
<% Rails.application.config.content_types[:all].each do |content_type| %>
|
||||
<p class="col s12 m6 l4">
|
||||
<label>
|
||||
<%= f.check_box "page_types[#{content_type.name}]", checked: page_collection.page_types.include?(content_type.name) %>
|
||||
<span class="<%= content_type.text_color %>">
|
||||
<i class="material-icons left"><%= content_type.icon %></i>
|
||||
<%= content_type.name.pluralize %>
|
||||
</span>
|
||||
</label>
|
||||
</p>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="card-title">Privacy & collaboration</div>
|
||||
|
||||
<div>
|
||||
<label>
|
||||
Make this collection...
|
||||
<%= f.select :privacy, [["Private", "private"], ["Public", "public"]] %>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<div>
|
||||
If you choose to make this collection public, you can also use the following controls:
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<div>
|
||||
<label>
|
||||
<%= f.check_box :allow_submissions %>
|
||||
<span class="black-text">
|
||||
Allow other users to submit pages to this collection. You can then choose to approve or deny those submissions.
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>
|
||||
<%= f.check_box :auto_accept %>
|
||||
<span class="black-text">
|
||||
Automatically approve all incoming submissions.
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<%= f.submit nil, class: "btn #{PageCollection.color} white-text" %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
@ -6,10 +6,25 @@
|
||||
<%= render 'form', page_collection: @page_collection %>
|
||||
</div>
|
||||
|
||||
<%=
|
||||
link_to 'Delete this page collection',
|
||||
@page_collection,
|
||||
method: :DELETE,
|
||||
class: 'btn btn-flat red-text right',
|
||||
data: { confirm: "Are you sure? This will PERMANENTLY delete this entire collection! It cannot be undone!" }
|
||||
%>
|
||||
|
||||
<%# todo maybe move this to a Danger Zone tab on the form, if persisted? %>
|
||||
<div class="max-w-7xl mx-auto my-16">
|
||||
<div class="md:grid md:grid-cols-3 md:gap-6">
|
||||
<div class="md:col-span-1">
|
||||
<div class="px-4 sm:px-0">
|
||||
<h3 class="text-lg font-medium leading-6 text-gray-900">Administrative actions</h3>
|
||||
<p class="mt-1 text-sm text-gray-600">These actions are only shown to you, the owner.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 md:mt-0 md:col-span-2">
|
||||
<%=
|
||||
link_to 'Permanently this page collection',
|
||||
@page_collection,
|
||||
method: :DELETE,
|
||||
class: 'bg-red-500 px-4 py-2 text-white rounded',
|
||||
data: { confirm: "Are you sure? This will PERMANENTLY delete this entire collection! It cannot be undone!" }
|
||||
%>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user