From 3648c8d10ca6a007195d8046cf57096e611dd25d Mon Sep 17 00:00:00 2001 From: Tim Zallmann Date: Wed, 31 May 2017 16:20:59 +0200 Subject: Prototyping with Vue Rocks - Got the User Display Working - Simulation Panel - Calendar Initialised --- .../teamdashboard/components/calendarline.vue | 20 ++ .../teamdashboard/components/issue_item.vue | 59 ++++++ .../teamdashboard/components/issue_list.vue | 25 +++ .../teamdashboard/components/teamdashboard.vue | 215 ++++++++++++++++----- .../components/teamdashboard_simulation_panel.vue | 29 +++ .../teamdashboard/components/teammember_item.vue | 32 +++ .../teamdashboard/services/group_service.js | 24 --- .../services/teamdashboard_service.js | 42 ++++ .../teamdashboard/stores/teamdashboard_store.js | 91 +++++++++ .../teamdashboard/teamdashboard_bundle.js | 37 ++-- .../teamdashboard/teamdashboard_mock.js | 19 ++ .../vue_shared/vue_resource_api_interceptor.js | 20 ++ app/assets/stylesheets/pages/teamdashboard.scss | 57 ++++++ app/views/groups/team_dashboard/index.html.haml | 4 +- 14 files changed, 581 insertions(+), 93 deletions(-) create mode 100644 app/assets/javascripts/teamdashboard/components/calendarline.vue create mode 100644 app/assets/javascripts/teamdashboard/components/issue_item.vue create mode 100644 app/assets/javascripts/teamdashboard/components/issue_list.vue create mode 100644 app/assets/javascripts/teamdashboard/components/teamdashboard_simulation_panel.vue create mode 100644 app/assets/javascripts/teamdashboard/components/teammember_item.vue delete mode 100644 app/assets/javascripts/teamdashboard/services/group_service.js create mode 100644 app/assets/javascripts/teamdashboard/services/teamdashboard_service.js create mode 100644 app/assets/javascripts/teamdashboard/stores/teamdashboard_store.js create mode 100644 app/assets/javascripts/teamdashboard/teamdashboard_mock.js create mode 100644 app/assets/javascripts/vue_shared/vue_resource_api_interceptor.js create mode 100644 app/assets/stylesheets/pages/teamdashboard.scss diff --git a/app/assets/javascripts/teamdashboard/components/calendarline.vue b/app/assets/javascripts/teamdashboard/components/calendarline.vue new file mode 100644 index 00000000000..0ced20b22d5 --- /dev/null +++ b/app/assets/javascripts/teamdashboard/components/calendarline.vue @@ -0,0 +1,20 @@ + + diff --git a/app/assets/javascripts/teamdashboard/components/issue_item.vue b/app/assets/javascripts/teamdashboard/components/issue_item.vue new file mode 100644 index 00000000000..6169ce350e5 --- /dev/null +++ b/app/assets/javascripts/teamdashboard/components/issue_item.vue @@ -0,0 +1,59 @@ + + diff --git a/app/assets/javascripts/teamdashboard/components/issue_list.vue b/app/assets/javascripts/teamdashboard/components/issue_list.vue new file mode 100644 index 00000000000..1f6275f7732 --- /dev/null +++ b/app/assets/javascripts/teamdashboard/components/issue_list.vue @@ -0,0 +1,25 @@ + + diff --git a/app/assets/javascripts/teamdashboard/components/teamdashboard.vue b/app/assets/javascripts/teamdashboard/components/teamdashboard.vue index ad8974fcd1e..92ff9bd54d6 100644 --- a/app/assets/javascripts/teamdashboard/components/teamdashboard.vue +++ b/app/assets/javascripts/teamdashboard/components/teamdashboard.vue @@ -1,7 +1,14 @@ diff --git a/app/assets/javascripts/teamdashboard/components/teamdashboard_simulation_panel.vue b/app/assets/javascripts/teamdashboard/components/teamdashboard_simulation_panel.vue new file mode 100644 index 00000000000..e4a627591a9 --- /dev/null +++ b/app/assets/javascripts/teamdashboard/components/teamdashboard_simulation_panel.vue @@ -0,0 +1,29 @@ + + + diff --git a/app/assets/javascripts/teamdashboard/components/teammember_item.vue b/app/assets/javascripts/teamdashboard/components/teammember_item.vue new file mode 100644 index 00000000000..9cb69d6f8c2 --- /dev/null +++ b/app/assets/javascripts/teamdashboard/components/teammember_item.vue @@ -0,0 +1,32 @@ + + diff --git a/app/assets/javascripts/teamdashboard/services/group_service.js b/app/assets/javascripts/teamdashboard/services/group_service.js deleted file mode 100644 index 8adb53ea86d..00000000000 --- a/app/assets/javascripts/teamdashboard/services/group_service.js +++ /dev/null @@ -1,24 +0,0 @@ -/* eslint-disable class-methods-use-this */ -import Vue from 'vue'; -import VueResource from 'vue-resource'; - -Vue.use(VueResource); - -export default class EnvironmentsService { - constructor(endpoint) { - this.environments = Vue.resource(endpoint); - this.folderResults = 3; - } - - get(scope, page) { - return this.environments.get({ scope, page }); - } - - postAction(endpoint) { - return Vue.http.post(endpoint, {}, { emulateJSON: true }); - } - - getFolderContent(folderUrl) { - return Vue.http.get(`${folderUrl}.json?per_page=${this.folderResults}`); - } -} diff --git a/app/assets/javascripts/teamdashboard/services/teamdashboard_service.js b/app/assets/javascripts/teamdashboard/services/teamdashboard_service.js new file mode 100644 index 00000000000..833b6a852fd --- /dev/null +++ b/app/assets/javascripts/teamdashboard/services/teamdashboard_service.js @@ -0,0 +1,42 @@ +/* eslint-disable class-methods-use-this */ +import Vue from 'vue'; +import VueResource from 'vue-resource'; + +import TeamDashboardMock from '../teamdashboard_mock'; + +Vue.use(VueResource); + +export default class TeamDashboardService { + constructor(groupId) { + this.groupId = groupId; + this.group = Vue.resource(`[[API]]/groups/${groupId}`); + this.groupMembers = Vue.resource(`[[API]]/groups/${groupId}/members`); + + this.milestones = Vue.resource(`[[API]]/groups/${groupId}/milestones`); + } + + getGroupInfo() { + return this.group.get(); + } + + getGroupMembers() { + return this.groupMembers.get(); + } + + getMilestones(project) { + return Vue.http.get(`[[API]]/projects/${encodeURIComponent(project)}/milestones?per_page=200`); + } + + getGroupConfiguration() { + // return Vue.http.get(`/app/assets/javascripts/teamdashboard/data/${this.groupId}.json`); + return TeamDashboardMock[this.groupId]; + } + + getProjectMilestoneDeliverables(project, milestone, defaultLabels) { + return Vue.http.get(`[[API]]/projects/${encodeURIComponent(project)}/issues?milestone=${milestone}&labels=${defaultLabels}&per_page=200`); + } + + getFolderContent(folderUrl) { + return Vue.http.get(`${folderUrl}.json?per_page=${this.folderResults}`); + } +} diff --git a/app/assets/javascripts/teamdashboard/stores/teamdashboard_store.js b/app/assets/javascripts/teamdashboard/stores/teamdashboard_store.js new file mode 100644 index 00000000000..ba07d633028 --- /dev/null +++ b/app/assets/javascripts/teamdashboard/stores/teamdashboard_store.js @@ -0,0 +1,91 @@ +import '~/lib/utils/common_utils'; +/** + * Team Dashboard Store. + * + * Stores the selected group, group members, issues + */ +export default class TeamDashboardStore { + constructor() { + this.groupInfo = {}; + this.groupMembers = []; + this.groupConfiguration = {}; + + this.milestones = []; + + this.milestoneDeliverables = []; + this.nonAssignedMilestoneDeliverables = []; + + this.deliverableInfo = { + doneDeliverables: 0, + }; + + this.blockerIssues = []; + this.regressionIssues = []; + + return this; + } + + storeGroupInfo(groupInfo) { + this.groupInfo = groupInfo; + return groupInfo; + } + + storeGroupMembers(groupMembers) { + this.groupMembers = _.sortBy(groupMembers, 'name'); + this.groupMembers.forEach((member) => { + member.deliverables = []; + member.issues = []; + }); + + return this.groupMembers; + } + + storeGroupConfiguration(groupConfiguration) { + this.groupConfiguration = groupConfiguration; + return groupConfiguration; + } + + storeMilestones(milestones) { + const transformedMilestones = []; + + milestones.forEach((milestone) => { + const newMilestone = milestone; + if (newMilestone.due_date) newMilestone.due_date = new Date(newMilestone.due_date); + if (newMilestone.start_date) newMilestone.start_date = new Date(newMilestone.start_date); + transformedMilestones.push(newMilestone); + }); + + this.milestones = transformedMilestones; + return milestones; + } + + storeMilestoneDeliverables(issues) { + this.nonAssignedMilestoneDeliverables = []; + + let doneDeliverables = 0; + + issues.forEach((issue) => { + let foundGroupMember = false; + issue.assignees.forEach((assignee) => { + const selectedMember = this.groupMembers.find(member => member.id === assignee.id); + if (selectedMember) { + selectedMember.deliverables.push(issue); + foundGroupMember = true; + } + }); + if (!foundGroupMember) { + this.nonAssignedMilestoneDeliverables.push(issue); + } + if (issue.state === 'closed') { + doneDeliverables += 1; + } + }); + + this.milestoneDeliverables = issues; + + this.deliverableInfo.doneDeliverables = doneDeliverables; + + return issues; + } + +} diff --git a/app/assets/javascripts/teamdashboard/teamdashboard_bundle.js b/app/assets/javascripts/teamdashboard/teamdashboard_bundle.js index 4394e07f580..0e04ec3c052 100644 --- a/app/assets/javascripts/teamdashboard/teamdashboard_bundle.js +++ b/app/assets/javascripts/teamdashboard/teamdashboard_bundle.js @@ -2,33 +2,23 @@ import Vue from 'vue'; import VueResource from 'vue-resource'; +import TeamDashboardComponent from './components/teamdashboard.vue'; + +import '../vue_shared/vue_resource_api_interceptor'; + Vue.use(VueResource); document.addEventListener('DOMContentLoaded', () => { window.gl = window.gl || {}; - const target = gl.utils.getParameterByName('privateToken') || 'local'; + window.gl.target = gl.utils.getParameterByName('privateToken') || 'local'; const privateToken = gl.utils.getParameterByName('privateToken') || 'u8awsaDqQr-TDbrf8Kxq'; - const groupId = (target === 'local') ? 56 : 'gl-frontend'; - - const baseUrl = target === 'local' ? '/api/v4' : 'https://gitlab.com/api/v4'; - - - /*this.boards = Vue.resource(`${root}{/id}.json`, {}, { - issues: { - method: 'GET', - url: `${root}/${boardId}/issues.json` - } - });*/ + const groupId = (window.gl.target === 'local') ? 56 : 'gl-frontend'; + window.gl.baseUrl = window.gl.target === 'local' ? '/api/v4' : 'https://gitlab.com/api/v4'; - $.get({ - url: `${baseUrl}/groups/${groupId}?private_token=${privateToken}` - }); - $.get({ - url: `${baseUrl}/groups/${groupId}/members?private_token=${privateToken}` - }); +/* $.get({ url: `${baseUrl}/projects/gitlab-org%2fgitlab-ce/issues?milestone=9.3&assignee_username=timzallmann&private_token=${privateToken}`, @@ -36,14 +26,15 @@ document.addEventListener('DOMContentLoaded', () => { //alert(request.getResponseHeader('X-Total')); } }); + */ - /*new Vue({ - el: '#environments-list-view', + new Vue({ + el: '#team_dashboard-view', components: { - 'environments-table-app': EnvironmentsComponent, + 'teamdashboard-app': TeamDashboardComponent, }, - render: createElement => createElement('environments-table-app'), - });*/ + render: createElement => createElement('teamdashboard-app'), + }); }); diff --git a/app/assets/javascripts/teamdashboard/teamdashboard_mock.js b/app/assets/javascripts/teamdashboard/teamdashboard_mock.js new file mode 100644 index 00000000000..a5c6f02fc83 --- /dev/null +++ b/app/assets/javascripts/teamdashboard/teamdashboard_mock.js @@ -0,0 +1,19 @@ +/** + * Different Mock Configs for basic usage + */ + +const mockData = { + 'gl-frontend': { + currentMilestone: '9.3', + projects: [ + 'gitlab-org/gitlab-ce', + ], + groupIdentityLabels: [ + 'frontend', + 'Deliverable', + ], + deliverableLabel: 'Deliverable', + }, +}; + +export default mockData; diff --git a/app/assets/javascripts/vue_shared/vue_resource_api_interceptor.js b/app/assets/javascripts/vue_shared/vue_resource_api_interceptor.js new file mode 100644 index 00000000000..7f571b0ab9c --- /dev/null +++ b/app/assets/javascripts/vue_shared/vue_resource_api_interceptor.js @@ -0,0 +1,20 @@ +import Vue from 'vue'; +import VueResource from 'vue-resource'; + +Vue.use(VueResource); + +// Inject Private Token + Target URL +Vue.http.interceptors.push((request, next) => { + if (request.url.indexOf('[[API]]') > -1) { + const privateToken = gl.utils.getParameterByName('privateToken') || 'u8awsaDqQr-TDbrf8Kxq'; + const baseUrl = window.gl.target === 'local' ? '/api/v4' : 'https://gitlab.com/api/v4'; + + // eslint-disable-next-line no-param-reassign + request.url = request.url.replace('[[API]]', baseUrl); + + // eslint-disable-next-line no-param-reassign + request.headers['PRIVATE-TOKEN'] = privateToken; + } + + next(); +}); diff --git a/app/assets/stylesheets/pages/teamdashboard.scss b/app/assets/stylesheets/pages/teamdashboard.scss new file mode 100644 index 00000000000..ddd61f866eb --- /dev/null +++ b/app/assets/stylesheets/pages/teamdashboard.scss @@ -0,0 +1,57 @@ + +.issue-state { + border-left:solid 4px $white-normal; +} + +.issue-state-closed { + border-left-color: $green-500; +} + +.issue-state-opened, .issue-state-reopened { + border-left-color: $blue-500; +} + +.release-late { + .issue-state-opened, .issue-state-reopened { + border-left-color: $red-500; + } +} + +.teamdashboard { + .panel-heading { + h1,h2,h3,h4,h5 { + margin: 0; + } + + .text-muted { + font-weight:300; + color: $gl-gray-light; + } + } + + .issuable-detail { + display:none; + } + + .left-col { + clear:both; + } + +} + +.simulationpanel { + position: fixed; + top: 110px; + left: 20px; + z-index: 1000; + width: 200px; + + .panel-heading { + padding: 4px; + } + + .panel-content { + padding: 4px; + + } +} diff --git a/app/views/groups/team_dashboard/index.html.haml b/app/views/groups/team_dashboard/index.html.haml index ca8c481c0a2..8ea2830dd1b 100644 --- a/app/views/groups/team_dashboard/index.html.haml +++ b/app/views/groups/team_dashboard/index.html.haml @@ -4,4 +4,6 @@ = webpack_bundle_tag 'common_vue' = webpack_bundle_tag 'teamdashboard' - %script#js-board-template{ type: "text/x-template" }= render "projects/boards/components/board" +#team_dashboard-view + + -- cgit v1.2.1