Updated License Note field with buttons

This commit is contained in:
BurnLP2013 2024-07-11 12:41:17 +02:00
parent 265889c633
commit 65b77cff85
2 changed files with 38 additions and 53 deletions

View file

@ -134,41 +134,6 @@
</v-form>
</v-card>
</v-dialog>
<!-- -->
<!-- EDIT SECTION -->
<!-- -->
<v-btn icon class="mr-3" @click="edit = true">
<Pencil />
</v-btn>
<v-dialog v-model="edit" width="600" persistent>
<v-card max-width="600">
<v-form @submit.prevent="submit">
<v-card-title>
<span class="headline">Edit License</span>
</v-card-title>
<v-card-subtitle>
<span> Edit a License inside the Database</span>
</v-card-subtitle>
<v-card-text>
<!-- PLACEHOLDER FOR ELEMENTS -->
</v-card-text>
<v-card-actions>
<v-row>
<v-col cols="10" align="right" no-gutters>
<v-btn
class="ms-auto"
text="Cancel"
@click="edit = false"
></v-btn>
</v-col>
<v-col>
<v-btn class="ms-auto" text="Save" type="submit"></v-btn>
</v-col>
</v-row>
</v-card-actions>
</v-form>
</v-card>
</v-dialog>
</div>
<!-- Search -->
@ -196,7 +161,7 @@
import { store } from "@/store";
import { SubmitEventPromise } from "vuetify";
import { ref } from "vue";
import { Plus, LogOut, Pencil, FolderPlus } from "lucide-vue-next";
import { Plus, LogOut, FolderPlus } from "lucide-vue-next";
function handlelogout() {
store.setToken(null);
@ -240,11 +205,7 @@ const addNotes = ref<string | undefined>("");
const addStartDate = ref<Date | undefined>();
const addStopDate = ref<Date | undefined>();
//
// EDIT SECTION
//
const edit = ref(false);
</script>
<style scoped>

View file

@ -4,7 +4,6 @@
width="96vw"
rounded="lg"
class="mt-3"
style="border-left: 0.5rem outset #0fa4af"
>
<v-expansion-panels>
<v-expansion-panel>
@ -78,28 +77,39 @@
</div>
</v-expansion-panel-title>
<v-expansion-panel-text>
Notes:
<v-row
class="flex-nowrap bg-surface-variant"
class="flex-nowrap"
no-gutters
>
<v-col
class="flex-grow-0 flex-shrink-0"
cols="7"
class="flex-grow-1 flex-shrink-0 overflow-x-auto border-e-md"
cols="10"
>
Notes: {{ props.notes }}
</v-col>
{{ props.notes }}
</v-col>
<v-col
class="flex-grow-0 flex-shrink-1"
cols="5"
class="flex-grow-0 flex-shrink-1 overflow-x-auto"
cols="2"
align="end"
>
I'm 5 column wide and I shrink if there's not enough space
<!-- -->
<!-- EDIT SECTION -->
<!-- -->
<v-btn class="mr-3" flat size="small">
<Pencil />
</v-btn>
<!-- -->
<!-- DELETE BTN -->
<!-- -->
<v-btn class="mr-3" flat size="small" color="red" variant="text">
<Trash />
</v-btn>
</v-col>
</v-row>
</v-expansion-panel-text>
</v-expansion-panel>
</v-expansion-panels>
@ -107,7 +117,8 @@
</template>
<script setup lang="ts">
import { Infinity, KeyRound, CalendarCheck, CalendarX } from "lucide-vue-next";
import { Infinity, KeyRound, CalendarCheck, CalendarX, Pencil, Trash } from "lucide-vue-next";
import { ref } from "vue";
const props = defineProps({
licenseName: String,
@ -117,6 +128,19 @@ const props = defineProps({
amount: Number,
notes: String,
});
//
// EDIT SECTION
//
const edit = ref(false);
</script>
<style scoped>