Modrinth-plus/apps/frontend/src/components/ui/ModalCreation.vue

<template>
  <Modal ref="modal" header="Create a project">
    <div class="modal-creation universal-labels">
      <div class="markdown-body">
        <p>New projects are created as drafts and can be found under your profile page.</p>
      </div>
      <label for="name">
        <span class="label__title">Name<span class="required">*</span></span>
      </label>
      <input
        id="name"
        v-model="name"
        type="text"
        maxlength="64"
        placeholder="Enter project name..."
        autocomplete="off"
        @input="updatedName()"
      />
      <label for="slug">
        <span class="label__title">URL<span class="required">*</span></span>
      </label>
      <div class="text-input-wrapper">
        <div class="text-input-wrapper__before">https://modrinth.com/project/</div>
        <input
          id="slug"
          v-model="slug"
          type="text"
          maxlength="64"
          autocomplete="off"
          @input="manualSlug = true"
        />
      </div>
      <label for="visibility">
        <span class="label__title">Visibility<span class="required">*</span></span>
        <span class="label__description">
          The visibility of your project after it has been approved.
        </span>
      </label>
      <multiselect
        id="visibility"
        v-model="visibility"
        :options="visibilities"
        track-by="actual"
        label="display"
        :multiple="false"
        :searchable="false"
        :show-no-results="false"
        :show-labels="false"
        placeholder="Choose visibility.."
        open-direction="bottom"
      />
      <label for="additional-information">
        <span class="label__title">Summary<span class="required">*</span></span>
        <span class="label__description"
          >This appears in search and on the sidebar of your project's page.</span
        >
      </label>
      <div class="textarea-wrapper">
        <textarea id="additional-information" v-model="description" maxlength="256" />
      </div>
      <div class="push-right input-group">
        <button class="iconified-button" @click="cancel">
          <CrossIcon />
          Cancel
        </button>
        <button class="iconified-button brand-button" @click="createProject">
          <CheckIcon />
          Continue
        </button>
      </div>
    </div>
  </Modal>
</template>

<script>
import { Multiselect } from "vue-multiselect";
import CrossIcon from "~/assets/images/utils/x.svg?component";
import CheckIcon from "~/assets/images/utils/right-arrow.svg?component";
import Modal from "~/components/ui/Modal.vue";

export default {
  components: {
    CrossIcon,
    CheckIcon,
    Modal,
    Multiselect,
  },
  props: {
    organizationId: {
      type: String,
      required: false,
      default: null,
    },
  },
  setup() {
    const tags = useTags();

    return { tags };
  },
  data() {
    return {
      name: "",
      slug: "",
      description: "",
      manualSlug: false,
      visibilities: [
        {
          actual: "approved",
          display: "Public",
        },
        {
          actual: "private",
          display: "Private",
        },
        {
          actual: "unlisted",
          display: "Unlisted",
        },
      ],
      visibility: {
        actual: "approved",
        display: "Public",
      },
    };
  },
  methods: {
    cancel() {
      this.$refs.modal.hide();
    },
    async createProject() {
      startLoading();

      const formData = new FormData();

      const auth = await useAuth();

      const projectData = {
        title: this.name.trim(),
        project_type: "mod",
        slug: this.slug,
        description: this.description.trim(),
        body: "",
        requested_status: this.visibility.actual,
        initial_versions: [],
        team_members: [
          {
            user_id: auth.value.user.id,
            name: auth.value.user.username,
            role: "Owner",
          },
        ],
        categories: [],
        client_side: "required",
        server_side: "required",
        license_id: "LicenseRef-Unknown",
        is_draft: true,
      };

      if (this.organizationId) {
        projectData.organization_id = this.organizationId;
      }

      formData.append("data", JSON.stringify(projectData));

      try {
        await useBaseFetch("project", {
          method: "POST",
          body: formData,
          headers: {
            "Content-Disposition": formData,
          },
        });

        this.$refs.modal.hide();
        await this.$router.push({
          name: "type-id",
          params: {
            type: "project",
            id: this.slug,
          },
        });
      } catch (err) {
        this.$notify({
          group: "main",
          title: "An error occurred",
          text: err.data.description,
          type: "error",
        });
      }
      stopLoading();
    },
    show() {
      this.projectType = this.tags.projectTypes[0].display;
      this.name = "";
      this.slug = "";
      this.description = "";
      this.manualSlug = false;
      this.$refs.modal.show();
    },
    updatedName() {
      if (!this.manualSlug) {
        this.slug = this.name
          .trim()
          .toLowerCase()
          .replaceAll(" ", "-")
          .replaceAll(/[^a-zA-Z0-9!@$()`.+,_"-]/g, "")
          .replaceAll(/--+/gm, "-");
      }
    },
  },
};
</script>

<style scoped lang="scss">
.modal-creation {
  padding: var(--spacing-card-bg);
  display: flex;
  flex-direction: column;

  .markdown-body {
    margin-bottom: 0.5rem;
  }

  input {
    width: 20rem;
    max-width: 100%;
  }

  .text-input-wrapper {
    width: 100%;
  }

  textarea {
    min-height: 5rem;
  }

  .input-group {
    margin-top: var(--spacing-card-md);
  }
}
</style>