this repo has no description
1<script setup lang="ts">
2import { CrcCardEntity } from "@/modules/crc/entities/CrcCard"
3import { ref } from "vue"
4
5interface Props {
6 name?: string
7 responsabilities?: string[]
8 collaborators?: string[]
9 editable?: boolean
10 isPlayground?: boolean
11}
12
13const emits = defineEmits<{
14 (e: "submit", crc: CrcCardEntity): void
15 (e: "remove", crcName: string): void
16}>()
17
18const props = withDefaults(defineProps<Props>(), {
19 name: "",
20 responsabilities: () => [],
21 collaborators: () => [],
22 editable: false,
23 isPlayground: false,
24})
25
26const componentName = ref(props.name)
27const allReponsabilities = ref(props.responsabilities)
28
29const newResponsability = ref("")
30
31const addResponsability = () => {
32 if (
33 !newResponsability ||
34 allReponsabilities.value.find((resp) => newResponsability.value === resp)
35 ) {
36 return
37 }
38
39 allReponsabilities.value = [
40 ...allReponsabilities.value,
41 newResponsability.value,
42 ]
43
44 newResponsability.value = ""
45}
46
47const allCollaborators = ref(props.collaborators)
48
49const newCollaborator = ref("")
50
51const addCollaborator = () => {
52 if (
53 !newCollaborator ||
54 allCollaborators.value.find((coll) => newCollaborator.value === coll)
55 ) {
56 return
57 }
58
59 allCollaborators.value = [...allCollaborators.value, newCollaborator.value]
60
61 newCollaborator.value = ""
62}
63
64const clearCard = () => {
65 componentName.value = ""
66 allReponsabilities.value = []
67 allCollaborators.value = []
68}
69
70const submitCard = () => {
71 if (!componentName.value) {
72 return
73 }
74
75 emits("submit", {
76 name: componentName.value,
77 responsabilities: allReponsabilities.value,
78 collaborators: allCollaborators.value,
79 })
80 clearCard()
81}
82
83const removeCard = () => {
84 if (!componentName.value) {
85 return
86 }
87
88 emits("remove", componentName.value)
89}
90</script>
91
92<template>
93 <div class="crc-card">
94 <section>
95 <input
96 type="text"
97 class="component-name"
98 v-if="editable"
99 v-model="componentName"
100 placeholder="name"
101 />
102 <h3 v-else>
103 {{ componentName }}
104 </h3>
105 <button v-if="editable" :disabled="!componentName" @click="submitCard">
106 create
107 </button>
108 <button @click="removeCard" v-else-if="isPlayground">×</button>
109 </section>
110 <section>
111 <div class="responsabilities">
112 <hr />
113 <ol>
114 <li
115 v-for="responsability in allReponsabilities"
116 :key="responsability"
117 >
118 {{ responsability }}
119 </li>
120 </ol>
121 <form @submit.prevent="addResponsability" v-if="editable">
122 <input
123 type="text"
124 v-model="newResponsability"
125 placeholder="responsability"
126 />
127 <button type="submit">+</button>
128 </form>
129 </div>
130 <div class="collaborators" v-if="collaborators.length || editable">
131 <hr />
132 <ol>
133 <li v-for="collaborator in allCollaborators" :key="collaborator">
134 {{ collaborator }}
135 </li>
136 </ol>
137
138 <form @submit.prevent="addCollaborator" v-if="editable">
139 <input
140 type="text"
141 v-model.trim="newCollaborator"
142 placeholder="collaborator"
143 />
144 <button type="submit">+</button>
145 </form>
146 </div>
147 </section>
148 </div>
149</template>
150
151<style scoped lang="scss">
152.crc-card {
153 min-height: 200px;
154 padding: 1rem;
155 margin: 1rem 0;
156 border-radius: 0.3em;
157 font-family: var(--code-font-family);
158 box-shadow: var(--shadow);
159
160 hr {
161 margin-bottom: 1rem;
162 }
163
164 section {
165 display: flex;
166 justify-content: space-between;
167 }
168
169 ol {
170 margin: 1rem;
171 font-size: 12pt;
172 }
173
174 .responsabilities {
175 hr {
176 margin-right: 1rem;
177 }
178 }
179
180 .collaborators {
181 border-left: 2px groove white;
182 padding-left: 1rem;
183
184 hr {
185 visibility: hidden;
186 }
187 }
188}
189
190input.component-name {
191 margin-bottom: 0.5rem;
192}
193</style>