@cnamts/synapse 1.0.1 → 1.0.3

package/src/components/Amelipro/AmeliproTransmission/tests/__snapshots__/AmeliproTransmission.spec.ts.snap

@@ -0,0 +1,225 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproTransmission > render correctly 1`] = `
+<div
+  class="
+    amelipro-transmission
+    w-100
+  "
+  id="my-transmission-id-container"
+>
+  <div class="
+    amelipro-transmission__wrapper
+    w-100
+  ">
+    <div
+      class="
+        amelipro-card
+        amelipro-transmission__card
+        d-flex
+        flex-column
+        flex-md-row
+        mb-6
+        w-100
+      "
+      id="my-transmission-id-card-container"
+      style="background-color: #FFFFFF; border: 1px solid #DDDEDE;"
+    >
+      <div
+        class="amelipro-card__left-part"
+        id="my-transmission-id-card-left-part"
+        style="width: 100%;"
+      >
+        <div
+          class="
+            amelipro-card__header
+            w-100
+          "
+          id="my-transmission-id-card-header"
+        >
+          <div
+            class="
+              align-sm-center
+              amelipro-card__header-content
+              d-flex
+              flex-column
+              flex-sm-row
+              w-100
+            "
+            style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #DDDEDE;"
+          >
+            <div
+              class="amelipro-card__header-slot-wrapper--left"
+              id="my-transmission-id-card-header-left-part"
+              style="width: 100%;"
+            >
+              <p
+                aria-level="2"
+                class="
+                  amelipro-card__title
+                  mb-0
+                  text-h2
+                "
+                id="my-transmission-id-card-title"
+                role="heading"
+                style="color: #1A1B1B;"
+              >
+                Titre de la carte
+              </p>
+            </div>
+            <!-- v-if -->
+          </div>
+        </div>
+        <div
+          class="amelipro-card__content"
+          id="my-transmission-id-card-content"
+        ></div>
+      </div>
+      <!-- v-if -->
+    </div>
+  </div>
+  <div
+    class="
+      align-center
+      amelipro-transmission__actions
+      d-flex
+      justify-space-between
+    "
+    id="my-transmission-id-action-wrapper"
+  >
+    <div class="amelipro-transmission__actions__left">
+      <button
+        class="
+          amelipro-btn
+          amelipro-transmission__print-btn
+          amelipro-transmission__print-btn
+          elevation-0
+          mb-4
+          mb-4
+          text-ap-blue-darken-1
+          text-none
+          text-none
+          v-btn
+          v-btn--density-default
+          v-btn--flat
+          v-btn--size-default
+          v-btn--variant-text
+          v-theme--light
+        "
+        id="my-transmission-id-print-btn"
+        style="height: auto; min-height: auto; padding: 0px;"
+        type="button"
+      >
+        <span class="v-btn__overlay"></span>
+        <span class="v-btn__underlay"></span>
+        <!---->
+        <span
+          class="v-btn__content"
+          data-no-activator=""
+        >
+          <span class="
+            align-center
+            amelipro-custom-btn
+            d-flex
+            flex-row
+          ">
+            Imprimer sans transmettre
+            <!-- v-if -->
+            <!-- v-if -->
+          </span>
+        </span>
+        <!---->
+        <!---->
+      </button>
+    </div>
+    <div class="
+      amelipro-transmission__actions__right
+      d-flex
+      justify-end
+    ">
+      <button
+        class="
+          amelipro-btn
+          amelipro-btn--style
+          amelipro-transmission__alternate-btn
+          amelipro-transmission__alternate-btn
+          bg-ap-white
+          elevation-0
+          mr-2
+          mr-2
+          v-btn
+          v-btn--density-default
+          v-btn--flat
+          v-btn--size-default
+          v-btn--variant-flat
+          v-theme--light
+        "
+        id="my-transmission-id-alternate-btn"
+        style="height: auto; min-height: 2.5rem; color: #00749C !important; border: 2px solid #00749C !important; background-color: white;"
+        type="button"
+      >
+        <span class="v-btn__overlay"></span>
+        <span class="v-btn__underlay"></span>
+        <!---->
+        <span
+          class="v-btn__content"
+          data-no-activator=""
+        >
+          <span class="
+            align-center
+            amelipro-custom-btn
+            d-flex
+            flex-row
+          ">
+            Modifier
+            <!-- v-if -->
+            <!-- v-if -->
+          </span>
+        </span>
+        <!---->
+        <!---->
+      </button>
+      <button
+        class="
+          amelipro-btn
+          amelipro-btn--style
+          amelipro-transmission__confirm-btn
+          amelipro-transmission__confirm-btn
+          bg-ap-blue-darken-1
+          elevation-0
+          v-btn
+          v-btn--density-default
+          v-btn--flat
+          v-btn--size-default
+          v-btn--variant-flat
+          v-theme--light
+        "
+        id="my-transmission-id-confirm-btn"
+        style="height: auto; min-height: 2.5rem; color: #FFFFFF !important;"
+        type="button"
+      >
+        <span class="v-btn__overlay"></span>
+        <span class="v-btn__underlay"></span>
+        <!---->
+        <span
+          class="v-btn__content"
+          data-no-activator=""
+        >
+          <span class="
+            align-center
+            amelipro-custom-btn
+            d-flex
+            flex-row
+          ">
+            Transmettre
+            <!-- v-if -->
+            <!-- v-if -->
+          </span>
+        </span>
+        <!---->
+        <!---->
+      </button>
+    </div>
+  </div>
+</div>
+`;

package/src/components/Amelipro/ServiceMenu/ServiceBtn/ServiceBtn.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+	import AmeliproBtn from '../../AmeliproBtn/AmeliproBtn.vue'
+	import AmeliproIconBtn from '../../AmeliproIconBtn/AmeliproIconBtn.vue'
+	import { type PropType } from 'vue'
+	import type { Service } from './types'
+
+	defineProps({
+		iconBgColor: {
+			type: String,
+			required: true,
+		},
+		iconHoverBgColor: {
+			type: String,
+			required: true,
+		},
+		item: {
+			type: Object as PropType<Service>,
+			required: true,
+		},
+		uniqueId: {
+			type: String,
+			default: undefined,
+		},
+	})
+
+	const emit = defineEmits(['click'])
+	const emitClickEvent = () => emit('click')
+</script>
+
+<template>
+	<div>
+		<AmeliproIconBtn
+			v-if="item.icon"
+			class="d-flex text-none text-center service-btn"
+			:href="item.href"
+			:icon="item.icon"
+			:icon-bg-color="iconBgColor"
+			icon-color="ap-white"
+			:icon-hover-bg-color="iconHoverBgColor"
+			icon-hover-color="ap-white"
+			:ripple="false"
+			size="2.5rem"
+			:to="item.to"
+			:unique-id="uniqueId"
+			@click="emitClickEvent"
+		>
+			<template #append>
+				<span
+					:id="uniqueId ? `${uniqueId}-text` : undefined"
+					class="font-size-xs font-weight-regular text-ap-grey-darken-1 service-btn__text"
+				>
+					{{ item.label }}
+				</span>
+			</template>
+		</AmeliproIconBtn>
+
+		<AmeliproBtn
+			v-if="item.imgSrc && !item.icon"
+			class="d-flex text-none text-center service-btn"
+			color="transparent"
+			hover-color="transparent"
+			:href="item.href"
+			style="white-space: normal;"
+			text-color="ap-grey-darken-1"
+			:to="item.to"
+			:unique-id="uniqueId"
+			@click="emitClickEvent"
+		>
+			<img
+				:id="uniqueId ? `${uniqueId}-img` : undefined"
+				alt=""
+				class="d-block"
+				:src="item.imgSrc"
+				style="width: 2.5rem; height: 2.5rem; margin: 0 auto;"
+			>
+			<span
+				:id="uniqueId ? `${uniqueId}-text` : undefined"
+				class="d-block font-size-xs text-ap-grey-darken-1 font-weight-regular"
+			>
+				{{ item.label }}
+			</span>
+		</AmeliproBtn>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+	:deep(.v-btn) {
+		border-radius: 0 !important;
+		padding: 0 !important;
+
+		& .amelipro-custom-btn {
+			flex-direction: column !important;
+		}
+	}
+
+	.v-btn :deep(.v-btn__content) {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		max-width: 100%;
+		white-space: normal;
+
+		& .icon-custom,
+		& img {
+			margin: 0 0 5px !important;
+		}
+
+		& .service-btn__text {
+			white-space: break-spaces;
+			line-break: auto;
+		}
+	}
+</style>

package/src/components/Amelipro/ServiceMenu/ServiceBtn/tests/ServiceBtn.spec.ts

@@ -0,0 +1,25 @@
+import { mount } from '@vue/test-utils'
+import { expect, describe, it } from 'vitest'
+import ServiceBtn from '../ServiceBtn.vue'
+import { vuetify } from '@tests/unit/setup'
+
+describe('ServiceBtn', () => {
+	it('render correctly', async () => {
+		const wrapper = mount(ServiceBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				iconBgColor: 'ap-blue',
+				iconHoverBgColor: 'ap-yellow',
+				item: {
+					icon: 'releveHonoraires',
+					label: 'relevé honoraires',
+				},
+				uniqueId: 'service-btn-id',
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+})

package/src/components/Amelipro/ServiceMenu/ServiceBtn/tests/__snapshots__/ServiceBtn.spec.ts.snap

@@ -0,0 +1,93 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ServiceBtn > render correctly 1`] = `
+<div>
+  <button
+    class="
+      btn--icon
+      d-flex
+      elevation-0
+      rounded-0
+      service-btn
+      text-center
+      text-none
+      v-btn
+      v-btn--density-default
+      v-btn--elevated
+      v-btn--icon
+      v-btn--size-default
+      v-btn--variant-elevated
+      v-theme--light
+    "
+    id="service-btn-id"
+    plain=""
+    style="height: auto; width: auto;"
+    type="button"
+  >
+    <span class="v-btn__overlay"></span>
+    <span class="v-btn__underlay"></span>
+    <!---->
+    <span
+      class="v-btn__content"
+      data-no-activator=""
+    >
+      <!-- v-if -->
+      <span
+        class="
+          amelipro-icon
+          icon-custom
+          mr-2
+        "
+        id="service-btn-id-icon"
+      >
+        <span
+          aria-hidden="true"
+          class="
+            amelipro-custom-icon
+            custom-color
+          "
+          focusable="false"
+          role="img"
+          style="color: #FFFFFF; height: 2.5rem; width: 2.5rem;"
+        >
+          <span>
+            <svg
+              aria-hidden="true"
+              style="enable-background:new 0 0 34 34.1;"
+              viewBox="0 0 34 34"
+              x="0px"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+              y="0px"
+            >
+              <path
+                class="circle-color"
+                d="M17,0L17,0c9.4,0,17,7.7,17,17l0,0c0,9.4-7.6,17-17,17.1l0,0C7.6,34.1,0,26.4,0,17l0,0C0,7.7,7.6,0,17,0z"
+              />
+              <g class="shape-color">
+                <path d="M17.8,6.9c-0.7,0-1.4,0.1-2,0.5c-0.3,0.2-0.6,0.5-0.9,0.8c-0.2,0.3-0.4,0.7-0.5,1.1h4.8l-0.2,0.8h-4.7 c0,0.1,0,0.2,0,0.2c0,0.2,0,0.4,0,0.6h4.5l-0.2,0.8h-4.2c0.1,0.9,0.7,1.6,1.4,2c0.5,0.3,1.1,0.4,1.8,0.4c0.7,0,1.5-0.2,2.1-0.6V15 c-0.6,0.3-1.3,0.4-1.9,0.4c-2.1,0-3.6-0.8-4.3-2.4c-0.2-0.4-0.3-0.8-0.4-1.2H12l0.2-0.8h0.7c0-0.2,0-0.4,0-0.6v-0.3H12l0.2-0.8H13 c0.2-1.3,1.1-2.4,2.3-2.9c0.8-0.4,1.6-0.6,2.5-0.5c0.8,0,1.5,0.1,2.2,0.5l-0.3,1.2C19.2,7.1,18.5,6.9,17.8,6.9L17.8,6.9z" />
+                <path d="M30.7,10.5l-0.5-0.9l-1.9,1.1c-0.4-0.4-1-0.7-1.6-0.7c-1.2,0-2.2,1-2.2,2.2c0,0.5,0.2,1,0.4,1.3l-3.1,3.7 c-0.3-0.2-0.7-0.3-1.1-0.3c-1.2,0-2.2,1-2.2,2.2c0,0.4,0.1,0.7,0.2,1l-3,2.3c-0.4-0.3-0.9-0.5-1.4-0.5c-0.9,0-1.7,0.6-2.1,1.4 l-2.2-1c0-0.1,0-0.1,0-0.2C10,21,9,20,7.8,20c-1.2,0-2.2,1-2.2,2.2c0,0.2,0,0.3,0.1,0.5L3.7,24l0.6,0.8L6,23.6 c0.4,0.5,0.9,0.8,1.5,0.8V29H8v-4.5c0.7-0.1,1.3-0.5,1.7-1.1l2.3,1c0.1,1.1,0.9,1.9,2,2V29h0.5v-2.5c1.1-0.1,2-1.1,2-2.2 c0-0.3-0.1-0.6-0.2-0.9l3.1-2.3c0.3,0.3,0.7,0.4,1.1,0.5V29H21v-7.5c1.1-0.1,2-1.1,2-2.2c0-0.5-0.2-1-0.4-1.3l3.1-3.7 c0.2,0.1,0.5,0.2,0.8,0.3V29H27V14.5c1.1-0.1,2-1.1,2-2.2c0-0.3-0.1-0.5-0.1-0.7L30.7,10.5z" />
+              </g>
+            </svg>
+          </span>
+        </span>
+      </span>
+      <span
+        class="
+          font-size-xs
+          font-weight-regular
+          service-btn__text
+          text-ap-grey-darken-1
+        "
+        id="service-btn-id-text"
+      >
+        relevé honoraires
+      </span>
+    </span>
+    <!---->
+    <!---->
+  </button>
+  <!-- v-if -->
+</div>
+`;

package/src/components/Amelipro/ServiceMenu/ServiceBtn/types.d.ts

@@ -0,0 +1,8 @@
+export interface Service {
+	icon?: string
+	imgSrc?: string
+	label: string
+	to?: string
+	href?: string
+	click?: CallableFunction
+}

package/src/components/Amelipro/ServiceMenu/ServiceList/ServiceList.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+	import { type PropType, computed } from 'vue'
+	import type { IndexedObject } from '../../types'
+	import type { Service } from '../ServiceBtn/types'
+	import ServiceBtn from '../ServiceBtn/ServiceBtn.vue'
+	import { convertToHex } from '@/utils/functions/convertToHex'
+	import { useDisplay } from 'vuetify'
+
+	const props = defineProps({
+		items: {
+			type: Array as PropType<Service[]>,
+			required: true,
+		},
+		serviceContact: {
+			type: Boolean,
+			default: false,
+		},
+		servicePatient: {
+			type: Boolean,
+			default: false,
+		},
+		uniqueId: {
+			type: String,
+			required: true,
+		},
+	})
+
+	const btnId = (index: number) => {
+		if (props.servicePatient) {
+			return `${props.uniqueId}-service-patient-btn-${index}`
+		}
+		if (props.serviceContact) {
+			return `${props.uniqueId}-service-contact-btn-${index}`
+		}
+		return `${props.uniqueId}-service-ps-btn-${index}`
+	}
+
+	const { xs } = useDisplay()
+	const iconBgColor = computed<string>(() => {
+		if (props.servicePatient) {
+			return '#1CB0BA'
+		}
+		if (props.serviceContact) {
+			return convertToHex('ap-pink')
+		}
+		return '#01B9F5'
+	})
+
+	const iconHoverBgColor = computed<string>(() => {
+		if (props.servicePatient) {
+			return '#006A77'
+		}
+		if (props.serviceContact) {
+			return convertToHex('ap-red-darken-2')
+		}
+		return '#005DA8'
+	})
+
+	const serviceStyles = computed<IndexedObject>(() => {
+		const serviceStyleRules: IndexedObject = {
+			flexBasis: 'calc((100% / 3) - 8px)',
+			maxWidth: 'calc((100% / 3) - 8px)',
+			width: 'calc((100% / 3) - 8px)',
+		}
+
+		if (xs.value) {
+			serviceStyleRules.width = 'calc(50% - 8px)'
+			serviceStyleRules.maxWidth = 'calc(50% - 8px)'
+			serviceStyleRules.flexBasis = 'calc(50% - 8px)'
+		}
+
+		return serviceStyleRules
+	})
+</script>
+
+<template>
+	<ul
+		:id="uniqueId"
+		class="d-flex flex-wrap list-style-none service-list"
+	>
+		<li
+			v-for="(item, index) in items"
+			:id="`${uniqueId}-item-${index}`"
+			:key="index"
+			class="mx-1 my-2 service-item"
+			:style="serviceStyles"
+		>
+			<ServiceBtn
+				:icon-bg-color="iconBgColor"
+				:icon-hover-bg-color="iconHoverBgColor"
+				:item="item"
+				:unique-id="btnId(index)"
+			/>
+		</li>
+	</ul>
+</template>

package/src/components/Amelipro/ServiceMenu/ServiceList/tests/ServiceList.spec.ts

@@ -0,0 +1,29 @@
+import { mount } from '@vue/test-utils'
+import { expect, describe, it } from 'vitest'
+import ServiceList from '../ServiceList.vue'
+import { vuetify } from '@tests/unit/setup'
+
+describe('ServiceList', () => {
+	it('render correctly', async () => {
+		const wrapper = mount(ServiceList, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				items: [
+					{
+						icon: 'releveHonoraires',
+						label: 'relevé honoraires',
+					},
+					{
+						icon: 'horairesCabinet',
+						label: 'horaires cabinet',
+					},
+				],
+				uniqueId: 'service-list-id',
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+})