@dcrackel/hematournamentui 1.0.706 → 1.0.707

package/src/stories/Templates/ClubManagement/ClubBasic/ClubBasic.vue

@@ -1,62 +1,75 @@
 <template>
   <div class="flex flex-col mb-4">
-    <TitledInput :inputValue="club.Name || ''"
-                 :invalid="validation.Name.invalid"
-                 :title="validation.Name.invalid ? `Club Name - ${validation.Name.message}` : 'Club Name'"
-                 placeholder="Enter Club Name"
-                 @update:value="emitUpdate('Name', $event)"/>
+    <TitledInput
+      :inputValue="club.Name || ''"
+      :invalid="validation.Name.invalid"
+      :title="validation.Name.invalid ? `Club Name - ${validation.Name.message}` : 'Club Name'"
+      placeholder="Enter Club Name"
+      @update:value="emitUpdate('Name', $event)"
+    />
   </div>
   <div class="flex flex-col mb-4">
-    <TitledInput :inputValue="club.ShortName || ''"
-                 :invalid="validation.ShortName.invalid"
-                 :title="validation.ShortName.invalid ? `Club Short Name - ${validation.ShortName.message}` : 'Club Short Name'"
-                 placeholder="Enter Short Name"
-                 @update:value="emitUpdate('ShortName', $event)"/>
+    <TitledInput
+      :inputValue="club.ShortName || ''"
+      :invalid="validation.ShortName.invalid"
+      :title="validation.ShortName.invalid ? `Club Short Name - ${validation.ShortName.message}` : 'Club Short Name'"
+      placeholder="Enter Short Name"
+      @update:value="emitUpdate('ShortName', $event)"
+    />
   </div>
   <div class="flex flex-col mb-4">
-    <TitledInput :inputValue="club.TagLine || ''"
-                 placeholder="Enter Tag Line"
-                 title="Tag Line"
-                 @update:value="emitUpdate('TagLine', $event)"/>
+    <TitledInput
+      :inputValue="club.TagLine || ''"
+      placeholder="Enter Tag Line"
+      title="Tag Line"
+      @update:value="emitUpdate('TagLine', $event)"
+    />
   </div>
   <div class="flex flex-col mb-4">
     <BaseText
-        :invalid="validation.Address.invalid"
-        :text="validation.Address.invalid ? `Address - ${validation.Address.message}` : 'Address'"
-        size="sm"
-        color="quaternary"
+      :invalid="validation.Address.invalid"
+      :text="validation.Address.invalid ? `Address - ${validation.Address.message}` : 'Address'"
+      size="sm"
+      color="quaternary"
     />
-    <FindLocation :addBorder="true"
-                  :locations="locations"
-                  :placeholder="getSelectedAddress"
-                  addNewText="Add New"
-                  :invalid="validation.Address.invalid"
-                  @submit:addNewAddress="emitAddNewAddress"
-                  @update:location="emitUpdate('Location', $event)"
+    <FindLocation
+      :addBorder="true"
+      :locations="locations"
+      :placeholder="getSelectedAddress"
+      addNewText="Add New"
+      :invalid="validation.Address.invalid"
+      @submit:addNewAddress="emitAddNewAddress"
+      @update:location="emitUpdate('Location', $event)"
     />
   </div>
   <div class="flex flex-col mb-4">
-    <BaseText :color="'primaryHighlight'"  :size="'sm'" :text="'Description'"
-              :weight="'normal'" class="mb-1" data-testid="text-description"/>
-    <TextBoxEditor :initialContent="club.Description" @update:editorContent="emitUpdate('Description', $event)"/>
+    <BaseText
+      :color="'primaryHighlight'"
+      :size="'sm'"
+      :text="'Description'"
+      :weight="'normal'"
+      class="mb-1"
+      data-testid="text-description"
+    />
+    <TextBoxEditor :initialContent="club.Description" @update:editorContent="emitUpdate('Description', $event)" />
   </div>
-  <div class="flex flex-col mb-4">
-    <ClubColorPicker :club="club" :isPrimary="true" @update:value="emitColorUpdate" />
-    <ClubColorPicker :club="club" :isPrimary="false" @update:value="emitColorUpdate" />
+  <div class="flex flex-col mb-4">
+    <ClubColorPicker :club="club" :isPrimary="true" @update:value="emitColorUpdate" />
+    <ClubColorPicker :club="club" :isPrimary="false" @update:value="emitColorUpdate" />
   </div>
 </template>
 
 <script>
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import TextBoxEditor from "../../../Organisms/ComplexInputs/TextBoxEditor/TextBoxEditor.vue";
-import FindLocation from "../../../Organisms/ComplexInputs/FindLocation/FindLocation.vue";
-import TitledInput from "../../../Molecules/CombinationInputs/TitledInput/TitledInput.vue";
-import ClubColorPicker from "../../../Organisms/ComplexInputs/ClubColorPicker/ClubColorPicker.vue";
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import TextBoxEditor from '../../../Organisms/ComplexInputs/TextBoxEditor/TextBoxEditor.vue';
+import FindLocation from '../../../Organisms/ComplexInputs/FindLocation/FindLocation.vue';
+import TitledInput from '../../../Molecules/CombinationInputs/TitledInput/TitledInput.vue';
+import ClubColorPicker from '../../../Organisms/ComplexInputs/ClubColorPicker/ClubColorPicker.vue';
 
 export default {
   name: 'ClubBasic',
-  components: {ClubColorPicker, TitledInput,BaseText,TextBoxEditor,FindLocation },
-  emits: ["add:newAddress", "update:club"],
+  components: { ClubColorPicker, TitledInput, BaseText, TextBoxEditor, FindLocation },
+  emits: ['add:newAddress', 'update:club'],
   props: {
     club: {
       type: Object,
@@ -71,21 +84,21 @@ export default {
       required: true
     }
   },
-  computed: {
-    getSelectedAddress() {
-      return this.club?.Address?.Name || '';
-    }
-  },
-  methods: {
-    emitAddNewAddress(address) {
-      this.$emit('add:newAddress', address);
-    },
-    emitColorUpdate(payload) {
-      this.$emit('update:club', { ...payload });
-    },
-    emitUpdate(field, value) {
-      this.$emit('update:club', { field, value });
-    },
+  computed: {
+    getSelectedAddress() {
+      return this.club?.Address?.Name || '';
+    }
+  },
+  methods: {
+    emitAddNewAddress(address) {
+      this.$emit('add:newAddress', address);
+    },
+    emitColorUpdate(payload) {
+      this.$emit('update:club', { ...payload });
+    },
+    emitUpdate(field, value) {
+      this.$emit('update:club', { field, value });
+    }
   }
-}
-</script>
+};
+</script>

package/src/stories/Templates/ClubManagement/ClubManagement.stories.js

@@ -1,91 +1,91 @@
 import ClubManagement from './ClubManagement.vue';
-import addressesMock from "../../../mocks/locationMock.js";
-import clubMock from "../../../mocks/getClub.js";
+import addressesMock from '../../../mocks/locationMock.js';
+import clubMock from '../../../mocks/getClub.js';
 
-export default {
-    title: 'Templates/ClubManagement',
-    component: ClubManagement,
-    tags: ['autodocs'],
-    args: {
-        uploadImageName: 'club-profile-test',
-        uploadServer: 'http://localhost:3000/api/upload/',
-        imageServer: 'http://localhost:3000/uploads/',
-        locations: addressesMock,
-        clubProfile: clubMock,
-        userLevel: 'user',
-        loading: false,
-        saveButtonLabel: 'Save'
-    },
-    argTypes: {
-        uploadImageName: { control: { type: 'text' } },
-        uploadServer: { control: { type: 'text' } },
-        imageServer: { control: { type: 'text' } },
-        locations:  { control: { type: 'array'} },
-        clubProfile: { control: { type: 'object' } },
-        userLevel: { control: { type: 'text' } },
-        loading: { control: { type: 'boolean' } },
-        saveButtonLabel: { control: { type: 'text' } },
-        'add:newAddress': { action: 'add:newAddress' },
-        'delete:club': { action: 'delete:club' },
-        'submit:club': { action: 'submit:club' },
-        'update:image': { action: 'update:image' },
-    }
-};
+export default {
+  title: 'Templates/ClubManagement',
+  component: ClubManagement,
+  tags: ['autodocs'],
+  args: {
+    uploadImageName: 'club-profile-test',
+    uploadServer: 'http://localhost:3000/api/upload/',
+    imageServer: 'http://localhost:3000/uploads/',
+    locations: addressesMock,
+    clubProfile: clubMock,
+    userLevel: 'user',
+    loading: false,
+    saveButtonLabel: 'Save'
+  },
+  argTypes: {
+    uploadImageName: { control: { type: 'text' } },
+    uploadServer: { control: { type: 'text' } },
+    imageServer: { control: { type: 'text' } },
+    locations: { control: { type: 'array' } },
+    clubProfile: { control: { type: 'object' } },
+    userLevel: { control: { type: 'text' } },
+    loading: { control: { type: 'boolean' } },
+    saveButtonLabel: { control: { type: 'text' } },
+    'add:newAddress': { action: 'add:newAddress' },
+    'delete:club': { action: 'delete:club' },
+    'submit:club': { action: 'submit:club' },
+    'update:image': { action: 'update:image' }
+  }
+};
 
 export const Default = {
-    args: {
-        uploadImageName: 'ctest1',
-        uploadServer: 'http://localhost:3000/api/upload/',
-        imageServer: 'http://localhost:3000/uploads/',
-        locations: addressesMock,
-        clubProfile: clubMock,
-        userLevel: 'user',
-        loading: false,
-        saveButtonLabel: 'Save'
-    }
-};
-
-export const AsAdmin = {
-    args: {
-        uploadImageName: 'ctest2',
-        uploadServer: 'http://localhost:3000/api/upload/',
-        imageServer: 'http://localhost:3000/uploads/',
-        clubProfile: clubMock,
-        locations: addressesMock,
-        userLevel: 'Admin',
-        loading: false,
-        saveButtonLabel: 'Save'
-    }
-};
-
-export const AsAdminAndLoading = {
-    args: {
-        uploadImageName: 'ctest2',
-        uploadServer: 'http://localhost:3000/api/upload/',
-        imageServer: 'http://localhost:3000/uploads/',
-        locations: addressesMock,
-        clubProfile: clubMock,
-        userLevel: 'Admin',
-        loading: true,
-        saveButtonLabel: 'Save'
-    }
-};
-
-export const EmptyClub = {
-    args: {
-        uploadImageName: 'ctest2',
-        uploadServer: 'http://localhost:3000/api/upload/',
-        imageServer: 'http://localhost:3000/uploads/',
-        locations: addressesMock,
-        clubProfile: {
-            Name: '',
-            ClubId: 0,
-            Color1: 'red',
-            Color2: 'blue',
-            Images: [],
-        },
-        userLevel: 'Admin',
-        loading: false,
-        saveButtonLabel: 'Create'
-    }
-};
+  args: {
+    uploadImageName: 'ctest1',
+    uploadServer: 'http://localhost:3000/api/upload/',
+    imageServer: 'http://localhost:3000/uploads/',
+    locations: addressesMock,
+    clubProfile: clubMock,
+    userLevel: 'user',
+    loading: false,
+    saveButtonLabel: 'Save'
+  }
+};
+
+export const AsAdmin = {
+  args: {
+    uploadImageName: 'ctest2',
+    uploadServer: 'http://localhost:3000/api/upload/',
+    imageServer: 'http://localhost:3000/uploads/',
+    clubProfile: clubMock,
+    locations: addressesMock,
+    userLevel: 'Admin',
+    loading: false,
+    saveButtonLabel: 'Save'
+  }
+};
+
+export const AsAdminAndLoading = {
+  args: {
+    uploadImageName: 'ctest2',
+    uploadServer: 'http://localhost:3000/api/upload/',
+    imageServer: 'http://localhost:3000/uploads/',
+    locations: addressesMock,
+    clubProfile: clubMock,
+    userLevel: 'Admin',
+    loading: true,
+    saveButtonLabel: 'Save'
+  }
+};
+
+export const EmptyClub = {
+  args: {
+    uploadImageName: 'ctest2',
+    uploadServer: 'http://localhost:3000/api/upload/',
+    imageServer: 'http://localhost:3000/uploads/',
+    locations: addressesMock,
+    clubProfile: {
+      Name: '',
+      ClubId: 0,
+      Color1: 'red',
+      Color2: 'blue',
+      Images: []
+    },
+    userLevel: 'Admin',
+    loading: false,
+    saveButtonLabel: 'Create'
+  }
+};