Skip to content

Commit

Permalink
feat: update tags
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexey-yarmosh
alexey-yarmosh committed Aug 23, 2024
1 parent 8eb0365 commit fbeda77
Show file tree
Hide file tree
Showing 2 changed files with 105 additions and 53 deletions.
105 changes: 101 additions & 4 deletions components/ProbeDetails.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,8 +67,46 @@
City where the probe is located. If you know that city is wrong it can be changed here: type in the valid city and click save.
</p>
<label for="tags" class="mt-3 block text-xs">Tags</label>
<div class="relative mt-1">
<i class="pi pi-pencil absolute right-3 top-2.5 text-bluegray-500"/>
<div v-if="isEditingTags">
<div>
<div v-for="(tag, index) in tagsToEdit" :key="index" class="mb-2 flex items-center" :class="{ 'mb-5': !isTagValid(tag.value) }">
<Select v-model="tag.uPrefix" class="grow" :options="uPrefixes" :scroll-height="'200px'"/>
<span class="mx-2">-</span>
<span class="relative grow">
<InputText v-model="tag.value" :invalid="!isTagValid(tag.value)" class="w-full"/>
<p v-if="!isTagValid(tag.value)" class="absolute pl-1 text-red-500">Invalid tag</p>
</span>
<Button icon="pi pi-trash" text aria-label="Remove" class="text-surface-900 dark:text-surface-0" @click="removeTag(index)"/>
</div>
</div>
<div class="mt-6 flex">
<Button
label="Add tag"
icon="pi pi-plus"
severity="secondary"
class="dark:!bg-dark-800"
outlined
@click="addTag"
/>
<Button
label="Save"
icon="pi pi-check"
severity="secondary"
outlined
class="ml-auto bg-surface-200"
@click="saveTags"
/>
<Button label="Cancel" severity="secondary" outlined class="ml-1 dark:!bg-dark-800" @click="cancelTags"/>
</div>
<p class="mt-3 text-2xs text-bluegray-400">
Public tags of the probe. They can be used as location filters for a measurement. Format is <code class="font-bold">u-${prefix}-${value}</code> where prefix is user/organization github login, and value is your custom string.

E.g. for user with github username <code class="font-bold">"jimaek"</code>
and tag <code class="font-bold">"home1"</code> location filter is<br>
<code class="font-bold">{ "tags": ["u-jimaek-home1"] }</code>.
</p>
</div>
<div v-else class="relative mt-1">
<AutoComplete
id="tags"
v-model="tagStrings"
Expand All @@ -78,6 +116,15 @@
disabled
:typeahead="false"
/>
<Button
icon="pi pi-pencil"
class="!absolute right-0.5 top-0.5 text-bluegray-500"
severity="secondary"
text
aria-label="Edit tags"
size="small"
@click="editTags"
/>
</div>
<p class="mt-1 text-xs text-bluegray-400">
Public tags of the probe. They can be used as location filters for a measurement.
Expand All @@ -90,8 +137,10 @@
</template>

<script setup lang="ts">
import { createItem, customEndpoint, updateItem } from '@directus/sdk';
import { updateItem } from '@directus/sdk';
import capitalize from 'lodash/capitalize';
import memoize from 'lodash/memoize';
import { useAuth } from '~/store/auth';
import { initGoogleMap } from '~/utils/init-google-map';
import { sendErrorToast, sendToast } from '~/utils/send-toast';
Expand All @@ -106,7 +155,7 @@
},
});
const probe = computed(() => ({ ...props.probe }));
const probe = ref({ ...props.probe });
initGoogleMap(probe.value);
Expand All @@ -116,7 +165,54 @@
// TAGS
const auth = useAuth();
const user = auth.getUser as User;
const isEditingTags = ref<boolean>(false);
const tagStrings = computed(() => probe.value.tags.map(({ prefix, value }) => `u-${prefix}-${value}`));
const tagsToEdit = ref<{ uPrefix: string, value: string }[]>([]);
const uPrefixes = [ user.github_username, ...user.github_organizations ].map(value => `u-${value}`);
const editTags = () => {
isEditingTags.value = true;
tagsToEdit.value = probe.value.tags.map(({ prefix, value }) => ({
uPrefix: `u-${prefix}`,
value,
}));
};
const addTag = () => {
tagsToEdit.value.push({ uPrefix: '', value: '' });
};
const removeTag = (index: number) => {
tagsToEdit.value?.splice(index, 1);
};
const saveTags = async () => {
probe.value.tags = convertTags(tagsToEdit.value);
tagsToEdit.value = [];
isEditingTags.value = false;
};
const convertTags = (tagsToEdit: { uPrefix: string, value: string }[]) => tagsToEdit.map(({ uPrefix, value }) => ({
prefix: uPrefix.replace('u-', ''),
value,
}));
const tagRegex = /^[a-zA-Z0-9-]+$/;
const isTagValid = memoize((value: string) => {
return value === '' || (value.length <= 32 && tagRegex.test(value));
});
const cancelTags = () => {
tagsToEdit.value = [];
isEditingTags.value = false;
};
// // ACTIONS
Expand All @@ -128,6 +224,7 @@
await $directus.request(updateItem('gp_adopted_probes', probe.value.id, {
name: probe.value.name,
city: probe.value.city,
tags: tagsToEdit.value.length ? convertTags(tagsToEdit.value) : probe.value.tags,
}));
sendToast('success', 'Done', 'Probe info was successfully updated');
Expand Down
53 changes: 4 additions & 49 deletions pages/probes.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,14 +161,16 @@
</template>

<script setup lang="ts">
import { aggregate, readItems, updateItem } from '@directus/sdk';
import memoize from 'lodash/memoize';
import { aggregate, readItems } from '@directus/sdk';
import type { DataTablePageEvent, DataTableRowClickEvent } from 'primevue/datatable';
import type { PageState } from 'primevue/paginator';
import CountryFlag from 'vue-country-flag-next';
import { useAuth } from '~/store/auth';
import { sendErrorToast } from '~/utils/send-toast';
const auth = useAuth();
const user = auth.getUser as User;
const config = useRuntimeConfig();
useHead({
Expand Down Expand Up @@ -275,51 +277,4 @@
await loadLazyData();
probeDetailsDialog.value = false;
};
// EDIT TAGS
const auth = useAuth();
const user = auth.getUser as User;
const isEditingTags = ref<boolean>(false);
const tags = ref<{ uPrefix: string, value: string }[]>([]);
const uPrefixes = [ user.github_username, ...user.github_organizations ].map(value => `u-${value}`);
const editTags = (currentTags: Probe['tags']) => {
currentTags = currentTags || [];
isEditingTags.value = true;
tags.value = currentTags.map(({ prefix, value }) => ({
uPrefix: `u-${prefix}`,
value,
}));
};
const addTag = () => {
tags.value.push({ uPrefix: '', value: '' });
};
const removeTag = (index: number) => {
tags.value?.splice(index, 1);
};
const saveTags = async (id: number) => {
isEditingTags.value = false;
await updateProbe(id, { tags: tags.value.map(({ uPrefix, value }) => ({
prefix: uPrefix.replace('u-', ''),
value,
})) });
};
const tagRegex = /^[a-zA-Z0-9-]+$/;
const isTagValid = memoize((value: string) => {
return value === '' || (value.length <= 32 && tagRegex.test(value));
});
const cancelTags = () => {
tags.value = [];
isEditingTags.value = false;
};
</script>

0 comments on commit fbeda77

Please sign in to comment.