this repo has no description
Now create multiple CRC cards
+111
-22
+2
components.d.ts
+2
components.d.ts
···
11
11
AppHeader: typeof import('./src/components/app-header.vue')['default']
12
12
BlogPosts: typeof import('./src/components/posts/blog-posts.vue')['default']
13
13
CrcCard: typeof import('./src/components/architecture/crc-card.vue')['default']
14
+
CrcProject: typeof import('./src/components/architecture/crc-project.vue')['default']
14
15
ForgettingCurve: typeof import('./src/components/smart-notes/forgetting-curve.vue')['default']
16
+
Island: typeof import('./node_modules/.pnpm/iles@0.8.7_sass@1.56.2/node_modules/iles/dist/client/app/components/Island.vue')['default']
15
17
JulienCalixte: typeof import('./src/components/core/julien-calixte.vue')['default']
16
18
MyProjects: typeof import('./src/components/presentation/my-projects.vue')['default']
17
19
OrderTag: typeof import('./src/components/core/order-tag.vue')['default']
+68
-21
src/components/architecture/crc-card.vue
+68
-21
src/components/architecture/crc-card.vue
···
1
-
<script setup lang="ts">import { ref } from 'vue';
1
+
<script setup lang="ts">
2
+
import { CrcCardEntity } from "@/modules/crc/entities/CrcCard"
3
+
import { ref } from "vue"
2
4
3
5
interface Props {
4
-
name: string,
6
+
name?: string
5
7
responsabilities?: string[]
6
8
collaborators?: string[]
7
9
editable?: boolean
8
10
}
9
11
12
+
const emits = defineEmits<{
13
+
(e: "submit", crc: CrcCardEntity): void
14
+
}>()
15
+
10
16
const props = withDefaults(defineProps<Props>(), {
17
+
name: "",
11
18
responsabilities: () => [],
12
19
collaborators: () => [],
13
-
editable: false
20
+
editable: false,
14
21
})
15
22
23
+
const componentName = ref(props.name)
16
24
const allReponsabilities = ref(props.responsabilities)
17
25
18
-
const newResponsability = ref('')
26
+
const newResponsability = ref("")
19
27
20
28
const addResponsability = () => {
21
-
if (!newResponsability || allReponsabilities.value.find(resp => newResponsability.value === resp)) {
29
+
if (
30
+
!newResponsability ||
31
+
allReponsabilities.value.find((resp) => newResponsability.value === resp)
32
+
) {
22
33
return
23
34
}
24
35
25
-
allReponsabilities.value = [...allReponsabilities.value, newResponsability.value]
36
+
allReponsabilities.value = [
37
+
...allReponsabilities.value,
38
+
newResponsability.value,
39
+
]
26
40
27
-
newResponsability.value = ''
41
+
newResponsability.value = ""
28
42
}
29
43
30
44
const allCollaborators = ref(props.collaborators)
31
45
32
-
const newCollaborator = ref('')
46
+
const newCollaborator = ref("")
33
47
34
48
const addCollaborator = () => {
35
-
if (!newCollaborator || allCollaborators.value.find(coll => newCollaborator.value === coll)) {
49
+
if (
50
+
!newCollaborator ||
51
+
allCollaborators.value.find((coll) => newCollaborator.value === coll)
52
+
) {
36
53
return
37
54
}
38
55
39
56
allCollaborators.value = [...allCollaborators.value, newCollaborator.value]
40
57
41
-
newCollaborator.value = ''
58
+
newCollaborator.value = ""
59
+
}
60
+
61
+
const clearCard = () => {
62
+
componentName.value = ""
63
+
allReponsabilities.value = []
64
+
allCollaborators.value = []
65
+
}
66
+
67
+
const submitCard = () => {
68
+
emits("submit", {
69
+
name: componentName.value,
70
+
responsabilities: allReponsabilities.value,
71
+
collaborators: allCollaborators.value,
72
+
})
73
+
clearCard()
42
74
}
43
75
</script>
44
76
45
77
<template>
46
78
<div class="crc-card">
47
-
<h3 :contenteditable="editable">{{ name }}</h3>
79
+
<section>
80
+
<input
81
+
type="text"
82
+
class="component-name"
83
+
v-if="editable"
84
+
v-model="componentName"
85
+
/>
86
+
<h3 v-else>
87
+
{{ componentName }}
88
+
</h3>
89
+
<button v-if="editable" @click="submitCard">create</button>
90
+
</section>
48
91
<section>
49
92
<div class="responsabilities">
50
-
<hr>
93
+
<hr />
51
94
<ol>
52
-
<li v-for="responsability in allReponsabilities" :key="responsability">
95
+
<li
96
+
v-for="responsability in allReponsabilities"
97
+
:key="responsability"
98
+
>
53
99
{{ responsability }}
54
100
</li>
55
101
</ol>
56
102
<form @submit.prevent="addResponsability" v-if="editable">
57
-
<input type="text" v-model="newResponsability">
103
+
<input type="text" v-model="newResponsability" />
58
104
<button type="submit">+</button>
59
105
</form>
60
106
</div>
61
107
<div class="collaborators" v-if="collaborators.length || editable">
62
-
<hr>
108
+
<hr />
63
109
<ol>
64
110
<li v-for="collaborator in allCollaborators" :key="collaborator">
65
111
{{ collaborator }}
···
67
113
</ol>
68
114
69
115
<form @submit.prevent="addCollaborator" v-if="editable">
70
-
<input type="text" v-model.trim="newCollaborator">
116
+
<input type="text" v-model.trim="newCollaborator" />
71
117
<button type="submit">+</button>
72
118
</form>
73
119
</div>
···
112
158
visibility: hidden;
113
159
}
114
160
}
161
+
}
115
162
116
-
& [contenteditable] {
117
-
background-color: rgb(76, 71, 71);
118
-
padding: 0 0.5rem;
119
-
border-radius: 0.5rem;
120
-
}
163
+
input.component-name {
164
+
background-color: rgb(76, 71, 71);
165
+
padding: 0 0.5rem;
166
+
border-radius: 0.5rem;
167
+
color: white;
121
168
}
122
169
</style>
+35
src/components/architecture/crc-project.vue
+35
src/components/architecture/crc-project.vue
···
1
+
<script setup lang="ts">
2
+
import { CrcCardEntity } from "@/modules/crc/entities/CrcCard"
3
+
import { ref } from "vue"
4
+
5
+
const crcCards = ref<CrcCardEntity[]>([])
6
+
7
+
const addCrcCard = (card: CrcCardEntity) => {
8
+
crcCards.value = [...crcCards.value, card]
9
+
}
10
+
</script>
11
+
12
+
<template>
13
+
<div class="crc-project">
14
+
<CrcCard editable @submit="addCrcCard" />
15
+
<section>
16
+
<CrcCard
17
+
v-for="card in crcCards"
18
+
:key="card.name"
19
+
:name="card.name"
20
+
:responsabilities="card.responsabilities"
21
+
:collaborators="card.collaborators"
22
+
/>
23
+
</section>
24
+
</div>
25
+
</template>
26
+
27
+
<style scoped lang="scss">
28
+
.crc-project {
29
+
section {
30
+
display: grid;
31
+
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
32
+
grid-gap: 1rem;
33
+
}
34
+
}
35
+
</style>
+5
src/modules/crc/entities/CrcCard.ts
+5
src/modules/crc/entities/CrcCard.ts