decpdf.site/src/ProductControls.vue

<template>
	<nav class="d-flex justify-content-end">
		<itemadder :list="'/api/product/' + pid + '/available_metadata'" :target="'/api/product/' + pid + '/metadata'" method="PUT"></itemadder>
		<div ref="ddcreate_child" class="dropdown ms-1">
            <button class="btn btn-success dropdown-toggle" title="Add" data-bs-toggle="dropdown"><i class="fa fa-plus-circle"></i></button>
            <ul class="dropdown-menu" style="min-width: 300px;">
				<li class="p-2">
					<strong>Create new child product</strong>
					<div class="input-group">
						<span class="input-group-text">Name</span>
						<input @keyup.enter="create_child" ref="increate_child" class="form-control" name="title" v-model="newtitle">
						<button class="btn btn-primary" @click="create_child">Create</button>
					</div>
				</li>
			</ul>
		</div>

		<div ref="ddrename" class="dropdown ms-1">
            <button class="btn btn-success dropdown-toggle" title="Rename" data-bs-toggle="dropdown" @click="set_edittitle"><i class="fa fa-pencil"></i></button>
            <ul class="dropdown-menu" style="min-width: 300px;">
				<li class="p-2">
					<strong>Rename product</strong>
					<div class="input-group">
						<span class="input-group-text">Name</span>
						<input ref="inrename" class="form-control" name="title" v-model="edittitle">
						<button class="btn btn-primary" @click="rename">Rename</button>
					</div>
				</li>
			</ul>
		</div>

		<button class="btn btn-success ms-1" @click="gemini_all"><i class="fa-solid fa-wand-magic"></i></button>
		<button class="btn btn-success ms-1" @click="gemini_all_move"><i class="fa-solid fa-wand-magic-sparkles"></i></button>

		<button :class="'btn ms-1 ' + dp_class" @click="delete_product"><i class="fa fa-trash"></i></button>

		<button @click="empty_trash" class="ms-1 btn btn-danger" v-if="prod.title=='Trash'"><i class="fa fa-recycle"></i></button>

	</nav>
</template>

<script>
import { ref } from 'vue/dist/vue.esm-bundler';

export default {
	props: [
		"pid",
	],
	setup() {
		return {
			newtitle: ref(""),
			edittitle: ref(""),
			dp_class: ref("btn-danger"),
			dp_clicks: ref(0),
			prod: ref({}),
		}
	},

	methods: {
		init() {
			$(this.$refs.ddcreate_child).on("show.bs.dropdown", this.add_child_show);
			$(this.$refs.ddcreate_child).on("shown.bs.dropdown", this.add_child_shown);

			$(this.$refs.ddrename).on("show.bs.dropdown", this.rename_show);
			$(this.$refs.ddrename).on("shown.bs.dropdown", this.rename_shown);
			this.get_product();
		},

		get_product() {
			$.ajax({
				url: "/api/product/" + this.pid,
				method: "GET"
			}).done(this.got_product);
		},

		add_child_show(e) {
			this.newtitle = "";
		},

		add_child_shown(e) {
			$(this.$refs.increate_child).focus();
		},

		rename_show(e) {
			this.edittitle = this.prod.title;
		},

		set_edittitle() {
			this.edittitle = this.prod.title;
		},

		got_product(data) {
			this.prod = data[0];
		},

		rename_shown(e) {
		},

		create_child() {
			console.log("Adding child");
			$.ajax({
				url: "/api/product/" + this.pid,
				method: "PUT",
				data: {
					title: this.newtitle
				}
			}).done(this.created_child);
		},

		rename() {
			$.ajax({
				url: "/api/product/" + this.pid,
				method: "POST",
				data: {
					title: this.edittitle
				}
			}).done(this.renamed);
		},

		renamed() {
			window.location.reload();
		},

		created_child(data) {
			window.location.reload();
		},

		delete_product() {
			this.dp_clicks++;
			console.log("clicked " + this.dp_clicks);
			if (this.dp_clicks >= 2) {
				$.ajax({
					url: "/api/product/" + this.pid,
					method: "DELETE",
				}).done(this.done_delete);
				return;
			}
			this.dp_class = "btn-warning";
			setTimeout(this.undo_delete, 1000);
		},

		undo_delete() {
			console.log("Undo delete");
			this.dp_class = "btn-danger";
			this.dp_clicks = 0;
		},


		done_delete(data) {
			document.location="/documents/" + data.id;
		},
		
		empty_trash() {
			$.ajax({
				url: "/api/product/trash/" + this.prod.id,
				method: "DELETE"
			}).done(this.trash_emptied);
		},
		
		trash_emptied() {
			window.location.reload();
		},

		gemini_all() {
			$.ajax({
				url: "/api/product/gemini_all/" + this.prod.id + "/keep",
				method: "GET"
			}).done(this.gemini_all_queued);
		},

		gemini_all_move() {
			$.ajax({
				url: "/api/product/gemini_all/" + this.prod.id + "/move",
				method: "GET"
			}).done(this.gemini_all_queued);
		},
		
		gemini_all_queued(d) {
		},

	},

	mounted() {
		this.init();
	},
};

</script>