CRC Card playground!

components.d.ts

@@ -1,11 +1,8 @@
 // generated by unplugin-vue-components
 // We suggest you to commit this file into source control
-// Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core'
+// Read more: https://github.com/vuejs/vue-next/pull/3399
 
-export {}
-
-declare module '@vue/runtime-core' {
+declare module 'vue' {
   export interface GlobalComponents {
     AboutMe: typeof import('./src/components/presentation/about-me.vue')['default']
     AppHeader: typeof import('./src/components/app-header.vue')['default']
@@ -13,13 +10,12 @@ declare module '@vue/runtime-core' {
     CrcCard: typeof import('./src/components/architecture/crc-card.vue')['default']
     ForgettingCurve: typeof import('./src/components/smart-notes/forgetting-curve.vue')['default']
     JulienCalixte: typeof import('./src/components/core/julien-calixte.vue')['default']
-    MyBooks: typeof import('./src/components/presentation/my-books.vue')['default']
     MyProjects: typeof import('./src/components/presentation/my-projects.vue')['default']
     OrderTag: typeof import('./src/components/core/order-tag.vue')['default']
     ProductionFlow: typeof import('./src/components/flow/ProductionFlow.vue')['default']
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
     ToucanIcon: typeof import('./src/components/core/toucan-icon.vue')['default']
     Welcome: typeof import('./src/components/Welcome.vue')['default']
   }
 }
+
+export { }

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)!