├── README.md
├── robot-home.png
└── src
    ├── assets
        ├── build-a-bot-logo.png
        └── robot-home.png
    ├── build
        ├── PartSelector.vue
        ├── RobotBuilder-preview.css
        ├── RobotBuilder-preview.html
        ├── RobotBuilder.css
        ├── RobotBuilder.html
        └── images
        │   ├── arm-articulated-claw.png
        │   ├── arm-dual-claw.png
        │   ├── arm-grabber.png
        │   ├── arm-propeller.png
        │   ├── arm-stubby-claw.png
        │   ├── base-double-wheel.png
        │   ├── base-rocket.png
        │   ├── base-single-wheel.png
        │   ├── base-spring.png
        │   ├── base-triple-wheel.png
        │   ├── head-big-eye.png
        │   ├── head-friendly.png
        │   ├── head-shredder.png
        │   ├── head-single-eye.png
        │   ├── head-surveillance.png
        │   ├── torso-flexible-gauged.png
        │   ├── torso-gauged.png
        │   └── torso-pouch.png
    ├── cart
        └── ShoppingCart.vue
    ├── data
        └── parts.js
    ├── header.css
    ├── parts
        ├── BrowseParts.vue
        ├── RobotArms.vue
        ├── RobotBases.vue
        ├── RobotHeads.vue
        └── RobotTorsos.vue
    ├── search
        ├── Search.vue
        ├── useFilters.js
        ├── usePagination.js
        └── useSearch.js
    └── store
        └── modules
            └── users.js


/README.md:
--------------------------------------------------------------------------------
1 | # vue-fundamentals
2 | Repo for working with the Pluralsight Vue Fundamentals course available here: https://www.pluralsight.com/courses/vuejs-fundamentals
3 | 
4 | 


--------------------------------------------------------------------------------
/robot-home.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jmcooper/vuejs-fundamentals/a781865e23b0921603c9bfe8931d1980d6e20aa3/robot-home.png


--------------------------------------------------------------------------------
/src/assets/build-a-bot-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jmcooper/vuejs-fundamentals/a781865e23b0921603c9bfe8931d1980d6e20aa3/src/assets/build-a-bot-logo.png


--------------------------------------------------------------------------------
/src/assets/robot-home.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jmcooper/vuejs-fundamentals/a781865e23b0921603c9bfe8931d1980d6e20aa3/src/assets/robot-home.png


--------------------------------------------------------------------------------
/src/build/PartSelector.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="part">
  3 |     <img :src="selectedPart.src" title="arm"/>
  4 |     <button @click="selectPreviousPart()" class="prev-selector"></button>
  5 |     <button @click="selectNextPart()" class="next-selector"></button>
  6 |     <span class="sale" v-show="selectedPart.onSale">Sale!</span>
  7 |   </div>
  8 | </template>
  9 | 
 10 | <script>
 11 | import availableParts from '../data/parts';
 12 | 
 13 | const parts = availableParts.heads;
 14 | 
 15 | function getPreviousValidIndex(index, length) {
 16 |   const deprecatedIndex = index - 1;
 17 |   return deprecatedIndex < 0 ? length - 1 : deprecatedIndex;
 18 | }
 19 | 
 20 | function getNextValidIndex(index, length) {
 21 |   const incrementedIndex = index + 1;
 22 |   return incrementedIndex > length - 1 ? 0 : incrementedIndex;
 23 | }
 24 | 
 25 | export default {
 26 |   data() {
 27 |     return { selectedPartIndex: 0 };
 28 |   },
 29 |   computed: {
 30 |     selectedPart() {
 31 |       return parts[this.selectedPartIndex];
 32 |     },
 33 |   },
 34 |   methods: {
 35 |     selectNextPart() {
 36 |       this.selectedPartIndex = getNextValidIndex(
 37 |         this.selectedPartIndex,
 38 |         parts.length,
 39 |       );
 40 |     },
 41 |     selectPreviousPart() {
 42 |       this.selectedPartIndex = getPreviousValidIndex(
 43 |         this.selectedPartIndex,
 44 |         parts.length,
 45 |       );
 46 |     },
 47 | 
 48 |   },
 49 | };
 50 | 
 51 | </script>
 52 | 
 53 | <style scoped>
 54 | .part {
 55 |   position: relative;
 56 |   width:165px;
 57 |   height:165px;
 58 |   border: 3px solid #aaa;
 59 | }
 60 | .sale {
 61 |   position: absolute;
 62 |   bottom: 5px;
 63 |   right: 5px;
 64 |   color: white;
 65 |   background-color: red;
 66 |   padding: 3px;
 67 | }
 68 | .part-title {
 69 |   position: absolute;
 70 |   width: 100%;
 71 |   text-align: center;
 72 |   font-size: 18px;
 73 |   color: red;
 74 |   padding-top: 5px;
 75 |   top: -25px;
 76 | }
 77 | .part img {
 78 |   width:165px;
 79 | }
 80 | .top {
 81 |   border-bottom: none;
 82 | }
 83 | .left {
 84 |   border-right: none;
 85 | }
 86 | .right {
 87 |   border-left: none;
 88 | }
 89 | .bottom {
 90 |   border-top: none;
 91 | }
 92 | .left img {
 93 |   transform: rotate(-90deg);
 94 | }
 95 | .right img {
 96 |   transform: rotate(90deg);
 97 | }
 98 | .prev-selector {
 99 |   position: absolute;
100 |   z-index:1;
101 |   top: -3px;
102 |   left: -28px;
103 |   width: 25px;
104 |   height: 171px;
105 | }
106 | .next-selector {
107 |   position: absolute;
108 |   z-index:1;
109 |   top: -3px;
110 |   right: -28px;
111 |   width: 25px;
112 |   height: 171px;
113 | }
114 | .left .prev-selector:after,  .right .prev-selector:after{
115 |   content: '\25B2'
116 | }
117 | .left .next-selector:after, .right .next-selector:after {
118 |   content: '\25BC'
119 | }
120 | .top .prev-selector:after, .bottom .prev-selector:after, .center .prev-selector:after{
121 |   content: '\25C4'
122 | }
123 | .top .next-selector:after, .bottom .next-selector:after, .center .next-selector:after{
124 |   content: '\25BA'
125 | }
126 | .center .prev-selector, .center .next-selector {
127 |   opacity:0.8;
128 | }
129 | .left .prev-selector {
130 |   top: -28px;
131 |   left: -3px;
132 |   width: 144px;
133 |   height: 25px;
134 | }
135 | .left .next-selector {
136 |   top: auto;
137 |   bottom: -28px;
138 |   left: -3px;
139 |   width: 144px;
140 |   height: 25px;
141 | }
142 | .right .prev-selector {
143 |   top: -28px;
144 |   left: 24px;
145 |   width: 144px;
146 |   height: 25px;
147 | }
148 | .right .next-selector {
149 |   top: auto;
150 |   bottom: -28px;
151 |   left: 24px;
152 |   width: 144px;
153 |   height: 25px;
154 | }
155 | .highlight {
156 |   border: 1px solid red;
157 | }
158 | </style>
159 | 


--------------------------------------------------------------------------------
/src/build/RobotBuilder-preview.css:
--------------------------------------------------------------------------------
 1 | .preview {
 2 |   position: absolute;
 3 |   top: -20px;
 4 |   right: 0;
 5 |   width: 210px;
 6 |   height: 210px;
 7 |   padding: 5px;
 8 | }
 9 | .preview-content {
10 |   border: 1px solid #999;
11 | }
12 | .preview img {
13 |   width: 50px;
14 |   height: 50px;
15 | }
16 | .rotate-right {
17 |   transform: rotate(90deg);
18 | }
19 | .rotate-left {
20 |   transform: rotate(-90deg);
21 | }
22 | 


--------------------------------------------------------------------------------
/src/build/RobotBuilder-preview.html:
--------------------------------------------------------------------------------
 1 |     <div class="preview">
 2 |       <div class="preview-content">
 3 |         <div class="top-row">
 4 |           <img :src="selectedRobot.head.src"/>
 5 |         </div>
 6 |         <div class="middle-row">
 7 |           <img :src="selectedRobot.leftArm.src" class="rotate-left"/>
 8 |           <img :src="selectedRobot.torso.src"/>
 9 |           <img :src="selectedRobot.rightArm.src" class="rotate-right"/>
10 |         </div>
11 |         <div class="bottom-row">
12 |           <img :src="selectedRobot.base.src"/>
13 |         </div>
14 |       </div>
15 |     </div>
16 | 


--------------------------------------------------------------------------------
/src/build/RobotBuilder.css:
--------------------------------------------------------------------------------
 1 | .part {
 2 |   position: relative;
 3 |   width:165px;
 4 |   height:165px;
 5 |   border: 3px solid #aaa;
 6 | } 
 7 | .part img {
 8 |   width:165px;
 9 | }
10 | .top-row {
11 |   display:flex;
12 |   justify-content: space-around;
13 | }
14 | .middle-row {
15 |   display:flex;
16 |   justify-content: center;
17 | }
18 | .bottom-row {
19 |   display:flex;
20 |   justify-content: space-around;
21 |   border-top: none;
22 | }
23 | .head {
24 |   border-bottom: none;
25 | }
26 | .left {
27 |   border-right: none;
28 | }
29 | .right {
30 |   border-left: none;
31 | }
32 | .left img {
33 |   transform: rotate(-90deg);
34 | }
35 | .right img {
36 |   transform: rotate(90deg);
37 | }
38 | .bottom {
39 |   border-top: none;
40 | }
41 | .prev-selector {
42 |   position: absolute;
43 |   z-index:1;
44 |   top: -3px;
45 |   left: -28px;
46 |   width: 25px;
47 |   height: 171px;
48 | }
49 | .next-selector {
50 |   position: absolute;
51 |   z-index:1;
52 |   top: -3px;
53 |   right: -28px;
54 |   width: 25px;
55 |   height: 171px;
56 | }
57 | .center .prev-selector, .center .next-selector {
58 |   opacity:0.8;
59 | }
60 | .left .prev-selector {
61 |   top: -28px;
62 |   left: -3px;
63 |   width: 144px;
64 |   height: 25px;
65 | }
66 | .left .next-selector {
67 |   top: auto;
68 |   bottom: -28px;
69 |   left: -3px;    
70 |   width: 144px;
71 |   height: 25px;
72 | }
73 | .right .prev-selector {
74 |   top: -28px;
75 |   left: 24px;  
76 |   width: 144px;
77 |   height: 25px;
78 | }
79 | .right .next-selector {
80 |   top: auto;
81 |   bottom: -28px;
82 |   left: 24px;    
83 |   width: 144px;
84 |   height: 25px;
85 | }
86 | .right .next-selector {
87 |   right: -3px;
88 | }
89 | 


--------------------------------------------------------------------------------
/src/build/RobotBuilder.html:
--------------------------------------------------------------------------------
 1 |   <div>
 2 |     <div class="top-row">
 3 |       <div class="top part">
 4 |         <img src="./images/head-big-eye.png" title="head"/>
 5 |         <button class="prev-selector">&#9668;</button>
 6 |         <button class="next-selector">&#9658;</button>
 7 |       </div>
 8 |     </div>
 9 |     <div class="middle-row">
10 |       <div class="left part">
11 |         <img src="./images/arm-articulated-claw.png" title="left arm"/>
12 |         <button class="prev-selector">&#9650;</button>
13 |         <button class="next-selector">&#9660;</button>
14 |       </div>
15 |       <div class="center part">
16 |         <img src="./images/torso-flexible-gauged.png" title="left arm"/>
17 |         <button class="prev-selector">&#9668;</button>
18 |         <button class="next-selector">&#9658;</button>
19 |       </div>
20 |       <div class="right part">
21 |         <img src="./images/arm-dual-claw.png" title="left arm"/>
22 |         <button class="prev-selector">&#9650;</button>
23 |         <button class="next-selector">&#9660;</button>
24 |       </div>
25 |     </div>
26 |     <div class="bottom-row">
27 |       <div class="bottom part">
28 |         <img src="./images/base-single-wheel.png" title="left arm"/>
29 |         <button class="prev-selector">&#9668;</button>
30 |         <button class="next-selector">&#9658;</button>
31 |       </div>
32 |     </div>
33 |   </div>
34 | 


--------------------------------------------------------------------------------
/src/build/images/arm-articulated-claw.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jmcooper/vuejs-fundamentals/a781865e23b0921603c9bfe8931d1980d6e20aa3/src/build/images/arm-articulated-claw.png


--------------------------------------------------------------------------------
/src/build/images/arm-dual-claw.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jmcooper/vuejs-fundamentals/a781865e23b0921603c9bfe8931d1980d6e20aa3/src/build/images/arm-dual-claw.png


--------------------------------------------------------------------------------
/src/build/images/arm-grabber.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jmcooper/vuejs-fundamentals/a781865e23b0921603c9bfe8931d1980d6e20aa3/src/build/images/arm-grabber.png


--------------------------------------------------------------------------------
/src/build/images/arm-propeller.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jmcooper/vuejs-fundamentals/a781865e23b0921603c9bfe8931d1980d6e20aa3/src/build/images/arm-propeller.png


--------------------------------------------------------------------------------
/src/build/images/arm-stubby-claw.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jmcooper/vuejs-fundamentals/a781865e23b0921603c9bfe8931d1980d6e20aa3/src/build/images/arm-stubby-claw.png


--------------------------------------------------------------------------------
/src/build/images/base-double-wheel.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jmcooper/vuejs-fundamentals/a781865e23b0921603c9bfe8931d1980d6e20aa3/src/build/images/base-double-wheel.png


--------------------------------------------------------------------------------
/src/build/images/base-rocket.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jmcooper/vuejs-fundamentals/a781865e23b0921603c9bfe8931d1980d6e20aa3/src/build/images/base-rocket.png


--------------------------------------------------------------------------------
/src/build/images/base-single-wheel.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jmcooper/vuejs-fundamentals/a781865e23b0921603c9bfe8931d1980d6e20aa3/src/build/images/base-single-wheel.png


--------------------------------------------------------------------------------
/src/build/images/base-spring.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jmcooper/vuejs-fundamentals/a781865e23b0921603c9bfe8931d1980d6e20aa3/src/build/images/base-spring.png


--------------------------------------------------------------------------------
/src/build/images/base-triple-wheel.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jmcooper/vuejs-fundamentals/a781865e23b0921603c9bfe8931d1980d6e20aa3/src/build/images/base-triple-wheel.png


--------------------------------------------------------------------------------
/src/build/images/head-big-eye.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jmcooper/vuejs-fundamentals/a781865e23b0921603c9bfe8931d1980d6e20aa3/src/build/images/head-big-eye.png


--------------------------------------------------------------------------------
/src/build/images/head-friendly.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jmcooper/vuejs-fundamentals/a781865e23b0921603c9bfe8931d1980d6e20aa3/src/build/images/head-friendly.png


--------------------------------------------------------------------------------
/src/build/images/head-shredder.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jmcooper/vuejs-fundamentals/a781865e23b0921603c9bfe8931d1980d6e20aa3/src/build/images/head-shredder.png


--------------------------------------------------------------------------------
/src/build/images/head-single-eye.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jmcooper/vuejs-fundamentals/a781865e23b0921603c9bfe8931d1980d6e20aa3/src/build/images/head-single-eye.png


--------------------------------------------------------------------------------
/src/build/images/head-surveillance.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jmcooper/vuejs-fundamentals/a781865e23b0921603c9bfe8931d1980d6e20aa3/src/build/images/head-surveillance.png


--------------------------------------------------------------------------------
/src/build/images/torso-flexible-gauged.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jmcooper/vuejs-fundamentals/a781865e23b0921603c9bfe8931d1980d6e20aa3/src/build/images/torso-flexible-gauged.png


--------------------------------------------------------------------------------
/src/build/images/torso-gauged.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jmcooper/vuejs-fundamentals/a781865e23b0921603c9bfe8931d1980d6e20aa3/src/build/images/torso-gauged.png


--------------------------------------------------------------------------------
/src/build/images/torso-pouch.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jmcooper/vuejs-fundamentals/a781865e23b0921603c9bfe8931d1980d6e20aa3/src/build/images/torso-pouch.png


--------------------------------------------------------------------------------
/src/cart/ShoppingCart.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>Cart</h1>
 4 |     <table>
 5 |       <thead>
 6 |         <tr>
 7 |           <th class="robot-title">
 8 |             Robot
 9 |           </th>
10 |           <th class="cost">
11 |             Cost
12 |           </th>
13 |         </tr>
14 |       </thead>
15 |       <tbody>
16 |         <tr v-for="(robot, index) in cart" :key="index">
17 |           <td class="robot-title">
18 |             {{robot.head.title}}
19 |           </td>
20 |           <td class="cost">
21 |             {{robot.cost}}
22 |           </td>
23 |         </tr>
24 |       </tbody>
25 |     </table>
26 |  </div>
27 | </template>
28 | 
29 | <script>
30 | export default {
31 |   name: 'Cart',
32 | };
33 | </script>
34 | 
35 | <style scoped>
36 |   td, th {
37 |     padding: 5px;
38 |   }
39 |   .robot-title {
40 |     text-align: left;
41 |     padding-right: 200px;
42 |   }
43 |   .cost {
44 |     text-align: right;
45 |   }
46 | </style>
47 | 


--------------------------------------------------------------------------------
/src/data/parts.js:
--------------------------------------------------------------------------------
  1 | const images = require.context('./images', true, /\.png$/)
  2 | 
  3 | const parts = {
  4 |   heads: [
  5 |     {
  6 |       id: 1,
  7 |       description:
  8 |         'A robot head with an unusually large eye and teloscpic neck -- excellent for exploring high spaces.',
  9 |       title: 'Large Cyclops',
 10 |       src: images('./head-big-eye.png'),
 11 |       type: 'heads',
 12 |       cost: 1225.5
 13 |     },
 14 |     {
 15 |       id: 2,
 16 |       description: 'A friendly robot head with two eyes and a smile -- great for domestic use.',
 17 |       title: 'Friendly Bot',
 18 |       src: images('./head-friendly.png'),
 19 |       cost: 945.0,
 20 |       type: 'heads',
 21 |       onSale: true
 22 |     },
 23 |     {
 24 |       id: 3,
 25 |       description:
 26 |         'A large three-eyed head with a shredder for a mouth -- great for crushing light medals or shredding documents.',
 27 |       title: 'Shredder',
 28 |       src: images('./head-shredder.png'),
 29 |       type: 'heads',
 30 |       cost: 1275.5
 31 |     },
 32 |     {
 33 |       id: 4,
 34 |       description:
 35 |         'A simple single-eyed head -- simple and inexpensive.',
 36 |       title: 'Small Cyclops',
 37 |       src: images('./head-single-eye.png'),
 38 |       type: 'heads',
 39 |       cost: 750.0
 40 |     },
 41 |     {
 42 |       id: 5,
 43 |       description:
 44 |         'A robot head with three oscillating eyes -- excellent for surveillance.',
 45 |       title: 'Surveillance Bot',
 46 |       src: images('./head-surveillance.png'),
 47 |       type: 'heads',
 48 |       cost: 1255.5
 49 |     }
 50 |   ],
 51 |   arms: [
 52 |     {
 53 |       id: 1,
 54 |       description: 'An articulated arm with a claw -- great for reaching around corners or working in tight spaces.',
 55 |       title: 'Articulated',
 56 |       src: images('./arm-articulated-claw.png'),
 57 |       type: 'arms',
 58 |       cost: 275
 59 |     },
 60 |     {
 61 |       id: 2,
 62 |       description: 'An arm with two independent claws -- great when you need an extra hand. Need four hands? Equip your bot with two of these arms.',
 63 |       title: 'Two Clawed',
 64 |       src: images('./arm-dual-claw.png'),
 65 |       type: 'arms',
 66 |       cost: 285
 67 |     },
 68 |     {
 69 |       id: 3,
 70 |       description: 'A telescoping arm with a grabber.',
 71 |       title: 'Grabber',
 72 |       src: images('./arm-grabber.png'),
 73 |       type: 'arms',
 74 |       cost: 205.5
 75 |     },
 76 |     {
 77 |       id: 4,
 78 |       description: 'An arm with a propeller -- good for propulsion or as a cooling fan.',
 79 |       title: 'Propeller',
 80 |       src: images('./arm-propeller.png'),
 81 |       type: 'arms',
 82 |       cost: 230,
 83 |       onSale: true
 84 |     },
 85 |     {
 86 |       id: 5,
 87 |       description: 'A short and stubby arm with a claw -- simple, but cheap.',
 88 |       title: 'Stubby Claw',
 89 |       src: images('./arm-stubby-claw.png'),
 90 |       type: 'arms',
 91 |       cost: 125
 92 |     }
 93 |   ],
 94 |   torsos: [
 95 |     {
 96 |       id: 1,
 97 |       description: 'A torso that can bend slightly at the waist and equiped with a heat guage.',
 98 |       title: 'Flexible Gauged',
 99 |       src: images('./torso-flexible-gauged.png'),
100 |       type: 'torsos',
101 |       cost: 1575
102 |     },
103 |     {
104 |       id: 2,
105 |       description: 'A less flexible torso with a battery gauge.',
106 |       title: 'Gauged',
107 |       src: images('./torso-gauged.png'),
108 |       type: 'torsos',
109 |       cost: 1385
110 |     },
111 |     {
112 |       id: 3,
113 |       description: 'A simple torso with a pouch for carrying items.',
114 |       title: 'Gauged',
115 |       src: images('./torso-pouch.png'),
116 |       type: 'torsos',
117 |       cost: 785,
118 |       onSale: true
119 |     }
120 |   ],
121 |   bases: [
122 |     {
123 |       id: 1,
124 |       description: 'A two wheeled base with an accelerometer for stability.',
125 |       title: 'Double Wheeled',
126 |       src: images('./base-double-wheel.png'),
127 |       type: 'bases',
128 |       cost: 895
129 |     },
130 |     {
131 |       id: 2,
132 |       description: 'A rocket base capable of high speed, controlled flight.',
133 |       title: 'Rocket',
134 |       src: images('./base-rocket.png'),
135 |       type: 'bases',
136 |       cost: 1520.5
137 |     },
138 |     {
139 |       id: 3,
140 |       description: 'A single-wheeled base with an accelerometer capable of higher speeds and navigating rougher terrain than the two-wheeled variety.',
141 |       title: 'Single Wheeled',
142 |       src: images('./base-single-wheel.png'),
143 |       type: 'bases',
144 |       cost: 1190.5
145 |     },
146 |     {
147 |       id: 4,
148 |       description: 'A spring base - great for reaching high places.',
149 |       title: 'Spring',
150 |       src: images('./base-spring.png'),
151 |       type: 'bases',
152 |       cost: 1190.5
153 |     },
154 |     {
155 |       id: 5,
156 |       description: 'An inexpensive three-wheeled base. only capable of slow speeds and can only function on smooth surfaces.',
157 |       title: 'Triple Wheeled',
158 |       src: images('./base-triple-wheel.png'),
159 |       type: 'bases',
160 |       cost: 700.5
161 |     }
162 |   ]
163 | }
164 | export default parts
165 | 


--------------------------------------------------------------------------------
/src/header.css:
--------------------------------------------------------------------------------
 1 | header {
 2 |   background-color: #999;
 3 |   width: 1084px;
 4 |   margin: 0 auto;
 5 | }
 6 | ul {
 7 |   padding: 3px;
 8 |   display: flex;
 9 | }
10 | .nav-item {
11 |   display: inline-block;
12 |   padding: 5px 10px;
13 |   font-size: 22px;
14 |   border-right: 1px solid #bbb;
15 | }
16 | .logo {
17 |   vertical-align: middle;
18 |   height: 30px;
19 | }
20 | 


--------------------------------------------------------------------------------
/src/parts/BrowseParts.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>Browse Parts</h1>
 4 |     <ul class="menu">
 5 |       <li>Heads</li>
 6 |       <li>Arms</li>
 7 |       <li>Torsos</li>
 8 |       <li>Bases</li>
 9 |     </ul>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | export default {
15 |   name: 'BrowseParts',
16 | };
17 | </script>
18 | 
19 | <style scoped>
20 |   h1 {
21 |     text-align: center;
22 |   }
23 |   .menu {
24 |     display: flex;
25 |     justify-content: space-around;
26 |     margin: 0 100px;
27 |     font-size: 20px;
28 |   }
29 |   ul {
30 |     list-style-type: none;
31 |   }
32 |   a {
33 |     color: palevioletred;
34 |   }
35 | </style>
36 | 


--------------------------------------------------------------------------------
/src/parts/RobotArms.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>Arms</h2>
 4 |     The arms are how your robot will interact with the world.
 5 |     They come in a variety of shapes and functions.
 6 |     <div v-for="(arm, idx) in arms" :key="idx">
 7 |       <h4>{{arm.title}}</h4>
 8 |       <div>{{arm.description}}</div>
 9 |     </div>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | import parts from '../data/parts';
15 | 
16 | export default {
17 |   name: 'RobotArms',
18 |   data() {
19 |     return { arms: parts.arms };
20 |   },
21 | };
22 | </script>
23 | 


--------------------------------------------------------------------------------
/src/parts/RobotBases.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>Bases</h2>
 4 |     The Base is critical to the mobility of your robot. Be
 5 |     sure to choose a base that will work well with the terrain
 6 |     where your robot needs to operate.
 7 |     <div v-for="(base, idx) in bases" :key="idx">
 8 |       <h4>{{base.title}}</h4>
 9 |       <div>{{base.description}}</div>
10 |     </div>
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | import parts from '../data/parts';
16 | 
17 | export default {
18 |   name: 'RobotBases',
19 |   data() {
20 |     return { bases: parts.bases };
21 |   },
22 | };
23 | </script>
24 | 


--------------------------------------------------------------------------------
/src/parts/RobotHeads.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>Heads</h2>
 4 |     The head is where the brain of your robot will reside. Heads have
 5 |     different capabilities so be sure to choose the one that fits your needs.
 6 |     <div v-for="(head, idx) in heads" :key="idx">
 7 |       <h4>{{head.title}}</h4>
 8 |       <div>{{head.description}}</div>
 9 |     </div>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | import parts from '../data/parts';
15 | 
16 | export default {
17 |   name: 'RobotHeads',
18 |   data() {
19 |     return { heads: parts.heads };
20 |   },
21 | };
22 | </script>
23 | 


--------------------------------------------------------------------------------
/src/parts/RobotTorsos.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>Torsos</h2>
 4 |     The torso is the central part of your robot that holds everything
 5 |     together. Choosing the right torso will help ensure your robot
 6 |     functions well with the parts you choose.
 7 |     <div v-for="(torso, idx) in torsos" :key="idx">
 8 |       <h4>{{torso.title}}</h4>
 9 |       <div>{{torso.description}}</div>
10 |     </div>
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | import parts from '../data/parts';
16 | 
17 | export default {
18 |   name: 'RobotTorsos',
19 |   data() {
20 |     return { torsos: parts.torsos };
21 |   },
22 | };
23 | </script>
24 | 


--------------------------------------------------------------------------------
/src/search/Search.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div>
  4 |       <input
  5 |         placeholder="Enter Search Term"
  6 |         @input="search($event.target.value)"
  7 |       />
  8 |     </div>
  9 |     <div class="filters">
 10 |       <div><button @click="applyFilters({type:'heads'})">Filter for Heads</button></div>
 11 |       <div><button @click="applyFilters({type:'arms'})">Filter for Arms</button></div>
 12 |       <div><button @click="applyFilters({type:'torsos'})">Filter for Torsos</button></div>
 13 |       <div><button @click="applyFilters({type:'bases'})">Filter for Bases</button></div>
 14 |       <div><button @click="clearFilters()">Clear Filters</button></div>
 15 |       <div>Filters: {{filters}}</div>
 16 |     </div>
 17 |   </div>
 18 |   <div>
 19 |     <ul>
 20 |       <li v-for="(result, index) in pagedResults" :key="index">
 21 |         <div><img :src="result.src"/></div>
 22 |         <div>
 23 |           <div class="title">{{result.title}}</div>
 24 |           <div>{{result.description}}</div>
 25 |           <div>Type: {{result.type.substring(0, result.type.length -1)}}</div>
 26 |         </div>
 27 |       </li>
 28 |     </ul>
 29 |   </div>
 30 |   <div>
 31 |     <button @click="prevPage()" class="button-link">Previous Page</button>
 32 |     Showing {{currentStartIndex}} to {{currentEndIndex}} of {{resultCount}} results
 33 |     <button @click="nextPage()" class="button-link">Next Page</button>
 34 |   </div>
 35 | </template>
 36 | 
 37 | <script>
 38 | import { computed } from 'vue';
 39 | import useSearch from './useSearch';
 40 | import useFilters from './useFilters';
 41 | import usePagination from './usePagination';
 42 | 
 43 | export default {
 44 |   setup(props) {
 45 |     const { searchResults, search } = useSearch(props.searchTerm);
 46 | 
 47 |     const {
 48 |       filters,
 49 |       applyFilters,
 50 |       clearFilters,
 51 |       filteredResults,
 52 |     } = useFilters(searchResults);
 53 | 
 54 |     const {
 55 |       currentPage,
 56 |       nextPage,
 57 |       prevPage,
 58 |       currentStartIndex,
 59 |       currentEndIndex,
 60 |       pagedResults,
 61 |     } = usePagination(filteredResults);
 62 | 
 63 |     const resultCount = computed(() => filteredResults.value.length);
 64 | 
 65 |     return {
 66 |       pagedResults,
 67 |       search,
 68 |       filters,
 69 |       applyFilters,
 70 |       clearFilters,
 71 |       currentPage,
 72 |       nextPage,
 73 |       prevPage,
 74 |       currentStartIndex,
 75 |       currentEndIndex,
 76 |       resultCount,
 77 |     };
 78 |   },
 79 | };
 80 | </script>
 81 | <style scoped>
 82 | input {
 83 |   font-size:20px;
 84 |   padding: 8px;
 85 |   width:80%
 86 | }
 87 | img {
 88 |   width:50px;
 89 |   margin-right:10px;
 90 | }
 91 | tr {
 92 |   margin-bottom:5px;
 93 | }
 94 | td, th {
 95 |   text-align: left;
 96 | }
 97 | ul {
 98 |   list-style-type: none;
 99 | }
100 | li {
101 |   display: flex;
102 |   margin-bottom: 20px;
103 | }
104 | .title {
105 |   font-weight: bold;
106 | }
107 | .button-link {
108 |   background: none!important;
109 |   border: none;
110 |   padding: 0!important;
111 |   text-decoration: underline;
112 |   cursor: pointer;
113 |   color: #1e87ba;
114 | }
115 | .filters {
116 |   margin-top: 10px;
117 |   display: flex;
118 | }
119 | .filters > * {
120 |   margin-right: 10px;
121 | }
122 | </style>
123 | 


--------------------------------------------------------------------------------
/src/search/useFilters.js:
--------------------------------------------------------------------------------
 1 | import { ref, computed, onMounted } from 'vue';
 2 | 
 3 | function filterResults(results, filters) {
 4 |   return results.value.filter((part) => filters.value.every(
 5 |     (filter) => {
 6 |       const filterField = Object.keys(filter)[0];
 7 |       const filterValue = filter[filterField];
 8 |       return part[filterField] === filterValue;
 9 |     },
10 |   ));
11 | }
12 | 
13 | export default function useFilters(searchResults) {
14 |   const filters = ref([]);
15 | 
16 |   const applyFilters = (filter) => filters.value.push(filter);
17 |   const clearFilters = () => { filters.value = []; };
18 | 
19 |   onMounted(() => console.log('Mounted: useFilters'));
20 | 
21 |   const filteredResults = computed(() => filterResults(searchResults, filters));
22 | 
23 |   return {
24 |     filters,
25 |     applyFilters,
26 |     clearFilters,
27 |     filteredResults,
28 |   };
29 | }
30 | 


--------------------------------------------------------------------------------
/src/search/usePagination.js:
--------------------------------------------------------------------------------
 1 | import { ref, computed, onMounted } from 'vue';
 2 | 
 3 | export default function usePagination(filteredSearchResults) {
 4 |   const pageSize = 5;
 5 |   const currentPage = ref(1);
 6 |   const nextPage = () => { currentPage.value += 1; };
 7 |   const prevPage = () => { currentPage.value -= 1; };
 8 | 
 9 |   onMounted(() => console.log('Mounted: useSearch'));
10 | 
11 |   const currentStartIndex = computed(
12 |     () => (currentPage.value - 1) * pageSize + 1,
13 |   );
14 | 
15 |   const currentEndIndex = computed(() => {
16 |     const end = currentStartIndex.value - 1 + pageSize;
17 |     return end > filteredSearchResults.value.length
18 |       ? filteredSearchResults.value.length
19 |       : end;
20 |   });
21 | 
22 |   const pagedResults = computed(() => {
23 |     const startIndex = currentStartIndex.value - 1;
24 |     const endIndex = currentEndIndex.value;
25 |     return filteredSearchResults.value.slice(startIndex, endIndex);
26 |   });
27 | 
28 |   return {
29 |     currentPage,
30 |     nextPage,
31 |     prevPage,
32 |     pageSize,
33 |     currentStartIndex,
34 |     currentEndIndex,
35 |     pagedResults,
36 |   };
37 | }
38 | 


--------------------------------------------------------------------------------
/src/search/useSearch.js:
--------------------------------------------------------------------------------
 1 | import { ref, onMounted } from 'vue';
 2 | import parts from '../data/parts';
 3 | 
 4 | const allParts = [...parts.heads, ...parts.arms, ...parts.torsos, ...parts.bases];
 5 | 
 6 | export default function useSearch(originalSearchTerm) {
 7 |   const results = ref([]);
 8 | 
 9 |   const searchInventory = (searchTerm) => {
10 |     let searchResults;
11 |     const term = searchTerm || originalSearchTerm;
12 | 
13 |     if (!term) searchResults = allParts;
14 |     else {
15 |       const lowerTerm = term.toLowerCase();
16 |       searchResults = allParts.filter(
17 |         (part) => part.title.toLowerCase().includes(lowerTerm),
18 |       );
19 |     }
20 |     results.value = [...searchResults];
21 |   };
22 | 
23 |   searchInventory(originalSearchTerm);
24 | 
25 |   onMounted(() => console.log('Mounted: useSearch'));
26 | 
27 |   return { searchResults: results, search: searchInventory };
28 | }
29 | 


--------------------------------------------------------------------------------
/src/store/modules/users.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios';
 2 | 
 3 | export default {
 4 |   state: {
 5 |     user: null,
 6 |   },
 7 |   mutations: {
 8 |     updateCurrentUser(state, user) {
 9 |       state.user = user;
10 |     },
11 |   },
12 |   getters: {
13 |   },
14 |   actions: {
15 |     signIn({ commit }) {
16 |       axios.post('/api/sign-in')
17 |         .then(result => commit('updateCurrentUser', result.data))
18 |         .catch(console.error);
19 |     },
20 |   },
21 | };
22 | 


--------------------------------------------------------------------------------