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

Migrate to Vue 3 and Vite

Browse Source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2022-07-12 10:55:28 +02:00
parent 8f4099ee33
commit ee20e03cc2
464 changed files with 31515 additions and 32758 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
js/src/views/Discussions/Create.vue
View File

@@ -1,11 +1,11 @@
<template>
<section class="section container">
<section class="container mx-auto">
<breadcrumbs-nav
v-if="group"
:links="[
{
name: RouteName.MY_GROUPS,
text: $t('My groups'),
text: t('My groups'),
},
{
name: RouteName.GROUP,
@@ -15,137 +15,122 @@
{
name: RouteName.DISCUSSION_LIST,
params: { preferredUsername: usernameWithDomain(group) },
text: $t('Discussions'),
text: t('Discussions'),
},
{
name: RouteName.CREATE_DISCUSSION,
params: { preferredUsername: usernameWithDomain(group) },
text: $t('Create'),
text: t('Create'),
},
]"
/>
<h1 class="title">{{ $t("Create a discussion") }}</h1>
<h1 class="title">{{ t("Create a discussion") }}</h1>
<form @submit.prevent="createDiscussion">
<b-field
:label="$t('Title')"
<o-field
:label="t('Title')"
label-for="discussion-title"
:message="errors.title"
:type="errors.title ? 'is-danger' : undefined"
>
<b-input
<o-input
aria-required="true"
required
v-model="discussion.title"
id="discussion-title"
/>
</b-field>
</o-field>
<b-field :label="$t('Text')">
<editor v-model="discussion.text" :aria-label="$t('Comment body')" />
</b-field>
<o-field :label="t('Text')">
<Editor
v-model="discussion.text"
:aria-label="t('Comment body')"
v-if="currentActor"
:current-actor="currentActor"
/>
</o-field>
<button class="button is-primary" type="submit">
{{ $t("Create the discussion") }}
</button>
<o-button class="mt-2" native-type="submit">
{{ t("Create the discussion") }}
</o-button>
</form>
</section>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import {
displayName,
IGroup,
IPerson,
usernameWithDomain,
} from "@/types/actor";
import { CURRENT_ACTOR_CLIENT } from "@/graphql/actor";
import { FETCH_GROUP } from "@/graphql/group";
<script lang="ts" setup>
import { displayName, usernameWithDomain } from "@/types/actor";
import { CREATE_DISCUSSION } from "@/graphql/discussion";
import RouteName from "../../router/name";
import { computed, defineAsyncComponent, reactive, inject } from "vue";
import { useCurrentActorClient } from "@/composition/apollo/actor";
import { useGroup } from "@/composition/apollo/group";
import { useI18n } from "vue-i18n";
import { useMutation } from "@vue/apollo-composable";
import { IDiscussion } from "@/types/discussions";
import { useRouter } from "vue-router";
import { useHead } from "@vueuse/head";
import { Notifier } from "@/plugins/notifier";
import { AbsintheGraphQLError } from "@/types/errors.model";
@Component({
components: {
editor: () =>
import(/* webpackChunkName: "editor" */ "@/components/Editor.vue"),
},
apollo: {
currentActor: CURRENT_ACTOR_CLIENT,
group: {
query: FETCH_GROUP,
variables() {
return {
name: this.preferredUsername,
};
},
skip() {
return !this.preferredUsername;
},
const Editor = defineAsyncComponent(() => import("@/components/Editor.vue"));
const props = defineProps<{ preferredUsername: string }>();
const { currentActor } = useCurrentActorClient();
const { group } = useGroup(props.preferredUsername);
const { t } = useI18n({ useScope: "global" });
useHead({
title: computed(() => t("Create a discussion")),
});
const discussion = reactive({ title: "", text: "" });
const errors = reactive({ title: "" });
const router = useRouter();
const notifier = inject<Notifier>("notifier");
const { mutate, onDone, onError } = useMutation<{
createDiscussion: IDiscussion;
}>(CREATE_DISCUSSION);
onDone(({ data }) => {
router.push({
name: RouteName.DISCUSSION,
params: {
id: data?.createDiscussion.id,
slug: data?.createDiscussion.slug,
},
},
metaInfo() {
return {
title: this.$t("Create a discussion") as string,
};
},
})
export default class CreateDiscussion extends Vue {
@Prop({ type: String, required: true }) preferredUsername!: string;
});
});
group!: IGroup;
currentActor!: IPerson;
discussion = { title: "", text: "" };
errors = { title: "" };
RouteName = RouteName;
usernameWithDomain = usernameWithDomain;
displayName = displayName;
async createDiscussion(): Promise<void> {
this.errors = { title: "" };
try {
if (!this.group.id || !this.currentActor.id) return;
const { data } = await this.$apollo.mutate({
mutation: CREATE_DISCUSSION,
variables: {
title: this.discussion.title,
text: this.discussion.text,
actorId: parseInt(this.group.id, 10),
},
});
await this.$router.push({
name: RouteName.DISCUSSION,
params: {
id: data.createDiscussion.id,
slug: data.createDiscussion.slug,
},
});
} catch (error: any) {
console.error(error);
if (error.graphQLErrors && error.graphQLErrors.length > 0) {
if (error.graphQLErrors[0].field == "title") {
this.errors.title = error.graphQLErrors[0].message;
} else {
this.$notifier.error(error.graphQLErrors[0].message);
}
}
onError((error) => {
console.error(error);
if (error.graphQLErrors && error.graphQLErrors.length > 0) {
const graphQLError = error.graphQLErrors[0] as AbsintheGraphQLError;
if (graphQLError.field == "title") {
errors.title = graphQLError.message;
} else {
notifier?.error(graphQLError.message);
}
}
}
});
const createDiscussion = async (): Promise<void> => {
errors.title = "";
if (!group.value?.id || !currentActor.value?.id) return;
mutate({
title: discussion.title,
text: discussion.text,
actorId: group.value.id,
});
};
</script>
<style lang="scss" scoped>
.container.section {
background: $white;
}
.markdown-render h1 {
font-size: 2em;
}