@fy-/fws-vue-core 3.0.3 → 3.0.5

package/src/components/fws/FilterData.vue

@@ -0,0 +1,423 @@
+<script setup lang="ts">
+import type { FilterDataItems } from '../../types'
+import { AdjustmentsHorizontalIcon, ArrowPathIcon, FunnelIcon, XMarkIcon } from '@heroicons/vue/24/solid'
+import { onMounted, onUnmounted, reactive, ref } from 'vue'
+import { useEventBus } from '../../composables/event-bus'
+import { useTranslation } from '../../composables/translations'
+import DefaultInput from '../ui/DefaultInput.vue'
+
+const emit = defineEmits(['update:modelValue'])
+const hidden = ref<boolean>(false)
+const state = reactive<any>({ formData: {} })
+const types = reactive<any>({})
+const translate = useTranslation()
+const fDynamicOptions = ref<any[]>([])
+const eventBus = useEventBus()
+
+const props = withDefaults(
+  defineProps<{
+    data?: Array<Array<FilterDataItems>>
+    css: string
+    modelValue?: Record<string, unknown>
+  }>(),
+  {
+    data: () => [],
+  },
+)
+
+function removeUndefinedStrings(input: any, undefinedValues: any[] = ['undefined']) {
+  const output: any = {}
+  Object.keys(input).forEach((key) => {
+    if (!undefinedValues.includes(input[key]) && input[key] !== undefined) {
+      if (!input[key].$between) {
+        output[key] = input[key]
+      }
+      else {
+        input[key].$between[0]
+          = input[key].$between[0] === '' || input[key].$between[0] == null
+            ? undefined
+            : input[key].$between[0]
+        input[key].$between[1]
+          = input[key].$between[1] === '' || input[key].$between[1] == null
+            ? undefined
+            : input[key].$between[1]
+        if (
+          input[key].$between[0] !== undefined
+          || input[key].$between[1] !== undefined
+        ) {
+          output[key] = input[key]
+        }
+      }
+    }
+  })
+  return output
+}
+
+function formatValues(obj: any) {
+  props.data.forEach((group) => {
+    group.forEach((f) => {
+      if (f.formats && f.formats[f.type]) {
+        obj[f.uid] = f.formats[f.type](obj[f.uid])
+      }
+      if (f.formatRestValue) {
+        obj[f.uid] = f.formatRestValue(obj[f.uid])
+      }
+    })
+  })
+  return removeUndefinedStrings(obj, ['undefined', ''])
+}
+
+function updateForms() {
+  state.formData = {}
+  props.data.forEach((group) => {
+    group.forEach((f) => {
+      state.formData[f.uid]
+        = typeof f.default == 'object' && f.default
+          ? JSON.parse(JSON.stringify(f.default))
+          : f.default
+      types[f.uid] = f.type
+      if (f.options && f.options.length) {
+        f.options = f.options.map((status) => {
+          const [statusKey, statusValue] = status
+          const translatedValue = translate(statusValue)
+          return [statusKey, translatedValue]
+        })
+      }
+    })
+  })
+  emit('update:modelValue', formatValues({ ...state.formData }))
+}
+updateForms()
+
+function updateFormData(data: any) {
+  data.forEach((d: any) => {
+    if (d.uid) {
+      state.formData[d.uid] = d.value
+    }
+  })
+  submitForm()
+}
+
+function submitForm() {
+  const formData = formatValues({ ...state.formData })
+  emit('update:modelValue', formData)
+  eventBus.emit('forceUpdateFilters', true)
+}
+
+function resetForm() {
+  updateForms()
+}
+
+onMounted(() => {
+  eventBus.on('resetFilters', resetForm)
+  eventBus.on('updateFilters', updateFormData)
+})
+onUnmounted(() => {
+  eventBus.off('resetFilters', resetForm)
+  eventBus.off('updateFilters', updateFormData)
+})
+</script>
+
+<template>
+  <div class="fws-filter">
+    <form v-if="!hidden" class="fws-filter__form" @submit.prevent="submitForm">
+      <div
+        class="fws-filter__grid"
+        :class="[
+          css,
+          { 'fws-filter__grid--3': data.length >= 3, 'fws-filter__grid--4': data.length >= 4 },
+        ]"
+      >
+        <div v-for="(g, i) in data" :key="`index_${i}`" class="fws-filter__group">
+          <template v-for="f in g" :key="f.uid">
+            <template v-if="!f.isHidden">
+              <DefaultInput
+                v-if="['text', 'select', 'date', 'email', 'autocomplete'].includes(f.type)"
+                :id="f.uid"
+                v-model="state.formData[f.uid]"
+                :type="f.type === 'autocomplete' ? 'text' : f.type"
+                :label="f.label"
+                :options="f.options ? f.options : [[]]"
+                class="fws-filter__input"
+                @focus="() => { f.focused = true; }"
+                @blur="() => { f.focused = false; }"
+                @change="(ev: any) => { if (f.onChangeValue) f.onChangeValue(state.formData, ev); }"
+                @update:model-value="(v: any) => {
+                  if (f.autocomplete && v.length >= 2) {
+                    fDynamicOptions = [];
+                    f.autocomplete(v).then((r: any) => { fDynamicOptions = r; });
+                  }
+                }"
+              >
+                <div
+                  v-if="f.type === 'autocomplete' && f.focused && fDynamicOptions.length > 0"
+                  class="fws-filter__autocomplete"
+                >
+                  <button
+                    v-for="o in fDynamicOptions"
+                    :key="o[0]"
+                    class="fws-filter__autocomplete-item"
+                    type="button"
+                    @click.prevent="() => { f.focused = false; state.formData[f.uid] = o[0]; }"
+                  >
+                    <span class="fws-filter__autocomplete-label">{{ o[1] }}</span>
+                    <small v-if="o[0] !== ''" class="fws-filter__autocomplete-id">({{ o[0] }})</small>
+                  </button>
+                </div>
+              </DefaultInput>
+
+              <!-- Date range: use two date inputs as fallback -->
+              <div v-if="f.type === 'range'" class="fws-filter__range">
+                <DefaultInput
+                  :id="`${f.uid}_from`"
+                  v-model="state.formData[f.uid].$between[0]"
+                  type="date"
+                  :label="`${f.label} (from)`"
+                  class="fws-filter__input"
+                />
+                <DefaultInput
+                  :id="`${f.uid}_to`"
+                  v-model="state.formData[f.uid].$between[1]"
+                  type="date"
+                  :label="`${f.label} (to)`"
+                  class="fws-filter__input"
+                />
+              </div>
+            </template>
+          </template>
+        </div>
+      </div>
+
+      <div class="fws-filter__actions">
+        <div class="fws-filter__actions-left">
+          <button type="submit" class="btn primary sm">
+            <AdjustmentsHorizontalIcon class="fws-filter__btn-icon" aria-hidden="true" />
+            {{ $t("filters_search_cta") || 'Search' }}
+          </button>
+          <button type="button" class="btn neutral ol sm" @click.prevent="resetForm">
+            <ArrowPathIcon class="fws-filter__btn-icon" aria-hidden="true" />
+            {{ $t("filters_clear_cta") || 'Clear' }}
+          </button>
+        </div>
+        <button type="button" class="btn ghost sm" @click="hidden = true">
+          <XMarkIcon class="fws-filter__btn-icon" aria-hidden="true" />
+          {{ $t("hide_filters_cta") || 'Hide' }}
+        </button>
+      </div>
+    </form>
+
+    <div v-else class="fws-filter__show-wrap">
+      <button type="button" class="fws-filter__show-pill" @click="hidden = false">
+        <FunnelIcon class="fws-filter__btn-icon" aria-hidden="true" />
+        {{ $t("show_filters_cta") || 'Show filters' }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.fws-filter {
+  margin-bottom: 16px;
+}
+
+/* Form — Stripe card with subtle entrance */
+.fws-filter__form {
+  padding: 16px;
+  border-radius: 10px;
+  background: #fff;
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.05),
+    rgba(50, 50, 93, 0.06) 0 2px 6px;
+  animation: fws-filter-in 0.2s ease-out;
+}
+
+@keyframes fws-filter-in {
+  from { opacity: 0; transform: translateY(-6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.dark .fws-filter__form {
+  background: var(--fv-neutral-900, #0a0a0a);
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.06);
+}
+
+/* Grid layout */
+.fws-filter__grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 14px;
+  column-gap: 16px;
+}
+
+.fws-filter__grid--3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.fws-filter__grid--4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+@media (max-width: 768px) {
+  .fws-filter__grid,
+  .fws-filter__grid--3,
+  .fws-filter__grid--4 {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (min-width: 769px) and (max-width: 1024px) {
+  .fws-filter__grid--3,
+  .fws-filter__grid--4 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.fws-filter__group {
+  position: relative;
+}
+
+.fws-filter__input {
+  margin-bottom: 6px;
+}
+
+/* Date range pair */
+.fws-filter__range {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+
+/* Autocomplete dropdown */
+.fws-filter__autocomplete {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  transform: translateY(100%);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 6px;
+  background: #fff;
+  border-radius: 8px;
+  z-index: 10;
+  max-height: 240px;
+  overflow-y: auto;
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.06),
+    0 8px 24px rgba(0, 0, 0, 0.1);
+}
+
+.dark .fws-filter__autocomplete {
+  background: var(--fv-neutral-800, #1e1e1e);
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.06),
+    0 8px 24px rgba(0, 0, 0, 0.4);
+}
+
+.fws-filter__autocomplete-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 10px;
+  border: none;
+  background: none;
+  border-radius: 6px;
+  font-size: 14px;
+  color: var(--fv-neutral-800, #1e1e1e);
+  cursor: pointer;
+  transition: background 0.1s ease;
+}
+
+.fws-filter__autocomplete-item:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.dark .fws-filter__autocomplete-item {
+  color: var(--fv-neutral-200, #e5e5e5);
+}
+
+.dark .fws-filter__autocomplete-item:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.fws-filter__autocomplete-label {
+  font-weight: 500;
+}
+
+.fws-filter__autocomplete-id {
+  color: var(--fv-neutral-500, #737373);
+  margin-left: 8px;
+}
+
+/* Actions */
+.fws-filter__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 16px;
+  gap: 8px;
+}
+
+.fws-filter__actions-left {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.fws-filter__btn-icon {
+  width: 16px;
+  height: 16px;
+  margin-right: 4px;
+}
+
+/* Show filters — Stripe/Linear pill button */
+.fws-filter__show-wrap {
+  text-align: center;
+}
+
+.fws-filter__show-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 16px;
+  border: none;
+  border-radius: 9999px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--fv-primary-600, #7c3aed);
+  background: rgba(124, 58, 237, 0.06);
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.fws-filter__show-pill:hover {
+  background: rgba(124, 58, 237, 0.12);
+}
+
+.fws-filter__show-pill:focus-visible {
+  outline: 2px solid var(--fv-primary-500, #7c3aed);
+  outline-offset: 2px;
+}
+
+.dark .fws-filter__show-pill {
+  color: var(--fv-primary-400, #a78bfa);
+  background: rgba(167, 139, 250, 0.08);
+}
+
+.dark .fws-filter__show-pill:hover {
+  background: rgba(167, 139, 250, 0.15);
+}
+
+@media (max-width: 640px) {
+  .fws-filter__form {
+    padding: 12px;
+  }
+
+  .fws-filter__range {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

package/src/components/fws/UserData.vue

@@ -0,0 +1,220 @@
+<script setup lang="ts">
+import { computed, reactive, watchEffect } from 'vue'
+import { useEventBus } from '../../composables/event-bus'
+import { useRest } from '../../composables/rest'
+import { useUserStore } from '../../stores/user'
+import DefaultInput from '../ui/DefaultInput.vue'
+
+const rest = useRest()
+const userStore = useUserStore()
+const userData = computed(() => userStore.user)
+const eventBus = useEventBus()
+
+const props = withDefaults(
+  defineProps<{
+    onCompleted?: (data: any) => void
+  }>(),
+  {
+    onCompleted: () => {},
+  },
+)
+
+const state = reactive({
+  Firstname: '',
+  Lastname: '',
+  Phone: '',
+  AcceptedTerms: false,
+  EnabledNotifications: false,
+  EnabledEmails: false,
+  EnabledTrainingFromMyData: false,
+})
+
+watchEffect(() => {
+  if (!userData.value) return
+  state.Firstname = userData.value.Firstname || ''
+  state.Lastname = userData.value.Lastname || ''
+  state.Phone = userData.value.Phone || ''
+  state.AcceptedTerms = userData.value.AcceptedTerms || false
+  state.EnabledNotifications = userData.value.EnabledNotifications || false
+  state.EnabledEmails = userData.value.EnabledEmails || false
+  state.EnabledTrainingFromMyData = userData.value.EnabledTrainingFromMyData || false
+})
+
+async function patchUser() {
+  eventBus.emit('main-loading', true)
+  const response = await rest('User', 'PATCH', { ...state })
+  if (response && response.result === 'success') {
+    eventBus.emit('user:refresh', true)
+    if (props.onCompleted) props.onCompleted(response)
+  }
+  eventBus.emit('main-loading', false)
+}
+</script>
+
+<template>
+  <form class="fws-userdata" @submit.prevent="patchUser">
+    <div class="fws-userdata__container">
+      <h3 class="fws-userdata__heading">
+        {{ $t('fws_personal_data_title') || $t('fws_personal_information') || 'Personal Information' }}
+      </h3>
+
+      <!-- Personal fields -->
+      <div class="fws-userdata__grid-2">
+        <DefaultInput
+          id="firstnameFWS"
+          v-model="state.Firstname"
+          type="text"
+          :label="$t('fws_firstname_label') || 'First name'"
+          :help="$t('fws_firstname_help') || ''"
+        />
+        <DefaultInput
+          id="lastnameFWS"
+          v-model="state.Lastname"
+          type="text"
+          :label="$t('fws_lastname_label') || 'Last name'"
+          :help="$t('fws_lastname_help') || ''"
+        />
+        <DefaultInput
+          id="phoneFWS"
+          v-model="state.Phone"
+          type="text"
+          :label="$t('fws_phone_label') || 'Phone'"
+          :help="$t('fws_phone_help') || ''"
+        />
+      </div>
+
+      <!-- Preferences -->
+      <div class="fws-userdata__prefs">
+        <h4 class="fws-userdata__section-label">
+          {{ $t('fws_preferences_and_settings') || 'Preferences & Settings' }}
+        </h4>
+
+        <div class="fws-userdata__toggles">
+          <DefaultInput
+            v-if="!userData?.AcceptedTerms"
+            id="acceptedTermsFWS"
+            v-model:checkbox-value="state.AcceptedTerms"
+            type="toggle"
+            :label="$t('fws_accepted_terms_label') || 'Accept terms'"
+            :help="$t('fws_accepted_terms_help') || ''"
+          />
+
+          <div class="fws-userdata__grid-2">
+            <DefaultInput
+              id="enabledNotificationsFWS"
+              v-model:checkbox-value="state.EnabledNotifications"
+              type="toggle"
+              :label="$t('fws_enabled_notifications_label') || 'Notifications'"
+              :help="$t('fws_enabled_notifications_help') || ''"
+            />
+            <DefaultInput
+              id="enabledEmailsFWS"
+              v-model:checkbox-value="state.EnabledEmails"
+              type="toggle"
+              :label="$t('fws_enabled_emails_label') || 'Email updates'"
+              :help="$t('fws_enabled_emails_help') || ''"
+            />
+          </div>
+
+          <DefaultInput
+            id="enabledTrainingFromMyDataFWS"
+            v-model:checkbox-value="state.EnabledTrainingFromMyData"
+            type="toggle"
+            :label="$t('fws_enabled_training_from_my_data_label') || 'Allow data training'"
+            :help="$t('fws_enabled_training_from_my_data_help') || ''"
+          />
+        </div>
+      </div>
+
+      <div class="fws-userdata__actions">
+        <button type="submit" class="btn primary">
+          {{ $t("fws_save_user_cta") || 'Save changes' }}
+        </button>
+      </div>
+    </div>
+  </form>
+</template>
+
+<style scoped>
+.fws-userdata__container {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  padding: 20px 24px;
+  border-radius: 10px;
+  background: #fff;
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.06),
+    0 2px 4px rgba(0, 0, 0, 0.04);
+}
+
+.dark .fws-userdata__container {
+  background: var(--fv-neutral-900, #0a0a0a);
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.06),
+    0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.fws-userdata__heading {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--fv-neutral-900, #0a0a0a);
+  margin: 0;
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+.dark .fws-userdata__heading {
+  color: var(--fv-neutral-100, #f5f5f5);
+  border-bottom-color: rgba(255, 255, 255, 0.06);
+}
+
+.fws-userdata__grid-2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+@media (max-width: 640px) {
+  .fws-userdata__grid-2 {
+    grid-template-columns: 1fr;
+  }
+}
+
+.fws-userdata__prefs {
+  padding-top: 14px;
+  border-top: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+.dark .fws-userdata__prefs {
+  border-top-color: rgba(255, 255, 255, 0.06);
+}
+
+.fws-userdata__section-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--fv-neutral-800, #1e1e1e);
+  margin: 0 0 12px;
+}
+
+.dark .fws-userdata__section-label {
+  color: var(--fv-neutral-200, #e5e5e5);
+}
+
+.fws-userdata__toggles {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.fws-userdata__actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+@media (max-width: 640px) {
+  .fws-userdata__container {
+    padding: 16px;
+  }
+}
+</style>