Remove tentative open Activity modal in sidebar. Layout things on activity list. Implement Activity delete and reactive activity list

Author: avivace

src/components/ActivityList.vue

@@ -7,19 +7,31 @@
 				<v-toolbar-title>CoderBot</v-toolbar-title>
 			</v-toolbar>
 			<v-content>
+				<v-container grid-list-md text-xs-center>
+								<v-layout row wrap>
+									<!-- Column A -->
+									<v-flex xs12 md6 offset-md3>
+										<h3 class="text-xs-left">Lista Attività</h3>
+										<v-card>
 				<v-list>
-					<span v-if="activityList == null">
+					<span v-if="activityList == null || activityList == [] || activityList.length == 0">
 						Nessuna Attività, perchè non ne <a href="#/activity/new">crei</a> una nuova?
 					</span>
-						<v-list-tile v-for="activity in activityList" :key="activity.el" avatar @click="">
-							<v-list-tile-title ripple @click="loadProgram(activity.name)">
-								{{ activity.name }}
-							</v-list-tile-title>
-							<v-btn flat icon color="grey darken-1" ripple @click="deleteActivityDlg(activity.name)">
-								<v-icon>delete</v-icon>
-							</v-btn>
-						</v-list-tile>
-					</v-list>
+					<v-list-tile v-for="activity in activityList" :key="activity.el" avatar @click="">
+						<v-list-tile-title ripple @click="loadProgram(activity.name)">
+							<b>{{ activity.name }}</b>
+							<small> {{activity.description}} </small>
+						</v-list-tile-title>
+
+						<v-btn flat icon color="grey darken-1" ripple @click="deleteActivity(activity.name)">
+							<v-icon>delete</v-icon>
+						</v-btn>
+						<v-btn flat icon color="grey darken-1" ripple :href="'/#/activity/edit/'+activity.name">
+							<v-icon>edit</v-icon>
+						</v-btn>
+					</v-list-tile>
+				</v-list>
+			</v-card></v-flex></v-layout></v-container>
 			</v-content>
 		</v-app>
 	</div>
@@ -31,15 +43,31 @@ export default {
 	components: { sidebar },
 	name: 'CoderBot',
 	mounted() {
-		let axios = this.$axios
-		let CB = this.$data.CB
-		//let programList = this.$data.programList
-		axios.get(CB + '/listActivities')
-			.then(function(response) {
-					this.$data.activityList = response.data;
-			}.bind(this))
+		this.getActivities();
 	},
 	methods: {
+		getActivities: function() {
+			let axios = this.$axios
+			let CB = this.$data.CB
+			//let programList = this.$data.programList
+			axios.get(CB + '/listActivities')
+				.then(function(response) {
+					this.$data.activityList = response.data;
+					console.log(this.$data.activityList)
+				}.bind(this))
+		},
+		deleteActivity: function(name) {
+			let axios = this.$axios
+			let CB = this.$data.CB
+			//let programList = this.$data.programList
+			axios.post(CB + '/deleteActivity', {
+					name: name
+				})
+				.then(function(response) {
+					this.getActivities();
+				}.bind(this))
+		},
+
 		toggleSidebar: function() {
 			let currentStatus = this.$store.getters.drawerStatus
 			this.$store.commit('toggleDrawer', !currentStatus)

src/components/Sidebar.vue

@@ -60,14 +60,6 @@
 							<v-list-tile-title>Nuova</v-list-tile-title>
 						</v-list-tile-content>
 					</v-list-tile>
-					<v-list-tile to="/actvity/edit">
-						<v-list-tile-action>
-							<v-icon>edit</v-icon>
-						</v-list-tile-action>
-						<v-list-tile-content>
-							<v-list-tile-title>Modifica</v-list-tile-title>
-						</v-list-tile-content>
-					</v-list-tile>
 					<br>
 					<v-divider>
 					</v-divider>
@@ -168,14 +160,6 @@
 							<v-list-tile-title>Nuova</v-list-tile-title>
 						</v-list-tile-content>
 					</v-list-tile>
-					<v-list-tile to="/actvity/edit">
-						<v-list-tile-action>
-							<v-icon>edit</v-icon>
-						</v-list-tile-action>
-						<v-list-tile-content>
-							<v-list-tile-title>Modifica</v-list-tile-title>
-						</v-list-tile-content>
-					</v-list-tile>
 					<br>
 					<v-divider>
 					</v-divider>
@@ -223,29 +207,6 @@
 					</div>
 				</v-list>
 			</v-navigation-drawer>
-							<v-dialog v-model="editModal" max-width="290">
-				<v-card>
-					<v-card-title class="headline">
-						Lista Programmi
-					</v-card-title>
-					<v-list>
-						<v-list-tile v-for="program in activitiesList" :key="program.el" avatar @click="">
-							<v-list-tile-title ripple @click="loadProgram(program.name)">
-								{{ program.name }}
-							</v-list-tile-title>
-							<v-btn v-if="program.default != 'True'" flat icon color="grey darken-1" ripple @click="deleteProgramDlg(program.name)">
-								<v-icon>delete</v-icon>
-							</v-btn>
-						</v-list-tile>
-					</v-list>
-					<v-card-actions>
-						<v-spacer></v-spacer>
-						<v-btn color="green darken-1" flat="flat" @click="carica = false">
-							Annulla
-						</v-btn>
-					</v-card-actions>
-				</v-card>
-			</v-dialog>
 		</template>
 	</div>