| commit | author | age | ||
| 2c19b5 | 1 | <template> |
| CM | 2 | <base-card> |
| 3 | <base-button | |
| 4 | @click="setSelectedTab('stored-resources')" | |
| 5 | :mode="storedResButtonMode" | |
| 6 | >Stored Resource</base-button | |
| 7 | > | |
| 8 | <base-button | |
| 9 | @click="setSelectedTab('add-resource')" | |
| 10 | :mode="addResButtonMode" | |
| 11 | >Add Resource</base-button | |
| 12 | > | |
| 13 | </base-card> | |
| 1b68fe | 14 | <KeepAlive> |
| CM | 15 | <component :is="selectedTab"></component> |
| 16 | </KeepAlive> | |
| 2c19b5 | 17 | </template> |
| CM | 18 | |
| 19 | <script> | |
| 20 | import StoredResources from './StoredResource.vue'; | |
| 21 | import AddResource from './AddResource.vue'; | |
| 22 | ||
| 23 | export default { | |
| 24 | components: { | |
| 25 | StoredResources: StoredResources, | |
| 26 | AddResource: AddResource, | |
| 27 | }, | |
| 28 | data() { | |
| 29 | return { | |
| 30 | selectedTab: 'stored-resources', | |
| 31 | storedResouces: [ | |
| 32 | { | |
| 33 | id: 'official-guide', | |
| 34 | title: 'Official Guide', | |
| 35 | description: 'The official Vue.js documentation', | |
| 36 | link: 'https://vuejs.org', | |
| 37 | }, | |
| 38 | { | |
| 39 | id: 'google', | |
| 40 | title: 'Google', | |
| 41 | description: 'Learn to google...', | |
| 42 | link: 'https://google.com', | |
| 43 | }, | |
| 44 | ], | |
| 45 | }; | |
| 46 | }, | |
| 47 | computed: { | |
| 48 | storedResButtonMode() { | |
| 49 | return this.selectedTab === 'stored-resources' ? null : 'flat'; | |
| 50 | }, | |
| 51 | addResButtonMode() { | |
| 52 | return this.selectedTab === 'add-resource' ? null : 'flat'; | |
| 53 | }, | |
| 54 | }, | |
| 55 | provide() { | |
| 56 | return { | |
| 57 | resources: this.storedResouces, | |
| 1b68fe | 58 | addResource: this.addResource, |
| ada7d2 | 59 | deleteResource: this.removeResource, |
| 2c19b5 | 60 | }; |
| CM | 61 | }, |
| 62 | methods: { | |
| 63 | setSelectedTab(tab) { | |
| 64 | this.selectedTab = tab; | |
| 65 | }, | |
| 1b68fe | 66 | addResource(title, description, url) { |
| CM | 67 | const newResource = { |
| 68 | id: new Date().toISOString(), | |
| 69 | title: title, | |
| 70 | description: description, | |
| 71 | link: url, | |
| 72 | }; | |
| 73 | ||
| 74 | this.storedResouces.unshift(newResource); | |
| 75 | this.selectedTab = 'stored-resources'; | |
| 76 | }, | |
| ada7d2 | 77 | removeResource(resId) { |
| 203c2c | 78 | const resIndex = this.storedResouces.findIndex( |
| CM | 79 | (res) => res.id === resId |
| ada7d2 | 80 | ); |
| 203c2c | 81 | this.storedResouces.splice(resIndex, 1); |
| ada7d2 | 82 | }, |
| 2c19b5 | 83 | }, |
| CM | 84 | }; |
| 85 | </script> | |
| 86 | ||
| 87 | <style scoped></style> | |
