mirror of
https://github.com/overleaf/overleaf.git
synced 2024-12-28 00:22:21 +00:00
Work in progress of doing project list with Angular
This commit is contained in:
James Allen
parent
067d343928
commit
6305ac16f4
5 changed files with 21887 additions and 219 deletions
|
|
@ -211,6 +211,11 @@ _buildListViewModel = (projects, collabertions, readOnlyProjects, tags, tagsGrou
|
|||
for project in readOnlyProjects
|
||||
project.accessLevel = "readOnly"
|
||||
projects = projects.concat(collabertions).concat(readOnlyProjects)
|
||||
projects = projects.map (project)->
|
||||
project.tags = tagsGroupedByProject[project._id] || []
|
||||
return project
|
||||
tags = _.sortBy tags, (tag)->
|
||||
-tag.project_ids.length
|
||||
|
||||
return {
|
||||
title:'Your Projects'
|
||||
|
|
|
|||
|
|
@ -32,10 +32,9 @@ html(itemscope, itemtype='http://schema.org/Product')
|
|||
window.csrfToken = "#{csrfToken}";
|
||||
|
||||
script(src=jsPath+'libs/jquery.js')
|
||||
script(src=jsPath+'libs/handlebars-1.1.2.js')
|
||||
script(src=jsPath+'libs/ember-1.5.1.js')
|
||||
script(src=jsPath+'libs/ember-data-1.0.0-beta.8.js')
|
||||
script(src=jsPath+'libs/angular-1.2.17.js')
|
||||
script(src=jsPath+'libs/moment.js')
|
||||
script(src=jsPath+'libs/bootstrap.js')
|
||||
block scripts
|
||||
|
||||
- if (typeof(bodyClasses) == "undefined")
|
||||
|
|
|
|||
|
|
@ -1,161 +1,150 @@
|
|||
extends ../layout
|
||||
|
||||
block scripts
|
||||
script(src=jsPath+'project-list.js')
|
||||
|
||||
block content
|
||||
#projectList
|
||||
|
||||
script(type="text/javascript").
|
||||
window.data = {
|
||||
projects: !{projects},
|
||||
tags: !{tags}
|
||||
};
|
||||
|
||||
script(src=jsPath+'project-list.js')
|
||||
|
||||
block content
|
||||
|
||||
script(type="text/x-handlebars", data-template-name="projects")
|
||||
- if (projects.length > 0)
|
||||
ul.list-unstyled.project-list
|
||||
li.container-fluid
|
||||
.row
|
||||
.col-md-6
|
||||
input(type="checkbox").select-all
|
||||
span.title TITLE
|
||||
.col-md-2
|
||||
span.owner OWNER
|
||||
.col-md-4
|
||||
span.last-modified LAST MODIFIED
|
||||
{{#each itemController="project"}}
|
||||
li.project_entry.container-fluid
|
||||
.row
|
||||
.col-md-6
|
||||
input(type="checkbox").select-item
|
||||
span.title
|
||||
<a class="projectName" {{ bind-attr href=url }}>{{name}}</a>
|
||||
.col-md-2
|
||||
span.owner {{ownerName}}
|
||||
.col-md-4
|
||||
span.last-modified.isoDate {{formattedLastUpdated}}
|
||||
{{/each}}
|
||||
- else
|
||||
|
||||
|
||||
.content.content-alt(ng-app="ProjectPageApp", ng-controller="ProjectPageController")
|
||||
.container
|
||||
.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
|
||||
| .
|
||||
.col-md-2
|
||||
#newProject.dropdown
|
||||
a.btn.btn-primary.dropdown-toggle(data-toggle="dropdown", href="#") New Project
|
||||
ul.dropdown-menu(role="menu")
|
||||
li
|
||||
a#blankNewProject(href="#", data-csrf=csrfToken) Blank Project
|
||||
li
|
||||
a#newProjectExample(href="#", data-csrf=csrfToken) Example Project
|
||||
li
|
||||
a#uploadNewProject(href="#", data-csrf=csrfToken) 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
|
||||
li
|
||||
a.menu-indent(href="#") All projects
|
||||
li
|
||||
a.menu-indent(href="#") Your projects
|
||||
li
|
||||
a.menu-indent(href="#") Shared with you
|
||||
li
|
||||
h2 Folders
|
||||
li(ng-repeat="tag in tags", ng-controller="TagController")
|
||||
a.menu-indent(href="#")
|
||||
i.icon.fa.fa-folder-o
|
||||
| {{tag.name}}
|
||||
span.small ({{tag.project_ids.length}})
|
||||
|
||||
script(type="text/x-handlebars", data-template-name="tags")
|
||||
ul.list-unstyled.folders-menu.js-folders-menu
|
||||
li
|
||||
a.menu-indent(href="#") All projects
|
||||
li
|
||||
a.menu-indent(href="#") Your projects
|
||||
li
|
||||
a.menu-indent(href="#") Shared with you
|
||||
li
|
||||
h2 Folders
|
||||
{{#each itemController="tag"}}
|
||||
li
|
||||
a.menu-indent(href="#")
|
||||
i.icon.fa.fa-folder-o
|
||||
| {{name}}
|
||||
span.small ({{projectCount}})
|
||||
{{/each}}
|
||||
.row-spaced-small
|
||||
ul.list-unstyled.folders-menu
|
||||
li
|
||||
a.menu-indent(href="#")
|
||||
i.icon.fa.fa-plus
|
||||
| New Folder
|
||||
|
||||
script(type="text/x-handlebars", data-template-name="application")
|
||||
.content.content-alt
|
||||
.container
|
||||
.row
|
||||
.col-md-2
|
||||
#newProject.dropdown
|
||||
a.btn.btn-primary.dropdown-toggle(data-toggle="dropdown", href="#") New Project
|
||||
ul.dropdown-menu(role="menu")
|
||||
li
|
||||
a#blankNewProject(href="#", data-csrf=csrfToken) Blank Project
|
||||
li
|
||||
a#newProjectExample(href="#", data-csrf=csrfToken) Example Project
|
||||
li
|
||||
a#uploadNewProject(href="#", data-csrf=csrfToken) 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 »
|
||||
-if (settings.enableSubscriptions)
|
||||
.row-spaced
|
||||
{{ render "tags" }}
|
||||
a(href="/user/bonus").btn.btn-info Upgrade Account
|
||||
|
||||
.row-spaced-small
|
||||
ul.list-unstyled.folders-menu
|
||||
li
|
||||
a.menu-indent(href="#")
|
||||
i.icon.fa.fa-plus
|
||||
| New Folder
|
||||
.col-md-10(ng-controller="ProjectListController")
|
||||
.container-fluid
|
||||
.row
|
||||
.col-md-12
|
||||
form.project-search.form-horizontal(role="form")
|
||||
.form-group.has-feedback.col-md-7
|
||||
input(placeholder='Search projects…', autofocus='autofocus', ng-model="searchText").form-control.col-md-7
|
||||
i.fa.fa-search.form-control-feedback
|
||||
//- i.fa.fa-remove
|
||||
|
||||
-if (settings.enableSubscriptions)
|
||||
.row-spaced
|
||||
a(href="/user/bonus").btn.btn-info Upgrade Account
|
||||
.project-tools.js-toggle-tools
|
||||
.btn-toolbar
|
||||
.btn-group
|
||||
a.btn.btn-default(href='#', data-toggle="tooltip", data-placement="bottom", title="", data-original-title="Download")
|
||||
i.fa.fa-cloud-download
|
||||
a.btn.btn-default(href='#', data-toggle="tooltip", data-placement="bottom", title="", data-original-title="Delete")
|
||||
i.fa.fa-trash-o
|
||||
|
||||
.col-md-10
|
||||
.container-fluid
|
||||
.row
|
||||
.col-md-12
|
||||
form.project-search.form-horizontal(role="form")
|
||||
.form-group.has-feedback.col-md-7
|
||||
input(placeholder='Search projects…', autofocus='autofocus').form-control.col-md-7
|
||||
i.fa.fa-search.form-control-feedback
|
||||
//- i.fa.fa-remove
|
||||
.btn-group
|
||||
a.btn.btn-default.dropdown-toggle(href="#", data-toggle="dropdown")
|
||||
i.fa.fa-folder-open-o
|
||||
|
|
||||
span.caret
|
||||
ul.dropdown-menu.dropdown-menu-right(role="menu")
|
||||
li.dropdown-header Add to folder
|
||||
li(ng-repeat="tag in tags", ng-controller="TagDropdownController")
|
||||
a.menu-indent(href="#", ng-click="addOrRemoveProjectsFromTag()")
|
||||
i.fa.fa-check(ng-if="areSelectedProjectsInTag")
|
||||
| {{tag.name}}
|
||||
|
||||
.project-tools.js-toggle-tools
|
||||
.btn-toolbar
|
||||
.btn-group
|
||||
a.btn.btn-default(href='#', data-toggle="tooltip", data-placement="bottom", title="", data-original-title="Download")
|
||||
i.fa.fa-cloud-download
|
||||
a.btn.btn-default(href='#', data-toggle="tooltip", data-placement="bottom", title="", data-original-title="Delete")
|
||||
i.fa.fa-trash-o
|
||||
|
||||
.btn-group
|
||||
a.btn.btn-default.dropdown-toggle(href="#", data-toggle="dropdown")
|
||||
i.fa.fa-folder-open-o
|
||||
|
|
||||
span.caret
|
||||
ul.dropdown-menu.dropdown-menu-right(role="menu")
|
||||
li.dropdown-header Add to folder
|
||||
.btn-group
|
||||
a.btn.btn-default.dropdown-toggle(data-toggle="dropdown", href="#") More
|
||||
span.caret
|
||||
ul.dropdown-menu.dropdown-menu-right(role="menu")
|
||||
li
|
||||
a(href='/project/'+"5369c5737fc6b47f048da1f5"+'/clone', data-csrf=csrfToken).cloneProject Make a Copy...
|
||||
-if ("owner" == "owner")
|
||||
li
|
||||
a.menu-indent(href="#") PhD
|
||||
a(href='/project/'+"5369c5737fc6b47f048da1f5"+'/rename', data-name="the project", data-id="5369c5737fc6b47f048da1f5", data-csrf=csrfToken).renameProject Rename...
|
||||
-else
|
||||
li
|
||||
a.menu-indent(href="#") Personal
|
||||
li
|
||||
a.menu-indent(href="#") Papers
|
||||
|
||||
.btn-group
|
||||
a.btn.btn-default.dropdown-toggle(data-toggle="dropdown", href="#") More
|
||||
span.caret
|
||||
ul.dropdown-menu.dropdown-menu-right(role="menu")
|
||||
li
|
||||
a(href='/project/'+"5369c5737fc6b47f048da1f5"+'/clone', data-csrf=csrfToken).cloneProject Make a Copy...
|
||||
-if ("owner" == "owner")
|
||||
li
|
||||
a(href='/project/'+"5369c5737fc6b47f048da1f5"+'/rename', data-name="the project", data-id="5369c5737fc6b47f048da1f5", data-csrf=csrfToken).renameProject Rename...
|
||||
-else
|
||||
li
|
||||
a(href='/project/'+"5369c5737fc6b47f048da1f5"+'/leave', data-name="the project", data-id="5369c5737fc6b47f048da1f5", data-csrf=csrfToken).leaveProject Leave Project
|
||||
.row.row-spaced
|
||||
.col-md-12
|
||||
.card.card-thin
|
||||
{{ render "projects" }}
|
||||
a(href='/project/'+"5369c5737fc6b47f048da1f5"+'/leave', data-name="the project", data-id="5369c5737fc6b47f048da1f5", data-csrf=csrfToken).leaveProject Leave Project
|
||||
.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", ng-controller="ProjectController")
|
||||
.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}}
|
||||
.col-md-2
|
||||
span.owner {{project.publicAccesLevel}}
|
||||
.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
|
||||
| .
|
||||
|
|
|
|||
|
|
@ -1,88 +1,89 @@
|
|||
window.ProjectList = Ember.Application.create {
|
||||
rootElement: "#projectList"
|
||||
}
|
||||
window.ProjectPageApp = angular.module("ProjectPageApp", [])
|
||||
|
||||
ProjectList.ApplicationRoute = Ember.Route.extend {
|
||||
setupController: () ->
|
||||
# TODO: Figure out how to get the findAll method
|
||||
for project in window.data.projects
|
||||
project = @store.createRecord('project', {
|
||||
id: project._id
|
||||
name: project.name
|
||||
lastUpdated: project.lastUpdated
|
||||
})
|
||||
for tag in window.data.tags
|
||||
tagObject = @store.createRecord('tag', {
|
||||
id: tag._id
|
||||
name: tag.name
|
||||
})
|
||||
for project_id in tag.project_ids
|
||||
project = @store.getById('project', project_id)
|
||||
if project?
|
||||
tagObject.get("projects").pushObject(project)
|
||||
ProjectPageApp.filter "formatDate", () ->
|
||||
(date, format = "Do MMM YYYY, h:mm a") ->
|
||||
moment(date).format(format)
|
||||
|
||||
@controllerFor('projects').set('model', @store.all("project"))
|
||||
@controllerFor('tags').set('model', @store.all("tag"))
|
||||
}
|
||||
ProjectPageApp.controller "ProjectPageController", ($scope) ->
|
||||
$scope.projects = window.data.projects
|
||||
$scope.tags = window.data.tags
|
||||
|
||||
ProjectList.Tag = DS.Model.extend {
|
||||
name: DS.attr("string")
|
||||
projects: DS.hasMany("project")
|
||||
}
|
||||
ProjectPageApp.controller "ProjectListController", ($scope) ->
|
||||
$scope.allSelected = false
|
||||
$scope.visibleProjects = $scope.projects
|
||||
|
||||
ProjectList.Project = DS.Model.extend {
|
||||
name: DS.attr("string")
|
||||
ownerName: DS.attr("string")
|
||||
lastUpdated: DS.attr("date")
|
||||
tags: DS.hasMany("tag")
|
||||
}
|
||||
# Any individual changes to the selection buttons invalidates
|
||||
# our 'select all'
|
||||
$scope.$on "selected:on-change", (e) ->
|
||||
$scope.allSelected = false
|
||||
$scope.$broadcast "selection:change"
|
||||
|
||||
ProjectList.ProjectsController = Ember.ArrayController.extend {
|
||||
sortProperties: ["lastUpdated"]
|
||||
sortAscending: false
|
||||
}
|
||||
# Selecting or deselecting all should apply to all projects
|
||||
$scope.onSelectAllChange = () ->
|
||||
for project in $scope.visibleProjects
|
||||
project.selected = $scope.allSelected
|
||||
$scope.$broadcast "selection:change"
|
||||
|
||||
ProjectList.ProjectController = Ember.ObjectController.extend {
|
||||
url: (() ->
|
||||
"/project/#{@get("model").get("id")}"
|
||||
).property("id")
|
||||
$scope.clearSelections = () ->
|
||||
for project in $scope.projects
|
||||
project.selected = false
|
||||
$scope.allSelected = false
|
||||
$scope.$broadcast "selection:change"
|
||||
|
||||
formattedLastUpdated: (() ->
|
||||
date = @get("model").get("lastUpdated")
|
||||
return moment(date).format("Do MMM YYYY, h:mm a")
|
||||
).property("lastUpdated")
|
||||
}
|
||||
$scope.getSelectedProjects = () ->
|
||||
$scope.projects.filter (project) -> project.selected
|
||||
|
||||
ProjectList.TagsController = Ember.ArrayController.extend {
|
||||
sortProperties: ["name"]
|
||||
sortAscending: true
|
||||
}
|
||||
$scope.getSelectedProjectIds = () ->
|
||||
$scope.getSelectedProjects().map (project) -> project._id
|
||||
|
||||
ProjectList.TagController = Ember.ObjectController.extend {
|
||||
projectCount: (() ->
|
||||
@get("model").get("projects.length")
|
||||
).property("projects.length")
|
||||
}
|
||||
$scope.$watch "searchText", (value) ->
|
||||
$scope.updateVisibleProjects()
|
||||
|
||||
$scope.updateVisibleProjects = () ->
|
||||
$scope.visibleProjects = []
|
||||
for project in $scope.projects
|
||||
visible = true
|
||||
if $scope.searchText? and $scope.searchText != ""
|
||||
if !project.name.toLowerCase().match($scope.searchText.toLowerCase())
|
||||
visible = false
|
||||
if visible
|
||||
$scope.visibleProjects.push project
|
||||
$scope.clearSelections()
|
||||
|
||||
ProjectPageApp.controller "ProjectController", ($scope) ->
|
||||
$scope.onSelectedChange = () ->
|
||||
$scope.$emit "selected:on-change"
|
||||
|
||||
ProjectList.ApplicationAdapter = DS.Adapter.extend {
|
||||
findAll: (store, type, sinceToken) ->
|
||||
console.log "Grabbing", type
|
||||
if type == ProjectList.Project
|
||||
return new Ember.RSVP.Promise (resolve, reject) ->
|
||||
Ember.run null, resolve, window.data.projects.map (project) ->
|
||||
id: project._id
|
||||
name: project.name
|
||||
lastUpdated: project.lastUpdated
|
||||
tag_ids: ["53230518ee024fe3e88ca988"]
|
||||
else if type == ProjectList.Tag
|
||||
return new Ember.RSVP.Promise (resolve, reject) ->
|
||||
Ember.run null, resolve, window.data.tags.map (tag) ->
|
||||
{
|
||||
id: tag._id
|
||||
name: tag.name
|
||||
project_ids: tag.project_ids
|
||||
}
|
||||
}
|
||||
ProjectPageApp.controller "TagController", ($scope) ->
|
||||
|
||||
ProjectPageApp.controller "TagDropdownController", ($scope) ->
|
||||
$scope.$on "selection:change", (e, newValue, oldValue) ->
|
||||
console.log "selected watch listen"
|
||||
$scope.recalculateProjectsInTag()
|
||||
|
||||
$scope.recalculateProjectsInTag = () ->
|
||||
$scope.areSelectedProjectsInTag = false
|
||||
for project_id in $scope.getSelectedProjectIds()
|
||||
if project_id in $scope.tag.project_ids
|
||||
$scope.areSelectedProjectsInTag = true
|
||||
|
||||
$scope.addOrRemoveProjectsFromTag = () ->
|
||||
if $scope.areSelectedProjectsInTag
|
||||
$scope.removeSelectedProjectsFromTag()
|
||||
else
|
||||
$scope.addSelectedProjectsToTag()
|
||||
|
||||
$scope.removeSelectedProjectsFromTag = () ->
|
||||
selected_project_ids = $scope.getSelectedProjectIds()
|
||||
remaining_project_ids = []
|
||||
for project_id in $scope.tag.project_ids
|
||||
if project_id not in selected_project_ids
|
||||
remaining_project_ids.push project_id
|
||||
$scope.tag.project_ids = remaining_project_ids
|
||||
$scope.areSelectedProjectsInTag = false
|
||||
|
||||
$scope.addSelectedProjectsToTag = () ->
|
||||
for project_id in $scope.getSelectedProjectIds()
|
||||
unless project_id in $scope.tag.project_ids
|
||||
$scope.tag.project_ids.push project_id
|
||||
$scope.areSelectedProjectsInTag = true
|
||||
|
|
|
|||
21674
services/web/public/js/libs/angular-1.2.17.js
Normal file
21674
services/web/public/js/libs/angular-1.2.17.js
Normal file
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue