Skip to content

Commit

Permalink
feat: implement get and set zome calls
Browse files Browse the repository at this point in the history
  • Loading branch information
mateuszRybczonek committed Feb 27, 2024
1 parent 46d4db7 commit a655202
Show file tree
Hide file tree
Showing 9 changed files with 323 additions and 66 deletions.
23 changes: 19 additions & 4 deletions src/components/settings/hostingPreferences/BaseCombobox.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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) => ({
Expand All @@ -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(() => {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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"
/>

Expand Down Expand Up @@ -261,6 +268,12 @@ watch(
margin-left: 8px;
margin-top: 4px;
cursor: pointer;
&--disabled {
opacity: 0.15;
pointer-events: none;
cursor: not-allowed;
}
}
&-combobox {
Expand All @@ -283,6 +296,8 @@ watch(
&--disabled {
opacity: 0.15;
pointer-events: none;
cursor: not-allowed;
}
}
Expand Down

This file was deleted.

32 changes: 32 additions & 0 deletions src/components/settings/hostingPreferences/ExclusionSelect.vue
Original file line number Diff line number Diff line change
@@ -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>
101 changes: 89 additions & 12 deletions src/components/settings/hostingPreferences/HAppSelectionSection.vue
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
Expand All @@ -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 {
Expand All @@ -49,7 +126,7 @@ import JurisdictionExclusionSelect from '@/components/settings/hostingPreference
}
}
&__category-tags-item {
&__tags-item {
margin-top: 12px;
padding-left: 40px;
display: flex;
Expand Down
Loading

0 comments on commit a655202

Please sign in to comment.