@dcrackel/hematournamentui 1.0.706 → 1.0.708

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

@@ -1,63 +1,114 @@
 <template>
   <section v-if="loading">
-      <ClubManagementSkeleton />
+    <ClubManagementSkeleton />
   </section>
   <section v-if="!loading" class="flex">
     <div class="rounded-lg md:p-9 bg-neutral w-full">
       <div class="w-full flex flex-row justify-center mb-4">
-        <BaseText :color="'primaryHighlight'" :size="'2xl'" :text="getHeaderText" :weight="'normal'"/>
+        <BaseText :color="'primaryHighlight'" :size="'2xl'" :text="getHeaderText" :weight="'normal'" />
       </div>
       <div class="w-full flex-row justify-center mb-4 flex drop-shadow">
-        <ImageCropper :urlToImage="getImageURL"
-                      :uploadImageName="uploadImageName"
-                      :uploadServer="uploadServer"
-                      :imageServer="imageServer"
-                      :customClass="getClass"
-                      :isProfile="true"
-                      customSkeletonClass="w-32 h-32 border-2 border-dashed rounded-full bg-gray-300 animate-pulse"
-                      :cropperOptions="{
-                      aspectRatio: 4 / 4,
-                      autoCropArea: 1,
-                      viewMode: 1,
-                      movable: true,
-                      zoomable: true
-                      }"
-                      @update:url="handleProfilePicUpdate"/>
+        <ImageCropper
+          :urlToImage="getImageURL"
+          :uploadImageName="uploadImageName"
+          :uploadServer="uploadServer"
+          :imageServer="imageServer"
+          :customClass="getClass"
+          :isProfile="true"
+          customSkeletonClass="w-32 h-32 border-2 border-dashed rounded-full bg-gray-300 animate-pulse"
+          :cropperOptions="{
+            aspectRatio: 4 / 4,
+            autoCropArea: 1,
+            viewMode: 1,
+            movable: true,
+            zoomable: true
+          }"
+          @update:url="handleProfilePicUpdate"
+        />
       </div>
 
-      <ClubBasic :locations="locations" :validation="validation" :club="club" @add:newAddress="handleAddNewAddress" @update:club="updateClub" />
+      <ClubBasic
+        :locations="locations"
+        :validation="validation"
+        :club="club"
+        @add:newAddress="handleAddNewAddress"
+        @update:club="updateClub"
+      />
 
       <div class="flex flex-row justify-end mt-8">
-        <BaseButton v-if="userLevel === 'Admin'" class="mr-8 " color="warn" label="Delete" size="sm" type="secondary" @buttonClick="handleDelete"/>
-        <BaseButton class="w-full" color="neutral" :label="saveButtonLabel" size="sm" type="secondary" @buttonClick="handleSubmit"/>
+        <BaseButton
+          v-if="userLevel === 'Admin'"
+          class="mr-8"
+          color="warn"
+          label="Delete"
+          size="sm"
+          type="secondary"
+          @buttonClick="handleDelete"
+        />
+        <BaseButton
+          class="w-full"
+          color="neutral"
+          :label="saveButtonLabel"
+          size="sm"
+          type="secondary"
+          @buttonClick="handleSubmit"
+        />
       </div>
     </div>
   </section>
 </template>
 
 <script>
-import BaseText from "../../../stories/Atoms/Text/BaseText.vue";
-import ImageCropper from "../../../stories/Organisms/ComplexInputs/ImageCropper/ImageCropper.vue";
-import BaseButton from "../../../stories/Molecules/Buttons/BaseButton/BaseButton.vue";
-import ClubManagementSkeleton from "../../Organisms/Skeletons/ClubManagement/ClubMangementSkeleton.vue";
-import ClubBasic from "../../Templates/ClubManagement/ClubBasic/ClubBasic.vue";
-import { validateField } from "../../Util/Validations/ClubManagementValidations.js";
+import BaseText from '../../../stories/Atoms/Text/BaseText.vue';
+import ImageCropper from '../../../stories/Organisms/ComplexInputs/ImageCropper/ImageCropper.vue';
+import BaseButton from '../../../stories/Molecules/Buttons/BaseButton/BaseButton.vue';
+import ClubManagementSkeleton from '../../Organisms/Skeletons/ClubManagement/ClubMangementSkeleton.vue';
+import ClubBasic from '../../Templates/ClubManagement/ClubBasic/ClubBasic.vue';
+import { validateField } from '../../Util/Validations/ClubManagementValidations.js';
 
-export default {
-  name: 'ClubManagement',
-  emits: ['submit:club', 'add:newAddress', 'delete:club', 'update:image'],
-  components: {
-    ClubBasic,
-    ClubManagementSkeleton,
-    BaseText,
-    ImageCropper,
-    BaseButton
-  },
-  props: {
-    clubProfile: {
-      type: Object,
-      default: () => ({})
-    },
+const clubUpdatePatchByField = {
+  'add:newAddress': value => {
+    if (!value) return {};
+    return {
+      AddressId: 0,
+      Address: {
+        Name: value.locationName,
+        Address1: value.address,
+        Coordinates: value.coordinates
+      }
+    };
+  },
+  Location: value => {
+    if (!value) return { Location: value };
+    return {
+      Location: value,
+      AddressId: value.AddressId || 0,
+      Address: { ...value }
+    };
+  }
+};
+
+const updateClubField = (club, field, value) => {
+  const createPatch = clubUpdatePatchByField[field];
+  if (!createPatch) return { ...club, [field]: value };
+  return { ...club, ...createPatch(value) };
+};
+
+export default {
+  name: 'ClubManagement',
+  emits: ['submit:club', 'add:newAddress', 'delete:club', 'update:image'],
+  components: {
+    ClubBasic,
+    ClubManagementSkeleton,
+    BaseText,
+    ImageCropper,
+    BaseButton
+  },
+  props: {
+    clubProfile: {
+      type: Object,
+      default: () => ({})
+    },
     locations: {
       type: Array,
       default: () => []
@@ -87,133 +138,102 @@ export default {
       default: 'Save'
     }
   },
-  data() {
-    return {
-      club: this.cloneClub(this.clubProfile),
+  data() {
+    return {
+      club: this.cloneClub(this.clubProfile),
       validation: {
-        Name: { invalid: false, message: "" },
-        ShortName: { invalid: false, message: "" },
-        Address: { invalid: false, message: "" }
+        Name: { invalid: false, message: '' },
+        ShortName: { invalid: false, message: '' },
+        Address: { invalid: false, message: '' }
       },
       pushedSave: false
     };
   },
   watch: {
-    clubProfile: {
-      immediate: true,
-      handler(newProfile) {
-        this.club = this.cloneClub(newProfile);
-      },
-    },
+    clubProfile: {
+      immediate: true,
+      handler(newProfile) {
+        this.club = this.cloneClub(newProfile);
+      }
+    }
   },
   computed: {
-    getHeaderText() {
-      return this.club?.Name ? this.club.Name : 'Club Profile';
-    },
-    getImageURL() {
-      return Array.isArray(this.club.Images) && this.club.Images.length > 0
-          ? this.club.Images[0].URL
-          : "";
+    getHeaderText() {
+      return this.club?.Name ? this.club.Name : 'Club Profile';
+    },
+    getImageURL() {
+      return Array.isArray(this.club.Images) && this.club.Images.length > 0 ? this.club.Images[0].URL : '';
     },
     getClass() {
       return 'border-2 border-dashed rounded-full w-32 h-32';
     }
-  },
-  methods: {
-    cloneClub(club) {
-      return {
-        ...(club || {}),
-        Address: club?.Address ? { ...club.Address } : undefined,
-        Images: Array.isArray(club?.Images) ? club.Images.map((image) => ({ ...image })) : []
-      };
-    },
-    handleProfilePicUpdate(url) {
-      const images = Array.isArray(this.club.Images)
-          ? this.club.Images.map((image) => ({ ...image }))
-          : [];
-
-      if (images[0]) {
-        images[0].URL = url;
-      }
-
-      if (!images[0]) {
-        const image = {
-          "URL": url,
-          "AltText": "ClubImage",
-          "Type": "Club",
-          "EntityId": this.club.ClubId,
-          "EntityType": "Club"
-        }
-        images.push(image)
-      }
-
-      this.club = {
-        ...this.club,
-        Images: images
-      };
-      this.$emit('update:image', url);
-    },
-    handleAddNewAddress(value) {
-      this.$emit('add:newAddress', value);
+  },
+  methods: {
+    cloneClub(club) {
+      return {
+        ...(club || {}),
+        Address: club?.Address ? { ...club.Address } : undefined,
+        Images: Array.isArray(club?.Images) ? club.Images.map(image => ({ ...image })) : []
+      };
     },
-    handleSubmit() {
-      this.pushedSave = true;
-      if (this.validateAllFields()) {
-        this.$emit('submit:club', this.cloneClub(this.club));
-      }
-    },
-    handleDelete() {
-      this.$emit('delete:club', this.cloneClub(this.club));
-    },
-    updateClub({ field, value }) {
-      this.club = { ...this.club, [field]: value };
-
-        if (field === 'Color1') {
-          this.club.Color1 = value;
-        }
-
-        if (field === 'Color2') {
-          this.club.Color2 = value;
-        }
+    handleProfilePicUpdate(url) {
+      const images = Array.isArray(this.club.Images) ? this.club.Images.map(image => ({ ...image })) : [];
 
-        if (field === 'add:newAddress' && value) {
-          this.club = {
-            ...this.club,
-            AddressId: 0,
-            Address: {
-              Name: value.locationName,
-              Address1: value.address,
-              Coordinates: value.coordinates
-            }
-          };
-        }
+      if (images[0]) {
+        images[0].URL = url;
+      }
 
-      if (field === 'Location' && value) {
-        this.club = {
-          ...this.club,
-          AddressId: value?.AddressId || 0,
-          Address: { ...value }
-        };
-      }
-
-      if (this.validation[field] && this.pushedSave) {
-        this.validation[field] = validateField(field, value);
-      }
-
-      if (field === 'Location' && this.pushedSave) {
-        this.validation.Address = validateField('Address', this.club.Address);
-      }
-    },
+      if (!images[0]) {
+        const image = {
+          URL: url,
+          AltText: 'ClubImage',
+          Type: 'Club',
+          EntityId: this.club.ClubId,
+          EntityType: 'Club'
+        };
+        images.push(image);
+      }
+
+      this.club = {
+        ...this.club,
+        Images: images
+      };
+      this.$emit('update:image', url);
+    },
+    handleAddNewAddress(value) {
+      this.$emit('add:newAddress', value);
+    },
+    handleSubmit() {
+      this.pushedSave = true;
+      if (this.validateAllFields()) {
+        this.$emit('submit:club', this.cloneClub(this.club));
+      }
+    },
+    handleDelete() {
+      this.$emit('delete:club', this.cloneClub(this.club));
+    },
+    updateClub({ field, value }) {
+      this.club = updateClubField(this.club, field, value);
+      this.validateChangedField(field, value);
+      this.validateAddressChange(field);
+    },
+    validateChangedField(field, value) {
+      if (!this.validation[field] || !this.pushedSave) return;
+      this.validation[field] = validateField(field, value);
+    },
+    validateAddressChange(field) {
+      if (field !== 'Location' || !this.pushedSave) return;
+      this.validation.Address = validateField('Address', this.club.Address);
+    },
     validateAllFields() {
-      const fieldsToValidate = ["Name", "ShortName", "Address"];
+      const fieldsToValidate = ['Name', 'ShortName', 'Address'];
 
-      fieldsToValidate.forEach((field) => {
+      fieldsToValidate.forEach(field => {
         this.validation[field] = validateField(field, this.club[field]);
       });
 
-      return !Object.values(this.validation).some((field) => field.invalid);
+      return !Object.values(this.validation).some(field => field.invalid);
     }
   }
 };
 </script>
-