rudeshark.net/packages/client/src/components/MkInstanceSelectDialog.vue
2023-04-07 17:01:42 -07:00

184 lines
3.3 KiB
Vue

<template>
<XModalWindow
ref="dialogEl"
:with-ok-button="true"
:ok-button-disabled="selected == null"
@click="cancel()"
@close="cancel()"
@ok="ok()"
@closed="$emit('closed')"
>
<template #header>{{ i18n.ts.selectInstance }}</template>
<div class="mehkoush">
<div class="form">
<MkInput
v-model="hostname"
:autofocus="true"
@update:modelValue="search"
>
<template #label>{{ i18n.ts.instance }}</template>
</MkInput>
</div>
<div
v-if="hostname != ''"
class="result"
:class="{ hit: instances.length > 0 }"
>
<div v-if="instances.length > 0" class="instances">
<div
v-for="item in instances"
:key="item.id"
class="instance"
:class="{
selected: selected && selected.id === item.id,
}"
@click="selected = item"
@dblclick="ok()"
>
<div class="body">
<img
class="icon"
:src="
item.iconUrl ?? '/client-assets/dummy.png'
"
aria-hidden="true"
/>
<span class="name">{{ item.host }}</span>
</div>
</div>
</div>
<div v-else class="empty">
<span>{{ i18n.ts.noInstances }}</span>
</div>
</div>
</div>
</XModalWindow>
</template>
<script lang="ts" setup>
import MkInput from "@/components/form/input.vue";
import XModalWindow from "@/components/MkModalWindow.vue";
import * as os from "@/os";
import { i18n } from "@/i18n";
import { Instance } from "calckey-js/built/entities";
const emit = defineEmits<{
(ev: "ok", selected: Instance): void;
(ev: "cancel"): void;
(ev: "closed"): void;
}>();
let hostname = $ref("");
let instances: Instance[] = $ref([]);
let selected: Instance | null = $ref(null);
let dialogEl = $ref<InstanceType<typeof XModalWindow>>();
let searchOrderLatch = 0;
const search = () => {
if (hostname === "") {
instances = [];
return;
}
const searchId = ++searchOrderLatch;
os.api("federation/instances", {
host: hostname,
limit: 10,
blocked: false,
suspended: false,
sort: "+pubSub",
}).then((_instances) => {
if (searchId !== searchOrderLatch) return;
instances = _instances.map(
(x) =>
({
id: x.id,
host: x.host,
iconUrl: x.iconUrl,
} as Instance)
);
});
};
const ok = () => {
if (selected == null) return;
emit("ok", selected);
dialogEl?.close();
};
const cancel = () => {
emit("cancel");
dialogEl?.close();
};
</script>
<style lang="scss" scoped>
.mehkoush {
margin: var(--marginFull) 0;
> .form {
padding: 0 var(--root-margin);
}
> .result {
display: flex;
flex-direction: column;
overflow: auto;
height: 100%;
&.result.hit {
padding: 0;
}
> .instances {
flex: 1;
overflow: auto;
padding: 8px 0;
> .instance {
display: flex;
align-items: center;
padding: 8px var(--root-margin);
font-size: 14px;
&:hover {
background: var(--X7);
}
&.selected {
background: var(--accent);
color: #fff;
}
> * {
pointer-events: none;
user-select: none;
}
> .body {
padding: 0 8px;
width: 100%;
> .name {
display: block;
font-weight: bold;
}
> .icon {
width: 16px;
height: 16px;
margin-right: 8px;
float: left;
}
}
}
}
> .empty {
opacity: 0.7;
text-align: center;
}
}
}
</style>