update crc card playground

src/components/architecture/crc-card.vue

@@ -7,10 +7,12 @@ interface Props {
   responsabilities?: string[]
   collaborators?: string[]
   editable?: boolean
+  isPlayground?: boolean
 }
 
 const emits = defineEmits<{
   (e: "submit", crc: CrcCardEntity): void
+  (e: "remove", crcName: string): void
 }>()
 
 const props = withDefaults(defineProps<Props>(), {
@@ -18,6 +20,7 @@ const props = withDefaults(defineProps<Props>(), {
   responsabilities: () => [],
   collaborators: () => [],
   editable: false,
+  isPlayground: false,
 })
 
 const componentName = ref(props.name)
@@ -65,6 +68,10 @@ const clearCard = () => {
 }
 
 const submitCard = () => {
+  if (!componentName.value) {
+    return
+  }
+
   emits("submit", {
     name: componentName.value,
     responsabilities: allReponsabilities.value,
@@ -72,6 +79,14 @@ const submitCard = () => {
   })
   clearCard()
 }
+
+const removeCard = () => {
+  if (!componentName.value) {
+    return
+  }
+
+  emits("remove", componentName.value)
+}
 </script>
 
 <template>
@@ -86,7 +101,10 @@ const submitCard = () => {
       <h3 v-else>
         {{ componentName }}
       </h3>
-      <button v-if="editable" @click="submitCard">create</button>
+      <button v-if="editable" :disabled="!componentName" @click="submitCard">
+        create
+      </button>
+      <button @click="removeCard" v-else-if="isPlayground">×</button>
     </section>
     <section>
       <div class="responsabilities">

src/components/architecture/crc-project.vue

@@ -7,6 +7,9 @@ const crcCards = ref<CrcCardEntity[]>([])
 const addCrcCard = (card: CrcCardEntity) => {
   crcCards.value = [...crcCards.value, card]
 }
+const removeCard = (cardName: string) => {
+  crcCards.value = crcCards.value.filter((card) => card.name !== cardName)
+}
 </script>
 
 <template>
@@ -19,6 +22,8 @@ const addCrcCard = (card: CrcCardEntity) => {
         :name="card.name"
         :responsabilities="card.responsabilities"
         :collaborators="card.collaborators"
+        @remove="removeCard"
+        is-playground
       />
     </section>
   </div>