@dcrackel/hematournamentui 1.0.22 → 1.0.23

package/src/stories/Organisms/Grid/GridContainer.vue

@@ -1,108 +1,108 @@
-<template>
-  <div class="border border-dropdownSelect rounded-lg p-9 bg-neutral">
-    <div class="my-4">
-      <FilterUpcomingPast :selected="selectedTimeFrame" @timeFrame="handleTimeFrameChange"/>
-    </div>
-    <div class="my-4">
-      <FilterAndSortBar :items="dropdownItems" :label="label" :selectedItem="selectedItem" @filterbar="handleFilter" @sort="handleSort"/>
-    </div>
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 3xl:grid-cols-4 gap-6 w-full">
-      <div v-for="item in filteredItems" :key="item.id">
-        <component :is="component" :detail="item" />
-      </div>
-    </div>
-  </div>
-
-</template>
-
-
-<script>
-import BaseText from "../../Atoms/Text/BaseText.vue";
-import TournamentCard from "../../Organisms/TournamentCard/TournamentCard.vue";
-import FilterAndSortBar from "../../Molecules/Filters/FilterAndSortBar/FilterAndSortBar.vue";
-import FilterUpcomingPast from "../../Molecules/Filters/FilterUpcomingPast/FilterUpcomingPast.vue";
-
-export default {
-  name: 'GridContainer',
-  components: {
-    FilterAndSortBar,
-    BaseText,
-    TournamentCard,
-    FilterUpcomingPast
-  },
-  props: {
-    items: {
-      type: Array,
-      default: () => []
-    },
-    component: {
-      type: String,
-      required: true
-    },
-    label: {
-      type: String,
-    },
-    dropdownItems: {
-      type: Array,
-      default: () => []
-    },
-    selectedItem: null
-  },
-  data() {
-    return {
-      filterOn: '',
-      sortCriteria: 'Date',
-      selectedTimeFrame: 'All'
-    };
-  },
-  computed: {
-    filteredItems() {
-      let result = this.items;
-
-      if (this.filterOn.trim()) {
-        const lowerCaseSearchText = this.filterOn.toLowerCase();
-        result = result.filter(item =>
-            Object.values(item).some(value =>
-                typeof value === 'string' && value.toLowerCase().includes(lowerCaseSearchText)
-            )
-        );
-      }
-
-      const currentDate = new Date();
-      currentDate.setHours(0, 0, 0, 0);
-      switch (this.selectedTimeFrame) {
-        case 'Upcoming':
-          result = result.filter(item => new Date(item.date) >= currentDate);
-          break;
-        case 'Past':
-          result = result.filter(item => new Date(item.date) < currentDate);
-          break;
-      }
-
-      switch(this.sortCriteria) {
-        case 'Date':
-          result = [...result].sort((a, b) => new Date(a.date) - new Date(b.date));
-          break;
-        case 'Name':
-          result = [...result].sort((a, b) => a.name.localeCompare(b.name));
-          break;
-        case 'Location':
-          result = [...result].sort((a, b) => a.location.localeCompare(b.location));
-          break;
-      }
-      return result;
-    }
-  },
-  methods: {
-    handleFilter(filterText) {
-      this.filterOn = filterText;
-    },
-    handleSort(criteria) {
-      this.sortCriteria = criteria.text;
-    },
-    handleTimeFrameChange(timeFrame) {
-      this.selectedTimeFrame = timeFrame;
-    }
-  }
-};
-</script>
+<template>
+  <div class="border border-dropdownSelect rounded-lg p-9 bg-neutral">
+    <div class="my-4">
+      <FilterUpcomingPast :selected="selectedTimeFrame" @timeFrame="handleTimeFrameChange"/>
+    </div>
+    <div class="my-4">
+      <FilterAndSortBar :items="dropdownItems" :label="label" :selectedItem="selectedItem" @filterbar="handleFilter" @sort="handleSort"/>
+    </div>
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 3xl:grid-cols-4 gap-6 w-full">
+      <div v-for="item in filteredItems" :key="item.id">
+        <component :is="component" :detail="item" />
+      </div>
+    </div>
+  </div>
+
+</template>
+
+
+<script>
+import BaseText from "../../Atoms/Text/BaseText.vue";
+import TournamentCard from "../../Organisms/TournamentCard/TournamentCard.vue";
+import FilterAndSortBar from "../../Molecules/Filters/FilterAndSortBar/FilterAndSortBar.vue";
+import FilterUpcomingPast from "../../Molecules/Filters/FilterUpcomingPast/FilterUpcomingPast.vue";
+
+export default {
+  name: 'GridContainer',
+  components: {
+    FilterAndSortBar,
+    BaseText,
+    TournamentCard,
+    FilterUpcomingPast
+  },
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    component: {
+      type: String,
+      required: true
+    },
+    label: {
+      type: String,
+    },
+    dropdownItems: {
+      type: Array,
+      default: () => []
+    },
+    selectedItem: null
+  },
+  data() {
+    return {
+      filterOn: '',
+      sortCriteria: 'Date',
+      selectedTimeFrame: 'All'
+    };
+  },
+  computed: {
+    filteredItems() {
+      let result = this.items;
+
+      if (this.filterOn.trim()) {
+        const lowerCaseSearchText = this.filterOn.toLowerCase();
+        result = result.filter(item =>
+            Object.values(item).some(value =>
+                typeof value === 'string' && value.toLowerCase().includes(lowerCaseSearchText)
+            )
+        );
+      }
+
+      const currentDate = new Date();
+      currentDate.setHours(0, 0, 0, 0);
+      switch (this.selectedTimeFrame) {
+        case 'Upcoming':
+          result = result.filter(item => new Date(item.date) >= currentDate);
+          break;
+        case 'Past':
+          result = result.filter(item => new Date(item.date) < currentDate);
+          break;
+      }
+
+      switch(this.sortCriteria) {
+        case 'Date':
+          result = [...result].sort((a, b) => new Date(a.date) - new Date(b.date));
+          break;
+        case 'Name':
+          result = [...result].sort((a, b) => a.name.localeCompare(b.name));
+          break;
+        case 'Location':
+          result = [...result].sort((a, b) => a.location.localeCompare(b.location));
+          break;
+      }
+      return result;
+    }
+  },
+  methods: {
+    handleFilter(filterText) {
+      this.filterOn = filterText;
+    },
+    handleSort(criteria) {
+      this.sortCriteria = criteria.text;
+    },
+    handleTimeFrameChange(timeFrame) {
+      this.selectedTimeFrame = timeFrame;
+    }
+  }
+};
+</script>

package/src/stories/Organisms/ImageCropper/ImageCropper.stories.js

@@ -1,28 +1,28 @@
-import AvatarUploader from './ImageCropper.vue';
-
-export default {
-    title: 'Organisms/ImageCropper',
-    tags: ['autodocs'],
-    component: AvatarUploader,
-    argTypes: {}
-};
-
-const Template = args => ({
-    components: { AddTournamentPageOne },
-    setup() {
-        return {
-            args: {
-            }
-        };
-    },
-    methods: {
-    }
-});
-
-export const Default = {
-    args: {
-    }
-};
-
-
-
+import AvatarUploader from './ImageCropper.vue';
+
+export default {
+    title: 'Organisms/ImageCropper',
+    tags: ['autodocs'],
+    component: AvatarUploader,
+    argTypes: {}
+};
+
+const Template = args => ({
+    components: { AddTournamentPageOne },
+    setup() {
+        return {
+            args: {
+            }
+        };
+    },
+    methods: {
+    }
+});
+
+export const Default = {
+    args: {
+    }
+};
+
+
+

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

@@ -1,86 +1,86 @@
-<template>
-  <section class="">
-    <img
-        class="h-40 w-96 border-2 border-dashed rounded-lg"
-        :src="userPicUrl"
-        @error=""
-        v-bind:alt="personID"
-        @click="setShowCropper()"
-    />
-    <avatar-cropper
-        @uploading="handleUploading"
-        @uploaded="handleUploaded"
-        @completed="handleCompleted"
-        @error="handlerError"
-        v-model="showCropper"
-        :upload-url="`./uploads/${personID}`"
-        :cropper-options="{
-          aspectRatio: 8/3,
-          autoCropArea: 1,
-          viewMode: 1,
-          movable: true,
-          zoomable: true }"
-    />
-
-  </section>
-</template>
-
-<script>
-import AvatarCropper from 'vue-avatar-cropper'
-
-export default {
-  name: 'GenericImageCropper',
-  props: {
-    personID: {
-      type: Number,
-      default: 1
-    }
-  },
-  components: {
-    AvatarCropper
-  },
-  data() {
-    return {
-      showCropper: false,
-      userPicUrl: ''
-    }
-  },
-  mounted() {
-    this.getImgUrl(this.personID)
-  },
-  watch: {
-    personID: {
-      immediate: true,
-      handler(newVal, oldVal) {
-        this.getImgUrl(newVal)
-      }
-    }
-  },
-  methods: {
-    getImgUrl(id) {
-      //this.userPicUrl = `${ferrotasNodeServer}/uploads/${id}.png?${Date.now()}`
-      this.userPicUrl = '../../../../src/assets/select-tournament.png'
-    },
-    setShowCropper() {
-      this.showCropper = true
-    },
-    handleUploading() {
-      this.userPicUrl = `./uploads/default.jpeg`
-      this.message = 'uploading...'
-    },
-    handleUploaded(response) {
-      if (response.response.status === 200) {
-        this.getImgUrl(this.personID)
-      }
-    },
-    handleCompleted() {
-      this.message = 'upload completed.'
-    },
-    handlerError(message, type, xhr) {
-      console.error(`${message} ${type} ${xhr}`)
-      this.message = 'Oops! Something went wrong...'
-    }
-  }
-}
-</script>
-
+<template>
+  <section class="">
+    <img
+        class="h-40 w-96 border-2 border-dashed rounded-lg"
+        :src="userPicUrl"
+        @error=""
+        v-bind:alt="personID"
+        @click="setShowCropper()"
+    />
+    <avatar-cropper
+        @uploading="handleUploading"
+        @uploaded="handleUploaded"
+        @completed="handleCompleted"
+        @error="handlerError"
+        v-model="showCropper"
+        :upload-url="`./uploads/${personID}`"
+        :cropper-options="{
+          aspectRatio: 8/3,
+          autoCropArea: 1,
+          viewMode: 1,
+          movable: true,
+          zoomable: true }"
+    />
+
+  </section>
+</template>
+
+<script>
+import AvatarCropper from 'vue-avatar-cropper'
+
+export default {
+  name: 'GenericImageCropper',
+  props: {
+    personID: {
+      type: Number,
+      default: 1
+    }
+  },
+  components: {
+    AvatarCropper
+  },
+  data() {
+    return {
+      showCropper: false,
+      userPicUrl: ''
+    }
+  },
+  mounted() {
+    this.getImgUrl(this.personID)
+  },
+  watch: {
+    personID: {
+      immediate: true,
+      handler(newVal, oldVal) {
+        this.getImgUrl(newVal)
+      }
+    }
+  },
+  methods: {
+    getImgUrl(id) {
+      //this.userPicUrl = `${ferrotasNodeServer}/uploads/${id}.png?${Date.now()}`
+      this.userPicUrl = '../../../../src/assets/select-tournament.png'
+    },
+    setShowCropper() {
+      this.showCropper = true
+    },
+    handleUploading() {
+      this.userPicUrl = `./uploads/default.jpeg`
+      this.message = 'uploading...'
+    },
+    handleUploaded(response) {
+      if (response.response.status === 200) {
+        this.getImgUrl(this.personID)
+      }
+    },
+    handleCompleted() {
+      this.message = 'upload completed.'
+    },
+    handlerError(message, type, xhr) {
+      console.error(`${message} ${type} ${xhr}`)
+      this.message = 'Oops! Something went wrong...'
+    }
+  }
+}
+</script>
+

package/src/stories/Organisms/TextBoxEditor/TextBoxEditor.stories.js

@@ -1,28 +1,28 @@
-import TextBoxEditor from './TextBoxEditor.vue';
-
-export default {
-    title: 'Organisms/TextBoxEditor',
-    tags: ['autodocs'],
-    component: TextBoxEditor,
-    argTypes: {}
-};
-
-const Template = args => ({
-    components: { TextBoxEditor },
-    setup() {
-        return {
-            args: {
-            }
-        };
-    },
-    methods: {
-    }
-});
-
-export const Default = {
-    args: {
-    }
-};
-
-
-
+import TextBoxEditor from './TextBoxEditor.vue';
+
+export default {
+    title: 'Organisms/TextBoxEditor',
+    tags: ['autodocs'],
+    component: TextBoxEditor,
+    argTypes: {}
+};
+
+const Template = args => ({
+    components: { TextBoxEditor },
+    setup() {
+        return {
+            args: {
+            }
+        };
+    },
+    methods: {
+    }
+});
+
+export const Default = {
+    args: {
+    }
+};
+
+
+