@dcrackel/hematournamentui 1.0.238 → 1.0.239

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dcrackel/hematournamentui",
   "private": false,
-  "version": "1.0.238",
+  "version": "1.0.239",
   "type": "module",
   "main": "dist/HemaTournamentUI-lib.umd.js",
   "module": "dist/HemaTournamentUI-lib.es.js",

package/src/stories/Organisms/ComplexInputs/ImageCropper/ImageCropper.vue

@@ -4,13 +4,13 @@
         :src="localUrl"
         :class="getClasses"
         :style="customStyle"
-        :alt="personID"
+        :alt="localUrl"
         @error="onImageError"
         @click="setShowCropper()"
     />
     <avatar-cropper
         v-model="showCropper"
-        :upload-url="`http://localhost/api/upload/${this.imageName}`"
+        :upload-url="`${uploadServer}${uploadImageName}`"
         :cropper-options="cropperOptions"
         @uploading="handleUploading"
         @uploaded="handleUploaded"
@@ -27,11 +27,7 @@ import SelectAnImage from '../../../../assets/select-tournament.png';
 export default {
   name: 'GenericImageCropper',
   props: {
-    personID: {
-      type: Number,
-      default: 1
-    },
-    url: {
+    urlToImage: {
       type: String,
       default: SelectAnImage
     },
@@ -43,9 +39,17 @@ export default {
       type: Object,
       default: () => ({})
     },
-    imageName: {
+    uploadImageName: {
       type: String,
-      default: ''
+      default: 'default-image'
+    },
+    uploadServer: {
+      type: String,
+      default: 'http://localhost/api/upload/'
+    },
+    imageServer: {
+      type: String,
+      default: 'http://localhost/uploads/'
     }
   },
   components: {
@@ -53,9 +57,8 @@ export default {
   },
   data() {
     return {
-      localUrl: this.url,
+      localUrl: this.urlToImage ? this.urlToImage : SelectAnImage,
       showCropper: false,
-      defaultImgUrl: SelectAnImage,
       cropperOptions: {
         aspectRatio: 8 / 4,
         autoCropArea: 1,
@@ -79,8 +82,8 @@ export default {
     },
     handleUploaded(response) {
       if (response.response.status === 200) {
-        this.localUrl = `http://localhost/uploads/${this.imageName}.png`;
-        this.$emit('update:url', `http://localhost/uploads/${this.imageName}.png`);
+        this.localUrl = `${this.imageServer}${this.uploadImageName}.png`;
+        this.$emit('update:url', `${this.imageServer}${this.uploadImageName}.png`);
       }
     },
     handleCompleted() {

package/src/stories/Templates/TournamentManagement/AddTournament/PageOne/AddTournamentPageOne.stories.js

@@ -8,13 +8,30 @@ export default {
     tags: ['autodocs'],
     args: {
         locations: mockLocation,
-        persons: mockPersons
+        persons: mockPersons,
+        urlToImage: null,
+        uploadImageName: 'Storybook-test',
+        uploadServer: 'http://localhost/uploads/',
+        imageServer: 'http://localhost/uploads/',
     },
     argTypes: {
         locations: {
-            control: {
-                type: 'object'
-            }
+            control: { type: 'object' }
+        },
+        persons: {
+            control: { type: 'object' }
+        },
+        urlToImage: {
+            control: { type: 'text' }
+        },
+        uploadImageName: {
+            control: { type: 'text' }
+        },
+        uploadServer: {
+            control: { type: 'text' }
+        },
+        imageServer: {
+            control: { type: 'text' }
         }
     }
 };
@@ -22,6 +39,10 @@ export default {
 export const Default = {
     args: {
         locations: mockLocation,
-        addNewText: "Add New Location"
+        urlToImage: null,
+        addNewText: "Add New Location",
+        uploadImageName: 'Storybook-test',
+        uploadServer: 'http://localhost/uploads/',
+        imageServer: 'http://localhost/uploads/'
     }
 };

package/src/stories/Templates/TournamentManagement/AddTournament/PageOne/AddTournamentPageOne.vue

@@ -8,7 +8,11 @@
                 data-testid="text-add-tournament"/>
     </div>
     <div class="w-full flex flex-row justify-center my-4">
-      <ImageCropper :personID="1"/>
+      <ImageCropper :urlToImage="urlToImage"
+                    :uploadImageName="uploadImageName"
+                    :uploadServe="uploadServer"
+                    :imageServer="imageServer"
+                    @update:url="handleNewImageUrl"/>
     </div>
     <p class="border-b border-dropdownSelect mt-10 mb-10"></p>
 
@@ -88,7 +92,23 @@ export default {
   },
   props: {
     locations: Array,
-    persons: Array
+    persons: Array,
+    urlToImage: {
+      type: String,
+      default: null
+    },
+    uploadImageName: {
+      type: String,
+      default: 'default-image'
+    },
+    uploadServer: {
+      type: String,
+      default: 'http://localhost/uploads/'
+    },
+    imageServer: {
+      type: String,
+      default: 'http://localhost/uploads/'
+    }
   },
   data() {
     return {
@@ -164,6 +184,10 @@ export default {
     },
     handleEditorUpdate(newContent) {
       this.tournament.description = newContent;
+    },
+    handleNewImageUrl(url) {
+      this.tournament.imageLink = url;
+      this.$emit('update:image', url);
     }
   },
   computed: {

package/src/stories/Templates/TournamentManagement/AddTournament/PageTwo/AddTournamentPageTwo.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="border border-dropdownSelect rounded-lg p-9 bg-neutral">
     <div class="w-full flex flex-row justify-center">
-      <BaseText :color="'quaternary'" :size="'sm'" :text="'Step 2 out of 4'" :weight="'normal'" data-testid="text-step"/>
+      <BaseText :color="'quaternary'" :size="'sm'" :text="'Step 2 out of 2'" :weight="'normal'" data-testid="text-step"/>
     </div>
 
     <div class="w-full flex flex-row justify-center">
@@ -46,7 +46,7 @@
           <BaseButton class="w-full mt-3" color="neutral" label="Add New Link" size="sm" type="primary"
                       @click="addExternalLink()"/>
         </section>
-        <div>
+        <div class="mt-40">
           <BaseButton color="neutral" label="Continue" size="sm" type="secondary" @click="handleSubmit()"/>
         </div>
 
@@ -73,7 +73,7 @@ export default {
   props: {tournament: Object},
   data() {
     return {
-      ferrotasToHost: false,
+      m2ToHost: false,
       linkInputVisible: false,
       localTournament: JSON.parse(JSON.stringify(this.tournament))
     }
@@ -95,7 +95,7 @@ export default {
       this.localTournament.externalLinks[index].valid = this.isValidUrl(newUrl);
     },
     handleHosting() {
-      this.ferrotasToHost = !this.ferrotasToHost;
+      this.m2ToHost = !this.m2ToHost;
     },
     toggleLinkInput() {
       this.linkInputVisible = !this.linkInputVisible;