@dcrackel/hematournamentui 1.0.74 → 1.0.75

package/package.json

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

package/src/stories/Molecules/Buttons/BaseButton/BaseButton.stories.js

@@ -94,11 +94,21 @@ export const SquareButton = {
 
 export const IconButton = {
     args: {
+        label: '',
         type: 'iconOnly',
         iconName: 'fa-check',
     }
 };
 
+export const IconButtonWithIconOnRight = {
+    args: {
+        label: 'Save',
+        type: 'primary',
+        iconName: 'fa-check',
+        iconLeft: false
+    }
+};
+
 export const TabBarButton = {
     args: {
         type: 'tabBar',

package/src/stories/Molecules/Buttons/BaseButton/BaseButton.vue

@@ -1,7 +1,8 @@
 <template>
   <button :class="classes" data-testid="base-button" type="button" @click="handleClick">
-    <BaseIcon v-if="iconName" :color="textColor" :icon-name="iconName" :size="size" :style="iconStyle" data-testid="base-icon"/>
+    <BaseIcon v-if="iconName && iconLeft" :color="textColor" :icon-name="iconName" :size="size" :style="iconStyle" data-testid="base-icon"/>
     <BaseText :color="textColor" :size="size" :text="label" data-testid="base-text" weight="normal"/>
+    <BaseIcon v-if="iconName && !iconLeft" :color="textColor" :icon-name="iconName" :size="size" :style="iconStyle" data-testid="base-icon"/>
   </button>
 </template>
 
@@ -27,6 +28,10 @@ export default {
       default: 'fa-solid',
       validator: value => ['fa-solid', 'fa-regular', 'fa-light', 'fa-thing'].includes(value)
     },
+    iconLeft: {
+      type: Boolean,
+      default: true
+    },
     size: {
       type: String,
       default: 'sm',
@@ -54,7 +59,7 @@ export default {
       tertiary: 'px-2.5 py-0.5 items-center gap-2.5 rounded-md text-center justify-center hover:bg-primary text-primary ' +
           (props.selected ? 'bg-primary' : 'bg-tertiary'),
 
-      bright: 'px-2.5 py-0.5 items-center gap-2.5 rounded-md text-center justify-center hover:bg-primary text-neutral ' +
+      bright: 'px-3 py-1 items-center gap-2.5 rounded-md text-center justify-center hover:bg-primary text-neutral ' +
           (props.selected ? 'bg-primary' : 'bg-bright'),
 
       admin: 'px-2.5 py-2 items-center rounded-md gap-2.5 text-center my-1 text-neutral hover:bg-primaryHighlight ' +
@@ -91,7 +96,7 @@ export default {
           primary: 'primary',
           secondary: 'neutral',
           tertiary: 'tertiary',
-          bright: 'bright',
+          bright: 'neutral',
           admin: 'neutral',
           adminSecondary: 'neutral',
           iconOnly: 'neutral',

package/src/stories/Organisms/Cards/PoolFencerCard/PoolFencerCard.stories.js

@@ -0,0 +1,31 @@
+import PoolFencerCard from './PoolFencerCard.vue';
+
+export default {
+    title: 'Organisms/Cards/PoolFencerCard',
+    component: PoolFencerCard,
+    tags: ['autodocs'],
+    args: {
+        position: 1,
+        portrait: 'https://randomuser.me/api/portraits/men/31.jpg',
+        name: 'John Doe',
+        club: 'Test Club',
+    },
+    argTypes: {
+        position: { control: 'number' },
+        portrait: { control: 'text' },
+        name: { control: 'text' },
+        club: { control: 'text' },
+    },
+};
+
+
+export const Default = {
+    args: {
+        position: 1,
+        portrait: 'https://randomuser.me/api/portraits/men/24.jpg',
+        name: 'John Doe',
+        club: 'Test Club',
+    }
+}
+
+

package/src/stories/Organisms/Cards/PoolFencerCard/PoolFencerCard.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="flex items-center p-2 bg-poolSetup shadow rounded-lg">
+    <div class="text-center w-10">
+      <BaseText :text="position" />
+    </div>
+    <div class="w-8 h-8 rounded-md overflow-hidden">
+      <div v-if="!portrait" class="w-14 h-14 bg-dropdownSelect flex items-center justify-center">
+        <BaseText text="" size="sm" color="neutral" weight="bold"/>
+      </div>
+      <img :src="portrait" alt="Fencer Portrait" class="w-full h-full object-cover" />
+    </div>
+    <div class="flex-1 ml-4">
+      <BaseText :text="name" size="md" />
+      <BaseText :text="club" size="xs" />
+    </div>
+    <BaseIcon icon-name="fa-grip-dots-vertical" size="2xl" />
+  </div>
+</template>
+
+<script>
+import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+
+export default {
+  name: 'PoolFencerCard',
+  components: {BaseText, BaseIcon},
+  props: {
+    position: {
+      type: Number,
+      required: true
+    },
+    portrait: {
+      type: String,
+      required: true
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    club: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.cursor-grab {
+  cursor: grab;
+}
+</style>

package/src/stories/Organisms/ComplexInputs/DropDown/DropDownMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-row w-full justify-end relative">
+  <div class="flex flex-row w-full relative" :class="[alignEnd ? 'justify-end' : '']">
     <div class="z-10 rounded-lg px-2 py-2 flex flex-row justify-between border border-dropdownSelect" :class="width" @click="handleDropDown()">
       <BaseText v-if="label.length > 1" :text="label" color="quaternary" size="sm" weight="normal" />
       <BaseText :text="selectedItem.text" color="secondary" size="sm" weight="normal" />
@@ -40,6 +40,11 @@ export default {
       type: String,
       default: 'w-44',
       required: false
+    },
+    alignEnd: {
+      type: Boolean,
+      default: true,
+      required: false
     }
   },
   data: () => ({

package/src/stories/Organisms/Containers/Pool/Pool.stories.js

@@ -0,0 +1,66 @@
+import Pool from './Pool.vue';
+import personsMock from '../../../../mocks/personsMock.js'; // Make sure this path is correct for your project structure
+
+export default {
+    title: 'Organisms/Containers/Pool',
+    component: Pool,
+    tags: ['autodocs'],
+    args: {
+        poolName: 'Pool 1',
+        ringName: 'Blue Ring',
+        directorName: 'Joe Smith',
+        pool: personsMock // Assuming personsMock contains an array of fencers
+    },
+    argTypes: {
+        poolName: {
+            control: { type: 'text' },
+            description: 'Name of the pool',
+            table: {
+                type: { summary: 'String' },
+                defaultValue: { summary: '' }
+            }
+        },
+        ringName: {
+            control: { type: 'text' },
+            description: 'Name of the ring',
+            table: {
+                type: { summary: 'String' },
+                defaultValue: { summary: '' }
+            }
+        },
+        directorName: {
+            control: { type: 'text' },
+            description: 'Name of the director',
+            table: {
+                type: { summary: 'String' },
+                defaultValue: { summary: '' }
+            }
+        },
+        pool: {
+            control: { type: 'array' },
+            description: 'List of persons in the pool',
+            table: {
+                type: { summary: 'Array' },
+                defaultValue: { summary: '[]' }
+            }
+        }
+    }
+}
+
+export const Default = {
+    args: {
+        poolName: 'Pool 1',
+        ringName: 'Blue Ring',
+        directorName: 'Joe Smith',
+        pool: personsMock
+    }
+};
+
+export const EmptyPool = {
+    args: {
+        poolName: 'Pool 1',
+        ringName: 'Blue Ring',
+        directorName: 'Joe Smith',
+        pool: []
+    }
+};

package/src/stories/Organisms/Containers/Pool/Pool.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="p-4 bg-neutral rounded-lg shadow-md border border-dropdownSelect">
+
+    <div class="flex flex-row justify-between">
+      <h2 class="text-xl font-bold mb-2 flex">
+        <BaseText :text="`${poolName} - ${ringName}`" size="lg" color="primary" weight="bold" class="p-2"/>
+      </h2>
+      <div class="bg-eventBoxBlue w-40 h-10 rounded-lg flex flex-row border border-dropdownSelect">
+        <BaseText text="STRENGTH" size="xs" color="quinary" weight="bold" class="pt-3 pl-3"/>
+        <BaseText :text="strInd" size="2xl" color="primaryHighlight" weight="bold" class="pt-1 pl-2"/>
+        <BaseIcon icon-name="fa-circle-info" size="2xl" color="quinary" class="pt-1 pl-3"/>
+      </div>
+    </div>
+
+    <div class="text-md mb-4 ml-2 w-full ">
+       <BaseText text="Director" size="md" color="primary" weight=""/>
+       <DropDownMenu :label="'label'" :items="[]" :selectedItem="{}" width="w-full" class="mt-1 pr-1" :alignEnd="false" @update:selectedItem="handleSelectedItem"/>
+    </div>
+    <div class="grid grid-cols-1 gap-4">
+      <PoolFencerCard v-for="(person, index) in pool" :key="person.id"
+                      :position="index+1"
+                      :name="person.Person.FirstName + ' ' + person.Person.LastName"
+                      :club="person.Person.Club.Name"
+                      :portrait="portraitURL(person)"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import PoolFencerCard from '../../Cards/PoolFencerCard/PoolFencerCard.vue';
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
+import DropDownMenu from "../../ComplexInputs/DropDown/DropDownMenu.vue";
+
+export default {
+  name: 'Pool',
+  components: {
+    DropDownMenu,
+    BaseIcon,
+    BaseText,
+    PoolFencerCard
+  },
+  props: {
+    poolName: {
+      type: String,
+      required: true
+    },
+    ringName: {
+      type: String,
+      required: true
+    },
+    directorName: {
+      type: String,
+      required: true
+    },
+    pool: {
+      type: Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+      strInd: '-2'
+    };
+  },
+  methods: {
+    portraitURL(person) {
+      const images = person.Person.Images || [];
+      const portrait = images.find(image => image.Type === 'Portrait');
+      return portrait ? portrait.URL : '';
+    },
+  }
+};
+</script>