@windward/games 0.0.9 → 0.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (86) hide show
  1. package/components/content/blocks/dragDrop/BucketGame.vue +41 -87
  2. package/components/content/blocks/dragDrop/SortingGame.vue +43 -29
  3. package/components/content/blocks/flashcards/FlashcardSlides.vue +3 -1
  4. package/components/content/blocks/matchingGame/MatchingGame.vue +94 -51
  5. package/components/content/blocks/quizshowGame/AnswerPanel.vue +23 -16
  6. package/components/content/blocks/quizshowGame/QuizShow.vue +17 -4
  7. package/components/content/blocks/slideshow/SlideShow.vue +3 -1
  8. package/components/content/blocks/wordJumble/Jumble.vue +4 -2
  9. package/components/content/blocks/wordJumble/WordJumble.vue +11 -2
  10. package/components/settings/BucketGameSettingsManager.vue +175 -349
  11. package/components/settings/FlashCardSlidesManager.vue +335 -414
  12. package/components/settings/MatchingGameManager.vue +357 -618
  13. package/components/settings/SlideShowManager.vue +89 -127
  14. package/components/settings/SortingGameSettingsManager.vue +32 -144
  15. package/components/settings/WordJumbleSettingsManager.vue +48 -142
  16. package/i18n/en-US/components/content/blocks/bucket_game.ts +1 -0
  17. package/i18n/en-US/components/content/blocks/flashcard.ts +2 -0
  18. package/i18n/en-US/components/settings/matching_game.ts +1 -1
  19. package/i18n/en-US/components/settings/quizshow_game.ts +1 -1
  20. package/i18n/en-US/components/settings/slideshow.ts +2 -0
  21. package/i18n/es-ES/components/content/blocks/bucket_game.ts +40 -0
  22. package/i18n/es-ES/components/content/blocks/crossword.ts +25 -0
  23. package/i18n/es-ES/components/content/blocks/flashcard.ts +7 -0
  24. package/i18n/es-ES/components/content/blocks/index.ts +23 -0
  25. package/i18n/es-ES/components/content/blocks/matching_game.ts +26 -0
  26. package/i18n/es-ES/components/content/blocks/multiple_choice.ts +9 -0
  27. package/i18n/es-ES/components/content/blocks/quizshow_game.ts +35 -0
  28. package/i18n/es-ES/components/content/blocks/seven_strikes.ts +6 -0
  29. package/i18n/es-ES/components/content/blocks/slideshow.ts +13 -0
  30. package/i18n/es-ES/components/content/blocks/sorting_game.ts +5 -0
  31. package/i18n/es-ES/components/content/blocks/word_jumble.ts +9 -0
  32. package/i18n/es-ES/components/content/crud_table.ts +6 -0
  33. package/i18n/es-ES/components/content/index.ts +7 -0
  34. package/i18n/es-ES/components/index.ts +9 -0
  35. package/i18n/es-ES/components/navigation/index.ts +5 -0
  36. package/i18n/es-ES/components/settings/bucket_game.ts +38 -0
  37. package/i18n/es-ES/components/settings/crossword.ts +7 -0
  38. package/i18n/es-ES/components/settings/flashcard.ts +28 -0
  39. package/i18n/es-ES/components/settings/index.ts +23 -0
  40. package/i18n/es-ES/components/settings/matching_game.ts +15 -0
  41. package/i18n/es-ES/components/settings/multiple_choice.ts +17 -0
  42. package/i18n/es-ES/components/settings/quizshow_game.ts +20 -0
  43. package/i18n/es-ES/components/settings/seven_strikes.ts +8 -0
  44. package/i18n/es-ES/components/settings/slideshow.ts +13 -0
  45. package/i18n/es-ES/components/settings/sorting_game.ts +5 -0
  46. package/i18n/es-ES/components/settings/word_jumble.ts +11 -0
  47. package/i18n/es-ES/index.ts +15 -0
  48. package/i18n/es-ES/modules/index.ts +5 -0
  49. package/i18n/es-ES/pages/index.ts +5 -0
  50. package/i18n/es-ES/shared/content_blocks.ts +18 -0
  51. package/i18n/es-ES/shared/index.ts +7 -0
  52. package/i18n/es-ES/shared/settings.ts +14 -0
  53. package/i18n/sv-SE/components/content/blocks/bucket_game.ts +40 -0
  54. package/i18n/sv-SE/components/content/blocks/crossword.ts +20 -0
  55. package/i18n/sv-SE/components/content/blocks/flashcard.ts +7 -0
  56. package/i18n/sv-SE/components/content/blocks/index.ts +23 -0
  57. package/i18n/sv-SE/components/content/blocks/matching_game.ts +25 -0
  58. package/i18n/sv-SE/components/content/blocks/multiple_choice.ts +9 -0
  59. package/i18n/sv-SE/components/content/blocks/quizshow_game.ts +35 -0
  60. package/i18n/sv-SE/components/content/blocks/seven_strikes.ts +6 -0
  61. package/i18n/sv-SE/components/content/blocks/slideshow.ts +13 -0
  62. package/i18n/sv-SE/components/content/blocks/sorting_game.ts +5 -0
  63. package/i18n/sv-SE/components/content/blocks/word_jumble.ts +9 -0
  64. package/i18n/sv-SE/components/content/crud_table.ts +6 -0
  65. package/i18n/sv-SE/components/content/index.ts +7 -0
  66. package/i18n/sv-SE/components/index.ts +9 -0
  67. package/i18n/sv-SE/components/navigation/index.ts +5 -0
  68. package/i18n/sv-SE/components/settings/bucket_game.ts +38 -0
  69. package/i18n/sv-SE/components/settings/crossword.ts +7 -0
  70. package/i18n/sv-SE/components/settings/flashcard.ts +28 -0
  71. package/i18n/sv-SE/components/settings/index.ts +23 -0
  72. package/i18n/sv-SE/components/settings/matching_game.ts +15 -0
  73. package/i18n/sv-SE/components/settings/multiple_choice.ts +16 -0
  74. package/i18n/sv-SE/components/settings/quizshow_game.ts +20 -0
  75. package/i18n/sv-SE/components/settings/seven_strikes.ts +8 -0
  76. package/i18n/sv-SE/components/settings/slideshow.ts +13 -0
  77. package/i18n/sv-SE/components/settings/sorting_game.ts +5 -0
  78. package/i18n/sv-SE/components/settings/word_jumble.ts +11 -0
  79. package/i18n/sv-SE/index.ts +15 -0
  80. package/i18n/sv-SE/modules/index.ts +5 -0
  81. package/i18n/sv-SE/pages/index.ts +5 -0
  82. package/i18n/sv-SE/shared/content_blocks.ts +18 -0
  83. package/i18n/sv-SE/shared/index.ts +7 -0
  84. package/i18n/sv-SE/shared/settings.ts +14 -0
  85. package/package.json +1 -1
  86. package/i18n/en-US.ts +0 -5
@@ -1,398 +1,337 @@
1
1
  <template>
2
2
  <div>
3
- <v-text-field
4
- v-model="block.metadata.config.title"
5
- :counter="50"
6
- :label="
7
- $t('plugin.games.components.settings.bucket_game.form.title')
8
- "
9
- ref="title"
10
- ></v-text-field>
11
- <br />
12
- <v-textarea
13
- outlined
14
- auto-grow
15
- v-model="block.metadata.config.instructions"
16
- :label="
17
- $t(
18
- 'plugin.games.components.settings.bucket_game.form.instructions'
19
- )
20
- "
21
- ></v-textarea>
22
- <br />
23
- <v-expansion-panels flat>
24
- <v-expansion-panel>
25
- <v-expansion-panel-header class="pa-0"
26
- ><h3>Sortable Flashcards</h3></v-expansion-panel-header
3
+ <v-form ref="outer-form" v-model="valid" v-if="!loading">
4
+ <v-container class="pa-0">
5
+ <v-text-field
6
+ v-model="block.metadata.config.title"
7
+ outlined
8
+ :counter="50"
9
+ :label="
10
+ $t(
11
+ 'plugin.games.components.settings.bucket_game.form.title'
12
+ )
13
+ "
14
+ ref="title"
15
+ ></v-text-field>
16
+ <v-textarea
17
+ outlined
18
+ auto-grow
19
+ v-model="block.metadata.config.instructions"
20
+ :label="
21
+ $t(
22
+ 'plugin.games.components.settings.bucket_game.form.instructions'
23
+ )
24
+ "
25
+ ></v-textarea>
26
+ </v-container>
27
+ <v-divider class="my-4 primary"></v-divider>
28
+ <v-container class="pa-0">
29
+ <p>
30
+ {{
31
+ $t(
32
+ 'plugin.games.components.content.blocks.flashcard.items'
33
+ )
34
+ }}
35
+ </p>
36
+ <SortableExpansionPanel
37
+ v-model="block.metadata.config.cards"
38
+ @click:close="onDelete($event)"
27
39
  >
28
- <v-expansion-panel-content class="ma-0">
29
- <v-container class="pa-0">
30
- <draggable
31
- v-model="block.metadata.config.cards"
32
- class="d-flex flex-column mb-6"
33
- group="cards"
34
- >
35
- <v-card
36
- v-for="(item, index) in block.metadata.config
37
- .cards"
38
- :key="'card_' + index"
39
- class="pa-2 flex-fill cursorGrab"
40
- elevation="0"
41
- outlined
42
- tile
43
- >
44
- <v-row class="pa-3">
45
- <div
46
- class="text-truncate pa-0 ma-0"
47
- @click="onOpenEditor(index)"
48
- v-on:keyup.enter="onOpenEditor(index)"
49
- @mouseover="onHover"
50
- @mouseleave="onHoverLeave"
51
- :class="cursor"
52
- tabindex="0"
53
- >
54
- <v-icon class="pl-2"
55
- >mdi-gesture-tap-hold
56
- </v-icon>
40
+ <template #header="{ item, index }">
41
+ {{
42
+ item.title
43
+ ? block.metadata.config.cards[index].title
44
+ : $t(
45
+ 'plugin.games.components.settings.flashcard.form.card'
46
+ ) +
47
+ ' ' +
48
+ (index + 1)
49
+ }}
50
+ </template>
51
+ <template #body="{ item, index }">
52
+ <v-container>
53
+ <v-row
54
+ class="d-flex justify-space-around pt-8"
55
+ align="center"
56
+ justify="center"
57
+ ><v-btn
58
+ @click="flipCardFront(index)"
59
+ color="primary"
60
+ :outlined="
61
+ !block.metadata.config.cards[index].side
62
+ "
63
+ >{{
64
+ $t(
65
+ 'plugin.games.components.settings.flashcard.form.front'
66
+ )
67
+ }}</v-btn
68
+ >
69
+ {{
70
+ $t(
71
+ 'plugin.games.components.settings.flashcard.form.card'
72
+ ) +
73
+ ' ' +
74
+ (index + 1) +
75
+ ' ' +
76
+ (block.metadata.config.cards[index].side
77
+ ? $t(
78
+ 'plugin.games.components.settings.flashcard.form.front'
79
+ )
80
+ : $t(
81
+ 'plugin.games.components.settings.flashcard.form.back'
82
+ ))
83
+ }}<v-btn
84
+ @click="flipCardBack(index)"
85
+ color="primary"
86
+ :outlined="
87
+ block.metadata.config.cards[index].side
88
+ "
89
+ >
90
+ {{
91
+ $t(
92
+ 'plugin.games.components.settings.flashcard.form.back'
93
+ )
94
+ }}</v-btn
95
+ ></v-row
96
+ ><br />
97
+ <v-form ref="form">
98
+ <v-text-field
99
+ v-model="
100
+ block.metadata.config.cards[index].title
101
+ "
102
+ :label="
103
+ $t(
104
+ 'plugin.games.components.settings.flashcard.form.label'
105
+ )
106
+ "
107
+ ></v-text-field>
108
+ <br />
109
+ <v-textarea
110
+ v-if="
111
+ block.metadata.config.cards[index].side
112
+ "
113
+ outlined
114
+ auto-grow
115
+ v-model="
116
+ block.metadata.config.cards[index].front
117
+ .header
118
+ "
119
+ :label="
120
+ $t(
121
+ 'plugin.games.components.settings.flashcard.form.header'
122
+ )
123
+ "
124
+ />
125
+ <v-textarea
126
+ v-if="
127
+ !block.metadata.config.cards[index].side
128
+ "
129
+ outlined
130
+ auto-grow
131
+ v-model="
132
+ block.metadata.config.cards[index].back
133
+ .header
134
+ "
135
+ :counter="255"
136
+ :label="
137
+ $t(
138
+ 'plugin.games.components.settings.flashcard.form.header'
139
+ )
140
+ "
141
+ required
142
+ />
143
+ <v-card
144
+ outlined
145
+ v-show="
146
+ block.metadata.config.cards[index].side
147
+ "
148
+ >
149
+ <v-card-text>
57
150
  {{
58
- item.title
59
- ? block.metadata.config.cards[
60
- index
61
- ].title
62
- : $t(
63
- 'plugin.games.components.settings.flashcard.form.card'
64
- ) +
65
- ' ' +
66
- (index + 1)
151
+ $t(
152
+ 'plugin.games.components.settings.flashcard.form.card_content'
153
+ )
67
154
  }}
68
- </div>
69
- <v-spacer />
70
- <v-icon
71
- class="float-right"
72
- @click="onDelete(index, $event)"
73
- >
74
- mdi-delete-outline
75
- </v-icon>
76
- </v-row>
77
-
78
- <div
79
- v-if="
80
- block.metadata.config.cards[index]
81
- .expand
155
+ </v-card-text>
156
+ <textEditor
157
+ outlined
158
+ auto-grow
159
+ v-model="
160
+ block.metadata.config.cards[index]
161
+ .front.text
162
+ "
163
+ :label="
164
+ $t(
165
+ 'plugin.games.components.settings.flashcard.form.text'
166
+ )
167
+ "
168
+ required
169
+ />
170
+ </v-card>
171
+ <v-card
172
+ outlined
173
+ v-show="
174
+ !block.metadata.config.cards[index].side
82
175
  "
83
176
  >
84
- <br />
85
- <hr />
86
-
87
- <v-row
88
- class="d-flex justify-space-around pt-8"
89
- align="center"
90
- justify="center"
91
- ><v-btn
92
- @click="flipCardFront(index)"
93
- color="primary"
94
- :outlined="
95
- !block.metadata.config.cards[
96
- index
97
- ].side
98
- "
99
- >{{
100
- $t(
101
- 'plugin.games.components.settings.flashcard.form.front'
102
- )
103
- }}</v-btn
104
- >
177
+ <v-card-text>
178
+ {{
179
+ $t(
180
+ 'plugin.games.components.settings.flashcard.form.card_content'
181
+ )
182
+ }}
183
+ </v-card-text>
184
+ <textEditor
185
+ outlined
186
+ auto-grow
187
+ v-model="
188
+ block.metadata.config.cards[index]
189
+ .back.text
190
+ "
191
+ label="Text"
192
+ required
193
+ />
194
+ </v-card>
195
+ <br />
196
+ <ContentBlockAsset
197
+ v-show="
198
+ block.metadata.config.cards[index].side
199
+ "
200
+ v-model="
201
+ block.metadata.config.cards[index].front
202
+ .img
203
+ "
204
+ mimes="image/png,image/jpeg"
205
+ @click:file="onImageSelect"
206
+ >
207
+ <template #title>
105
208
  {{
106
209
  $t(
107
- 'plugin.games.components.settings.flashcard.form.card'
108
- ) +
109
- ' ' +
110
- (index + 1) +
111
- ' ' +
112
- (block.metadata.config.cards[index]
210
+ 'plugin.games.components.settings.flashcard.form.image.title'
211
+ )
212
+ }}
213
+ </template>
214
+ <template #description>
215
+ {{
216
+ $t(
217
+ 'plugin.games.components.settings.flashcard.form.image.configure_blurb'
218
+ )
219
+ }}
220
+ </template>
221
+ </ContentBlockAsset>
222
+ <ContentBlockAsset
223
+ v-show="
224
+ !block.metadata.config.cards[index].side
225
+ "
226
+ v-model="
227
+ block.metadata.config.cards[index].back
228
+ .img
229
+ "
230
+ mimes="image/png,image/jpeg"
231
+ @click:file="onImageSelect"
232
+ >
233
+ <template #title>
234
+ {{
235
+ $t(
236
+ 'plugin.games.components.settings.flashcard.form.image.title'
237
+ )
238
+ }}
239
+ </template>
240
+ <template #description>
241
+ {{
242
+ $t(
243
+ 'plugin.games.components.settings.flashcard.form.image.configure_blurb'
244
+ )
245
+ }}
246
+ </template>
247
+ </ContentBlockAsset>
248
+ <br />
249
+ <v-textarea
250
+ auto-grow
251
+ v-show="
252
+ block.metadata.config.cards[index].side
253
+ "
254
+ outlined
255
+ v-model="
256
+ block.metadata.config.cards[index].front
257
+ .altText
258
+ "
259
+ label="Alt Text"
260
+ required
261
+ ></v-textarea>
262
+ <v-textarea
263
+ auto-grow
264
+ v-show="
265
+ !block.metadata.config.cards[index].side
266
+ "
267
+ outlined
268
+ v-model="
269
+ block.metadata.config.cards[index].back
270
+ .altText
271
+ "
272
+ label="Alt Text"
273
+ required
274
+ ></v-textarea>
275
+ <v-row
276
+ class="d-flex justify-space-around pt-8"
277
+ align="center"
278
+ justify="center"
279
+ ><v-btn
280
+ @click="flipCardFront(index)"
281
+ color="primary"
282
+ :outlined="
283
+ !block.metadata.config.cards[index]
113
284
  .side
114
- ? $t(
115
- 'plugin.games.components.settings.flashcard.form.front'
116
- )
117
- : $t(
118
- 'plugin.games.components.settings.flashcard.form.back'
119
- ))
120
- }}<v-btn
121
- @click="flipCardBack(index)"
122
- color="primary"
123
- :outlined="
124
- block.metadata.config.cards[
125
- index
126
- ].side
127
- "
128
- >
129
- {{
130
- $t(
131
- 'plugin.games.components.settings.flashcard.form.back'
132
- )
133
- }}</v-btn
134
- ></v-row
135
- ><br />
136
- <v-form ref="form">
137
- <v-text-field
138
- v-model="
139
- block.metadata.config.cards[
140
- index
141
- ].title
142
- "
143
- :label="
144
- $t(
145
- 'plugin.games.components.settings.flashcard.form.label'
146
- )
147
- "
148
- ></v-text-field>
149
- <br />
150
- <v-textarea
151
- v-if="
152
- block.metadata.config.cards[
153
- index
154
- ].side
155
- "
156
- outlined
157
- auto-grow
158
- v-model="
159
- block.metadata.config.cards[
160
- index
161
- ].front.header
162
- "
163
- :label="
164
- $t(
165
- 'plugin.games.components.settings.flashcard.form.header'
166
- )
167
- "
168
- />
169
- <v-textarea
170
- v-if="
171
- !block.metadata.config.cards[
172
- index
173
- ].side
174
- "
175
- outlined
176
- auto-grow
177
- v-model="
178
- block.metadata.config.cards[
179
- index
180
- ].back.header
181
- "
182
- :counter="255"
183
- :label="
184
- $t(
185
- 'plugin.games.components.settings.flashcard.form.header'
186
- )
187
- "
188
- required
189
- />
190
- <v-card
191
- outlined
192
- v-show="
193
- block.metadata.config.cards[
194
- index
195
- ].side
196
- "
197
- >
198
- <v-card-text>
199
- {{
200
- $t(
201
- 'plugin.games.components.settings.flashcard.form.card_content'
202
- )
203
- }}
204
- </v-card-text>
205
- <textEditor
206
- outlined
207
- auto-grow
208
- v-model="
209
- block.metadata.config.cards[
210
- index
211
- ].front.text
212
- "
213
- :label="
214
- $t(
215
- 'plugin.games.components.settings.flashcard.form.text'
216
- )
217
- "
218
- required
219
- />
220
- </v-card>
221
- <v-card
222
- outlined
223
- v-show="
224
- !block.metadata.config.cards[
225
- index
226
- ].side
227
- "
228
- >
229
- <v-card-text>
230
- {{
231
- $t(
232
- 'plugin.games.components.settings.flashcard.form.card_content'
233
- )
234
- }}
235
- </v-card-text>
236
- <textEditor
237
- outlined
238
- auto-grow
239
- v-model="
240
- block.metadata.config.cards[
241
- index
242
- ].back.text
243
- "
244
- label="Text"
245
- required
246
- />
247
- </v-card>
248
- <br />
249
- <ContentBlockAsset
250
- v-show="
251
- block.metadata.config.cards[
252
- index
253
- ].side
254
- "
255
- v-model="
256
- block.metadata.config.cards[
257
- index
258
- ].front.img
259
- "
260
- mimes="image/png,image/jpeg"
261
- @click:file="onImageSelect"
262
- >
263
- <template #title>
264
- {{
265
- $t(
266
- 'plugin.games.components.settings.flashcard.form.image.title'
267
- )
268
- }}
269
- </template>
270
- <template #description>
271
- {{
272
- $t(
273
- 'plugin.games.components.settings.flashcard.form.image.configure_blurb'
274
- )
275
- }}
276
- </template>
277
- </ContentBlockAsset>
278
- <ContentBlockAsset
279
- v-show="
280
- !block.metadata.config.cards[
281
- index
282
- ].side
283
- "
284
- v-model="
285
- block.metadata.config.cards[
286
- index
287
- ].back.img
288
- "
289
- mimes="image/png,image/jpeg"
290
- @click:file="onImageSelect"
291
- >
292
- <template #title>
293
- {{
294
- $t(
295
- 'plugin.games.components.settings.flashcard.form.image.title'
296
- )
297
- }}
298
- </template>
299
- <template #description>
300
- {{
301
- $t(
302
- 'plugin.games.components.settings.flashcard.form.image.configure_blurb'
303
- )
304
- }}
305
- </template>
306
- </ContentBlockAsset>
307
- <br />
308
- <v-textarea
309
- auto-grow
310
- v-show="
311
- block.metadata.config.cards[
312
- index
313
- ].side
314
- "
315
- outlined
316
- v-model="
317
- block.metadata.config.cards[
318
- index
319
- ].front.altText
320
- "
321
- label="Alt Text"
322
- required
323
- ></v-textarea>
324
- <v-textarea
325
- auto-grow
326
- v-show="
327
- !block.metadata.config.cards[
328
- index
329
- ].side
330
- "
331
- outlined
332
- v-model="
333
- block.metadata.config.cards[
334
- index
335
- ].back.altText
336
- "
337
- label="Alt Text"
338
- required
339
- ></v-textarea>
340
- <v-row
341
- class="d-flex justify-space-around pt-8"
342
- align="center"
343
- justify="center"
344
- ><v-btn
345
- @click="flipCardFront(index)"
346
- color="primary"
347
- :outlined="
348
- !block.metadata.config
349
- .cards[index].side
350
- "
351
- >{{
352
- $t(
353
- 'plugin.games.components.settings.flashcard.form.front'
354
- )
355
- }}</v-btn
356
- >
285
+ "
286
+ >{{
287
+ $t(
288
+ 'plugin.games.components.settings.flashcard.form.front'
289
+ )
290
+ }}</v-btn
291
+ >
357
292
 
358
- <v-btn
359
- @click="flipCardBack(index)"
360
- color="primary"
361
- :outlined="
362
- block.metadata.config.cards[
363
- index
364
- ].side
365
- "
366
- >
367
- {{
368
- $t(
369
- 'plugin.games.components.settings.flashcard.form.back'
370
- )
371
- }}</v-btn
372
- ></v-row
373
- >
374
- <br />
375
- </v-form>
376
- </div>
377
- </v-card>
378
- </draggable>
379
- <p
380
- @click="onAddCard"
381
- v-on:keyup.enter="onAddCard"
382
- class="fullWidth"
383
- tabindex="0"
384
- >
385
- <v-icon class="primary addIcon">mdi-plus</v-icon>
386
- {{
387
- $t(
388
- 'plugin.games.components.settings.flashcard.form.add_card'
389
- )
390
- }}
391
- </p>
392
- </v-container>
393
- </v-expansion-panel-content>
394
- </v-expansion-panel>
395
- </v-expansion-panels>
293
+ <v-btn
294
+ @click="flipCardBack(index)"
295
+ color="primary"
296
+ :outlined="
297
+ block.metadata.config.cards[index]
298
+ .side
299
+ "
300
+ >
301
+ {{
302
+ $t(
303
+ 'plugin.games.components.settings.flashcard.form.back'
304
+ )
305
+ }}</v-btn
306
+ ></v-row
307
+ >
308
+ <br />
309
+ </v-form>
310
+ </v-container>
311
+ </template>
312
+ </SortableExpansionPanel>
313
+ </v-container>
314
+ <v-container class="pa-0">
315
+ <v-row justify="center" class="my-4">
316
+ <v-btn color="primary" @click="onAddCard">
317
+ <v-icon>mdi-plus</v-icon>
318
+ {{
319
+ $t(
320
+ 'plugin.games.components.settings.flashcard.form.add_card'
321
+ )
322
+ }}
323
+ </v-btn>
324
+ </v-row>
325
+ </v-container>
326
+ </v-form>
327
+ <div v-if="loading" class="text-center">
328
+ <v-progress-circular
329
+ :size="70"
330
+ :width="7"
331
+ color="primary"
332
+ indeterminate
333
+ ></v-progress-circular>
334
+ </div>
396
335
  </div>
397
336
  </template>
398
337
 
@@ -406,7 +345,7 @@ import {
406
345
  import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
407
346
  import ContentBlockAsset from '~/components/Content/ContentBlockAsset.vue'
408
347
  import TextEditor from '~/components/Text/TextEditor.vue'
409
- import draggable from 'vuedraggable'
348
+ import SortableExpansionPanel from '~/components/SortableExpansionPanel.vue'
410
349
 
411
350
  export default {
412
351
  name: 'FlashCardSlidesManager',
@@ -416,12 +355,13 @@ export default {
416
355
  MathLiveWrapper,
417
356
  ContentViewer,
418
357
  ContentBlockAsset,
419
- draggable,
420
358
  TextEditor,
359
+ SortableExpansionPanel,
421
360
  },
422
361
  data() {
423
362
  return {
424
- cursor: null,
363
+ loading: false,
364
+ valid: true,
425
365
  }
426
366
  },
427
367
  beforeMount() {
@@ -431,6 +371,14 @@ export default {
431
371
  if (_.isEmpty(this.block.metadata)) {
432
372
  this.block.metadata = {}
433
373
  }
374
+ if (_.isEmpty(this.block.metadata.config)) {
375
+ this.block.metadata.config = {}
376
+ }
377
+ if (_.isEmpty(this.block.metadata.config.title)) {
378
+ this.block.metadata.config.title = this.$t(
379
+ 'plugin.games.components.content.blocks.flashcard.title'
380
+ )
381
+ }
434
382
  if (_.isEmpty(this.block.metadata.config)) {
435
383
  this.block.metadata.config = {}
436
384
  this.block.metadata.config.currentSlide = 0
@@ -487,18 +435,6 @@ export default {
487
435
  ],
488
436
  })
489
437
  },
490
- onOpenEditor(index) {
491
- this.block.metadata.config.currentSlide = index
492
- this.block.metadata.config.cards[index].expand =
493
- !this.block.metadata.config.cards[index].expand
494
- this.block.metadata.config.cards.forEach(
495
- (element, element_index) => {
496
- if (index !== element_index) {
497
- element.expand = false
498
- }
499
- }
500
- )
501
- },
502
438
  onImageSelect(img) {
503
439
  let currentSlide = this.block.metadata.config.currentSlide
504
440
  this.block.metadata.config.cards[currentSlide].img = img
@@ -510,21 +446,6 @@ export default {
510
446
  flipCardBack(index) {
511
447
  this.block.metadata.config.cards[index].side = false
512
448
  },
513
- onHover(index) {
514
- this.cursor = 'changePointer'
515
- },
516
- onHoverLeave() {
517
- this.cursor = ''
518
- },
519
449
  },
520
450
  }
521
451
  </script>
522
-
523
- <style scoped>
524
- .changePointer {
525
- cursor: pointer !important;
526
- }
527
- .cursorGrab {
528
- cursor: grab;
529
- }
530
- </style>