feat(subject): finish the subject synchronize between wheel and table

src/App.vue

@@ -5,8 +5,8 @@
     </v-app-bar>
 
     <v-content>
-      <SpeechlessSubject @inputData="updateSubjects"/>
-      <SpinningWheel :subjects="subjects"/>
+      <SpeechlessSubject @subjects="updateSubjects" @replace-subject="replaceSubject" :subjects="subjects"/>
+      <SpinningWheel ref="spinningWheel" :subjects="subjects"/>
     </v-content>
   </v-app>
 </template>
@@ -21,11 +21,19 @@ export default {
     source: String,
   },
   data: () => ({
-    subjects: [],
+    subjects: [
+      {Nom:"Un film",  Lien:""},
+      {Nom:"Une serie", Lien:""},
+      {Nom:"Un logiciel", Lien:""}
+    ],
   }),
   methods: {
     updateSubjects(subjects) {
       this.subjects=subjects;
+    },
+    replaceSubject(replace){
+      Object.assign(this.subjects[replace.index], replace.subject)
+      this.$refs.spinningWheel.replaceSubject(replace)
     }
   },
   components: {

src/components/speechless_subject/SpeechLessSubject.vue

@@ -81,11 +81,6 @@ export default {
                 { text: 'Actions', value: 'action', sortable: false },
             ],
             container: null,
-            subjects : [
-                {Nom:"Un film",  Lien:""},
-                {Nom:"Une serie", Lien:""},
-                {Nom:"Un logiciel", Lien:""}
-            ],
             dialog: false,
             editedIndex: -1,
             editedItem: {
@@ -98,10 +93,12 @@ export default {
             },
         }
     },
+    props: {
+        subjects : {
+            type : Array
+        }
+    },
     methods : {
-        getDataSpin(){
-            return this.subjects;
-        },
         editItem (item) {
             this.editedIndex = this.subjects.indexOf(item)
             this.editedItem = Object.assign({}, item)
@@ -123,11 +120,12 @@ export default {
         save () {
             if (this.editedIndex > -1) {
                 Object.assign(this.subjects[this.editedIndex], this.editedItem)
+                this.$emit("replace-subject",{index: this.editedIndex, subject: this.editedItem})
             } else {
                 this.subjects.push(this.editedItem)
+                this.$emit("subjects",this.subjects)
             }
             this.close()
-            this.$emit("subjects",this.subjects)
         },
     },
     watch: {

src/components/spinning_wheel/SpinningWheel.vue

@@ -12,14 +12,20 @@
         data: function () {
             return {
                 container: null,
-                subjects : [
-                    {Nom:"Un film",  Lien:""},
-                    {Nom:"Une serie", Lien:""},
-                    {Nom:"Un logiciel", Lien:""}
-                ],
+                spinData: [],
+            }
+        },
+        props: {
+            subjects: {
+                type: Array
             }
         },
         methods : {
+            replaceSubject(replace){
+                Object.assign(this.subjects[replace.index], replace.subject)
+                this.removeGraph()
+                this.buildGraph()
+            },
             getSubjects(){
                 return this.subjects;
             },
@@ -106,9 +112,6 @@
                     .style({"fill":"black"});
             }
         },
-        created() {
-        },
-
         computed: {
             formTitle () {
                 return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
@@ -118,6 +121,10 @@
             dialog (val) {
                 val || this.close()
             },
+            subjects: function() {
+                this.removeGraph();
+                this.buildGraph();
+            },
         },
         mounted() {
             this.buildGraph()