hamlab/mobilizon-frontend
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(front): upgrade to Oruga 0.8.x

Browse Source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2023-12-14 10:50:38 +01:00
parent 76668e0beb
commit a9676d6481
37 changed files with 243 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Account/ActorAutoComplete.vue
View File

@@ -1,5 +1,5 @@
<template>
<o-inputitems
<o-taginput
:modelValue="modelValueWithDisplayName"
@update:modelValue="(val: IActor[]) => $emit('update:modelValue', val)"
:data="availableActors"
@@ -8,12 +8,12 @@
:open-on-focus="false"
field="displayName"
:placeholder="t('Add a recipient')"
@typing="getActors"
@input="getActors"
>
<template #default="props">
<ActorInline :actor="props.option" />
</template>
</o-inputitems>
</o-taginput>
</template>
<script setup lang="ts">

6
src/components/Comment/EventComment.vue
View File

@@ -235,7 +235,7 @@ import type { Locale } from "date-fns";
import ReportModal from "@/components/Report/ReportModal.vue";
import { useCreateReport } from "@/composition/apollo/report";
import { Snackbar } from "@/plugins/snackbar";
import { useProgrammatic } from "@oruga-ui/oruga-next";
import { useOruga } from "@oruga-ui/oruga-next";
import RouteName from "@/router/name";
const router = useRouter();
@@ -372,7 +372,7 @@ const reportComment = async (
};
const snackbar = inject<Snackbar>("snackbar");
const { oruga } = useProgrammatic();
const { notification } = useOruga();
onCreateReportError((e) => {
isReportModalActive.value = false;
@@ -387,7 +387,7 @@ onCreateReportError((e) => {
oneCreateReportDone(() => {
isReportModalActive.value = false;
oruga.notification.open({
notification.open({
message: t("Comment from {'@'}{username} reported", {
username: props.comment.actor?.preferredUsername,
}),

6
src/components/Discussion/DiscussionComment.vue
View File

@@ -157,7 +157,7 @@ import type { Locale } from "date-fns";
import { useI18n } from "vue-i18n";
import { useCreateReport } from "@/composition/apollo/report";
import { Snackbar } from "@/plugins/snackbar";
import { useProgrammatic } from "@oruga-ui/oruga-next";
import { useOruga } from "@oruga-ui/oruga-next";
import ReportModal from "@/components/Report/ReportModal.vue";
const Editor = defineAsyncComponent(
@@ -220,7 +220,7 @@ const reportComment = async (
};
const snackbar = inject<Snackbar>("snackbar");
const { oruga } = useProgrammatic();
const { notification } = useOruga();
onCreateReportError((e) => {
isReportModalActive.value = false;
@@ -235,7 +235,7 @@ onCreateReportError((e) => {
oneCreateReportDone(() => {
isReportModalActive.value = false;
oruga.notification.open({
notification.open({
message: t("Comment from {'@'}{username} reported", {
username: props.modelValue.actor?.preferredUsername,
}),

6
src/components/Event/EventActionSection.vue
View File

@@ -381,7 +381,7 @@ import { ApolloCache, FetchResult } from "@apollo/client/core";
import { useMutation } from "@vue/apollo-composable";
import { useCreateReport } from "@/composition/apollo/report";
import { useDeleteEvent } from "@/composition/apollo/event";
import { useProgrammatic } from "@oruga-ui/oruga-next";
import { useOruga } from "@oruga-ui/oruga-next";
import ExternalParticipationButton from "./ExternalParticipationButton.vue";
import AccountMultiple from "vue-material-design-icons/AccountMultiple.vue";
import Bullhorn from "vue-material-design-icons/Bullhorn.vue";
@@ -619,11 +619,11 @@ onJoinEventMutationDone(({ data }) => {
}
});
const { oruga } = useProgrammatic();
const { notification } = useOruga();
onJoinEventMutationError((error) => {
if (error.message) {
oruga.notification.open({
notification.open({
message: error.message,
variant: "danger",
position: "bottom-right",

3
src/components/Event/EventMetadataList.vue
View File

@@ -10,9 +10,9 @@
</div>
</div>
<o-field
grouped
:label="$t('Find or add an element')"
label-for="event-metadata-autocomplete"
class="flex-wrap justify-center gap-2"
>
<o-autocomplete
expanded
@@ -27,6 +27,7 @@
id="event-metadata-autocomplete"
@select="addElement"
dir="auto"
class="flex-1 min-w-[200px]"
>
<template v-slot="props">
<div class="dark:bg-violet-3 p-1 flex items-center gap-1">

8
src/components/Event/EventParticipationCard.vue
View File

@@ -337,7 +337,7 @@ import ViewCompact from "vue-material-design-icons/ViewCompact.vue";
import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
import AccountGroup from "vue-material-design-icons/AccountGroup.vue";
import Video from "vue-material-design-icons/Video.vue";
import { useProgrammatic } from "@oruga-ui/oruga-next";
import { useOruga } from "@oruga-ui/oruga-next";
import { computed, inject } from "vue";
import { useI18n } from "vue-i18n";
import { Dialog } from "@/plugins/dialog";
@@ -401,7 +401,7 @@ const openDeleteEventModal = (
});
};
const { oruga } = useProgrammatic();
const { notification } = useOruga();
const snackbar = inject<Snackbar>("snackbar");
const {
@@ -419,7 +419,7 @@ onDeleteEventDone(() => {
*/
emit("eventDeleted", props.participation.event.id);
oruga.notification.open({
notification.open({
message: t("Event {eventTitle} deleted", {
eventTitle: props.participation.event.title,
}),
@@ -460,7 +460,7 @@ const gotToWithCheck = async (
) {
const organizerActor = participation.event.organizerActor as IPerson;
await changeIdentity(organizerActor);
oruga.notification.open({
notification.open({
message: t(
"Current identity has been changed to {identityName} in order to manage this event.",
{

25
src/components/Event/FullAddressAutoComplete.vue
View File

@@ -23,9 +23,9 @@
:data="addressData"
v-model="queryTextWithDefault"
:placeholder="placeholderWithDefault"
:customFormatter="(elem: IAddress) => addressFullName(elem)"
:debounceTyping="debounceDelay"
@typing="asyncData"
:formatter="(elem: IAddress) => addressFullName(elem)"
:debounce="debounceDelay"
@input="asyncData"
:icon="canShowLocateMeButton ? null : 'map-marker'"
expanded
@select="setSelected"
@@ -114,30 +114,39 @@
required
v-model="selected.description"
id="addressNameInput"
expanded
/>
</o-field>
<o-field :label="t('Street')" labelFor="streetInput">
<o-input v-model="selected.street" id="streetInput" />
<o-input v-model="selected.street" id="streetInput" expanded />
</o-field>
<o-field grouped>
<o-field :label="t('Postal Code')" labelFor="postalCodeInput">
<o-input v-model="selected.postalCode" id="postalCodeInput" />
<o-input
v-model="selected.postalCode"
id="postalCodeInput"
expanded
/>
</o-field>
<o-field :label="t('Locality')" labelFor="localityInput">
<o-input v-model="selected.locality" id="localityInput" />
<o-input
v-model="selected.locality"
id="localityInput"
expanded
/>
</o-field>
</o-field>
<o-field grouped>
<o-field :label="t('Region')" labelFor="regionInput">
<o-input v-model="selected.region" id="regionInput" />
<o-input v-model="selected.region" id="regionInput" expanded />
</o-field>
<o-field :label="t('Country')" labelFor="countryInput">
<o-input v-model="selected.country" id="countryInput" />
<o-input v-model="selected.country" id="countryInput" expanded />
</o-field>
</o-field>
</section>

6
src/components/Event/TagInput.vue
View File

@@ -11,7 +11,7 @@
<HelpCircleOutline :size="16" />
</o-tooltip>
</template>
<o-inputitems
<o-taginput
v-model="tagsStrings"
:data="filteredTags"
:allow-autocomplete="true"
@@ -21,11 +21,11 @@
:maxlength="20"
:maxitems="10"
:placeholder="$t('Eg: Stockholm, Dance, Chess…')"
@typing="debouncedGetFilteredTags"
@input="debouncedGetFilteredTags"
:id="id"
dir="auto"
>
</o-inputitems>
</o-taginput>
</o-field>
</template>
<script lang="ts" setup>

3
src/components/Home/SearchFields.vue
View File

@@ -17,6 +17,7 @@
autocomplete="off"
autocorrect="off"
maxlength="1024"
expanded
/>
<full-address-auto-complete
:resultType="AddressSearchType.ADMINISTRATIVE"
@@ -102,7 +103,7 @@ const submit = () => {
const { t } = useI18n({ useScope: "global" });
</script>
<style scoped>
#search-anchor :deep(.o-ctrl-input) {
#search-anchor :deep(.o-input__wrapper) {
flex: 1;
}
</style>

6
src/components/NavBar.vue
View File

@@ -235,7 +235,7 @@ import { useLazyQuery, useMutation } from "@vue/apollo-composable";
import { UPDATE_DEFAULT_ACTOR } from "@/graphql/actor";
import { changeIdentity } from "@/utils/identity";
import { useRegistrationConfig } from "@/composition/apollo/config";
import { useProgrammatic } from "@oruga-ui/oruga-next";
import { useOruga } from "@oruga-ui/oruga-next";
import {
UNREAD_ACTOR_CONVERSATIONS,
UNREAD_ACTOR_CONVERSATIONS_SUBSCRIPTION,
@@ -350,12 +350,12 @@ onDone(({ data }) => {
const showMobileMenu = ref(false);
const { oruga } = useProgrammatic();
const { notification } = useOruga();
const performLogout = async () => {
console.debug("Logging out client...");
await logout();
oruga.notification.open({
notification.open({
message: t("You have been logged-out"),
variant: "success",
position: "bottom-right",

1
src/components/Report/ReportModal.vue
View File

@@ -55,6 +55,7 @@
id="additional-comments"
autofocus
ref="reportAdditionalCommentsInput"
expanded
/>
</o-field>

24
src/components/Share/ShareModal.vue
View File

@@ -13,19 +13,17 @@
<o-tooltip
:label="t('URL copied to clipboard')"
:active="showCopiedTooltip"
always
variant="success"
position="left"
>
<o-button
variant="primary"
icon-right="content-paste"
native-type="button"
@click="copyURL"
@keyup.enter="copyURL"
:title="t('Copy URL to clipboard')"
/>
</o-tooltip>
/>
<o-button
variant="primary"
icon-right="content-paste"
native-type="button"
@click="copyURL"
@keyup.enter="copyURL"
:title="t('Copy URL to clipboard')"
/>
</p>
</o-field>
<div class="flex flex-wrap gap-1">
@@ -132,7 +130,7 @@ const props = withDefaults(
const { t } = useI18n({ useScope: "global" });
const URLInput = ref<{ $refs: { input: HTMLInputElement } } | null>(null);
const URLInput = ref<{ $refs: { inputRef: HTMLInputElement } } | null>(null);
const showCopiedTooltip = ref(false);
@@ -162,7 +160,7 @@ const mastodonShare = computed((): string | undefined =>
);
const copyURL = (): void => {
URLInput.value?.$refs.input.select();
URLInput.value?.$refs.inputRef.select();
document.execCommand("copy");
showCopiedTooltip.value = true;
setTimeout(() => {