GSoC 2020 Proposal
Prabhleen Kaur
MB username: Sehaj
E-mail: prabhleenkaur.sehaj@gmail.com
Github: prabhleenkaur1007
Town, Country: Delhi, India
Time Zone: (GMT+05:30) Kolkata
Design and Implement a Unified creation form
Overview:
The current design of forms for create pages lack the straightforward, simplified, error-free editing of entities. It has a complex workflow and produces redundant data. Such a workflow should rather be complete and simple for users to limit clutter (For example: Under present scenario the title of the work is repeated in edition and edition-groups).
My aim is to improve the user-experience, add necessary and complete information with reduce repetition.
I will use the following frameworks for development:
Node.js, React, Semantic UI, Bootstrap
I plan to add the following features:
- A Book(single work or collection) can now be created having an author, publisher, edition and additional information like alias, identifier and disambiguation in a single straight manner.
- More than one edition can be added at the time of book creation or while editing.
- If a client adds a book by an author, then the backend will link the entities and hence add relevant relationship.
- At the time of creation, if any author or publisher already exists, then the details are not required to be added again (though the user can edit them any time), otherwise the client will have to create a new one first.
All the backend code required for this is already present in the current forms, it just needs a refactoring, some addition and some deletion.
Full Description:
ā¢ Here the type of the book will include: novel, magazine, leaflet etc.
This part will reuse the function WorkAttributes under src/cient/components/pages/entities/work.js
.
ā¢ Now the server asks what type of book user wants to enter:
- If it is a
single
work, then client will be asked to enter the details on the next page. - If it is a
collection
, then client will be asked about the number of authors.
a. If the author issame
for all works then, the client will be asked to enter their names.
b. If the authors aredifferent
the client will be asked to enter the work name along with author.
This page will create new const for storing the number of works in book (single or collection), and reuse the existing for the author type. (person or group)
Add getNumTypeAttribute
in src/client/helpers/entity.js
:
export function getNumTypeAttribute(workNumtype){
return {data: extractAttribute(workNumtype, 'label'), title: 'Number of Works'};
}
function BookAttributes({book, work, author}) {
if (book.deleted) {
return deletedEntityMessage;
}
const numOfWorks = getNumTypeAttribute(work.workNumType).data;
const authorType = getTypeAttribute(author.authorType).data;
const type = getTypeAttribute(book.bookType).data;
const languages = getLanguageAttribute(book).data;
const sortNameOfDefaultAlias = getSortNameOfDefaultAlias(book);
return (
<div>
<Row>
<Col md={2}>
<dl>
<dt>Sort Name</dt>
<dd>{sortNameOfDefaultAlias}</dd>
</dl>
</Col>
<Col md={2}>
<dl>
<dt>Type</dt>
<dd>{type}</dd>
</dl>
</Col>
<Col md={2}>
<dl>
<dt>Language</dt>
<dd>{languages}</dd>
</dl>
</Col>
<Col md={2}>
<dl>
<dt>Number Of Works</dt>
<dd>{numOfWorks}</dd>
</dl>
</Col>
<Col md={2}>
<dl>
<dt>Author Type</dt>
<dd>{authorType}</dd>
</dl>
</Col>
</Row>
</div>
);
}
BookAttributes.displayName = 'BookAttributes';
BookAttributes.propTypes = {
book: PropTypes.object.isRequired
};
ā¢ Next, the author and publisher can be created using +New
button or if they already exists, then it can be searched.
For an anthology by different authors (collection of works), the name on the cover page can be any one of them.
All the information to be input on this page will come from following sources:
src/client/entity-editor/validators/base.js
export function validateRequiredString(value: any): boolean {
if (!_.isString(value)) {
return false;
}return Boolean(value);
}
src/client/entity-editor/validators/common.js
export function validateNameSectionName(value: any): boolean {
return validateRequiredString(value);
}
src/client/entity-editor/validators/author.js
export function validateForm(
formData: any, identifierTypes?: ?Array<_IdentifierType>
): boolean {
const conditions = [
validateAliases(get(formData, āaliasEditorā, {})),
validateIdentifiers(
get(formData, āidentifierEditorā, {}), identifierTypes
),
validateNameSection(get(formData, ānameSectionā, {})),
validateAuthorSection(get(formData, āauthorSectionā, {})),
validateSubmissionSection(get(formData, āsubmissionSectionā, {}))
];return _.every(conditions);
}
The above functions will be required to check if the author is already present or not. Similarly it can be performed for publisher.
Other additional information can be added using buttons like Add Physical Data
and Add New Edition
(used in case the user wants to add more than one editions).
A user can add book, and the related editions can be either created at the time of book creation or by going on the edit page for that book.
The code for adding release-date, edition-format and physical data can be collected from:
src/client/helpers/entity.js
export function getEditionReleaseDate(edition) {
const hasReleaseEvents = edition.releaseEventSet &&
edition.releaseEventSet.releaseEvents &&
edition.releaseEventSet.releaseEvents.length;if (hasReleaseEvents) { return transformISODateForDisplay(edition.releaseEventSet.releaseEvents[0].date); } return '?';
}
export function getEditionFormat(entity) {
return (entity.editionFormat && entity.editionFormat.label) || ā?ā;
}
src/client/components/pages/edition.js
const format = extractAttribute(edition.editionFormat, ālabelā);
const pageCount = extractAttribute(edition.pages);
const weight = extractAttribute(edition.weight);
const width = extractAttribute(edition.width);
const height = extractAttribute(edition.height);
const depth = extractAttribute(edition.depth);const releaseDate = getEditionReleaseDate(edition);
ā¢ These editions for the books will have details like: language, publisher, format, release date which might be different from one another, but all of the editions will have a system generated naming system, like Serial number ā Format ā Year
.
Also every term on every page will have tooltip to declare and define their meaning in database. This will be important and useful for first time users
To create new edition, no new code will be written as declaring a book is like declaring first edition only.
Similarly, new author and new publisher can be create like below:
The backend code to generate new author and publisher will be same except:
ā¢ No new name, sort-name, language, alias, identifier, disambiguation.
ā¢ It will only consist of additional information if we compare it to present forms.
These fields will use the code for entity-type work which takes the input for alias, identifier and disambiguation.
src/client/entity-editor/alias-editor/alias-editor.js
src/client/entity-editor/alias-editor/alias-row.js
src/client/entity-editor/identifier-editor/identifier-editor.js
src/client/entity-editor/identifier-editor/identifier-row.js
src/client/entity-editor/name-section/disambiguation-field.js
This page will be on user screen everytime a user wants to enter a new book, author or publisher or edits the same. (This can be used to solve the problem of adding a pen name for an already existing author)
ā¢ Here the optional information can be added or left blank (as per userās choice) and then the creation form can be submitted.
ā¢ The backend code to link enities will use:
src/client/entity-editor/relationship-editor/relationship-editor.js
renderEntitySelect() {
const {baseEntity, relationshipTypes} = this.props;
const types = getValidOtherEntityTypes(relationshipTypes, baseEntity);
if (!types.length) {
return null;
}
const typesForDisplay = types.map(_.startCase);
const lastType = _.last(typesForDisplay);
const otherTypes = _.join(typesForDisplay.slice(0, -1), ', ');
const label =
Other Entity (${otherTypes.length ?
${otherTypes} or: ''}${lastType})
;
return (
);
Here the base-entity will always be book and target entity will be, AUTHOR or PUBLISHER.
On the main book page, the editions and relations list will have links.
This is the workflow that I intend to perform:
Testing:
During coding period, I will push daily commits and send weekly pull requests. I will share screenshots to show the actual working of the work done.
In the community bonding period, I will learn more about react and will actively talk to community.
About Me:
I am a 2nd year undergraduate student pursuing B.Tech in IT from Maharaja Surajmal Institute Of Technology(GGSIPU). Previously I have done an internship under a start-up named āIndieCorpā as a Web-Developer an have been participating in hackathons. I am also a core member of International Organisation Of Software Developers in my college. We are a team of 200+ developers and we actively work on projects, organise meetups and create an agile tech. environment in the institute.
Tell us about the computer(s) you have available for working on your SoC project!
I have DELL laptop with i3 processor with 4gb of ram.
When did you first start programming?
I started programming in my first year of College only. I was a medical student in my school.
What type of books do you read?
I enjoy reading fantasy and inspirational novels like Harry Potter and The Alchemist are my favourite. Iāve also read classics Little Women.
Have you contributed to other Open Source projects? If so, which projects and can we see some of your code?
Iāve contributed to Bookbrainz only. I will update my PRs in a day or two.
What type of programming projects have you worked on?
Last summer i worked on a network communicator project using socket programming in c++ with a help of mentor from Learn-IT-Girl.
How much time do you have available, and how would you plan to use it?
I am free all summer except for about last 20 days. My college resumes in August. In that time also I will be able to give 3-4 hours a day easily. Also I will be having exams in coming may-mid but due to ongoing coronavirus, nothing is sure.
I plan to give 30-35 hours a week in the project.