Skip to content

Commit 868a023

Browse files
sogehigesogehige
committed
fix(ui): show new goals form properly
Fixes https://community.sogebot.xyz/t/cant-create-goals/260
1 parent b869b3f commit 868a023

File tree

2 files changed

+127
-39
lines changed

2 files changed

+127
-39
lines changed

‎src/panel/views/registries/goals/goals-edit.vue

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
</panel>
5656

5757
<div class="pt-3">
58-
<form :key="'goals-edit-form-' + currentGoal.id">
58+
<form :key="'goals-edit-form-' + group.id">
5959
<div class="form-group col-md-12">
6060
<label for="name_input">{{ translate('registry.goals.input.nameGroup.title') }}</label>
6161
<input
@@ -651,8 +651,9 @@ export default Vue.extend({
651651
console.error(err);
652652
return;
653653
}
654-
if (Object.keys(d).length === 0) {
654+
if (d === null || Object.keys(d).length === 0) {
655655
this.$router.push({ name: 'GoalsRegistryList' });
656+
return;
656657
}
657658
this.groupId = String(d.id);
658659

‎src/panel/views/registries/goals/goals-list.vue

Lines changed: 124 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,173 @@
11
<template>
2-
<div class="container-fluid" ref="window">
2+
<div
3+
ref="window"
4+
class="container-fluid"
5+
>
36
<div class="row">
47
<div class="col-12">
58
<span class="title text-default mb-2">
69
{{ translate('menu.registry') }}
7-
<small><fa icon="angle-right"/></small>
10+
<small><fa icon="angle-right" /></small>
811
{{ translate('menu.goals') }}
912
</span>
1013
</div>
1114
</div>
1215

13-
<panel cards search @search="search = $event">
14-
<template v-slot:left>
15-
<button-with-icon class="btn-primary btn-reverse" icon="plus" href="#/registry/goals/edit">{{translate('registry.goals.addGoalGroup')}}</button-with-icon>
16+
<panel
17+
cards
18+
search
19+
@search="search = $event"
20+
>
21+
<template #left>
22+
<button-with-icon
23+
class="btn-primary btn-reverse"
24+
icon="plus"
25+
href="#/registry/goals/edit"
26+
>
27+
{{ translate('registry.goals.addGoalGroup') }}
28+
</button-with-icon>
1629
</template>
1730
</panel>
1831

19-
<div class="card-deck" v-for="(chunk, index) of chunk(orderBy(groupsFiltered, 'createdAt', 'desc'), itemsPerPage)" :key="index">
20-
<div class="card mb-2 p-0" :class="['col-' + (12 / itemsPerPage)]" v-for="group of chunk" :key="group.id">
32+
<div
33+
v-for="(chunk, index) of chunk(orderBy(groupsFiltered, 'createdAt', 'desc'), itemsPerPage)"
34+
:key="index"
35+
class="card-deck"
36+
>
37+
<div
38+
v-for="group of chunk"
39+
:key="group.id"
40+
class="card mb-2 p-0"
41+
:class="['col-' + (12 / itemsPerPage)]"
42+
>
2143
<div class="card-header">
22-
<strong>{{group.name}}</strong> <small class="text-muted">{{group.id}}</small>
44+
<strong>{{ group.name }}</strong> <small class="text-muted">{{ group.id }}</small>
2345
</div>
2446
<div class="card-body">
2547
<dl class="row">
26-
<dt class="col-6">{{translate('registry.goals.input.displayAs.title')}}</dt>
27-
<dd class="col-6">{{group.display.type}}</dd>
48+
<dt class="col-6">
49+
{{ translate('registry.goals.input.displayAs.title') }}
50+
</dt>
51+
<dd class="col-6">
52+
{{ group.display.type }}
53+
</dd>
2854
<template v-if="group.display.type === 'fade'">
29-
<dt class="col-6">{{translate('registry.goals.input.durationMs.title')}}</dt>
30-
<dd class="col-6">{{group.display.durationMs}}ms</dd>
31-
<dt class="col-6">{{translate('registry.goals.input.animationInMs.title')}}</dt>
32-
<dd class="col-6">{{group.display.animationInMs}}ms</dd>
33-
<dt class="col-6">{{translate('registry.goals.input.animationOutMs.title')}}</dt>
34-
<dd class="col-6">{{group.display.animationOutMs}}ms</dd>
55+
<dt class="col-6">
56+
{{ translate('registry.goals.input.durationMs.title') }}
57+
</dt>
58+
<dd class="col-6">
59+
{{ group.display.durationMs }}ms
60+
</dd>
61+
<dt class="col-6">
62+
{{ translate('registry.goals.input.animationInMs.title') }}
63+
</dt>
64+
<dd class="col-6">
65+
{{ group.display.animationInMs }}ms
66+
</dd>
67+
<dt class="col-6">
68+
{{ translate('registry.goals.input.animationOutMs.title') }}
69+
</dt>
70+
<dd class="col-6">
71+
{{ group.display.animationOutMs }}ms
72+
</dd>
3573
</template>
3674
</dl>
3775
<ul class="list-group list-group-flush border-top-0">
38-
<li v-for="goal of group.goals" :key="goal.id" class="list-group-item">
76+
<li
77+
v-for="goal of group.goals"
78+
:key="goal.id"
79+
class="list-group-item"
80+
>
3981
<dl class="row">
40-
<h5 class="col-12">{{goal.name}}</h5>
41-
<dt class="col-6">{{translate('registry.goals.input.type.title')}}</dt>
42-
<dd class="col-6">{{goal.type}}</dd>
82+
<h5 class="col-12">
83+
{{ goal.name }}
84+
</h5>
85+
<dt class="col-6">
86+
{{ translate('registry.goals.input.type.title') }}
87+
</dt>
88+
<dd class="col-6">
89+
{{ goal.type }}
90+
</dd>
4391

44-
<dt class="col-6" v-if="goal.type === 'tips'">{{translate('registry.goals.input.countBitsAsTips.title')}}</dt>
45-
<dd class="col-6" v-if="goal.type === 'tips'">{{!!goal.countBitsAsTips}}</dd>
92+
<dt
93+
v-if="goal.type === 'tips'"
94+
class="col-6"
95+
>
96+
{{ translate('registry.goals.input.countBitsAsTips.title') }}
97+
</dt>
98+
<dd
99+
v-if="goal.type === 'tips'"
100+
class="col-6"
101+
>
102+
{{ !!goal.countBitsAsTips }}
103+
</dd>
46104

47-
<dt class="col-6">{{translate('registry.goals.input.goalAmount.title')}}</dt>
48-
<dd class="col-6">{{goal.goalAmount}}</dd>
105+
<dt class="col-6">
106+
{{ translate('registry.goals.input.goalAmount.title') }}
107+
</dt>
108+
<dd class="col-6">
109+
{{ goal.goalAmount }}
110+
</dd>
49111

50-
<dt class="col-6">{{translate('registry.goals.input.endAfter.title')}}</dt>
112+
<dt class="col-6">
113+
{{ translate('registry.goals.input.endAfter.title') }}
114+
</dt>
51115
<dd class="col-6">
52-
<fa icon="infinity" fixed-width v-if="goal.endAfterIgnore"></fa>
53-
<template v-else>{{new Date(goal.endAfter).toLocaleString()}}</template>
116+
<fa
117+
v-if="goal.endAfterIgnore"
118+
icon="infinity"
119+
fixed-width
120+
/>
121+
<template v-else>
122+
{{ new Date(goal.endAfter).toLocaleString() }}
123+
</template>
54124
</dd>
55125
</dl>
56126
</li>
57127
</ul>
58128
</div>
59129
<div class="card-footer text-right">
60-
<button-with-icon class="btn-only-icon btn-secondary btn-reverse" icon="clone" @click="clone(group)"/>
61-
<hold-button class="btn-danger btn-only-icon" @trigger="removeGoal(group)" icon="trash">
62-
<template slot="title">{{translate('dialog.buttons.delete')}}</template>
63-
<template slot="onHoldTitle">{{translate('dialog.buttons.hold-to-delete')}}</template>
130+
<button-with-icon
131+
class="btn-only-icon btn-secondary btn-reverse"
132+
icon="clone"
133+
@click="clone(group)"
134+
/>
135+
<hold-button
136+
class="btn-danger btn-only-icon"
137+
icon="trash"
138+
@trigger="removeGoal(group)"
139+
>
140+
<template slot="title">
141+
{{ translate('dialog.buttons.delete') }}
142+
</template>
143+
<template slot="onHoldTitle">
144+
{{ translate('dialog.buttons.hold-to-delete') }}
145+
</template>
64146
</hold-button>
65147
<button-with-icon
66148
:text="'/overlays/goals/' + group.id"
67149
:href="'/overlays/goals/' + group.id"
68150
class="btn-dark btn-only-icon"
69151
icon="link"
70152
target="_blank"
71-
/>
153+
/>
72154
<button-with-icon
73155
:text="translate('dialog.buttons.edit')"
74156
:href="'#/registry/goals/edit/' + group.id"
75157
class="btn-primary btn-only-icon"
76158
icon="edit"
77-
/>
159+
/>
78160
</div>
79161
</div>
80162

81163
<!-- add empty cards -->
82164
<template v-if="chunk.length !== itemsPerPage">
83-
<div class="card col-4" style="visibility: hidden" v-for="i in itemsPerPage - (chunk.length % itemsPerPage)" v-bind:key="i"></div>
165+
<div
166+
v-for="i in itemsPerPage - (chunk.length % itemsPerPage)"
167+
:key="i"
168+
class="card col-4"
169+
style="visibility: hidden"
170+
/>
84171
</template>
85172
</div>
86173
</div>
@@ -90,7 +177,7 @@
90177
import { library } from '@fortawesome/fontawesome-svg-core';
91178
import { faClone } from '@fortawesome/free-solid-svg-icons';
92179
import {
93-
chunk, filter, orderBy,
180+
chunk, filter, orderBy,
94181
} from 'lodash-es';
95182
import { v4 as uuid } from 'uuid';
96183
import Vue from 'vue';
@@ -187,7 +274,7 @@ export default Vue.extend({
187274
id: clonedGroupId,
188275
name: group.name + ' (clone)',
189276
goals: group.goals.map(goal => ({
190-
...goal, id: uuid(), groupId: clonedGroupId,
277+
...goal, id: uuid(), groupId: clonedGroupId,
191278
})),
192279
};
193280
this.socket.emit('goals::save', clonedGroup, (err: string | null) => {
@@ -204,7 +291,7 @@ export default Vue.extend({
204291
if (err) {
205292
console.error(err);
206293
} else {
207-
this.groups = this.groups.filter(o => o.id != group.id);
294+
this.groups = this.groups.filter(o => o.id != group.id);
208295
}
209296
});
210297
},

0 commit comments

Comments
 (0)