Add public survey view link on survey page

Author: thecodeholic

vue/src/views/SurveyView.vue

@@ -5,26 +5,51 @@
  <h1 class="text-3xl font-bold text-gray-900">
  {{ route.params.id ? model.title : "Create a Survey" }}
  </h1>
- <button
- v-if="route.params.id"
- type="button"
- @click="deleteSurvey()"
- class="py-2 px-3 text-white bg-red-500 rounded-md hover:bg-red-600"
- >
- <svg
- xmlns="http://www.w3.org/2000/svg"
- class="h-5 w-5 -mt-1 inline-block"
- viewBox="0 0 20 20"
- fill="currentColor"
+
+ <div class="flex">
+ <a
+ :href="`/view/survey/${model.slug}`"
+ target="_blank"
+ v-if="model.slug"
+ class="flex py-2 px-4 border border-transparent text-sm rounded-md text-indigo-500 hover:bg-indigo-700 hover:text-white transition-colors focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 mr-2"
  >
- <path
- fill-rule="evenodd"
- d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
- clip-rule="evenodd"
- />
- </svg>
- Delete Survey
- </button>
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ class="h-5 w-5"
+ fill="none"
+ viewBox="0 0 24 24"
+ stroke="currentColor"
+ >
+ <path
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ stroke-width="2"
+ d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+ />
+ </svg>
+ View Public link
+ </a>
+ <button
+ v-if="route.params.id"
+ type="button"
+ @click="deleteSurvey()"
+ class="py-2 px-3 text-white bg-red-500 rounded-md hover:bg-red-600"
+ >
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ class="h-5 w-5 -mt-1 inline-block"
+ viewBox="0 0 20 20"
+ fill="currentColor"
+ >
+ <path
+ fill-rule="evenodd"
+ d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
+ clip-rule="evenodd"
+ />
+ </svg>
+ Delete Survey
+ </button>
+ </div>
  </div>
  </template>
  <div v-if="surveyLoading" class="flex justify-center">Loading...</div>
@@ -220,6 +245,7 @@ const surveyLoading = computed(() => store.state.currentSurvey.loading);
 // Create empty survey
 let model = ref({
  title: "",
+ slug: "",
  status: false,
  description: null,
  image: null,
@@ -293,17 +319,16 @@ function questionChange(question) {
  * Create or update survey
  */
 function saveSurvey() {
- store.dispatch("saveSurvey", { ...model.value })
- .then(({ data }) => {
- store.commit('notify', {
- type: 'success',
- message: "The survey was successfully updated"
- })
- router.push({
- name: "SurveyView",
- params: { id: data.data.id },
- });
+ store.dispatch("saveSurvey", { ...model.value }).then(({ data }) => {
+ store.commit("notify", {
+ type: "success",
+ message: "The survey was successfully updated",
+ });
+ router.push({
+ name: "SurveyView",
+ params: { id: data.data.id },
  });
+ });
 }
 
 function deleteSurvey() {