Feature/hosting-jurisdictions-api

src/components/settings/hostingPreferences/BaseCombobox.vue

@@ -25,18 +25,19 @@ const props = withDefaults(
     isLoading?: boolean
     isSaving?: boolean
     label?: string
+    initiallySelected?: string[]
   }>(),
   {
     options: () => [],
     isLoading: false,
     isSaving: false,
-    label: ''
+    label: '',
+    initiallySelected: () => []
   }
 )
 
 const isEditing = ref(false)
 
-const initiallySelected: string[] = []
 const previouslySelected = ref<Option[]>([])
 
 const mappedValues: Option[] = props.options.map((label, index) => ({
@@ -45,7 +46,7 @@ const mappedValues: Option[] = props.options.map((label, index) => ({
 }))
 
 const selectedOptions = ref<Option[]>(
-  mappedValues.filter((option) => initiallySelected.includes(option.label))
+  mappedValues.filter((option) => props.initiallySelected.includes(option.label))
 )
 
 const visibleOptions = computed(() => {
@@ -85,7 +86,10 @@ function removeOption(optionToBeRemoved: Option): void {
 }
 
 function save(): void {
-  emit('save', selectedOptions.value)
+  emit(
+    'save',
+    selectedOptions.value.map((option) => option.label)
+  )
 }
 
 function cancel(): void {
@@ -156,15 +160,18 @@ watch(
         </BaseTooltip>
       </CategoryChip>
     </div>
+
     <span
       v-else
       class="exclusion-select__exclusions-selected"
     >
       None
     </span>
+
     <PencilIcon
       v-if="!isEditing"
       class="exclusion-select__exclusions-edit-icon"
+      :class="{ 'exclusion-select__exclusions-edit-icon--disabled': props.isSaving }"
       @click="edit"
     />
 
@@ -261,6 +268,12 @@ watch(
       margin-left: 8px;
       margin-top: 4px;
       cursor: pointer;
+
+      &--disabled {
+        opacity: 0.15;
+        pointer-events: none;
+        cursor: not-allowed;
+      }
     }
 
     &-combobox {
@@ -283,6 +296,8 @@ watch(
 
       &--disabled {
         opacity: 0.15;
+        pointer-events: none;
+        cursor: not-allowed;
       }
     }
 

src/components/settings/hostingPreferences/ExclusionSelect.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import ExclusionSelect from '@/components/settings/hostingPreferences/BaseCombobox.vue'
+
+const props = withDefaults(
+  defineProps<{
+    label?: string
+    options: string[]
+    isBusy: boolean
+    initiallySelected?: string[]
+  }>(),
+  {
+    label: '',
+    initiallySelected: () => []
+  }
+)
+
+const emit = defineEmits(['save'])
+
+function save(selectedOptions: string[]): void {
+  emit('save', selectedOptions)
+}
+</script>
+
+<template>
+  <ExclusionSelect
+    :label="props.label"
+    :options="props.options"
+    :is-saving="props.isBusy"
+    :initially-selected="props.initiallySelected"
+    @save="save"
+  />
+</template>

src/components/settings/hostingPreferences/HAppSelectionSection.vue

@@ -1,7 +1,51 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 import SettingsSection from '../SettingsSection.vue'
-import CategoryExclusionSelect from '@/components/settings/hostingPreferences/CategoryExclusionSelect.vue'
-import JurisdictionExclusionSelect from '@/components/settings/hostingPreferences/JurisdictionExclusionSelect.vue'
+import ExclusionSelect from '@/components/settings/hostingPreferences/ExclusionSelect.vue'
+import { categories } from '@/constants/categories'
+import { countries } from '@/constants/countries'
+import { usePreferencesStore } from '@/store/preferences'
+import type { HostingJurisdictions } from '@/types/types'
+import { ECriteriaType } from '@/types/types'
+
+const preferencesStore = usePreferencesStore()
+
+const props = defineProps<{
+  hostingJurisdictions: HostingJurisdictions
+}>()
+
+const isJurisdictionExclusionsBusy = ref(false)
+const isHostingCategoriesExclusionsBusy = ref(false)
+
+async function saveHostingJurisdictions(
+  value: string[],
+  criteriaType: ECriteriaType
+): Promise<void> {
+  isJurisdictionExclusionsBusy.value = true
+
+  const payload = {
+    criteria_type: criteriaType,
+    value
+  }
+
+  // Make an API call to save new selected options
+  try {
+    await preferencesStore.setHostingJurisdictions(payload)
+    isJurisdictionExclusionsBusy.value = false
+  } catch (error) {
+    isJurisdictionExclusionsBusy.value = false
+  }
+}
+
+function saveHostingCategoriesExclusions(): void {
+  isHostingCategoriesExclusionsBusy.value = true
+  // Make an API call to save new selected options
+
+  setTimeout(() => {
+    isHostingCategoriesExclusionsBusy.value = false
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+  }, 2000)
+}
 </script>
 
 <template>
@@ -10,20 +54,50 @@ import JurisdictionExclusionSelect from '@/components/settings/hostingPreference
     class="happ-selection-section"
   >
     <div class="card-content">
-      <JurisdictionExclusionSelect />
+      <div class="happ-selection-section__tags">
+        <span class="happ-selection-section__selection-label happ-selection-section__selection-label--main">
+          {{ $t('hosting_preferences.happ_selection.jurisdiction_exclusions') }}
+        </span>
+        <div class="happ-selection-section__tags-item happ-selection-section__tags-item-exclude">
+          <ExclusionSelect
+            :key="props.hostingJurisdictions.timestamp"
+            label="hosting_preferences.happ_selection.exclude"
+            :options="countries"
+            :is-busy="isJurisdictionExclusionsBusy"
+            :initially-selected="props.hostingJurisdictions.criteriaType === ECriteriaType.exclude ? props.hostingJurisdictions.value : []"
+            @save="saveHostingJurisdictions($event, ECriteriaType.exclude)"
+          />
+        </div>
+        <div class="happ-selection-section__tags-item happ-selection-section__tags-item-include">
+          <ExclusionSelect
+            :key="props.hostingJurisdictions.timestamp"
+            label="hosting_preferences.happ_selection.include"
+            :options="countries"
+            :is-busy="isJurisdictionExclusionsBusy"
+            :initially-selected="props.hostingJurisdictions.criteriaType === 'include' ? props.hostingJurisdictions.value : []"
+            @save="saveHostingJurisdictions($event, ECriteriaType.include)"
+          />
+        </div>
+      </div>
 
-      <div class="happ-selection-section__category-tags">
+      <div class="happ-selection-section__tags happ-selection-section--category">
         <span class="happ-selection-section__selection-label happ-selection-section__selection-label--main">
           {{ $t('hosting_preferences.happ_selection.category_tags') }}
         </span>
-        <div class="happ-selection-section__category-tags-item happ-selection-section__category-tags-item-exclude">
-          <CategoryExclusionSelect
+        <div class="happ-selection-section__tags-item happ-selection-section__tags-item-exclude">
+          <ExclusionSelect
             label="hosting_preferences.happ_selection.exclude"
+            :options="categories"
+            :is-busy="isHostingCategoriesExclusionsBusy"
+            @save="saveHostingCategoriesExclusions"
           />
         </div>
-        <div class="happ-selection-section__category-tags-item happ-selection-section__category-tags-item-include">
-          <CategoryExclusionSelect
+        <div class="happ-selection-section__tags-item happ-selection-section__tags-item-include">
+          <ExclusionSelect
             label="hosting_preferences.happ_selection.include"
+            :options="categories"
+            :is-busy="isHostingCategoriesExclusionsBusy"
+            @save="saveHostingCategoriesExclusions"
           />
         </div>
       </div>
@@ -34,12 +108,15 @@ import JurisdictionExclusionSelect from '@/components/settings/hostingPreference
 <style lang="scss" scoped>
 .card-content {
   padding: 0 0 35px 0;
-  opacity: 0.5;
-  pointer-events: none;
 }
 
 .happ-selection-section {
-  &__category-tags {
+  &--category {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  &__tags {
     margin-top: 16px;
 
     &-selected {
@@ -49,7 +126,7 @@ import JurisdictionExclusionSelect from '@/components/settings/hostingPreference
     }
   }
 
-  &__category-tags-item {
+  &__tags-item {
     margin-top: 12px;
     padding-left: 40px;
     display: flex;