refactor(SubmitButton): SubmitButton component uses default templat…

…e for button inner text. Closes #66
antoinezanardi · Nov 20, 2020 · 6e32b39 · 6e32b39
1 parent e5b0045
commit 6e32b39
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 20 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,10 @@
 
 * [#70](https://github.com/antoinezanardi/werewolves-assistant-web/issues/70) - Good translations when confirming that a role is picked but chosen anyway.
 
+### ♻️ Refactoring
+
+* [#66](https://github.com/antoinezanardi/werewolves-assistant-web/issues/66) - `SubmitButton` component uses default template for button inner text.
+
 ### 📦 Packages
 
 * `@sentry/browser` updated to version `5.27.4`.

diff --git a/src/components/Game/GameContent/GamePlayField/GamePlayFieldFooter/GamePlayFieldFooter.vue b/src/components/Game/GameContent/GamePlayField/GamePlayFieldFooter/GamePlayFieldFooter.vue
@@ -23,8 +23,10 @@
             <div class="col-lg-4 col-12 order-last order-lg-1">
                 <form @submit.prevent="submitPlay">
                     <SubmitButton id="play-submit-button" classes="btn btn-primary btn-block btn-lg"
-                                  :loading="loading" :disabled="!canSubmitPlay"
-                                  :text="`<i class='fa fa-play-circle mr-2'></i>${$t('GamePlayFieldFooter.next')}`"/>
+                                  :loading="loading" :disabled="!canSubmitPlay">
+                        <i class="fa fa-play-circle mr-2"/>
+                        <span v-html="$t('GamePlayFieldFooter.next')"/>
+                    </SubmitButton>
                 </form>
             </div>
             <div class="col-lg-4 col order-lg-2">

diff --git a/src/components/GameLobby/GameLobby.vue b/src/components/GameLobby/GameLobby.vue
@@ -69,17 +69,21 @@
                                 <SubmitButton id="random-repartition-button"
                                               classes="btn btn-dark btn-block text-uppercase font-weight-bold"
                                               :disabled-tooltip-text="$t('GameLobby.fourPlayerRequiredToGetRandomRepartition')"
-                                              :text="`<i class='fas fa-random mr-2'></i>${$t('GameLobby.getRandomRepartition')}`"
                                               :loading="loading.getGameRepartition"
-                                              :disabled="loading.createGame || !game.areThereEnoughPlayers"/>
+                                              :disabled="loading.createGame || !game.areThereEnoughPlayers">
+                                    <i class="fas fa-random mr-2"/>
+                                    <span v-html="$t('GameLobby.getRandomRepartition')"/>
+                                </SubmitButton>
                             </form>
                         </div>
                         <div class="col-lg-4 col-sm-6 mt-lg-0 mt-2 mt-sm-0">
                             <form @submit.prevent="createGame">
                                 <SubmitButton classes="btn btn-primary btn-lg btn-block text-uppercase font-weight-bold"
-                                              :text="`<i class='fa fa-play-circle mr-2'></i>${$t('GameLobby.launchParty')}`"
                                               :disabled-tooltip-text="createGameButtonDisabledText" :loading="loading.createGame"
-                                              :disabled="loading.getGameRepartition || !game.canStartGame"/>
+                                              :disabled="loading.getGameRepartition || !game.canStartGame">
+                                    <i class="fa fa-play-circle mr-2"/>
+                                    <span v-html="$t('GameLobby.launchParty')"/>
+                                </SubmitButton>
                             </form>
                         </div>
                         <div class="col-lg-4 mt-2 mt-lg-0">

diff --git a/src/components/GameLobby/GameLobbyAlreadyHavePlayingGame.vue b/src/components/GameLobby/GameLobbyAlreadyHavePlayingGame.vue
@@ -30,8 +30,10 @@
             </div>
             <div class="col-lg-4 col-md-6 col-12 mt-md-0 mt-3">
                 <form @submit.prevent="cancelGame">
-                    <SubmitButton :loading="loading" classes="btn btn-block btn-lg btn-dark text-uppercase font-weight-bold"
-                                  :text="`<i class='fa fa-times-circle mr-2'></i>${$t('GameLobbyAlreadyHavePlayingGame.cancelGame')}`"/>
+                    <SubmitButton :loading="loading" classes="btn btn-block btn-lg btn-dark text-uppercase font-weight-bold">
+                        <i class="fa fa-times-circle mr-2"/>
+                        <span v-html="$t('GameLobbyAlreadyHavePlayingGame.cancelGame')"/>
+                    </SubmitButton>
                 </form>
             </div>
         </div>
@@ -40,8 +42,8 @@
 
 <script>
 
-import Game from "../../classes/Game";
-import SubmitButton from "../shared/Forms/SubmitButton";
+import Game from "@/classes/Game";
+import SubmitButton from "@/components/shared/Forms/SubmitButton";
 import Swal from "sweetalert2";
 
 export default {

diff --git a/src/components/Home/AccountModal/AccountModal.vue b/src/components/Home/AccountModal/AccountModal.vue
@@ -38,8 +38,9 @@
                                 <i class="fa fa-times mr-2"/>
                                 <span v-html="$t('AccountModal.close')"/>
                             </button>
-                            <SubmitButton classes="btn btn-primary" :loading="loading" :disabled="invalid"
-                                          :text="submitBtnText"/>
+                            <SubmitButton classes="btn btn-primary" :loading="loading" :disabled="invalid">
+                                <span v-html="submitBtnText"/>
+                            </SubmitButton>
                         </div>
                     </form>
                 </ValidationObserver>
@@ -52,7 +53,7 @@
 import Vue from "vue";
 import { mapActions } from "vuex";
 import $ from "jquery";
-import SubmitButton from "../../shared/Forms/SubmitButton";
+import SubmitButton from "@/components/shared/Forms/SubmitButton";
 import LoginPanel from "./LoginPanel";
 import RegisterPanel from "./RegisterPanel";
 import { isAPIError } from "@/helpers/functions/Error";

diff --git a/src/components/shared/Forms/SubmitButton.vue b/src/components/shared/Forms/SubmitButton.vue
@@ -4,7 +4,9 @@
                 :disabled="loading || disabled" class="d-flex justify-content-center align-items-center"
                 type="submit" @click="click">
             <transition mode="out-in" name="fade">
-                <span v-if="!loading" key="text" v-html="text"/>
+                <div v-if="!loading" key="text">
+                    <slot/>
+                </div>
                 <HalfCircleSpinner v-else key="loading" :size="24" :animation-duration="1000"/>
             </transition>
         </button>
@@ -26,10 +28,6 @@ export default {
             type: Boolean,
             required: true,
         },
-        text: {
-            type: String,
-            required: true,
-        },
         disabled: {
             type: Boolean,
             default: false,

diff --git a/src/components/shared/Game/GameReview/GameReviewModal/GameReviewModal.vue b/src/components/shared/Game/GameReview/GameReviewModal/GameReviewModal.vue
@@ -71,9 +71,11 @@
                         <div class="row align-items-center w-100">
                             <div class="offset-md-4 col-md-4 offset-1 col-8">
                                 <SubmitButton classes="btn btn-primary btn-lg btn-block"
-                                              :text="`<i class='fa fa-star mr-2'></i>${$t('GameReviewModal.rate')}`"
                                               :loading="loading" :disabled="!rating"
-                                              :disabled-tooltip-text="$t('GameReviewModal.youMustRateFirst')"/>
+                                              :disabled-tooltip-text="$t('GameReviewModal.youMustRateFirst')">
+                                    <i class="fa fa-star mr-2"/>
+                                    <span v-html="$t('GameReviewModal.rate')"/>
+                                </SubmitButton>
                             </div>
                             <div class="col-md-4 col-2 text-right">
                                 <button type="button" class="btn btn-secondary" :disabled="loading" @click="hide">