Skip to content

Commit

Permalink
platform dashboard (bcgov#202)
Browse files Browse the repository at this point in the history
* Interim dashboard draft commit
* updated redirect
* removed commented out styles
Signed-off-by: Kial Jinnah <kialj876@gmail.com>
  • Loading branch information
kialj876 authored Oct 24, 2024
1 parent 629aebf commit 095ae3f
Show file tree
Hide file tree
Showing 41 changed files with 783 additions and 115 deletions.
1 change: 1 addition & 0 deletions strr-platform-web/app/app.config.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
export default defineAppConfig({
ui: {
strategy: 'merge',
button: {
color: {
red: {
Expand Down
20 changes: 20 additions & 0 deletions strr-platform-web/app/components/connect/DashboardSection.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<script setup lang="ts">
defineProps<{ title: string, loading: boolean }>()
</script>
<template>
<div class="space-y-2">
<slot name="header">
<ConnectTypographyH2 :text="title" />
</slot>
<div class="rounded bg-white">
<slot v-if="loading" name="loading">
<div class="min-w-[300px] animate-pulse space-y-2 p-5">
<div class="h-5 w-full rounded bg-gray-200" />
<div class="h-5 w-full rounded bg-gray-200" />
<div class="h-5 w-full rounded bg-gray-200" />
</div>
</slot>
<slot v-else name="default" />
</div>
</div>
</template>
108 changes: 108 additions & 0 deletions strr-platform-web/app/components/connect/DetailsHeader.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
<script setup lang="ts">
const {
loading,
title,
subtitles,
details,
sideDetails,
bottomButtons
} = storeToRefs(useConnectDetailsHeaderStore())
</script>

<template>
<div class="bg-white py-5" data-testid="connect-details-header">
<div class="app-inner-container">
<div v-if="loading" class="flex animate-pulse flex-col gap-2 sm:flex-row">
<div class="grow space-y-2">
<div class="h-9 w-[400px] rounded bg-gray-200" />
<div class="h-5 w-[250px] rounded bg-gray-200" />
<div class="h-5 w-[200px] rounded bg-gray-200" />
<div class="h-5 w-[150px] rounded bg-gray-200" />
</div>
<div class="space-y-2">
<div class="h-5 w-[300px] rounded bg-gray-200" />
<div class="h-5 w-[300px] rounded bg-gray-200" />
<div class="h-5 w-[300px] rounded bg-gray-200" />
<div class="h-5 w-[300px] rounded bg-gray-200" />
</div>
</div>
<div v-else class="flex flex-col gap-2 sm:flex-row">
<div class="grow space-y-4">
<div class="space-y-2">
<ConnectTypographyH1 v-if="title" :text="title" />
<div v-if="subtitles.length" class="flex divide-x *:border-gray-500 *:px-2 first:*:pl-0">
<p v-for="subtitle in subtitles" :key="subtitle" class="text-sm">
{{ subtitle }}
</p>
</div>
</div>
<div class="space-y-2">
<slot name="details">
<p v-if="details" class="text-sm">
{{ details }}
</p>
</slot>
<slot name="buttons">
<div v-if="bottomButtons.length" class="flex flex-wrap gap-2">
<UButton
v-for="btn in bottomButtons"
:key="btn.label"
:label="btn.label"
:icon="btn.icon"
class="pl-0"
color="primary"
variant="link"
@click="btn.action()"
/>
</div>
</slot>
</div>
</div>
<dl class="mr-14 space-y-1 text-sm">
<template v-for="detail in sideDetails" :key="detail.label">
<div>
<UTooltip
:close-delay="100"
:popper="{ placement: 'right', arrow: false, offsetDistance: 0 }"
:ui="{ background: 'bg-transparent', container: 'opacity-100', shadow: 'shadow-none' }"
>
<div class="flex flex-row flex-wrap gap-2">
<dt class="font-bold" :class="[detail.edit?.isEditing && 'mt-1']">
{{ detail.label }}:
</dt>
<dd v-if="!detail.edit?.isEditing">
{{ detail.value }}
</dd>
<UFormGroup
v-else
:name="detail.label"
:error="detail.edit?.validation?.error || undefined"
size="xs"
>
<UInput
v-model="detail.value"
size="2xs"
@change="detail.edit.validation
? detail.edit.validation.error = detail.edit?.validation?.validate($event)
: console.info('no validation')"
/>
</UFormGroup>
</div>
<template #text>
<UButton
v-if="detail.edit"
icon="i-mdi-edit"
:label="!detail.edit.isEditing ? $t('word.Edit') : $t('word.Save')"
:padded="false"
variant="link"
@click="detail.edit.isEditing = !detail.edit.isEditing"
/>
</template>
</UTooltip>
</div>
</template>
</dl>
</div>
</div>
</div>
</template>
33 changes: 33 additions & 0 deletions strr-platform-web/app/components/connect/accordion/Index.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<script setup lang="ts">
defineProps<{ items: ConnectAccordionItem[], multiple?: boolean }>()
</script>

<template>
<UAccordion :items="items" :multiple="multiple">
<template #default="{ item, open }">
<UButton
ref="accordionButton"
variant="ghost"
class="p-4 text-sm font-bold text-gray-900 hover:bg-transparent"
:class="item.class || ''"
>
<template #leading>
<div v-if="item.showAvatar" class="flex size-6 items-center justify-center rounded-full">
<UAvatar size="xs" class="bg-blue-500" :ui="{text: 'text-white'}" :text="item.label.substring(0,1)" />
</div>
</template>
<span class="text-left" :class="item.showAvatar ? 'pl-2' : ''">{{ item.label }}</span>
<template #trailing>
<UIcon
name="i-heroicons-chevron-down-20-solid"
class="ms-auto size-5 text-gray-700 transition-transform duration-200"
:class="[open && '-rotate-180', item.icon]"
/>
</template>
</UButton>
</template>
<template #item="{ item }">
<ConnectAccordionItem class="px-4" :class="item.class" :item="item" :pad-left="item.showAvatar" />
</template>
</UAccordion>
</template>
21 changes: 21 additions & 0 deletions strr-platform-web/app/components/connect/accordion/Item.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<script setup lang="ts">
defineProps<{ item: ConnectAccordionItem, padLeft?: boolean }>()
</script>
<template>
<div class="space-y-3">
<div v-for="info, i in item.values" :key="`connect-accordian-info-${i}`">
<div class="flex gap-2" :class="[padLeft && 'pl-10', info.class || '']">
<UIcon v-if="info.icon" :name="info.icon" class="text-2xl" :class="info.iconClass ?? ''" />
<div class="space-y-1">
<p v-if="info.label" class="text-gray-950">
{{ info.label }}
</p>
<p v-if="info.text" class="break-all text-sm">
{{ info.text }}
</p>
<ConnectFormAddressDisplay v-if="info.address" :address="info.address" />
</div>
</div>
</div>
</div>
</template>
2 changes: 1 addition & 1 deletion strr-platform-web/app/components/connect/fee/Widget.vue
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const {
totalProcessingFees,
totalGst,
totalPst
} = storeToRefs(useConnectFee())
} = storeToRefs(useConnectFeeStore())
const isPlaceholderActive = ref(false)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ const handleManualDateEntry = (input: string) => {
</template>
</UInput>

<ConnectDatePicker
<ConnectFormDatePicker
v-if="showDatePicker"
ref="dateSelectPickerRef"
class="absolute z-20"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const props = defineProps({

<template>
<UFormGroup :label="label" :name="name" :help="help">
<ConnectField
<ConnectFormField
:id="id"
v-model="model"
:placeholder="placeholder"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const inputMask = computed(() => countryCode.value === '1' ? northAmericaMask :
<template>
<div class="flex w-full max-w-bcGovInput flex-col gap-3 sm:flex-row">
<UFormGroup :name="name + '.countryCode'" class="grow sm:max-w-[130px]">
<ConnectPhoneNumberCountryCode
<ConnectFormPhoneNumberCountryCode
v-model:country-calling-code="countryCode"
v-model:country-iso2="countryIso2"
:aria-label="$t('label.phone.countryCode')"
Expand Down
2 changes: 1 addition & 1 deletion strr-platform-web/app/components/connect/typography/H1.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
defineProps<{ text: string }>()
</script>
<template>
<h1 class="text-[32px] font-bold" data-testid="h1">
<h1 class="text-xl font-bold" data-testid="h1">
{{ text }}
</h1>
</template>
2 changes: 1 addition & 1 deletion strr-platform-web/app/components/connect/typography/H2.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
defineProps<{ text: string }>()
</script>
<template>
<h2 :class="`font-bold text-[24px]`" data-testid="h2">
<h2 :class="`font-bold text-lg`" data-testid="h2">
{{ text }}
</h2>
</template>
30 changes: 15 additions & 15 deletions strr-platform-web/app/components/form/common/Contact.vue
Original file line number Diff line number Diff line change
Expand Up @@ -27,21 +27,21 @@ defineProps<{

<template>
<div class="space-y-10 py-10">
<ConnectSection v-if="prepopulateName" :title="tPlat('section.subTitle.yourName')">
<ConnectFormSection v-if="prepopulateName" :title="tPlat('section.subTitle.yourName')">
<p class="font-bold">
<span v-if="fullName">{{ fullName }}</span>
<span v-else>{{ firstName }} {{ lastName }}</span>
</p>
<p v-if="prepopulateType" class="text-sm">
{{ tPlat(`text.yourName${prepopulateType}`) }}
</p>
</ConnectSection>
<ConnectSection v-else :title="tPlat('section.subTitle.contactName')" :error="errorName">
</ConnectFormSection>
<ConnectFormSection v-else :title="tPlat('section.subTitle.contactName')" :error="errorName">
<div class="space-y-5">
<p v-if="sectionInfo" class="mt-1 text-sm">
{{ sectionInfo }}
</p>
<ConnectFieldGroup
<ConnectFormFieldGroup
v-if="fullName !== undefined"
:id="idPrefix + '-full-name'"
v-model="fullName"
Expand All @@ -50,7 +50,7 @@ defineProps<{
:placeholder="t('label.fullName')"
/>
<div v-else class="flex max-w-bcGovInput flex-col gap-3 sm:flex-row">
<ConnectFieldGroup
<ConnectFormFieldGroup
v-if="firstName !== undefined"
:id="idPrefix + '-first-name'"
v-model="firstName"
Expand All @@ -59,7 +59,7 @@ defineProps<{
name="firstName"
:placeholder="t('label.firstName')"
/>
<ConnectFieldGroup
<ConnectFormFieldGroup
v-if="middleName !== undefined"
:id="idPrefix + '-middle-name'"
v-model="middleName"
Expand All @@ -68,7 +68,7 @@ defineProps<{
name="middleName"
:placeholder="t('label.middleNameOpt')"
/>
<ConnectFieldGroup
<ConnectFormFieldGroup
v-if="lastName !== undefined"
:id="idPrefix + '-last-name'"
v-model="lastName"
Expand All @@ -78,7 +78,7 @@ defineProps<{
:placeholder="t('label.lastName')"
/>
</div>
<ConnectFieldGroup
<ConnectFormFieldGroup
v-if="preferredName !== undefined"
:id="idPrefix + '-preferred-name'"
v-model="preferredName"
Expand All @@ -88,11 +88,11 @@ defineProps<{
data-testid="preferredName"
/>
</div>
</ConnectSection>
</ConnectFormSection>
<div v-if="nameDivider" class="h-px w-full border-b border-gray-100" />
<ConnectSection :title="tPlat('section.subTitle.contactDetails')" :error="errorDetails">
<ConnectFormSection :title="tPlat('section.subTitle.contactDetails')" :error="errorDetails">
<div class="space-y-5">
<ConnectFieldGroup
<ConnectFormFieldGroup
v-if="position !== undefined"
:id="idPrefix + '-position'"
v-model="position"
Expand All @@ -101,22 +101,22 @@ defineProps<{
name="position"
:placeholder="t('label.positionTitle')"
/>
<ConnectPhoneNumber
<ConnectFormPhoneNumber
v-if="phone"
v-model:country-code="phone.countryCode"
v-model:country-iso2="phone.countryIso2"
v-model:extension="phone.extension"
v-model:number="phone.number"
/>
<ConnectFieldGroup
<ConnectFormFieldGroup
v-if="faxNumber !== undefined"
:id="idPrefix + '-fax-number'"
v-model="faxNumber"
:aria-label="t('createAccount.contactForm.faxNumber')"
name="faxNumber"
:placeholder="t('createAccount.contactForm.faxNumber')"
/>
<ConnectFieldGroup
<ConnectFormFieldGroup
v-if="emailAddress !== undefined"
:id="idPrefix + '-party-email'"
v-model="emailAddress"
Expand All @@ -126,6 +126,6 @@ defineProps<{
/>
<EmailAlert v-if="emailWarning" />
</div>
</ConnectSection>
</ConnectFormSection>
</div>
</template>
Loading

0 comments on commit 095ae3f

Please sign in to comment.