Skip to content

Commit e7d419a

Browse files
thangavelethangavele
authored
Merge pull request #1 from MeenaAlagiah/master
Adding the Vue Kanban Getting Started video
2 parents f9a6b59 + 05b5d67 commit e7d419a

File tree

10 files changed

+249
-1
lines changed

10 files changed

+249
-1
lines changed

‎README.md‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,14 @@
1-
# getting-started-with-the-vue-kanban-component
1+
# Getting Started with the Vue Kanban Component
2+
A quick start Vue project that shows how to add the Vue Kanban Component to a Vue application. It includes a code snippet for binding data from the remote data source, enabling the swimlane feature, and setting custom height and width. It also includes a code snippet for adding a tooltip and validate columns.
3+
4+
Refer to the following documentation to learn about the Vue Kanban component:
5+
https://ej2.syncfusion.com/vue/documentation/kanban/getting-started-page
6+
7+
Check out this online example of the Vue Kanban Component:
8+
https://ej2.syncfusion.com/vue/demos/#/material3/kanban/default.html
9+
10+
Make sure that you have the latest versions of NodeJS and Visual Studio Code in your machine before starting to work on this project.
11+
12+
### How to run this application?
13+
14+
To run this application, you need to clone the `getting-started-with-the-vue-kanban-component` repository and then open it in Visual Studio Code. Now, simply install all the necessary vue packages into your current project using the `npm install` command and run your project using the `npm run dev` command.

‎index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + Vue</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.js"></script>
12+
</body>
13+
</html>

‎package.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "myvueapp",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"@syncfusion/ej2-vue-kanban": "^22.2.5",
13+
"vue": "^3.3.4"
14+
},
15+
"devDependencies": {
16+
"@vitejs/plugin-vue": "^4.2.3",
17+
"vite": "^4.4.5"
18+
}
19+
}

‎public/vite.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/App.vue‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
<script >
2+
import {KanbanComponent, ColumnsDirective, ColumnDirective} from '@syncfusion/ej2-vue-kanban'
3+
import {DataManager, ODataAdaptor} from '@syncfusion/ej2-data'
4+
export default {
5+
name: "App",
6+
components: {
7+
'ejs-kanban': KanbanComponent,
8+
'e-columns': ColumnsDirective,
9+
'e-column': ColumnDirective
10+
},
11+
data()
12+
{
13+
return{
14+
kanbanData: new DataManager(
15+
{
16+
url:'https://ej2services.syncfusion.com/production/web-services/api/Kanban',
17+
adaptor:new ODataAdaptor(),
18+
crossDomain:true
19+
}
20+
),
21+
// [
22+
// {
23+
// 'Id': 1,
24+
// 'Status': 'Open',
25+
// 'Summary': 'Analyze the new requirements gathered from the customer.',
26+
// 'Type': 'Story',
27+
// 'Priority': 'Low',
28+
// 'Tags': 'Analyze,Customer',
29+
// 'Estimate': 3.5,
30+
// 'Assignee': 'Nancy Davloio',
31+
// 'RankId': 1
32+
// },
33+
// {
34+
// 'Id': 2,
35+
// 'Status': 'InProgress',
36+
// 'Summary': 'Improve application performance',
37+
// 'Type': 'Improvement',
38+
// 'Priority': 'Normal',
39+
// 'Tags': 'Improvement',
40+
// 'Estimate': 6,
41+
// 'Assignee': 'Andrew Fuller',
42+
// 'RankId': 1
43+
// },
44+
// {
45+
// 'Id': 3,
46+
// 'Status': 'Testing',
47+
// 'Summary': 'Arrange a web meeting with the customer to get new requirements.',
48+
// 'Type': 'Others',
49+
// 'Priority': 'Critical',
50+
// 'Tags': 'Meeting',
51+
// 'Estimate': 5.5,
52+
// 'Assignee': 'Janet Leverling',
53+
// 'RankId': 2
54+
// },
55+
// {
56+
// 'Id': 4,
57+
// 'Status': 'Close',
58+
// 'Summary': 'Fix the issues reported in the IE browser.',
59+
// 'Type': 'Bug',
60+
// 'Priority': 'Release Breaker',
61+
// 'Tags': 'IE',
62+
// 'Estimate': 2.5,
63+
// 'Assignee': 'Janet Leverling',
64+
// 'RankId': 2
65+
// },
66+
// {
67+
// 'Id': 5,
68+
// 'Status': 'Open',
69+
// 'Summary': 'Fix the issues reported by the customer.',
70+
// 'Type': 'Bug',
71+
// 'Priority': 'Low',
72+
// 'Tags': 'Customer',
73+
// 'Estimate': '3.5',
74+
// 'Assignee': 'Steven walker',
75+
// 'RankId': 1
76+
// },
77+
// {
78+
// 'Id': 6,
79+
// 'Status': 'InProgress',
80+
// 'Summary': 'Arrange a web meeting with the customer to get the login page requirements.',
81+
// 'Type': 'Others',
82+
// 'Priority': 'Low',
83+
// 'Tags': 'Meeting',
84+
// 'Estimate': 2,
85+
// 'Assignee': 'Michael Suyama',
86+
// 'RankId': 1
87+
// },
88+
// {
89+
// 'Id': 7,
90+
// 'Status': 'Testing',
91+
// 'Summary': 'Validate new requirements',
92+
// 'Type': 'Improvement',
93+
// 'Priority': 'Low',
94+
// 'Tags': 'Validation',
95+
// 'Estimate': 1.5,
96+
// 'Assignee': 'Robert King',
97+
// 'RankId': 1
98+
// },
99+
// {
100+
// 'Id': 8,
101+
// 'Status': 'Close',
102+
// 'Summary': 'Login page validation',
103+
// 'Type': 'Story',
104+
// 'Priority': 'Release Breaker',
105+
// 'Tags': 'Validation,Fix',
106+
// 'Estimate': 2.5,
107+
// 'Assignee': 'Laura Callahan',
108+
// 'RankId': 2
109+
// }
110+
// ],
111+
cardSettings:{
112+
contentField:"Summary",
113+
headerField:"Id"
114+
},
115+
swimlaneSettings:{
116+
keyField:"Assignee"
117+
}
118+
}
119+
}
120+
}
121+
</script>
122+
123+
<template>
124+
<ejs-kanban :dataSource="kanbanData" keyField="Status" :cardSettings="cardSettings"
125+
height="100%"
126+
width="100%"
127+
:swimlaneSettings="swimlaneSettings"
128+
:enableTooltip="true"
129+
>
130+
<e-columns>
131+
<e-column headerText="To Do" keyField="Open" maxCount="1"></e-column>
132+
<e-column headerText="In Progress" keyField="InProgress"></e-column>
133+
<e-column headerText="Review" keyField="Review" ></e-column>
134+
<e-column headerText="Testing" keyField="Testing" minCount="3"></e-column>
135+
<e-column headerText="Done" keyField="Close"></e-column>
136+
</e-columns>
137+
</ejs-kanban>
138+
</template>
139+
140+
<style>
141+
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
142+
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
143+
@import '../node_modules/@syncfusion/ej2-layouts/styles/material.css';
144+
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
145+
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
146+
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
147+
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
148+
@import '../node_modules/@syncfusion/ej2-vue-kanban/styles/material.css';
149+
</style>

‎src/assets/vue.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/components/HelloWorld.vue‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<script setup>
2+
import { ref } from 'vue'
3+
4+
defineProps({
5+
msg: String,
6+
})
7+
8+
const count = ref(0)
9+
</script>
10+
11+
<template>
12+
<h1>{{ msg }}</h1>
13+
14+
<div class="card">
15+
<button type="button" @click="count++">count is {{ count }}</button>
16+
<p>
17+
Edit
18+
<code>components/HelloWorld.vue</code> to test HMR
19+
</p>
20+
</div>
21+
22+
<p>
23+
Check out
24+
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
25+
>create-vue</a
26+
>, the official Vue + Vite starter
27+
</p>
28+
<p>
29+
Install
30+
<a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
31+
in your IDE for a better DX
32+
</p>
33+
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
34+
</template>
35+
36+
<style scoped>
37+
.read-the-docs {
38+
color: #888;
39+
}
40+
</style>

‎src/main.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { createApp } from 'vue'
2+
import './style.css'
3+
import App from './App.vue'
4+
5+
createApp(App).mount('#app')

‎src/style.css‎

Whitespace-only changes.

‎vite.config.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { defineConfig } from 'vite'
2+
import vue from '@vitejs/plugin-vue'
3+
4+
// https://vitejs.dev/config/
5+
export default defineConfig({
6+
plugins: [vue()],
7+
})

0 commit comments

Comments
 (0)