= {
74 | [k: Type]: (
75 | state: State,
76 | payload?: any,
77 | elementName?: string,
78 | id?: number
79 | ) => void;
80 | };
81 | export type Actions = {
82 | [k: Type]: (context: any, payload?: any) => void;
83 | };
84 |
85 | export type HtmlChild = {
86 | text: string;
87 | children: HtmlChild[];
88 | _id?: number;
89 | };
90 |
91 | export type HtmlList = HtmlChild[];
92 |
--------------------------------------------------------------------------------
/src/views/HomeView.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
12 |
13 |
14 |
15 |
16 |
17 |
24 |
25 |
26 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
75 |
76 |
81 |
--------------------------------------------------------------------------------
/src/views/SplashView.vue:
--------------------------------------------------------------------------------
1 |
2 |
172 |
173 |
174 |
211 |
212 |
319 |
--------------------------------------------------------------------------------
/src/views/TreeView.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
17 |
23 |
--------------------------------------------------------------------------------
/tests/integration/supertest.spec.js:
--------------------------------------------------------------------------------
1 | const request = require('supertest');
2 | const mongoose = require('mongoose');
3 | let server;
4 | // const server = require('../../server/server');
5 | const accountRouter = require('../../server/routes/accountRouter');
6 | const projectRouter = require('../../server/routes/projectRouter');
7 | const authController = require('../../server/controllers/authController');
8 | const sinon = require('sinon');
9 |
10 | beforeAll(async () => {
11 | // connect to MongoDB before all tests
12 | await mongoose.connect(process.env.MONGO_URI, {
13 | useNewUrlParser: true,
14 | useUnifiedTopology: true
15 | });
16 | });
17 |
18 | afterAll(async () => {
19 | // disconnect from MongoDB after all tests
20 | await mongoose.disconnect();
21 | });
22 |
23 | let sandbox;
24 | let authenticateStub;
25 |
26 | beforeEach(() => {
27 | // create sinon sandbox to simplify working with fakes that need to be restored, eases cleanup
28 | sandbox = sinon.createSandbox();
29 |
30 | // create sinon stub (object) for the authenticate middleware
31 | authenticateStub = sandbox.stub(authController, 'authenticate');
32 |
33 | // in mock auth middleware, mock res.locals.username and res.locals.id to be the values from testAccount
34 | authenticateStub.callsFake((req, res, next) => {
35 | res.locals.username = testAccount.username;
36 | res.locals.id = testAccount.id;
37 | res.cookie('ssid', 'test token', { httpOnly: true });
38 | next();
39 | });
40 |
41 | // use the mock middleware by replacing the original middleware in the middleware chain
42 | // server.use(authController.authenticate);
43 |
44 | // create server/app AFTER stubbing authenticate middleware (so stub is made before a reference to authController.authenticate is set up when creating app)
45 | server = require('../../server/server');
46 | });
47 |
48 | afterEach(() => {
49 | // restore original middleware function after each test
50 | sandbox.restore();
51 | });
52 |
53 | describe('/projects projectRouter', () => {
54 | // make a testAccount
55 | const testAccount = {
56 | username: 'TestProjectOwner',
57 | id: '12345678',
58 | project_ids: ['1']
59 | };
60 |
61 | // make a testProject
62 | const testProject = {
63 | project_name: 'Test Project',
64 | projectObject: { state: 'state' },
65 | projectOwner: 'TestProjectOwner'
66 | };
67 |
68 | describe('find a project, GET to /find', () => {
69 | it('responds with 200 status', () => {
70 | return request(server)
71 | .get('/projects/find')
72 | .expect(200);
73 | });
74 |
75 | it('should retrieve all projects from the database', () => {});
76 | });
77 |
78 | describe('saving a project, POST to /saveProject', () => {
79 | it('responds with 201 status', () => {
80 | return request(server)
81 | .post('/projects/saveProject')
82 | .send(testProject) // sends the testProject in req.body
83 | .expect(201);
84 | });
85 | });
86 | });
87 |
--------------------------------------------------------------------------------
/tests/unit/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | env: {
3 | jest: true
4 | }
5 | }
--------------------------------------------------------------------------------
/tests/unit/App.spec.js:
--------------------------------------------------------------------------------
1 | import { shallowMount, mount } from '@vue/test-utils';
2 | import { describe, it, expect } from 'vitest';
3 | import { createRouter, createWebHistory } from 'vue-router';
4 | import { createStore } from 'vuex';
5 | import App from '@/App.vue';
6 | import NavBar from '@/components/NavBar.vue';
7 |
8 | describe('App.vue', () => {
9 | const router = createRouter({
10 | history: createWebHistory(),
11 | routes: [
12 | {
13 | path: '/',
14 | component: App,
15 | meta: {
16 | hideNavbar: true
17 | }
18 | }
19 | ]
20 | });
21 |
22 | const store = createStore({
23 | state() {
24 | return {};
25 | }
26 | });
27 |
28 | it('contains v-main element that wraps router-view', () => {
29 | const wrapper = shallowMount(App, {
30 | global: {
31 | plugins: [router, store]
32 | }
33 | });
34 | expect(wrapper.find('v-main')).toBeTruthy();
35 | expect(wrapper.find('v-main > router-view')).toBeTruthy();
36 | });
37 | });
38 |
39 | describe('App.vue', () => {
40 | // create store with fake properties
41 | const store = createStore({
42 | state() {
43 | return {
44 | store1: '',
45 | store2: '',
46 | componentNameInputValue: ''
47 | };
48 | }
49 | });
50 |
51 | const router = createRouter({
52 | history: createWebHistory(),
53 | routes: [
54 | {
55 | path: '/',
56 | component: App,
57 | meta: {
58 | hideNavbar: true
59 | }
60 | }
61 | ]
62 | });
63 | it('should renders elements found in children', () => {
64 | const wrapper = mount(App, {
65 | components: {
66 | NavBar
67 | },
68 | global: {
69 | plugins: [store, router]
70 | }
71 | });
72 | expect(wrapper.find('h1').exists()).toBeTruthy();
73 | });
74 |
75 | it('should renders elements found in children', () => {
76 | const wrapper = mount(App, {
77 | components: {
78 | NavBar
79 | },
80 | global: {
81 | plugins: [store, router]
82 | }
83 | });
84 | expect(wrapper.findComponent({ name: 'NavBar' }).exists()).toBeTruthy();
85 | });
86 | });
87 |
--------------------------------------------------------------------------------
/tests/unit/ChildrenMultiselect.spec.js:
--------------------------------------------------------------------------------
1 | import { shallowMount, mount, createVuexStore } from '@vue/test-utils';
2 | import { createStore } from 'vuex';
3 | import { describe, it, expect, vi } from 'vitest';
4 | import ChildrenMultiselect from '@/components/ChildrenMultiselect.vue';
5 | import VueMultiselect from 'vue-multiselect';
6 |
7 | describe('ChildrenMultiselect', () => {
8 | const store = createStore({
9 | state() {
10 | return {
11 | routes: {},
12 | componentMap: {}
13 | };
14 | }
15 | });
16 | it('properly renders div container', () => {
17 | const wrapper = mount(ChildrenMultiselect, {
18 | global: { plugins: [store] }
19 | });
20 | expect(wrapper.find('div').exists()).toBeTruthy();
21 | });
22 |
23 | it('properly renders children component', () => {
24 | const wrapper = mount(ChildrenMultiselect, {
25 | components: { VueMultiselect },
26 | global: { plugins: [store] }
27 | });
28 | expect(
29 | wrapper.findComponent({ name: 'VueMultiselect' }).exists()
30 | ).toBeTruthy();
31 | });
32 | });
33 |
--------------------------------------------------------------------------------
/tests/unit/Component.spec.js:
--------------------------------------------------------------------------------
1 | import { shallowMount, mount, createVuexStore } from '@vue/test-utils';
2 | import { createStore } from 'vuex';
3 | import { describe, it, expect, vi } from 'vitest';
4 | import Vue3DraggableResizable from 'vue3-draggable-resizable';
5 | import Component from '@/components/Component.vue';
6 |
7 | describe('Component.vue', () => {
8 | it('properly renders the html element of children', () => {
9 | const wrapper = mount(Component);
10 | expect(wrapper.find('h3').exists()).toBeTruthy();
11 | expect(wrapper.find('h1').exists()).toBeFalsy();
12 | expect(wrapper.find('div').exists()).toBeTruthy();
13 | expect(wrapper.find('h5').exists()).toBeFalsy();
14 | });
15 | });
16 |
17 | describe('Component.vue', () => {
18 | it('properly imports Vue3Draggable and renders the component', () => {
19 | const store = createStore({
20 | state() {
21 | return {
22 | store1: '',
23 | store2: ''
24 | };
25 | }
26 | });
27 |
28 | const wrapper = mount(Component, {
29 | components: {
30 | Vue3DraggableResizable
31 | },
32 | global: {
33 | plugins: [store]
34 | }
35 | });
36 | expect(
37 | wrapper.findComponent({ name: 'Vue3DraggableResizable' }).exists()
38 | ).toBeTruthy();
39 | });
40 | });
41 |
--------------------------------------------------------------------------------
/tests/unit/ComponentDisplay.spec.js:
--------------------------------------------------------------------------------
1 | import { shallowMount, mount } from '@vue/test-utils';
2 | import { createStore } from 'vuex';
3 | import { describe, it, expect } from 'vitest';
4 | import ComponentDisplay from '@/components/ComponentDisplay.vue';
5 | import Vue3DraggableResizable from 'vue3-draggable-resizable';
6 |
7 | describe('ComponentDisplay', () => {
8 | const store = createStore({
9 | state() {
10 | return {
11 | activeComponent: 'active',
12 | activeRoute: 'test',
13 | routes: {
14 | test: ["test"],
15 | },
16 | componentMap: {
17 | active: {
18 | children: [],
19 | },
20 | },
21 | };
22 | },
23 | });
24 | it('properly renders HTML element', () => {
25 | const wrapper = shallowMount(ComponentDisplay, {
26 | global: { plugins: [store] },
27 | });
28 |
29 | expect(wrapper.find('div').exists()).toBeTruthy();
30 | });
31 |
32 | it('properly renders children component', () => {
33 | const wrapper = mount(ComponentDisplay, {
34 | components: { Vue3DraggableResizable },
35 | global: { plugins: [store] },
36 | });
37 | expect(
38 | wrapper.findComponent({ name: 'Vue3DraggableResizable' }).exists()
39 | ).toBeTruthy();
40 | });
41 | });
42 |
--------------------------------------------------------------------------------
/tests/unit/HomeQueue.spec.js:
--------------------------------------------------------------------------------
1 | import { shallowMount, mount } from '@vue/test-utils';
2 | import { createStore } from 'vuex';
3 | import { describe, it, expect } from 'vitest';
4 | import HomeQueue from '@/components/HomeQueue.vue';
5 | import draggable from 'vuedraggable';
6 |
7 | describe('HomeQueue', () => {
8 | const store = createStore({
9 | state() {
10 | return {};
11 | },
12 | });
13 | it('properly renders children component', () => {
14 | const wrapper = mount(HomeQueue, {
15 | components: { draggable },
16 | global: { plugins: [store] },
17 | });
18 | expect(wrapper.findComponent({ name: 'draggable' }).exists()).toBeTruthy();
19 | });
20 | });
21 |
--------------------------------------------------------------------------------
/tests/unit/HomeSidebar.spec.js:
--------------------------------------------------------------------------------
1 | import { shallowMount, mount, createVuexStore } from '@vue/test-utils';
2 | import { createStore } from 'vuex';
3 | import HomeSidebar from '@/components/HomeSidebar.vue';
4 | import Icons from '@/components/Icons.vue';
5 | import ChildrenMultiselect from '@/components/ChildrenMultiselect.vue';
6 |
7 | describe('HomeSidebar.vue', () => {
8 | const store = createStore({
9 | state() {
10 | return {
11 | store1: '',
12 | store2: '',
13 | componentNameInputValue: ''
14 | };
15 | }
16 | });
17 | it('properly renders elements and checks to see proper wrapping', () => {
18 | const wrapper = shallowMount(HomeSidebar, {
19 | components: {
20 | ChildrenMultiselect,
21 | Icons
22 | },
23 | global: {
24 | plugins: [store]
25 | }
26 | });
27 | expect(wrapper.find('v-card')).toBeTruthy();
28 | expect(wrapper.find('v-card-actions > router-view')).toBeTruthy();
29 | });
30 |
31 | it('renders the ChildrenMultiselect component', () => {
32 | const wrapper = shallowMount(HomeSidebar, {
33 | components: {
34 | ChildrenMultiselect,
35 | Icons
36 | },
37 | global: {
38 | plugins: [store]
39 | }
40 | });
41 | expect(
42 | wrapper.findComponent({ name: 'ChildrenMultiselect' }).exists()
43 | ).toBeTruthy();
44 | });
45 | });
46 |
--------------------------------------------------------------------------------
/tests/unit/Icons.spec.js:
--------------------------------------------------------------------------------
1 | import { shallowMount } from '@vue/test-utils';
2 | import { createStore } from 'vuex';
3 | import { describe, it, expect, vi } from 'vitest';
4 | import Icons from '@/components/Icons.vue';
5 |
6 | describe('Icons', () => {
7 | const store = createStore({
8 | state() {
9 | return {
10 | icons: { elementName: 'previousElement' }
11 | };
12 | }
13 | });
14 |
15 | it('after button, elementName is changed to newElement', () => {
16 | const wrapper = shallowMount(Icons, {
17 | global: { plugins: [store] }
18 | });
19 |
20 | // wrapper.vm is Vue instance of mounted component, containing changeState function
21 | // spy will be object of changeState's metadata
22 | const spy = vi.spyOn(wrapper.vm, 'changeState');
23 | const button = wrapper.find('button');
24 | button.trigger('click');
25 |
26 | expect(spy.called).toBeTruthy();
27 | expect(spy.callCount).toEqual(1);
28 |
29 | button.trigger('click');
30 | expect(spy.callCount).toEqual(2);
31 |
32 | vi.restoreAllMocks();
33 |
34 | expect(spy.callCount).toEqual(0);
35 | });
36 | });
37 |
--------------------------------------------------------------------------------
/tests/unit/RouteDisplay.spec.js:
--------------------------------------------------------------------------------
1 | import { shallowMount, mount } from '@vue/test-utils';
2 | import { createStore } from 'vuex';
3 | import { describe, it, expect } from 'vitest';
4 | import RouteDisplay from '@/components/RouteDisplay.vue';
5 | import Routes from '@/components/Routes.vue';
6 |
7 | describe('RouteDisplay', () => {
8 | const store = createStore({
9 | state() {
10 | return {
11 | routes: {
12 | test: ["test"],
13 | },
14 | };
15 | },
16 | });
17 | it('properly renders HTML elements', () => {
18 | const wrapper = shallowMount(RouteDisplay, {
19 | global: { plugins: [store] },
20 | });
21 |
22 | expect(wrapper.find('strong').exists()).toBeTruthy();
23 | });
24 |
25 | it('properly renders children component', () => {
26 | const wrapper = mount(RouteDisplay, {
27 | components: { Routes },
28 | global: { plugins: [store] },
29 | });
30 | expect(
31 | wrapper.findComponent({ name: 'Routes' }).exists()
32 | ).toBeTruthy();
33 | });
34 | });
35 |
--------------------------------------------------------------------------------
/tests/unit/TreeGraph.spec.js:
--------------------------------------------------------------------------------
1 | import { shallowMount, mount } from '@vue/test-utils';
2 | import { createStore } from 'vuex';
3 | import { describe, it, expect } from 'vitest';
4 | import TreeGraph from '@/components/TreeGraph.vue';
5 | import VueTree from '@ssthouse/vue3-tree-chart';
6 |
7 | describe('TreeGraph', () => {
8 | const store = createStore({
9 | state() {
10 | return {
11 | componentMap: {},
12 | };
13 | },
14 | });
15 | it('properly renders HTML element', () => {
16 | const wrapper = shallowMount(TreeGraph, {
17 | global: { plugins: [store] },
18 | });
19 |
20 | expect(wrapper.find('div').exists()).toBeTruthy();
21 | });
22 |
23 | it('properly renders children component', () => {
24 | const wrapper = mount(TreeGraph, {
25 | components: { VueTree },
26 | global: { plugins: [store] },
27 | });
28 | expect(wrapper.findComponent({ name: 'VueTree' }).exists()).toBeTruthy();
29 | });
30 | });
31 |
--------------------------------------------------------------------------------
/tests/unit/__snapshots__/App.spec.js.snap:
--------------------------------------------------------------------------------
1 | // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2 |
3 | exports[`App.vue > renders App correctly 1`] = `
4 |
7 |
8 |
11 |
12 |
16 |
19 |
20 |
21 |
22 |
23 |
32 |
33 |
34 | `;
35 |
36 | exports[`App.vue > renders App correctly 2`] = `
37 |
40 |
41 |
44 |
45 |
49 |
52 |
53 |
54 |
55 |
56 |
65 |
66 |
67 | `;
68 |
69 | exports[`App.vue > renders html correct 1`] = `
70 |
73 |
74 |
77 |
78 |
82 |
85 |
86 |
87 |
88 |
89 |
98 |
99 |
100 | `;
101 |
102 | exports[`App.vue > renders html correctly 1`] = `
103 |
106 |
107 |
110 |
111 |
115 |
118 |
119 |
120 |
121 |
122 |
131 |
132 |
133 | `;
134 |
135 | exports[`App.vue renders correct 1`] = `
136 |
140 |
141 |
142 |
147 |
148 | `;
149 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ESNext",
4 | "useDefineForClassFields": true,
5 | "module": "ESNext",
6 | "moduleResolution": "Node",
7 | "jsx": "preserve",
8 | "resolveJsonModule": true,
9 | "isolatedModules": true,
10 | "esModuleInterop": true,
11 | "lib": ["ESNext", "DOM"],
12 | "skipLibCheck": true,
13 | "allowJs": true
14 | },
15 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
16 | "references": [{ "path": "./tsconfig.node.json" }]
17 | }
18 |
--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "composite": true,
4 | "module": "ESNext",
5 | "moduleResolution": "Node",
6 | "allowSyntheticDefaultImports": true
7 | },
8 | "include": ["vite.config.ts"]
9 | }
10 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | ///
2 | import { defineConfig } from 'vite';
3 | import vue from '@vitejs/plugin-vue';
4 | import checker from 'vite-plugin-checker';
5 | const path = require('path');
6 | export default defineConfig({
7 | plugins: [vue()],
8 | test: {
9 | globals: true,
10 | environment: 'jsdom'
11 | },
12 | resolve: {
13 | alias: {
14 | '@': path.resolve(__dirname, './src')
15 | }
16 | },
17 | server: {
18 | host: '0.0.0.0',
19 | port: 4173,
20 | proxy: {
21 | '/users': {
22 | target: 'http://localhost:8080',
23 | changeOrigin: true,
24 | secure: false
25 | }
26 | }
27 | }
28 | });
29 |
--------------------------------------------------------------------------------
3 | 
32 |
33 | 
52 |
53 | #### Editing Components
54 |
55 | - Double click elements to bring up the modal view
56 | - Add additional elements to a component with a live preview of the component code
57 | - Drag elements on the right side bar to nest elements
58 | - Establish parent-child component relationships via the dropdown menu when creating or editing components
59 |
60 |
61 | 
62 |
63 | #### Adding Routes
64 |
65 | - Create different routes that represent different Views for your app.
66 | - Any components created on a given route will be automatically saved to that route
67 | - See your application’s hierarchy by clicking the ‘Tree’ icon in the navigation bar
68 |
69 | 
71 | 
77 |
78 | 
90 |
91 | ##### Code Exporting
92 |
93 | Below is the generated directory structure of the Vue application that is created when you export your design.
94 |
95 | ```
96 | src/
97 | assets/
98 | App.vue
99 | components/
100 | UserCreatedComponent1.vue
101 | UserCreatedComponent2.vue
102 | ...
103 | views/
104 | HomeView.vue
105 | UserCreatedRouteComponent1.vue
106 | UserCreatedRouteComponent2.vue
107 | ...
108 | ```
109 | ## Running your own local version
110 |
111 |
112 | ### Setup
113 |
114 | Clone this repo
115 |
116 | ```
117 | git clone https://github.com/oslabs/PreVue.git
118 | ```
119 |
120 | Install dependencies
121 |
122 | ```
123 | npm i
124 | ```
125 | Build the app
126 |
127 | ```
128 | npm run build
129 | ```
130 | Run the app
131 |
132 | ```
133 | npm run server
134 | ```
135 |
136 | Go to http://localhost:8080 to use PreVue!
137 |
138 | ## Built With
139 |
140 | ---
141 |
142 | - [Vue.js](https://vuejs.org/)
143 | - [Vue Router](https://router.vuejs.org/guide/#html)
144 | - [Vuex](https://vuex.vuejs.org/)
145 | - [Vite](https://vitejs.dev/)
146 | - [Vuetify](https://vuetifyjs.com/)
147 | - [Jest](https://jestjs.io/)
148 | - [SuperTest](https://www.npmjs.com/package/supertest)
149 |
150 | ## Contributing
151 |
152 | ---
153 |
154 | PreVue We encourage you to submit issues for any bugs or ideas for enhancements. Please feel free to fork this repo and submit pull requests to contribute as well. Also follow PreVue on [LinkedIn](https://www.linkedin.com/company/prevue-live/) for more updates.
155 |
156 | ## Authors
157 |
158 | ---
159 | PreVue 2.0
160 | - **Jason Boo** [@jasonboo123](https://github.com/jasonboo123)
161 | - **Robert Drake** [@rmdrake8](https://github.com/rmdrake8)
162 | - **Sean Flynn** [@seanflynn5](http://github.com/seanflynn5)
163 | - **Zach Pestaina** [@zachpestaina](https://github.com/zachpestaina)
164 |
165 | PreVue 1.0
166 | - **Hubert Lin** [@hubelin](https://github.com/hubelin)
167 | - **Franklin Pinnock** [@pinnockf](https://github.com/pinnockf)
168 | - **Annette Lin** [@al2613](https://github.com/al2613)
169 | - **Daniel Shu** [@danshuu](https://github.com/danshuu)
170 |
171 | ## License
172 |
173 | ---
174 |
175 | This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
176 |
--------------------------------------------------------------------------------
/build/icon.icns:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/PreVue/d5ebfce8e0ff71ab2413b6f806c8789937a7986d/build/icon.icns
--------------------------------------------------------------------------------
/build/icon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/PreVue/d5ebfce8e0ff71ab2413b6f806c8789937a7986d/build/icon.ico
--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/PreVue/d5ebfce8e0ff71ab2413b6f806c8789937a7986d/favicon.ico
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
15 |
16 | 
11 | 
125 | 
135 | 
145 |