overleaf/services/web/app/views/project/list.jade

extends ../layout

block scripts
	script(type="text/javascript").
		window.data = {
			projects: !{JSON.stringify(projects)},
			tags: !{JSON.stringify(tags)}
		};
		window.algolia = {
			institutions: {
				app_id:  '#{algolia_app_id}',
				api_key: '#{algolia_api_key}'
			}
		};

block content
	.content.content-alt(ng-controller="ProjectPageController")
		.container
			.row
				.col-md-3
					#newProject.dropdown
						a.btn.btn-primary.dropdown-toggle(
							href="#",
							data-toggle="dropdown"
						) New Project
						ul.dropdown-menu(role="menu")
							li
								a(
									href="#",
									ng-click="openCreateProjectModal()"
								) Blank Project
							li
								a(
									href="#",
									ng-click="openCreateProjectModal('example')"
								) Example Project
							li
								a(
									href="#",
									ng-click="openUploadProjectModal()"
								) Upload Project
							li.divider
							li.dropdown-header Templates
							li
								a.menu-indent(href="/templates/cv") CV or Resume
							li
								a.menu-indent(href="/templates/cover-letters") Cover Letter
							li
								a.menu-indent(href="/templates/journals") Journal Article
							li
								a.menu-indent(href="/templates/presentations") Presentation
							li
								a.menu-indent(href="/templates/thesis") Thesis
							li
								a.menu-indent(href="/templates/bibliographies") Bibliographies
							li
								a.menu-indent(href="/templates") View All »
					.row-spaced
						ul.list-unstyled.folders-menu.js-folders-menu(ng-controller="TagListController")
							li(ng-class="{active: (filter == 'all')}")
								a.menu-indent(href, ng-click="filterProjects('all')") All projects
							li(ng-class="{active: (filter == 'owned')}")
								a.menu-indent(href, ng-click="filterProjects('owned')") Your projects
							li(ng-class="{active: (filter == 'shared')}")
								a.menu-indent(href, ng-click="filterProjects('shared')") Shared projects
							li(ng-class="{active: (filter == 'archived')}")
								a.menu-indent(href, ng-click="filterProjects('archived')") Deleted projects
							li 
								h2 Folders
							li(
								ng-repeat="tag in tags | filter:nonEmpty",
								ng-controller="TagListItemController",
								ng-class="{active: tag.selected}"
							)
								a.menu-indent(href="#", ng-click="selectTag()")
									i.icon.fa(
										ng-class="{\
											'fa-folder-open-o': tag.selected,\
											'fa-folder-o': !tag.selected\
										}"
									)
									|  {{tag.name}} 
								span.small ({{tag.project_ids.length}})

					-if (settings.enableSubscriptions)
						.row-spaced
							a(href="/user/bonus").btn.btn-info Upgrade Account

					- if (showUserDetailsArea)
						.row-spaced#userProfileInformation(ng-cloak)
							div(ng-controller="UpdateForm").userProfileInformationArea
								div(ng-hide="hidePersonalInfoSection").alert.alert-info
									div(ng-show="percentComplete >= 100")
										h4 100% complete, well done!
									div(ng-hide="percentComplete >= 100")
										h4 Your profile is 
											strong {{percentComplete}}% 
											| complete

									.progress
										.bar.bar-success(ng-style="{'width' : (percentComplete+'%')}")

									button#completeUserProfileInformation.btn.btn-primary(
										ng-hide="formVisable",
										ng-click="showForm()"
									) Complete now

									div(ng-show="formVisable")
										form(enctype='multipart/form-data', method='post')
											.form-group
												input.form-control(
													type='text',
													name='first_name',
													ng-model="userInfoForm.first_name",
													ng-blur="sendUpdate()",
													placeholder="First Name",
													focus-input="formVisable"
												)
											.form-group
												input.form-control(
													type='text',
													name='last_name',
													ng-model="userInfoForm.last_name",
													ng-blur="sendUpdate()",
													placeholder='Last Name'
												)
											.form-group#institution_auto_complete
												autocomplete(
													ng-model="userInfoForm.institution",
													data="institutions",
													ng-blur="sendUpdate()",
													on-type="updateInstitutionsList",
													attr-placeholder="Institution",
													attr-inputclass="form-control"
												)
											.form-group
												input.form-control(
													type='text',
													name='role',
													ng-model="userInfoForm.role",
													placeholder='Role',
													ng-blur="sendUpdate()",
													list="_roles"
												)
												datalist#_roles
													option(ng-repeat='role in roles') {{role}}

				.col-md-9
					.container-fluid
						.row
							.col-md-12
								form.project-search.form-horizontal(role="form")
									.form-group.has-feedback.has-feedback-left.col-md-7
										input.form-control.col-md-7(
											placeholder='Search projects…',
											autofocus='autofocus',
											ng-model="searchText",
											focus-on='search:clear'
										)
										i.fa.fa-search.form-control-feedback-left
										i.fa.fa-times.form-control-feedback(
											ng-click="clearSearchText()",
											style="cursor: pointer;",
											ng-show="searchText.length > 0"
										)
									//- i.fa.fa-remove

								.project-tools.js-toggle-tools
									.btn-toolbar(ng-show="filter != 'archived'")
										.btn-group(ng-hide="selectedProjects.length < 1")
											a.btn.btn-default(
												href='#',
												data-original-title="Download",
												data-toggle="tooltip",
												data-placement="bottom",
												ng-click="downloadSelectedProjects()"
											)
												i.fa.fa-cloud-download
											a.btn.btn-default(
												href='#',
												data-original-title="Delete",
												data-toggle="tooltip",
												data-placement="bottom",
												ng-click="openArchiveProjectsModal()"
											)
												i.fa.fa-trash-o

										.btn-group.dropdown(ng-hide="selectedProjects.length < 1")
											a.btn.btn-default.dropdown-toggle(
												href="#",
												data-toggle="dropdown"
											)
												i.fa.fa-folder-open-o
												|  
												span.caret
											ul.dropdown-menu.dropdown-menu-right.js-tags-dropdown-menu(
												role="menu"
												ng-controller="TagListController"
											)
												li.dropdown-header Add to folder
												li(
													ng-repeat="tag in tags | filter:nonEmpty | orderBy:'name'",
													ng-controller="TagDropdownItemController"
												)
													a(href="#", ng-click="addOrRemoveProjectsFromTag()", stop-propagation="click")
														i.fa(
															ng-class="{\
																'fa-check-square-o': areSelectedProjectsInTag == true,\
																'fa-square-o': areSelectedProjectsInTag == false,\
																'fa-minus-square-o': areSelectedProjectsInTag == 'partial'\
															}"
														)
														|  {{tag.name}}
												li.divider
												li
													a(href="#", ng-click="openNewTagModal()", stop-propagation="click") Create New Folder

										.btn-group(ng-hide="selectedProjects.length != 1").dropdown
											a.btn.btn-default.dropdown-toggle(
												href='#',
												data-toggle="dropdown"
											) More 
												span.caret
											ul.dropdown-menu.dropdown-menu-right(role="menu")
												li(ng-show="getFirstSelectedProject().accessLevel == 'owner'")
													a(
														href='#',
														ng-click="openRenameProjectModal()"
													) Rename
												li
													a(
														href='#',
														ng-click="openCloneProjectModal()"
													) Make a copy

									.btn-toolbar(ng-show="filter == 'archived'")
										.btn-group(ng-hide="selectedProjects.length < 1")
											a.btn.btn-default(
												href='#',
												data-original-title="Restore",
												data-toggle="tooltip",
												data-placement="bottom",
												ng-click="restoreSelectedProjects()"
											) Restore

										.btn-group(ng-hide="selectedProjects.length < 1")
											a.btn.btn-danger(
												href='#',
												data-original-title="Delete Forever",
												data-toggle="tooltip",
												data-placement="bottom",
												ng-click="openDeleteProjectsModal()"
											) Delete Forever

						.row.row-spaced
							.col-md-12
								.card.card-thin
									- if (projects.length > 0)
										ul.list-unstyled.project-list
											li.container-fluid
												.row
													.col-md-6
														input.select-all(
															type="checkbox",
															ng-model="allSelected",
															ng-change="onSelectAllChange()"
														)
														span.title TITLE
													.col-md-2
														span.owner OWNER
													.col-md-4
														span.last-modified LAST MODIFIED
											li.project_entry.container-fluid(
												ng-repeat="project in visibleProjects | orderBy:'lastUpdated':true",
												ng-controller="ProjectListItemController"
											)
												.row
													.col-md-6
														input.select-item(type="checkbox", ng-model="project.selected", ng-change="onSelectedChange()")
														span.title
															a.projectName(href="/project/{{project.id}}") {{project.name}}
														span
															span.label.label-default(ng-repeat='tag in project.tags')
																| {{tag.name}}
													.col-md-2
														span.owner {{ownerName()}}
													.col-md-4
														span.last-modified.isoDate {{project.lastUpdated | formatDate}}
									- else
										.row
											.span12
												.welcome
													h1
														i.fa.fa-arrow-left
														| Welcome! Follow the arrow to get started
													p New to LaTeX? Start by having a look at our
														a(href="/templates")  templates
														|  or
														a(href="/learn")  help guides
														| .

		script(type='text/ng-template', id='newTagModalTemplate')
			.modal-header
				h3 Create New Folder
			.modal-body
				form(name="newTagForm", novalidate)
					input.form-control(
						type="text",
						placeholder="New Folder Name",
						required,
						ng-model="inputs.newTagName",
						ng-enter="create()",
						focus-on="open"
					)
			.modal-footer
				button.btn.btn-default(ng-click="cancel()") Cancel
				button.btn.btn-primary(
					ng-disabled="newTagForm.$invalid"
					ng-click="create()"
				) Create

		script(type='text/ng-template', id='renameProjectModalTemplate')
			.modal-header
				h3 Rename Project
			.modal-body
				form(name="renameProjectForm", novalidate)
					input.form-control(
						type="text",
						placeholder="Project Name",
						ng-model="inputs.projectName",
						required,
						ng-enter="rename()",
						focus-on="open"
					)
			.modal-footer
				button.btn.btn-default(ng-click="cancel()") Cancel
				button.btn.btn-primary(
					ng-click="rename()",
					ng-disabled="renameProjectForm.$invalid"
				) Rename

		script(type='text/ng-template', id='cloneProjectModalTemplate')
			.modal-header
				h3 Copy Project
			.modal-body
				form(name="cloneProjectForm", novalidate)
					.form-group
						label New Name
						input.form-control(
							type="text",
							placeholder="New Project Name",
							required,
							ng-model="inputs.projectName",
							ng-enter="clone()",
							focus-on="open"
						)
			.modal-footer
				button.btn.btn-default(
					ng-disabled="state.inflight"
					ng-click="cancel()"
				) Cancel
				button.btn.btn-primary(
					ng-disabled="cloneProjectForm.$invalid || state.inflight"
					ng-click="clone()"
				)
					span(ng-hide="state.inflight") Copy
					span(ng-show="state.inflight") Copying...

		script(type='text/ng-template', id='newProjectModalTemplate')
			.modal-header
				h3 New Project
			.modal-body
				form(novalidate, name="newProjectForm")
					input.form-control(
						type="text",
						placeholder="Project Name",
						required,
						ng-model="inputs.projectName",
						ng-enter="create()",
						focus-on="open"
					)
			.modal-footer
				button.btn.btn-default(
					ng-disabled="state.inflight"
					ng-click="cancel()"
				) Cancel
				button.btn.btn-primary(
					ng-disabled="newProjectForm.$invalid || state.inflight"
					ng-click="create()"
				)
					span(ng-hide="state.inflight") Create
					span(ng-show="state.inflight") Creating...

		script(type='text/ng-template', id='deleteProjectsModalTemplate')
			.modal-header
				h3 {{action}} Projects
			.modal-body
				div(ng-show="projectsToDelete.length > 0")
					p You are about to delete the following projects:
					ul
						li(ng-repeat="project in projectsToDelete | orderBy:'name'")
							strong {{project.name}}
				div(ng-show="projectsToLeave.length > 0")
					p You are about to leave the following projects:
					ul
						li(ng-repeat="project in projectsToLeave | orderBy:'name'")
							strong {{project.name}}
			.modal-footer
				button.btn.btn-default(
					ng-click="cancel()"
				) Cancel
				button.btn.btn-danger(
					ng-click="delete()"
				) {{action}}

		script(type="text/ng-template", id="uploadProjectModalTemplate")
			.modal-header
				h3 Upload Zipped Project
			.modal-body(ng-fine-upload)
				span Upload a zipped project
			.modal-footer
				button.btn.btn-default(ng-click="cancel()") Cancel