ceate-meeting.component.html 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. <h2 mat-dialog-title class="text-center">
  2. <span>Create Meeting</span>
  3. </h2>
  4. <mat-dialog-content class="mat-typography">
  5. <form fxLayout="column" fxLayoutAlign="start stretch" class="gap-20">
  6. <div
  7. class="form-input"
  8. fxLayout="column"
  9. fxLayoutAlign="start stretch"
  10. fxFlex="100"
  11. >
  12. <label for="title">
  13. <span>Title <span class="red">*</span></span>
  14. </label>
  15. <input type="text" id="title" placeholder="Enter Meeting Title" />
  16. </div>
  17. <div
  18. class="form-input"
  19. fxLayout="column"
  20. fxLayoutAlign="start stretch"
  21. fxFlex="100"
  22. >
  23. <label for="location">
  24. <span>Meeting location or Link <span class="red">*</span></span>
  25. </label>
  26. <input
  27. type="text"
  28. id="location"
  29. placeholder="Enter meeting location or link"
  30. />
  31. </div>
  32. <div
  33. class="form-input"
  34. fxLayout="column"
  35. fxLayoutAlign="start stretch"
  36. fxFlex="100"
  37. >
  38. <label for="location">
  39. <span>Details <span class="red">*</span></span>
  40. </label>
  41. <textarea
  42. rows="4"
  43. cols="6"
  44. placeholder="Enter meeting details"
  45. ></textarea>
  46. </div>
  47. <div fxLayout="row" fxLayoutAlign="start start" class="gap-20">
  48. <div
  49. fxLayout="column"
  50. fxLayoutAlign="start stretch"
  51. fxFlex.lt-md="100"
  52. fxFlex.gt-sm="50"
  53. >
  54. <label for="date">
  55. <span class="fz-13">Date<span class="red">*</span></span>
  56. </label>
  57. <input class="date" type="date" id="date" placeholder="Select Date" />
  58. </div>
  59. <div
  60. fxLayout="column"
  61. fxLayoutAlign="start stretch"
  62. fxFlex.lt-md="100"
  63. fxFlex.gt-sm="50"
  64. >
  65. <label for="time">
  66. <span class="fz-13">Time<span class="red">*</span></span>
  67. </label>
  68. <div fxLayout="row" fxLayoutAlign="start ccenter" class="gap-20">
  69. <input
  70. type="time"
  71. id="time"
  72. placeholder="From"
  73. class="time"
  74. fxFlex.lt-md="100"
  75. fxFlex.gt-sm="50"
  76. />
  77. <input
  78. type="time"
  79. id="time"
  80. placeholder="To"
  81. class="time"
  82. fxFlex.lt-md="100"
  83. fxFlex.gt-sm="50"
  84. />
  85. </div>
  86. </div>
  87. </div>
  88. <div
  89. class="form-input"
  90. fxLayout="column"
  91. fxLayoutAlign="start stretch"
  92. fxFlex="100"
  93. >
  94. <label for="repeated">
  95. <span>Repeat</span>
  96. </label>
  97. <select></select>
  98. </div>
  99. <div fxLayout="column" fxLayoutAlign="start stretch" fxFlex="100">
  100. <span class="fz-13">Assigne</span>
  101. <mat-form-field appearance="outline">
  102. <mat-select multiple>
  103. <!-- <mat-select-trigger>
  104. {{toppings.value?.[0] || ''}}
  105. @if ((toppings.value?.length || 0) > 1) {
  106. <span class="example-additional-selection">
  107. (+{{ (toppings.value?.length || 0) - 1 }}
  108. {{ toppings.value?.length === 2 ? "other" : "others" }})
  109. </span>
  110. }
  111. </mat-select-trigger> -->
  112. <!-- @for (topping of toppingList; track topping) {
  113. <mat-option [value]="topping">{{ topping }}</mat-option>
  114. } -->
  115. </mat-select>
  116. </mat-form-field>
  117. </div>
  118. </form>
  119. </mat-dialog-content>
  120. <mat-dialog-actions align="end">
  121. <button mat-button mat-dialog-close>Cancel</button>
  122. <button mat-button [mat-dialog-close]="true" cdkFocusInitial>save</button>
  123. </mat-dialog-actions>