Skip to content

Commit 2b9cc62

Browse files
HectruendoHectruendo
committed
Refactored card as a separate component
1 parent 5e039ae commit 2b9cc62

4 files changed

Lines changed: 281 additions & 150 deletions

File tree

‎admin/components/data/Data.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@
2424
:leaveAfterSave="false"
2525
@submitFormEnd="submitKnowledgeBase"
2626
>
27-
<template v-slot:extra-card-bottom="props">
28-
<el-button class="bottom-card-button" @click="goToKIs(props.item.id)">{{
27+
<template v-slot:extra-card-bottom="{item}">
28+
<el-button class="bottom-card-button" @click="goToKIs(item.id)">{{
2929
$t("viewknowledgeitems")
3030
}}
3131
</el-button>

‎admin/components/generic/Card.vue‎

Lines changed: 219 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
1+
<template>
2+
<el-card class="box-card" @click="itemsStore.editing = item.id">
3+
<template #header>
4+
<div class="card-header-title">{{ createTitle(item) }}</div>
5+
</template>
6+
<div v-for="(name, prop) in cardProps" class="property">
7+
<span class="title">{{ name }}:</span>{{ solveRefPropValue(item, prop, schema) }}
8+
</div>
9+
<div class="divider">
10+
</div>
11+
<div class="commands">
12+
<el-icon class="command-delete">
13+
<Delete @click.stop @click="() => {deleting = item.id; deleteDialogVisible = true}"/>
14+
</el-icon>
15+
<span class="command-edit" @click="itemsStore.editing = id">{{ $t("edit") }}</span>
16+
</div>
17+
</el-card>
18+
<slot name="extra-card-bottom" :item="item"></slot>
19+
<el-dialog v-model="deleteDialogVisible" :title="$t('warning')" width="500" center>
20+
<span>
21+
{{ $t('deleteitemwarning') }}
22+
</span>
23+
<template #footer>
24+
<div class="dialog-footer">
25+
<el-button @click="() => {deleting = undefined; deleteDialogVisible = false}">{{ $t('cancel') }}</el-button>
26+
<el-button type="primary" @click="delItem">
27+
{{ $t('confirm') }}
28+
</el-button>
29+
</div>
30+
</template>
31+
</el-dialog>
32+
</template>
33+
34+
35+
<script setup>
36+
import {useItemsStore} from "~/store/items.js";
37+
import {solveRefPropValue, deleteItem} from "~/utils/index.js";
38+
import {useI18n} from "vue-i18n";
39+
40+
const { t } = useI18n();
41+
42+
const itemsStore = useItemsStore()
43+
const deleting = ref(undefined)
44+
const deleteDialogVisible = ref(false)
45+
const {$axios} = useNuxtApp();
46+
47+
const props = defineProps({
48+
item: {
49+
type: Object,
50+
required: false,
51+
},
52+
cardProps: {
53+
type: Object,
54+
required: false,
55+
},
56+
schema: {
57+
type: Object,
58+
required: true,
59+
},
60+
titleProps: {
61+
type: Array,
62+
required: false,
63+
default: ["name"],
64+
},
65+
apiUrl: {
66+
type: String,
67+
required: true,
68+
},
69+
});
70+
71+
72+
function createTitle(item) {
73+
return props.titleProps.map(prop => item[prop]).join(" ")
74+
}
75+
76+
async function delItem() {
77+
await deleteItem(deleting.value, itemsStore, props.apiUrl, t, $axios);
78+
deleting.value = undefined;
79+
deleteDialogVisible.value = false
80+
}
81+
</script>
82+
83+
<style lang="scss">
84+
85+
86+
.el-dialog {
87+
border-radius: 10px;
88+
.el-dialog__header {
89+
text-align: left;
90+
.el-dialog__title {
91+
color: $chatfaq-color-primary-500 !important;
92+
font-size: 16px;
93+
font-weight: 600;
94+
}
95+
}
96+
.el-dialog__body {
97+
text-align: left;
98+
color: $chatfaq-color-neutral-black !important;
99+
font-size: 14px;
100+
font-weight: 400;
101+
}
102+
}
103+
104+
.el-card {
105+
border-radius: 10px;
106+
border: 1px solid $chatfaq-color-primary-200;
107+
box-shadow: unset !important;
108+
}
109+
110+
.el-card__header {
111+
padding-left: 16px;
112+
border: unset;
113+
display: flex;
114+
justify-content: space-between;
115+
}
116+
117+
.el-card__body {
118+
padding: unset;
119+
}
120+
121+
.el-icon {
122+
height: unset;
123+
}
124+
125+
.el-table__header-wrapper {
126+
th {
127+
background-color: $chatfaq-color-primary-200 !important;
128+
}
129+
}
130+
131+
.el-table {
132+
border-radius: 10px;
133+
134+
* {
135+
color: $chatfaq-color-primary-500;
136+
}
137+
138+
tbody > tr:nth-child(even) {
139+
// background: #DFDAEA66;
140+
}
141+
}
142+
143+
.el-card:hover {
144+
}
145+
</style>
146+
147+
<style lang="scss" scoped>
148+
.card-header-title {
149+
font-family: "Montserrat";
150+
font-size: 18px;
151+
font-weight: 700;
152+
line-height: 22px;
153+
letter-spacing: 0em;
154+
text-align: left;
155+
text-overflow: ellipsis;
156+
overflow-y: hidden;
157+
}
158+
159+
.property {
160+
overflow: hidden;
161+
width: 100%;
162+
text-overflow: ellipsis;
163+
display: inline-block;
164+
white-space: nowrap;
165+
padding-left: 16px;
166+
167+
.title {
168+
font-size: 14px;
169+
font-weight: 600;
170+
line-height: 20px;
171+
letter-spacing: 0em;
172+
text-align: left;
173+
color: $chatfaq-color-primary-500;
174+
margin-right: 10px;
175+
176+
}
177+
}
178+
179+
.divider {
180+
width: 100%;
181+
height: 1px;
182+
background-color: $chatfaq-color-primary-200;
183+
margin-top: 10px;
184+
margin-bottom: 13px;
185+
}
186+
187+
.command-edit, .command-delete {
188+
cursor: pointer;
189+
text-decoration: underline;
190+
font-weight: 600;
191+
}
192+
193+
.command-delete-confirm.on-table {
194+
.command-delete {
195+
margin-right: 10px;
196+
}
197+
}
198+
199+
.commands {
200+
display: flex;
201+
justify-content: space-between;
202+
color: $chatfaq-color-primary-500;
203+
204+
.command-delete {
205+
margin-left: 16px;
206+
margin-bottom: 13px;
207+
}
208+
209+
.command-delete-confirm {
210+
display: flex;
211+
justify-content: center;
212+
}
213+
214+
.command-edit {
215+
margin-right: 16px;
216+
margin-bottom: 13px;
217+
}
218+
}
219+
</style>

0 commit comments

Comments
 (0)