WebHooker/admin/components/GroupEditor.vue

<template>
  <Teleport to="body">
    <Transition name="fade">
      <div v-if="open" class="overlay" @click.self="close"></div>
    </Transition>
    <Transition name="slide">
      <aside v-if="open" class="editor" role="dialog" aria-modal="true">
        <div class="editor-head">
          <h2>{{ isEdit ? t("groupEditor.editTitle") : t("groupEditor.newTitle") }}</h2>
          <button class="icon-btn" :title="t('groupEditor.close')" @click="close">✕</button>
        </div>
        <form class="editor-body" @submit.prevent="save">
          <div class="row2">
            <div class="field">
              <label>{{ t("groupEditor.name") }}</label>
              <input
                v-model="form.name"
                type="text"
                :placeholder="t('groupEditor.namePlaceholder')"
                required
              />
            </div>
            <div class="field">
              <label>{{ t("groupEditor.id") }}</label>
              <input
                v-model="form.id"
                type="text"
                :placeholder="t('groupEditor.idPlaceholder')"
                :disabled="isEdit"
                required
              />
              <div class="hint">{{ t("groupEditor.idHint") }}</div>
            </div>
          </div>
          <div class="field">
            <label
              >{{ t("groupEditor.membersNote") }}
              <span class="lbl-note">{{ t("groupEditor.membersHint") }}</span></label
            >
            <p class="hint">
              {{ t("groupEditor.membersGoPanel") }}
            </p>
          </div>
          <div v-if="superAdmin" class="field">
            <label
              >{{ t("groupEditor.owners") }}
              <span class="lbl-note">{{ t("groupEditor.ownersNote") }}</span></label
            >
            <input
              v-model="form.owners"
              type="text"
              :placeholder="t('groupEditor.ownersPlaceholder')"
            />
            <div class="hint">{{ t("groupEditor.ownersHint") }}</div>
          </div>
          <div v-else class="field">
            <label
              >{{ t("groupEditor.owners") }}
              <span class="lbl-note">{{ t("groupEditor.ownersSuperOnly") }}</span></label
            >
            <input v-model="ownersReadonly" type="text" disabled />
          </div>
          <div class="field">
            <label
              >{{ t("groupEditor.providers") }}
              <span class="lbl-note">{{ t("groupEditor.providersNote") }}</span></label
            >
            <div class="provider-options">
              <label class="inline">
                <input
                  type="checkbox"
                  :checked="form.providers.includes('github')"
                  @change="toggleProvider('github', $event)"
                />
                <span>GitHub</span>
              </label>
              <label class="inline">
                <input
                  type="checkbox"
                  :checked="form.providers.includes('gitea')"
                  @change="toggleProvider('gitea', $event)"
                />
                <span>Gitea</span>
              </label>
            </div>
            <div class="hint">{{ t("groupEditor.providersHint") }}</div>
          </div>
          <label class="inline">
            <input v-model="form.emoji" type="checkbox" />
            <span>{{ t("groupEditor.emoji") }}</span>
          </label>
          <div class="err">{{ formError }}</div>
        </form>
        <div class="editor-foot">
          <button class="btn btn-ghost" type="button" @click="close">
            {{ t("groupEditor.cancel") }}
          </button>
          <button class="btn btn-accent" type="button" :disabled="saving" @click="save">
            {{ t("groupEditor.save") }}
          </button>
        </div>
      </aside>
    </Transition>
  </Teleport>
</template>

<script setup lang="ts">
import { reactive, watch } from "vue";
import type { Group } from "~/types";

const { t } = useI18n();

const props = defineProps<{
  open: boolean;
  group: Group | null;
  saving: boolean;
  superAdmin?: boolean;
}>();
const emit = defineEmits<{
  (e: "close"): void;
  (e: "save", group: Group): void;
}>();

const isEdit = computed(() => props.group != null);
const formError = ref("");
const ownersReadonly = computed(() => (props.group?.owners ?? []).join(", "));

const form = reactive({
  id: "",
  name: "",
  owners: "",
  providers: [] as ("github" | "gitea")[],
  emoji: true,
});

function splitList(text: string): string[] {
  return text
    .split(",")
    .map((s) => s.trim())
    .filter(Boolean);
}

function toggleProvider(p: "github" | "gitea", e: Event): void {
  const checked = (e.target as HTMLInputElement).checked;
  form.providers = checked
    ? [...new Set([...form.providers, p])]
    : form.providers.filter((x) => x !== p);
}

watch(
  () => props.open,
  (open) => {
    if (!open) return;
    const g = props.group;
    form.id = g?.id ?? "";
    form.name = g?.name ?? "";
    form.owners = (g?.owners ?? []).join(", ");
    form.providers = (g?.providers ?? []).filter(
      (p): p is "github" | "gitea" => p === "github" || p === "gitea",
    );
    form.emoji = g?.emoji ?? true;
    formError.value = "";
  },
);

function close(): void {
  emit("close");
}

function save(): void {
  formError.value = "";
  const id = form.id.trim();
  const name = form.name.trim();
  if (!/^[a-z0-9][a-z0-9-]*$/.test(id)) {
    formError.value = t("groupEditor.errIdFormat");
    return;
  }
  if (!name) {
    formError.value = t("groupEditor.errName");
    return;
  }
  const owners = splitList(form.owners);
  const members = props.group?.members
    ? props.group.members.map((m) => ({ ...m }))
    : props.group?.adminIds?.length
      ? props.group.adminIds.map((login) => ({ login, role: "owner" as const }))
      : [];
  emit("save", {
    id,
    name,
    members,
    adminIds: members.filter((m) => m.role === "owner").map((m) => m.login),
    owners: props.superAdmin ? (owners.length ? owners : undefined) : props.group?.owners,
    providers: form.providers.length ? form.providers : undefined,
    emoji: form.emoji,
  });
}
</script>