CRC Card playground!

src/components/architecture/crc-card.vue

@@ -1,35 +1,75 @@
-<script setup lang="ts">
+<script setup lang="ts">import { ref } from 'vue';
+
 interface Props {
   name: string,
   responsabilities?: string[]
   collaborators?: string[]
+  editable?: boolean
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   responsabilities: () => [],
-  collaborators: () => []
+  collaborators: () => [],
+  editable: false
 })
+
+const allReponsabilities = ref(props.responsabilities)
+
+const newResponsability = ref('')
+
+const addResponsability = () => {
+  if (!newResponsability || allReponsabilities.value.find(resp => newResponsability.value === resp)) {
+    return
+  }
+
+  allReponsabilities.value = [...allReponsabilities.value, newResponsability.value]
+
+  newResponsability.value = ''
+}
+
+const allCollaborators = ref(props.collaborators)
+
+const newCollaborator = ref('')
+
+const addCollaborator = () => {
+  if (!newCollaborator || allCollaborators.value.find(coll => newCollaborator.value === coll)) {
+    return
+  }
+
+  allCollaborators.value = [...allCollaborators.value, newCollaborator.value]
+
+  newCollaborator.value = ''
+}
 </script>
 
 <template>
   <div class="crc-card">
-    <h3>{{ name }}</h3>
+    <h3 :contenteditable="editable">{{ name }}</h3>
     <section>
       <div class="responsabilities">
         <hr>
         <ol>
-          <li v-for="responsability in responsabilities" :key="responsability">
+          <li v-for="responsability in allReponsabilities" :key="responsability">
             {{ responsability }}
           </li>
         </ol>
+        <form @submit.prevent="addResponsability" v-if="editable">
+          <input type="text" v-model="newResponsability">
+          <button type="submit">+</button>
+        </form>
       </div>
-      <div class="collaborators" v-if="collaborators.length">
+      <div class="collaborators" v-if="collaborators.length || editable">
         <hr>
         <ol>
-          <li v-for="collaborator in collaborators" :key="collaborator">
+          <li v-for="collaborator in allCollaborators" :key="collaborator">
             {{ collaborator }}
           </li>
         </ol>
+
+        <form @submit.prevent="addCollaborator" v-if="editable">
+          <input type="text" v-model.trim="newCollaborator">
+          <button type="submit">+</button>
+        </form>
       </div>
     </section>
   </div>
@@ -72,5 +112,11 @@ withDefaults(defineProps<Props>(), {
       visibility: hidden;
     }
   }
+
+  & [contenteditable] {
+    background-color: rgb(76, 71, 71);
+    padding: 0 0.5rem;
+    border-radius: 0.5rem;
+  }
 }
 </style>

src/pages/crc-cards-playground.mdx

@@ -0,0 +1,8 @@
+---
+title: CRC Card playground
+layout: post
+---
+
+# CRC Card playground
+
+<CrcCard editable />

src/pages/posts/crc-cards-as-training-material.mdx

@@ -222,3 +222,9 @@ export const UserBookmarks: FunctionComponent<Props> = ({ userId }) => {
 // removing the magic number at the same time
 <TilesSkeleton numberOfTiles={MAXIMUM_BOOKMARKS} />
 ```
+
+## Playground
+
+Do you want to create your own CRC cards?
+
+Take a look at [the CRC card playground](/crc-cards-playground)!