dragonroll/frontend/app/components/windows/NewFolderWindow.vue

<script setup>
import { onBeforeUnmount, onMounted, ref } from 'vue';
import { SetupHandle, SetSize, ResetPosition, ClearWindow } from '@/services/Windows';
import WindowHandle from './partials/WindowHandle.vue';
import Server from '~/services/Server';
import { emitter } from '~/services/Emitter';

const handle = ref(null);
const wrapper = ref(null);

const props = defineProps(['data']);
const data = props.data;

let id = data.id;

const newName = ref('');
const creating = !!data.name;

onMounted(() => {
    newName.value = data.name || '';
    SetupHandle(id, handle);
    SetSize(id, { width: 420, height: 200 });
    ResetPosition(id, 'center');
});

onBeforeUnmount(() => {
    ClearWindow({ type: 'new_folder' });
});

function confirmSave() {
    if (!newName.value.trim()) {
        return;
    }

    const folderData = {
        name: newName.value.trim(),
        campaign: data.campaign
    };

    const url = creating ? '/folder/rename' : '/folder/create';
    if (creating) {
        folderData.id = data.folderId;
    }

    Server().post(url, folderData).then((response) => {
        if (response.data.status !== 'ok') {
            return;
        }
        emitter.emit('folder-saved', response.data.folder);
        ClearWindow({ id });
    }).catch(() => {});
}
</script>

<template>
    <div class="window-wrapper" :id="'window-wrapper-' + id" ref="wrapper">
        <WindowHandle :window="id" ref="handle"></WindowHandle>

        <div class="body">
            <h3>{{ creating ? 'Rename Folder' : 'New Folder' }}</h3>
            <form v-on:submit.prevent="confirmSave">
                <div class="form-field">
                    <input
                        type="text"
                        v-model="newName"
                        placeholder="Folder name"
                        autofocus
                        autocomplete="off"
                    >
                </div>
                <div class="form-actions">
                    <button class="btn-primary sound-click" type="submit">{{ creating ? 'Save' : 'Create' }}</button>
                </div>
            </form>
        </div>
    </div>
</template>

<style scoped>
.window-wrapper {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.body {
    width: 100%;
    padding: 10px;
}

h3 {
    margin: 0 0 10px 10px;
    font-family: MrEavesRemake;
}

form {
    margin-left: 10px;
    margin-right: 10px;
}

.form-field {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.form-field > * {
    flex-grow: 1;
}

input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-background-soft);
    color: var(--color-text);
    font-size: 14px;
}

input:focus {
    outline: none;
    border-color: var(--color-accent);
}

.form-actions {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.form-actions button {
    width: 100%;
    max-width: 200px;
}
</style>