1+ <template >
2+ <modal :show =" show" @close =" emit('close')"
3+ <template #icon >
4+ <svg xmlns =" http://www.w3.org/2000/svg" fill =" none" viewBox =" 0 0 24 24" stroke-width =" 1.5" stroke =" currentColor" class =" w-8 h-8"
5+ <path stroke-linecap =" round" stroke-linejoin =" round" d =" M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Z"
6+ </svg >
7+ </template >
8+ <template #title >
9+ Change form workspace
10+ </template >
11+ <div class =" p-4"
12+ <div class =" flex space-x-4 items-center"
13+ <p >Current workspace:</p >
14+ <div class =" flex items-center cursor group p-2 rounded border"
15+ <div class =" rounded-full h-8 8"
16+ <img v-if =" isUrl(workspace.icon)"
17+ :src =" workspace.icon"
18+ :alt =" workspace.name + ' icon'" class =" flex-shrink-0 h-8 w-8 rounded-full shadow"
19+ />
20+ <div v-else class =" rounded-full pt-2 text-xs truncate bg-nt-blue-lighter h-8 w-8 text-center shadow"
21+ v-text =" workspace.icon"
22+ />
23+ </div >
24+ <p class =" lg:block max-w-10 truncate ml-2 text-gray-800 dark:text-gray-200"
25+ {{ workspace.name }}
26+ </p >
27+ </div >
28+ </div >
29+ <form @submit.prevent =" onSubmit"
30+ <div class =" my-4"
31+ <select-input name =" workspace" class =" "
32+ :options =" workspacesSelectOptions"
33+ v-model =" selectedWorkspace"
34+ :required =" true"
35+ label =" Select workspace"
36+ />
37+ </div >
38+ <div class =" flex justify-end mt-4 pb-5"
39+ <v-button class =" mr-2" :loading =" loading"
40+ Change workspace
41+ </v-button >
42+ <v-button color =" white" @click.prevent =" emit('close')"
43+ Close
44+ </v-button >
45+ </div >
46+ </form >
47+ </div >
48+ </modal >
49+ </template >
50+
51+ <script setup>
52+ import { ref , defineProps , defineEmits , computed } from ' vue'
53+ const emit = defineEmits ([' close'
54+ const workspacesStore = useWorkspacesStore ()
55+ const formsStore = useFormsStore ()
56+
57+ const selectedWorkspace = ref (null );
58+ const props = defineProps ({
59+ show: { type: Boolean , required: true },
60+ form: { type: Object , required: true },
61+ })
62+ const workspaces = computed (() => workspacesStore .getAll )
63+ const workspace = computed (() => workspacesStore .getByKey (props .form ? .workspace_id ))
64+ const loading = ref (false )
65+ const workspacesSelectOptions = computed (()=> workspaces .value .filter ((w )=> {
66+ return w .id !== workspace .value .id
67+ }).map (workspace => ({ name: workspace .name , value: workspace .id })))
68+
69+
70+ const onSubmit = () => {
71+ const endpoint = ' /open/forms/' + props .form .id + ' /workspace/' + selectedWorkspace .value
72+ if (! selectedWorkspace .value ) {
73+ useAlert ().error (' Please select a workspace!'
74+ return ;
75+ }
76+ opnFetch (endpoint, { method: ' POST' then (data => {
77+ loading .value = false ;
78+ emit (' close'
79+ useAlert ().success (' Form workspace updated successfully.'
80+ workspacesStore .setCurrentId (selectedWorkspace .value )
81+ formsStore .resetState ()
82+ formsStore .loadAll (selectedWorkspace .value )
83+ const router = useRouter ()
84+ const route = useRoute ()
85+ if (route .name !== ' home'
86+ router .push ({ name: ' home'
87+ }
88+ formsStore .loadAll (selectedWorkspace .value )
89+ }).catch ((error ) => {
90+ useAlert ().error (error? .data ? .message ?? ' Something went wrong, please try again!'
91+ loading .value = false ;
92+ })
93+ }
94+
95+ const isUrl = (str ) => {
96+ try {
97+ new URL (str)
98+ } catch (_) {
99+ return false
100+ }
101+ return true
102+ }
103+ < / script>
0 commit comments