@dcrackel/hematournamentui 1.0.686 → 1.0.688
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.
- package/dist/HemaTournamentUI-lib.es.js +6702 -6086
- package/dist/HemaTournamentUI-lib.umd.js +27 -27
- package/package.json +8 -8
- package/src/mocks/getDirectors.js +18 -0
- package/src/mocks/personsMock.js +17505 -69
- package/src/stories/Molecules/Modals/AssignDirectorModal/AssignDirectorModal.stories.js +45 -0
- package/src/stories/Molecules/Modals/AssignDirectorModal/AssignDirectorModal.vue +111 -0
- package/src/stories/Organisms/Cards/BoutCard/BoutCard.vue +4 -1
- package/src/stories/Organisms/Cards/BoutCard/Variants/BoutCardInactive/BoutCardInactive.stories.js +27 -8
- package/src/stories/Organisms/Cards/BoutCard/Variants/BoutCardInactive/BoutCardInactive.vue +57 -30
- package/src/stories/Organisms/Cards/DirectorAssignmentCard/DirectorAssignmentCard.stories.js +45 -0
- package/src/stories/Organisms/Cards/DirectorAssignmentCard/DirectorAssignmentCard.vue +78 -0
- package/src/stories/Templates/EventManagement/PoolLive/PoolLive.stories.js +71 -38
- package/src/stories/Templates/EventManagement/PoolLive/PoolLive.vue +118 -15
- package/src/stories/Templates/PersonManagement/Admin/Administration.vue +87 -0
- package/src/stories/Templates/PersonManagement/Admin/FencerAdmin.vue +58 -75
- package/src/stories/Templates/PersonManagement/Admin/MergeAccounts.vue +242 -0
- package/src/stories/Templates/PersonManagement/PersonManagement.stories.js +5 -0
- package/src/stories/Templates/PersonManagement/PersonManagement.vue +15 -2
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import AssignDirectorModal from './AssignDirectorModal.vue';
|
|
2
|
+
import getDirectors from '../../../../mocks/getDirectors.js';
|
|
3
|
+
import getPoolsWithBoutsByPoolId from '../../../../mocks/getPoolsWithBoutsByPoolId.js';
|
|
4
|
+
|
|
5
|
+
export default {
|
|
6
|
+
title: 'Molecules/Modals/AssignDirectorModal',
|
|
7
|
+
component: AssignDirectorModal,
|
|
8
|
+
tags: ['autodocs'],
|
|
9
|
+
args: {
|
|
10
|
+
show: true,
|
|
11
|
+
bout: getPoolsWithBoutsByPoolId.pools[0].Bouts[0],
|
|
12
|
+
directors: getDirectors,
|
|
13
|
+
},
|
|
14
|
+
argTypes: {
|
|
15
|
+
show: { control: 'boolean' },
|
|
16
|
+
bout: { control: 'object' },
|
|
17
|
+
directors: { control: 'object' },
|
|
18
|
+
onAssign: { action: 'assign' },
|
|
19
|
+
'onUpdate:closeModal': { action: 'update:closeModal' },
|
|
20
|
+
},
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
export const Default = {
|
|
24
|
+
args: {
|
|
25
|
+
show: true,
|
|
26
|
+
bout: getPoolsWithBoutsByPoolId.pools[0].Bouts[0],
|
|
27
|
+
directors: getDirectors,
|
|
28
|
+
},
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
export const Empty = {
|
|
32
|
+
args: {
|
|
33
|
+
show: true,
|
|
34
|
+
bout: getPoolsWithBoutsByPoolId.pools[0].Bouts[0],
|
|
35
|
+
directors: [],
|
|
36
|
+
},
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
export const Hidden = {
|
|
40
|
+
args: {
|
|
41
|
+
show: false,
|
|
42
|
+
bout: getPoolsWithBoutsByPoolId.pools[0].Bouts[0],
|
|
43
|
+
directors: getDirectors,
|
|
44
|
+
},
|
|
45
|
+
};
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<transition
|
|
3
|
+
enter-active-class="transition-opacity duration-500"
|
|
4
|
+
enter-class="opacity-0"
|
|
5
|
+
enter-to-class="opacity-100"
|
|
6
|
+
leave-active-class="transition-opacity duration-500"
|
|
7
|
+
leave-class="opacity-100"
|
|
8
|
+
leave-to-class="opacity-0"
|
|
9
|
+
>
|
|
10
|
+
<div
|
|
11
|
+
v-if="show"
|
|
12
|
+
class="fixed inset-0 bg-secondary bg-opacity-75 flex items-center justify-center z-50"
|
|
13
|
+
@click="close"
|
|
14
|
+
>
|
|
15
|
+
<div
|
|
16
|
+
class="w-full md:w-1/3 md:min-w-[30rem] bg-neutral rounded-lg shadow-lg pt-2 px-2"
|
|
17
|
+
@click.stop
|
|
18
|
+
>
|
|
19
|
+
<div class="w-full px-2">
|
|
20
|
+
<div class="flex items-start justify-between">
|
|
21
|
+
<div class="flex-1 pr-2 mt-1.5">
|
|
22
|
+
<BaseText
|
|
23
|
+
:text="`${boutTitle}`"
|
|
24
|
+
size="sm"
|
|
25
|
+
color="primaryHighlight"
|
|
26
|
+
weight="bold"
|
|
27
|
+
/>
|
|
28
|
+
</div>
|
|
29
|
+
|
|
30
|
+
<BaseIcon
|
|
31
|
+
icon-name="fa-circle-xmark"
|
|
32
|
+
size="lg"
|
|
33
|
+
color="quaternary"
|
|
34
|
+
hover="alarm"
|
|
35
|
+
@click="close"
|
|
36
|
+
class="mt-0.5"
|
|
37
|
+
/>
|
|
38
|
+
</div>
|
|
39
|
+
|
|
40
|
+
<!-- full-width divider -->
|
|
41
|
+
<div class="border-b border-dropdownSelect"></div>
|
|
42
|
+
<BaseText
|
|
43
|
+
text="Select Director to assign this bout to"
|
|
44
|
+
size="xs"
|
|
45
|
+
color="quaternary"
|
|
46
|
+
weight="normal"
|
|
47
|
+
class="pt-1"
|
|
48
|
+
/>
|
|
49
|
+
</div>
|
|
50
|
+
|
|
51
|
+
<div class="md:border-b border-dropdownSelect mt-3 mb-3"></div>
|
|
52
|
+
|
|
53
|
+
<div class="px-2 space-y-2 max-h-[70vh] overflow-y-auto">
|
|
54
|
+
<DirectorAssignmentCard
|
|
55
|
+
v-for="d in directors"
|
|
56
|
+
:key="d.PersonId"
|
|
57
|
+
:director="d"
|
|
58
|
+
@select="selectDirector"
|
|
59
|
+
/>
|
|
60
|
+
</div>
|
|
61
|
+
|
|
62
|
+
<div v-if="!directors || directors.length === 0" class="px-4 py-8 text-center">
|
|
63
|
+
<BaseText text="No directors available." size="sm" color="quinary" />
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
</transition>
|
|
68
|
+
</template>
|
|
69
|
+
|
|
70
|
+
<script>
|
|
71
|
+
import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
|
|
72
|
+
import BaseText from "../../../Atoms/Text/BaseText.vue";
|
|
73
|
+
import DirectorAssignmentCard from "../../../Organisms/Cards/DirectorAssignmentCard/DirectorAssignmentCard.vue";
|
|
74
|
+
|
|
75
|
+
export default {
|
|
76
|
+
name: "AssignDirectorModal",
|
|
77
|
+
components: { BaseIcon, BaseText, DirectorAssignmentCard },
|
|
78
|
+
emits: ["update:closeModal", "assign"],
|
|
79
|
+
props: {
|
|
80
|
+
show: {
|
|
81
|
+
type: Boolean,
|
|
82
|
+
default: false
|
|
83
|
+
},
|
|
84
|
+
bout: {
|
|
85
|
+
type: Object,
|
|
86
|
+
required: true
|
|
87
|
+
},
|
|
88
|
+
directors: {
|
|
89
|
+
type: Array,
|
|
90
|
+
default: () => []
|
|
91
|
+
}
|
|
92
|
+
},
|
|
93
|
+
computed: {
|
|
94
|
+
boutTitle() {
|
|
95
|
+
const p1 = this.bout?.Person1?.DisplayName || 'Unknown';
|
|
96
|
+
const p2 = this.bout?.Person2?.DisplayName || 'Unknown';
|
|
97
|
+
return `${p1} vs ${p2}`;
|
|
98
|
+
},
|
|
99
|
+
},
|
|
100
|
+
methods: {
|
|
101
|
+
close() {
|
|
102
|
+
this.$emit("update:closeModal", this.bout);
|
|
103
|
+
},
|
|
104
|
+
selectDirector(director) {
|
|
105
|
+
// bubble selection up; parent decides how to update/ref save
|
|
106
|
+
this.$emit("assign", { bout: this.bout, director });
|
|
107
|
+
this.close();
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
};
|
|
111
|
+
</script>
|
|
@@ -7,9 +7,11 @@
|
|
|
7
7
|
:reorderMode="reorderMode"
|
|
8
8
|
:timerStatus="timerStatus"
|
|
9
9
|
:selected="selected"
|
|
10
|
+
:isAdmin="isAdmin"
|
|
10
11
|
@start="onStart"
|
|
11
12
|
@resume="onResume"
|
|
12
13
|
@edit="onEdit"
|
|
14
|
+
@assign="onAssign"
|
|
13
15
|
/>
|
|
14
16
|
</template>
|
|
15
17
|
|
|
@@ -40,6 +42,7 @@ export default {
|
|
|
40
42
|
reorderMode: { type: Boolean, required: true },
|
|
41
43
|
isCountingBackwardsMaxScore: { type: Number, default: 0 },
|
|
42
44
|
selected: { type: Boolean, default: false },
|
|
45
|
+
isAdmin: { type: Boolean, default: false },
|
|
43
46
|
},
|
|
44
47
|
computed: {
|
|
45
48
|
card() {
|
|
@@ -98,7 +101,6 @@ export default {
|
|
|
98
101
|
},
|
|
99
102
|
},
|
|
100
103
|
methods: {
|
|
101
|
-
forward(name, payload) { this.$emit(name, payload); },
|
|
102
104
|
onStart(ids) { this.$emit('action:startBout', ids);},
|
|
103
105
|
onResume(ids) { this.$emit('action:resumeBout', ids); },
|
|
104
106
|
onEdit(ids) { this.$emit('action:editBout', ids); },
|
|
@@ -106,6 +108,7 @@ export default {
|
|
|
106
108
|
if (!fromDragId || !toDragId || String(fromDragId) === String(toDragId)) return;
|
|
107
109
|
this.$emit('reorder:swap', { fromBoutId: fromDragId, toBoutId: toDragId });
|
|
108
110
|
},
|
|
111
|
+
onAssign(ids) { this.$emit('action:assignDirector', ids); },
|
|
109
112
|
},
|
|
110
113
|
};
|
|
111
114
|
</script>
|
package/src/stories/Organisms/Cards/BoutCard/Variants/BoutCardInactive/BoutCardInactive.stories.js
CHANGED
|
@@ -1,30 +1,49 @@
|
|
|
1
1
|
import BoutCardInactive from './BoutCardInactive.vue';
|
|
2
2
|
|
|
3
|
-
const
|
|
3
|
+
const baseCard = {
|
|
4
4
|
status: 'scheduled',
|
|
5
5
|
customStatus: '',
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
score1: 0,
|
|
9
|
-
|
|
10
|
-
|
|
6
|
+
fencer1: { portrait: '', name: 'Fencer A', team: 'Club X', colorDot: 'red-500' },
|
|
7
|
+
fencer2: { portrait: '', name: 'Fencer B', team: 'Club Y', colorDot: 'blue-500' },
|
|
8
|
+
score1: 0,
|
|
9
|
+
score2: 0,
|
|
10
|
+
pos1: '1',
|
|
11
|
+
pos2: '2',
|
|
12
|
+
ids: { BoutId: 2, orderIndex: 1, PoolId: 10, EventId: 5 },
|
|
11
13
|
};
|
|
12
14
|
|
|
13
15
|
export default {
|
|
14
16
|
title: 'Molecules/BoutCard/Variants/Inactive',
|
|
15
17
|
component: BoutCardInactive,
|
|
16
18
|
args: {
|
|
17
|
-
|
|
19
|
+
card: { ...baseCard },
|
|
18
20
|
editMode: true,
|
|
19
21
|
reorderMode: false,
|
|
20
22
|
mode: 'scheduled',
|
|
23
|
+
|
|
24
|
+
// NEW
|
|
25
|
+
isAdmin: false,
|
|
21
26
|
},
|
|
22
27
|
argTypes: {
|
|
23
28
|
mode: { control: { type: 'radio' }, options: ['scheduled', 'completed'] },
|
|
29
|
+
isAdmin: { control: 'boolean' },
|
|
24
30
|
},
|
|
25
31
|
};
|
|
26
32
|
|
|
27
33
|
export const Scheduled = {};
|
|
34
|
+
|
|
35
|
+
export const ScheduledAdminAssignVisible = {
|
|
36
|
+
args: {
|
|
37
|
+
mode: 'scheduled',
|
|
38
|
+
isAdmin: true,
|
|
39
|
+
card: { ...baseCard, status: 'scheduled' },
|
|
40
|
+
},
|
|
41
|
+
};
|
|
42
|
+
|
|
28
43
|
export const Completed = {
|
|
29
|
-
args: {
|
|
44
|
+
args: {
|
|
45
|
+
mode: 'completed',
|
|
46
|
+
isAdmin: true, // doesn't matter; button should be hidden when not scheduled
|
|
47
|
+
card: { ...baseCard, status: 'completed', score1: 5, score2: 2 },
|
|
48
|
+
},
|
|
30
49
|
};
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
</div>
|
|
38
38
|
|
|
39
39
|
<!-- Actions -->
|
|
40
|
-
<section v-if="editMode" class="text-right pl-4">
|
|
40
|
+
<section v-if="editMode" class="text-right pl-4 flex">
|
|
41
41
|
<BaseButton
|
|
42
42
|
v-if="isScheduled"
|
|
43
43
|
label="Start" size="sm" type="primary"
|
|
@@ -46,50 +46,75 @@
|
|
|
46
46
|
v-if="!isScheduled"
|
|
47
47
|
label="Edit" size="sm" type="primary"
|
|
48
48
|
@buttonClick="$emit('edit', c.ids)" class="w-16"/>
|
|
49
|
+
<!-- Admin assign button -->
|
|
50
|
+
<BaseButton
|
|
51
|
+
v-if="isAdmin && isScheduled"
|
|
52
|
+
label=""
|
|
53
|
+
type="primary"
|
|
54
|
+
iconName="fa-user-plus"
|
|
55
|
+
:iconLeft="false"
|
|
56
|
+
class="w-10 h-10 pr-4"
|
|
57
|
+
@buttonClick="$emit('assign', c.ids)"
|
|
58
|
+
/>
|
|
49
59
|
</section>
|
|
50
60
|
</div>
|
|
51
61
|
|
|
52
62
|
<!-- Mobile -->
|
|
53
63
|
<section
|
|
54
|
-
class="flex md:hidden
|
|
64
|
+
class="relative flex md:hidden items-stretch border rounded-md bg-poolBox transition overflow-hidden"
|
|
55
65
|
:class="[reorderMode ? 'cursor-grab ring-2 ring-dashed ring-slate-300' : '']"
|
|
56
|
-
@click="onCardClick"
|
|
57
66
|
>
|
|
58
|
-
<!--
|
|
59
|
-
<div
|
|
60
|
-
|
|
61
|
-
<div
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
<BaseText :text="`${(c.ids.orderIndex ?? 0) + 1}`" size="3xl" color="quaternary" weight="bold"/>
|
|
66
|
-
</div>
|
|
67
|
+
<!-- main tappable area -->
|
|
68
|
+
<div class="flex flex-1 items-center p-4" @click="onCardClick">
|
|
69
|
+
<!-- left portrait or index when reordering -->
|
|
70
|
+
<div v-if="!reorderMode" class="relative flex flex-col items-center">
|
|
71
|
+
<img :src="fencer1Portrait" alt="Portrait" class="w-12 h-12 rounded-full"/>
|
|
72
|
+
<div :class="`w-4 h-4 rounded-full bg-${card.fencer1.colorDot} relative -mt-4 ml-9 z-10`"></div>
|
|
73
|
+
</div>
|
|
67
74
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
<div class="flex items-center justify-center">
|
|
72
|
-
<!-- seed circle -->
|
|
73
|
-
<div :class="`mr-2 bg-${card.fencer1.colorDot} w-3 h-3 grid place-items-center`">
|
|
74
|
-
</div>
|
|
75
|
-
<BaseText :text="`${c.fencer1.name}`" size="sm" color="quinary" weight="bold" class="leading-none"/>
|
|
75
|
+
<div v-if="reorderMode" class="flex flex-col items-center -mt-3 select-none">
|
|
76
|
+
<BaseText text="bout" size="xs" color="quinary" weight="bold"/>
|
|
77
|
+
<BaseText :text="`${(c.ids.orderIndex ?? 0) + 1}`" size="3xl" color="quaternary" weight="bold"/>
|
|
76
78
|
</div>
|
|
77
79
|
|
|
78
|
-
|
|
80
|
+
<!-- center -->
|
|
81
|
+
<div class="text-center flex-1 mx-4 flex flex-col items-center justify-center leading-none">
|
|
82
|
+
<div class="flex items-center justify-center">
|
|
83
|
+
<div :class="`mr-2 bg-${card.fencer1.colorDot} w-3 h-3`"></div>
|
|
84
|
+
<BaseText :text="c.fencer1.name" size="sm" color="quinary" weight="bold" class="leading-none"/>
|
|
85
|
+
</div>
|
|
86
|
+
|
|
87
|
+
<BaseText text="vs" size="xs" color="quaternary"/>
|
|
79
88
|
|
|
80
|
-
|
|
81
|
-
|
|
89
|
+
<div class="flex items-center justify-center">
|
|
90
|
+
<div :class="`mr-2 bg-${card.fencer2.colorDot} w-3 h-3`"></div>
|
|
91
|
+
<BaseText :text="c.fencer2.name" size="sm" color="quinary" weight="bold" class="leading-none"/>
|
|
82
92
|
</div>
|
|
83
|
-
|
|
93
|
+
</div>
|
|
94
|
+
|
|
95
|
+
<!-- right portrait -->
|
|
96
|
+
<div class="relative w-12 h-12">
|
|
97
|
+
<img :src="fencer2Portrait" alt="Portrait" class="w-12 h-12 rounded-full"/>
|
|
98
|
+
<div :class="`absolute -mt-4 -right-1 w-4 h-4 rounded-full bg-${card.fencer2.colorDot} ring-2 ring-white`"></div>
|
|
84
99
|
</div>
|
|
85
100
|
</div>
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
101
|
+
|
|
102
|
+
<!-- action rail: [ > ] -->
|
|
103
|
+
<button
|
|
104
|
+
v-if="isAdmin && isScheduled && !reorderMode"
|
|
105
|
+
type="button"
|
|
106
|
+
class="w-10 flex items-center justify-center border-l border-dropdownSelect bg-white/60 hover:bg-white"
|
|
107
|
+
@click.stop="$emit('assign', c.ids)"
|
|
108
|
+
aria-label="More actions"
|
|
109
|
+
title="Assign director"
|
|
110
|
+
>
|
|
111
|
+
<BaseIcon icon-name="fa-chevron-right" size="sm" color="quinary" hover="primary" />
|
|
112
|
+
</button>
|
|
91
113
|
</section>
|
|
92
114
|
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
|
|
93
118
|
</section>
|
|
94
119
|
</template>
|
|
95
120
|
|
|
@@ -97,6 +122,7 @@
|
|
|
97
122
|
import BaseText from "../../../../../Atoms/Text/BaseText.vue";
|
|
98
123
|
import BaseButton from "../../../../../Molecules/Buttons/BaseButton/BaseButton.vue";
|
|
99
124
|
import missingPortrait from "../../../../../../assets/portrait1.png";
|
|
125
|
+
import BaseIcon from "../../../../../Atoms/Icon/BaseIcon.vue";
|
|
100
126
|
|
|
101
127
|
const emptyFencer = { portrait: "", name: "Unknown Name", team: "Unknown Team", colorDot: "gray-400" };
|
|
102
128
|
const defaultCard = {
|
|
@@ -113,12 +139,13 @@ const defaultCard = {
|
|
|
113
139
|
|
|
114
140
|
export default {
|
|
115
141
|
name: "BoutCardInactive",
|
|
116
|
-
components: { BaseButton, BaseText },
|
|
142
|
+
components: {BaseIcon, BaseButton, BaseText },
|
|
117
143
|
props: {
|
|
118
144
|
card: { type: Object, required: true },
|
|
119
145
|
editMode: { type: Boolean, default: false },
|
|
120
146
|
reorderMode: { type: Boolean, default: false },
|
|
121
147
|
mode: { type: String, default: undefined }, // let status decide unless explicitly set
|
|
148
|
+
isAdmin: { type: Boolean, default: false },
|
|
122
149
|
},
|
|
123
150
|
computed: {
|
|
124
151
|
c() {
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import DirectorAssignmentCard from './DirectorAssignmentCard.vue';
|
|
2
|
+
import getDirectors from '../../../../mocks/getDirectors.js';
|
|
3
|
+
|
|
4
|
+
export default {
|
|
5
|
+
title: 'Organisms/Cards/DirectorAssignmentCard',
|
|
6
|
+
component: DirectorAssignmentCard,
|
|
7
|
+
tags: ['autodocs'],
|
|
8
|
+
args: {
|
|
9
|
+
director: getDirectors[0],
|
|
10
|
+
},
|
|
11
|
+
argTypes: {
|
|
12
|
+
director: { control: 'object' },
|
|
13
|
+
onSelect: { action: 'select' },
|
|
14
|
+
},
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
export const Default = {
|
|
18
|
+
args: {
|
|
19
|
+
director: getDirectors[0],
|
|
20
|
+
},
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
export const WithPortrait = {
|
|
24
|
+
args: {
|
|
25
|
+
director: getDirectors[1],
|
|
26
|
+
},
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
export const NoRing = {
|
|
30
|
+
args: {
|
|
31
|
+
director: {
|
|
32
|
+
...getDirectors[0],
|
|
33
|
+
Ring: { PoolId: null, RingName: '' },
|
|
34
|
+
},
|
|
35
|
+
},
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
export const NoClub = {
|
|
39
|
+
args: {
|
|
40
|
+
director: {
|
|
41
|
+
...getDirectors[0],
|
|
42
|
+
ClubName: null,
|
|
43
|
+
},
|
|
44
|
+
},
|
|
45
|
+
};
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<button
|
|
3
|
+
type="button"
|
|
4
|
+
class="w-full flex items-center border border-dropdownSelect rounded-lg shadow-sm bg-white hover:border-bright active:scale-[0.99] transition px-3 py-2 mb-2"
|
|
5
|
+
@click="selectDirector"
|
|
6
|
+
>
|
|
7
|
+
<!-- Portrait -->
|
|
8
|
+
<div class="flex mr-3">
|
|
9
|
+
<div
|
|
10
|
+
v-if="!portraitURL"
|
|
11
|
+
class="w-10 h-10 rounded-xl bg-dropdownSelect flex items-center justify-center"
|
|
12
|
+
>
|
|
13
|
+
<BaseIcon icon-name="fa-user" size="sm" color="neutral" />
|
|
14
|
+
</div>
|
|
15
|
+
<img
|
|
16
|
+
v-else
|
|
17
|
+
:src="portraitURL"
|
|
18
|
+
alt="Portrait"
|
|
19
|
+
class="w-10 h-10 rounded-xl object-cover"
|
|
20
|
+
/>
|
|
21
|
+
</div>
|
|
22
|
+
|
|
23
|
+
<!-- Name + Club -->
|
|
24
|
+
<div class="flex flex-col flex-1 text-left">
|
|
25
|
+
<BaseText :text="director.DisplayName" size="sm" color="quaternary" weight="bold" />
|
|
26
|
+
<div class="flex flex-col items-end mr-2">
|
|
27
|
+
<BaseText
|
|
28
|
+
v-if="ringName"
|
|
29
|
+
:text="ringName"
|
|
30
|
+
size="xs"
|
|
31
|
+
color="primaryHighlight"
|
|
32
|
+
weight="bold"
|
|
33
|
+
/>
|
|
34
|
+
<BaseText
|
|
35
|
+
v-else
|
|
36
|
+
text="No ring"
|
|
37
|
+
size="xs"
|
|
38
|
+
color="quinary"
|
|
39
|
+
weight="normal"
|
|
40
|
+
/>
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
<!-- Chevron -->
|
|
46
|
+
<BaseIcon icon-name="fa-chevron-right" size="sm" color="quinary" hover="primary" />
|
|
47
|
+
</button>
|
|
48
|
+
</template>
|
|
49
|
+
|
|
50
|
+
<script>
|
|
51
|
+
import BaseText from "../../../Atoms/Text/BaseText.vue";
|
|
52
|
+
import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
|
|
53
|
+
|
|
54
|
+
export default {
|
|
55
|
+
name: "DirectorAssignmentCard",
|
|
56
|
+
components: { BaseText, BaseIcon },
|
|
57
|
+
emits: ["select"],
|
|
58
|
+
props: {
|
|
59
|
+
director: {
|
|
60
|
+
type: Object,
|
|
61
|
+
required: true
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
computed: {
|
|
65
|
+
portraitURL() {
|
|
66
|
+
return this.director?.PortraitUrl || "";
|
|
67
|
+
},
|
|
68
|
+
ringName() {
|
|
69
|
+
return this.director?.Ring?.RingName || "";
|
|
70
|
+
}
|
|
71
|
+
},
|
|
72
|
+
methods: {
|
|
73
|
+
selectDirector() {
|
|
74
|
+
this.$emit("select", this.director);
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
};
|
|
78
|
+
</script>
|
|
@@ -1,61 +1,94 @@
|
|
|
1
1
|
import PoolLive from './PoolLive.vue';
|
|
2
2
|
import getPoolsWithBoutsByPoolId from "../../../../mocks/getPoolsWithBoutsByPoolId.js";
|
|
3
|
+
import getDirectors from "../../../../mocks/getDirectors.js";
|
|
4
|
+
|
|
5
|
+
const baseBouts = getPoolsWithBoutsByPoolId.pools[0].Bouts;
|
|
6
|
+
|
|
7
|
+
// Ensure we have predictable statuses for the stories
|
|
8
|
+
const makeUpcomingScheduled = (bouts) =>
|
|
9
|
+
bouts.map((b, i) => {
|
|
10
|
+
// keep one active if your UI expects it, otherwise everything scheduled is fine
|
|
11
|
+
if (i === 0) return { ...b, Status: 'Scheduled', OrderIndex: 0 };
|
|
12
|
+
if (i === 1) return { ...b, Status: 'Scheduled', OrderIndex: 1 };
|
|
13
|
+
if (i === 2) return { ...b, Status: 'Scheduled', OrderIndex: 2 };
|
|
14
|
+
return { ...b, Status: (b.Status || 'Scheduled'), OrderIndex: b.OrderIndex ?? i };
|
|
15
|
+
});
|
|
16
|
+
|
|
17
|
+
const makeAllCompleted = (bouts) =>
|
|
18
|
+
bouts.map((b) => ({ ...b, Status: 'Completed' }));
|
|
19
|
+
|
|
20
|
+
const makeAssignedToUser = (bouts, userId, userName) =>
|
|
21
|
+
bouts.map((b, i) =>
|
|
22
|
+
i === 0
|
|
23
|
+
? { ...b, RefereeId: userId, RefName: userName, Status: 'Scheduled', OrderIndex: 0 }
|
|
24
|
+
: { ...b }
|
|
25
|
+
);
|
|
3
26
|
|
|
4
27
|
export default {
|
|
5
28
|
title: 'Templates/EventManagement/PoolLive',
|
|
6
29
|
component: PoolLive,
|
|
7
30
|
tags: ['PoolLive'],
|
|
8
31
|
args: {
|
|
9
|
-
bouts:
|
|
32
|
+
bouts: makeUpcomingScheduled(baseBouts),
|
|
10
33
|
event: getPoolsWithBoutsByPoolId.event,
|
|
11
34
|
hostingClubColors: getPoolsWithBoutsByPoolId.hostingClubColors,
|
|
12
35
|
connectedToServer: true,
|
|
13
36
|
editMode: true,
|
|
14
|
-
|
|
37
|
+
|
|
38
|
+
// IMPORTANT: these drive Admin + Assigned logic
|
|
39
|
+
role: 'admin',
|
|
40
|
+
currentUserId: 79, // Tom Testerlou
|
|
41
|
+
directors: getDirectors,
|
|
15
42
|
},
|
|
16
43
|
argTypes: {
|
|
17
|
-
bouts: {
|
|
18
|
-
|
|
19
|
-
},
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
},
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
},
|
|
26
|
-
connectedToServer: {
|
|
27
|
-
control: Boolean
|
|
28
|
-
},
|
|
29
|
-
editMode: {
|
|
30
|
-
control: Boolean
|
|
31
|
-
},
|
|
32
|
-
role: {
|
|
33
|
-
control: String
|
|
34
|
-
}
|
|
44
|
+
bouts: { control: 'object' },
|
|
45
|
+
event: { control: 'object' },
|
|
46
|
+
hostingClubColors: { control: 'object' },
|
|
47
|
+
connectedToServer: { control: 'boolean' },
|
|
48
|
+
editMode: { control: 'boolean' },
|
|
49
|
+
role: { control: 'text' },
|
|
50
|
+
currentUserId: { control: 'number' },
|
|
51
|
+
directors: { control: 'object' },
|
|
35
52
|
},
|
|
36
53
|
};
|
|
37
54
|
|
|
38
|
-
export const
|
|
55
|
+
export const Admin = {
|
|
39
56
|
args: {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
}
|
|
57
|
+
role: 'admin',
|
|
58
|
+
editMode: true,
|
|
59
|
+
bouts: makeUpcomingScheduled(baseBouts), // scheduled => assign chevrons render
|
|
60
|
+
currentUserId: 79,
|
|
61
|
+
directors: getDirectors,
|
|
62
|
+
},
|
|
46
63
|
};
|
|
47
64
|
|
|
48
|
-
const
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
65
|
+
export const NonAdminDirector = {
|
|
66
|
+
args: {
|
|
67
|
+
role: 'director',
|
|
68
|
+
editMode: true,
|
|
69
|
+
bouts: makeUpcomingScheduled(baseBouts),
|
|
70
|
+
currentUserId: 79,
|
|
71
|
+
directors: getDirectors,
|
|
72
|
+
},
|
|
73
|
+
};
|
|
52
74
|
|
|
53
|
-
export const
|
|
75
|
+
export const AssignedBoutBanner = {
|
|
54
76
|
args: {
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
77
|
+
role: 'director',
|
|
78
|
+
editMode: true,
|
|
79
|
+
bouts: makeAssignedToUser(baseBouts, 79, 'Tom Testerlou'),
|
|
80
|
+
currentUserId: 79,
|
|
81
|
+
directors: getDirectors,
|
|
82
|
+
},
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
export const AllBoutsComplete = {
|
|
86
|
+
args: {
|
|
87
|
+
bouts: makeAllCompleted(baseBouts),
|
|
58
88
|
connectedToServer: false,
|
|
59
|
-
editMode: false
|
|
60
|
-
|
|
61
|
-
|
|
89
|
+
editMode: false,
|
|
90
|
+
role: 'admin',
|
|
91
|
+
currentUserId: 79,
|
|
92
|
+
directors: getDirectors,
|
|
93
|
+
},
|
|
94
|
+
};
|